/* =====================================================================================================
   Prof Clinic UI - one design system, loaded after style.css.
   Following Apple's Human Interface Guidelines (materials, dark-mode, color, layout, lists-and-tables,
   sheets, loading):
   - dark mode: the content layer is SOLID (cards, tables, panels); light mode keeps the frosted cards over the
     soft gradient (the clinic's look); blur on the floating layer (header, side bar, menus, pop-ups, loading)
   - three elevations: page < card < pop-up; in dark mode each step is a little brighter
   - one card, one table, one pop-up, one menu, one loading screen, one grid gap, one split layout
   - label colours: primary / secondary / tertiary; small text keeps 4.5:1 contrast or more
   html.dk = dark now (theme.js: chosen here or by the system)
   ===================================================================================================== */

/* ---------- tokens ---------- */
:root {
  --ui-r-xs: 8px; --ui-r-sm: 10px; --ui-r: 14px; --ui-r-lg: 18px; --ui-r-xl: 22px;
  --ui-gap: 18px; --ui-pad: 20px;
  --ui-bg: #eef3f6; --ui-bg-glow: rgba(57, 192, 224, .16);
  --ui-card: #ffffff; --ui-card-2: #f4f7f9; --ui-pop: rgba(255, 255, 255, .88);
  /* menus / pickers: almost solid - one opened inside a frosted card can't blur what's behind it, so it must not need to */
  --ui-menu: rgba(255, 255, 255, .97);
  /* light cards: frosted white over the gradient, so the soft blue / lilac light shows through */
  --ui-card-bg: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%), rgba(246, 250, 253, .6);
  --ui-card-2-bg: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%), rgba(226, 238, 246, .5);
  --ui-card-blur: blur(22px) saturate(165%);
  --ui-card-shadow: 0 10px 34px -14px rgba(10, 42, 59, .28), 0 1px 0 rgba(255, 255, 255, .7) inset;
  --ui-line: rgba(10, 42, 59, .09); --ui-line-2: rgba(10, 42, 59, .15);
  --ui-text: #0f2230; --ui-text-2: #4b5d6a; --ui-text-3: #5f707c;
  --ui-th: #f2f6f8; --ui-zebra: rgba(10, 42, 59, .024); --ui-hover: rgba(11, 117, 147, .07);
  --ui-field: #ffffff; --ui-field-line: rgba(10, 42, 59, .17);
  --ui-e1: 0 1px 2px rgba(10, 42, 59, .05), 0 6px 18px -10px rgba(10, 42, 59, .16);
  --ui-e2: 0 2px 6px rgba(10, 42, 59, .06), 0 16px 36px -14px rgba(10, 42, 59, .30);
  --ui-e3: 0 30px 80px -24px rgba(10, 42, 59, .42), 0 2px 8px rgba(10, 42, 59, .08);
  --ui-scrim: rgba(8, 28, 42, .30);
  --ui-glass: rgba(255, 255, 255, .74); --ui-glass-line: rgba(255, 255, 255, .65);
  --ui-blur: blur(24px) saturate(170%);
  --ui-accent: #0b7593; --ui-accent-2: #1597b8; --ui-on-accent: #ffffff;
  /* the older names the rest of the styles use - all point at the system now */
  --bg: var(--ui-bg); --surface: var(--ui-card); --surface-2: var(--ui-card-2); --line: var(--ui-line-2);
  --ink: var(--ui-text); --muted: var(--ui-text-2);
  --glass: var(--ui-card); --glass-2: var(--ui-card-2); --glass-solid: var(--ui-pop);
  --glass-hi: linear-gradient(transparent, transparent); --glass-line: var(--ui-line);
  --glass-shadow: var(--ui-e1); --glass-blur: none; --pop-solid: var(--ui-pop);
}
html.dk {
  --ui-bg: #040b12; --ui-bg-glow: rgba(40, 150, 200, .20);
  --ui-card: #0f2536; --ui-card-2: #15304a; --ui-pop: rgba(25, 52, 76, .94); --ui-menu: rgba(22, 47, 70, .98);
  --ui-card-bg: var(--ui-card); --ui-card-2-bg: var(--ui-card-2); --ui-card-blur: none; --ui-card-shadow: var(--ui-e1);
  --ui-line: rgba(165, 212, 240, .11); --ui-line-2: rgba(165, 212, 240, .19);
  --ui-text: #eef5f9; --ui-text-2: #a8bccb; --ui-text-3: #8297a6;
  --ui-th: #13304a; --ui-zebra: rgba(255, 255, 255, .022); --ui-hover: rgba(63, 200, 230, .08);
  --ui-field: #0a1a28; --ui-field-line: rgba(165, 212, 240, .20);
  --ui-e1: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 0 1px rgba(0, 0, 0, .18), 0 10px 24px -14px rgba(0, 0, 0, .8);
  --ui-e2: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .25), 0 20px 44px -16px rgba(0, 0, 0, .85);
  --ui-e3: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(0, 0, 0, .3), 0 40px 100px -30px rgba(0, 0, 0, .92);
  --ui-scrim: rgba(1, 7, 12, .56);
  --ui-glass: rgba(17, 38, 56, .74); --ui-glass-line: rgba(170, 220, 250, .13);
  --ui-accent: #3fc8e6; --ui-accent-2: #2aaed0; --ui-on-accent: #032130;
  --accent: var(--ui-accent); --accent-ink: var(--ui-on-accent); --accent-soft: rgba(63, 200, 230, .14);
}

/* ---------- page ---------- */
html { background: radial-gradient(1100px 520px at 18% -8%, var(--ui-bg-glow), transparent 70%), var(--ui-bg) fixed !important; }
html:not(.dk) { background: var(--grad) fixed !important; background-color: var(--ui-bg) !important; }   /* light: blue - lilac white - mint */
html body { background: transparent !important; color: var(--ui-text); }   /* (on <html>: the brand shapes stay visible) */
html.dk .bg-aurora { opacity: .55; }
html.dk .bg-deco { opacity: .35; }

/* ---------- one card (light: frosted, dark: solid) ---------- */
html .card, html .tile, html .tile2, html .st, html .rp-kpi, html .rp-filter, html .ucard, html .acc-card, html .sec-card,
html .cqg, html .acc-pane, html .ap-card, html article.cq, html .cq-add, html .ag-wrap, html .gw-bar, html .org-sum > span {
  background: var(--ui-card-bg) !important; border: 1px solid var(--ui-line) !important; box-shadow: var(--ui-card-shadow) !important;
  -webkit-backdrop-filter: var(--ui-card-blur) !important; backdrop-filter: var(--ui-card-blur) !important; }
html .card, html .tile2, html .rp-filter, html .acc-pane, html .ap-card, html article.cq, html .ag-wrap, html .ucard,
html .acc-card, html .sec-card { border-radius: var(--ui-r-lg) !important; }
html .st, html .rp-kpi, html .tile, html .cqg, html .cq-add { border-radius: var(--ui-r) !important; }
/* a section inside a card: one step in, no shadow */
html .acc-sec, html .cqp-block, html .cqp-step, html .cqp-danger, html .emp-box, html .cqd, html .rf-sec {
  background: var(--ui-card-2-bg) !important; border: 1px solid var(--ui-line) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: var(--ui-r) !important; }
/* the soft circle in each home tile's corner (in the tile's own colour) stays: style.css .tile2::after */
html .st::before { top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }      /* the status bar stays */
a.tile2, a.st { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.tile2:hover, a.st:hover { transform: translateY(-2px); border-color: var(--ui-line-2) !important; box-shadow: var(--ui-e2) !important; }
a.tile2:active, a.st:active { transform: scale(.985); transition-duration: 80ms; }
/* notices (alerts, the dialer-off note ...) */
html .alert { background: var(--ui-card-bg) !important; border: 1px solid var(--ui-line) !important; border-left-width: 3px !important;
  border-radius: var(--ui-r-sm) !important; box-shadow: none !important;
  -webkit-backdrop-filter: var(--ui-card-blur) !important; backdrop-filter: var(--ui-card-blur) !important; }
html .alert.danger { border-left-color: var(--r) !important; } html .alert:not(.danger):not(.info) { border-left-color: var(--y) !important; }
html .alert.info { border-left-color: var(--b) !important; }

/* phones: the top bar can't blur (that breaks the slide-out menu), so it is solid - nothing shows through it */
@media (max-width: 900px) {
  html:root:not(#_) .hdr { background: var(--ui-bar) !important; border-bottom: 1px solid var(--ui-line); }
}
:root { --ui-bar: #f3f7fa; } html.dk { --ui-bar: #06111a; }

/* ---------- floating layer: glass (header, side bar, buttons on it) ---------- */
html .hdr-nav, html .hdr-user, html .hdr-btn, html .theme-toggle, html .secnav, html .tabs.secnav {
  background: var(--ui-glass) !important; border: 1px solid var(--ui-glass-line) !important; box-shadow: var(--ui-e2) !important;
  -webkit-backdrop-filter: var(--ui-blur) !important; backdrop-filter: var(--ui-blur) !important; }
html .hdr-nav a.on, html .hdr-nav a[aria-current="page"] { background: var(--ui-accent) !important; color: var(--ui-on-accent) !important; }

/* ---------- one table ---------- */
html table.data { border-collapse: separate; border-spacing: 0; }
html table.data thead th { background: var(--ui-th) !important; color: var(--ui-text-2); font-weight: 600; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--ui-line-2); }
html table.data thead tr:first-child th:first-child { border-top-left-radius: var(--ui-r-xs); }
html table.data thead tr:first-child th:last-child { border-top-right-radius: var(--ui-r-xs); }
html table.data td { border-bottom: 1px solid var(--ui-line); }
html table.data tbody tr:last-child > td { border-bottom: 0; }
/* wide tables: soft alternating rows; hover lights the row - on top of any heat colour, never instead of it */
html table.data tbody tr:nth-child(even):not(.group-row):not(.rp-detail) > td { background-image: linear-gradient(var(--ui-zebra), var(--ui-zebra)); }
html table.data tbody tr:not(.group-row):not(.rp-detail):hover > td { box-shadow: inset 0 0 0 999px var(--ui-hover); }
html table.data tr.group-row > td { background: var(--ui-card-2) !important; color: var(--ui-text-2); font-weight: 600; }
html table.data tr.sum-row > td, html table.data tr.rp-total > td, html table.data tfoot td {
  font-weight: 700; background-color: var(--ui-card-2) !important; border-top: 1px solid var(--ui-line-2); }
html .table-wrap, html .ax-scrollbox { border-radius: var(--ui-r-xs); }

/* ---------- one pop-up (side panels, centred windows, dialogs) ---------- */
html .sheet-back, html dialog::backdrop, html .lg-why-ov { background: var(--ui-scrim) !important;
  -webkit-backdrop-filter: blur(5px) saturate(115%) !important; backdrop-filter: blur(5px) saturate(115%) !important; }
html .sheet, html dialog, html .lp-dlg {
  background: var(--ui-pop) !important; color: var(--ui-text); border: 1px solid var(--ui-glass-line) !important;
  box-shadow: var(--ui-e3) !important; -webkit-backdrop-filter: var(--ui-blur) !important; backdrop-filter: var(--ui-blur) !important; }
html .sheet, html dialog, html .lp-dlg { border-radius: var(--ui-r-xl) !important; }
html .sheet-wrap:not(.modal) .sheet { border-radius: var(--ui-r-xl) 0 0 var(--ui-r-xl) !important; }     /* the side panel */
html .sheet-head, html .cqp-tabs, html .sheet-wrap .sheet-head { background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--ui-line) !important; }
html .sheet-head h2, html dialog h2, html .lp-dlg h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
html .sn-pop-card h3 { font: 600 18px var(--font-display); text-transform: none; letter-spacing: -.01em; }   /* like every pop-up title */
html .sheet-x, html dialog .x, html .lp-dlg .x { width: 34px; height: 34px; border-radius: 50%; background: var(--ui-card-2) !important;
  border: 1px solid var(--ui-line) !important; color: var(--ui-text-2); }
html .sheet-x:hover { color: var(--ui-text); border-color: var(--ui-line-2) !important; }
html .sheet-foot, html .rf-foot, html .cqp-foot, html .lp-foot { background: linear-gradient(transparent, var(--ui-pop) 32%) !important;
  border-top: 1px solid var(--ui-line) !important; }

/* ---------- one menu / picker / pop-over ---------- */
html .col-menu, html .tpop, html .pk-list, html .dp, html .ls-pick-box, html .lp-pick-pop, html .sn-pop-card, html .srch,
html .pl-pop, html .pill-menu, html .cq-dlg {
  background: var(--ui-menu) !important; color: var(--ui-text); border: 1px solid var(--ui-line-2) !important;
  border-radius: var(--ui-r) !important; box-shadow: var(--ui-e2) !important;
  -webkit-backdrop-filter: var(--ui-blur) !important; backdrop-filter: var(--ui-blur) !important; }

/* ---------- one loading screen ---------- */
html .ld-ov { background: var(--ui-scrim) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html .ld-card { background: var(--ui-pop) !important; border: 1px solid var(--ui-glass-line) !important; box-shadow: var(--ui-e3) !important;
  -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur); border-radius: var(--ui-r-xl) !important; color: var(--ui-text); }
html .ld-card .ld-text { color: var(--ui-text); font-weight: 600; }
html .ld-bar i { background: linear-gradient(90deg, var(--ui-accent-2), var(--ui-accent)) !important; }

/* ---------- notifications (toasts) ---------- */
html .ntf { background: var(--ui-pop) !important; border: 1px solid var(--ui-glass-line) !important; box-shadow: var(--ui-e2) !important;
  -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur); border-radius: var(--ui-r) !important; color: var(--ui-text); }

/* ---------- controls: one button, one field ---------- */
html .btn { border-radius: var(--ui-r-sm); min-height: 36px; }
html .btn:not(.primary):not(.danger):not(.link):not(.ghost-danger) { background: var(--ui-card) !important; border: 1px solid var(--ui-line-2) !important;
  color: var(--ui-text) !important; }
html .btn:not(.primary):not(.danger):not(.link):not(.ghost-danger):hover { border-color: var(--ui-accent) !important; }
html .btn.primary { background: var(--ui-accent) !important; border-color: transparent !important; color: var(--ui-on-accent) !important;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ui-accent) 70%, transparent); }
html .btn.primary:hover { filter: brightness(1.06); }
/* "Yes, continue" on a risky confirm (delete, remove, switch off ...) stays red */
html .btn.danger-btn { background: var(--r) !important; border-color: transparent !important; color: #ffffff !important;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--r) 70%, transparent); }
html.dk .btn.danger-btn { color: #2a0d0b !important; }
html .btn:active { transform: scale(.98); }
html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), html select, html textarea {
  background-color: var(--ui-field) !important; border: 1px solid var(--ui-field-line) !important; border-radius: var(--ui-r-sm);
  color: var(--ui-text); }
html input::placeholder, html textarea::placeholder { color: var(--ui-text-3); opacity: 1; }
html input:focus, html select:focus, html textarea:focus { border-color: var(--ui-accent) !important; outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent) !important; }
/* "type or pick" fields: our arrow (turns when the list is open) instead of the browser's black one */
html .dl-wrap { position: relative; display: flex; align-items: center; min-width: 0; max-width: 100%; flex: 1 1 auto; }
html .dl-wrap > input { flex: 1 1 auto; min-width: 0; width: 100%; padding-right: 34px !important; }
html .dl-wrap > svg { position: absolute; right: 11px; width: 16px; height: 16px; pointer-events: none; fill: none; stroke: var(--ui-text-3);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease, stroke .15s ease; }
html .dl-wrap > input[aria-expanded="true"] + svg { transform: rotate(180deg); stroke: var(--ui-accent); }
html .dl-wrap.dl-none > svg { display: none; } html .dl-wrap.dl-none > input { padding-right: 12px !important; }
html .dp-wrap > svg { stroke: var(--ui-text-3); }
html .dp-wrap > input[aria-expanded="true"] + svg { stroke: var(--ui-accent); }
/* date + time fields: the time of day under the calendar */
html .dp-foot { align-items: center; gap: 8px; }
html .dp-clock { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
html .dp-clock small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-text-3); }
html .dp-clock input { width: 76px; height: 32px; padding: 0 8px; text-align: center; font: 600 13.5px var(--font); font-variant-numeric: tabular-nums; }

/* ---------- one grid gap, one split layout ---------- */
html .tiles, html .kpis, html .ucards, html .cq-grid, html .acc-grid, html .rp-kpis, html .ls-kpis,
html .grp-grid, html .two, html .ls-grid, html .emp-grid, html .rp-dgrid, html .cq-split, html .acc-split { gap: var(--ui-gap) !important; }
html .cq-split > :last-child, html .acc-split > .acc-pane { position: sticky; top: calc(var(--hdr-h, 72px) + 14px); align-self: start; }
@media (max-width: 960px) {          /* equal halves stack on narrow screens, in reading order */
  html .two, html .ls-grid, html .emp-grid, html .rp-dgrid { grid-template-columns: minmax(0, 1fr) !important; }
  html .cq-split > :last-child, html .acc-split > .acc-pane { position: static; }
}

/* ---------- text: one hierarchy ---------- */
/* page titles like Apple's large titles: no capitals, tight tracking - size and weight carry the hierarchy */
html .page-head h1 { text-transform: none; letter-spacing: -.022em; font: 700 clamp(26px, 2.3vw, 34px)/1.12 var(--font-display); }
html .muted, html small.muted { color: var(--ui-text-2); }
html h1, html h2, html h3 { color: var(--ui-text); }
html .card-head h2, html .card > h2:first-child { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- phones: pop-ups become bottom sheets with a grabber ---------- */
@media (max-width: 640px) {
  html .sheet-wrap .sheet { border-radius: var(--ui-r-xl) var(--ui-r-xl) 0 0 !important; }
  html .sheet-wrap .sheet::before { content: ""; position: sticky; top: 6px; z-index: 5; display: block; width: 38px; height: 5px;
    margin: 6px auto -11px; border-radius: 3px; background: var(--ui-line-2); }
}

/* ---------- accessibility: less motion, less transparency, more contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  a.tile2, a.st, html .btn { transition: none !important; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html .sheet, html dialog, html .lp-dlg, html .col-menu, html .tpop, html .pk-list, html .dp, html .ld-card, html .ntf,
  html .hdr-nav, html .hdr-user, html .secnav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :root { --ui-pop: #ffffff; --ui-glass: #ffffff; --ui-card-bg: var(--ui-card); --ui-card-2-bg: var(--ui-card-2); --ui-card-blur: none; }
  html.dk { --ui-pop: #152c40; --ui-glass: #10263a; }
}
@media (prefers-contrast: more) {
  :root { --ui-line: rgba(10, 42, 59, .3); --ui-line-2: rgba(10, 42, 59, .45); --ui-text-2: #33444f; }
  html.dk { --ui-line: rgba(200, 230, 250, .3); --ui-line-2: rgba(200, 230, 250, .45); --ui-text-2: #c7d6e0; }
}