/* ============================================================
   dental-chart-inline-v2.css
   Inline (in-treatment) dental chart for the V2 visit form.
   Loaded once globally because the teeth are built by
   js/dental-chart-inline-v2.js and therefore cannot carry
   Blazor scoped-CSS attributes.
   Isolated from DentalChartSelectorV2 (.tooth-dental-v2 …).
   ============================================================ */

:root {
    --dci-canvas-bg: #eef2f6;
    --dci-canvas-border: #d8e0ea;
    --dci-midline-color: rgba(100, 116, 139, .32);
    --dci-clinical-shape-outline: #596a77;
    --dci-clinical-shape-shadow: rgba(15, 23, 42, .16);
    --dci-light-clinical-outline: #5b7188;
    --dci-light-clinical-shadow: rgba(15, 23, 42, .24);

    /* Neutral anatomical palette. Clinical treatment/diagnosis artwork is kept
       deliberately outside these variables so its meaning cannot be changed by
       a cosmetic tooth-theme adjustment. */
    --dci-tooth-enamel: #f7f6f1;
    --dci-tooth-highlight: #ffffff;
    --dci-tooth-shadow: #dde1e5;
    --dci-tooth-root: #ece6db;
    --dci-tooth-outline: #a2adb8;
    --dci-tooth-fissure: #8f99a5;
    --dci-tooth-pulp: #dfa0a8;
    --dci-tooth-pulp-core: #c97d88;
    --dci-tooth-gum: #eaa6ae;
    --dci-tooth-bone: #ded6ca;
}

.dci-v2 {
    --dci-tooth-w: 48px;
    --dci-column-count: 16;
    --dci-arch-min-width: 880px;
    --dci-arch-max-width: 1500px;
    /* Shared by the tooth and its occlusal cell so both columns end up the same
       total width — otherwise the two rows drift apart towards the arch ends. */
    --dci-tooth-pad: .25rem;
    /* One gap for every column row, so the arch and its occlusal row keep the
       same column pitch at any screen size. */
    --dci-col-gap: .5rem;

    /* An arch must stay one row. Even at the smallest tooth size 16 teeth need
       ~700px, which a modal on a narrow screen does not have — and a wrapped arch
       reads as two separate arches, which is worse than scrolling. Both jaws share
       this one scroller so they never drift out of alignment with each other. */
    box-sizing: border-box;
    padding-inline: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: .65rem;
    background-color: var(--dci-canvas-bg);
    box-shadow: inset 0 0 0 1px var(--dci-canvas-border);
    transition: background-color .2s ease, box-shadow .2s ease;
}

    .dci-v2.dci-v2--child {
        --dci-tooth-w: 40px;
        --dci-column-count: 10;
        --dci-arch-min-width: 520px;
        --dci-arch-max-width: 900px;
    }

.dci-v2__jaw {
    display: grid;
    grid-template-columns: repeat(var(--dci-column-count), minmax(0, 1fr));
    position: relative;   /* anchors the bridge links laid over the gaps */
    justify-content: stretch;
    gap: var(--dci-col-gap);
    min-height: var(--dci-tooth-w);
    /* Each tooth owns an equal column. The columns expand with the treatment card,
       converting the old empty side gutters into useful spacing between teeth while
       a clinical upper bound prevents an ultrawide screen from tearing the arch apart. */
    width: min(100%, var(--dci-arch-max-width));
    min-width: var(--dci-arch-min-width);
    margin-inline: auto;
}

/* Anatomical midline between the right and left central incisors. Each chart row
   owns its segment so the guide stays tied to the centre of the arch's actual
   scrollable grid rather than to the visible viewport on narrow screens. */
.dci-v2__jaw::after,
.dci-v2__occl-row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    border-left: 1px dashed var(--dci-midline-color);
    pointer-events: none;
    transform: translateX(-.5px);
}

/* Labels sit OUTSIDE the arches (upper above, lower below); history controls face
   the clinical centre (upper below, lower above). This mirror layout keeps the
   occlusal rows readable while making each label's jaw association immediate.
   The full tooth name uses the body-level tooltip below, so it needs no permanent
   padding here and cannot be clipped by this chart's horizontal scroller. */
.dci-v2__jaw--upper {
    align-items: flex-end;
    padding: 1.7rem 0 1.5rem;
}

.dci-v2__jaw--lower {
    align-items: flex-start;
    padding: 1.5rem 0 1.7rem;
}

/* --- The loss mark on a pontic ---
   The empty ridge already says the tooth is absent, while the history button keeps
   how it was lost one click away. Drawing the old extraction/missing cross through
   a replacement crown makes the pontic look selected for extraction today, so the
   main chart hides that historical mark. The record itself is never changed. */
.dci-v2 [data-past-loss] {
    display: none;
}

/* --- Bridge span ---
   Carries a bridge connector across the gap between two teeth so the span reads
   as one piece of work. Colour and height are copied at runtime from the tooth's
   own connector, so every material matches its artwork with nothing duplicated
   here. Not interactive: the teeth underneath stay clickable. */
.dci-v2__bridge-link {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* --- Occlusal (chewing surface) rows ---
   One cell per column, matching the arch above so a surface always sits under its
   own tooth. Anterior columns render an empty cell that just holds the column open. */
.dci-v2__occl-row {
    display: grid;
    grid-template-columns: repeat(var(--dci-column-count), minmax(0, 1fr));
    position: relative;
    justify-content: stretch;
    gap: var(--dci-col-gap);
    width: min(100%, var(--dci-arch-max-width));
    min-width: var(--dci-arch-min-width);
    margin-inline: auto;
    padding: .15rem 0;
}

.dci-v2__occl {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dci-tooth-pad);
    border-radius: .5rem;
    cursor: pointer;
    flex-shrink: 0;
    justify-self: center;
}

    .dci-v2__occl.is-empty {
        cursor: default;
        pointer-events: none;
    }

    .dci-v2__occl svg {
        display: block;
        filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .10));
        transition: transform .15s ease, filter .15s ease;
    }

    .dci-v2__occl:not(.is-empty):hover {
        background: rgba(var(--bs-primary-rgb), .07);
    }

    .dci-v2__occl:not(.is-empty):hover svg {
        transform: scale(1.02);
        filter: drop-shadow(0 2px 4px rgba(var(--bs-primary-rgb), .14));
    }

    /* An anterior cell is an empty spacer that only holds the column open — it has
       no chewing surface to highlight, so selecting the tooth must not paint a
       floating box where no artwork exists. Same exclusion as :hover above. */
    .dci-v2__occl.is-selected:not(.is-empty) {
        background: rgba(var(--bs-primary-rgb), .11);
        outline: 1px solid rgba(var(--bs-primary-rgb), .36);
    }

.dci-v2.is-disabled .dci-v2__occl {
    cursor: default;
    pointer-events: none;
    opacity: .65;
}

/* --- Clickable faces on a chewing surface ---
   Invisible until touched: the drawing underneath is what the clinician reads, and
   a permanently outlined grid on 20 teeth would drown it. */
.dci-v2__zone {
    fill: transparent;
    stroke: none;
    cursor: pointer;
    transition: fill .12s ease;
}

    .dci-v2__zone:hover {
        fill: rgba(var(--bs-primary-rgb), .35);
    }

    /* A face the row has recorded, before any treatment paints it. */
    .dci-v2__zone.is-on {
        fill: rgba(var(--bs-primary-rgb), .28);
        stroke: rgba(var(--bs-primary-rgb), .65);
        stroke-width: .5;
    }

    .dci-v2__zone.is-on:hover {
        fill: rgba(var(--bs-danger-rgb), .30);   /* clicking again clears it */
        stroke: rgba(var(--bs-danger-rgb), .65);
    }

.dci-v2.is-disabled .dci-v2__zone {
    pointer-events: none;
}

/* --- Tooth wrapper --- */
.dci-v2__tooth {
    position: relative;
    isolation: isolate;
    cursor: pointer;
    padding: var(--dci-tooth-pad);
    border-radius: .75rem;
    z-index: 1;
    touch-action: none;
    justify-self: center;
}

    .dci-v2__tooth::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 1rem;
        background: rgba(var(--bs-primary-rgb), .08);
        opacity: 0;
        z-index: 0;
        box-shadow: inset 0 0 0 1px transparent;
        transition: opacity .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .dci-v2__tooth:hover::before {
        opacity: .72;
    }

    .dci-v2__tooth.is-selected::before {
        background: rgba(var(--bs-primary-rgb), .10);
        box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .22);
        opacity: 1;
    }

    .dci-v2__tooth svg {
        position: relative;
        z-index: 1;
        display: block;
        transform-origin: center;
        transition: transform .2s ease, filter .2s ease;
        filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .12));
    }

    .dci-v2__tooth:hover svg {
        transform: scale(1.025);
        filter: drop-shadow(0 4px 8px rgba(var(--bs-primary-rgb), .18));
    }

    .dci-v2__tooth.is-selected svg {
        transform: scale(1.04);
        filter: drop-shadow(0 5px 10px rgba(var(--bs-primary-rgb), .22));
    }

/* --- Clinical notation + FDI pill (lower below; upper overridden above) --- */
.dci-v2__notation {
    position: absolute;
    bottom: -1.4rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .16rem;
    color: var(--bs-primary);
    pointer-events: none;
    white-space: nowrap;
    background: var(--bs-white, #fff);
    padding: .125rem .3rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--bs-primary-rgb), .6);
    z-index: 2;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.dci-v2__jaw--upper .dci-v2__notation {
    top: -1.4rem;
    bottom: auto;
}

.dci-v2__notation-code {
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.15;
}

.dci-v2__notation-fdi {
    color: var(--bs-secondary-color);
    font-size: .5625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    opacity: .82;
    transition: color .2s ease, opacity .2s ease;
}

.dci-v2__tooth:hover .dci-v2__notation,
.dci-v2__tooth.is-selected .dci-v2__notation {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.dci-v2__tooth:hover .dci-v2__notation-fdi,
.dci-v2__tooth.is-selected .dci-v2__notation-fdi {
    color: rgba(255, 255, 255, .82);
    opacity: 1;
}

/* --- One unclipped, body-level name tooltip for every chart instance --- */
.dci-v2-tooltip {
    position: fixed;
    /* Runtime raises this above the highest visible AppModal (normally 4080).
       5000 is the no-JS-computation fallback. */
    z-index: 5000;
    display: block;
    max-width: min(14rem, calc(100vw - 1rem));
    padding: .25rem .42rem;
    border: 1px solid rgba(100, 116, 139, .34);
    border-radius: .35rem;
    background: #f8fafc;
    color: #475569;
    font-size: .66rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    box-shadow: 0 .18rem .5rem rgba(15, 23, 42, .12);
}

.dci-v2-tooltip[hidden] {
    display: none;
}

.dci-v2-tooltip::after {
    position: absolute;
    left: var(--dci-tooltip-arrow-x, 50%);
    width: .5rem;
    height: .5rem;
    transform: translateX(-50%) rotate(45deg);
    background: #f8fafc;
    content: "";
}

.dci-v2-tooltip[data-placement="top"]::after {
    bottom: -.25rem;
}

.dci-v2-tooltip[data-placement="bottom"]::after {
    top: -.25rem;
}

.dci-v2-tooltip__name {
    display: block;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
}

/* --- Per-tooth history button --- */
.dci-v2__history {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 20px;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    background: var(--bs-info);
    border: 1px solid rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    color: #fff;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.dci-v2__history.has-count {
    width: auto;
    min-width: 29px;
    padding-inline: .3rem;
    border-radius: 999px;
    gap: .28rem;
    background: rgba(var(--bs-info-rgb), .13);
    border-color: rgba(var(--bs-info-rgb), .38);
    color: var(--bs-info-text-emphasis, #087990);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.dci-v2__jaw--upper .dci-v2__history {
    top: auto;
    bottom: -22px;
}

    .dci-v2__history:hover {
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
    }

    .dci-v2__history i {
        font-size: .5rem;
        color: #fff;
    }

.dci-v2__history.has-count i,
.dci-v2__history.has-count .dci-v2__history-count {
    color: currentColor;
}

.dci-v2__history.has-count:hover,
.dci-v2__history.has-count:focus-visible {
    background: var(--bs-info);
    border-color: var(--bs-info);
    color: #fff;
}

.dci-v2__history-count {
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dci-v2__tooth:hover .dci-v2__history,
.dci-v2__tooth.is-selected .dci-v2__history,
.dci-v2__history:focus-visible {
    opacity: 1;
}

.dci-v2__history:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--bs-info-rgb), .3), 0 2px 4px rgba(0, 0, 0, .2);
}

/* --- Read-only / disabled --- */
.dci-v2.is-disabled .dci-v2__tooth {
    cursor: default;
    pointer-events: none;
    opacity: .65;
}

/* --- Dark mode (theme is a stylesheet swap; key off body[data-theme]) --- */
body[data-theme="dark"] {
    --dci-canvas-bg: #18212b;
    --dci-canvas-border: #334155;
    --dci-midline-color: rgba(148, 163, 184, .38);
    --dci-clinical-shape-outline: #a8b5c2;
    --dci-clinical-shape-shadow: rgba(0, 0, 0, .34);
    --dci-tooth-bone: #48515a;
    --dci-light-clinical-outline: #a8bdd1;
    --dci-light-clinical-shadow: rgba(0, 0, 0, .45);
}

body[data-theme="dark"] .dci-v2__notation {
    background: var(--dci-canvas-bg);
}

/* --- Narrow containers: shrink the whole arch, proportions intact ---
   Only the base width changes; each tooth keeps its own share of it
   (set inline by the JS as a ratio of the widest template). --- */
@media (max-width: 991.98px) {
    .dci-v2 {
        --dci-col-gap: .35rem;
    }

    .dci-v2 {
        --dci-tooth-w: 32px;
        --dci-arch-min-width: 640px;
    }

        .dci-v2.dci-v2--child {
            --dci-tooth-w: 26px;
            --dci-arch-min-width: 400px;
        }
}