/* ============================================================
   styles.css — layout & components for RAB OmniCare AI
   Colors come from theme.css (:root vars). Do not hardcode brand hex here.
   ============================================================ */
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}

/* ---- Minimal custom scrollbars (themed to the sidebar: navy + indigo accent) ---- */
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:rgba(109,93,252,.4) transparent}
/* WebKit/Chromium — thin transparent track, rounded indigo thumb inset via a
   transparent border so it reads as a slim pill, brightening on hover. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(109,93,252,.4);border:3px solid transparent;border-radius:999px;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(109,93,252,.7);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* Only the nav list scrolls (see #nav below) — style ITS scrollbar. A
   translucent-light pill that turns brand-purple on hover stays visible against
   the navy gradient. */
.sidebar #nav{scrollbar-color:rgba(255,255,255,.22) transparent}
.sidebar #nav::-webkit-scrollbar{width:8px}
.sidebar #nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:2px solid transparent;border-radius:999px;background-clip:padding-box}
.sidebar #nav::-webkit-scrollbar-thumb:hover{background:rgba(124,87,255,.65);background-clip:padding-box}
.app-shell{display:grid;grid-template-columns:282px 1fr;height:100vh;overflow:hidden}
/* The sidebar itself no longer scrolls: brand + location stay pinned at the top
   and the plan card stays pinned at the bottom, while ONLY the nav list scrolls
   when it has more items than fit. */
.sidebar{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:18px 16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow:hidden}
.sidebar #nav{flex:1 1 auto;min-height:0;overflow-y:auto}
/* Scroll affordance: when the nav has more items than fit, the last visible row
   would otherwise sit flush against a hard edge and read as the end of the list.
   Fade the content out at whichever edge still has items off-screen (classes
   toggled by app.js updateNavScrollHints) so it's obvious the list continues. On
   mobile the nav doesn't scroll, so these never engage. */
.sidebar #nav.nav-more-below:not(.nav-more-above){
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);
}
.sidebar #nav.nav-more-above:not(.nav-more-below){
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 34px);
          mask-image:linear-gradient(to bottom,transparent,#000 34px);
}
.sidebar #nav.nav-more-above.nav-more-below{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 34px,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 34px,#000 calc(100% - 34px),transparent);
}
.brand{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#7857ff,#12b8a6);display:grid;place-items:center;font-size:28px}
.brand-mark.has-img{background:none}
.brand-mark img{width:100%;height:100%;display:block}
.brand-title{font-weight:800;font-size:28px;line-height:.82}
.brand-title span{color:#e4e7ff}
.brand-subtitle{font-size:12px;color:#c7d2fe;margin-top:6px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;color:#e8edf8;text-decoration:none;margin:2px 0;font-weight:600}
.nav-item:hover,.nav-item.active{background:linear-gradient(90deg,#4f46e5,#6d5dfc);box-shadow:0 10px 18px rgba(79,70,229,.28)}
.nav-icon{width:22px;text-align:center}
/* Live count pill on a nav item (Escalations). Sizes to its digits: a circle for
   one digit, a rounded pill for two or three ("99+"). border-box keeps min-width
   and padding from fighting. */
.nav-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:20px;min-width:20px;padding:0 7px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:1}
.nav-badge[hidden]{display:none}
/* Section Access: a section RAB hasn't enabled for this workspace stays VISIBLE in the
   nav but greyed + locked (an upsell hint) instead of hidden. The full-item greyscale
   dims its colored icon; hover lifts it slightly to signal it's clickable (opens a
   "contact RAB" notice). The server still enforces access via requireSection. */
.nav-item.nav-locked{opacity:.45;filter:grayscale(1)}
.nav-item.nav-locked:hover,.nav-item.nav-locked.active{opacity:.7;background:rgba(255,255,255,.06);box-shadow:none}
.nav-lock{margin-left:auto;font-size:12px;line-height:1;opacity:.9}
/* Location scope selector, moved into the sidebar so it reads as the global
   context for every page in the nav below it. The top-bar select styling no
   longer applies here, so the dark-rail look is defined explicitly. The whole
   block (label included) collapses when the tenant has no selectable locations
   and the switcher renders empty. */
.sidebar-location{display:flex;flex-direction:column;gap:7px}
.sidebar-location:has(#location-switcher:empty){display:none}
.sidebar-location .loc-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#93a4c9;padding-left:2px}
.sidebar-location .location-switcher{display:block}
.sidebar-location select{width:100%;height:42px;padding:0 34px 0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background-color:rgba(255,255,255,.06);color:#f1f4fb;font-weight:600;font-size:14px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a4c9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.sidebar-location select:hover{background-color:rgba(255,255,255,.1)}
.sidebar-location select option{color:#0b1220}
.sidebar-location .location-static{display:flex;align-items:center;gap:6px;height:42px;box-sizing:border-box;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#f1f4fb;font-weight:600;white-space:nowrap}
.plan-card{flex:0 0 auto;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:14px;padding:14px}
.muted{color:#8aa0c5;font-size:13px}
.plan-name{color:#35e084;font-weight:800;font-size:18px;margin:5px 0 12px}
.usage-row{display:flex;justify-content:space-between;font-size:12px;margin-top:12px}
.meter{height:8px;background:rgba(255,255,255,.14);border-radius:999px;margin-top:8px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--green);border-radius:999px}
.meter.purple span{background:#6d5dfc}
.meter.over span{background:#ff6b6b}
.plan-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-edit{appearance:none;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#e9eefb;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;cursor:pointer}
.plan-edit:hover{background:rgba(255,255,255,.16)}
.plan-note{color:#8aa0c5;font-size:12px;line-height:1.5;margin-top:2px}
/* Settings › Plan & Usage (light panel meters, distinct from the dark sidebar card) */
.plan-current{margin:0 0 16px}
.plan-current-name{font-size:20px;font-weight:800;color:var(--text);margin-top:2px}
.plan-usage{display:flex;flex-direction:column;gap:16px;margin:0 0 10px}
.plan-usage-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--text);margin-bottom:7px}
.plan-usage-row strong{font-variant-numeric:tabular-nums}
.plan-meter{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.plan-meter span{display:block;height:100%;background:var(--green);border-radius:999px}
.plan-meter.purple span{background:#6d5dfc}
.plan-meter.over span{background:#ff6b6b}
.plan-usage-note{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 4px}
.plan-divider{border:none;border-top:1px solid var(--line);margin:20px 0 18px}
.help{display:flex;gap:12px;align-items:center;color:#fff;padding:8px 6px}
.help small{color:#b8c7e6}
.main{min-width:0;display:flex;flex-direction:column;height:100vh}
.topbar{height:118px;flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px}
.topbar h1{font-size:28px;margin:0 0 6px}
.topbar p{margin:0;color:#475467}
.top-actions{display:flex;align-items:center;gap:14px}
/* Mobile sidebar drawer trigger — hidden on desktop, shown ≤800px inside
   .has-drawer (the tenant app shell). Kept OUTSIDE .top-actions so it never
   collides with the #notif-bell selector. */
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:20px;line-height:1;color:var(--text);cursor:pointer}
.nav-toggle:hover{background:var(--bg)}
/* Dimmer behind the open drawer; toggled to display:block ≤800px when open. */
.sidebar-backdrop{display:none}
.top-actions select,.filterbar select,.filterbar input{height:43px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 14px;color:#344054}
.ghost{height:43px;min-width:43px;border:1px solid var(--line);background:#fff;border-radius:10px;position:relative;cursor:pointer}
.badge{position:absolute;background:var(--red);color:#fff;border-radius:999px;font-size:11px;line-height:17px;height:17px;min-width:17px;top:-6px;right:-6px}
.user-chip{display:flex;gap:10px;align-items:center}
.user-chip>span{width:42px;height:42px;border-radius:50%;background:#667085;color:white;display:grid;place-items:center;font-weight:800}
.user-chip small{color:#667085}
/* Location switcher base (it now lives in the sidebar — see .sidebar-location
   above for the dark-rail look): a real <select> when multiple sites exist, a
   static label when there's exactly one, and nothing at all (:empty collapses)
   when none are configured. */
.location-switcher{display:flex;align-items:center}
.location-switcher:empty{display:none}
.location-static{display:inline-flex;align-items:center;height:43px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#344054;font-weight:600;white-space:nowrap}
/* Per-page "Working location" picker: a slim tinted bar above the tabs on
   single-location pages. Lets a grouped practice scope THIS page to one member
   while the top bar stays on "All". Renders no markup for a solo tenant. Tint +
   accent match .icon / .tab.active so it reads as part of the page chrome. */
.loc-scope-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 18px;padding:10px 14px;background:#eef2ff;border:1px solid var(--line);border-radius:11px}
.loc-scope-icon{font-size:15px;line-height:1}
.loc-scope-label{font-weight:700;font-size:13px;color:#3730a3}
.loc-scope-bar select{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font-weight:600;font-size:13px;cursor:pointer}
.loc-scope-hint{color:var(--muted);font-size:12px}
/* Tag on a shared group document shown within a single location's file list. */
.loc-all-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;vertical-align:middle}
.content{padding:28px 34px 36px;flex:1 1 auto;overflow-y:auto;min-height:0}
.tabs{display:flex;gap:28px;margin:-8px 0 22px;border-bottom:1px solid var(--line)}
.tab{padding:14px 2px;color:#344054;font-weight:600;cursor:pointer}
.tab.active{color:#4f46e5;border-bottom:2px solid #4f46e5}
.cards{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:16px;margin-bottom:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.metric{display:flex;gap:14px;align-items:center}
.icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:21px;background:#eef2ff;color:#4f46e5}
.icon.green{background:#e9f9f1;color:var(--green)}
.icon.orange{background:#fff5df;color:var(--orange)}
.icon.red{background:#ffecef;color:var(--red)}
.icon.teal{background:#e8faf7;color:var(--teal)}
.metric h3{font-size:26px;margin:2px 0}
.metric p{margin:0;color:#344054;font-size:13px}
.trend{font-size:12px;color:var(--green);margin-top:8px}
.trend.down{color:var(--red)}
.trend.muted{color:#98a2b3}
.empty-state{display:grid;place-items:center;min-height:120px;color:#98a2b3;font-size:14px;font-weight:600;text-align:center}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.grid.three{grid-template-columns:1.25fr 1fr .9fr}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.panel h2{font-size:18px;margin:0 0 16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.widget-action{display:flex;gap:8px;align-items:center}
.btn{height:42px;border:0;border-radius:9px;background:linear-gradient(90deg,#4f46e5,#6d5dfc);color:#fff;font-weight:800;padding:0 16px;cursor:pointer}
.btn.secondary{background:#fff;color:#344054;border:1px solid var(--line)}
/* Secondary button in an "open"/active state (e.g. a toggle whose panel is shown
   below): purple-tinted so it's clear which one is expanded. */
.btn.secondary.open{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe}
/* "View as" / "View as group": the primary action on each Workspaces/Mappings row,
   so lift them out of the plain-grey secondary crowd (Unlink, Reset) with a light-blue
   tint (theme --blue). Placed after .btn.secondary to win at equal specificity, but
   before .btn:disabled so the ghosting-in disabled state still greys out. */
.btn.view-as,.btn.view-as-group{
  background:color-mix(in srgb, var(--blue) 10%, #fff);
  color:var(--blue);
  border:1px solid color-mix(in srgb, var(--blue) 35%, #fff)}
.btn.view-as:hover,.btn.view-as-group:hover{
  background:color-mix(in srgb, var(--blue) 18%, #fff);
  border-color:color-mix(in srgb, var(--blue) 55%, #fff)}
.btn.danger{background:var(--red)}
/* Disabled buttons (e.g. self-row actions you can't perform on your own account):
   greyed out + not-allowed, overriding the primary gradient / secondary / danger
   fills. Placed after the variants so it wins at equal specificity. */
.btn:disabled,.btn[disabled]{background:#f1f2f4;color:#98a2b3;border:1px solid var(--line);cursor:not-allowed;opacity:.65;box-shadow:none}
.filterbar{display:flex;gap:12px;margin-bottom:16px;align-items:center}
.filterbar input{min-width:300px}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:middle}
.table th{color:#344054;background:#fafbff;font-weight:800}
.status{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}
.status.good{background:#e9f9f1;color:#087443}
.status.warn{background:#fff3e0;color:#b54708}
.status.bad{background:#ffecef;color:#b42318}
.status.info{background:#edf4ff;color:#175cd3}
.status.purple{background:#f0ecff;color:#5e3eca}
.status.test-tag{background:#fde6cf;color:#b45309}  /* test/demo workspace */
.mini-list{display:flex;flex-direction:column;gap:12px}
.mini-item{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px}
.mini-item:last-child{border-bottom:0}
.right-note{font-size:13px;color:#667085}
.chart{height:240px;background:linear-gradient(180deg,#fbfcff,#fff);border:1px dashed #d7dce8;border-radius:12px;padding:20px;position:relative}
.line{position:absolute;left:35px;right:30px;height:2px;background:#4f46e5;top:55%;transform:rotate(-5deg);box-shadow:60px -30px 0 #20b26b,120px 18px 0 #f59e0b,210px -42px 0 #6d5dfc}
.donut{width:174px;height:174px;border-radius:50%;background:conic-gradient(#20b26b 0 58%,#2563eb 58% 76%,#f59e0b 76% 88%,#ef4444 88% 100%);position:relative;margin:auto}
.donut:after{content:"";position:absolute;inset:38px;background:#fff;border-radius:50%}
/* Flex column (not grid): a grid put the old <br> in its own empty row, spreading
   the number and "Total" apart. Now they sit as one tight, centered stack. */
.donut-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800;z-index:2;text-align:center;line-height:1.15}
.donut-total{font-size:24px;font-variant-numeric:tabular-nums}
.donut-label small{font-size:12px;font-weight:700;color:#667085;text-transform:uppercase;letter-spacing:.04em}
/* Activity Overview bar chart — dependency-free, one STACKED column per bucket
   (calls + texts + emails). The stack grows from the bottom of .actbar-bar; the
   total rides just above it; the x-label sits beneath. The stack height is a % of
   the fixed chart height; each segment is a % of its bar's total (both set inline). */
.actchart{display:flex;align-items:flex-end;gap:10px;height:210px;padding-top:6px}
.actbar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;height:100%}
.actbar-bar{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.actbar-val{font-size:11px;font-weight:700;color:#344054;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:4px;min-height:11px}
.actbar-stack{width:70%;max-width:34px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:6px 6px 0 0;overflow:hidden;transition:height .3s ease}
.actseg{width:100%;flex-basis:0;min-height:0}
.actbar:hover .actbar-stack{filter:brightness(1.06) saturate(1.04)}
.actbar-label{font-size:11px;color:#667085;margin-top:8px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Legend shared by the activity chart (below the bars) and the donut list rows. */
.chart-legend{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.leg-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#667085}
.leg-lbl{display:inline-flex;align-items:center;gap:8px}
.leg-dot{box-sizing:border-box;width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
/* Interactive legend buttons: click a channel to show/hide it in the Activity chart. */
.leg-toggle{padding:3px 8px;border:0;border-radius:7px;background:none;font-family:inherit;cursor:pointer;transition:opacity .15s ease,background .15s ease;-webkit-appearance:none;appearance:none}
.leg-toggle:hover{background:rgba(16,24,40,.05)}
.leg-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.leg-toggle.is-off{opacity:.45}
.leg-toggle.is-off:hover{opacity:.7}
/* Shown when the window has activity but every data-bearing channel is toggled off. */
.actchart-note{height:210px;display:flex;align-items:center;justify-content:center;color:#667085;font-size:13px;text-align:center}
/* SVG donut (dashboard Channel Breakdown) — crisp vector ring, replaces the
   conic-gradient .donut for this widget so slice edges don't alias. Each .dseg is a
   hoverable stroked arc; the center label must let pointer events reach the ring. */
.svg-donut{position:relative;width:174px;height:174px;margin:auto}
.svg-donut .donut-svg-el{width:100%;height:100%;display:block}
.svg-donut .donut-label{pointer-events:none}
.svg-donut .track{stroke:var(--line)}
.svg-donut .dseg{transition:stroke-width .15s ease,opacity .15s ease;cursor:default}
.donut-svg-el:hover .dseg{opacity:.45}
.donut-svg-el .dseg:hover{opacity:1;stroke-width:7.4}
/* Floating chart tooltip (activity bars + donut slices). Positioned by the cursor. */
.chart-tip{position:fixed;z-index:1000;pointer-events:none;background:#1f2937;color:#fff;border-radius:10px;padding:9px 11px;font-size:12px;line-height:1.5;box-shadow:0 10px 28px rgba(16,24,40,.28);min-width:124px;max-width:220px}
.chart-tip .tip-title{font-weight:800;margin-bottom:5px}
.chart-tip .tip-row,.chart-tip .tip-total{display:flex;align-items:center;gap:8px}
.chart-tip .tip-total{margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.16)}
.chart-tip .tip-name{flex:1 1 auto;color:#e5e7eb}
.chart-tip .tip-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.chart-tip b{font-variant-numeric:tabular-nums;font-weight:800}
.split{display:grid;grid-template-columns:1fr 320px;gap:18px}
.side-panel{background:#fff;border-left:1px solid var(--line);padding:22px}
.avatar{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#b794f4);color:white;display:grid;place-items:center;font-size:26px;font-weight:800}
.upload-zone{height:260px;border:2px dashed #9aa7ff;border-radius:16px;background:#fbfcff;display:grid;place-items:center;text-align:center}
.upload-icon{font-size:58px;color:#4f46e5}
.settings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.setting-card{min-height:145px}
.conversation{height:430px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe;display:flex;flex-direction:column}
.messages{padding:20px;display:flex;flex-direction:column;gap:10px;overflow:auto}
/* Inbound = neutral grey hugging the left; outbound = blue hugging the right, each
   with a matching squared corner so the two sides read clearly apart. */
.bubble{align-self:flex-start;max-width:74%;padding:10px 14px;border-radius:14px 14px 14px 4px;background:#f2f4f7;color:#1d2939;font-size:14px;line-height:1.45}
.bubble.me{align-self:flex-end;background:#e0e9ff;border-radius:14px 14px 4px 14px}
.bubble-time{display:block;margin-top:5px;font-size:11px;color:#667085}
/* Centered day divider so the date isn't repeated on every bubble. */
.tx-day{align-self:center;margin:4px 0}
.tx-day span{font-size:12px;color:#667085;background:#eef1f6;padding:3px 12px;border-radius:999px}
.composer{margin-top:auto;border-top:1px solid var(--line);padding:14px;display:flex;gap:10px}
.composer input{flex:1;border:1px solid var(--line);border-radius:9px;padding:0 12px}
/* Read-only footer (combined "All locations" view): a quiet note + a centered,
   content-width action instead of a full-bleed bar. */
.composer.tx-readonly{flex-direction:column;align-items:center;gap:10px;text-align:center}
/* Text & Email — conversation thread cards (left list). Own layout (not the shared
   .mini-item) so a long SMS preview truncates to one clean line and the time stays
   pinned top-right beside the name instead of splitting across the wrapped preview. */
.tx-threads{display:flex;flex-direction:column;gap:2px}
.tx-thread{display:flex;flex-direction:column;gap:3px;cursor:pointer;padding:10px 12px;border:1px solid transparent;border-radius:10px;transition:background .12s,border-color .12s}
.tx-thread:hover{background:#f7f8fc}
.tx-thread.sel{background:#eef2ff;border-color:#dfe3fb}
.tx-thread-top{display:flex;align-items:baseline;gap:8px}
.tx-thread-idline{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1}
.tx-thread-name{font-weight:600;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-thread-top .status{flex:0 0 auto;padding:2px 7px;font-size:11px}
.tx-thread-time{flex:0 0 auto;font-size:12px;color:#98a2b3;white-space:nowrap;font-variant-numeric:tabular-nums}
.tx-thread-preview{font-size:13px;color:#475467;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-thread-preview.empty{color:#98a2b3}
.tx-thread-meta{font-size:12px;color:#98a2b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer{color:#667085;font-size:12px;margin-top:22px}
.callout{border:1px solid #b3cdfd;background:#eff6ff;border-radius:14px;padding:16px;margin-top:16px;color:#1849a9}
/* Temp-password row + small clipboard copy button (neutral at rest, blue on
   hover, green once copied). */
.temp-pw{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.temp-pw-code{font-size:15px}
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--muted);cursor:pointer}
.copy-btn:hover{border-color:var(--blue);color:var(--blue)}
.copy-btn.copied{border-color:var(--green);color:var(--green)}
.copy-btn svg{width:15px;height:15px}
.copy-ok{font-size:13px;font-weight:700;color:var(--green)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stack{display:flex;flex-direction:column;gap:12px}

/* ---- AI Receptionist status panel (Inbound › Overview) ----
   A modern property list (icon chip + label + value) paired with a presence
   card. Icon chips reuse the shared .icon tints; all color via tokens. */
.rx-status{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch}
.rx-stats{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.rx-stat{display:flex;align-items:center;gap:12px;padding:12px 14px}
.rx-stat + .rx-stat{border-top:1px solid var(--line)}
.rx-stat .icon{flex:0 0 auto}
.rx-stat-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.rx-stat-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rx-stat-value{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;word-break:break-word}
.rx-presence{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:18px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.rx-presence .icon{flex:0 0 auto}
.rx-presence-state{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--text)}
.rx-dot{width:9px;height:9px;border-radius:50%;position:relative;flex:0 0 auto}
.rx-dot.live{background:var(--green)}
.rx-dot.setup{background:var(--orange)}
.rx-dot.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:rxPulse 1.8s ease-out infinite}
.rx-presence p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;max-width:280px}
@keyframes rxPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.rx-dot.live::after{animation:none}}
@media(max-width:560px){.rx-status{grid-template-columns:1fr}}
.mock-phone{border:1px solid var(--line);border-radius:22px;padding:18px;background:#fff;max-width:360px;margin:auto;box-shadow:var(--shadow)}
.phone-screen{background:#f3f6fb;border-radius:18px;padding:16px;min-height:360px}
.script-box{background:#fbfcff;border:1px solid var(--line);padding:14px;border-radius:10px;color:#344054;line-height:1.5}
.kicker{text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:#667085;font-weight:800}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:#eef2ff;color:#4f46e5;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700}
.big-number{font-size:40px;font-weight:900;margin:4px 0}
.link{color:#4f46e5;font-weight:800;text-decoration:none}
.warning-strip{display:flex;gap:12px;align-items:center;background:#fff7ed;border:1px solid #fed7aa;border-radius:13px;padding:14px;color:#9a3412}
/* --- Auth (login page + forced password change) --- */
.auth-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(180deg,var(--navy),var(--navy2));padding:24px}
.auth-card{width:100%;max-width:404px;background:var(--card);border-radius:18px;padding:30px 30px 24px;box-shadow:0 24px 60px rgba(7,20,41,.45)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
/* On the dark sidebar the title's second word is light lavender; on the white
   auth card that's nearly invisible, so darken it to the brand purple here. */
.auth-brand .brand-title span{color:var(--purple)}
.auth-title{font-size:24px;margin:6px 0 2px}
.auth-sub{margin:0 0 18px;color:var(--muted);font-size:14px}
.auth-label{display:block;font-size:13px;font-weight:700;color:#344054;margin:12px 0 6px}
.auth-input{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px;font-size:15px;color:var(--text);background:#fff}
.auth-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.auth-submit{width:100%;height:46px;margin-top:20px;font-size:15px}
.auth-foot{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 0}
.auth-error{background:#ffecef;border:1px solid #ffc9d2;color:#b42318;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:6px}

/* --- Account chip + dropdown menu --- */
.top-actions{position:relative}
.user-chip-btn{cursor:pointer;padding:6px 8px;border-radius:12px;user-select:none}
.user-chip-btn:hover{background:#f2f4f8}
.user-menu-pop{position:absolute;top:calc(100% + 10px);right:0;width:268px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:60}
.user-menu-head{padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.user-menu-name{font-weight:800;font-size:15px}
.user-menu-meta{color:var(--muted);font-size:12px;margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-menu-list{display:flex;flex-direction:column;gap:2px}
.user-menu-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:10px;border-radius:9px;font-size:14px;font-weight:600;color:#344054;cursor:pointer}
.user-menu-item:hover{background:#f2f4f8}
.user-menu-item.danger{color:var(--red)}
.user-menu-item.danger:hover{background:#ffecef}
.user-menu-item .menu-sub{margin-left:auto;color:var(--muted);font-weight:600;font-size:12px}
.user-menu-sep{height:1px;background:var(--line);margin:6px 0}

/* --- Notifications bell dropdown (matches the account menu; OmniCare tokens) --- */
.notif-pop{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:60;overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.notif-head-title{font-weight:800;font-size:15px}
.notif-head-actions{display:flex;align-items:center;gap:2px}
.notif-readall{border:0;background:none;color:var(--purple);font-weight:700;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:7px}
.notif-readall:hover{background:#f2f4f8}
.notif-clearall{border:0;background:none;color:var(--muted);font-weight:700;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:7px}
.notif-clearall:hover{background:#fdecef;color:#b42318}
.notif-readall:disabled,.notif-clearall:disabled{opacity:.4;pointer-events:none}
.notif-list{max-height:420px;overflow-y:auto}
.notif-empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:13px}
.notif-item{display:flex;gap:11px;align-items:flex-start;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:#f7f8fb}
.notif-item.unread{background:#f5f4ff}
.notif-item.unread:hover{background:#efeefe}
.notif-item.unread::before{content:"";position:absolute;left:6px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--purple)}
.notif-ic{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:#edf4ff;border:1px solid #bcd5fb}
.notif-sev-info{background:#edf4ff;border-color:#bcd5fb}
.notif-sev-success{background:#e7f7ee;border-color:#abe0c2}
.notif-sev-warning{background:#fff4e6;border-color:#fed7aa}
.notif-sev-critical{background:#ffecef;border-color:#fdc9d2}
.notif-main{min-width:0;flex:1}
.notif-title{font-weight:700;font-size:13.5px;color:var(--text);line-height:1.3}
.notif-text{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.notif-time{color:#98a2b3;font-size:11px;margin-top:5px}
.notif-x{flex:0 0 auto;border:0;background:none;color:#98a2b3;font-size:18px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:7px;opacity:0;transition:opacity .1s}
.notif-item:hover .notif-x{opacity:1}
.notif-x:hover{background:#eceff3;color:#475467}

/* --- UI confirm modal (replaces window.confirm; shared tenant + platform) --- */
.oc-confirm-overlay{position:fixed;inset:0;z-index:200;background:rgba(7,20,41,.45);display:grid;place-items:center;padding:24px;animation:ocConfirmFade .12s ease-out}
.oc-confirm-box{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(7,20,41,.45);padding:24px}
.oc-confirm-title{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--text)}
.oc-confirm-msg{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.5}
.oc-confirm-actions{display:flex;justify-content:flex-end;gap:10px}
/* Optional opt-in checkbox inside a confirm dialog (e.g. "copy live data"). */
.oc-confirm-check{display:flex;gap:10px;align-items:flex-start;margin:-8px 0 22px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:14px;color:var(--text)}
.oc-confirm-check input{margin-top:2px;flex:none;width:16px;height:16px;cursor:pointer}
.oc-confirm-check-hint{display:block;margin-top:4px;color:var(--muted);font-size:12.5px;line-height:1.45}
.oc-confirm-check.is-disabled{cursor:default;opacity:.55}
.oc-confirm-check.is-disabled input{cursor:default}
/* Optional text input / dropdown inside a confirm dialog (e.g. a group name, or a
   workspace picker for Link Workspace). */
.oc-confirm-input{display:block;margin:0 0 16px}
.oc-confirm-input:first-of-type{margin-top:-8px}
.oc-confirm-input-label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--text)}
.oc-confirm-input input,.oc-confirm-input select{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 14px;color:var(--text);font-size:14px}
.oc-confirm-input input:focus,.oc-confirm-input select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
@keyframes ocConfirmFade{from{opacity:0}to{opacity:1}}

/* --- Role badge (tinted: light bg, dark text, thin same-color border) --- */
.role-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;background:#edf4ff;color:#175cd3;border:1px solid #bcd5fb}
.role-badge.admin{background:#f0ecff;color:#5e3eca;border-color:#d6caff}
/* Ghost = a RAB platform admin acting inside a tenant (amber, deliberately not the
   admin purple) so the operator always knows they're in someone else's workspace. */
.role-badge.ghost{background:#fff4e6;color:#b54708;border-color:#fed7aa}

/* --- Users page bits --- */
.online-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);vertical-align:middle}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn.sm{height:32px;padding:0 10px;font-size:12px;font-weight:700}

/* --- Audit log page --- */
.audit-sub{font-size:12px;color:var(--muted,#667085)}
.audit-flabel{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#475467}
.audit-flabel input{height:36px}
.audit-detail{margin-top:4px}
.audit-detail summary{cursor:pointer;font-size:12px;font-weight:600;color:#175cd3;list-style:none}
.audit-detail summary::-webkit-details-marker{display:none}
.audit-detail pre{margin:6px 0 0;padding:10px;background:#f7f8fb;border:1px solid #eaecf0;border-radius:8px;font-size:12px;white-space:pre-wrap;word-break:break-word}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:12px}
.pager-btns{display:flex;gap:8px}
/* Inline field-level diffs in the data-change audit (old → new per field). */
.audit-changes{display:flex;flex-direction:column;gap:4px}
.audit-diff{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:13px}
.audit-diff-k{font-weight:700;color:#475467;min-width:96px}
.audit-diff-arrow{color:#98a2b3}
.audit-diff .diff-old{color:#b42318;text-decoration:line-through}
.audit-diff .diff-new{color:#087443;font-weight:700}
/* Fixed column widths so the layout stays put when a row's Raw detail expands.
   The first four columns are pinned; Details (5th) absorbs the remaining width. */
#audit-panel .table{table-layout:fixed}
#audit-panel .table th:nth-child(1),#audit-panel .table td:nth-child(1){width:160px}
#audit-panel .table th:nth-child(2),#audit-panel .table td:nth-child(2){width:150px}
#audit-panel .table th:nth-child(3),#audit-panel .table td:nth-child(3){width:230px}
#audit-panel .table th:nth-child(4),#audit-panel .table td:nth-child(4){width:120px}
#audit-panel .table td{vertical-align:top;word-break:break-word}

/* ---- Patients page ---- */
.pt-table th.pt-sort{cursor:pointer;user-select:none;white-space:nowrap}
.pt-table th.pt-sort:hover{color:var(--purple)}
.pt-table th.pt-sort.active{color:var(--purple)}
.pt-table th.pt-sort:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.pt-table th .pt-sort-ind{display:inline-block;width:12px;margin-left:4px;font-size:10px;vertical-align:middle}
.pt-table tbody tr{cursor:pointer}
.pt-table tbody tr:hover{background:#fafbff}
.pt-table tbody tr.sel{background:#f0ecff}
.pt-table tbody tr.sel td{border-bottom-color:#e0d8ff}
/* Workspace chip in the combined "All locations" patient view (tinted badge). */
.pt-ws{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;
  background:#f0ecff;color:var(--purple);border:1px solid #e0d8ff;white-space:nowrap}

/* ---- Campaigns page ---- */
/* Generic sortable table header. Applied by helpers.js makeSortable() to every
   <table class="sortable"> app-wide (audit log, call logs, reports, users,
   uploads, knowledge, escalations, …), and used directly by Campaigns. */
table.sortable thead th{cursor:pointer}
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--purple)}
.th-sort.active{color:var(--purple)}
.th-sort:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.th-sort-ind{display:inline-block;width:12px;margin-left:4px;font-size:10px;vertical-align:middle}
#cm-list tbody tr{cursor:pointer}
#cm-list tbody tr:hover{background:#fafbff}
#cm-list tbody tr.sel{background:#f0ecff}
#cm-list tbody tr.sel td{border-bottom-color:#e0d8ff}
.cm-ch span{margin-right:2px}
.cm-chans{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.cm-chk{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.cm-chk input{width:auto;margin:0}
/* Dynamic audience builder (campaign targeting) */
.aud-label{font-size:12px;font-weight:700;color:#344054;margin-bottom:6px}
.aud-builder{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.aud-match{font-size:13px;font-weight:600;color:#344054;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aud-empty{margin:2px 0 4px}
.aud-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.aud-row select,.aud-row input{height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font-size:14px;color:var(--text);font-weight:500}
.aud-row select:focus,.aud-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.aud-field{min-width:160px}
.aud-op{min-width:140px}
.aud-vals{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap;min-width:160px}
.aud-vals .aud-v{flex:1;min-width:120px}
.aud-pre{color:var(--muted);font-weight:700;margin-right:-2px}
.aud-and{color:var(--muted);font-size:13px}
.aud-enum{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.aud-ck{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;cursor:pointer;color:#344054}
.aud-ck input{width:auto;height:auto;margin:0;padding:0;box-shadow:none}
.aud-rm{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.aud-rm:hover{border-color:#f0a0a0;color:#d64545;background:#fdf3f3}
.aud-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.aud-count{font-size:13px;font-weight:600;color:var(--text)}
@media(max-width:700px){.aud-field,.aud-op{min-width:0;flex:1}}
/* Campaign schedule builder */
.sched-builder{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.sched-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.sched-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#344054}
.sched-grid input{height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font-size:14px;color:var(--text);font-weight:500}
.sched-grid input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.sched-win{display:flex;align-items:center;gap:8px}
.sched-win input{flex:1;min-width:0}
.sched-cooldown{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:#344054}
.sched-cooldown input{width:80px;flex:0 0 auto}
.sched-days{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.sched-days-lbl{font-size:12px;font-weight:700;color:#344054}
.sched-legal{margin:12px 0 0;line-height:1.5}
@media(max-width:700px){.sched-grid{grid-template-columns:1fr}}
.pt-notes{white-space:pre-wrap}
.pt-form{margin-bottom:16px}
.pt-form-title{font-weight:800;font-size:15px;margin-bottom:12px}
.pt-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.pt-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#344054}
.pt-form-grid .pt-wide{grid-column:1 / -1}
.pt-form-grid input,.pt-form-grid select{height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font-size:14px;color:var(--text);font-weight:500}
.pt-form-grid input:focus,.pt-form-grid select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
@media(max-width:700px){.pt-form-grid{grid-template-columns:1fr}}

/* ---- Upload page ---- */
.upload-zone.drag{border-color:var(--blue);background:#f0f5ff}
.up-controls{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px}
.up-cat{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#344054}
.up-cat[hidden]{display:none}
.up-cat select{height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font-weight:600;color:var(--text)}
.up-actions{display:inline-flex;gap:12px;font-size:16px}
.up-actions a{text-decoration:none}
.up-actions a.danger-link{filter:grayscale(.1)}
/* Field mapping list (read-only view) */
.map-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.map-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.map-row:last-child{border-bottom:none}
.map-target{font-weight:700;color:#344054}.map-target em{color:var(--red);font-style:normal}
.map-arrow{color:#98a2b3}
.map-source{color:var(--text)}
/* Field mapping editor (request / RAB edit) */
.map-edit-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.map-edit-row{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#344054}
.map-edit-row em{color:var(--red);font-style:normal}
.map-edit-row input{height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font-weight:500;color:var(--text)}
.map-edit-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
/* Before/after diff */
.diff-table{margin-top:10px}
.diff-table td.diff-from{color:#b42318;text-decoration:line-through}
.diff-table td.diff-to{color:#087443;font-weight:700}
.req-card{margin-bottom:14px}
@media(max-width:700px){.map-edit-row{grid-template-columns:1fr}}

/* Little ⓘ info bubble (native title tooltip) */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:#cbd5e1;color:#fff;font-size:10px;font-weight:700;font-style:normal;line-height:1;cursor:help;
  margin-left:5px;vertical-align:middle;user-select:none}
.info-i:hover{background:var(--blue)}

/* Parse settings bar (delimiter + end-of-record) above the mapping sheet */
.map-settings{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin:4px 0 14px;padding:12px 14px;
  background:#fbfcff;border:1px solid var(--line);border-radius:10px}
.map-set{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#344054}
.map-set>span{display:inline-flex;align-items:center}
.map-set select,.map-set input{height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:0 9px;font-size:13px;font-weight:500;color:var(--text);min-width:150px}
.map-set select:focus,.map-set input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.map-set.hint-note{font-weight:500;color:#667085;max-width:280px;align-self:center}

/* Wide spreadsheet editor: one column per patient field, one editable cell row */
.map-sheet-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin-top:2px}
.map-sheet{border-collapse:separate;border-spacing:0;width:100%}
.map-sheet th{background:#f4f6fb;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:9px 11px;font-size:12px;font-weight:700;color:#344054;text-align:left;white-space:nowrap}
.map-sheet th em{color:var(--red);font-style:normal;margin-left:1px}
.map-sheet td{border-right:1px solid var(--line);padding:0}
.map-sheet th:last-child,.map-sheet td:last-child{border-right:none}
.map-sheet input{width:100%;min-width:160px;height:42px;border:0;background:#fff;padding:0 11px;
  font-size:13px;color:var(--text);box-sizing:border-box}
.map-sheet input:focus{outline:none;background:#f0f5ff;box-shadow:inset 0 0 0 2px var(--blue)}
.map-sheet input::placeholder{color:#b0b8c4}

/* Column-management controls in the RAB mapping editor (add/hide/delete). */
.map-sheet th .col-head{display:flex;align-items:center;gap:5px}
.col-tag{font-weight:700;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:#6b46d6;
  background:#efeafe;border:1px solid #d9ccfb;border-radius:5px;padding:1px 4px}
.col-ctrls{display:flex;gap:5px;margin-top:6px}
.col-ctrl{border:1px solid var(--line);background:#fff;color:#475467;border-radius:6px;
  padding:2px 7px;font-size:11px;font-weight:700;cursor:pointer;line-height:1.6}
.col-ctrl:hover{background:#f4f6fb;color:#1d2939}
.col-ctrl.danger{color:var(--red);border-color:#f3c6c6}
.col-ctrl.danger:hover{background:#fdeaea}
/* Hidden columns stay in the sheet but are greyed out in place. */
.col-tag.muted-tag{color:#667085;background:#eef1f6;border-color:#dde2ea}
.map-sheet th.col-hidden{background:#f0f1f4;color:#98a2b3}
.map-sheet th.col-hidden .col-head{opacity:.6}
.map-sheet td.col-hidden{background:#f6f7f9}
.map-sheet td.col-hidden input{background:#f6f7f9;color:#98a2b3;cursor:not-allowed}

/* Drag-to-reorder columns (mapping editor) — modern grip + ghost + glow line. */
.map-sheet th .col-head .col-name{display:inline-flex;align-items:center}
.col-grip{display:inline-flex;align-items:center;margin-right:5px;color:#c0c6d2;font-size:14px;
  line-height:1;letter-spacing:-1px;cursor:grab;transition:color .15s,transform .15s}
.map-sheet th.col-draggable{transition:background .15s}
.map-sheet th.col-draggable .col-head{cursor:grab;touch-action:none}
.map-sheet th.col-draggable:hover{background:#eef2fb}
.map-sheet th.col-draggable:hover .col-grip{color:var(--blue);transform:scale(1.12)}
.map-sheet [data-key].col-dragging{opacity:.32;transition:opacity .12s}
body.col-drag-active,body.col-drag-active *{cursor:grabbing !important;user-select:none}
.col-drag-ghost{position:fixed;z-index:300;pointer-events:none;display:inline-flex;align-items:center;gap:7px;
  transform:translate(12px,-50%) rotate(-2.5deg);background:var(--card);border:1px solid var(--blue);border-radius:10px;
  padding:7px 13px;font-size:12px;font-weight:800;color:var(--text);white-space:nowrap;
  box-shadow:0 14px 34px rgba(37,99,235,.30),0 0 0 4px rgba(37,99,235,.10)}
.col-drag-ghost .col-grip{color:var(--blue);margin:0}
.col-drop-line{position:fixed;z-index:299;width:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(180deg,var(--blue),var(--purple));
  box-shadow:0 0 0 1px rgba(37,99,235,.25),0 0 14px 2px rgba(109,77,252,.55);
  animation:colDropPulse .9s ease-in-out infinite}
.col-drop-line::before{content:"";position:absolute;top:-5px;left:50%;width:11px;height:11px;
  transform:translateX(-50%) rotate(45deg);border-radius:3px;background:var(--blue);
  box-shadow:0 0 10px 1px rgba(37,99,235,.7)}
@keyframes colDropPulse{0%,100%{opacity:.85}50%{opacity:1}}
.addcol-row{margin-top:14px}
.addcol-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.addcol-form input{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font-size:13px;min-width:240px}

/* Platform console tab strip (Overview / Workspaces). */
.plat-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.plat-tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;margin-bottom:-1px;
  font-weight:700;font-size:14px;color:#667085;cursor:pointer}
.plat-tab.active{color:#4f46e5;border-bottom-color:#4f46e5}
.plat-tab:hover{color:#344054}

/* "Viewing as a workspace" banner (platform admin impersonation, read-only). */
.imp-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(90deg,#3b2f8f,#5b46d6);color:#fff;padding:9px 22px;font-weight:700;font-size:14px;flex:0 0 auto}
.imp-banner .imp-msg{display:flex;align-items:center;gap:8px}
.imp-banner .imp-msg b{font-weight:800}
.imp-banner .imp-actions{display:flex;align-items:center;gap:10px}
.imp-banner .imp-switch{height:32px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);
  color:#fff;border-radius:8px;padding:0 10px;font-weight:700;cursor:pointer;max-width:220px}
.imp-banner .imp-switch option{color:#101828;background:#fff} /* readable in the OS dropdown */
.imp-banner .imp-exit{height:32px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);
  color:#fff;border-radius:8px;padding:0 14px;font-weight:800;cursor:pointer}
.imp-banner .imp-exit:hover{background:rgba(255,255,255,.22)}

/* Test-workspace banner — shown to a test tenant's OWN users (amber, distinct
   from the purple ghost banner). Hosts the Testing Center on the right. */
.test-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(90deg,#b45309,#ea7a0c);color:#fff;padding:9px 22px;font-weight:700;font-size:14px;flex:0 0 auto}
.test-banner .test-msg{display:flex;align-items:center;gap:8px}
.test-banner .test-msg b{font-weight:800}
.test-banner .test-actions{display:flex;align-items:center;gap:10px}

/* "Test / demo workspace" checkbox in the new-workspace form. The box sits in a
   .filterbar, so it inherits the global `.filterbar input` sizing (height:43px,
   padding, min-width:300px) meant for text inputs — which blows the checkbox up
   and shoves the label far to the right. Reset it to a real checkbox here (higher
   specificity than `.filterbar input`, so this wins). */
.nt-test-opt{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);white-space:nowrap}
.nt-test-opt input[type=checkbox]{width:16px;height:16px;min-width:0;margin:0;padding:0;accent-color:var(--purple);cursor:pointer}

/* Linked workspaces (named groups) in the RAB console: a group header row above its
   member workspace rows. */
.table tr.grp-head td{background:#f4f2ff;border-top:2px solid rgba(109,77,252,.2)}
.grp-name{font-weight:800;color:var(--text);font-size:14px}
.table tr.loc-member td{background:#fbfcfe}
.loc-branch{color:var(--muted);margin-right:2px}
.loc-tag{display:inline-flex;align-items:center;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;background:rgba(109,77,252,.10);color:var(--purple);border:1px solid rgba(109,77,252,.25);margin-left:4px}

/* Group vs. individual mapping scope chip (Mappings tree). Neutral = inherits the
   group mapping; purple = this location holds its own override. */
.map-scope-chip{display:inline-flex;align-items:center;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;
  background:color-mix(in srgb, var(--muted) 12%, transparent);color:var(--muted);
  border:1px solid color-mix(in srgb, var(--muted) 30%, transparent)}
.map-scope-chip.is-individual{background:color-mix(in srgb, var(--purple) 12%, transparent);color:var(--purple);
  border-color:color-mix(in srgb, var(--purple) 30%, transparent)}

/* Group ⟷ Individual toggle slider (per-location mapping override). Visually-hidden
   checkbox drives an accessible track+knob; ON = purple. */
.oc-switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;vertical-align:middle;margin-right:8px;user-select:none}
.oc-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.oc-switch-track{position:relative;width:34px;height:19px;border-radius:999px;flex:none;
  background:var(--line);border:1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  transition:background .15s ease,border-color .15s ease}
.oc-switch-knob{position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(16,24,40,.28);transition:transform .15s ease}
.oc-switch input:checked + .oc-switch-track{background:var(--purple);border-color:var(--purple)}
.oc-switch input:checked + .oc-switch-track .oc-switch-knob{transform:translateX(15px)}
.oc-switch input:focus-visible + .oc-switch-track{box-shadow:0 0 0 3px color-mix(in srgb, var(--purple) 35%, transparent)}
.oc-switch-label{font-size:12px;font-weight:700;color:var(--muted);min-width:64px;text-align:left}
.oc-switch input:checked ~ .oc-switch-label{color:var(--purple)}

/* Testing Center — RAB-staff dev control inside the ghost banner. The button
   matches the banner's translucent controls; the dropdown is a normal white
   card (so its forms read clearly against the purple bar). */
.imp-test-wrap{position:relative;display:flex;align-items:center}
.imp-test{height:32px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);
  color:#fff;border-radius:8px;padding:0 12px;font-weight:800;cursor:pointer}
.imp-test:hover{background:rgba(255,255,255,.22)}
.imp-test-pop{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:72vh;overflow:auto;
  background:var(--card,#fff);color:var(--text,#101828);border:1px solid var(--line,#e5e7eb);
  border-radius:12px;box-shadow:var(--shadow,0 18px 50px rgba(16,24,40,.18));z-index:1200;font-size:14px}
.imp-test-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:800}
.imp-test-back{border:1px solid var(--line);background:#fff;border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:15px;line-height:1}
.imp-test-list{display:flex;flex-direction:column;padding:6px}
.imp-test-item{display:flex;align-items:flex-start;gap:10px;text-align:left;width:100%;
  border:0;background:transparent;border-radius:8px;padding:9px 10px;cursor:pointer}
.imp-test-item:hover{background:var(--bg,#f6f7fb)}
.imp-test-ic{font-size:18px;line-height:1.2}
.imp-test-meta{display:flex;flex-direction:column;gap:2px}
.imp-test-meta b{font-weight:800}
.imp-test-meta small{color:var(--muted,#667085)}
.imp-test-note{padding:8px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.imp-test-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.imp-test-desc{margin:0;color:var(--muted);font-size:13px}
.imp-test-field{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700}
.imp-test-field input,.imp-test-field select{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-weight:500;background:#fff}
.imp-test-run{height:38px;border:0;border-radius:8px;background:var(--purple,#6d4dfc);color:#fff;font-weight:800;cursor:pointer;margin-top:2px}
.imp-test-run:disabled{opacity:.7;cursor:default}
.imp-test-result{border-radius:8px;padding:8px 10px;font-size:13px;font-weight:700}
.imp-test-result.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.imp-test-result.err{background:#fef3f2;color:#b42318;border:1px solid #fecdca}

/* AI Receptionist — config forms, capability toggles, business-hours table. */
.rx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rx-grid.one{grid-template-columns:1fr}
.rx-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#344054}
.rx-grid label.full{grid-column:1/-1}
.rx-grid input,.rx-grid select,.rx-grid textarea{border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:10px 12px;font-size:14px;color:var(--text);font-weight:500;font-family:inherit}
.rx-grid input:focus,.rx-grid select:focus,.rx-grid textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.rx-grid textarea{min-height:84px;resize:vertical;line-height:1.5}
.rx-grid input:disabled,.rx-grid select:disabled,.rx-grid textarea:disabled{background:#f6f7f9;color:#98a2b3;cursor:not-allowed}
.rx-grid .right-note code{background:#eef1f7;border-radius:4px;padding:1px 5px;font-size:12px}
.rx-caps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.rx-cap{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-weight:600;font-size:14px;color:#344054;cursor:pointer}
.rx-cap input{width:17px;height:17px;accent-color:#4f46e5;cursor:pointer}
.rx-hours{width:100%;border-collapse:collapse;max-width:520px}
.rx-hours th{text-align:left;font-size:12px;font-weight:700;color:#667085;padding:6px 10px}
.rx-hours td{padding:8px 10px;border-top:1px solid var(--line);font-size:14px}
.rx-hours td.day label{display:flex;align-items:center;gap:9px;font-weight:700;color:#344054;cursor:pointer}
.rx-hours td.day input{width:16px;height:16px;accent-color:#4f46e5;cursor:pointer}
.rx-hours input[type=time]{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 8px;color:var(--text);font-weight:500}
.rx-hours input:disabled{background:#f6f7f9;color:#98a2b3}
.rx-save-row{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.rx-saved{color:var(--green);font-weight:700;font-size:13px}
.rx-err{margin:0}
@media(max-width:700px){.rx-grid,.rx-caps{grid-template-columns:1fr}}

/* Top-bar "?" Help Center button — same ghost shell as the bell, bolder glyph. */
.help-btn{font-size:20px;font-weight:800;line-height:1;color:#475467}
.help-btn:hover{color:var(--purple);border-color:var(--purple)}

/* Help Center page */
.help-areas{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.help-area{display:flex;gap:11px;align-items:flex-start}
.help-area-ic{font-size:17px;line-height:1.35;width:22px;text-align:center;flex:0 0 auto}
.help-area-name{font-weight:700;font-size:14px;color:var(--text)}
.help-area-desc{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.help-tasks{display:flex;flex-direction:column}
.help-task{padding:14px 0;border-bottom:1px solid var(--line)}
.help-task:first-child{padding-top:0}
.help-task:last-child{border-bottom:0;padding-bottom:0}
.help-task-t{font-weight:700;font-size:14.5px;color:var(--text);margin-bottom:4px}
.help-task-b{font-size:13px;color:var(--muted);line-height:1.55}
.help-task-b strong{color:#344054}
.help-support .btn{width:100%}
.help-support-note{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:8px}
.help-support-t{font-weight:700;font-size:14px;color:var(--text)}
.help-support hr{border:none;border-top:1px solid var(--line);margin:16px 0}

/* ---- Custom Report builder (Reports › Custom Reports) ----------------------
   Reuses the audience-builder (.aud-*) filter row + .pt-form-grid form styles;
   these are the pieces unique to the report builder. */
.rb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rb-head h2{margin:0}
.rb-list-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rb-sec{margin:0 0 18px}
.rb-sec-label{font-size:12px;font-weight:700;color:#344054;margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.rb-sec-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);margin-left:6px}
.rb-picker{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rb-picker select{height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font-size:14px;color:var(--text);font-weight:500;min-width:220px}
.rb-picker select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.rb-cols{display:flex;flex-direction:column;gap:8px}
.rb-col-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px 10px}
.rb-col-grip{color:#c0c6d2;font-size:13px;cursor:default;flex:0 0 auto}
.rb-col-name{flex:1;font-weight:600;font-size:14px;color:var(--text)}
.rb-col-tag{font-size:11px;font-weight:700;color:#4f46e5;background:#eef2ff;border-radius:6px;padding:2px 7px;flex:0 0 auto}
.rb-col-row select{height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 10px;font-size:13px;color:var(--text);font-weight:600;flex:0 0 auto}
.rb-col-row select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.rb-chips{display:flex;gap:8px;flex-wrap:wrap}
.rb-chip{display:inline-flex;align-items:center;gap:7px;background:#eef2ff;color:#4f46e5;border-radius:999px;padding:6px 8px 6px 12px;font-size:12px;font-weight:700}
.rb-chip button{border:0;background:rgba(79,70,229,.16);color:#4f46e5;width:18px;height:18px;border-radius:999px;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.rb-chip button:hover{background:#4f46e5;color:#fff}
.rb-datewrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rb-datewrap select,.rb-datewrap input{height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font-size:14px;color:var(--text);font-weight:500}
.rb-datewrap select:focus,.rb-datewrap input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.rb-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.rb-foot .rb-spacer{flex:1}
.rb-err{color:#b42318;font-weight:600;font-size:13px;background:#fef3f2;border:1px solid #fecdc9;border-radius:9px;padding:9px 12px;margin:0 0 12px}
.rb-result-note{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.rb-num{text-align:right;font-variant-numeric:tabular-nums}
.rb-vis-badge{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;border:1px solid transparent}
.rb-vis-private{background:#f2f4f7;color:#475467;border-color:#e6e9f0}
.rb-vis-shared{background:#eafaf1;color:#12805c;border-color:#bfe9d3}
@media(max-width:700px){.rb-picker select,.rb-datewrap select{min-width:0;flex:1}}

@media(max-width:1200px){.cards{grid-template-columns:repeat(3,1fr)}.grid,.grid.three,.split,.two-col{grid-template-columns:1fr}.settings-grid{grid-template-columns:repeat(2,1fr)}.help-areas{grid-template-columns:1fr}}
@media(max-width:800px){
  /* Generic reflow — used by the platform console (no drawer): the sidebar
     stacks above the content and the topbar goes vertical. */
  .app-shell{grid-template-columns:1fr;height:auto;overflow:visible}
  .sidebar{position:relative;height:auto;overflow:visible}
  .sidebar #nav{overflow:visible}
  .main{height:auto}
  .topbar{height:auto;padding:20px;align-items:flex-start;gap:20px;flex-direction:column}
  .cards{grid-template-columns:1fr}
  .content{padding:20px;overflow:visible}
  .filterbar{flex-wrap:wrap}
  .filterbar input{min-width:100%}

  /* Wide data tables (Patients, Call Logs, Audit, …) scroll inside their own
     box on a phone instead of forcing the whole page wider than the screen. */
  .content table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* iOS Safari zooms the page whenever a focused field is under 16px. Keep form
     controls at 16px on touch layouts so tapping a field never jumps the view. */
  input,select,textarea{font-size:16px}

  /* Tenant app shell (.has-drawer): instead of stacking, the sidebar becomes an
     off-canvas drawer opened by the top-bar hamburger. Higher-specificity rules
     below override the generic reflow above for this shell only. */
  .has-drawer .nav-toggle{display:inline-flex}
  /* padding-top/right honour the notch/status bar when installed as a PWA. */
  .has-drawer .topbar{flex-direction:row;align-items:center;justify-content:flex-start;height:auto;gap:12px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));padding-right:max(16px,env(safe-area-inset-right))}
  .has-drawer .topbar h1{font-size:20px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .has-drawer .topbar>div{min-width:0}
  .has-drawer .top-actions{margin-left:auto;gap:8px;flex:0 0 auto}
  .has-drawer #page-subtitle{display:none}
  /* Keep clear of the home indicator / landscape notch inside the scroll area. */
  .has-drawer .content{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(20px,calc(env(safe-area-inset-bottom) + 20px))}
  .has-drawer .sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;width:282px;max-width:85vw;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;z-index:1000;box-shadow:0 0 40px rgba(7,20,41,.35);padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .has-drawer .sidebar.open{transform:translateX(0)}
  .has-drawer .sidebar-backdrop.open{display:block;position:fixed;inset:0;background:rgba(7,20,41,.5);z-index:999}
}
/* Very small phones: keep the top bar to one tidy row by dropping the name/role
   text next to the avatar (the avatar itself stays, and opens the user menu). */
@media(max-width:560px){
  .has-drawer .user-chip>div{display:none}
  .has-drawer .topbar h1{font-size:18px}
}