/* ============================================================
   dental-atlas.css
   The dental atlas screen: every treatment and condition in the
   clinic shown as the shape the chart will actually draw for it.

   Global, not scoped: the specimens are built by
   js/dental-chart-inline-v2.js (drawSpecimens) and therefore
   cannot carry Blazor's scoped-CSS attribute — the same reason
   dental-chart-inline-v2.css is global.
   ============================================================ */

.datlas__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .75rem;
}

.datlas__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--bs-card-bg, var(--bs-white, #fff));
}

/* The drawings are pale by design, so their ground stays light in dark mode too —
   inverting it would sink a white tooth into a dark card. */
.datlas__art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .35rem;
    min-height: 128px;
    padding: .6rem .5rem .45rem;
    background: #fbfcfd;
    border-bottom: 1px solid var(--bs-border-color);
}

    .datlas__art .dsp-front {
        display: block;
        width: 68px;
        height: auto;
    }

    .datlas__art .dsp-occl {
        display: block;
        width: 42px;
        height: auto;
        align-self: center;
    }

/* Nothing to draw: the clinic recorded this item but the chart has no shape for
   it. Said plainly rather than left as an empty box the reader has to interpret. */
.datlas__art--none {
    color: var(--bs-secondary-color);
    font-size: .78rem;
    align-items: center;
    text-align: center;
}

.datlas__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .65rem .65rem;
}

.datlas__name {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.35;
}

.datlas__sub {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    line-height: 1.35;
}

.datlas__layers {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .66rem;
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
    word-break: break-all;
    direction: ltr;
    text-align: start;
    margin-top: .1rem;
}

.datlas__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .35rem;
}

.datlas__chip {
    font-size: .65rem;
    line-height: 1;
    padding: .28rem .45rem;
    border-radius: .25rem;
}

.datlas__chip--replaces { background: rgba(var(--bs-danger-rgb), .12); color: var(--bs-danger); }
.datlas__chip--occl { background: rgba(var(--bs-info-rgb), .14); color: var(--bs-info); }
.datlas__chip--surface { background: rgba(var(--bs-secondary-rgb), .14); color: var(--bs-secondary-color); }
.datlas__chip--unused { background: rgba(var(--bs-warning-rgb), .16); color: var(--bs-warning-text-emphasis, #997404); }

/* Group heading: a rule that carries the count, so a section reads as an
   inventory rather than a decorative divider. */
.datlas__group {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 1.75rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.datlas__group h5 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.datlas__group .datlas__count { font-size: .78rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

.datlas__faces { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }

.datlas__face {
    flex: 0 0 auto;
    text-align: center;
    background: #fbfcfd;
    border: 1px solid var(--bs-border-color);
    border-radius: .35rem;
    padding: .3rem;
}

    .datlas__face .dsp-front, .datlas__face .dsp-occl { width: 48px; height: auto; display: block; }

    .datlas__face span {
        display: block;
        font-size: .62rem;
        color: #6b7785;
        margin-top: .1rem;
    }

@media (max-width: 575.98px) {
    .datlas__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
    .datlas__art { min-height: 108px; }
    .datlas__art .dsp-front { width: 56px; }
}