/* Root-relative so CSSOM consumers such as accessibility tooling retain the
   token sheet's correct origin when they inspect this imported stylesheet. */
@import url("/assets/refera-tokens.css");

/* Refera clinical operations identity.
   Loaded last across the licensed console, standalone workspace tools and
   settings so every shipped shell shares one local typeface and token set. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-italic.woff2") format("woff2");
}

:root {
  --paper: var(--refera-color-light-canvas);
  --surface: var(--refera-color-light-surface);
  --surface-2: var(--refera-color-light-surface-muted);
  --ink: var(--refera-color-light-text);
  --ink2: var(--refera-color-light-text-muted);
  --ink3: var(--refera-color-light-text-quiet);
  --ink3-decor: #8B9995;
  --hair: var(--refera-color-light-border);
  --hair-dark: var(--refera-color-light-border-strong);

  --teal: var(--refera-color-light-brand);
  --teal-2: var(--refera-color-light-brand-strong);
  --teal-soft: #5D9584;
  --teal-wash: var(--refera-color-light-brand-wash);
  --teal-edge: var(--refera-color-light-brand-edge);
  --signal: var(--refera-color-light-action);
  --signal-wash: var(--refera-color-light-action-wash);
  --signal-edge: var(--refera-color-light-action-edge);
  --action-fill: var(--refera-color-light-action);
  --attention: var(--refera-color-light-attention);
  --attention-wash: var(--refera-color-light-attention-wash);
  --attention-edge: var(--refera-color-light-attention-edge);

  --amber: var(--refera-color-light-warning);
  --amber-wash: var(--refera-color-light-warning-wash);
  --green: var(--refera-color-light-positive);
  --green-wash: var(--refera-color-light-positive-wash);
  --red: var(--refera-color-light-negative);
  --danger: var(--refera-color-light-negative);
  --red-wash: var(--refera-color-light-negative-wash);
  --danger-wash: var(--refera-color-light-negative-wash);

  --ch-email: #2F67AD;
  --ch-healthlink: #8B651C;
  --ch-fax: #8B5412;
  --ch-upload: #357486;
  --hue-email: #2F67AD;
  --hue-healthlink: #8B651C;
  --hue-fax: #8B5412;
  --hue-upload: #357486;
  --hue-frontdesk: #357486;
  --hue-qr: #257348;

  --bar: #F7F9F8;
  --pill-bg: #15211E;
  --pill-fg: #FFFFFF;
  --pill-hover: #22312D;
  --toast-bg: #15211E;
  --toast-fg: #FFFFFF;
  --filters-tint: rgba(255, 255, 255, .96);
  --card-hover-border: #B8C8C2;
  --tone-ok-border: #BBDCC8;
  --tone-warn-border: #E8CF9E;
  --tone-teal-border: #BCD5CD;
  --tone-danger-border: #E8BDBD;

  --glass-tint: rgba(244, 247, 246, .92);
  --glass-tint-strong: rgba(255, 255, 255, .98);
  --glass-tint-teal: rgba(21, 33, 30, .97);
  --glass-specular: inset 0 0 0 .5px rgba(255, 255, 255, .7);
  --glass-hairline: 0 0 0 .5px rgba(21, 33, 30, .08);
  --elev-1: 0 1px 2px rgba(21, 33, 30, .04);
  --elev-lift: 0 6px 18px rgba(21, 33, 30, .07);
  --elev-float: 0 8px 24px rgba(21, 33, 30, .08), 0 1px 2px rgba(21, 33, 30, .04);
  --elev-overlay: 0 16px 48px rgba(21, 33, 30, .18), 0 2px 8px rgba(21, 33, 30, .08);

  --r-input: var(--refera-radius-input);
  --r-chip: var(--refera-radius-chip);
  --r-card: var(--refera-radius-card);
  --r-glass: 10px;
  --r-sheet: var(--refera-radius-sheet);

  --font: var(--refera-font-family-ui);
  --font-ui: var(--refera-font-family-ui);
  --display: var(--refera-font-family-ui);
  --sans: var(--refera-font-family-ui);
}

html[data-theme="dark"],
:root[data-theme="dark"] {
  --paper: var(--refera-color-dark-canvas);
  --surface: var(--refera-color-dark-surface);
  --surface-2: var(--refera-color-dark-surface-muted);
  --ink: var(--refera-color-dark-text);
  --ink2: var(--refera-color-dark-text-muted);
  --ink3: var(--refera-color-dark-text-quiet);
  --ink3-decor: #57655F;
  --hair: var(--refera-color-dark-border);
  --hair-dark: var(--refera-color-dark-border-strong);

  --teal: var(--refera-color-dark-brand);
  --teal-2: var(--refera-color-dark-brand);
  --teal-soft: #4D9A80;
  --teal-wash: var(--refera-color-dark-brand-wash);
  --teal-edge: var(--refera-color-dark-brand-edge);
  --signal: var(--refera-color-dark-action);
  --signal-wash: var(--refera-color-dark-action-wash);
  --signal-edge: var(--refera-color-dark-action-edge);
  --action-fill: #315F97;
  --attention: var(--refera-color-dark-attention);
  --attention-wash: var(--refera-color-dark-attention-wash);
  --attention-edge: var(--refera-color-dark-attention-edge);

  --amber: var(--refera-color-dark-warning);
  --amber-wash: var(--refera-color-dark-warning-wash);
  --green: var(--refera-color-dark-positive);
  --green-wash: var(--refera-color-dark-positive-wash);
  --red: var(--refera-color-dark-negative);
  --danger: var(--refera-color-dark-negative);
  --red-wash: var(--refera-color-dark-negative-wash);
  --danger-wash: var(--refera-color-dark-negative-wash);

  --ch-email: #88B6EA;
  --ch-healthlink: #D8B568;
  --ch-fax: #E5B968;
  --ch-upload: #76B7C7;
  --hue-email: #88B6EA;
  --hue-healthlink: #D8B568;
  --hue-fax: #E5B968;
  --hue-upload: #76B7C7;
  --hue-frontdesk: #76B7C7;
  --hue-qr: #77C4A8;

  --bar: #1C2521;
  --pill-bg: #E8EFEC;
  --pill-fg: #15211E;
  --pill-hover: #FFFFFF;
  --toast-bg: #27322E;
  --toast-fg: #F2F6F4;
  --filters-tint: rgba(23, 30, 27, .95);
  --card-hover-border: #4A5A54;
  --tone-ok-border: rgba(117, 205, 151, .32);
  --tone-warn-border: rgba(229, 185, 104, .34);
  --tone-teal-border: rgba(119, 196, 168, .32);
  --tone-danger-border: rgba(240, 139, 139, .34);

  --glass-tint: rgba(17, 23, 21, .9);
  --glass-tint-strong: rgba(23, 30, 27, .98);
  --glass-tint-teal: rgba(232, 239, 236, .97);
  --glass-specular: inset 0 0 0 .5px rgba(242, 246, 244, .08);
  --glass-hairline: 0 0 0 .5px rgba(242, 246, 244, .08);
  --elev-1: 0 1px 2px rgba(0, 0, 0, .28);
  --elev-lift: 0 6px 18px rgba(0, 0, 0, .3);
  --elev-float: 0 8px 26px rgba(0, 0, 0, .36), 0 1px 2px rgba(0, 0, 0, .24);
  --elev-overlay: 0 18px 52px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
}

html[data-accent="indigo"] {
  --teal: #355F73; --teal-2: #355F73; --teal-wash: #ECF3F6; --teal-edge: #C6D8E0;
}
html[data-accent="harbour"] {
  --teal: #2F5F9A; --teal-2: #2F5F9A; --teal-wash: #EEF4FB; --teal-edge: #C5D6E9;
}
html[data-accent="plum"] {
  --teal: #98473E; --teal-2: #98473E; --teal-wash: #FFF1EF; --teal-edge: #E8C4BF;
}
html[data-accent="graphite"] {
  --teal: #46514E; --teal-2: #46514E; --teal-wash: #EEF1F0; --teal-edge: #CED6D3;
}
html[data-theme="dark"][data-accent="indigo"] {
  --teal: #8FC1D3; --teal-2: #8FC1D3; --teal-wash: rgba(143, 193, 211, .11); --teal-edge: rgba(143, 193, 211, .34);
}
html[data-theme="dark"][data-accent="harbour"] {
  --teal: #88B6EA; --teal-2: #88B6EA; --teal-wash: rgba(136, 182, 234, .11); --teal-edge: rgba(136, 182, 234, .34);
}
html[data-theme="dark"][data-accent="plum"] {
  --teal: #F09A8F; --teal-2: #F09A8F; --teal-wash: rgba(240, 154, 143, .11); --teal-edge: rgba(240, 154, 143, .34);
}
html[data-theme="dark"][data-accent="graphite"] {
  --teal: #B6C1BD; --teal-2: #B6C1BD; --teal-wash: rgba(182, 193, 189, .11); --teal-edge: rgba(182, 193, 189, .34);
}

body {
  background-color: var(--paper);
  background-image: none !important;
  font-family: var(--font, var(--sans));
  font-feature-settings: "cv05" 1, "cv11" 1;
}
/* The router removes this state in the same task that renders the first view. */
html.is-booting .foot,
html.is-booting #ra-root { visibility: hidden; }
body::before { display: none !important; }

h1, h2, h3, h4,
.wordmark, .view-title, .card-title, .drawer-title,
.stat-value, .tile .v, .metric-value, .process-count,
.timing-stat strong, .status-name, .plan-price,
.bill-plan-name, .bill-price-amount, .bill-addon-name,
.bill-group-title, .ai-upsell-title, .trust-hero-title {
  font-family: var(--display) !important;
  letter-spacing: 0 !important;
}

h1, .view-title { font-weight: 600; }
h2, h3, h4, .card-title { font-weight: 600; }
.wordmark { font-weight: 700; }
.stat-value, .tile .v, .metric-value, .process-count,
.timing-stat strong, .plan-price, .bill-price-amount {
  font-variant-numeric: tabular-nums;
}

.brand-mark rect { fill: var(--teal); }
html[data-tenant-brand="confirmed"] .ws-head-mark,
html[data-tenant-brand="confirmed"] .ws-item-avatar {
  background: var(--tenant-brand); border: 1px solid var(--tenant-brand-edge);
}
.card, .stat, .draft-card, .set-capability { border-radius: var(--r-card); }
.card:hover, a.stat:hover, .btn:hover { transform: none; }
.map-loading { background-image: none !important; }

.metric-value { font-size: 2rem !important; line-height: 1.05 !important; }
.process-count { font-size: 1.35rem !important; line-height: 1 !important; }
.timing-stat strong { font-size: 1.55rem !important; line-height: 1 !important; }
.empty-state h2, .error-state h2 { font: 600 1.55rem/1.2 var(--display) !important; }

.free-usage-banner.fu-approaching {
  border-color: var(--attention-edge);
  border-left: 3px solid var(--attention);
}
.fu-approaching .fu-count {
  color: var(--attention);
  background: var(--attention-wash);
}
.fu-fill.fu-approaching { background: var(--attention); }

/* The one navigation element changes presentation by breakpoint. Reassert the
   desktop segmented rail explicitly so mobile bottom-bar rules can never leak
   into the PC-primary workspace through cascade or generated-sheet ordering. */
@media (min-width: 720px) {
  /* The mobile-first sheet is loaded after the base workspace rules. Restore
     desktop content clearance together with the segmented rail so headings and
     subtitles can never sit underneath the fixed navigation. */
  .view {
    padding-top: calc(var(--safe-top) + var(--topbar-h) + 8px + var(--nav-desktop-h) + 18px) !important;
  }
  /* The demo notice already clears the navigation in normal flow. Do not add
     the full fixed-chrome clearance a second time below it. */
  .demo-banner {
    margin-top: calc(var(--safe-top) + var(--topbar-h) + 8px + var(--nav-desktop-h) + 12px);
  }
  .demo-banner + .view {
    padding-top: 18px !important;
  }
  .tabbar {
    top: calc(var(--safe-top) + var(--topbar-h) + 8px) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: auto !important;
    max-width: none !important;
    height: var(--nav-desktop-h) !important;
    margin: 0 !important;
    padding: 6px !important;
    transform: translateX(-50%) !important;
    border-radius: var(--r-pill) !important;
    background: var(--surface) !important;
  }
  .tab {
    flex: 0 0 auto;
    flex-direction: row;
    min-width: 0;
    min-height: 0;
    padding: 0 18px;
    border-radius: var(--r-pill);
  }
  .tab-ico { display: none; }
  .tab-pill { border-radius: var(--r-pill); }

  /* The generated base sheet is mobile-first. Reassert the desktop data-plane
     contract here so queue rows, metric grids and controls retain their
     practice-manager density instead of inheriting phone geometry. */
  .practice-name, .brand-sep, .seal-x, .asof { display: initial; }
  .wordmark { display: block; }
  .topbar-right { gap: 10px; flex: none; }
  .topbar .icon-btn, .icon-btn { width: 40px; height: 40px; }
  .chip-seal { min-height: 0; }
  .grid { gap: 16px; }
  .today-stats { gap: 0; }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .queue-row {
    grid-template-columns: minmax(180px, 1.1fr) minmax(0, 1.6fr) auto;
    padding: 10px 20px;
  }
  .q-meta { grid-column: auto; }
  .btn-sm { min-height: 32px; }
  .draft-actions .btn { flex: 0 1 auto; }
  .copy-btn {
    padding: 8px 6px;
    margin: -8px -6px -8px auto;
  }
}

/* Active navigation changes must remain readable for every rendered frame.
   Foreground and pill-opacity crossfades briefly produced grey-on-white text;
   switch those two contrast-bearing properties atomically and retain only the
   spatial pill movement. */
.tab { transition: none; }
.tab-pill { transition: transform var(--dur) var(--ease-out); }

@media (max-width: 719px) {
  .tabbar {
    border-color: var(--hair-dark);
    background: var(--glass-tint-strong);
    box-shadow: 0 8px 26px rgba(21, 33, 30, .14), 0 1px 3px rgba(21, 33, 30, .08);
  }
  .tab, .tab-pill { border-radius: 9px; }
  .metric-value { font-size: 1.75rem !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar, .tabbar, .set-topbar { background: var(--surface) !important; }
}

@media (forced-colors: active) {
  .brand-mark rect { fill: CanvasText; }
}