/* ── Odontogram container ────────────────────────────────── */
.odontogram-container { display: flex; flex-direction: column; gap: 1.5rem; }

.odontogram-wrapper {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.teeth-section { margin-bottom: 1.75rem; }
.teeth-section:last-child { margin-bottom: 0; }

.section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cpod-text-muted);
    margin-bottom: 0.75rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.teeth-row {
    display: flex;
    justify-content: center;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.teeth-row::-webkit-scrollbar { height: 4px; }
.teeth-row::-webkit-scrollbar-track { background: transparent; }
.teeth-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Dentition toggle (top-left of .odontogram-wrapper) ─── */
.odontogram-wrapper { position: relative; }

.dentition-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem 0.28rem 0.5rem;
    background: rgba(31,92,89,0.07);
    border: 1px solid rgba(31,92,89,0.2);
    border-radius: 20px;
    color: var(--cpod-primary);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.dentition-toggle:hover { background: rgba(31,92,89,0.13); border-color: var(--cpod-primary); }
.dentition-toggle .dentition-icon { font-size: 0.7rem; }
.dentition-toggle .dentition-label { line-height: 1; }

/* ── Tooth container ─────────────────────────────────────── */
.tooth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    position: relative;
}

/* ── Extra / supranumerary tooth ─────────────────────────── */
.tooth-container.extra-tooth .tooth-bg {
    stroke: #d97706;
    stroke-dasharray: 4 2;
}
.tooth-container.extra-tooth .tooth-svg:hover .tooth-bg { stroke: #b45309; }
.tooth-container.extra-tooth.extra-tooth .tooth-svg.whole-planejado .tooth-bg,
.tooth-container.extra-tooth.extra-tooth .tooth-svg.whole-em_andamento .tooth-bg,
.tooth-container.extra-tooth.extra-tooth .tooth-svg.whole-concluido .tooth-bg {
    stroke-dasharray: 4 2; /* keep dashed when status active */
}

.extra-tooth-btn {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
    color: #92400e !important;
}
.extra-tooth-btn:hover {
    background: #fde68a !important;
    border-color: #b45309 !important;
    color: #78350f !important;
}

/* Remove (✕) button on extra tooth */
.extra-tooth-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #d97706;
    background: #fef3c7;
    color: #d97706;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    opacity: 0;
    transition: opacity 0.15s, background 0.12s;
}
.tooth-container.extra-tooth:hover .extra-tooth-remove { opacity: 1; }
.extra-tooth-remove:hover { background: #d97706; color: white; }

/* ── Add extra tooth button ──────────────────────────────── */
.add-extra-tooth-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 2px;
    align-self: center;
}

.btn-add-extra-tooth {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px dashed var(--border);
    background: transparent;
    color: var(--cpod-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-add-extra-tooth:hover {
    border-color: #d97706;
    color: #d97706;
    background: #fef3c7;
}

/* ── SVG Tooth ───────────────────────────────────────────── */
.tooth-svg {
    width: 100%;
    max-width: 58px;
    min-width: 36px;
    aspect-ratio: 1;
    cursor: pointer;
    display: block;
    transition: filter 0.15s, transform 0.15s;
    overflow: visible;
}

.tooth-svg:hover { transform: translateY(-2px); filter: drop-shadow(0 3px 6px rgba(31,92,89,0.25)); }
.tooth-svg:focus { outline: 2px solid var(--cpod-primary); outline-offset: 2px; border-radius: 8px; }

/* Background rect — carries overall tooth state */
.tooth-bg {
    fill: var(--tooth-normal);
    stroke: var(--tooth-border);
    stroke-width: 1.5;
    transition: fill 0.2s, stroke 0.15s;
}

.tooth-svg:hover .tooth-bg { stroke: var(--cpod-primary); stroke-width: 2; }

/* ── Whole-tooth status (on .tooth-svg) ──────────────────── */
/* Base state por tipo de procedimento */
.tooth-svg.with-procedure .tooth-bg { fill: rgba(31,92,89,0.07);  stroke: var(--cpod-primary); stroke-width: 3.5; }
.tooth-svg.absent         .tooth-bg { fill: #E5E7EB;               stroke: #9CA3AF;             stroke-width: 2.5; }
.tooth-svg.in-treatment   .tooth-bg { fill: rgba(195,51,243,0.07); stroke: var(--cpod-purple);  stroke-width: 3.5; }
.tooth-svg.treated        .tooth-bg { fill: rgba(51,243,195,0.12); stroke: var(--cpod-mint);    stroke-width: 3.5; }

/* Status-aware border colors (sobreposição mais específica) */
.tooth-svg.whole-planejado .tooth-bg {
    fill: rgba(6,182,212,0.07);
    stroke: var(--cpod-blue);
    stroke-width: 3.5;
    stroke-dasharray: 5 2;
}
.tooth-svg.whole-em_andamento .tooth-bg {
    fill: rgba(245,158,11,0.07);
    stroke: #f59e0b;
    stroke-width: 3.5;
}
.tooth-svg.whole-concluido .tooth-bg {
    fill: rgba(51,243,195,0.10);
    stroke: var(--cpod-mint);
    stroke-width: 3.5;
}

/* Anatomical groove overlay — colour adapts to dark/status bg */
.tooth-grooves { stroke: rgba(31,92,89,0.32); }
.tooth-svg.whole-planejado    .tooth-grooves,
.tooth-svg.whole-em_andamento .tooth-grooves,
.tooth-svg.whole-concluido    .tooth-grooves { stroke: rgba(255,255,255,0.35); }

/* ── 5 area paths ────────────────────────────────────────── */
.tooth-area {
    fill: transparent;
    stroke: rgba(31,92,89,0.28);
    stroke-width: 1.2;
    stroke-dasharray: 3.5 2.5;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.12s;
}

.tooth-area:hover { fill: rgba(51,195,243,0.25); }

/* Area status fills */
.tooth-area.has-planejado    { fill: rgba(51,195,243,0.55); }   /* cpod-blue */
.tooth-area.has-em_andamento { fill: rgba(195,51,243,0.50); }   /* cpod-purple */
.tooth-area.has-concluido,
.tooth-area.has-with-procedure,
.tooth-area.has-procedure    { fill: rgba(51,243,195,0.65); }   /* cpod-mint */
.tooth-area.has-absent       { fill: rgba(156,163,175,0.6); }   /* gray */
.tooth-area.has-in-treatment,
.tooth-area.has-in_treatment { fill: rgba(195,51,243,0.50); }   /* same as em_andamento */
.tooth-area.has-treated      { fill: rgba(51,243,195,0.65); }   /* same as concluido */

/* ── Tooth ID button ─────────────────────────────────────── */
.tooth-id-button {
    background: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: clamp(0.55rem, 1.2vw, 0.68rem);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--cpod-text-muted);
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 58px;
    min-width: 36px;
}

.tooth-id-button:hover {
    background: var(--accent);
    border-color: var(--cpod-primary);
    color: var(--cpod-primary);
}

.tooth-id-button.has-whole-procedure {
    background: var(--cpod-primary);
    color: #FFFFFF;
    border-color: var(--cpod-primary);
}

/* Status-aware button colors */
.tooth-id-button.whole-planejado {
    background: var(--cpod-blue);
    color: #FFFFFF;
    border-color: var(--cpod-blue);
}
.tooth-id-button.whole-em_andamento {
    background: #f59e0b;
    color: #FFFFFF;
    border-color: #f59e0b;
}
.tooth-id-button.whole-concluido {
    background: var(--cpod-primary);
    color: #FFFFFF;
    border-color: var(--cpod-primary);
}

/* ── Procedure-specific ID button states ─────────────────── */
/* ausente / extraido — dente não está presente */
.tooth-id-button.proc-ausente {
    background: #E5E7EB;
    border-color: #9CA3AF;
    color: #6B7280;
    text-decoration: line-through;
}
.tooth-id-button.proc-ausente:hover {
    background: #D1D5DB;
    border-color: #6B7280;
    color: #4B5563;
    text-decoration: line-through;
}

/* extrair — marcado para extração */
.tooth-id-button.proc-extrair {
    background: #FEF3C7;
    border-color: #D97706;
    color: #92400E;
}
.tooth-id-button.proc-extrair:hover {
    background: #FDE68A;
    border-color: #B45309;
    color: #78350F;
}

/* implante — prótese sobre implante */
.tooth-id-button.proc-implante {
    background: rgba(6,182,212,0.15);
    border-color: #0891B2;
    color: #0E7490;
    font-weight: 700;
}
.tooth-id-button.proc-implante:hover {
    background: rgba(6,182,212,0.28);
    border-color: #0369A1;
    color: #0369A1;
}

/* ── Bridge connector bar (per-tooth) ───────────────────── */
.tooth-bridges-bar {
    width: 100%;
    height: 14px;
    position: relative;
    pointer-events: none;
}

.bridge-segment {
    position: absolute;
    height: 5px;
    border-radius: 0;
    cursor: pointer;
    pointer-events: all;
    transition: opacity 0.15s, transform 0.15s;
    top: 4px;
}

.bridge-segment:hover { opacity: 0.7; transform: scaleY(1.4); }

.bridge-segment.start  { left: 50%;  right: -4px; border-radius: 3px 0 0 3px; }
.bridge-segment.middle { left: -4px; right: -4px; }
.bridge-segment.end    { left: -4px; right: 50%;  border-radius: 0 3px 3px 0; }
.bridge-segment.solo   { left: 15%;  right: 15%;  border-radius: 3px; }

.bridge-segment.status-planejado    { background: var(--cpod-blue); }
.bridge-segment.status-em_andamento { background: var(--cpod-purple); }
.bridge-segment.status-concluido    { background: var(--cpod-mint); }

/* ── Bridge mode UI ──────────────────────────────────────── */
.tabs-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.tabs-row .tabs-nav { flex: 1; }

.btn-bridge {
    flex-shrink: 0;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--muted);
    color: var(--cpod-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
    line-height: 1;
}

.btn-bridge:hover {
    border-color: var(--cpod-blue);
    color: var(--cpod-blue);
    background: rgba(51,195,243,0.1);
}

.btn-bridge.active {
    border-color: var(--cpod-blue);
    color: var(--cpod-blue);
    background: rgba(51,195,243,0.15);
}

.bridge-indicator {
    display: none;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: rgba(51,195,243,0.08);
    border: 1px solid rgba(51,195,243,0.3);
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.8rem;
    color: var(--cpod-primary);
    font-weight: 500;
}

.bridge-indicator.active { display: flex; }

.bridge-indicator > i { color: var(--cpod-blue); font-size: 0.75rem; }

#bridgeIndicatorText { flex: 1; }

.bridge-indicator-actions { display: flex; gap: 0.4rem; align-items: center; }

.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

.bridge-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border: 1.5px solid var(--cpod-primary);
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--cpod-primary);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.bridge-cancel-btn:hover { background: rgba(31,92,89,0.1); }

/* Bridge mode — tooth hover/selection feedback */
.bridge-mode .tooth-svg { cursor: crosshair; }

.tooth-container.bridge-selected .tooth-bg {
    stroke: var(--cpod-blue);
    stroke-width: 2.5;
    fill: rgba(51,195,243,0.12);
}

/* ── Dentition tabs ──────────────────────────────────────── */
.tabs-container { margin-bottom: 1.25rem; }

.tabs-nav {
    display: flex;
    background: var(--muted);
    border-radius: var(--radius);
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--border);
}

.tab-button {
    flex: 1;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.tab-button:hover { background: var(--accent); color: var(--cpod-primary); }
.tab-button.active {
    background: var(--cpod-primary);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}
.tab-button i { font-size: 0.9rem; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Legend ──────────────────────────────────────────────── */
.legend {
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.legend-title {
    margin: 0 0 0.625rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cpod-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.legend-items { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; }

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--foreground);
}

.legend-color {
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1.5px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.legend-color.normal         { background: #FFFFFF; border-color: var(--cpod-border); }
.legend-color.planning       { background: var(--cpod-blue); }
.legend-color.with-procedure { background: var(--cpod-mint); }
.legend-color.in-treatment   { background: var(--cpod-purple); }
.legend-color.treated        { background: var(--cpod-mint); opacity: 0.7; }
.legend-color.absent         { background: #9CA3AF; }