/* MedTel app shell: the menu bar, the top bar and the page frame. ONE stylesheet for every signed-in patient page (the dashboard and
   the sleep page). Replaces the menu-bar rules that were spread over the inline style of index.html, dashboard.css and the glass skin
   (D-224). Load it after the page's own CSS. Everything is on a 4 px grid, using the spacing tokens in tokens.css.

   Menu items are `.nav-item` (a <button> in the dashboard, an <a> on a separate page) with a `.nav-label` for the text. The collapsed
   sidebar hides every `.nav-label`, so a new item can never spill out of its icon. */

:root { --nav-w: 224px; }
html[data-sidebar="collapsed"] { --nav-w: 80px; }

/* ---------- page frame ---------- */
.shell { min-height: 100vh; padding-bottom: calc(88px + env(safe-area-inset-bottom)); background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- menu bar: phones, a bottom bar ---------- */
.nav {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
  padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  border-top: 1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 -12px 28px -20px rgba(25,80,100,.45);
}
.nav-brand, .nav-foot { display: none; }
.nav-item {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); width: 100%; min-height: 64px; margin: 0; padding: var(--sp-2) var(--sp-1);
  border: 0; border-radius: var(--sp-4); background: transparent; color: var(--ink-3);
  font: 600 .66rem/1.3 var(--font-body); letter-spacing: 0; text-decoration: none; text-align: center; cursor: pointer;
}
.nav-item svg { width: 22px; height: 22px; flex: none; }
.nav-item:hover { background: rgba(42,140,166,.08); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.nav-item[aria-current="page"] svg { color: var(--accent); }
.nav-item:focus-visible, .nav-signout:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-new { display: none; }
.nav .badge { position: absolute; top: var(--sp-1); left: calc(50% + var(--sp-2)); min-width: 16px; height: 16px; padding: 0 4px; font-size: .55rem; background: var(--lotus); color: #fff; }

/* ---------- top bar ---------- */
.topbar-left { display: contents; }
.topbar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: var(--sp-2);
  box-sizing: border-box; flex-wrap: nowrap; height: 60px; min-height: 60px; padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(35,95,115,.07);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.topbar .brand { margin-right: auto; font-size: 1rem; }
.topbar .brand-mark, .nav .brand-mark { display: block; width: auto; height: auto; background: none; box-shadow: none; }
.brand-mark .mt-logo-img { display: block; height: 42px; width: auto; }
.workspace-context { display: none; align-items: center; margin-right: auto; }
.workspace-context > span { font-size: .76rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.workspace-context > span::after { content: "/"; padding: 0 var(--sp-3); color: var(--line); }
.workspace-context > strong { font-size: .8rem; font-weight: 650; color: var(--ink); }
/* square top-bar button (sidebar toggle) */
.icon-button { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-control); background: rgba(255,255,255,.7); color: var(--ink-2); cursor: pointer; }
.icon-button:hover { background: #fff; color: var(--ink); }
.icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-button svg { width: 20px; height: 20px; }
.sidebar-toggle { display: none; }

/* ---------- desktop: a full-height sidebar and a taller top bar ---------- */
@media (min-width: 960px) {
  .shell { margin-left: var(--nav-w); padding-bottom: 0; transition: margin-left .18s ease; }
  .nav {
    top: 0; right: auto; width: var(--nav-w); display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4) var(--sp-5); transition: width .18s ease;
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.56));
    border-top: 0; border-right: 1px solid rgba(255,255,255,.9); box-shadow: 1px 0 0 rgba(35,95,115,.08);
  }
  .nav-brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-3) var(--sp-5); color: var(--ink); font: 800 1.3rem var(--font-display); letter-spacing: -.05em; }
  .nav-brand small { display: block; font: 500 .64rem/1.7 var(--font-body); letter-spacing: .015em; color: var(--ink-3); }
  .nav .brand-mark .mt-logo-img { height: 72px; }
  .nav-item {
    flex-direction: row; justify-content: flex-start; gap: var(--sp-3); min-height: 48px; padding: var(--sp-3) var(--sp-4);
    border-radius: var(--sp-3); font: 550 .8rem/1.3 var(--font-body); letter-spacing: -.012em; text-align: left; color: var(--nav-text);
  }
  .nav-item svg { width: 20px; height: 20px; color: var(--ink-3); }
  .nav-item[aria-current="page"] svg { color: var(--accent); }
  .nav-item[aria-current="page"] {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); color: var(--accent-strong); font-weight: 700;
    box-shadow: 0 1px 0 #fff inset, 0 6px 14px -8px rgba(25,90,110,.45); outline: 1px solid rgba(35,95,115,.12); outline-offset: -1px;
  }
  .nav-new { display: inline-block; margin-left: auto; padding: 2px 6px; border-radius: 6px; font-size: .56rem; font-weight: 700; background: var(--lotus-soft); color: var(--lotus); }
  .nav .badge { position: static; margin-left: auto; min-width: 20px; height: 20px; font-size: .6rem; }
  .nav-foot { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: auto; padding: var(--sp-4) var(--sp-2) 0; border-top: 1px solid var(--line); color: var(--ink-3); }
  .nav-signout {
    display: flex; align-items: center; gap: var(--sp-3); box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line); border-radius: var(--sp-3); background: rgba(255,255,255,.62); color: var(--ink-2); font: 600 .8rem var(--font-body); text-align: left; cursor: pointer;
  }
  .nav-signout svg { width: 18px; height: 18px; flex: none; }
  .nav-signout:hover { background: #fff; color: var(--ink); }
  .nav-profile { display: flex; align-items: center; gap: var(--sp-3); }
  .nav-profile .avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--lotus-soft); color: var(--lotus); font-size: .72rem; font-weight: 700; }
  .nav-profile strong { display: block; font-size: .76rem; line-height: 1.5; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
  .nav-profile div > span { display: block; margin-top: 1px; font-size: .66rem; line-height: 1.6; color: var(--ink-3); }
  .nav-security { display: flex; align-items: center; gap: var(--sp-1); font-size: .62rem; color: var(--ink-3); }
  .topbar { height: 72px; min-height: 72px; padding: var(--sp-4) var(--sp-6); gap: var(--sp-3); }
  .topbar .brand { display: none; }
  .workspace-context { display: flex; }
  .sidebar-toggle { display: grid; flex: none; }

  /* collapsed: icons only. Every label, the profile text and the lock line are hidden together. */
  html[data-sidebar="collapsed"] .nav { padding-inline: var(--sp-3); }
  html[data-sidebar="collapsed"] .nav-brand { justify-content: center; padding-inline: 0; }
  html[data-sidebar="collapsed"] .nav-item, html[data-sidebar="collapsed"] .nav-signout { justify-content: center; padding-inline: var(--sp-3); }
  /* collapsed: only the heartbeat M of the logo shows */
  html[data-sidebar="collapsed"] .nav .brand-mark .mt-logo-img { width: 52px; object-fit: cover; object-position: left center; }
  html[data-sidebar="collapsed"] .nav-label,
  html[data-sidebar="collapsed"] .nav-profile > div,
  html[data-sidebar="collapsed"] .nav-security {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html[data-sidebar="collapsed"] .nav-new { display: none; }
  html[data-sidebar="collapsed"] .nav .badge { position: absolute; top: 4px; right: 2px; left: auto; margin: 0; }
  html[data-sidebar="collapsed"] .nav-foot { padding-inline: 0; }
  html[data-sidebar="collapsed"] .nav-profile { justify-content: center; }
  html[data-sidebar="collapsed"] .sidebar-chevron { transform: translateX(27px) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .nav, .shell { transition: none; } }