/* Radar — real web app shell.
   Desktop-first: persistent left sidebar (brand · company · nav · notifications ·
   logout) + a wide scrolling content pane that loads the web/ screen partials.
   Collapses to a top bar on narrow viewports. */
* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(120% 70% at 100% -10%, rgba(0,211,169,0.08), transparent 55%),
    radial-gradient(80% 60% at 0% 0%, rgba(59,129,245,0.06), transparent 60%),
    var(--background);
}

/* ── Shell ─────────────────────────────────────────────────────────── */
.web-app { display: flex; height: 100dvh; overflow: hidden; }

/* ── Sidebar ───────────────────────────────────────────────────────── */
.web-side {
  width: 268px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--spacing-lg);
  padding: 22px 16px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--surface-elevated);
}

.web-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; text-decoration: none; }
.web-brand .radar { width: 34px; height: 34px; flex-shrink: 0; }
.web-brand .brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.web-brand .brand-word b { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
.web-brand .brand-word span { font-size: 12px; color: var(--text-muted); }

.web-company {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: var(--radius-md);
  background: var(--surface-glass); border: 1px solid var(--border);
  color: var(--text-primary); font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.web-company:hover { border-color: var(--border-accent); background: var(--surface-hover); }
.web-company .dot { width: 9px; height: 9px; border-radius: 5px; background: var(--done); flex-shrink: 0; }
.web-company .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.web-company .chev { color: var(--text-muted); display: inline-flex; }
.web-company .chev svg { width: 15px; height: 15px; }

.web-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.web-navlabel { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); padding: 0 12px; margin-bottom: 6px; }
.web-navitem {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid transparent;
  color: var(--text-secondary); font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; text-align: left; text-decoration: none; position: relative;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.web-navitem svg { width: 19px; height: 19px; flex-shrink: 0; }
.web-navitem:hover { background: var(--surface-glass); color: var(--text-primary); }
.web-navitem.is-active { background: var(--accent-subtle); color: var(--accent); border-color: var(--border-accent); }
.web-navitem .nb-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--overdue); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.web-navitem .nb-badge--accent { background: var(--accent); color: #04130f; }

.web-side-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: var(--spacing-md); }

/* ── Main content pane ─────────────────────────────────────────────── */
.web-main { flex: 1; min-width: 0; position: relative; overflow-y: auto; }
.web-main .app-screen { min-height: 100%; }

/* Screens carry their own appbar/toptabs for the phone surface — the sidebar
   replaces those on the web shell, so hide them here. */
.web-main .appbar,
.web-main .toptabs { display: none !important; }

/* Give the (mobile-authored, max-width:760px) screen content room to breathe. */
.web-main .screen { max-width: 860px !important; padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl) !important; }
/* The dashboard uses a wider multi-column layout. */
.web-main .screen.dash { max-width: 1120px !important; margin-inline: auto; }
.web-main .appheader { padding: var(--spacing-base) var(--spacing-xl); }

/* Legacy bottom sheet overlays the content pane (not the sidebar). */
.web-main > .sheet-host { position: absolute; inset: 0; }

/* ── Responsive: collapse the sidebar to a top bar ─────────────────── */
@media (max-width: 860px) {
  .web-app { flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; }
  .web-side {
    width: 100%; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
    padding: 12px; border-right: 0; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
  }
  /* Row 1: logo left, company right (brand's auto margin splits them). The icon
     nav + foot wrap to row 2, which justify-content:center then centers as a group
     (auto margins on row 1 take precedence, so row 1 stays split). */
  .web-brand { margin-right: auto; }
  .web-company { width: auto; max-width: 200px; }
  .web-nav { flex-direction: row; flex: 0 1 auto; justify-content: center; gap: 4px; }
  .web-navlabel { display: none; }
  .web-navitem { padding: 9px 12px; }
  .web-navitem span.lbl { display: none; }
  .web-side-foot { flex-direction: row; border-top: 0; padding-top: 0; }
  .web-main { overflow: visible; }
  .web-main .screen { padding: var(--spacing-base) !important; }
}
@media (max-width: 480px) {
  .web-main .screen { max-width: 100% !important; }
}