/* ChekHealth 2026 application shell (navigation artboard 12): header row, menu, command search, account menu,
   workspace tabs, status bar. Loaded after app.css and modern.css, whose shell rules it supersedes. */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.app-shell { display: flex; flex-direction: column; height: 100dvh; background: var(--ck-canvas); }
.app-header { background: var(--ck-surface); border-bottom: 1px solid var(--ck-border); box-shadow: none; }

/* ---------- Header row ---------- */
.app-header-top { display: flex; align-items: center; gap: var(--ck-space-3); min-height: 52px; padding: 0 var(--ck-space-4); border-bottom: 0; }
.app-header-top .brand-wordmark { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; color: var(--ck-primary); }
.app-header-top .brand-wordmark > span { color: var(--ck-primary); font-weight: 750; }

/* ---------- Menu ----------
   Each top menu opens one panel with its sections side by side as columns (js/menubar.js places it and handles the keyboard). A panel
   is fixed to the window, so it is never clipped by the bar, and it fits the window without scrolling (a test holds it to that). */
.app-header-top .ck-menubar { flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ck-menubar-items { display: flex; align-items: center; gap: 2px; width: max-content; }
.ck-menu-button { display: inline-flex; align-items: center; gap: 0.35rem; height: 36px; padding: 0 0.625rem; border: 0; border-radius: var(--ck-radius-md); background: transparent; color: var(--ck-ink); font: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.ck-menu-button::after { content: ""; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0.6; }
.ck-menu-button:hover, .ck-menu.is-open > .ck-menu-button { background: var(--ck-primary-soft); color: var(--ck-primary-hover); }
.ck-menu-button:focus-visible, .ck-menu-item:focus-visible, .ck-menu-heading:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }

.ck-menu-panel { position: fixed; z-index: var(--ck-z-menu); box-sizing: border-box; width: max-content; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; padding: var(--ck-space-2); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); box-shadow: var(--ck-shadow-raised); }
.ck-menu-panel[hidden] { display: none; }
.ck-menu-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, auto); }
.ck-menu-column { min-width: 0; padding: 0 var(--ck-space-1); }
.ck-menu-column + .ck-menu-column { border-left: 1px solid var(--ck-border); }
.ck-menu-heading { padding: var(--ck-space-2) var(--ck-space-3) var(--ck-space-1); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ck-slate); white-space: nowrap; }
.ck-menu-item { display: block; box-sizing: border-box; width: 100%; height: 2rem; line-height: 2rem; padding: 0 var(--ck-space-3); border: 0; border-radius: var(--ck-radius-sm); background: transparent; color: var(--ck-ink); font: inherit; font-size: 0.875rem; text-align: left; white-space: nowrap; cursor: pointer; }
.ck-menu-item:hover:not([aria-disabled="true"]), .ck-menu-item:focus-visible { background: var(--ck-primary-soft); color: var(--ck-primary-hover); }
.ck-menu-item[aria-disabled="true"] { color: var(--ck-slate); opacity: 0.55; cursor: default; }
.ck-menu-note { max-width: 12rem; margin: 0; padding: var(--ck-space-1) var(--ck-space-3) var(--ck-space-2); color: var(--ck-slate); font-size: 0.8125rem; line-height: 1.35; white-space: normal; }
.ck-menu-footer { margin-top: var(--ck-space-1); padding: var(--ck-space-1) var(--ck-space-1) 0; border-top: 1px solid var(--ck-border); }

/* Below 900 px a panel is one column; each section folds under its heading. */
@media (max-width: 899.98px) {
    .ck-menu-panel { width: auto; max-width: none; }
    .ck-menu-columns { display: block; }
    .ck-menu-column { padding: 0; }
    .ck-menu-column + .ck-menu-column { border-left: 0; border-top: 1px solid var(--ck-border); }
    .ck-menu-panel.is-narrow .ck-menu-heading { display: flex; align-items: center; justify-content: space-between; padding-top: var(--ck-space-2); padding-bottom: var(--ck-space-2); cursor: pointer; }
    .ck-menu-panel.is-narrow .ck-menu-heading::after { content: ""; width: 0.4rem; height: 0.4rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 0.15s; }
    .ck-menu-panel.is-narrow .ck-menu-heading[aria-expanded="false"]::after { transform: rotate(-45deg); }
    .ck-menu-column[data-collapsed] > :not(.ck-menu-heading) { display: none; }
    .ck-menu-note { max-width: none; }
}

/* ---------- Command search ---------- */
.ck-search { display: inline-flex; align-items: center; gap: var(--ck-space-2); min-width: 11rem; height: var(--ck-control-md); padding: 0 var(--ck-space-3); border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface); color: var(--ck-slate); font: var(--ck-text-label); cursor: pointer; }
.ck-search:hover { border-color: var(--ck-primary); }
.ck-search-text { flex: 1; text-align: left; }
.ck-search-glyph { font-size: 1.1rem; line-height: 1; }

/* ---------- Practice and user ---------- */
.ck-account { display: flex; align-items: center; gap: var(--ck-space-2); position: relative; }
.ck-practice { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 var(--ck-space-2); height: var(--ck-control-md); border-radius: var(--ck-radius-md); color: var(--ck-ink); font-size: 0.875rem; text-decoration: none; }
.ck-practice:hover { background: var(--ck-primary-soft); color: var(--ck-primary-hover); }
.ck-practice-switch { color: var(--ck-slate); }
.ck-user { display: inline-flex; align-items: center; gap: var(--ck-space-2); height: var(--ck-control-md); padding: 0 var(--ck-space-2); border: 0; border-radius: var(--ck-radius-md); background: transparent; color: var(--ck-ink); font: var(--ck-text-label); cursor: pointer; }
.ck-user:hover { background: var(--ck-primary-soft); }
.ck-user-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ck-popover { margin: 0; inset: auto; top: 54px; right: var(--ck-space-4); min-width: 14rem; padding: var(--ck-space-1); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); box-shadow: var(--ck-shadow-raised); }
.ck-popover-heading { padding: var(--ck-space-2) var(--ck-space-3); color: var(--ck-slate); font-size: 0.8125rem; border-bottom: 1px solid var(--ck-border); margin-bottom: var(--ck-space-1); overflow-wrap: anywhere; }
.ck-popover form { margin: 0; }
.ck-popover-item { display: block; width: 100%; padding: var(--ck-space-2) var(--ck-space-3); border: 0; border-radius: var(--ck-radius-sm); background: transparent; color: var(--ck-ink); font: var(--ck-text-label); text-align: left; text-decoration: none; cursor: pointer; }
.ck-popover-item:hover { background: var(--ck-primary-soft); color: var(--ck-primary-hover); }

/* ---------- Daily-task toolbar: kept for UX-001 (every shortcut has a visible button), quieter than the header ---------- */
.app-toolbar.e-toolbar { padding: 0 var(--ck-space-4); border: 0; border-top: 1px solid var(--ck-border); background: var(--ck-canvas); min-height: 0; }
.app-toolbar.e-toolbar .e-toolbar-items { background: transparent; min-height: 36px; }
.app-toolbar.e-toolbar .e-toolbar-item { min-height: 32px; }
.app-toolbar.e-toolbar .e-tbar-btn { min-height: 28px; border-radius: var(--ck-radius-sm); }
.app-toolbar.e-toolbar .e-tbar-btn .e-tbar-btn-text { font-size: 0.8125rem; font-weight: 500; }

/* ---------- Patient workspace tabs ---------- */
.workspace-tabs { padding: var(--ck-space-1) var(--ck-space-4) 0; background: var(--ck-canvas); border-top: 1px solid var(--ck-border); }
.workspace-tabs .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap { background: var(--ck-surface); }
.workspace-tabs .e-tab .e-tab-header .e-indicator { background: var(--ck-primary); }
.workspace-tab-label { font-size: 0.875rem; }

/* ---------- Page area and status bar ---------- */
.app-main { flex: 1; min-height: 0; overflow: auto; padding: var(--ck-space-4); background: var(--ck-canvas); }
.status-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem var(--ck-space-6); padding: var(--ck-space-1) var(--ck-space-4); border-top: 1px solid var(--ck-border); background: var(--ck-surface); color: var(--ck-slate); font-size: 0.75rem; }
.status-bar strong { color: var(--ck-ink); font-weight: 600; }
.status-bar-link { color: var(--ck-ink); text-decoration: none; }
.status-bar-link:hover { text-decoration: underline; }
.status-bar-alert { color: var(--ck-critical-text); font-weight: 650; }
.status-bar .status-bar-time { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Reduced widths ----------
   Below 1500 px the header's right-hand controls shrink so the menu bar stays on the logo's row: Find a command becomes an icon button, the
   user shows as initials (the full name is in the tooltip and at the top of the user menu) and the practice name is cut short (full name in
   the tooltip). Only below 1280 px does the menu bar drop to a row of its own. */
@media (max-width: 1499.98px) {
    .ck-search { min-width: 0; width: var(--ck-control-md); padding: 0; justify-content: center; }
    .ck-search-text, .ck-search-keys { display: none; }
    .ck-user-name { display: none; }
    .ck-practice-name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ck-practice-switch { display: none; }
    .ck-menu-button { padding: 0 0.5rem; }
    .app-header-top { gap: var(--ck-space-2); }
}
@media (max-width: 1279.98px) {
    .app-header-top { flex-wrap: wrap; row-gap: 0; }
    .app-header-top .ck-menubar { order: 5; flex: 1 0 100%; margin-top: -0.25rem; }
    .app-header-top .brand { margin-right: auto; }
    .ck-menu-button { padding: 0 var(--ck-space-3); }
}
@media (max-width: 760px) {
    .app-header-top { padding: 0 var(--ck-space-2); }
    .app-header-top .brand-wordmark { display: none; }
    .ck-practice-name { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-main { padding: var(--ck-space-2); }
}

/* One page header everywhere inside the application: one title size, an optional one-line description under it, and the page's actions on the right. The selectors start at
   #main-content so they win over the page-specific title rules that came before (Takings, Fees, Banking, Inbox and so on). The patient banner and the sign-in pages keep their own. */
#main-content.app-main h1:not(.pb-name h1):not(.sec-card h1) {
    font: 650 1.5rem/2rem var(--ck-font);
    letter-spacing: -0.3px;
    margin: 0;
    color: var(--ck-ink);
}
#main-content.app-main .page-header,
#main-content.app-main :is(.bank-header, .claims-header, .msg-header, .inbox-header, .md-head, .rt-head, .pw-head, .sub-head, .home-hello, .book-heading) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-2);
    margin: 0 0 var(--ck-space-2);
}
#main-content.app-main :is(.page-header, .bank-header, .claims-header, .msg-header, .inbox-header) > h1 { margin-right: auto; }
#main-content.app-main :is(.ab-sub, .page-sub) {
    margin: 0 0 var(--ck-space-3);
    color: var(--ck-slate);
    font-size: 0.875rem;
    line-height: 1.25rem;
}