/* ══════════════════════════════════════════════════════════════════════════
   CareOS — App Shell  ·  CAREOS-APP-SHELL-DESIGN-SYSTEM-FOUNDATION-001
   The one shared application frame: sidebar rail, top bar, page header,
   content region, mobile drawer, and the single responsive model.
   Chrome markup is injected by shared/appShell.js — pages never hand-roll it.
   Requires shared/designTokens.css. Presentation only.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--cx-canvas);
    color: var(--cx-text);
    font-family: var(--cx-font);
    font-size: var(--cx-fs-body);
    line-height: var(--cx-lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── APP FRAME ───────────────────────────────────────────────────────────── */
.cx-app { display: flex; min-height: 100vh; background: var(--cx-canvas); }

.cx-main {
    flex: 1 1 auto;
    min-width: 0;                 /* lets wide tables scroll, not push the layout */
    margin-left: var(--cx-sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--cx-motion-standard);
}
.cx-app[data-rail="1"] .cx-main { margin-left: var(--cx-sidebar-rail-w); }

.cx-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--cx-content-max);
    margin: 0 auto;
    padding: var(--cx-space-6) var(--cx-space-7);
    min-width: 0;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.cx-sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--cx-sidebar-w);
    height: 100vh;
    background: var(--cx-nav-bg);
    display: flex; flex-direction: column;
    z-index: var(--cx-z-sidebar);
    overflow: hidden;
    transition: width var(--cx-motion-standard), transform var(--cx-motion-standard);
}
.cx-app[data-rail="1"] .cx-sidebar { width: var(--cx-sidebar-rail-w); }

.cx-sidebar__brand {
    display: flex; align-items: center; gap: var(--cx-space-3);
    padding: var(--cx-space-5) var(--cx-space-5) var(--cx-space-4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    min-height: var(--cx-topbar-h);
}
.cx-sidebar__logo {
    width: 34px; height: 34px; flex-shrink: 0;
    background: var(--cx-action);
    border-radius: var(--cx-radius-md);
    display: flex; align-items: center; justify-content: center;
}
.cx-sidebar__brandtext { min-width: 0; }
.cx-sidebar__name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.cx-sidebar__tagline { font-size: 11px; color: var(--cx-nav-section); white-space: nowrap; }
.cx-app[data-rail="1"] .cx-sidebar__brandtext { display: none; }

.cx-sidebar__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--cx-space-3) var(--cx-space-3) var(--cx-space-5); }
.cx-sidebar__scroll::-webkit-scrollbar { width: 8px; }
.cx-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }

.cx-navsection { margin-top: var(--cx-space-4); }
.cx-navsection:first-child { margin-top: var(--cx-space-1); }
.cx-navsection__label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--cx-nav-section);
    padding: var(--cx-space-2) var(--cx-space-3) var(--cx-space-1);
}
.cx-app[data-rail="1"] .cx-navsection__label { text-align: center; padding-left: 0; padding-right: 0; font-size: 8px; }

/* CAREOS-CLINICIAN-NAVIGATION-SIMPLIFICATION-001 — primary group emphasis + collapsible secondary groups */
.cx-navsection--primary { margin-top: var(--cx-space-1); }
.cx-navsection__toggle {
    display: flex; align-items: center; gap: var(--cx-space-2);
    width: 100%; border: none; background: transparent; cursor: pointer; text-align: left;
    padding: var(--cx-space-2) var(--cx-space-3) var(--cx-space-1);
}
.cx-navsection__toggle .cx-navsection__label { padding: 0; flex: 1; }
.cx-navsection__chev { display: inline-flex; opacity: 0.6; transition: transform var(--cx-motion-fast); }
.cx-navsection__chev svg { width: 14px; height: 14px; }
.cx-navsection--collapsible:not(.is-collapsed) .cx-navsection__chev { transform: rotate(180deg); }
.cx-navsection__toggle:hover .cx-navsection__label,
.cx-navsection__toggle:hover .cx-navsection__chev { opacity: 1; color: #fff; }
.cx-navsection.is-collapsed .cx-navsection__items { display: none; }
.cx-app[data-rail="1"] .cx-navsection__chev { display: none; }
.cx-app[data-rail="1"] .cx-navsection__toggle { justify-content: center; padding-left: 0; padding-right: 0; }

.cx-navitem {
    display: flex; align-items: center; gap: var(--cx-space-3);
    padding: 9px var(--cx-space-3);
    margin-bottom: 1px;
    border-radius: var(--cx-radius-md);
    color: var(--cx-nav-text);
    text-decoration: none;
    font-size: 13.5px; font-weight: 450;
    cursor: pointer; border: none; background: transparent; width: 100%; text-align: left;
    transition: background var(--cx-motion-fast), color var(--cx-motion-fast);
    position: relative;
}
.cx-navitem:hover { background: var(--cx-nav-hover); color: #fff; }
.cx-navitem.is-active { background: var(--cx-nav-active); color: var(--cx-nav-text-active); font-weight: 550; }
.cx-navitem.is-active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    background: var(--cx-nav-icon-active); border-radius: 0 3px 3px 0;
}
.cx-navitem__icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; opacity: 0.7; }
.cx-navitem__icon svg { width: 18px; height: 18px; }
.cx-navitem:hover .cx-navitem__icon, .cx-navitem.is-active .cx-navitem__icon { opacity: 1; }
.cx-navitem.is-active .cx-navitem__icon svg { color: var(--cx-nav-icon-active); }
.cx-navitem__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-navitem__count {
    font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--cx-radius-pill);
    background: var(--cx-warning); color: #fff; flex-shrink: 0;
}
/* CAREOS-FINAL-PILOT-POLISH-001 — a demonstration-module marker, not a second word in the label.
   The uppercase text chip fused into the destination name ("CoordinatorSynthetic"); the meaning now
   lives in the item's accessible name and tooltip, and the visual marker is a single dot. Kept in
   the same class so the rail-collapse rules below continue to apply unchanged. */
.cx-navitem__tag {
    font-size: 9px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.08); color: var(--cx-nav-text); flex-shrink: 0;
}
.cx-navitem__tag--dot {
    width: 6px; height: 6px; padding: 0; border-radius: 50%;
    background: var(--cx-nav-text); opacity: 0.45; margin-left: auto; align-self: center;
}
.cx-navitem:hover .cx-navitem__tag--dot,
.cx-navitem.is-active .cx-navitem__tag--dot { opacity: 0.8; }
.cx-navitem.is-disabled { opacity: 0.45; cursor: not-allowed; }
.cx-navitem.is-disabled:hover { background: transparent; color: var(--cx-nav-text); }
.cx-app[data-rail="1"] .cx-navitem { justify-content: center; padding: 10px 0; }
.cx-app[data-rail="1"] .cx-navitem__label,
.cx-app[data-rail="1"] .cx-navitem__count,
.cx-app[data-rail="1"] .cx-navitem__tag { display: none; }

.cx-navnote {
    font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--cx-nav-section); padding: 0 var(--cx-space-3) var(--cx-space-1);
}
.cx-app[data-rail="1"] .cx-navnote { display: none; }

/* Sidebar footer — user identity + logout */
.cx-sidebar__footer { flex-shrink: 0; padding: var(--cx-space-3); border-top: 1px solid rgba(255,255,255,0.06); }
.cx-userchip {
    display: flex; align-items: center; gap: var(--cx-space-3);
    padding: var(--cx-space-2) var(--cx-space-3); border-radius: var(--cx-radius-md);
    background: transparent; border: none; width: 100%; cursor: pointer; text-align: left;
    transition: background var(--cx-motion-fast);
}
.cx-userchip:hover { background: var(--cx-nav-hover); }
.cx-userchip__info { flex: 1; min-width: 0; }
.cx-userchip__name { font-size: 12.5px; font-weight: 550; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-userchip__role { font-size: 11px; color: var(--cx-nav-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-app[data-rail="1"] .cx-userchip__info, .cx-app[data-rail="1"] .cx-userchip__chev { display: none; }
.cx-userchip__chev { color: var(--cx-nav-text); flex-shrink: 0; }

/* ── TOPBAR ──────────────────────────────────────────────────────────────── */
.cx-topbar {
    position: sticky; top: 0; z-index: var(--cx-z-sticky);
    height: var(--cx-topbar-h);
    display: flex; align-items: center; gap: var(--cx-space-4);
    padding: 0 var(--cx-space-7);
    background: var(--cx-surface);
    border-bottom: 1px solid var(--cx-border);
}
.cx-topbar__left { display: flex; align-items: center; gap: var(--cx-space-3); min-width: 0; }
.cx-topbar__center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.cx-topbar__right { display: flex; align-items: center; gap: var(--cx-space-2); flex-shrink: 0; }
.cx-topbar__divider { width: 1px; height: 20px; background: var(--cx-border); flex-shrink: 0; }

.cx-railtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--cx-radius-md);
    border: 1px solid var(--cx-border); background: var(--cx-surface); color: var(--cx-text-secondary);
    cursor: pointer; flex-shrink: 0;
}
.cx-railtoggle:hover { background: var(--cx-surface-hover); color: var(--cx-text); }

/* Breadcrumb */
.cx-breadcrumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; }
.cx-breadcrumb__link { color: var(--cx-text-muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.cx-breadcrumb__link:hover { color: var(--cx-action); text-decoration: underline; }
.cx-breadcrumb__sep { color: var(--cx-text-faint); }
.cx-breadcrumb__current { color: var(--cx-text-secondary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }

/* Tenant + environment chips in topbar */
.cx-tenantbadge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--cx-radius-pill);
    font-size: 12px; font-weight: 550; max-width: 220px;
    background: var(--cx-success-soft); color: var(--cx-success-ink); border: 1px solid var(--cx-success);
}
.cx-tenantbadge.is-demo { background: var(--cx-warning-soft); color: var(--cx-warning-ink); border-color: var(--cx-warning); }
.cx-tenantbadge__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-tenantbadge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.cx-iconbtn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--cx-radius-md);
    border: 1px solid var(--cx-border); background: var(--cx-surface); color: var(--cx-text-secondary);
    cursor: pointer; transition: background var(--cx-motion-fast), color var(--cx-motion-fast);
}
.cx-iconbtn:hover { background: var(--cx-surface-hover); color: var(--cx-text); }
.cx-iconbtn__dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--cx-danger); border: 2px solid var(--cx-surface); }

/* Account menu (dropdown) */
.cx-accountmenu { position: relative; }
.cx-accountbtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px; border-radius: var(--cx-radius-pill);
    border: 1px solid var(--cx-border); background: var(--cx-surface); cursor: pointer;
}
.cx-accountbtn:hover { background: var(--cx-surface-hover); }
.cx-accountbtn__name { font-size: 12.5px; font-weight: 550; color: var(--cx-text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
    background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg);
    box-shadow: var(--cx-shadow-raised); padding: 6px; z-index: var(--cx-z-dropdown);
}
.cx-menu[hidden] { display: none; }
.cx-menu__header { padding: 8px 10px; border-bottom: 1px solid var(--cx-border-subtle); margin-bottom: 4px; }
.cx-menu__name { font-size: 13px; font-weight: 600; color: var(--cx-text); }
.cx-menu__email { font-size: 11.5px; color: var(--cx-text-muted); overflow: hidden; text-overflow: ellipsis; }
.cx-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border-radius: var(--cx-radius-sm);
    background: transparent; border: none; cursor: pointer; text-align: left;
    font-size: 13px; color: var(--cx-text-secondary); text-decoration: none;
}
.cx-menu__item:hover { background: var(--cx-surface-hover); color: var(--cx-text); }
.cx-menu__item.is-danger { color: var(--cx-danger-ink); }
.cx-menu__sep { height: 1px; background: var(--cx-border-subtle); margin: 4px 0; }

/* ── PAGE HEADER (static, in content — owns the one <h1>) ─────────────────── */
.cx-page-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cx-space-4);
    margin-bottom: var(--cx-space-6); flex-wrap: wrap;
}
.cx-page-header__titles { min-width: 0; }
.cx-page-title {
    margin: 0; font-size: var(--cx-fs-h1); line-height: var(--cx-lh-h1); font-weight: var(--cx-fw-h1);
    color: var(--cx-text); letter-spacing: -0.3px;
}
.cx-page-subtitle { margin: 4px 0 0; font-size: var(--cx-fs-sm); color: var(--cx-text-muted); }
.cx-page-header__actions { display: flex; align-items: center; gap: var(--cx-space-2); flex-shrink: 0; flex-wrap: wrap; }

/* ── MOBILE DRAWER CHROME ────────────────────────────────────────────────── */
.cx-hamburger {
    display: none; position: fixed; top: 12px; left: 12px; z-index: var(--cx-z-hamburger);
    width: 44px; height: 44px; border-radius: var(--cx-radius-md);
    background: var(--cx-nav-bg); border: none; color: #fff; cursor: pointer;
    align-items: center; justify-content: center;
}
.cx-scrim {
    display: none; position: fixed; inset: 0; background: rgba(8,15,26,0.55);
    z-index: var(--cx-z-overlay);
}
.cx-scrim.is-open { display: block; }

/* ══ RESPONSIVE — one model ═══════════════════════════════════════════════ */
/* Wide desktop */
@media (min-width: 1441px) { .cx-content { padding: var(--cx-space-7) var(--cx-space-9); } }

/* Desktop → tablet: tighter gutters, optional rail */
@media (max-width: 1200px) {
    .cx-content { padding: var(--cx-space-5) var(--cx-space-6); }
    .cx-topbar { padding: 0 var(--cx-space-5); }
}

/* Tablet & below: sidebar becomes an off-canvas drawer */
@media (max-width: 900px) {
    .cx-hamburger { display: inline-flex; }
    .cx-main { margin-left: 0 !important; }
    .cx-sidebar { transform: translateX(-100%); box-shadow: var(--cx-shadow-modal); }
    .cx-sidebar.is-open { transform: translateX(0); }
    /* Rail collapse NEVER applies inside the mobile drawer — every item shows icon + text
       label (fixes the icon-only mobile nav regression, F5), even if the user collapsed the
       rail on desktop (persisted data-rail="1"). */
    .cx-app[data-rail="1"] .cx-sidebar { width: var(--cx-sidebar-w); }
    .cx-app[data-rail="1"] .cx-navitem { justify-content: flex-start; padding: 9px var(--cx-space-3); }
    .cx-app[data-rail="1"] .cx-navitem__label { display: block; }
    .cx-app[data-rail="1"] .cx-navitem__count,
    .cx-app[data-rail="1"] .cx-navitem__tag { display: inline-flex; }
    .cx-app[data-rail="1"] .cx-navsection__label { text-align: left; padding-left: var(--cx-space-3); padding-right: var(--cx-space-3); font-size: 10px; }
    .cx-app[data-rail="1"] .cx-navnote { display: block; }
    .cx-app[data-rail="1"] .cx-sidebar__brandtext { display: block; }
    .cx-app[data-rail="1"] .cx-userchip__info { display: block; }
    .cx-app[data-rail="1"] .cx-userchip__chev { display: inline-flex; }
    .cx-topbar { padding: 0 var(--cx-space-4) 0 var(--cx-space-8); }
    .cx-railtoggle { display: none; }
    .cx-content { padding: var(--cx-space-5) var(--cx-space-4); }
}

/* Phone: stack topbar controls, hide non-essential chrome */
@media (max-width: 600px) {
    .cx-content { padding: var(--cx-space-4) var(--cx-space-3); }
    .cx-topbar__center { display: none; }           /* search moves into content on phones */
    .cx-breadcrumb .cx-breadcrumb__link { display: none; }
    .cx-breadcrumb .cx-breadcrumb__sep { display: none; }
    .cx-accountbtn__name { display: none; }
    .cx-tenantbadge { max-width: 120px; }
    .cx-page-header { margin-bottom: var(--cx-space-5); }
    .cx-page-header__actions { width: 100%; }
    .cx-page-header__actions > * { flex: 1 1 auto; }
}