/* ============================================================
   ImplantGuide v3 — design system
   Clinical, calm, sky-blue (Dentbird tone). Scoped under .v3-app
   to avoid clashing with the Avada theme.
   ============================================================ */

.v3-app {
    /* ── Point colour: Atlassian blue ───────────────────────────────── */
    --c-brand:        #0052CC;   /* primary actions, selected            */
    --c-brand-strong: #0747A6;   /* hover                                */
    --c-brand-deep:   #09326C;   /* deepest ink                          */
    --c-brand-soft:   #E9F2FF;   /* selected subtle                      */
    --c-brand-softer: #F4F8FF;   /* faintest tint                        */
    --c-brand-border: #B3D4FF;   /* tinted border                        */
    --c-brand-mid:    #2684FF;   /* focus ring mid / bright              */
    --c-brand-text:   #0747A6;

    /* ── Neutrals: cool grey (Atlassian / Apple) ────────────────────── */
    --c-bg:        #F4F5F7;   /* app background — cool light grey        */
    --c-white:     #FFFFFF;   /* surface                                 */
    --c-text:      #172B4D;   /* ink — Atlassian navy-ink                */
    --c-muted:     #5E6C84;   /* secondary text                          */
    --c-light:     #8993A4;   /* tertiary / captions                     */
    --c-line:      #DFE1E6;   /* border — cool                           */
    --c-line-soft: #EBECF0;   /* border subtle                           */

    /* ── Status tones — Atlassian ───────────────────────────────────── */
    --s-amber-fg:#974F0C; --s-amber-bg:#FFF7E6; --s-amber-bd:#FFE2B8;
    --s-blue-fg: #0747A6; --s-blue-bg: #E9F2FF; --s-blue-bd: #B3D4FF;
    --s-violet-fg:#403294;--s-violet-bg:#EAE6FF;--s-violet-bd:#C0B6F2;
    --s-red-fg:  #AE2A19; --s-red-bg:  #FFEBE6; --s-red-bd: #FFBDAD;
    --s-green-fg:#216E4E; --s-green-bg:#E3FCEF; --s-green-bd:#ABF5D1;
    --s-gray-fg: #5E6C84; --s-gray-bg: #F4F5F7; --s-gray-bd:#DFE1E6;

    /* ── Radius — Atlassian uses small, tight radii ─────────────────── */
    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;

    /* ── Spacing scale — Atlassian 8px base (space.100 = 8px) ───────── */
    --sp-50: 4px; --sp-100: 7px; --sp-150: 11px; --sp-200: 14px;
    --sp-250: 18px; --sp-300: 22px; --sp-400: 29px; --sp-500: 36px;

    /* ── Elevation — Atlassian subtle shadows ───────────────────────── */
    --shadow-sm: 0 1px 1px rgba(9,30,66,.13), 0 0 1px rgba(9,30,66,.13);
    --shadow-md: 0 4px 8px -2px rgba(9,30,66,.16), 0 0 1px rgba(9,30,66,.13);
    --shadow-lg: 0 8px 16px -4px rgba(9,30,66,.18), 0 0 1px rgba(9,30,66,.13);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

    /* ── Dark chrome (header / shell) — graphite ink ────────────────── */
    --c-ink:        #15171C;   /* darkest — top bar background           */
    --c-ink-2:      #1E2128;   /* raised dark surface                    */
    --c-ink-3:      #2A2E37;   /* dark border / hover                    */
    --c-ink-line:   #343842;   /* dark divider                           */
    --c-on-dark:    #E8EAED;   /* primary text on dark                   */
    --c-on-dark-2:  #A3A8B2;   /* muted text on dark                     */
    --c-on-dark-3:  #6B7280;   /* faint text on dark                     */

    /* ── Role accents (admin=teal / subadmin=amber / user=indigo) ───── */
    --role:         #0E7C7B;   /* default → overridden per role          */
    --role-soft:    #E4F0EF;
    --role-on-dark: #2DD4BF;   /* bright accent on dark header           */



    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "tnum" 1;
    line-height: 1.5;
    width: 100%;
    padding: 0 0 96px;
    box-sizing: border-box;
}
.v3-app *, .v3-app *::before, .v3-app *::after { box-sizing: border-box; }
.v3-app a { color: var(--c-brand-strong); text-decoration: none; }
.v3-app a:hover { text-decoration: underline; }
.v3-app :focus-visible { outline: 2px solid var(--c-brand-mid); outline-offset: 2px; border-radius: 4px; }

/* ---- Typography ---- */
.v3-app h1, .v3-app h2, .v3-app h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--c-text); }
.v3-page-title { font-size: 27px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--c-text); }
.v3-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--role); }
.v3-muted { color: var(--c-muted); }
.v3-help { font-size: 10.5px; color: var(--c-brand-strong, #0B6463); line-height: 1.4; font-weight: 500; }

/* ---- Buttons ---- */
.v3-btn, a.v3-btn, .v3-app a.v3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--r-md);
    font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: -.01em;
    border: none; background: var(--role); color: #fff;
    transition: background .12s ease, box-shadow .12s ease, transform .04s ease;
    line-height: 1; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(9,30,66,.12);
}
.v3-btn:hover, .v3-app a.v3-btn:hover { background: color-mix(in srgb, var(--role) 88%, black); text-decoration: none; color: #fff; }
.v3-btn:active { background: color-mix(in srgb, var(--role) 78%, black); transform: translateY(.5px); }
.v3-btn-sm { padding: 6px 11px; font-size: 12px; }
.v3-btn-lg { padding: 11px 20px; font-size: 13.5px; }
.v3-btn-outline, .v3-app a.v3-btn-outline { background: var(--c-line-soft); color: var(--c-text); }
.v3-btn-outline:hover, .v3-app a.v3-btn-outline:hover { background: var(--c-line); color: var(--c-text); }
.v3-btn-ghost, .v3-app a.v3-btn-ghost { background: transparent; color: var(--c-muted); }
.v3-btn-ghost:hover, .v3-app a.v3-btn-ghost:hover { background: var(--c-line-soft); color: var(--c-text); }
.v3-btn-success { background: var(--c-brand); color: #fff; }
.v3-btn-success:hover { background: var(--c-brand-strong); }
.v3-btn-danger, .v3-app a.v3-btn-danger { background: transparent; color: var(--s-red-fg); }
.v3-btn-danger:hover { background: var(--s-red-bg); }
.v3-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Cards ---- */
.v3-card {
    background: var(--c-white); border: 1px solid var(--c-line);
    border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.v3-card-head { padding: var(--sp-200) var(--sp-300); border-bottom: 1px solid var(--c-line-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-150); }
.v3-card-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: var(--sp-100); color: var(--c-text); }
.v3-card-body { padding: var(--sp-300); }

/* ---- Inputs ───────────────────────────────────────────────────────
   Refined field styling: soft surface, clear focus ring, single chevron. */
.v3-label {
    display: block; font-size: 11px; font-weight: 600; color: var(--c-muted);
    margin-bottom: 4px; letter-spacing: .01em;
}
.v3-input, .v3-select, .v3-textarea {
    width: 100%; padding: 8px 11px; font-size: 12.5px; font-family: inherit; color: var(--c-text);
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: var(--c-white);
    box-shadow: 0 1px 1px rgba(26,28,32,.03);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none; appearance: none;
}
.v3-input::placeholder, .v3-textarea::placeholder { color: var(--c-light); }
.v3-input:hover, .v3-select:hover, .v3-textarea:hover { border-color: var(--c-muted); }
.v3-input:focus, .v3-select:focus, .v3-textarea:focus {
    outline: none; border-color: var(--role);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--role) 18%, transparent);
}
.v3-input:disabled, .v3-select:disabled, .v3-textarea:disabled {
    background: var(--c-line-soft); color: var(--c-light); cursor: not-allowed;
}
.v3-textarea { resize: vertical; min-height: 65px; line-height: 1.55; }

/* custom select chevron — declared once with full shorthand so it never repeats */
.v3-select {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626F86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 12px center / 16px 16px,
        var(--c-white);
    padding-right: 36px; cursor: pointer;
}
.v3-select:hover {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354585F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 12px center / 16px 16px,
        var(--c-white);
}
.v3-select:focus {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E7C7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 12px center / 16px 16px,
        var(--c-white);
}

.v3-field { margin-bottom: var(--sp-200); }
.v3-required { color: var(--s-red-fg); font-weight: 600; }

/* ---- Status lozenge (Atlassian-style) ---- */
.v3-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px; border-radius: var(--r-sm);
    font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    border: none; line-height: 1.4; white-space: nowrap;
}
.v3-pill.amber  { color: var(--s-amber-fg);  background: var(--s-amber-bg); }
.v3-pill.blue   { color: var(--s-blue-fg);   background: var(--s-blue-bg); }
.v3-pill.violet { color: var(--s-violet-fg); background: var(--s-violet-bg); }
.v3-pill.red    { color: var(--s-red-fg);    background: var(--s-red-bg); }
.v3-pill.green  { color: var(--s-green-fg);  background: var(--s-green-bg); }
/* Ready: solid, confident */
/* Ready: solid, confident — Atlassian blue */
.v3-pill-ready { color: var(--s-blue-fg); background: var(--s-blue-bg); font-weight: 700; box-shadow: inset 0 0 0 1px var(--s-blue-bd); }
/* Needed: muted, faded — not yet done */
.v3-pill-needed {
    color: var(--c-light); background: transparent;
    box-shadow: inset 0 0 0 1px var(--c-line);
    font-weight: 600; letter-spacing: .02em;
}
.v3-pill.gray   { color: var(--s-gray-fg);   background: var(--s-gray-bg); }

/* ============================================================
   STAGE TABS / SECTIONS — the spine of an order
   ============================================================ */
.v3-stage-tabs { display: flex; gap: var(--sp-100); flex-wrap: wrap; margin-bottom: var(--sp-250); }
.v3-stage-tab {
    display: flex; align-items: center; gap: var(--sp-100);
    padding: 8px 12px; border-radius: var(--r-md);
    border: 1px solid var(--c-line); background: var(--c-white);
    cursor: pointer; transition: background .1s, border-color .1s, color .1s; font-weight: 500; font-size: 12.5px; color: var(--c-muted);
}
.v3-stage-tab:hover { background: var(--c-line-soft); }
.v3-stage-tab.is-active { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-strong); font-weight: 600; }
.v3-stage-tab.stage-navy.is-active   { border-color: #0052CC; background: #E9F2FF; color: #0747A6; }
.v3-stage-tab.stage-teal.is-active   { border-color: #1D7A8C; background: #E0F4F8; color: #146373; }
.v3-stage-tab.stage-sky.is-active    { border-color: #4C9AFF; background: #E9F2FF; color: #0747A6; }
.v3-stage-tab.stage-amber.is-active  { border-color: #E8730C;  background: #FCEEDD;  color: #C25E05; }
.v3-stage-tab.stage-violet.is-active { border-color: #6D4AE0; background: #EFE9FC; color: #5836C4; }
.v3-stage-tab.stage-ink.is-active    { border-color: var(--c-brand-deep,#0a5c5b);background: #E7EAEA;                   color: var(--c-brand-deep,#0a5c5b); }
.v3-stage-tab .v3-stage-ico {
    width: 24px; height: 24px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: var(--c-line-soft); color: var(--c-muted); flex-shrink: 0;
}
.v3-stage-tab.is-active .v3-stage-ico { background: var(--c-brand); color: #fff; }
.v3-stage-tab.stage-amber.is-active .v3-stage-ico  { background: #E8730C; }
.v3-stage-tab.stage-violet.is-active .v3-stage-ico { background: #6D4AE0; }
.v3-stage-tab.stage-ink.is-active .v3-stage-ico    { background: var(--c-brand-deep,#0a5c5b); }
.v3-stage-tab.stage-navy.is-active .v3-stage-ico   { background: #0052CC; }
.v3-stage-tab.stage-teal.is-active .v3-stage-ico   { background: #1D7A8C; }
.v3-stage-tab.stage-sky.is-active .v3-stage-ico    { background: #4C9AFF; }
.v3-stage-tab .v3-stage-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
.v3-stage-tab .v3-stage-sub { font-size: 10px; font-weight: 500; }

.v3-stage-panel { display: none; }
.v3-stage-panel.is-active { display: block; }
@keyframes v3fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   INPUT SLOTS — the big CBCT / SCAN drop zones
   ============================================================ */
.v3-slots {
    display: flex; flex-wrap: nowrap; gap: 12px;
    overflow-x: auto; overflow-y: visible;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}
.v3-slots > .v3-slot {
    flex: 1 1 0;            /* equal share of the row */
    min-width: 0;          /* allow shrinking so all fit on screen */
}
/* slim horizontal scrollbar */
.v3-slots::-webkit-scrollbar { height: 8px; }
.v3-slots::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 4px; }
.v3-slots::-webkit-scrollbar-track { background: transparent; }
.v3-slot {
    border: 1px solid var(--c-line); border-radius: var(--r-lg);
    background: var(--c-white); padding: 13px; 
    display: flex; flex-direction: column; min-height: 0; transition: all .16s; position: relative;
}
.v3-slot.is-dragover { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
/* READY (filled): crisp, confident — clearly "done", in the Atlassian blue theme */
.v3-slot.is-filled {
    border-color: var(--c-brand-border);
    background: linear-gradient(180deg, var(--c-brand-soft), var(--c-white) 60%);
}
/* NEEDED (waiting): toned-down, faded, dashed — clearly "not done yet" */
.v3-slot.is-waiting {
    border-style: dashed; border-color: var(--c-line);
    background: var(--c-bg);
    opacity: .72;
}
.v3-slot.is-waiting:hover { opacity: 1; }
.v3-slot.is-waiting .v3-slot-title { color: var(--c-muted); }
.v3-slot.is-waiting .v3-slot-ico { background: var(--c-line-soft); color: var(--c-light); }
.v3-slot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; margin-bottom: 12px; }
.v3-slot-head > div:first-child { min-width: 0; flex: 1; }
.v3-slot-head .v3-pill { flex-shrink: 0; align-self: flex-start; }
.v3-slot-title { font-size: 12.5px; font-weight: 650; display: flex; align-items: center; gap: 7px; letter-spacing: -.01em; line-height: 1.25; }
.v3-slot-title .v3-slot-ico { flex-shrink: 0; }
.v3-slot-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--c-line-soft); color: var(--c-muted); border: 1px solid var(--c-line); flex-shrink: 0; }
.v3-slot.is-filled .v3-slot-ico { background: var(--c-brand-soft); color: var(--c-brand-strong); border-color: var(--c-brand-border); }
.v3-slot-accepts { font-size: 10.5px; color: var(--c-light); margin-top: 3px; }
.v3-slot-body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.v3-slot-drop-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex: 1; text-align: center; color: var(--c-muted); padding: 12px; }
.v3-slot-drop-cta svg { color: var(--c-light); }
/* slot title icon override (smaller, fits narrow columns) */

/* ============================================================
   DESKTOP-STYLE FILE GRID — files as icons, like a desktop
   ============================================================ */
.v3-filegrid { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.v3-filegrid > .v3-file { flex: 0 0 72px; }
/* subtle scrollbar */
.v3-filegrid::-webkit-scrollbar, .v3-oldver-list::-webkit-scrollbar, .v3-scroll-list::-webkit-scrollbar { width: 8px; height: 7px; }
.v3-filegrid::-webkit-scrollbar-thumb, .v3-oldver-list::-webkit-scrollbar-thumb, .v3-scroll-list::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 8px; }
.v3-filegrid::-webkit-scrollbar-thumb:hover, .v3-oldver-list::-webkit-scrollbar-thumb:hover, .v3-scroll-list::-webkit-scrollbar-thumb:hover { background: var(--c-light); }
.v3-file {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 11px 8px; border-radius: var(--r-md); cursor: pointer;
    transition: background .12s; text-align: center; position: relative;
}
.v3-file:hover { background: var(--c-bg); text-decoration: none; }
.v3-file-thumb {
    width: 68px; height: 61px; border-radius: 11px; display: grid; place-items: center;
    background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm);
    color: var(--c-muted); position: relative; overflow: hidden;
}
.v3-file-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; display: block; }
.v3-file-name { font-size: 11px; font-weight: 600; color: var(--c-text); word-break: break-word; line-height: 1.3; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-file-meta { font-size: 10px; color: var(--c-light); }
.v3-file-badge {
    position: absolute; top: 5px; right: 5px;
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
    background: var(--c-text); color: #fff; box-shadow: var(--shadow-sm); line-height: 1.5;
}
/* design-pdf versioning: latest crisp, older faded */
.v3-file.is-old { opacity: .4; filter: saturate(.7); }
.v3-file.is-old:hover { opacity: .85; filter: none; }
.v3-file.is-latest .v3-file-thumb { border-color: var(--c-brand); box-shadow: 0 0 0 2px var(--c-brand-soft); }

/* ---- inline upload control ---- */
.v3-upload-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.v3-file-input-label { cursor: pointer; }

/* ---- Received / in-transit notes ---- */
.v3-note {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 12px 14px; border-radius: var(--r-md); font-size: 11.5px; line-height: 1.5;
    border: 1px solid var(--c-line); border-left-width: 3px;
}
.v3-note-ico { flex-shrink: 0; font-weight: 700; font-size: 12.5px; line-height: 1.5; opacity: .9; }
.v3-note-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-note-text strong { font-weight: 650; }
.v3-note strong { font-weight: 650; }
.v3-note.amber { background: var(--s-amber-bg); border-color: var(--s-amber-bd); border-left-color: var(--s-amber-fg); color: var(--s-amber-fg); }
.v3-note.green { background: var(--s-green-bg); border-color: var(--s-green-bd); border-left-color: var(--s-green-fg); color: var(--s-green-fg); }
.v3-note.blue  { background: var(--s-blue-bg);  border-color: var(--s-blue-bd);  border-left-color: var(--c-brand); color: var(--s-blue-fg); }

/* ============================================================
   LAYOUT — order detail two-column
   ============================================================ */
.v3-shell { width: 100%; }
.v3-order-grid { display: grid; grid-template-columns: minmax(0,1fr) 324px; gap: 18px; align-items: start; }
@media (max-width: 1040px) { .v3-order-grid { grid-template-columns: 1fr; } }
.v3-col-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.v3-col-side { display: flex; flex-direction: column; gap: 13px; position: sticky; top: 16px; margin-top: 62px; }
@media (max-width: 1040px) { .v3-col-side { position: static; margin-top: 0; } }

/* ---- Order header (summary strip) ---- */
.v3-order-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line);
    flex-wrap: wrap;
}
.v3-order-head-main { min-width: 0; }
.v3-order-patient-name { font-size: 21.5px; font-weight: 650; letter-spacing: -.02em; margin: 4px 0 5px; line-height: 1.15; }
.v3-order-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--c-muted); }
.v3-order-status-help { margin-top: 6px; font-size: 12.5px; color: var(--c-muted); max-width: 560px; line-height: 1.4; }
.v3-order-ref { color: var(--c-light); }
.v3-order-dot { color: var(--c-line); }
.v3-order-head-side { flex-shrink: 0; }

/* ============================================================
   CHAT
   ============================================================ */
.v3-chat { display: flex; flex-direction: column; height: auto; max-height: 560px; min-height: 200px; }
.v3-chat-stream { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.v3-msg { display: flex; gap: 8px; max-width: 88%; }
.v3-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.v3-msg-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; background: var(--c-brand-soft); color: var(--c-brand-deep); }
.v3-msg.role-ADMIN .v3-msg-avatar, .v3-msg.role-SUBADMIN .v3-msg-avatar { background: var(--c-brand); color: #fff; }
.v3-msg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v3-msg-meta { font-size: 10px; color: var(--c-light); display: flex; align-items: center; gap: 6px; }
.v3-msg-role { font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: var(--c-line-soft); color: var(--c-muted); }
.v3-bubble { padding: 8px 12px; border-radius: var(--r-lg); font-size: 12.5px; line-height: 1.45; background: var(--c-line-soft); color: var(--c-text); word-wrap: break-word; }
.v3-msg.mine .v3-bubble { background: var(--c-brand); color: #fff; }
.v3-bubble.is-revision { background: var(--s-red-bg) !important; color: var(--s-red-fg) !important; font-weight: 500; }
.v3-chat-sys { align-self: center; font-size: 10px; }
.v3-chat-sys .v3-sys-pill { background: var(--c-line-soft); color: var(--c-muted); padding: 3px 10px; border-radius: var(--r-sm); font-weight: 500; }
.v3-chat-sys .v3-sys-pill.is-revision { background: var(--s-red-bg); color: var(--s-red-fg); font-weight: 600; }
.v3-chat-input { border-top: 1px solid var(--c-line-soft); padding: 12px; display: flex; gap: 7px; align-items: flex-end; }
.v3-chat-input textarea { flex: 1; resize: none; max-height: 108px; }

/* ============================================================
   TIMELINE
   ============================================================ */
.v3-timeline { display: flex; flex-direction: column; }
.v3-tl-item { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--c-line-soft); }
.v3-tl-item:last-child { border-bottom: none; }
.v3-tl-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; background: var(--c-brand-soft); color: var(--c-brand-strong); }
.v3-tl-body { flex: 1; min-width: 0; }
.v3-tl-label { font-size: 12px; color: var(--c-text); }
.v3-tl-actor { font-size: 10.5px; color: var(--c-light); }
.v3-tl-when { text-align: right; white-space: nowrap; flex-shrink: 0; }
.v3-tl-abs { font-size: 10px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.v3-tl-rel { font-size: 10px; color: var(--c-light); }
.v3-time-rel { color: var(--c-light); font-size: .92em; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.v3-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.v3-table { width: 100%; border-collapse: collapse; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.v3-table thead { background: var(--c-bg); }
.v3-table thead th:first-child { border-top-left-radius: var(--r-md); }
.v3-table thead th:last-child  { border-top-right-radius: var(--r-md); }
.v3-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-muted); padding: 11px 16px; border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.v3-table td { padding: 14px 16px; border-bottom: 1px solid var(--c-line-soft); font-size: 12.5px; vertical-align: top; }
.v3-table tr:last-child td { border-bottom: none; }
.v3-table tbody tr { cursor: pointer; transition: background .14s ease, box-shadow .14s ease; }
.v3-table tbody tr:hover { background: var(--c-brand-softer); box-shadow: inset 3px 0 0 var(--role); }
.v3-cell-no { font-size: 14.5px; font-weight: 800; color: var(--c-brand-deep); }
.v3-cell-sub { font-size: 11px; color: var(--c-light); margin-top: 2px; }
.v3-stage-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.v3-stage-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--c-brand-soft); color: var(--c-brand-deep); white-space: nowrap; }

/* ---- Alerts / flash ---- */
.v3-alert { padding: 12px 16px; border-radius: var(--r-sm); font-size: 12.5px; margin-bottom: 16px; border: 1px solid; }
.v3-alert.ok { background: var(--s-green-bg); border-color: var(--s-green-bd); color: var(--s-green-fg); }
.v3-alert.error { background: var(--s-red-bg); border-color: var(--s-red-bd); color: var(--s-red-fg); }

/* ---- Toast ---- */
.v3-toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 7px; }
.v3-toast { padding: 11px 18px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; color: #fff; background: var(--c-brand-deep); box-shadow: var(--shadow-lg); animation: v3toast .25s ease; }
.v3-toast.error { background: var(--s-red-fg); }
.v3-toast.warn { background: var(--s-amber-fg); }
@keyframes v3toast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Utility ---- */
.v3-flex { display: flex; } .v3-gap-2 { gap: 7px; } .v3-gap-3 { gap: 11px; }
.v3-wrap { flex-wrap: wrap; } .v3-between { justify-content: space-between; } .v3-center { align-items: center; }
.v3-mt-2 { margin-top: 8px; } .v3-mt-3 { margin-top: 12px; } .v3-mb-3 { margin-bottom: 12px; }
.v3-hidden { display: none !important; }

/* ============================================================
   RICH INPUT BLOCKS (v2-parity: method picker, dropzone)
   ============================================================ */
.v3-ib { padding: 18px 0; border-bottom: 1px solid var(--c-line-soft); }
.v3-ib:last-child { border-bottom: none; }
.v3-ib-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.v3-ib-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--c-brand-soft); color: var(--c-brand-strong); flex-shrink: 0; }
.v3-ib-title { font-size: 13.5px; font-weight: 700; }
.v3-ib-sub { font-size: 11px; color: var(--c-light); }
.v3-ib-detail { margin-top: 14px; }

.v3-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(113px, 1fr)); gap: 9px; }
.v3-option-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .v3-option-grid, .v3-option-grid-2 { grid-template-columns: 1fr 1fr; } }
.v3-option-card {
    display: flex; flex-direction: column; gap: 4px; cursor: pointer;
    padding: 14px; border-radius: var(--r-md); border: 1px solid var(--c-line);
    background: var(--c-white); transition: border-color .14s, background .14s, box-shadow .14s; text-align: left;
}
.v3-option-card:hover { border-color: var(--c-light); }
.v3-option-card.is-selected { border-color: var(--c-brand); background: var(--c-brand-softer); box-shadow: 0 0 0 1px var(--c-brand); }
.v3-option-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--c-line-soft); color: var(--c-muted); margin-bottom: 2px; transition: all .14s; }
.v3-option-card:hover .v3-option-icon { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.v3-option-card.is-selected .v3-option-icon { background: var(--c-brand); color: #fff; }
.v3-option-title { font-size: 12.5px; font-weight: 600; color: var(--c-text); letter-spacing: -.01em; }
.v3-option-sub { font-size: 10.5px; color: var(--c-light); line-height: 1.35; }

.v3-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 16px 14px; border-radius: var(--r-lg); cursor: pointer;
    border: 2px dashed var(--c-brand-border); background: var(--c-brand-softer);
    text-align: center; transition: all .15s;
}
.v3-dropzone:hover, .v3-dropzone.is-dragover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.v3-dz-ico { width: 40px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-white); color: var(--c-brand-strong); border: 1px solid var(--c-line); margin-bottom: 2px; }
.v3-dz-title { font-size: 12.5px; font-weight: 600; }
.v3-dz-opt { color: var(--c-light); font-weight: 500; }
.v3-dz-sub { font-size: 11px; color: var(--c-light); }
.v3-dz-chosen { font-size: 11px; font-weight: 600; color: var(--s-green-fg); margin-top: 4px; }

/* ============================================================
   TOOTH CHART (implant sites) — ported from v2
   ============================================================ */
.v3-section-num-wrap { flex-shrink: 0; }
.v3-section-num-big { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c-brand-soft); color: var(--c-brand-deep); font-weight: 700; font-size: 12.5px; }
.v3-section-row { display: flex; gap: 14px; }
.v3-section-body { flex: 1; min-width: 0; }
.v3-section-head-inline { margin-bottom: 14px; }
.v3-section-title { font-size: 14.5px; font-weight: 700; }
.v3-section-desc { font-size: 11px; color: var(--c-brand-strong, #0B6463); margin-top: 2px; font-weight: 500; }

.v3-tooth-quick-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.v3-quick-btn { padding: 7px 13px; border-radius: var(--r-md); border: 1px solid var(--c-brand-border); background: var(--c-white); color: var(--c-brand-text); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .14s ease; }
.v3-quick-btn:hover { background: var(--role); color: #fff; border-color: var(--role); }
.v3-quick-btn-ghost { border-color: var(--c-line); color: var(--c-muted); }

.v3-tooth-chart { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.v3-tooth-chart-head { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
.v3-tooth-chart-label { font-size: 10px; font-weight: 700; color: var(--c-muted); letter-spacing: .4px; }
.v3-tooth-chart-count { font-size: 10px; color: var(--c-muted); background: var(--c-line-soft); padding: 2px 8px; border-radius: 999px; }
.v3-tooth-svg { width: 100%; height: auto; display: block; }
.tc-tooth { fill: #F4FAFA; stroke: var(--c-brand); stroke-width: 3; cursor: pointer; transition: fill .1s, stroke .1s; }
.tc-tooth:hover { fill: var(--c-brand-soft); stroke: var(--c-brand-strong); stroke-width: 2; }
.tc-tooth.tc-selected { fill: var(--c-brand); stroke: var(--c-brand-deep); stroke-width: 4; }
.tc-label { font-family: inherit; font-size: 26px; font-weight: 600; fill: var(--c-muted); text-anchor: middle; pointer-events: none; dominant-baseline: middle; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.tc-label.tc-label-on { fill: #fff; font-weight: 700; stroke: var(--c-brand-deep); stroke-width: 2px; }
.v3-chip-row { display: flex; gap: 5px; flex-wrap: wrap; }
.v3-tooth-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--c-brand-soft); color: var(--c-brand-deep); }

/* ============================================================
   DATETIME SPLIT (surgery date/time) — ported from v2
   ============================================================ */
.v3-datetime-split { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.v3-dt-date { max-width: 171px; }
.v3-time-group { display: flex; align-items: center; gap: 6px; }
.v3-dt-part { width: auto; min-width: 72px; }
.v3-dt-colon { font-weight: 700; color: var(--c-light); }
.v3-ampm-toggle { display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 1px 2px rgba(26,28,32,.04); background: var(--c-white); }
.v3-ampm-btn { padding: 9px 16px; border: none; background: transparent; color: var(--c-muted); font-weight: 600; font-size: 11.5px; cursor: pointer; transition: background .12s, color .12s; }
.v3-ampm-btn:first-child { border-right: 1px solid var(--c-line); }
.v3-ampm-btn:hover { background: var(--c-line-soft); }
.v3-ampm-btn.is-active { background: var(--c-brand); color: #fff; }
.v3-ampm-btn.is-active:hover { background: var(--c-brand-strong); }

/* file pill (chosen file preview) */
.v3-file-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--s-green-bg); border: 1px solid var(--s-green-bd); font-size: 11.5px; margin-top: 8px; }
.v3-file-pill-remove { cursor: pointer; color: var(--s-red-fg); font-weight: 700; }

/* ============================================================
   DASHBOARD STAGE CHIPS — progress-aware (current bright, rest dim)
   ============================================================ */
.v3-stage-chip.is-current {
    color: #fff; font-weight: 800;
    transform: scale(1.04);
}
/* active stage takes on its own stage colour so stages are distinguishable.
   Colours chosen for high mutual contrast at small chip size:
   guide = teal · temp = orange · final = indigo/violet · all-on-x = deep ink */
.v3-stage-chip.stage-navy.is-current   { background: #0052CC;    border: 1px solid #0747A6;   box-shadow: 0 2px 6px rgba(0,82,204,.30); }
.v3-stage-chip.stage-teal.is-current   { background: #1D7A8C;    border: 1px solid #146373;   box-shadow: 0 2px 6px rgba(29,122,140,.32); }
.v3-stage-chip.stage-sky.is-current    { background: #4C9AFF;    border: 1px solid #2684FF;   box-shadow: 0 2px 6px rgba(76,154,255,.32); }
.v3-stage-chip.stage-amber.is-current  { background: #E8730C;  border: 1px solid #C25E05; box-shadow: 0 2px 6px rgba(232,115,12,.32); }
.v3-stage-chip.stage-violet.is-current { background: #6D4AE0; border: 1px solid #5836C4; box-shadow: 0 2px 6px rgba(109,74,224,.30); }
.v3-stage-chip.stage-ink.is-current    { background: var(--c-brand-deep,#0a5c5b);border: 1px solid #073f3e; box-shadow: 0 2px 6px rgba(10,92,91,.30); }
.v3-stage-chip.stage-gray.is-current   { background: var(--c-muted,#54585f);     border: 1px solid #3c3f44; }
.v3-stage-chip.is-done {
    background: transparent; color: var(--c-light);
    opacity: .4; font-weight: 500;
}
.v3-stage-chip.is-upcoming {
    background: transparent; color: var(--c-light);
    opacity: .35; font-weight: 500; border: 1px dashed var(--c-line);
}

/* ============================================================
   COLLAPSIBLE DETAILS CARDS (order details, activity)
   ============================================================ */
.v3-details-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.v3-details-card > summary::-webkit-details-marker { display: none; }
.v3-details-summary { user-select: none; }
.v3-details-chevron { color: var(--c-light); font-size: 11px; transition: transform .18s; }
.v3-details-card[open] .v3-details-chevron { transform: rotate(180deg); }
.v3-details-card > summary:hover .v3-card-title { color: var(--c-brand-strong); }

.v3-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(162px, 1fr)); gap: 14px 18px; }
.v3-detail-item { display: flex; flex-direction: column; gap: 3px; }
.v3-detail-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-light); }
.v3-detail-value { font-size: 12.5px; color: var(--c-text); }
.v3-mt-1 { margin-top: 4px; }

/* ============================================================
   BIG DROP ZONE (order-detail input slots — matches new-order)
   ============================================================ */
.v3-bigdrop {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 22px 16px; border-radius: var(--r-lg); cursor: pointer;
    border: 2px dashed var(--c-brand-border); background: var(--c-brand-softer);
    text-align: center; transition: all .15s; width: 100%;
}
.v3-bigdrop:hover, .v3-bigdrop.is-dragover {
    border-color: var(--c-brand); background: var(--c-brand-soft);
    transform: translateY(-1px);
}
.v3-bigdrop-ico {
    width: 44px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: #fff; color: var(--c-brand-strong); border: 1px solid var(--c-line); margin-bottom: 2px;
}
.v3-bigdrop-title { font-size: 12.5px; font-weight: 600; color: var(--c-text); }
.v3-bigdrop-title u { color: var(--c-brand-strong); text-decoration: none; border-bottom: 1.5px solid var(--c-brand-border); }
.v3-bigdrop-sub { font-size: 11px; color: var(--c-light); }

/* ============================================================
   DESIGN FILE ROW — latest version + change requests beside it
   ============================================================ */
.v3-design-row { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: var(--sp-250); align-items: start; }
/* Approved design: green-tinted latest file so approval reads at a glance */
.v3-design-row.is-approved .v3-file.is-latest {
    border-color: var(--s-green-bd);
    background: var(--s-green-bg);
    box-shadow: inset 0 0 0 1px var(--s-green-bd);
}
.v3-design-row.is-approved .v3-file.is-latest .v3-file-badge {
    background: var(--s-green-fg); color: #fff;
}
.v3-design-row.is-approved .v3-file.is-latest .v3-file-meta { color: var(--s-green-fg); font-weight: 600; }
.v3-design-row .v3-file { width: 100%; }
.v3-revnote-list { display: flex; flex-direction: column; gap: var(--sp-100); min-width: 0; }
.v3-revnote {
    border: 1px solid var(--s-amber-bd); background: var(--s-amber-bg);
    border-left: 3px solid var(--s-amber-fg); border-radius: var(--r-md);
    padding: 10px 12px; min-width: 0;
}
.v3-revnote-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.v3-revnote-tag { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--s-amber-fg); }
.v3-revnote-by { font-size: 10px; color: var(--c-light); white-space: nowrap; }
.v3-revnote-body { font-size: 11.5px; color: var(--c-text); line-height: 1.5; word-break: break-word; }
/* empty note column keeps the grid aligned even when a version has no notes */
.v3-design-row .v3-revnote-empty,
.v3-oldver-item .v3-revnote-empty { font-size: 11px; color: var(--c-light); padding-top: 4px; }

.v3-oldver { margin-top: var(--sp-200); }
.v3-oldver > summary { cursor: pointer; font-size: 11px; font-weight: 600; color: var(--c-muted); list-style: none; padding: 6px 0; }
.v3-oldver > summary::-webkit-details-marker { display: none; }
.v3-oldver > summary::before { content: "▸ "; color: var(--c-light); }
.v3-oldver[open] > summary::before { content: "▾ "; }
.v3-oldver-list { display: flex; flex-direction: column; gap: var(--sp-200); padding-top: var(--sp-100); max-height: 480px; overflow-y: auto; padding-right: 4px; }
.v3-oldver-item { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: var(--sp-250); align-items: start; }
.v3-oldver-item .v3-file { width: 100%; opacity: .8; }
@media (max-width: 600px) {
    .v3-design-row, .v3-oldver-item { grid-template-columns: 1fr; }
}

/* ============================================================
   FORM GRID — clean two-column field layout
   ============================================================ */
.v3-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.v3-form-grid .v3-col-full { grid-column: 1 / -1; }
.v3-form-grid .v3-field { margin-bottom: 11px; }
@media (max-width: 640px) { .v3-form-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SERVICE PICKER — combinable group, solo (all-on-x), design-only
   ============================================================ */
.v3-or-divider { display: flex; align-items: center; gap: 11px; margin: 16px 0; color: var(--c-light); font-size: 11px; font-weight: 600; }
.v3-or-divider::before, .v3-or-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.v3-stage-solo { width: 100%; }
.v3-solo-tag { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--c-light); background: var(--c-line-soft); padding: 2px 7px; border-radius: var(--r-sm); margin-left: 6px; vertical-align: middle; }

.v3-design-only {
    display: flex; align-items: flex-start; gap: 9px; margin-top: 16px;
    padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: var(--c-bg); transition: opacity .15s;
}
.v3-design-only input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--c-brand); }
.v3-design-only-text { display: flex; flex-direction: column; gap: 2px; }
.v3-design-only.is-disabled { opacity: .45; cursor: not-allowed; }
.v3-design-only.is-disabled input { cursor: not-allowed; }

/* ============================================================
   DASHBOARD — filter bar, status buttons, upcoming strip
   ============================================================ */
.v3-toolbar { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }

/* ===== Filters: labelled option fields, aligned on one row ===== */
.v3-filters {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.v3-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.v3-filter-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-muted); line-height: 1; white-space: nowrap;
}
/* every control the same height */
.v3-filters .v3-input {
  height: 38px; padding: 0 11px; font-size: 13px;
  box-sizing: border-box;
}
.v3-filters select.v3-input { padding-right: 30px; }
.v3-filter-search { flex: 1 1 200px; min-width: 160px; max-width: 280px; }
.v3-filter-field select.v3-input { min-width: 130px; }
.v3-filter-field input[type="date"].v3-input { min-width: 130px; }
.v3-filter-actions { flex: 0 0 auto; }
.v3-filter-actions-row { display: flex; align-items: center; gap: 6px; height: 38px; }
.v3-filter-actions .v3-btn { height: 38px; }
@media (max-width: 900px) {
  .v3-filter-field { flex: 1 1 calc(50% - 5px); }
  .v3-filter-search { flex: 1 1 100%; }
}
.v3-input-sm { padding: 7px 10px; font-size: 11.5px; }
.v3-date-range { display: flex; gap: 7px; }
.v3-date-field { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 600; color: var(--c-light); }
.v3-sort-field { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 600; color: var(--c-light); text-transform: uppercase; letter-spacing: .04em; }
.v3-sort-field select { text-transform: none; letter-spacing: normal; font-weight: 500; }
.v3-date-field span { letter-spacing: .03em; text-transform: uppercase; }

/* quick presets */
.v3-quick-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.v3-chip-btn {
    display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 600; color: var(--c-muted);
    background: var(--c-white); border: 1px solid var(--c-line); transition: all .12s;
}
.v3-chip-btn:hover { border-color: var(--role); color: var(--role); background: var(--c-brand-softer); text-decoration: none; }
.v3-chip-btn.is-on { background: var(--c-text); color: #fff; border-color: var(--c-text); }

/* status filter buttons */
.v3-statusbar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
.v3-status-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
    border-radius: var(--r-md); font-size: 11.5px; font-weight: 600; color: var(--c-muted);
    background: var(--c-white); border: 1px solid var(--c-line); transition: all .14s ease;
}
.v3-status-btn:hover { border-color: var(--role); color: var(--role); background: var(--c-brand-softer); text-decoration: none; }
.v3-status-btn.is-on { background: var(--role); color: #fff; border-color: var(--role); box-shadow: 0 1px 2px rgba(9,30,66,.12); }
.v3-status-count {
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: var(--c-line-soft); color: var(--c-muted); min-width: 20px; text-align: center;
}
.v3-status-btn.is-on .v3-status-count { background: rgba(255,255,255,.25); color: #fff; }

/* upcoming surgeries strip */
.v3-upcoming { margin-bottom: 16px; }
.v3-upcoming-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-light); margin-bottom: 8px; }
.v3-upcoming-list { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; }
.v3-upcoming-item {
    flex-shrink: 0; min-width: 135px; display: flex; flex-direction: column; gap: 2px;
    padding: 11px 14px; border-radius: var(--r-lg); border: 1px solid var(--c-line);
    background: var(--c-white); transition: all .12s;
}
.v3-upcoming-item:hover { border-color: var(--c-brand-border); box-shadow: var(--shadow-sm); text-decoration: none; }
.v3-upcoming-item.is-today { border-color: var(--c-brand); background: var(--c-brand-softer); }
.v3-upcoming-when { font-size: 10px; font-weight: 700; color: var(--c-brand-strong); text-transform: uppercase; letter-spacing: .02em; }
.v3-upcoming-pt { font-size: 12.5px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-upcoming-time { font-size: 11px; color: var(--c-light); }

/* ============================================================
   HEADER NAV (Orders / Today / Calendar)
   ============================================================ */
.v3-nav { display: flex; gap: 2px; margin-left: 8px; }
.v3-nav-link {
    padding: 6px 12px; border-radius: var(--r-md); font-size: 12px; font-weight: 600;
    color: var(--c-muted); transition: background .12s, color .12s;
}
.v3-nav-link:hover { background: var(--c-line-soft); color: var(--c-text); text-decoration: none; }
.v3-nav-link.is-active { background: var(--c-brand-soft); color: var(--c-brand-strong); }
@media (max-width: 640px) { .v3-nav { width: 100%; margin: 6px 0 0; } }

/* ============================================================
   TODAY VIEW
   ============================================================ */
/* Pinterest-style masonry: cards flow into columns by height, no fixed rows.
   Count adapts to width; cards keep their natural height and fill gaps. */
.v3-today-grid { columns: 2; column-gap: 16px; }
.v3-today-grid > .v3-today-card { break-inside: avoid; margin: 0 0 16px; display: inline-block; width: 100%; }
@media (min-width: 1400px) { .v3-today-grid { columns: 3; } }
@media (max-width: 820px)  { .v3-today-grid { columns: 1; } }
.v3-today-card .v3-card-body { padding: 8px; }
.v3-today-card { transition: box-shadow .16s ease, border-color .16s ease; }
.v3-today-card:hover { box-shadow: var(--shadow-md); border-color: var(--c-brand-border); }
.v3-today-action { border-color: var(--c-brand-border); }
.v3-today-action .v3-card-head { border-bottom-color: var(--c-brand-soft); }
.v3-count-badge {
    font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
    background: var(--c-line-soft); color: var(--c-muted); margin-left: 6px;
}
.v3-today-action .v3-count-badge { background: var(--c-brand); color: #fff; }
.v3-today-list { display: flex; flex-direction: column; }
.v3-today-row {
    display: flex; align-items: center; justify-content: space-between; gap: 11px;
    padding: 10px 12px; border-radius: var(--r-md);
    transition: background .14s ease, box-shadow .14s ease, transform .04s ease;
    position: relative;
}
.v3-today-row:hover {
    background: var(--c-brand-softer); text-decoration: none;
    box-shadow: inset 2px 0 0 var(--role);
}
.v3-today-row:active { transform: translateX(.5px); }
.v3-today-row + .v3-today-row { border-top: 1px solid var(--c-line-soft); }
.v3-today-row-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v3-today-pt { font-size: 12.5px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-today-meta { font-size: 10.5px; color: var(--c-light); }
.v3-today-row-side { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.v3-today-time { font-size: 11px; font-weight: 600; color: var(--c-muted); }
.v3-today-empty { padding: 18px 12px; font-size: 11.5px; color: var(--c-light); text-align: center; }

/* ============================================================
   CALENDAR VIEW
   ============================================================ */
.v3-cal-toolbar { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--c-line-soft); flex-wrap: wrap; }
.v3-cal-title { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; min-width: 135px; }
.v3-cal-count { font-size: 11px; color: var(--c-light); }
.v3-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--c-line); border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.v3-cal-dayname { background: var(--c-bg); padding: 8px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-light); }
.v3-cal-cell { background: var(--c-white); min-height: 94px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.v3-cal-cell.is-blank { background: var(--c-bg); }
.v3-cal-cell.is-past { background: #FCFCFB; }
.v3-cal-cell.is-today { background: var(--c-brand-softer); box-shadow: inset 0 0 0 2px var(--c-brand); }
.v3-cal-cell-head { display: flex; align-items: center; justify-content: space-between; }
.v3-cal-num { font-size: 11px; font-weight: 600; color: var(--c-muted); }
.v3-cal-cell.is-today .v3-cal-num { color: var(--c-brand-strong); font-weight: 700; }
.v3-cal-cnt { font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--c-brand-soft); color: var(--c-brand-strong); }
.v3-cal-events { display: flex; flex-direction: column; gap: 3px; }
.v3-cal-event {
    display: flex; flex-direction: column; gap: 0; padding: 3px 6px; border-radius: var(--r-sm);
    background: var(--c-line-soft); border-left: 3px solid var(--c-light);
    font-size: 10px; line-height: 1.25; overflow: hidden;
}
.v3-cal-event:hover { text-decoration: none; filter: brightness(.97); }
.v3-cal-event-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.v3-cal-event-time { font-weight: 700; color: var(--c-muted); font-size: 10px; }
.v3-cal-event-name { font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* STAGE → colour (left border + tinted background) */
.v3-cal-event.stage-navy   { background: #E9F2FF;  border-left-color: #0052CC; }
.v3-cal-event.stage-teal   { background: #E0F4F8;  border-left-color: #1D7A8C; }
.v3-cal-event.stage-sky    { background: #E9F2FF;  border-left-color: #4C9AFF; }
.v3-cal-event.stage-amber  { background: #FCEEDD;    border-left-color: #E8730C; }
.v3-cal-event.stage-violet { background: #EFE9FC;   border-left-color: #6D4AE0; }
.v3-cal-event.stage-ink    { background: #E7EAEA;              border-left-color: var(--c-brand-deep); }
.v3-cal-event.stage-gray   { background: var(--c-line-soft);   border-left-color: var(--c-light); }

/* STATUS → symbol (shape, not colour) */
.v3-cal-st { font-size: 10px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.v3-cal-st.st-waiting    { color: var(--c-light); }
.v3-cal-st.st-design     { color: var(--c-muted); }
.v3-cal-st.st-awaiting   { color: var(--c-muted); }
.v3-cal-st.st-revision   { color: var(--s-red-fg); font-weight: 800; }
.v3-cal-st.st-approved   { color: var(--s-green-fg); }
.v3-cal-st.st-production { color: var(--c-text); }
.v3-cal-st.st-shipped    { color: var(--s-green-fg); }
.v3-cal-st.st-completed  { color: var(--s-green-fg); }
.v3-cal-st.st-default    { color: var(--c-light); }

.v3-cal-more { font-size: 10px; font-weight: 600; color: var(--c-brand, #0E7C7B); padding: 2px 6px; background: none; border: none; cursor: pointer; text-align: left; width: 100%; border-radius: 4px; }
.v3-cal-more:hover { background: var(--c-brand-softer, #eaf5f4); }
.v3-cal-event-extra { display: none; }
.v3-cal-cell.is-expanded .v3-cal-event-extra { display: flex; }

/* Legend */
.v3-cal-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; padding: 14px 16px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.v3-cal-legend-group { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.v3-cal-legend-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-light); }
.v3-cal-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--c-muted); }
.v3-cal-swatch { width: 12px; height: 12px; border-radius: 3px; border-left: 3px solid; flex-shrink: 0; }
.v3-cal-swatch.stage-navy   { background: #E9F2FF;  border-left-color: #0052CC; }
.v3-cal-swatch.stage-teal   { background: #E0F4F8;  border-left-color: #1D7A8C; }
.v3-cal-swatch.stage-sky    { background: #E9F2FF;  border-left-color: #4C9AFF; }
.v3-cal-swatch.stage-amber  { background: #FCEEDD;    border-left-color: #E8730C; }
.v3-cal-swatch.stage-violet { background: #EFE9FC;   border-left-color: #6D4AE0; }
.v3-cal-swatch.stage-ink    { background: #E7EAEA;              border-left-color: var(--c-brand-deep); }

@media (max-width: 640px) {
    .v3-cal-cell { min-height: 65px; }
    .v3-cal-event-name { font-size: 10px; }
}

/* ============================================================
   TODAY — KPI strip, at-risk banner, row extras
   ============================================================ */
.v3-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 16px; }
@media (max-width: 720px) { .v3-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.v3-kpi {
    display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
    background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg);
    transition: border-color .12s, box-shadow .12s;
}
.v3-kpi { transition: box-shadow .16s ease, border-color .16s ease, transform .08s ease; }
a.v3-kpi:hover { border-color: var(--c-brand-border); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-1px); }
.v3-kpi-num { font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--c-text); line-height: 1; }
.v3-kpi-label { font-size: 11px; font-weight: 600; color: var(--c-muted); }
.v3-kpi.is-hot { background: var(--c-brand-softer); border-color: var(--c-brand-border); }
.v3-kpi.is-hot .v3-kpi-num { color: var(--c-brand-strong); }

.v3-risk {
    border: 1px solid var(--s-amber-bd); background: var(--s-amber-bg);
    border-left: 3px solid var(--s-amber-fg); border-radius: var(--r-lg);
    padding: 14px 16px; margin-bottom: 16px;
}
.v3-risk-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; color: var(--s-amber-fg); }
.v3-risk-head strong { font-size: 12.5px; }
.v3-risk-head .v3-help { color: var(--s-amber-fg); opacity: .8; }
.v3-risk-ico { width: 20px; height: 20px; border-radius: 50%; background: var(--s-amber-fg); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 11.5px; flex-shrink: 0; }
.v3-risk-list { display: flex; flex-direction: column; gap: 6px; }
.v3-risk-item {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-md);
    background: var(--c-white); border: 1px solid var(--s-amber-bd);
}
.v3-risk-item:hover { text-decoration: none; border-color: var(--s-amber-fg); }
.v3-risk-due { font-size: 11px; font-weight: 700; color: var(--s-amber-fg); min-width: 64px; }
.v3-risk-pt { font-weight: 600; color: var(--c-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.v3-today-reason { color: var(--s-amber-fg); font-weight: 600; }
/* overdue card — red accent when there are overdue cases */
.v3-today-overdue.is-hot { border-color: var(--s-red-bd); box-shadow: 0 0 0 1px var(--s-red-bd), var(--shadow-sm); }
.v3-today-overdue.is-hot .v3-card-head { background: var(--s-red-bg); border-bottom-color: var(--s-red-bd); }
.v3-today-overdue.is-hot .v3-card-title { color: var(--s-red-fg); }
.v3-today-overdue .v3-today-reason { color: var(--s-red-fg); font-weight: 700; }
.v3-today-due { font-size: 11px; font-weight: 600; color: var(--c-light); }
.v3-today-due.is-urgent { color: var(--s-red-fg); font-weight: 700; }

/* ============================================================
   DESIGN VERSION NOTE (designer's "what's in this version")
   ============================================================ */
.v3-design-upload {
    padding: 14px; border: 1px dashed var(--c-brand-border); border-radius: var(--r-lg);
    background: var(--c-brand-softer); margin-bottom: 16px;
}
.v3-revnote.is-designnote {
    border-color: var(--c-brand-border); background: var(--c-brand-softer);
    border-left-color: var(--c-brand);
}
.v3-revnote-tag.is-design { color: var(--c-brand-strong); }
.v3-revnote.is-approvenote {
    border-color: var(--s-green-bd); background: var(--s-green-bg);
    border-left-color: var(--s-green-fg);
}
.v3-revnote-tag.is-approve { color: var(--s-green-fg); }

/* ============================================================
   FINAL CROWN — design review via link
   ============================================================ */
.v3-link-form { display: flex; flex-direction: column; }
.v3-design-link-box { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 14px; background: var(--c-white); }
.v3-design-link-head { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.v3-design-link-open {
    display: inline-flex; align-items: center; padding: 9px 14px; border-radius: var(--r-md);
    background: var(--c-brand); color: #fff; font-size: 13px; font-weight: 600;
}
.v3-design-link-open:hover { background: var(--c-brand-strong); text-decoration: none; color: #fff; }

/* design link version history */
.v3-link-ver { padding: 10px 0; border-top: 1px solid var(--c-line-soft); }
.v3-link-ver:first-child { border-top: none; }
.v3-link-ver-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }

/* ============================================================
   DESIGN-ONLY order — eye-catching badge + banner
   ============================================================ */
.v3-pill-designonly {
    background: var(--c-brand-deep); color: #fff; border: none;
    letter-spacing: .02em;
}
.v3-designonly-banner {
    display: flex; align-items: flex-start; gap: 11px;
    margin: 0 0 18px; padding: 14px 16px;
    background: linear-gradient(0deg, var(--c-brand-softer), var(--c-brand-soft));
    border: 1px solid var(--c-brand-border); border-left: 4px solid var(--c-brand);
    border-radius: var(--r-lg);
}
.v3-designonly-ico {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--c-white); color: var(--c-brand-strong);
    border: 1px solid var(--c-brand-border);
}
.v3-designonly-text { font-size: 12.5px; color: var(--c-brand-text); line-height: 1.55; }
.v3-designonly-text strong { display: block; font-size: 13.5px; color: var(--c-brand-deep); margin-bottom: 2px; }

/* ============================================================
   ORDER COMPLETE — prominent "all done" banner + badge
   ============================================================ */
.v3-done-banner {
    display: flex; align-items: center; gap: 13px;
    margin: 0 0 18px; padding: 15px 18px;
    background: linear-gradient(0deg, var(--s-green-bg), #EAF7EE);
    border: 1px solid var(--s-green-bd); border-left: 4px solid var(--s-green-fg);
    border-radius: var(--r-lg);
}
.v3-done-ico {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--s-green-fg); color: #fff;
}
.v3-done-text { font-size: 13px; color: #1E5631; line-height: 1.5; }
.v3-done-text strong { display: block; font-size: 15px; color: #14532D; margin-bottom: 2px; }
.v3-pill.v3-pill-done { background: var(--s-green-fg); color: #fff; border: none; font-weight: 700; }
/* Cancelled order banner — red variant of the done banner */
.v3-done-banner.v3-cancel-banner {
    background: linear-gradient(0deg, #FDECEA, #FEF2F1);
    border-color: #F1B0AB; border-left-color: #C0392B;
}
.v3-cancel-banner .v3-done-ico { background: #C0392B; }
.v3-cancel-banner .v3-done-text { color: #7A241B; }
.v3-cancel-banner .v3-done-text strong { color: #641E17; }
.v3-cancel-box { margin-top: 8px; width: 100%; max-width: 420px; }

/* completed order row in the dashboard table */
.v3-table tr.is-done-row td:first-child { box-shadow: inset 2px 0 0 var(--s-green-bd); }
.v3-table tr.is-done-row { background: #fff; }
.v3-table tr.is-done-row:hover { background: #fff; }
/* everything inside a completed row goes white for contrast on the dark fill */
.v3-table tr.is-done-row td,
.v3-table tr.is-done-row .v3-cell-no,
.v3-table tr.is-done-row .v3-cell-sub,
.v3-table tr.is-done-row td > div { color: var(--c-light); }
.v3-table tr.is-done-row .v3-cell-sub { opacity: .88; }
/* completed stage chips: translucent white pills */
.v3-table tr.is-done-row .v3-stage-chip {
    /* rows are white now — inherit the neutral chip look, just muted */
    opacity: .75;
}
/* the "✓ Complete" pill: solid white on the green row */
.v3-table tr.is-done-row .v3-pill-done {
    background: var(--s-green-bg);
    color: var(--s-green-fg);
    border: 1px solid var(--s-green-bd);
}
/* delete (trash) icon turns white too */
.v3-table tr.is-done-row .v3-icon-btn-danger {
    color: var(--c-light);
    background: transparent;
}
.v3-table tr.is-done-row .v3-icon-btn-danger:hover {
    color: var(--s-red-fg);
    background: var(--s-red-bg);
}

/* Cancelled order row — muted/greyed so it reads as inactive at a glance,
   with a red left marker and pill (parallels the completed-row treatment). */
.v3-pill.v3-pill-cancelled { background: #C0392B; color: #fff; border: none; font-weight: 700; }
.v3-table tr.is-cancelled-row { background: #F7F3F2; }
.v3-table tr.is-cancelled-row td:first-child { box-shadow: inset 3px 0 0 #C0392B; }
.v3-table tr.is-cancelled-row:hover { background: #F1EAE9; }
.v3-table tr.is-cancelled-row td,
.v3-table tr.is-cancelled-row .v3-cell-no,
.v3-table tr.is-cancelled-row td > div { color: var(--c-muted); }
.v3-table tr.is-cancelled-row .v3-cell-no { text-decoration: line-through; text-decoration-color: #C0392B; }
.v3-table tr.is-cancelled-row .v3-stage-chip {
    opacity: .55; filter: grayscale(.6);
}
.v3-table tr.is-cancelled-row .v3-pill-cancelled { opacity: 1; }

/* slot: what the clinic chose at order time */
.v3-slot-chosen {
    margin-top: 4px; font-size: 11px; font-weight: 600;
    color: var(--c-brand-strong);
    background: var(--c-brand-softer); border: 1px solid var(--c-brand-border);
    border-radius: 5px; padding: 2px 7px; display: inline-block;
}

/* admin-only icon buttons (e.g. delete order) */
.v3-icon-btn {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--c-line); border-radius: 7px;
    background: var(--c-white); color: var(--c-muted);
    cursor: pointer; transition: all .12s ease;
}
.v3-icon-btn:hover { background: var(--c-bg); }
.v3-icon-btn-danger:hover {
    background: var(--s-red-bg); border-color: var(--s-red-bd); color: var(--s-red-fg);
}

/* "same as <stage>" inherit box + confirm checkbox */
.v3-inherit-box {
    background: var(--c-brand-softer); border: 1px solid var(--c-brand-border);
    border-radius: 8px; padding: 11px 13px; margin-bottom: 13px;
}
.v3-inherit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.v3-inherit-val {
    font-weight: 700; font-size: 13px; color: var(--c-brand-strong);
    background: var(--c-white); border: 1px solid var(--c-brand-border);
    border-radius: 5px; padding: 2px 9px;
}
.v3-check-row {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 12.5px; color: var(--c-text); user-select: none;
}
.v3-check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--c-brand); cursor: pointer; }

/* ============================================================
   ACTION-NEEDED ("to provide") card — clean checklist style
   ============================================================ */
.v3-todo-card {
    background: var(--c-white);
    border: 1px solid var(--s-amber-bd);
    border-left: 3px solid var(--s-amber-fg);
    border-radius: var(--r-lg);
    padding: 15px 17px;
}
.v3-todo-head { display: flex; align-items: center; gap: 9px; }
.v3-todo-ico {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--s-amber-bg); color: var(--s-amber-fg);
}
.v3-todo-title { font-size: 14px; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.v3-todo-sub { font-size: 12px; color: var(--c-muted); line-height: 1.5; margin: 7px 0 12px; }
.v3-todo-list { display: flex; flex-direction: column; gap: 7px; }
.v3-todo-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--c-bg); border: 1px solid var(--c-line);
    border-radius: 8px;
}
.v3-todo-dot {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--s-amber-fg); box-shadow: 0 0 0 3px var(--s-amber-bg);
}
.v3-todo-label { font-size: 13px; font-weight: 600; color: var(--c-text); }
.v3-todo-why {
    margin-left: auto; font-size: 11px; font-weight: 600;
    color: var(--s-amber-fg); background: var(--s-amber-bg);
    padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}

/* separator in the quick-filter row (between date presets and stage filters) */
.v3-quick-sep { width: 1px; height: 18px; background: var(--c-line); margin: 0 4px; }

/* ============================================================
   SAVED VIEWS — named filter presets
   ============================================================ */
.v3-savedviews {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 14px 0 10px;
}
.v3-savedviews-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--c-light); margin-right: 2px;
}
.v3-savedview-chip {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--c-brand-softer); border: 1px solid var(--c-brand-border);
    border-radius: 16px; padding: 0 4px 0 11px; height: 28px;
}
.v3-savedview-chip a {
    font-size: 12.5px; font-weight: 600; color: var(--c-brand-strong);
    text-decoration: none; line-height: 28px;
}
.v3-savedview-chip a:hover { text-decoration: underline; }
.v3-savedview-x {
    border: none; background: none; cursor: pointer;
    color: var(--c-light); font-size: 16px; line-height: 1;
    width: 20px; height: 20px; border-radius: 50%; padding: 0;
    display: grid; place-items: center;
}
.v3-savedview-x:hover { background: var(--s-red-bg); color: var(--s-red-fg); }
.v3-saveview-form {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    padding: 11px 13px; background: var(--c-bg);
    border: 1px solid var(--c-line); border-radius: 8px;
}

/* per-stage due date card */
.v3-duedate-card .v3-duedate-edit { padding-top: 12px; }
.v3-duedate-display { margin-top: 3px; }

/* per-stage due date tag in the dashboard stage column */
.v3-due-tag {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; font-size: 11px; font-weight: 600;
    color: var(--c-muted);
}
.v3-due-tag.soon { color: var(--s-amber-fg); }
.v3-due-tag.overdue { color: var(--s-red-fg); }
.v3-due-rel {
    font-weight: 600; padding: 1px 7px; border-radius: 10px;
    background: var(--c-bg); border: 1px solid var(--c-line);
    color: var(--c-muted);
}
.v3-due-tag.soon .v3-due-rel { background: var(--s-amber-bg); border-color: var(--s-amber-bd); color: var(--s-amber-fg); }
.v3-due-tag.overdue .v3-due-rel { background: var(--s-red-bg); border-color: var(--s-red-bd); color: var(--s-red-fg); }
/* on a completed (dark green) row, keep due tags readable */
.v3-table tr.is-done-row .v3-due-tag,
.v3-table tr.is-done-row .v3-due-rel { color: var(--c-light) !important; }
.v3-table tr.is-done-row .v3-due-rel { background: #F1F2F5; border-color: var(--c-line, #E7E9EE); }

/* ============================================================
   COMPACT due-date bar (one line, inline edit)
   ============================================================ */
.v3-duedate-bar {
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: var(--c-white);
}
.v3-duedate-row {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px; flex-wrap: wrap;
}
.v3-duedate-row .v3-ib-ico {
    width: 28px; height: 28px; flex-shrink: 0;
    background: var(--c-brand-softer); color: var(--c-brand-strong);
    border-radius: 7px; display: grid; place-items: center;
}
.v3-duedate-label { font-size: 13px; font-weight: 700; color: var(--c-text); }
.v3-duedate-display { font-size: 13px; color: var(--c-text); display: inline-flex; align-items: center; gap: 6px; }
.v3-duedate-display strong { font-weight: 600; }
.v3-duedate-row .v3-duedate-edit-btn { margin-left: auto; }
.v3-duedate-edit {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 13px; border-top: 1px solid var(--c-line); background: var(--c-bg);
}

/* ============================================================
   COMPACT stage header bar (title + status + due date, one row)
   ============================================================ */
.v3-stage-bar { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-white); }
.v3-stage-bar-row {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 9px 13px;
}
.v3-stage-bar-row .v3-card-title { font-size: 14px; }
.v3-stage-bar-row .v3-card-title svg { width: 18px; height: 18px; }
.v3-stage-bar-sep { width: 1px; height: 18px; background: var(--c-line); margin: 0 2px; }
.v3-stage-bar-row .v3-duedate-edit-btn { margin-left: auto; }

/* Action-needed card as collapsible <details> */
details.v3-todo-card { padding: 0; }
details.v3-todo-card > summary {
    list-style: none; cursor: pointer; padding: 13px 15px;
    display: flex; align-items: center; gap: 9px;
}
details.v3-todo-card > summary::-webkit-details-marker { display: none; }
details.v3-todo-card .v3-todo-chevron { margin-left: auto; transition: transform .15s; color: var(--s-amber-fg); }
details.v3-todo-card[open] .v3-todo-chevron { transform: rotate(180deg); }
details.v3-todo-card .v3-todo-body { padding: 0 15px 14px; }
details.v3-todo-card .v3-todo-sub { margin-top: 0; }

/* ============================================================
   Calendar stage filter chips
   ============================================================ */
.v3-cal-filters {
    display: flex; flex-wrap: wrap; gap: 7px;
    padding: 0 16px 14px; align-items: center;
}
.v3-chip-btn.stage-navy.is-on   { background: #0052CC;      border-color: #0052CC; color:#fff; }
.v3-chip-btn.stage-teal.is-on   { background: #1D7A8C;      border-color: #1D7A8C; color:#fff; }
.v3-chip-btn.stage-sky.is-on    { background: #4C9AFF;      border-color: #4C9AFF; color:#fff; }
.v3-chip-btn.stage-amber.is-on  { background: var(--s-amber-fg);   border-color: var(--s-amber-fg); color:#fff; }
.v3-chip-btn.stage-violet.is-on { background: var(--s-violet-fg);  border-color: var(--s-violet-fg); color:#fff; }
.v3-chip-btn.stage-ink.is-on    { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color:#fff; }
/* small colour dot on the left of each stage chip */
.v3-chip-btn.stage-teal::before,
.v3-chip-btn.stage-amber::before,
.v3-chip-btn.stage-violet::before,
.v3-chip-btn.stage-ink::before {
    content: ''; display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; margin-right: 6px; vertical-align: 1px;
}
.v3-chip-btn.stage-teal::before   { background: var(--c-brand); }
.v3-chip-btn.stage-amber::before  { background: var(--s-amber-fg); }
.v3-chip-btn.stage-violet::before { background: var(--s-violet-fg); }
.v3-chip-btn.stage-ink::before    { background: var(--c-brand-deep); }
.v3-chip-btn.is-on::before { background: #fff !important; }

/* Completed stage events on the calendar — visually de-emphasised + checked */
.v3-cal-event.is-completed {
    opacity: .62;
    background: var(--c-bg) !important;
    border-left-color: var(--s-green-fg) !important;
}
.v3-cal-event.is-completed .v3-cal-event-name { text-decoration: line-through; color: var(--c-muted); }
.v3-cal-event.is-completed .v3-cal-event-time { color: var(--s-green-fg); font-weight: 700; }

/* Cancelled order on the calendar — greyed with a red marker + struck-through name */
.v3-cal-st.st-cancelled { color: #C0392B; font-weight: 800; }
.v3-cal-event.is-cancelled {
    opacity: .6;
    background: #F7F3F2 !important;
    border-left-color: #C0392B !important;
}
.v3-cal-event.is-cancelled .v3-cal-event-name { text-decoration: line-through; color: var(--c-muted); }
.v3-cal-event.is-cancelled .v3-cal-event-time { color: #C0392B; font-weight: 700; }

/* ============================================================
   Crown / prosthesis spec card — collapsible + tidy display
   ============================================================ */
details.v3-spec-card { padding: 0; }
details.v3-spec-card > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
}
details.v3-spec-card > summary::-webkit-details-marker { display: none; }
details.v3-spec-card .v3-spec-badge { font-size: 11px; }
details.v3-spec-card .v3-spec-chevron { margin-left: auto; color: var(--c-muted); transition: transform .15s; }
details.v3-spec-card[open] .v3-spec-chevron { transform: rotate(180deg); }
.v3-spec-actions { display: flex; justify-content: flex-end; }
/* pretty spec grid */
.v3-spec-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px; align-items: stretch;
}
.v3-spec-item {
    display: flex; flex-direction: column; gap: 4px; justify-content: center;
    min-height: 56px;
    padding: 9px 12px; border-radius: var(--r-md);
    background: var(--c-bg); border: 1px solid var(--c-line);
}
.v3-spec-key { font-size: 10.5px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; }
.v3-spec-val { font-size: 13px; font-weight: 600; color: var(--c-text); }
.v3-spec-instruction {
    padding: 11px 13px; border-radius: var(--r-md);
    background: var(--s-blue-bg); border: 1px solid var(--s-blue-bd);
}
.v3-spec-instruction .v3-spec-val { font-weight: 400; line-height: 1.5; margin-top: 4px; }

/* Completed-stage lock: hide all upload/edit affordances, keep files visible */
.v3-inputs-locked .v3-dropzone,
.v3-inputs-locked .v3-slot-dropzone,
.v3-inputs-locked .v3-bigdrop,
.v3-inputs-locked .v3-upload-row,
.v3-inputs-locked .v3-slot-link-form,
.v3-inputs-locked .v3-link-row,
.v3-inputs-locked .v3-upload-newver,
.v3-inputs-locked .v3-slot-skip,
.v3-inputs-locked .v3-courier-toggle { display: none !important; }
.v3-inputs-locked .v3-slot { opacity: .96; }
.v3-inputs-locked .v3-card-head .v3-pill { font-size: 11px; }

/* ============================================================
   Completed stage TAB — green fill + white text
   ============================================================ */
.v3-stage-tab.is-completed-stage {
    background: var(--s-green-fg); border-color: var(--s-green-fg); color: #fff;
    opacity: 1 !important;
}
.v3-stage-tab.is-completed-stage .v3-stage-sub { color: rgba(255,255,255,0.85) !important; }
.v3-stage-tab.is-completed-stage .v3-stage-ico {
    background: rgba(255,255,255,0.22); color: #fff;
    display: grid; place-items: center; font-weight: 700;
}
.v3-stage-tab.is-completed-stage.is-active {
    box-shadow: 0 0 0 2px var(--s-green-fg), 0 0 0 4px rgba(37,109,77,0.25);
}

/* ============================================================
   Anatomical tooth chart — type-based fills
   ============================================================ */
.v3-tooth-svg .tc-tooth {
    fill: var(--c-white, #ffffff); stroke: var(--c-brand, #0E7C7B); stroke-width: 1.4;
    cursor: pointer; transition: fill .12s, stroke .12s;
}
.v3-tooth-svg .tc-tooth:hover { fill: var(--c-brand-softer, #eaf5f4); }
.v3-tooth-svg .tc-tooth.tc-selected { fill: var(--c-brand, #0E7C7B); stroke: var(--c-brand-deep, #0a5c5b); stroke-width: 4; }


/* ============================================================
   Stage status select — no overlap with long status text
   ============================================================ */
.v3-stage-bar-row { row-gap: 6px; }
.v3-stage-bar-row .v3-stage-status-select {
    max-width: 170px; min-width: 130px; flex-shrink: 0;
}
.v3-stage-bar-row .v3-pill { white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   Notices / action callouts — clearer typography for clinicians
   ============================================================ */
.v3-note {
    font-size: 13.5px; line-height: 1.5; font-weight: 500;
    padding: 12px 14px; border-radius: var(--r-md);
    display: flex; gap: 10px; align-items: flex-start;
}
.v3-note.blue { background: var(--s-blue-bg); border: 1px solid var(--s-blue-bd); color: var(--s-blue-fg); }
.v3-note-ico {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    background: var(--s-blue-fg); color: #fff; font-weight: 700; font-size: 12px;
    display: grid; place-items: center;
}
/* the Action-needed card title bigger + bolder so it isn't missed */
details.v3-todo-card .v3-todo-title { font-size: 14.5px; font-weight: 700; color: var(--s-amber-fg); }
details.v3-todo-card > summary { background: var(--s-amber-bg); }
details.v3-todo-card { border: 1px solid var(--s-amber-bd); border-left: 4px solid var(--s-amber-fg); }

/* ============================================================
   Tighter, less-scattered stage panel rhythm
   ============================================================ */
.v3-stage-panel > .v3-card,
.v3-stage-panel > .v3-stage-bar,
.v3-stage-panel > details { margin-bottom: 12px; }
.v3-card-head { padding: 13px 16px; }
.v3-card-body { padding: 16px; }

/* zip-upload hint under CBCT/scan drop zones */
.v3-zip-hint {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; line-height: 1.45; font-weight: 500;
    color: var(--c-brand-strong);
    background: var(--c-brand-softer); border: 1px solid var(--c-brand-border);
    border-radius: var(--r-md); padding: 9px 11px;
}
.v3-zip-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--c-brand); }
.v3-zip-hint strong { font-weight: 700; }

/* ============================================================
   Tooth board — UPPER over LOWER in one large container
   ============================================================ */
.v3-tooth-board {
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg, 14px);
    background: var(--c-surface, #fff);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v3-tooth-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v3-tooth-row .v3-tooth-svg {
    width: 100%;
    height: auto;
    display: block;
}
.v3-tooth-divider {
    height: 1px;
    background: var(--c-line);
    margin: 6px 0;
}
.v3-tooth-board .v3-tooth-chart-head {
    display: flex; justify-content: space-between; align-items: baseline; width: 100%;
}
.v3-tooth-board .v3-tooth-chart-label { font-size: 12px; font-weight: 700; color: var(--c-muted); letter-spacing: .5px; }
.v3-tooth-board .v3-tooth-chart-count { font-size: 11px; color: var(--c-muted); background: var(--c-line-soft); padding: 3px 10px; border-radius: 999px; }

/* tooth crown/root detail lines (white overlay → shown as subtle lines) */
.tc-detail {
    fill: var(--c-white);
    stroke: var(--c-brand);
    stroke-width: 1.4;
    pointer-events: none;
    transition: fill .1s, stroke .1s, opacity .1s;
}
/* when tooth selected: keep detail lines visible as light overlay on teal fill */
.tc-tooth.tc-selected ~ .tc-detail {
    fill: var(--c-brand-deep);
    stroke: rgba(255,255,255,0.65);
    stroke-width: 1.2;
    opacity: 0.5;
}

/* order header due date */
.v3-order-duedate {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 6px; font-size: 14px; color: var(--c-text);
    background: var(--c-brand-softer); border: 1px solid var(--c-brand-border);
    padding: 5px 12px; border-radius: 999px;
}
.v3-order-duedate svg { color: var(--c-brand); flex-shrink: 0; }
.v3-order-duedate strong { font-weight: 700; color: var(--c-brand-strong); }

/* shared-link chip (clean button-like link, replaces the old note-styled link) */
.v3-link-chip {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 100%; text-decoration: none;
    background: var(--c-brand-softer); border: 1px solid var(--c-brand-border);
    color: var(--c-brand-strong); border-radius: 8px;
    padding: 8px 12px; font-size: 13px; font-weight: 600;
    transition: background .12s, border-color .12s;
}
.v3-link-chip:hover { background: var(--c-brand-soft, #d8ecea); border-color: var(--c-brand); }
.v3-link-chip svg { flex-shrink: 0; color: var(--c-brand); }
.v3-link-chip-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0; font-weight: 500; color: var(--c-text);
}
.v3-link-chip-open { flex-shrink: 0; font-weight: 700; color: var(--c-brand-strong); }

/* staff "request re-upload" affordance under a filled slot */
.v3-reupload-wrap { border-top: 1px dashed var(--c-line); padding-top: 10px; }
.v3-reupload-btn { color: var(--s-amber-fg, #9A6A00); border-color: var(--s-amber-bd, #F5D88A); }
.v3-reupload-btn:hover { background: var(--s-amber-bg, #FEF6E7); }
.v3-reupload-form .v3-input-sm { width: 100%; }

/* due-date rush-fee warning (within 7 days) */
.v3-duedate-warn {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--s-amber-bg, #FEF6E7); border: 1px solid var(--s-amber-bd, #F5D88A);
    color: var(--s-amber-fg, #9A6A00); border-radius: 8px;
    padding: 8px 11px; font-size: 12.5px; line-height: 1.45; margin-top: 8px;
}
.v3-duedate-warn svg { color: var(--s-amber-fg, #9A6A00); margin-top: 1px; }
.v3-duedate-warn strong { font-weight: 700; }



/* internal staff-only chat + activity tag */
.v3-internal-tag {
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    color: var(--s-amber-fg, #9A6A00);
    background: var(--s-amber-bg, #FEF6E7); border: 1px solid var(--s-amber-bd, #F5D88A);
    padding: 2px 8px; border-radius: 999px; margin-left: auto; white-space: nowrap;
}
.v3-chat-tag {
    font-size: 10px; font-weight: 600; color: var(--c-muted);
    background: var(--c-line-soft, #eee); padding: 2px 8px; border-radius: 999px;
    margin-left: auto; white-space: nowrap;
}
.v3-chat-internal { border: 1px solid var(--s-amber-bd, #F5D88A); background: #fffdf8; }
.v3-chat-internal .v3-card-head { background: var(--s-amber-bg, #FEF6E7); border-bottom: 1px solid var(--s-amber-bd, #F5D88A); }
.v3-chat-internal .v3-card-title { color: var(--s-amber-fg, #9A6A00); }
.v3-btn-internal { background: var(--s-amber-fg, #9A6A00); border-color: var(--s-amber-fg, #9A6A00); }
.v3-btn-internal:hover { filter: brightness(1.08); }

/* ============================================================
   Stage status — progress stepper (track + nodes)
   ============================================================ */
.v3-stepper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex: 1;
    min-width: 240px;
    max-width: 640px;
    padding: 6px 8px 2px;
}
/* the connecting track behind the nodes */
.v3-stepper-track {
    position: absolute;
    left: calc(8px + 9px);
    right: calc(8px + 9px);
    top: 15px;
    height: 3px;
    background: var(--c-line, #e3e3df);
    border-radius: 3px;
    z-index: 0;
}
.v3-stepper-fill {
    height: 100%;
    background: var(--c-brand);
    border-radius: 3px;
    transition: width .35s cubic-bezier(.4,0,.2,1);
}
/* each step = a node + label, evenly distributed */
.v3-step {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: default;
    min-width: 0;
}
.v3-step-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; line-height: 1;
    border: 2px solid var(--c-line, #d4d4d0);
    background: var(--c-surface, #fff);
    color: #fff;
    transition: all .2s;
}
.v3-step-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--c-muted-2, #9aa0a6);
    white-space: nowrap;
    transition: color .2s;
    letter-spacing: .1px;
}
.v3-step-actor {
    font-size: 8.5px; font-weight: 600; color: var(--c-light);
    text-transform: lowercase; letter-spacing: .02em;
    white-space: nowrap; margin-top: 1px; opacity: .85;
}
.v3-step-current .v3-step-actor { color: var(--c-brand); opacity: 1; }
.v3-step-done .v3-step-actor { opacity: .6; }
/* DONE: filled teal node with check */
.v3-step-done .v3-step-dot {
    background: var(--c-brand);
    border-color: var(--c-brand);
}
.v3-step-done .v3-step-label { color: var(--c-brand-strong); font-weight: 600; }
/* CURRENT: bigger, bold ring + pulse so "you are here" is unmistakable */
.v3-step-current .v3-step-dot {
    width: 22px; height: 22px;
    background: var(--c-brand-deep);
    border-color: var(--c-brand-deep);
    box-shadow: 0 0 0 4px var(--c-brand-softer, #e8f3f2);
    margin-top: -2px;
}
.v3-step-current .v3-step-label {
    color: var(--c-brand-deep);
    font-weight: 800;
}
/* TODO: hollow grey node */
.v3-step-todo .v3-step-dot {
    background: var(--c-surface, #fff);
    border-color: var(--c-line, #d4d4d0);
    color: transparent;
}
/* clickable (staff) */
.v3-stepper.is-clickable .v3-step { cursor: pointer; }
.v3-stepper.is-clickable .v3-step:hover .v3-step-dot { border-color: var(--c-brand); transform: scale(1.12); }
.v3-stepper.is-clickable .v3-step:hover .v3-step-label { color: var(--c-brand-strong); }
/* revision state: track + current node turn red */
.v3-stepper.is-revision .v3-stepper-fill { background: var(--s-red-fg, #C0392B); }
.v3-stepper.is-revision .v3-step-current .v3-step-dot {
    background: var(--s-red-fg, #C0392B);
    border-color: var(--s-red-fg, #C0392B);
    box-shadow: 0 0 0 4px var(--s-red-bg, #FDEDEC);
}
.v3-stepper.is-revision .v3-step-current .v3-step-label { color: var(--s-red-fg, #C0392B); }
@media (max-width: 640px) {
    .v3-step-label { font-size: 9px; }
    .v3-stepper { min-width: 0; padding: 6px 4px 2px; }
}

/* internal notes — collapsible (default collapsed) */
.v3-chat-internal {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
}
.v3-chat-internal-summary {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; list-style: none; user-select: none;
}
.v3-chat-internal-summary::-webkit-details-marker { display: none; }
.v3-chat-internal-summary .v3-details-chevron { margin-left: 4px; transition: transform .15s; }
.v3-chat-internal[open] .v3-chat-internal-summary .v3-details-chevron { transform: rotate(180deg); }
.v3-chat-internal-body {
    display: flex; flex-direction: column;
    height: 420px; max-height: 60vh;
    padding-top: 2px;
}
.v3-chat-internal-body .v3-chat-stream { flex: 1; }

/* internal note messages — copy-friendly */
.v3-imsg {
    padding: 8px 10px; margin-bottom: 6px;
    background: #fff; border: 1px solid var(--s-amber-bd, #F5D88A);
    border-radius: 8px;
}
.v3-imsg.mine { background: #fffdf6; }
.v3-imsg-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; margin-bottom: 3px;
}
.v3-imsg-who { font-weight: 700; color: var(--s-amber-fg, #9A6A00); }
.v3-imsg-time { color: var(--c-muted-2, #9aa0a6); }
.v3-imsg-copy {
    margin-left: auto; border: 1px solid var(--c-line); background: var(--c-surface,#fff);
    color: var(--c-muted); border-radius: 6px; padding: 2px 8px;
    font-size: 10.5px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
}
.v3-imsg-copy:hover { background: var(--s-amber-bg, #FEF6E7); color: var(--s-amber-fg, #9A6A00); border-color: var(--s-amber-bd, #F5D88A); }
.v3-imsg-body {
    font-size: 13px; line-height: 1.5; color: var(--c-text);
    white-space: pre-wrap; word-break: break-word;
    user-select: text; cursor: text;
}
.v3-status-detail { color: var(--c-muted); font-size: 11.5px; }

/* surgery date chip (header) — distinct from due date */
.v3-surgery-chip-wrap { margin-top: 7px; }
.v3-surgery-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--c-line);
}
.v3-surgery-chip.is-set { background: var(--s-blue-bg, #EAF2FD); border-color: #cfe0f6; }
.v3-surgery-chip.is-set svg, .v3-surgery-chip.is-set .v3-surgery-value { color: var(--s-blue-fg, #1A5DAB); }
.v3-surgery-chip.is-unset { background: var(--c-line-soft, #f3f3f0); }
.v3-surgery-chip.is-unset .v3-surgery-value { color: var(--c-muted); font-style: italic; font-weight: 600; }
.v3-surgery-label { color: var(--c-muted); }
.v3-surgery-value { font-weight: 700; }
.v3-surgery-edit-btn {
    margin-left: 4px; border: none; background: none; cursor: pointer;
    color: var(--c-brand-strong); font-weight: 700; font-size: 12px; font-family: inherit;
    text-decoration: underline; padding: 0;
}
.v3-surgery-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* per-stage clinical appointment bar */
.v3-appt-bar {
    border: 1px solid var(--c-line); border-radius: 10px;
    padding: 8px 12px; background: var(--s-blue-bg, #EAF2FD);
}
.v3-appt-display { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v3-appt-display svg { color: var(--s-blue-fg, #1A5DAB); flex-shrink: 0; }
.v3-appt-label { font-size: 13px; color: var(--s-blue-fg, #1A5DAB); font-weight: 600; }
.v3-appt-value { font-size: 13px; font-weight: 700; color: var(--c-text); }
.v3-appt-value.is-unset { font-weight: 600; font-style: italic; color: var(--c-muted); }
.v3-appt-display .v3-appt-edit-btn { margin-left: auto; }
.v3-appt-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* storage / cost dashboard */
.v3-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.v3-stat-card {
    border: 1px solid var(--c-line); border-radius: 12px; padding: 14px 16px;
    background: var(--c-surface, #fff);
}
.v3-stat-card.is-warn { border-color: var(--s-amber-bd, #F5D88A); background: var(--s-amber-bg, #FEF6E7); }
.v3-stat-label { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.v3-stat-value { font-size: 24px; font-weight: 800; color: var(--c-text); margin: 4px 0 2px; }
.v3-stat-sub { font-size: 11.5px; color: var(--c-muted-2, #9aa0a6); }
.v3-storage-table { width: 100%; border-collapse: collapse; }
.v3-storage-table th { text-align: left; font-size: 11.5px; color: var(--c-muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.v3-storage-table td { padding: 10px 14px; border-bottom: 1px solid var(--c-line-soft, #eee); font-size: 13px; }

/* ============================================================
   Full-screen upload progress overlay
   ============================================================ */
.v3-upload-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(8, 12, 16, 0.82);
    backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    animation: v3uoFade .2s ease;
}
@keyframes v3uoFade { from { opacity: 0; } to { opacity: 1; } }
.v3-upload-overlay.is-on { display: flex; }
.v3-uo-box {
    text-align: center; color: #fff; padding: 36px 40px; max-width: 380px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
}
.v3-uo-ring { position: relative; width: 150px; height: 150px; margin: 0 auto 22px; }
.v3-uo-ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.v3-uo-track { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 9; }
.v3-uo-fill {
    fill: none; stroke: var(--c-brand, #0E7C7B); stroke-width: 9; stroke-linecap: round;
    transition: stroke-dashoffset .3s ease;
    filter: drop-shadow(0 0 6px rgba(14,124,123,0.6));
}
.v3-uo-pct {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.v3-uo-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.v3-uo-name { font-size: 13px; color: rgba(255,255,255,0.78); word-break: break-all; margin-bottom: 16px; }
.v3-uo-hint { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5; }

/* ---- in-slot upload state (in progress / failed) ---- */
.v3-upload-state { border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.v3-upload-state.is-failed { background: var(--s-red-bg, #FDEDEC); border: 1px solid var(--s-red-bd, #f3b4b4); }
.v3-upload-state.is-progress { background: var(--s-blue-bg, #EAF2FD); border: 1px solid #cfe0f6; }
.v3-upload-state-row { display: flex; gap: 10px; align-items: flex-start; }
.v3-upload-state-ico { font-size: 18px; line-height: 1.2; color: var(--s-red-fg, #C0392B); flex-shrink: 0; }
.v3-upload-state-title { font-weight: 700; font-size: 13.5px; }
.v3-upload-state.is-failed .v3-upload-state-title { color: var(--s-red-fg, #C0392B); }
.v3-upload-state.is-progress .v3-upload-state-title { color: var(--s-blue-fg, #1A5DAB); }
.v3-upload-state-file { font-size: 12.5px; color: var(--c-muted); word-break: break-all; margin-top: 1px; }
.v3-upload-state-reason { font-size: 11.5px; color: var(--c-muted-2, #9aa0a6); margin-top: 3px; }
.v3-upload-state-spinner {
    width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
    border: 2px solid #cfe0f6; border-top-color: var(--s-blue-fg, #1A5DAB);
    border-radius: 50%; animation: v3-spin .8s linear infinite;
}
@keyframes v3-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Re-upload request — prominent, at the upload slot
   ============================================================ */
.v3-slot.needs-reupload {
    border: 2px solid var(--s-amber-fg, #9A6A00) !important;
    box-shadow: 0 0 0 4px var(--s-amber-bg, #FEF6E7);
}
.v3-reupload-banner {
    background: var(--s-amber-bg, #FEF6E7);
    border: 1px solid var(--s-amber-bd, #F5D88A);
    border-radius: 10px; padding: 11px 12px; margin-bottom: 12px;
}
.v3-reupload-banner-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; vertical-align: -5px; margin-right: 6px;
    background: var(--s-amber-fg, #9A6A00); color: #fff;
    animation: v3-reupload-pulse 2s ease-in-out infinite;
}
.v3-reupload-banner-ico svg { width: 12px; height: 12px; }
@keyframes v3-reupload-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(154,106,0,0.35); }
    50%     { box-shadow: 0 0 0 6px rgba(154,106,0,0); }
}
.v3-reupload-banner-title { font-weight: 800; font-size: 13px; color: var(--s-amber-fg, #9A6A00); line-height: 1.35; }
.v3-reupload-banner-text { font-size: 11.5px; color: var(--c-muted); margin-top: 5px; line-height: 1.45; }
.v3-reupload-banner-btn {
    margin-top: 9px; width: 100%;
    background: var(--s-amber-fg, #9A6A00); border-color: var(--s-amber-fg, #9A6A00);
}
.v3-reupload-banner-btn:hover { filter: brightness(1.08); }

/* ============================================================
   v3 login page
   ============================================================ */
.v3-login-wrap {
    min-height: 70vh; display: flex; align-items: center; justify-content: center;
    padding: 40px 16px;
}
.v3-login-card {
    width: 100%; max-width: 380px;
    background: var(--c-surface, #fff); border: 1px solid var(--c-line, #e3e3df);
    border-radius: 16px; padding: 32px 28px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}
.v3-login-brand { text-align: center; margin-bottom: 24px; }
.v3-login-logo {
    width: 52px; height: 52px; border-radius: 13px; margin: 0 auto 12px;
    background: var(--c-text, #1a1c20); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 19px; letter-spacing: .5px;
}
.v3-login-title { font-size: 20px; font-weight: 800; color: var(--c-text); }
.v3-login-sub { font-size: 13px; color: var(--c-muted); margin-top: 3px; }
.v3-login-form .v3-label { display: block; margin-bottom: 5px; }

.v3-login-links { text-align: center; margin-top: 18px; font-size: 13px; }
.v3-login-links a { color: var(--c-brand, #0E7C7B); font-weight: 600; text-decoration: none; }
.v3-login-links a:hover { text-decoration: underline; }
.v3-login-dot { color: var(--c-muted-2, #9aa0a6); margin: 0 8px; }
.v3-alert.warn { background: var(--s-amber-bg, #FEF6E7); border: 1px solid var(--s-amber-bd, #F5D88A); color: var(--s-amber-fg, #9A6A00); }

/* ============================================================
   v3 auth pages (login / register / forgot) — modern split card
   ============================================================ */
.v3-auth {
    min-height: 78vh; display: flex; align-items: center; justify-content: center;
    padding: 40px 16px;
}
.v3-auth-card {
    width: 100%; max-width: 820px; display: grid; grid-template-columns: 0.85fr 1fr;
    background: var(--c-surface, #fff); border-radius: 20px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(16,22,26,0.13), 0 2px 8px rgba(16,22,26,0.06);
}
.v3-auth-card-wide { max-width: 920px; }
.v3-auth-aside {
    background: linear-gradient(150deg, #0052CC 0%, #0747A6 60%, #09326C 100%);
    color: #fff; display: flex; align-items: center; padding: 40px 34px; position: relative;
}
.v3-auth-aside::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 15%, rgba(255,255,255,0.12), transparent 45%);
}
.v3-auth-aside-inner { position: relative; z-index: 1; }
.v3-auth-logo {
    width: 50px; height: 50px; border-radius: 13px; margin-bottom: 22px;
    background: rgba(255,255,255,0.16); color: #fff; backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
}
.v3-auth-aside-title { font-size: 25px; font-weight: 800; margin: 0 0 12px; line-height: 1.2; }
.v3-auth-aside-text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 32px; }
.v3-auth-aside-foot { font-size: 13.5px; color: rgba(255,255,255,0.8); }
.v3-auth-aside-foot span { display: block; margin-bottom: 10px; }
.v3-auth-aside-btn {
    display: inline-block; padding: 9px 20px; border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 9px; color: #fff !important; font-weight: 700; font-size: 13.5px;
    text-decoration: none; transition: all .15s;
}
.v3-auth-aside-btn:hover { background: #fff; color: var(--c-brand-deep, #0a5c5b) !important; border-color: #fff; }
.v3-auth-main { padding: 42px 38px; display: flex; flex-direction: column; justify-content: center; }
.v3-auth-head { margin-bottom: 22px; }
.v3-auth-title { font-size: 26px; font-weight: 800; color: var(--c-text, #1a1c20); margin: 0; }
.v3-auth-sub { font-size: 14px; color: var(--c-muted, #54585f); margin: 4px 0 0; }
.v3-auth-sub strong { color: var(--c-brand, #0E7C7B); font-weight: 700; }
.v3-auth-form .v3-label { display: block; margin-bottom: 5px; }
.v3-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.v3-auth-pw { position: relative; }
.v3-auth-pw .v3-input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.v3-auth-pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 16px; opacity: .5; padding: 6px;
}
.v3-auth-pw-toggle.is-on { opacity: 1; }
.v3-auth-submit { width: 100%; padding: 12px; font-size: 15px; font-weight: 700; margin-top: 2px; }
.v3-auth-links { text-align: center; margin-top: 18px; font-size: 13px; }
.v3-auth-links a { color: var(--c-brand, #0E7C7B); font-weight: 600; text-decoration: none; }
.v3-auth-links a:hover { text-decoration: underline; }
@media (max-width: 680px) {
    .v3-auth-card, .v3-auth-card-wide { grid-template-columns: 1fr; max-width: 440px; }
    .v3-auth-aside { padding: 30px 28px; }
    .v3-auth-aside-title { font-size: 22px; }
    .v3-auth-main { padding: 32px 26px; }
    .v3-auth-grid { grid-template-columns: 1fr; }
}

/* single-card auth (forgot/reset) + dark logo variant */
.v3-auth-card-solo {
    grid-template-columns: 1fr; max-width: 440px;
}
.v3-auth-card-solo .v3-auth-main { padding: 40px 36px; }
.v3-auth-logo-dark {
    background: var(--c-brand); color: #fff; margin-bottom: 18px;
}
.v3-auth-head .v3-auth-logo { margin-left: 0; }
.v3-mb-2 { margin-bottom: 8px; }

/* ============================================================
   Crown option diagrams + 3-zone shade picker
   ============================================================ */
.v3-dia-grid { display: grid; grid-template-columns: repeat(auto-fill, 116px); gap: 8px; justify-content: start; }
.v3-dia-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 8px; border: 1.5px solid var(--c-line, #e3e3df); border-radius: 11px;
    cursor: pointer; background: var(--c-surface, #fff); transition: border-color .15s, background .15s, box-shadow .15s;
}
.v3-dia-card:hover { border-color: var(--c-muted, #9aa0a6); }
.v3-dia-card.is-selected { border-color: var(--c-brand, #0E7C7B); background: var(--c-brand-soft, #d7eceb); box-shadow: 0 0 0 2px var(--c-brand-soft, #d7eceb); }
.v3-dia-pic { width: 66px; height: 66px; display: block; }
.v3-dia-pic svg { width: 100%; height: 100%; }
.v3-dia-label { font-size: 12.5px; font-weight: 600; color: var(--c-text, #1a1c20); }

/* shade picker */
.v3-shade {
    border: 1px solid var(--c-line, #e3e3df); border-radius: 14px; padding: 16px;
    display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
    background: var(--c-surface, #fff);
}
.v3-shade-tooth-wrap { display: flex; gap: 12px; align-items: center; }
.v3-shade-tooth { width: 84px; height: 112px; }
.v3-shade-zonelabels { display: flex; flex-direction: column; gap: 6px; }
.v3-shade-zonebtn {
    border: 1.5px solid var(--c-line, #e3e3df); background: var(--c-surface, #fff);
    border-radius: 9px; padding: 6px 10px; font-size: 11px; font-weight: 600; line-height: 1.3;
    color: var(--c-muted, #54585f); cursor: pointer; text-align: left; min-width: 74px; transition: all .12s;
}
.v3-shade-zonebtn.is-active { border-color: var(--c-brand, #0E7C7B); color: var(--c-brand, #0E7C7B); background: var(--c-brand-soft, #d7eceb); }
.v3-shade-val { font-size: 13px; font-weight: 800; color: var(--c-text, #1a1c20); }
.v3-shade-zonebtn.is-active .v3-shade-val { color: var(--c-brand-deep, #0a5c5b); }
.v3-shade-palette-hint { font-size: 12px; color: var(--c-muted, #54585f); margin-bottom: 9px; }
.v3-shade-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: 7px; }
.v3-shade-swatch {
    position: relative; height: 40px; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 8px;
    cursor: pointer; transition: transform .1s, box-shadow .1s; padding: 0;
}
.v3-shade-swatch span {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #3a3326; text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
.v3-shade-swatch:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.v3-shade-swatch.is-on { border-color: var(--c-brand, #0E7C7B); box-shadow: 0 0 0 3px var(--c-brand-soft, #d7eceb); }
@media (max-width: 560px) {
    .v3-shade { grid-template-columns: 1fr; }
    .v3-shade-tooth-wrap { justify-content: center; }
}

/* ============================================================
   Implant-site tooth chart — 2-column (chart + selected aside)
   ============================================================ */
.v3-tooth-layout { display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items: start; }
.v3-tooth-main { min-width: 0; }
.v3-tooth-aside {
    border: 1px solid var(--c-line, #e3e3df); border-radius: var(--r-lg, 14px);
    background: var(--c-surface, #fff); padding: 16px; position: sticky; top: 16px;
    align-self: start;
}
.v3-tooth-aside-head {
    font-size: 12px; font-weight: 700; color: var(--c-text, #1a1c20); letter-spacing: .3px;
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
    text-transform: uppercase;
}
.v3-tooth-aside-count {
    font-size: 12px; font-weight: 800; color: #fff; background: var(--c-brand, #0E7C7B);
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}
.v3-tooth-aside-empty { font-size: 12px; color: var(--c-muted-2, #9aa0a6); line-height: 1.5; }
.v3-tooth-aside-group { margin-bottom: 14px; }
.v3-tooth-aside-group:last-child { margin-bottom: 0; }
.v3-tooth-aside-arch {
    font-size: 10px; font-weight: 700; color: var(--c-muted, #54585f); letter-spacing: .5px;
    text-transform: uppercase; margin-bottom: 7px;
}
.v3-tooth-aside .v3-tooth-chip {
    font-size: 12px; padding: 4px 10px; cursor: pointer; transition: background .12s;
}
.v3-tooth-aside .v3-tooth-chip:hover { background: var(--s-red-bg, #FDEDEC); color: var(--s-red-fg, #C0392B); }
.v3-tooth-aside .v3-tooth-chip::after { content: " ×"; opacity: .5; font-weight: 700; }
@media (max-width: 760px) {
    .v3-tooth-layout { grid-template-columns: 1fr; }
    .v3-tooth-aside { position: static; }
}

/* original photo diagrams for occlusal / proximal / embrasure options */
.v3-dia-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v3-dia-pic .v3-dia-img { max-height: 64px; }

/* small contact diagram next to spec values on the order-detail page */
.v3-spec-item-dia .v3-spec-val { display: flex; align-items: center; gap: 8px; }
.v3-spec-dia { display: inline-flex; width: 30px; height: 30px; flex: none; }
.v3-spec-dia svg { width: 100%; height: 100%; }

/* ============ inline form validation ============ */
.v3-invalid,
.v3-invalid.v3-input,
.v3-invalid.v3-select { border-color: #D6453B !important; box-shadow: 0 0 0 3px rgba(214,69,59,.12) !important; }
.v3-tooth-board.v3-invalid { border: 1.5px solid #D6453B !important; box-shadow: 0 0 0 3px rgba(214,69,59,.10) !important; }
.v3-stage-pick.v3-invalid { border-color: #D6453B !important; box-shadow: 0 0 0 3px rgba(214,69,59,.12) !important; }
.v3-field-error {
    color: #C0392B; font-size: 12px; font-weight: 600; margin-top: 6px;
    display: flex; align-items: center; gap: 5px;
}
.v3-field-error::before {
    content: ""; width: 13px; height: 13px; flex: none;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C0392B'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 6c.6 0 1 .4 1 1v5c0 .6-.4 1-1 1s-1-.4-1-1V9c0-.6.4-1 1-1zm0 9.5a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'/%3E%3C/svg%3E");
}

/* ============ new-order readability: numbered sections ============ */
.v3-step-num {
    display: inline-grid; place-items: center; flex: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--c-brand, #0E7C7B); color: #fff;
    font-size: 12px; font-weight: 700; margin-right: 9px;
}
/* make section titles a touch larger/clearer so the flow scans at a glance */
.v3-card-head .v3-card-title { font-size: 14px; font-weight: 700; }
.v3-card-head { padding: 14px 18px; }

/* ============ compact shade picker (dropdown per zone) ============ */
.v3-shade-compact { display: inline-block; width: auto; max-width: 100%; }
.v3-shade-compact .v3-shade-row { display: flex; gap: 18px; align-items: center; }
.v3-shade-compact .v3-shade-tooth { width: 78px; height: 110px; flex: none; }
.v3-shade-zones-compact { display: flex; flex-direction: column; gap: 9px; min-width: 0; width: 300px; max-width: 100%; }
.v3-shade-zone-select { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; }
.v3-shade-zone-name { font-size: 12px; font-weight: 600; color: var(--c-muted, #54585f); }
.v3-shade-dd { width: 100%; }
.v3-shade-hint { font-size: 11.5px; color: var(--c-muted-2, #9aa0a6); margin-top: 2px; }

/* ============ crown form: group related inputs into rows ============ */
.v3-crown-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; align-items: start; }
.v3-crown-row .v3-field { margin-bottom: 14px; }
@media (max-width: 620px) { .v3-crown-row { grid-template-columns: 1fr; } }

/* ============ crown contacts: 3 groups in one row ============ */
.v3-contacts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.v3-contacts-row .v3-field { margin-bottom: 0; }
.v3-contacts-row .v3-field:nth-child(1) .v3-dia-grid { grid-template-columns: repeat(3, 1fr); }
.v3-contacts-row .v3-field:nth-child(2) .v3-dia-grid,
.v3-contacts-row .v3-field:nth-child(3) .v3-dia-grid { grid-template-columns: repeat(2, 1fr); }
.v3-contacts-row .v3-dia-grid { gap: 6px; }
.v3-contacts-row .v3-dia-card {
    padding: 8px 4px; gap: 4px; justify-content: flex-start;
    min-height: 88px;            /* uniform card height across all 3 groups */
}
.v3-contacts-row .v3-dia-pic { width: 100%; height: auto; aspect-ratio: 1; max-width: 48px; margin: 0 auto; }
.v3-contacts-row .v3-dia-label { font-size: 10.5px; line-height: 1.2; margin-top: auto; }
@media (max-width: 700px) { .v3-contacts-row { grid-template-columns: 1fr; } }

/* ============ crown form: consistent vertical rhythm ============ */
.v3-ib[data-ib="crown"] > div > .v3-field,
.v3-ib[data-ib="crown"] > div > [data-crown-section],
.v3-ib[data-ib="crown"] > div > .v3-crown-row,
.v3-ib[data-ib="crown"] > div > .v3-ib-detail,
.v3-ib[data-ib="temp_crown"] > .v3-field,
.v3-ib[data-ib="temp_crown"] > .v3-crown-row,
.v3-ib[data-ib="temp_crown"] > .v3-ib-detail {
    margin-bottom: 20px;
}
.v3-ib[data-ib="crown"] > div > *:last-child,
.v3-ib[data-ib="temp_crown"] > *:last-child { margin-bottom: 0; }
/* contacts row label spacing to match other section labels */
.v3-contacts-row .v3-label { margin-bottom: 8px; }

/* pontic design cards — match the compact contacts sizing */
[data-crown-section="pontic"] .v3-dia-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
[data-crown-section="pontic"] .v3-dia-card { padding: 8px 4px; gap: 4px; min-height: 96px; justify-content: flex-start; }
[data-crown-section="pontic"] .v3-dia-pic { width: 100%; height: auto; aspect-ratio: 1; max-width: 52px; margin: 0 auto; }
[data-crown-section="pontic"] .v3-dia-label { font-size: 10.5px; line-height: 1.2; margin-top: auto; }
@media (max-width: 560px){ [data-crown-section="pontic"] .v3-dia-grid { grid-template-columns: repeat(2,1fr); } }

/* ============ abutment / retention / material — one row ============ */
.v3-triple-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.v3-triple-row .v3-field { margin-bottom: 0; }
@media (max-width: 620px) { .v3-triple-row { grid-template-columns: 1fr; } }

/* ============ All-on-X FP class cards (compact, consistent) ============ */
.v3-fp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 420px; }
.v3-fp-grid .v3-dia-card { padding: 12px 8px; gap: 6px; min-height: 0; }
.v3-fp-grid .v3-dia-pic { width: 100%; height: auto; aspect-ratio: 5/4; max-width: 92px; margin: 0 auto; }
.v3-fp-grid .v3-dia-label { font-size: 13px; font-weight: 700; }
.v3-fp-desc { font-size: 10.5px; color: var(--c-muted-2, #9aa0a6); line-height: 1.25; text-align: center; }
@media (max-width: 560px){ .v3-fp-grid { grid-template-columns: 1fr; } }

/* ============ dashboard pagination ============ */
.v3-pagination {
    display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;
    gap: 8px 18px; padding: 14px 4px 4px; margin-top: 8px;
}
.v3-pg-info { font-size: 12px; color: var(--c-muted, #54585f); font-weight: 500; order: 1; }
.v3-pg-controls { display: flex; align-items: center; gap: 4px; order: 2; }
.v3-pg-perpage { display: flex; align-items: center; gap: 4px; order: 3; margin-left: auto; }
.v3-pg-btn, .v3-pg-num, .v3-pg-pp {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px;
    border: 1px solid var(--c-line, #e3e3df); background: var(--c-surface, #fff);
    font-size: 12.5px; font-weight: 600; color: var(--c-text, #1a1c20);
    text-decoration: none; transition: border-color .12s, background .12s, color .12s;
}
.v3-pg-btn:hover, .v3-pg-num:hover, .v3-pg-pp:hover { border-color: var(--c-brand, #0E7C7B); color: var(--c-brand, #0E7C7B); }
.v3-pg-num.is-current, .v3-pg-pp.is-current {
    background: var(--c-brand, #0E7C7B); border-color: var(--c-brand, #0E7C7B); color: #fff;
}
.v3-pg-btn.is-disabled { opacity: .4; pointer-events: none; }
.v3-pg-gap { padding: 0 4px; color: var(--c-muted-2, #9aa0a6); font-size: 12px; }
.v3-pg-perpage-label { font-size: 11.5px; color: var(--c-muted, #54585f); font-weight: 600; margin-right: 4px; }
@media (max-width: 640px) {
    .v3-pagination { flex-direction: column; align-items: stretch; }
    .v3-pg-controls { justify-content: center; flex-wrap: wrap; }
    .v3-pg-perpage, .v3-pg-info { justify-content: center; text-align: center; }
}

/* top pagination sits right above the table — a touch tighter, with a divider */
.v3-pagination-top { padding: 4px 4px 12px; margin-top: 0; border-bottom: 1px solid var(--c-line-soft, #f0f0ed); margin-bottom: 10px; }

/* dashboard staff clinic/dentist column */
.v3-cell-clinic { font-weight: 600; font-size: 13px; color: var(--c-text, #1a1c20); }
.v3-cell-clinic + .v3-cell-sub { font-size: 11.5px; color: var(--c-muted, #54585f); margin-top: 1px; }

/* staff: clinic / dentist surfaced on cards & calendar */
.v3-today-clinic { color: var(--c-brand-strong, #0B6463); font-weight: 600; }
.v3-risk-clinic { color: var(--c-muted, #54585f); font-weight: 500; }
.v3-cal-event-clinic { display: block; font-size: 9.5px; color: var(--c-muted, #54585f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.v3-order-clinic { color: var(--c-brand-strong, #0B6463); font-weight: 600; }
.v3-order-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   ROLE INDICATOR — one quiet, professional signal: a refined badge
   with a small colour dot. No loud bars or recoloured logo.
   ============================================================ */
/* ═══════════════════════════════════════════════════════════════════
   ROLE SYSTEM + DARK HEADER  (admin / subadmin / user)
   ═══════════════════════════════════════════════════════════════════ */

/* per-role accent colour (drives bar, badge, nav active, logo) */
.v3-app.role-admin    { --role:#0052CC; --role-soft:#E9F2FF; --role-on-dark:#4C9AFF; --role-name:"Admin"; }
.v3-app.role-subadmin { --role:#5E4DB2; --role-soft:#EAE6FF; --role-on-dark:#9F8FEF; --role-name:"Team"; }
.v3-app.role-user     { --role:#206A83; --role-soft:#E0F4FA; --role-on-dark:#6CC3D9; --role-name:"Clinic"; }

/* top accent bar — thin coloured strip pinned to the very top */
.v3-role-bar {
  display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--role); z-index: 60;
}

/* ── Dark top bar ──────────────────────────────────────────────────── */
.v3-app { padding-top: 0; }
.v3-topbar {
  background: var(--c-ink);
  margin: 0 0 var(--sp-400);
  padding: 14px 28px;
  border-bottom: 1px solid var(--c-ink-line);
  position: relative;
}
.v3-topbar::before {   /* subtle role tint wash on the left */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--role) 14%, transparent), transparent 38%);
}
.v3-topbar > * { position: relative; }

/* brand lockup on dark */
.v3-topbar a[href*="portal"], .v3-topbar a[href*="dashboard"] { color: var(--c-on-dark) !important; }
.v3-brand-link, .v3-brand-link:hover { color: #fff !important; text-decoration: none; }
.v3-logo-mark {
  background: var(--role) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--role) 50%, transparent), 0 2px 8px -2px var(--role);
}

/* nav on dark */
.v3-nav { gap: 4px; }
.v3-nav-link {
  color: #C7CDD6;
  padding: 7px 13px; border-radius: 8px; font-weight: 600; font-size: 13.5px;
  letter-spacing: -.01em; transition: background .14s, color .14s, box-shadow .14s;
  position: relative;
}
.v3-nav-link:hover { color: #fff; background: var(--c-ink-3); }
.v3-nav-link.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--role-on-dark) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-on-dark) 45%, transparent);
}
.v3-nav-link.is-active::after {
  content:""; position:absolute; left:11px; right:11px; bottom:-9px; height:3px;
  border-radius:3px 3px 0 0; background: var(--role-on-dark);
}

/* right cluster on dark */
.v3-topbar .v3-help { color: #C7CDD6; font-weight: 600; }
.v3-topbar .v3-btn-ghost { color: #C7CDD6; font-weight: 600; }
.v3-topbar .v3-btn-ghost:hover { color: #fff; background: var(--c-ink-3); }

/* role badge — pill with role colour */
.v3-role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--role) 90%, black 6%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 60%, white 10%);
}
.v3-role-badge::before {
  content:""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--role-on-dark);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-on-dark) 35%, transparent);
}

/* content shell keeps the comfortable max width */
.v3-shell { max-width: none; margin: 0; padding: 0 28px; }



/* ============ 13" laptop fit (≤1440px) — keep the stage stepper tidy ============ */
@media (max-width: 1440px) {
    .v3-step-label { font-size: 9.5px; letter-spacing: 0; }
    .v3-stepper { padding: 6px 4px 2px; min-width: 220px; }
    .v3-stepper-track { left: calc(4px + 9px); right: calc(4px + 9px); }
}
@media (max-width: 1280px) {
    /* main column is tight here — give the 7-step stepper the full row width by
       letting the Lab-deadline controls wrap onto their own line below it. */
    .v3-stage-bar-row .v3-stepper { flex-basis: 100%; max-width: none; order: 3; }
    .v3-stage-bar-row .v3-stage-bar-sep { display: none; }
    .v3-stage-bar-row .v3-duedate-label,
    .v3-stage-bar-row .v3-duedate-display { order: 4; }
    .v3-stage-bar-row .v3-duedate-label { margin-left: 0; }
    .v3-stage-bar-row .v3-duedate-edit-btn { order: 5; }
    .v3-step-label { font-size: 10px; }
}

/* ============ responsive polish: dashboard filters + table on narrow screens ============ */
@media (max-width: 1024px) {
    /* search takes the full first row; date range + sort sit neatly below */
    .v3-toolbar { gap: 8px 10px; }
    .v3-toolbar > input[name="q"] { max-width: none !important; flex: 1 1 100%; }
    .v3-date-range { flex: 0 0 auto; }
    .v3-sort-field { flex: 1 1 auto; min-width: 180px; }
    .v3-sort-field select { width: 100%; }
}
@media (max-width: 860px) {
    /* keep patient / clinic / dentist names from breaking into too many lines */
    .v3-table td .v3-cell-clinic,
    .v3-table td > div:first-child { word-break: keep-all; }
    /* tighten table cell padding so columns fit a bit longer before crowding */
    .v3-table th, .v3-table td { padding-left: 10px; padding-right: 10px; }
}

/* dashboard sales rep tag (admin-only column) */
.v3-sales-tag {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: var(--c-brand-soft, #d7eceb); color: var(--c-brand-deep, #0a5c5b);
    white-space: nowrap;
}

/* ============ internal staff work-tracking (assignment card) ============ */
.v3-assign-card {
    border: 1px solid #F0C99B;
    background: #FFFBF5;
    border-radius: var(--r-md, 10px);
    padding: 11px 13px;
    margin-bottom: 14px;
}
.v3-assign-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 9px;
}
.v3-assign-title { font-size: 12.5px; font-weight: 700; color: #9A5B12; }
.v3-assign-note {
    font-size: 10.5px; font-weight: 600; color: #C25E05;
    background: #FCEEDD; padding: 1px 7px; border-radius: 999px;
}
.v3-assign-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
}
.v3-assign-field { display: flex; flex-direction: column; gap: 3px; }
.v3-assign-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--c-muted, #54585f);
}
.v3-assign-readonly {
    display: inline-flex; align-items: center; min-height: 32px;
    font-size: 13px; font-weight: 600; color: var(--c-text);
    padding: 4px 2px;
}
.v3-assign-readonly.is-unassigned { color: var(--c-light); font-weight: 500; }
.v3-assign-select.is-saved {
    border-color: var(--c-brand, #0E7C7B);
    box-shadow: 0 0 0 3px rgba(14,124,123,.15);
    transition: box-shadow .2s, border-color .2s;
}
@media (max-width: 720px) {
    .v3-assign-grid { grid-template-columns: 1fr; }
}

/* ============ full order details (read-only, collapsible) ============ */
.v3-fo-section { padding: 20px 0; border-top: 1px solid var(--c-line, #eee); }
.v3-fo-section:first-child { padding-top: 8px; border-top: none; }
.v3-fo-heading {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 700; color: var(--c-text, #1a1c20);
    letter-spacing: -.01em;
    margin-bottom: 14px;
}
.v3-fo-num {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--c-brand-soft, #d7eceb); color: var(--c-brand-deep, #0a5c5b);
    font-size: 11px; font-weight: 700;
}

/* ============ full order details: trigger button + modal ============ */
.v3-fullorder-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; text-align: left; cursor: pointer;
    padding: 14px 16px; font-family: inherit;
    border: 1px solid var(--c-line, #e3e3df); background: var(--c-surface, #fff);
    transition: border-color .15s, box-shadow .15s;
}
.v3-fullorder-trigger:hover {
    border-color: var(--c-brand, #0E7C7B);
    box-shadow: 0 2px 10px rgba(14,124,123,.08);
}
.v3-fullorder-trigger-ico {
    font-size: 18px; color: var(--c-brand, #0E7C7B); flex: none;
}

.v3-fullorder-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 32px 16px;
}
.v3-fullorder-modal[hidden] { display: none; }
.v3-fullorder-backdrop {
    position: fixed; inset: 0; background: rgba(8,12,16,0.55); backdrop-filter: blur(2px);
}
.v3-fullorder-dialog {
    position: relative; z-index: 1;
    width: 100%; max-width: 920px;
    max-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    background: var(--c-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    animation: v3foPop .18s ease;
    overflow: hidden;
    /* keep the app's typography even if hoisted near the root */
    font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--c-text, #1a1c20);
    line-height: 1.5;
}
@keyframes v3foPop { from { opacity:0; transform: translateY(8px) scale(.99); } to { opacity:1; transform: none; } }
.v3-fullorder-modal-head {
    flex: none;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 24px; border-bottom: 1px solid var(--c-line, #eee);
    background: var(--c-surface, #fff);
}
.v3-fullorder-modal-head .v3-card-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.v3-fullorder-x {
    border: none; background: none; cursor: pointer;
    font-size: 18px; color: var(--c-muted, #54585f); line-height: 1;
    padding: 4px 6px; border-radius: 6px; flex: none;
}
.v3-fullorder-x:hover { background: var(--c-bg, #f3f4f3); color: var(--c-text, #1a1c20); }
.v3-fullorder-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 22px 22px; }
@media (max-width: 640px) {
    .v3-fullorder-modal { padding: 0; }
    .v3-fullorder-dialog { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
}

/* ============ full order modal: read-only tooth chart + spec diagrams ============ */
/* the order's tooth chart shown read-only inside the popup */
.v3-fo-toothchart { pointer-events: none; }
.v3-fo-toothchart .v3-tooth-quick-actions,
.v3-fo-toothchart .v3-tooth-aside,
.v3-fo-toothchart .v3-tooth-chart-count,
.v3-fo-toothchart .v3-tooth-aside-empty { display: none; }
.v3-fo-toothchart .v3-section-head-inline { display: none !important; }
.v3-fo-toothchart .v3-tooth-layout { display: block; }
.v3-fo-toothchart .v3-tooth-main { width: 100%; }
/* force colours so the chart reads correctly inside the modal regardless of
   inherited context: unselected = white w/ teal outline, selected = teal fill */
.v3-fo-toothchart .tc-tooth { fill: #ffffff !important; stroke: #0E7C7B !important; stroke-width: 1.6 !important; }
.v3-fo-toothchart .tc-tooth.tc-selected { fill: #0E7C7B !important; stroke: #0a5c5b !important; stroke-width: 3 !important; }
.v3-fo-toothchart .tc-detail { fill: none; stroke: rgba(14,124,123,.45); stroke-width: 1; }
.v3-fo-toothchart .tc-tooth.tc-selected ~ .tc-detail { stroke: rgba(255,255,255,.6); }
.v3-fo-toothchart .tc-label { fill: #6b7280; font-size: 26px; font-weight: 600; }
/* spec value with an inline diagram */
.v3-fo-dia-val { display: inline-flex; align-items: center; gap: 8px; }
.v3-fo-dia { display: inline-flex; width: 34px; height: 34px; flex: none; }
.v3-fo-dia svg { width: 34px; height: 34px; }

/* ============ resolved upload-failure history (accountability note) ============ */
.v3-upload-history {
    display: flex; gap: 9px; align-items: flex-start;
    margin-top: 10px; padding: 9px 12px;
    background: #FAFAF8; border: 1px solid var(--c-line, #e3e3df);
    border-radius: 8px;
    font-size: 12px; color: var(--c-muted, #54585f);
}
.v3-upload-history-ico { color: #9aa0a6; font-size: 13px; flex: none; line-height: 1.5; }
.v3-upload-history-title { font-weight: 600; color: #6b7280; display: block; margin-bottom: 2px; }
.v3-upload-history-row { line-height: 1.5; }
.v3-upload-history-file { font-weight: 500; color: var(--c-text, #1a1c20); }
.v3-upload-history-reason { color: #b4561a; }
.v3-upload-history-when { color: #9aa0a6; margin-left: 4px; }

/* full order modal: shade tooth graphic inline */
.v3-fo-shade-dia { display: inline-flex; width: 30px; height: 42px; flex: none; margin-right: 8px; vertical-align: middle; }
.v3-fo-shade-dia svg { width: 30px; height: 42px; }
.v3-fullorder-modal-body .v3-spec-item-dia .v3-spec-val { display: inline-flex; align-items: center; gap: 8px; }

/* ============================ Statistics / report page ============================ */
.v3-stats-page { max-width: 1000px; margin: 0 auto; }
.v3-stats-toolbar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.v3-stats-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-stats-presets .v3-chip {
    font-size: 12px; padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--c-line); color: var(--c-muted); text-decoration: none; background: var(--c-surface);
}
.v3-stats-presets .v3-chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.v3-stats-date { font-size: 12px; color: var(--c-muted); display: inline-flex; align-items: center; gap: 6px; }
.v3-input-sm { padding: 5px 8px; font-size: 13px; width: auto; }

/* ---- the report document ---- */
.v3-report {
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-line, #e3e3df);
    border-radius: 14px;
    padding: 32px 36px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.v3-report-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; padding-bottom: 18px; margin-bottom: 22px;
    border-bottom: 2px solid var(--c-brand, #0E7C7B);
}
.v3-report-logo { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--c-brand-deep, #084C4B); }
.v3-report-sub { font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.v3-report-meta { text-align: right; font-size: 12.5px; color: var(--c-text); line-height: 1.7; }
.v3-report-meta-k { color: var(--c-muted); font-weight: 600; margin-right: 4px; }

.v3-report-summary {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 10px; margin-bottom: 26px;
}
.v3-rs-item { text-align: center; padding: 14px 8px; background: var(--c-brand-softer, #F2F8F7); border-radius: 10px; }
.v3-rs-n { font-size: 26px; font-weight: 800; color: var(--c-brand-deep, #084C4B); line-height: 1; }
.v3-rs-l { font-size: 11px; color: var(--c-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .03em; }

.v3-report-section { margin-bottom: 26px; }
.v3-report-h2 {
    font-size: 14.5px; font-weight: 700; color: var(--c-text, #1a1c20);
    margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--c-line, #e3e3df);
}
.v3-report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v3-report-table thead th {
    text-align: left; font-size: 11px; font-weight: 700; color: var(--c-muted);
    text-transform: uppercase; letter-spacing: .03em;
    padding: 9px 10px; border-bottom: 1.5px solid var(--c-line, #e3e3df);
    background: var(--c-bg);
}
.v3-report-table thead th.num, .v3-report-table td.num { text-align: right; }
.v3-report-table tbody td { padding: 8px 10px; border-bottom: 1px solid #f0f0ee; color: var(--c-text); }
.v3-report-table tbody tr:last-child td { border-bottom: none; }
.v3-report-table tbody tr:nth-child(even) td { background: #fafafa; }
.v3-report-empty { font-size: 13px; color: var(--c-muted); padding: 6px 0; }
.v3-report-foot {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line, #e3e3df);
    font-size: 11px; color: var(--c-muted); text-align: center;
}

@media (max-width: 720px) {
    .v3-report-summary { grid-template-columns: repeat(2, 1fr); }
    .v3-report { padding: 22px 18px; }
}

/* ---- print: only the report, full-bleed, report-like ---- */
@media print {
    .v3-noprint, .v3-topbar, .v3-role-bar, .v3-app-header, .v3-nav, header, footer, .v3-toast, .v3-stats-toolbar { display: none !important; }
    body, .v3-app, .v3-app-main, .v3-stats-page { background: #fff !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .v3-report { border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
    .v3-report-section { page-break-inside: avoid; }
    .v3-report-table { font-size: 11px; }
    .v3-rs-n { color: #084C4B !important; }
    @page { margin: 16mm 14mm; }
}

/* ---- stats charts + report extras ---- */
.v3-report-charts { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; margin-bottom: 26px; }
.v3-chart-box { border: 1px solid var(--c-line, #e3e3df); border-radius: 12px; padding: 14px 16px; }
.v3-chart-title { font-size: 12px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.v3-chart-svg { width: 100%; height: auto; display: block; }
.v3-donut-svg { width: 150px; height: 150px; display: block; margin: 0 auto; }
.v3-chart-donut { display: flex; flex-direction: column; }
.v3-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--c-muted); }
.v3-chart-legend-col { flex-direction: column; gap: 5px; margin-top: 12px; }
.v3-lg { display: inline-flex; align-items: center; gap: 5px; }
.v3-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.v3-h2-ko { color: var(--c-brand-deep, #084C4B); margin-right: 8px; }
.v3-neg { color: #c0392b; font-weight: 700; }
.v3-rs-good .v3-rs-n { color: #0E7C7B; }
.v3-rs-bad .v3-rs-n { color: #c0392b; }
.v3-report-summary { grid-template-columns: repeat(6, 1fr) !important; }

@media print {
    .v3-report-charts { grid-template-columns: 1.7fr 1fr; page-break-inside: avoid; }
    .v3-chart-box { border: 1px solid #ddd !important; }
}
@media (max-width: 720px) {
    .v3-report-charts { grid-template-columns: 1fr; }
    .v3-report-summary { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---- advanced analytics blocks ---- */
.v3-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 26px; }
.v3-kpi { border: 1px solid var(--c-line, #e3e3df); border-radius: 12px; padding: 14px 16px; }
.v3-kpi-n { font-size: 28px; font-weight: 800; color: var(--c-brand-deep, #084C4B); line-height: 1; }
.v3-kpi-n.v3-kpi-warn { color: #c0392b; }
.v3-kpi-u { font-size: 15px; font-weight: 700; margin-left: 1px; }
.v3-kpi-l { font-size: 12px; font-weight: 700; color: var(--c-text); margin-top: 7px; }
.v3-kpi-sub { font-size: 10.5px; color: var(--c-muted); margin-top: 2px; }

.v3-report-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.v3-hbars { display: flex; flex-direction: column; gap: 7px; }
.v3-hbar-row { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; }
.v3-hbar-label { color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-hbar-track { height: 14px; background: #f1f3f2; border-radius: 7px; overflow: hidden; }
.v3-hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, #0E7C7B, #3FA7A0); border-radius: 7px; }
.v3-hbar-val { text-align: right; font-weight: 600; color: var(--c-muted); }

.v3-heatmap-svg { width: 100%; height: auto; display: block; max-width: 580px; margin: 0 auto; }
.v3-report-note { font-size: 12px; color: var(--c-muted); margin-top: 10px; text-align: center; }

/* ---- overflow fixes: tables never spill the report ---- */
.v3-report { overflow: hidden; }
.v3-report-section { overflow-x: auto; }
.v3-report-table { table-layout: auto; min-width: 0; }
.v3-report-table th, .v3-report-table td { white-space: nowrap; }
.v3-report-table td:first-child, .v3-report-table th:first-child { white-space: normal; word-break: break-word; max-width: 220px; }

@media print {
    .v3-kpi-strip { grid-template-columns: repeat(4, 1fr); page-break-inside: avoid; }
    .v3-report-2col { grid-template-columns: 1fr 1fr; }
    .v3-report-section { overflow: visible; page-break-inside: avoid; }
    .v3-heatmap-svg { max-width: 540px; }
}
@media (max-width: 720px) {
    .v3-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .v3-report-2col { grid-template-columns: 1fr; }
    .v3-hbar-row { grid-template-columns: 90px 1fr 30px; }
}

/* ---- chart refinements + spacing ---- */
.v3-chart-hero { margin-bottom: 18px; padding: 18px 20px 16px; }
.v3-chart-sub { font-size: 10px; font-weight: 600; color: #9aa0a6; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.v3-chart-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--c-muted); }
.v3-chart-foot strong { color: var(--c-brand-deep, #084C4B); font-size: 14px; }
.v3-up { color: #0E7C7B; font-weight: 600; }
.v3-down { color: #c0392b; font-weight: 600; }
.v3-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.v3-report-charts { align-items: stretch; }
.v3-report-charts .v3-chart-box { display: flex; flex-direction: column; }

/* tighten the report rhythm */
.v3-report { padding: 36px 40px; }
.v3-report-section { margin-bottom: 30px; }
.v3-report-h2 { margin-bottom: 14px; padding-bottom: 8px; }
.v3-chart-box { padding: 16px 18px; }
.v3-report-summary { margin-bottom: 22px; gap: 11px; }
.v3-kpi-strip { margin: 6px 0 28px; }

@media print {
    .v3-chart-hero { page-break-inside: avoid; }
    .v3-chart-svg { overflow: visible; }
    .v3-report { padding: 0 !important; }
}
@media (max-width: 720px) {
    .v3-report { padding: 22px 16px; }
}

/* ---- client picker ---- */
.v3-client-picker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--c-brand-softer, #F2F8F7); border: 1px solid var(--c-brand-soft, #d7eceb); border-radius: 12px; }
.v3-client-picker-label { font-size: 13px; font-weight: 700; color: var(--c-brand-deep, #084C4B); white-space: nowrap; }
.v3-client-picker-form { flex: 1; display: flex; gap: 8px; }
.v3-client-picker select { min-width: 240px; max-width: 360px; }

/* ---- drill-down: upload reliability grid ---- */
.v3-upl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v3-upl-cell { text-align: center; padding: 16px 10px; border: 1px solid var(--c-line, #e3e3df); border-radius: 12px; }
.v3-upl-n { font-size: 26px; font-weight: 800; color: var(--c-brand-deep, #084C4B); line-height: 1; }
.v3-upl-l { font-size: 11px; color: var(--c-muted); margin-top: 7px; }
.v3-upl-bad .v3-upl-n { color: #c0392b; }
.v3-upl-bad { border-color: #f3d6cf; background: #fdf6f4; }
.v3-upl-warn .v3-upl-n { color: #b4561a; }
.v3-upl-warn { border-color: #f0e2cc; background: #fdfaf3; }

/* ---- drill-down: conversation ---- */
.v3-conv { display: flex; flex-direction: column; gap: 8px; }
.v3-conv-row { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--c-line, #e3e3df); }
.v3-conv-client { background: #fafbfb; }
.v3-conv-staff { background: var(--c-brand-softer, #F2F8F7); border-color: var(--c-brand-soft, #d7eceb); }
.v3-conv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 11px; }
.v3-conv-who { font-weight: 700; color: var(--c-text, #1a1c20); }
.v3-conv-when { color: #9aa0a6; }
.v3-conv-ord { color: var(--c-muted); }
.v3-conv-tag { background: #e9d8f4; color: #7a3ea0; font-weight: 700; font-size: 9.5px; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.v3-conv-body { font-size: 13px; color: var(--c-text, #1a1c20); line-height: 1.45; }
.v3-h2-meta { font-size: 11px; font-weight: 500; color: var(--c-muted); margin-left: 8px; text-transform: none; letter-spacing: 0; }

/* ---- general design polish ---- */
.v3-report { box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 28px rgba(8,76,75,.05); }
.v3-report-head { align-items: flex-start; }
.v3-report-logo { letter-spacing: -.025em; }
.v3-rs-item { transition: none; border: 1px solid transparent; }
.v3-report-summary .v3-rs-item { background: linear-gradient(180deg, #F4FAF9, #EEF6F5); border-color: #e2efed; }
.v3-rs-good { background: linear-gradient(180deg,#eef8f2,#e6f4ec) !important; }
.v3-rs-bad { background: linear-gradient(180deg,#fdf2ef,#fbe9e4) !important; }
.v3-rs-cancelled { background: linear-gradient(180deg,#fdf2ef,#f8e5e1) !important; border-color: #f1c9c2 !important; }
.v3-rs-cancelled .v3-rs-n { color: #C0392B; }
.v3-rs-cancelled .v3-rs-l { color: #A03528; }
.v3-kpi { transition: none; }

@media print {
    .v3-client-picker { display: none !important; }
    .v3-upl-grid { grid-template-columns: repeat(4, 1fr); }
    .v3-conv-row { page-break-inside: avoid; }
}
@media (max-width: 720px) {
    .v3-upl-grid { grid-template-columns: repeat(2, 1fr); }
    .v3-client-picker { flex-direction: column; align-items: stretch; }
    .v3-client-picker select { max-width: none; width: 100%; }
}

/* ---- completion timeline stats ---- */
.v3-timeline-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 4px 0 18px; }
.v3-tl-stat { text-align: center; padding: 12px 8px; background: var(--c-brand-softer,#F2F8F7); border-radius: 10px; }
.v3-tl-n { font-size: 24px; font-weight: 800; color: var(--c-brand-deep,#084C4B); line-height: 1; }
.v3-tl-l { font-size: 10.5px; color: var(--c-muted); margin-top: 6px; }

/* ---- express ---- */
.v3-express-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.v3-express-big { display: flex; align-items: baseline; gap: 12px; }
.v3-express-pct { font-size: 40px; font-weight: 800; color: #D9774B; line-height: 1; }
.v3-express-cap { font-size: 13px; color: var(--c-muted); }
.v3-express-cap strong { color: var(--c-text,#1a1c20); font-size: 15px; }
.v3-express-bar { flex: 1; min-width: 180px; height: 18px; background: #f1f3f2; border-radius: 9px; overflow: hidden; }
.v3-express-fill { display: block; height: 100%; background: linear-gradient(90deg,#E1A948,#D9774B); border-radius: 9px; }
.v3-report-h3 { font-size: 12px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }

/* ---- hbar polish ---- */
.v3-hbar-row { grid-template-columns: 130px 1fr 56px; gap: 12px; padding: 2px 0; }
.v3-hbar-track { height: 16px; background: #eef1f0; border-radius: 8px; }
.v3-hbar-fill { border-radius: 8px; transition: none; }
.v3-hbar-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; font-weight: 700; color: var(--c-text,#1a1c20); }
.v3-hbar-pct { font-size: 10px; font-weight: 600; color: #9aa0a6; }

@media print {
    .v3-timeline-stats { grid-template-columns: repeat(4,1fr); }
    .v3-express-head { page-break-inside: avoid; }
}
@media (max-width: 720px) {
    .v3-timeline-stats { grid-template-columns: repeat(2,1fr); }
    .v3-hbar-row { grid-template-columns: 90px 1fr 50px; }
}

/* ---- client filter banner ---- */
.v3-client-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; margin-bottom: 22px; background: linear-gradient(90deg, var(--c-brand-softer,#F2F8F7), #fff); border-left: 4px solid var(--c-brand,#0E7C7B); border-radius: 8px; }
.v3-client-banner-name { font-size: 16px; font-weight: 800; color: var(--c-brand-deep,#084C4B); }
.v3-client-banner-meta { font-size: 12px; color: var(--c-muted); }
.v3-client-banner-clear { margin-left: auto; font-size: 12px; color: var(--c-brand,#0E7C7B); text-decoration: none; font-weight: 600; }
.v3-client-banner-clear:hover { text-decoration: underline; }

/* ---- structured implant fixture input ---- */
.v3-fixture-grid { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 8px; }
.v3-fixture-grid .v3-select { width: 100%; }
.v3-label-hint { font-weight: 400; font-size: 11px; color: var(--c-muted, #54585f); margin-left: 6px; }
@media (max-width: 640px) { .v3-fixture-grid { grid-template-columns: 1fr; } }

/* ---- crown: per-tooth overrides + bridge mapping ---- */
.v3-label-sm { display:block; font-size:12px; font-weight:600; color:var(--c-text,#1a1c20); margin-bottom:5px; }
.v3-fixture-note { margin-top:8px; }
.v3-fixture-overrides, .v3-shade-overrides { margin-top:10px; }
.v3-bridge-detail { margin-top:4px; padding:14px; background:var(--c-brand-softer,#F2F8F7); border:1px solid var(--c-brand-soft,#d7eceb); border-radius:10px; }
.v3-bridge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.v3-bridge-grid .v3-field { margin:0; }
@media (max-width: 640px){ .v3-bridge-grid { grid-template-columns:1fr; } }

/* ---- full order: per-stage edit jump + empty/“not set” state ---- */
.v3-fo-section-empty { opacity: .92; }
.v3-fo-section-empty .v3-fo-heading { color: var(--c-muted); }
.v3-fo-heading { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.v3-fo-edit-jump { white-space: nowrap; }
/* appointment now inline in the deadline bar */
.v3-appt-display-inline .v3-appt-value.is-unset { color: var(--c-muted); font-weight: 600; }
.v3-appt-edit { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- stage dates row: lab deadline + clinical appointment side by side ---- */


/* ===== stage date cards: lab deadline + clinical appointment (separate) ===== */
.v3-datecards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.v3-datecard {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  min-width: 0;
}
/* deadline = brand accent (most important) */
.v3-datecard-deadline {
  border-color: var(--s-blue-bd);
  background: linear-gradient(180deg, var(--s-blue-bg), var(--c-white) 70%);
}
.v3-datecard-deadline .v3-datecard-ico { color: var(--c-brand); background: var(--c-white); }
/* appointment = neutral/clinical tone */
.v3-datecard-appt .v3-datecard-ico { color: var(--c-brand-deep); background: var(--c-brand-soft); }
.v3-datecard.is-unset { background: var(--c-bg); border-style: dashed; }
.v3-datecard.is-unset .v3-datecard-ico { color: var(--c-light); background: var(--c-white); }

.v3-datecard-ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.v3-datecard-main { min-width: 0; flex: 1; }
.v3-datecard-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--c-light);
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v3-datecard-value {
  font-size: 13.5px; font-weight: 700; color: var(--c-text);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; line-height: 1.25;
}
.v3-datecard-time {
  font-weight: 600; color: var(--c-muted); font-size: 12.5px;
  padding-left: 7px; margin-left: 1px; border-left: 1px solid var(--c-line);
}
.v3-datecard-empty { font-weight: 600; color: var(--c-light); }
.v3-datecard-badge {
  font-size: 10.5px; font-weight: 800; line-height: 1;
  padding: 3px 6px; border-radius: 999px; white-space: nowrap;
}
.v3-datecard-badge.is-blue  { color: var(--s-blue-fg);  background: var(--s-blue-bg);  box-shadow: inset 0 0 0 1px var(--s-blue-bd); }
.v3-datecard-badge.is-amber { color: var(--s-amber-fg); background: var(--s-amber-bg); box-shadow: inset 0 0 0 1px var(--s-amber-bd); }
.v3-datecard-badge.is-gray  { color: var(--s-gray-fg);  background: var(--s-gray-bg);  box-shadow: inset 0 0 0 1px var(--s-gray-bd); }
.v3-datecard-badge.is-red   { color: var(--s-red-fg);   background: var(--s-red-bg);   box-shadow: inset 0 0 0 1px var(--s-red-bd); }
/* deadline card turns red when overdue */
.v3-datecard-deadline:has(.is-red) { border-color: var(--s-red-bd); background: linear-gradient(180deg, var(--s-red-bg), var(--c-white) 70%); }
.v3-datecard-deadline:has(.is-red) .v3-datecard-ico { color: var(--s-red-fg); }
.v3-datecard-btn {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 700; color: var(--c-brand);
  background: transparent; border: 1px solid var(--c-brand-border);
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  transition: background .12s, color .12s;
}
.v3-datecard-btn:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.v3-datecard.is-unset .v3-datecard-btn { color: var(--c-muted); border-color: var(--c-line); }
.v3-datecard.is-unset .v3-datecard-btn:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.v3-datecard-lock { flex-shrink: 0; display: inline-grid; place-items: center; width: 26px; height: 26px;
  color: var(--c-light); cursor: default; }
.v3-datecard-lock svg { display: block; }

@media (max-width: 600px) {
  .v3-datecards { grid-template-columns: 1fr; }
}

/* ===== Settings: responsive multi-column card grid ===== */
.v3-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.v3-settings-grid > .v3-card { margin: 0; }
@media (max-width: 1200px) { .v3-settings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .v3-settings-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Header notification bell + dashboard unread badges
   ============================================================ */
.v3-bell-btn {
    display: grid; place-items: center; position: relative;
    width: 32px; height: 32px; border-radius: 8px;
    background: transparent; border: 1px solid transparent;
    color: #C7CDD6; cursor: pointer;
}
.v3-bell-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.v3-bell-count {
    position: absolute; top: -4px; right: -5px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: #DE350B; color: #fff;
    font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
    border: 2px solid #0d1424; box-sizing: content-box;
}
.v3-bell-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 900;
    width: 330px; max-height: 420px; overflow: auto;
    background: var(--c-white, #fff); color: var(--c-text, #172B4D);
    border: 1px solid var(--c-line, #DFE1E6); border-radius: 10px;
    box-shadow: 0 10px 32px rgba(9,30,66,.22);
}
.v3-bell-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid var(--c-line, #DFE1E6);
    font-size: 12.5px; font-weight: 700;
}
.v3-bell-markall {
    background: none; border: none; cursor: pointer;
    font-size: 11.5px; font-weight: 600; color: var(--c-brand, #0052CC);
}
.v3-bell-markall:hover { text-decoration: underline; }
.v3-bell-list { padding: 4px; }
.v3-bell-item {
    display: block; padding: 9px 10px; border-radius: 8px;
    text-decoration: none; color: var(--c-text, #172B4D);
}
.v3-bell-item:hover { background: var(--c-brand-softer, #F4F8FF); }
.v3-bell-item.is-unread { background: var(--c-brand-soft, #E9F2FF); }
.v3-bell-item.is-unread:hover { background: #DDEBFF; }
.v3-bell-title { display: block; font-size: 12.5px; font-weight: 700; }
.v3-bell-body { display: block; font-size: 12px; color: var(--c-muted, #5E6C84); margin-top: 1px; }
.v3-bell-ago { display: block; font-size: 10.5px; color: var(--c-light, #8993A4); margin-top: 2px; }
.v3-bell-empty { padding: 18px 12px; text-align: center; font-size: 12px; color: var(--c-light, #8993A4); }

.v3-unread-badge {
    display: inline-block; margin-left: 5px; padding: 0 5px;
    min-width: 15px; height: 15px; line-height: 15px; text-align: center;
    border-radius: 8px; background: var(--c-brand, #0052CC); color: #fff;
    font-size: 9.5px; font-weight: 800; vertical-align: 1.5px; white-space: nowrap;
}
.v3-table tr.is-done-row .v3-unread-badge,
.v3-table tr.is-cancelled-row .v3-unread-badge { background: #fff; color: var(--c-brand, #0052CC); }

/* ============================================================
   Surgical protocol — drill sequence card (guide stages)
   ============================================================ */
.v3-drill-kit { font-size: 13px; margin-bottom: 8px; color: var(--c-text); }
.v3-drill-table { margin: 0 0 8px; }
.v3-drill-table th { font-size: 11px; }
.v3-drill-table td { font-size: 12.5px; vertical-align: top; }
.v3-drill-tooth { font-weight: 800; color: var(--c-brand); white-space: nowrap; }
.v3-drill-seq { font-weight: 600; letter-spacing: .01em; }
.v3-drill-notes {
    font-size: 12.5px; color: var(--c-text); background: var(--c-brand-softer, #F4F8FF);
    border: 1px solid var(--c-brand-border, #B3D4FF); border-radius: 8px;
    padding: 8px 10px; margin: 6px 0 2px;
}
.v3-drill-footnote { margin-top: 8px; font-size: 11px; }
.v3-drill-rowhead, .v3-drill-row {
    display: grid; grid-template-columns: 70px 1.2fr 1.4fr 1fr 30px;
    gap: 6px; align-items: center;
}
.v3-drill-rowhead { font-size: 10.5px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.v3-drill-row { margin-bottom: 6px; }
.v3-drill-row .v3-input { font-size: 12.5px; padding: 6px 8px; }
.v3-drill-del { padding: 4px 8px; color: var(--c-light); }
.v3-drill-del:hover { color: var(--s-red-fg, #C0392B); }
@media (max-width: 720px) {
    .v3-drill-rowhead { display: none; }
    .v3-drill-row { grid-template-columns: 1fr 1fr; }
}
@media print {
    .v3-drill-card { break-inside: avoid; }
    .v3-drill-editor, .v3-drill-card .v3-btn { display: none !important; }
}

/* Drill preset management (Settings) */
.v3-preset-grid {
    display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1.6fr 1fr 70px;
    gap: 10px; margin-bottom: 10px;
}
@media (max-width: 900px) { .v3-preset-grid { grid-template-columns: 1fr 1fr; } }

/* Dashboard: the status pill is ALWAYS one line; the detail sentence below is
   clamped to two (copy in v3_status_brief is written to fit). */
.v3-table .v3-pill { white-space: nowrap; max-width: none; }
.v3-table .v3-status-detail {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-width: 380px;
}

/* Patient / clinic / dentist — THREE rows, each exactly ONE line (ellipsis) */
.v3-cell-patient { max-width: 240px; }
.v3-cell-patient .v3-patient-name,
.v3-cell-patient .v3-patient-line {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v3-patient-name { font-weight: 600; color: var(--c-text, #1A1D26); }
.v3-patient-line { font-size: 12.5px; color: var(--c-muted, #5D6470); line-height: 1.45; margin-top: 1px; }

/* Change-request kind picker (design tweak vs plan modification) */
.v3-req-rev-kind { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.v3-req-rev-kind label { font-size: 12.5px; font-weight: 600; color: var(--c-text); cursor: pointer; }
.v3-req-rev-kind input { margin-right: 5px; vertical-align: -1px; }
.v3-req-rev-kind .v3-help { font-weight: 400; }

/* Approve gate: surgery date */
.v3-approve-surgery { margin-bottom: 8px; }
.v3-approve-tbd { display: block; font-size: 12px; color: var(--c-muted); margin-top: 5px; cursor: pointer; }
.v3-approve-tbd input { margin-right: 5px; vertical-align: -1px; }

/* Temporary crown A1 availability note */
.v3-a1-note {
    font-size: 12px; color: var(--c-text);
    background: var(--c-brand-softer, #F4F8FF);
    border: 1px solid var(--c-brand-border, #B3D4FF);
    border-radius: 8px; padding: 7px 10px; margin-bottom: 10px;
}

/* Drill protocol: case-photo strip */
.v3-drill-photos { margin: 10px 0 4px; }
.v3-drill-photos-label { font-size: 11.5px; font-weight: 700; color: var(--c-muted); margin-bottom: 6px; }
.v3-drill-photos .v3-filegrid { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-drill-photos .v3-file { width: 86px; }
.v3-drill-photos .v3-file-thumb { width: 86px; height: 64px; }
@media print { .v3-drill-photos { break-inside: avoid; } }

/* Settings tabs */
.v3-settings-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.v3-tab {
    display: inline-block; padding: 7px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; text-decoration: none;
    color: var(--c-muted, #5E6C84); background: var(--c-white, #fff);
    border: 1px solid var(--c-line, #DFE1E6);
}
.v3-tab:hover { color: var(--c-brand, #0052CC); border-color: var(--c-brand-border, #B3D4FF); }
.v3-tab.is-active {
    color: #fff; background: var(--c-brand, #0052CC); border-color: var(--c-brand, #0052CC);
}
.v3-us-form .v3-input { min-width: 0; }

/* Per-tooth drilling chart thumbnail in the protocol table */
.v3-drill-chart { display: block; margin-top: 5px; width: 120px; }
.v3-drill-chart img { width: 100%; border: 1px solid var(--c-line, #DFE1E6); border-radius: 7px; display: block; }
@media print { .v3-drill-chart img { max-width: 200px; } }

/* ============================================================
   v182 DESIGN SYSTEM PASS — semantic colour + readability
   Principles (traffic-light): amber = clinic must act · blue = lab working ·
   green = done · red = cancelled ONLY · gray = neutral. One meaning per colour.
   ============================================================ */

/* --- Status pills: sentence case, tinted bg + border + leading dot.
       Colour is reinforced by the dot AND text so it never relies on hue alone. */
.v3-pill.v3-pill-st {
    text-transform: none; letter-spacing: 0;
    font-size: 11.5px; font-weight: 700; line-height: 1.3;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    border: 1px solid transparent;
}
.v3-pill.v3-pill-st::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.v3-pill.v3-pill-st.amber { border-color: var(--s-amber-bd); }
.v3-pill.v3-pill-st.blue  { border-color: var(--s-blue-bd); }
.v3-pill.v3-pill-st.green { border-color: var(--s-green-bd); }
.v3-pill.v3-pill-st.red   { border-color: var(--s-red-bd); }
.v3-pill.v3-pill-st.gray  { border-color: var(--s-gray-bd); }

/* --- "Whose turn" chip: the one-glance answer to who acts next. */
.v3-turn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px; padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .01em;
    vertical-align: 1px; white-space: nowrap;
}
.v3-turn.is-you { background: #B45309; color: #fff; }            /* clinic viewer: act now */
.v3-turn.is-you.is-lab { background: var(--c-brand, #0052CC); }   /* staff viewer: lab acts */
.v3-turn.is-you::before { content: '→'; font-weight: 900; }
.v3-turn.is-wait { background: transparent; color: var(--c-light, #8993A4); border: 1px dashed var(--c-line, #DFE1E6); }

/* --- Table rhythm: calmer header, roomier rows, gentle hover. */
.v3-table th {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--c-light, #8993A4);
    padding: 9px 10px;
}
.v3-table td { padding: 11px 10px; line-height: 1.45; vertical-align: middle; }
.v3-table tbody tr:hover { background: var(--c-brand-softer, #F4F8FF); }
.v3-table tbody tr.is-done-row:hover,
.v3-table tbody tr.is-cancelled-row:hover { background: inherit; }

/* --- Card rhythm: one consistent head treatment everywhere. */
.v3-card-head { border-bottom: 1px solid var(--c-line, #DFE1E6); }
.v3-card-title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }

/* --- Secondary text: one gray, one size — kills the "뒤죽박죽" feel. */
.v3-cell-sub, .v3-help { color: var(--c-muted, #5E6C84); }
.v3-cell-sub { font-size: 12px; }

/* ================================================================
   v183 PROFESSIONAL SKIN — enterprise-grade restraint
   Grammar of Stripe / Linear / Mercury: neutral-first surfaces,
   hairline borders, colour ONLY as small dots & text, typography
   carries hierarchy. One CSS layer → every page, every role.
   ================================================================ */

/* ---------- 0) Tokens ---------- */
.v3-app {
    --c-bg: #F7F8FA;
    --c-text: #1A1D26;  --c-muted: #5D6470;  --c-light: #8B92A0;
    --c-line: #E7E9EE;  --c-line-strong: #D8DBE2;
    --c-brand: #2E5FE8; --c-brand-strong: #1E46B8;
    --c-brand-soft: #EBF0FE; --c-brand-softer: #F5F8FF; --c-brand-border: #C4D3FA;
    --s-amber-fg:#9A5B00; --s-amber-bg:#FCF3E3; --s-amber-bd:#F0DDB8;
    --s-blue-fg:#2251CC;  --s-blue-bg:#EDF2FE;  --s-blue-bd:#CBD9F8;
    --s-green-fg:#177245; --s-green-bg:#E9F6EF; --s-green-bd:#C4E5D2;
    --s-red-fg:#C0392B;   --s-red-bg:#FCEEEC;   --s-red-bd:#F2CFC9;
    --s-gray-fg:#5D6470;  --s-gray-bg:#F1F2F5;  --s-gray-bd:#E0E2E8;
    --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
    --shadow-md: 0 4px 12px rgba(16,24,40,.08);
    background: var(--c-bg); color: var(--c-text);
}

/* ---------- 1) Cards: white, hairline, quiet ---------- */
.v3-app .v3-card {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: 10px; box-shadow: var(--shadow-sm);
}
.v3-app .v3-card-head { padding: 13px 16px; border-bottom: 1px solid var(--c-line); background: transparent; }
.v3-app .v3-card-title { font-size: 13.5px; font-weight: 650; color: var(--c-text); letter-spacing: -0.01em; }
.v3-app .v3-card-body { padding: 16px; }

/* ---------- 2) Tables: hairlines, no zebra, gentle hover ---------- */
.v3-app .v3-table th {
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    text-transform: none; color: var(--c-light);
    padding: 10px 12px; border-bottom: 1px solid var(--c-line);
    background: transparent;
}
.v3-app .v3-table td { padding: 12px; font-size: 13px; border-bottom: 1px solid var(--c-line); }
.v3-app .v3-table tbody tr:hover { background: #FAFBFD; }
.v3-app .v3-table tbody tr:last-child td { border-bottom: none; }

/* Completed / cancelled rows: NO block colour — muted content + tiny marker.
   (A solid green row screams; a professional table whispers "done".) */
.v3-app .v3-table tr.is-done-row,
.v3-app .v3-table tr.is-done-row:hover { background: #fff; filter: none; }
.v3-app .v3-table tr.is-done-row td,
.v3-app .v3-table tr.is-done-row .v3-cell-no,
.v3-app .v3-table tr.is-done-row .v3-cell-sub,
.v3-app .v3-table tr.is-done-row td > div { color: var(--c-light); }
.v3-app .v3-table tr.is-done-row td:first-child { box-shadow: inset 2px 0 0 var(--s-green-bd); }
.v3-app .v3-table tr.is-cancelled-row,
.v3-app .v3-table tr.is-cancelled-row:hover { background: #fff; }
.v3-app .v3-table tr.is-cancelled-row td { color: var(--c-light); }
.v3-app .v3-table tr.is-cancelled-row td:first-child { box-shadow: inset 2px 0 0 var(--s-red-bd); }
.v3-app tr.is-done-row .v3-unread-badge,
.v3-app tr.is-cancelled-row .v3-unread-badge { background: var(--c-brand); color: #fff; }

/* ---------- 3) Status = dot + coloured text (Linear grammar) ---------- */
.v3-app .v3-pill.v3-pill-st {
    background: transparent !important; border: none !important;
    padding: 0; border-radius: 0;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
    gap: 6px;
}
.v3-app .v3-pill.v3-pill-st::before { width: 7px; height: 7px; }
.v3-app .v3-pill.v3-pill-st.amber { color: var(--s-amber-fg); }
.v3-app .v3-pill.v3-pill-st.blue  { color: var(--s-blue-fg); }
.v3-app .v3-pill.v3-pill-st.green { color: var(--s-green-fg); }
.v3-app .v3-pill.v3-pill-st.red   { color: var(--s-red-fg); }
.v3-app .v3-pill.v3-pill-st.gray  { color: var(--s-gray-fg); }

/* Other pills (Complete / Cancelled / generic): quiet soft chips */
.v3-app .v3-pill {
    text-transform: none; letter-spacing: 0;
    font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 6px;
}
.v3-app .v3-pill-done { background: var(--s-green-bg); color: var(--s-green-fg); border: 1px solid var(--s-green-bd); }
.v3-app .v3-pill-cancelled { background: var(--s-red-bg); color: var(--s-red-fg); border: 1px solid var(--s-red-bd); }

/* "Whose turn": quiet emphasis — soft tint, dark text, no solid blocks */
.v3-app .v3-turn { margin-left: 8px; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; }
.v3-app .v3-turn.is-you { background: var(--s-amber-bg); color: var(--s-amber-fg); border: 1px solid var(--s-amber-bd); }
.v3-app .v3-turn.is-you.is-lab { background: var(--s-blue-bg); color: var(--s-blue-fg); border: 1px solid var(--s-blue-bd); }
.v3-app .v3-turn.is-you::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.v3-app .v3-turn.is-wait { color: var(--c-light); border: 1px solid var(--c-line); background: #fff; }

/* ---------- 4) Service chips: neutral, colour demoted to a dot ---------- */
.v3-app .v3-stage-chip {
    background: #F4F5F8; color: #3E4450; border: 1px solid var(--c-line);
    font-size: 11px; font-weight: 600; padding: 2.5px 9px; border-radius: 6px;
    box-shadow: none;
}
.v3-app .v3-stage-chip.is-current,
.v3-app .v3-stage-chip.stage-navy.is-current, .v3-app .v3-stage-chip.stage-teal.is-current,
.v3-app .v3-stage-chip.stage-sky.is-current, .v3-app .v3-stage-chip.stage-amber.is-current,
.v3-app .v3-stage-chip.stage-violet.is-current, .v3-app .v3-stage-chip.stage-ink.is-current,
.v3-app .v3-stage-chip.stage-gray.is-current {
    background: #fff; color: var(--c-text);
    border: 1px solid var(--c-line-strong); box-shadow: var(--shadow-sm);
    font-weight: 700;
}
.v3-app .v3-stage-chip.is-current::before {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    margin-right: 5px; vertical-align: 1px; background: var(--c-brand);
}
.v3-app .v3-stage-chip.stage-teal.is-current::before   { background: #12897E; }
.v3-app .v3-stage-chip.stage-sky.is-current::before    { background: #2E90FA; }
.v3-app .v3-stage-chip.stage-amber.is-current::before  { background: #DC6803; }
.v3-app .v3-stage-chip.stage-violet.is-current::before { background: #7A5AF8; }
.v3-app .v3-stage-chip.stage-gray.is-current::before   { background: #667085; }

/* ---------- 5) Buttons ---------- */
.v3-app .v3-btn {
    border-radius: 7px; font-size: 13px; font-weight: 600;
    padding: 7px 14px; box-shadow: var(--shadow-sm);
    background: var(--c-brand); border: 1px solid var(--c-brand);
}
.v3-app .v3-btn:hover { background: var(--c-brand-strong); border-color: var(--c-brand-strong); }
.v3-app .v3-btn-outline, .v3-app a.v3-btn-outline {
    background: #fff; color: var(--c-text); border: 1px solid var(--c-line-strong); box-shadow: var(--shadow-sm);
}
.v3-app .v3-btn-outline:hover { background: #F7F8FA; border-color: #C7CBD4; }
.v3-app .v3-btn-ghost, .v3-app a.v3-btn-ghost { background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--c-muted); }
.v3-app .v3-btn-ghost:hover { background: #F1F2F5; color: var(--c-text); }
.v3-app .v3-btn-sm { padding: 5px 11px; font-size: 12px; }

/* ---------- 6) Inputs ---------- */
.v3-app .v3-input, .v3-app .v3-select, .v3-app .v3-textarea {
    border: 1px solid var(--c-line-strong); border-radius: 7px;
    font-size: 13px; padding: 7px 10px; background: #fff; color: var(--c-text);
}
.v3-app .v3-input:focus, .v3-app .v3-select:focus, .v3-app .v3-textarea:focus {
    outline: none; border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgba(46,95,232,.12);
}
.v3-app .v3-label { font-size: 12px; font-weight: 600; color: var(--c-muted); }

/* ---------- 7) KPI / summary tiles: numbers speak, boxes stay quiet ---------- */
.v3-app .v3-kpi, .v3-app .v3-rs-item {
    background: #fff !important; border: 1px solid var(--c-line) !important;
    border-radius: 10px; box-shadow: var(--shadow-sm);
}
.v3-app .v3-kpi.is-hot { border-color: var(--c-brand-border) !important; }
.v3-app .v3-rs-item .v3-rs-n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.v3-app .v3-rs-item .v3-rs-l { font-size: 11px; font-weight: 600; color: var(--c-light); text-transform: none; letter-spacing: 0; }
.v3-app .v3-rs-good .v3-rs-n { color: var(--s-green-fg); }
.v3-app .v3-rs-bad .v3-rs-n, .v3-app .v3-rs-cancelled .v3-rs-n { color: var(--s-red-fg); }
.v3-app .v3-rs-cancelled .v3-rs-l { color: var(--c-light); }

/* Today attention cards: white card, coloured hairline only */
.v3-app .v3-today-overdue.is-hot { border-color: var(--s-red-bd); box-shadow: var(--shadow-sm); }
.v3-app .v3-today-replies.is-hot { border-color: var(--s-blue-bd); box-shadow: var(--shadow-sm); }
.v3-app .v3-count-badge { background: #F1F2F5; color: var(--c-muted); border-radius: 6px; font-weight: 700; }

/* ---------- 8) Topbar: refined slate, quieter chrome ---------- */
.v3-app .v3-topbar { background: #101828; border-bottom: 1px solid #1D2939; }
.v3-app .v3-topbar .v3-nav a { font-size: 13px; font-weight: 550; color: #98A2B3; border-radius: 7px; }
.v3-app .v3-topbar .v3-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.v3-app .v3-topbar .v3-nav a.is-active { color: #fff; background: rgba(255,255,255,.10); }
.v3-app .v3-role-badge { background: rgba(255,255,255,.08); color: #CBD5E1; border: 1px solid rgba(255,255,255,.12); font-weight: 600; }
.v3-bell-count { border-color: #101828; }

/* ---------- 9) Settings tabs → understated segmented control ---------- */
.v3-app .v3-tab { border-radius: 7px; font-weight: 600; font-size: 12.5px; color: var(--c-muted); background: transparent; border: 1px solid transparent; }
.v3-app .v3-tab:hover { background: #EFF1F5; color: var(--c-text); border-color: transparent; }
.v3-app .v3-tab.is-active { background: #fff; color: var(--c-text); border: 1px solid var(--c-line-strong); box-shadow: var(--shadow-sm); }
.v3-settings-tabs { background: #EFF1F5; padding: 4px; border-radius: 9px; display: inline-flex; gap: 2px; }

/* ---------- 10) Misc noise reduction ---------- */
.v3-app .v3-alert.ok { background: var(--s-green-bg); border: 1px solid var(--s-green-bd); color: var(--s-green-fg); border-radius: 8px; }
.v3-app .v3-alert.error { background: var(--s-red-bg); border: 1px solid var(--s-red-bd); color: var(--s-red-fg); border-radius: 8px; }
.v3-app .v3-help { font-size: 12px; color: var(--c-light); }
.v3-app .v3-pagination { font-size: 12.5px; }
.v3-app .v3-pg-btn { border: 1px solid var(--c-line-strong); border-radius: 7px; background: #fff; }

/* ============================================================
   v184 USABILITY: quick-view tabs, on-demand filters, sortable headers
   ============================================================ */
.v3-viewtabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 12px; background: #EFF1F5; padding: 4px; border-radius: 9px; width: fit-content; max-width: 100%; }
.v3-viewtab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 7px; text-decoration: none;
    font-size: 12.5px; font-weight: 600; color: var(--c-muted);
    border: 1px solid transparent; white-space: nowrap;
}
.v3-viewtab:hover { color: var(--c-text); background: rgba(255,255,255,.7); }
.v3-viewtab.is-active { background: #fff; color: var(--c-text); border-color: var(--c-line-strong); box-shadow: var(--shadow-sm); }
.v3-viewtab-n {
    font-size: 10.5px; font-weight: 700; line-height: 1;
    padding: 3px 6px; border-radius: 6px;
    background: rgba(0,0,0,.06); color: var(--c-muted);
}
.v3-viewtab.is-active .v3-viewtab-n { background: var(--c-brand-soft); color: var(--c-brand); }
.v3-viewtab.is-attn .v3-viewtab-n { background: var(--s-amber-bg); color: var(--s-amber-fg); border: 1px solid var(--s-amber-bd); }

.v3-adv { flex: 1 1 100%; }
.v3-adv-toggle {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--c-muted);
    padding: 6px 10px; border: 1px solid var(--c-line-strong); border-radius: 7px; background: #fff;
    list-style: none; user-select: none; width: fit-content;
}
.v3-adv-toggle::-webkit-details-marker { display: none; }
.v3-adv-toggle::before { content: '⚙'; font-size: 12px; }
.v3-adv[open] .v3-adv-toggle { color: var(--c-text); border-color: var(--c-brand-border); background: var(--c-brand-softer); }
.v3-adv-n {
    background: var(--c-brand); color: #fff; border-radius: 6px;
    font-size: 10px; font-weight: 800; padding: 2px 6px; line-height: 1;
}
.v3-adv-body { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }

.v3-th-sort { color: inherit; text-decoration: none; }
.v3-th-sort:hover { color: var(--c-text); }
.v3-th-arrow { color: var(--c-brand); font-weight: 800; }

/* ============================================================
   v185 ORDER PAGES: next-action banner + sticky create bar
   ============================================================ */
.v3-nextaction {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 16px; margin-bottom: 14px;
    background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.v3-nextaction.is-you { border-color: var(--s-amber-bd); background: linear-gradient(0deg, #fff, #FFFDF7); }
.v3-nextaction.is-wait { background: #FBFBFC; }
.v3-nextaction-tag {
    display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px;
    background: var(--s-amber-bg); color: var(--s-amber-fg); border: 1px solid var(--s-amber-bd);
    font-size: 10.5px; font-weight: 800; vertical-align: 1px;
}
.v3-nextaction-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.v3-nextaction-stage { font-weight: 500; color: var(--c-light); }
.v3-nextaction-body { font-size: 12.5px; color: var(--c-muted); margin-top: 3px; }
.v3-nextaction .v3-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) { .v3-nextaction { flex-direction: column; align-items: stretch; } }

.v3-stickybar {
    position: sticky; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 16px; padding: 12px 16px;
    background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
    border: 1px solid var(--c-line); border-radius: 10px;
    box-shadow: 0 -4px 16px rgba(16,24,40,.06), var(--shadow-sm);
}
.v3-stickybar-sum { font-size: 13px; color: var(--c-muted); min-width: 0; }
.v3-stickybar-svcs { font-weight: 700; color: var(--c-text); }
.v3-stickybar-pt { color: var(--c-muted); }
@media (max-width: 640px) { .v3-stickybar { flex-direction: column; align-items: stretch; } }

/* ---- Fix: Done/Cancelled rows — status pill invisible ----
   A legacy rule (from the old solid-green-row era) painted the "✓ Complete"
   pill WHITE-on-white-border; now that done rows are white (professional skin)
   the pill melted into the row. Restore proper soft-tint pills + the trash
   icon that had the same white-on-white problem. */
.v3-app .v3-table tr.is-done-row .v3-pill-done {
    background: var(--s-green-bg);
    color: var(--s-green-fg);
    border: 1px solid var(--s-green-bd);
}
.v3-app .v3-table tr.is-cancelled-row .v3-pill-cancelled {
    background: var(--s-red-bg);
    color: var(--s-red-fg);
    border: 1px solid var(--s-red-bd);
}
.v3-app .v3-table tr.is-done-row .v3-icon-btn-danger {
    color: var(--c-light);
    background: transparent;
}
.v3-app .v3-table tr.is-done-row .v3-icon-btn-danger:hover {
    color: var(--s-red-fg);
    background: var(--s-red-bg);
}

/* ============================================================
   v190 — B6 PDF preview modal · C1 mobile card rows · C4 chat jump
   ============================================================ */

/* --- B6: in-page PDF preview --- */
/* file card + preview button stack INSIDE grid column 1 (135px) — the button
   must not become a grid child of .v3-design-row or the notes column shifts */
.v3-design-file-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-design-file-col .v3-file.is-latest { width: 100%; }
.v3-preview-btn { width: 100%; justify-content: center; padding: 6px 8px; font-size: 11.5px; white-space: nowrap; }
.v3-pdfmodal {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(16,24,40,.55); padding: 3vh 3vw;
}
.v3-pdfmodal.is-open { display: flex; align-items: stretch; justify-content: center; }
.v3-pdfmodal-box {
    background: #fff; border-radius: 12px; overflow: hidden;
    width: min(980px, 100%); display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(16,24,40,.35);
}
.v3-pdfmodal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--c-line, #E7E9EE);
}
.v3-pdfmodal-title { font-size: 13px; font-weight: 700; color: var(--c-text); }
.v3-pdfmodal-frame { flex: 1; width: 100%; border: 0; min-height: 70vh; background: #525659; }

/* --- C4-lite: floating jump-to-messages --- */
.v3-chatjump {
    position: fixed; right: 18px; bottom: 18px; z-index: 90;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 999px; border: 1px solid var(--c-line-strong, #D8DBE2);
    background: #fff; color: var(--c-text); font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 20px rgba(16,24,40,.14);
    transition: opacity .18s ease, transform .18s ease;
}
.v3-chatjump:hover { border-color: var(--c-brand-border); background: var(--c-brand-softer); }
.v3-chatjump.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media print { .v3-chatjump, .v3-pdfmodal { display: none !important; } }

/* --- C1 v2: dashboard rows as COMPOSED cards on phones ---
   Not a labelled table turned sideways — a real card: patient leads, order #
   sits top-right, chips and status stack beneath, meta + actions on a footer
   row. Labels are gone; hierarchy does the work. --- */
@media (max-width: 720px) {
    .v3-table thead { display: none; }
    .v3-table, .v3-table tbody { display: block; width: 100%; }
    .v3-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: center;
        position: relative; margin: 0 0 12px; padding: 14px 14px 12px;
        background: #fff; border: 1px solid var(--c-line, #E7E9EE);
        border-radius: 12px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.05));
    }
    .v3-table tbody tr:hover { background: #fff; }
    .v3-table tbody tr td { display: block; padding: 0; border: none; width: auto; }
    .v3-table tbody tr td::before { content: none; }

    /* 1 — patient block leads (name + clinic sub-line already inside) */
    .v3-table tbody tr td[data-label="Patient"] { order: 1; width: 100%; padding-right: 64px; }
    .v3-table tbody tr td[data-label="Patient"] .v3-patient-name { font-size: 15px; }
    .v3-table tbody tr td[data-label="Patient"] .v3-cell-patient { max-width: none; }

    /* order # pinned top-right, quiet */
    .v3-table tbody tr td[data-label="Order"] { position: absolute; top: 14px; right: 14px; }
    .v3-table tbody tr td[data-label="Order"] .v3-cell-no {
        font-size: 12px; font-weight: 700; color: var(--c-light, #8B92A0);
        text-align: right;
    }

    /* 2 — service chips */
    .v3-table tbody tr td[data-label="Services"] { order: 2; width: 100%; margin-top: 9px; }

    /* 3 — status line: pill + turn chip only (the long sentence is desktop-only) */
    .v3-table tbody tr td[data-label="Status"] { order: 3; width: 100%; margin-top: 9px; }
    .v3-table tbody tr td[data-label="Status"] .v3-status-detail { display: none; }
    .v3-table .v3-pill { max-width: none; }

    /* footer row: hairline + meta left, action right */
    .v3-table tbody tr td[data-label="Sales"], .v3-table tbody tr td[data-label="Ordered"], .v3-table tbody tr td[data-label="Activity"] {
        margin-top: 10px; padding-top: 9px;
        font-size: 11.5px; color: var(--c-light, #8B92A0);
        border-top: 1px solid var(--c-line, #E7E9EE);
    }
    .v3-table tbody tr td[data-label="Ordered"] { order: 4; }
    .v3-table tbody tr td[data-label="Ordered"] .v3-cell-sub { font-size: 11.5px; white-space: nowrap; }
    .v3-table tbody tr td[data-label="Ordered"] .v3-cell-sub::before { content: 'Ordered '; }
    .v3-table tbody tr td[data-label="Sales"]    { order: 5; margin-left: 10px; }
    .v3-table tbody tr td[data-label="Activity"] { order: 6; margin-left: 10px; flex: 1; min-width: 0; }
    /* the borders form one continuous hairline across the footer row */
    .v3-table tbody tr td[data-label="Sales"]:empty { display: none; }

    /* action (trash) — bottom-right of the footer row */
    .v3-table tbody tr td[data-label=""] { order: 7; margin-top: 10px; padding-top: 6px; margin-left: auto; }

    /* done / cancelled cards keep their colour edge on the left */
    .v3-table tr.is-done-row td:first-child,
    .v3-table tr.is-cancelled-row td:first-child { box-shadow: none; }
    .v3-app .v3-table tr.is-done-row { border-left: 3px solid var(--s-green-bd); }
    .v3-app .v3-table tr.is-cancelled-row { border-left: 3px solid var(--s-red-bd); }

    .v3-viewtabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .v3-adv-body .v3-filter-field { flex: 1 1 100%; }
}

/* ============================================================
   v196 — Design annotation (draw on the PDF & save)
   ============================================================ */
.v3-anno-box { width: min(1040px, 100%); }
.v3-anno-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 14px; border-bottom: 1px solid var(--c-line, #E7E9EE);
    background: #FAFBFC;
}
.v3-anno-group { display: inline-flex; align-items: center; gap: 4px; }
.v3-anno-tool {
    border: 1px solid var(--c-line-strong, #D8DBE2); background: #fff;
    border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600;
    color: var(--c-muted, #5D6470); cursor: pointer; white-space: nowrap;
}
.v3-anno-tool:hover { color: var(--c-text); border-color: var(--c-brand-border, #B9CBFF); }
.v3-anno-tool.is-active { background: var(--c-brand-soft, #EAF0FF); color: var(--c-brand, #2E5FE8); border-color: var(--c-brand-border, #B9CBFF); }
.v3-anno-swatch {
    width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-line-strong, #D8DBE2);
}
.v3-anno-swatch.is-active { box-shadow: 0 0 0 2px var(--c-brand, #2E5FE8); }
.v3-anno-pageno { font-size: 12px; font-weight: 700; color: var(--c-muted); min-width: 46px; text-align: center; }
.v3-anno-stage {
    position: relative; overflow: auto; background: #525659;
    display: flex; justify-content: center; padding: 14px; min-height: 60vh; max-height: 74vh;
}
.v3-anno-canvases { position: relative; }
.v3-anno-canvases canvas { display: block; box-shadow: 0 4px 24px rgba(0,0,0,.4); border-radius: 3px; }
.v3-anno-ink { position: absolute; inset: 0; cursor: crosshair; border-radius: 3px; }
.v3-anno-loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: #fff; font-size: 13px; font-weight: 600;
}

/* saved markup thumbnails in the version notes column */
.v3-markup-strip {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 10px; margin-bottom: 8px;
    background: #FFFDF7; border: 1px solid var(--s-amber-bd, #F1DFB2); border-radius: 8px;
}
.v3-markup-label { font-size: 11px; font-weight: 800; color: var(--s-amber-fg, #9A6700); }
.v3-markup-thumb {
    display: block; width: 64px; height: 46px; overflow: hidden;
    border: 1px solid var(--c-line-strong, #D8DBE2); border-radius: 6px; background: #fff;
}
.v3-markup-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.v3-markup-thumb:hover { border-color: var(--c-brand, #2E5FE8); }
@media (max-width: 640px) { .v3-anno-toolbar { gap: 6px; } .v3-anno-nav { order: 5; } }

/* --- annotation text tool (v199) --- */
.v3-anno-size {
    border: 1px solid var(--c-line-strong, #D8DBE2); border-radius: 7px;
    padding: 4px 6px; font-size: 12px; font-weight: 600; color: var(--c-muted);
    background: #fff; cursor: pointer;
}
.v3-anno-textinput {
    position: absolute; z-index: 5; min-width: 140px;
    background: rgba(255,255,255,.92);
    border: 1.5px dashed var(--c-brand, #2E5FE8); border-radius: 6px;
    padding: 2px 6px; font-weight: 600; line-height: 1.25;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    resize: none; overflow: hidden; outline: none;
    box-shadow: 0 4px 14px rgba(16,24,40,.18);
}

/* --- annotation text box v2: Enter = new line, commit via button (v200) --- */
.v3-anno-textwrap { position: absolute; z-index: 5; }
.v3-anno-textwrap .v3-anno-textinput { position: static; display: block; }
.v3-anno-textactions { display: flex; gap: 4px; margin-top: 4px; }
.v3-anno-textok, .v3-anno-textcancel {
    border: 1px solid var(--c-line-strong, #D8DBE2); border-radius: 6px;
    font-size: 11.5px; font-weight: 700; padding: 4px 10px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(16,24,40,.15);
}
.v3-anno-textok { background: var(--c-brand, #2E5FE8); color: #fff; border-color: var(--c-brand, #2E5FE8); }
.v3-anno-textok:hover { filter: brightness(1.06); }
.v3-anno-textcancel { background: #fff; color: var(--c-muted, #5D6470); }
.v3-anno-textcancel:hover { color: var(--s-red-fg, #C0392B); border-color: var(--s-red-bd, #EFC7C2); }

/* ================================================================
   v204 — HIERARCHY OVERHAUL (강약조절)
   One coherent pass: a wider type scale, scannable status fills,
   real tab grammar, big KPI numbers, quieter meta, lifted cards.
   Appended last so it wins the cascade at equal specificity.
   ================================================================ */

/* -- 0. canvas: page sits a touch darker so white cards lift -- */
.v3-app { background: #F3F4F7; }
.v3-app .v3-card { box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* -- 1. type scale: quiet the meta, keep names loud -- */
.v3-app .v3-page-title { font-size: 26px; }
.v3-app .v3-page-sub, .v3-app .v3-page-title + .v3-muted { font-size: 13px; }
.v3-app .v3-section-title {
    font-size: 11px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--c-light, #8B92A0);
}
.v3-app .v3-cell-sub { font-size: 12px; color: var(--c-light, #8B92A0); }
.v3-app .v3-patient-name { font-size: 14px; }

/* -- 2. status pills: readable fills, first thing the eye catches -- */
.v3-app .v3-pill.v3-pill-st {
    font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
    padding: 4px 10px 4px 8px;
}
.v3-app .v3-pill.v3-pill-st.amber { background: #FDEFD3; color: #8A4B08; }
.v3-app .v3-pill.v3-pill-st.blue  { background: #DFEBFF; color: #0B4CB4; }
.v3-app .v3-pill.v3-pill-st.green { background: #D9F2E3; color: #146C43; }
.v3-app .v3-pill.v3-pill-st.red   { background: #FBE1DE; color: #B02A1F; }
.v3-app .v3-pill.v3-pill-st.gray  { background: #E9EBEF; color: #4B5563; }
.v3-app .v3-status-detail { font-size: 11.5px; color: var(--c-light, #8B92A0); }

/* turn chip: the single loudest accent on a row */
.v3-app .v3-turn.is-you {
    background: #B45309; color: #fff; border-color: #B45309;
    font-weight: 800; box-shadow: 0 1px 2px rgba(180,83,9,.35);
}

/* -- 3. quick-view tabs: real tab grammar (underline + count badges) -- */
.v3-app .v3-viewtabs { gap: 2px; border-bottom: 1px solid var(--c-line, #E7E9EE); padding-bottom: 0; margin-bottom: 16px; }
.v3-app .v3-viewtab {
    border-radius: 8px 8px 0 0; padding: 8px 12px 10px;
    border-bottom: 2.5px solid transparent; margin-bottom: -1px;
    background: transparent; font-size: 12.5px;
}
.v3-app .v3-viewtab:hover { background: rgba(46,95,232,.05); color: var(--c-text); }
.v3-app .v3-viewtab.is-active {
    background: transparent; color: var(--c-brand, #2E5FE8);
    border-bottom-color: var(--c-brand, #2E5FE8); font-weight: 800;
}
.v3-app .v3-viewtab-count {
    background: #E9EBEF; color: #4B5563; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; padding: 1px 7px; line-height: 1.5;
}
.v3-app .v3-viewtab.is-active .v3-viewtab-count { background: var(--c-brand-soft, #EAF0FF); color: var(--c-brand, #2E5FE8); }

/* -- 4. table: quiet header, loud rows -- */
.v3-app .v3-table thead th {
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--c-light, #8B92A0);
    background: #FAFBFC; border-bottom: 1px solid var(--c-line, #E7E9EE);
    padding-top: 9px; padding-bottom: 9px;
}
.v3-app .v3-table tbody tr:hover { background: #F6F8FE; }

/* -- 5. KPI numbers: unmistakably the biggest thing on stat cards -- */
.v3-app .v3-kpi-num { font-size: 30px; font-weight: 800; }
.v3-app .v3-kpi-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--c-light, #8B92A0);
}

/* -- 6. buttons: primary gets weight, ghosts stay quiet -- */
.v3-app .v3-btn:not(.v3-btn-ghost):not(.v3-btn-outline):not(.v3-btn-danger) {
    box-shadow: 0 1px 2px rgba(46,95,232,.35);
}
.v3-app .v3-btn:not(.v3-btn-ghost):not(.v3-btn-outline):hover { filter: brightness(1.05); }

/* -- 7. Today lists: colour-edged rows, urgent = amber wash -- */
.v3-app .v3-today-card li, .v3-app .v3-today-card .v3-today-row { position: relative; }
.v3-app .v3-today-due { font-size: 11.5px; font-weight: 700; }
.v3-app .v3-today-clinic { font-size: 12px; color: var(--c-light, #8B92A0); }

/* -- 8. inputs: clear focus ring project-wide (validation affordance) -- */
.v3-app input:focus, .v3-app select:focus, .v3-app textarea:focus {
    outline: none; border-color: var(--c-brand, #2E5FE8) !important;
    box-shadow: 0 0 0 3px rgba(46,95,232,.15);
}
.v3-app input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--s-red-bd, #EFC7C2);
}

/* -- 9. calendar: today cell pops -- */
.v3-app .v3-cal-today, .v3-app .v3-cal-cell.is-today {
    box-shadow: inset 0 0 0 2px var(--c-brand, #2E5FE8); border-radius: 8px;
}

/* --- v208: recognition copy — annotate intent + request-sent feedback --- */
.v3-design-hint {
    font-size: 11.5px; color: var(--c-muted, #5D6470); line-height: 1.45;
    margin-top: 2px; max-width: 150px;
}
.v3-req-sent {
    font-size: 12.5px; font-weight: 700; color: var(--s-green-fg, #146C43);
    background: var(--s-green-bg, #E7F5EC); border: 1px solid var(--s-green-bd, #C4E5D2);
    border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.5;
}