/* App shell chrome — top app bar, context bar, grouped sidebar, date combo.
   Ported faithfully from the designers' Navigation Shell. This is GLOBAL (not Blazor
   scoped) and namespaced under `.app-shell` for two reasons:
     1. <NavLink> renders a child-component <a>, so the parent's scoped-css attribute never
        lands on it — scoped rules silently lose to Bootstrap's `a { color }`.
     2. `.app-shell .nav-item` (and friends) out-specify Bootstrap's element selectors.
   Design tokens live in app.css. */

.app-shell {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  font-size: 14px;
  line-height: 1.55;
  /* column flex so .shell can fill exactly the viewport space left under the
     appbar/ctxbar — no hardcoded chrome heights, no phantom scrollbar */
  display: flex;
  flex-direction: column;
  /* fixed to the viewport so the chrome (appbar/ctxbar/sidebar) never extends the
     document — page scroll lives in <main>, the sidebar scrolls inside itself */
  height: 100dvh;
  overflow: hidden;
}

.app-shell button { font: inherit; }
.app-shell a { text-decoration: none; }
/* .btn anchors take their colour from the button classes (app.css bridge), not the shell reset */
.app-shell a:not(.btn) { color: inherit; }
.app-shell a:focus-visible,
.app-shell button:focus-visible,
.app-shell input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---- top app bar ---- */
.app-shell .appbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5); height: 56px;
  border-bottom: 1px solid var(--line); background: var(--white);
}
/* hamburger drawer toggle — hidden on desktop so the appbar is unchanged; the
   max-width media query below reveals it and turns the sidebar into a drawer */
.app-shell .hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: calc(-1 * var(--space-2));
  border: none; background: none; cursor: pointer;
  color: var(--ink); font-size: 22px; line-height: 1; flex-shrink: 0;
  border-radius: var(--radius); transition: background .12s;
}
.app-shell .hamburger:hover { background: var(--surface); }
.app-shell .brand { display: flex; align-items: center; flex-shrink: 0; }
.app-shell .brand img { height: 48px; width: auto; display: block; }
.app-shell .appbar .spacer { flex: 1; }
.app-shell .login-link { font-size: 13px; color: var(--accent); font-weight: 600; }

/* account dropdown — reuses .site-select open/menu mechanics; trigger is flat
   (no boxed border) so the appbar reads the same as before until hovered */
.app-shell .user-select { padding-left: var(--space-3); border-left: 1px solid var(--line); }
.app-shell .user-trigger {
  display: flex; align-items: center; gap: var(--space-2); font-size: 13px;
  border: none; background: none; cursor: pointer; text-align: left;
  padding: 4px 8px; border-radius: var(--radius); color: var(--ink); transition: background .12s;
}
.app-shell .user-trigger:hover { background: var(--surface); }
.app-shell .user-select.open .user-trigger { background: var(--accent-tint); }
.app-shell .user-trigger .caret { color: var(--accent); font-size: 18px; line-height: 1; transition: transform .12s; }
.app-shell .user-select.open .user-trigger .caret { transform: rotate(180deg); }
.app-shell .user-select .site-menu { left: auto; right: 0; min-width: 180px; }
.app-shell .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.app-shell .who { line-height: 1.25; display: flex; flex-direction: column; }
.app-shell .who .nm { font-weight: 600; }
.app-shell .who .role-tag { font-size: 11px; color: var(--muted-text); }

/* ---- context bar ---- */
.app-shell .ctxbar {
  display: flex; align-items: center; gap: var(--space-5);
  padding: 10px var(--space-5); border-bottom: 1px solid var(--line); background: var(--surface);
}
.app-shell .ctx-item { display: flex; align-items: baseline; gap: var(--space-2); font-size: 13px; }
.app-shell .ctx-item .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-text); }
.app-shell .ctx-item .v { font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.app-shell .ctx-item .v .caret { color: var(--accent); font-size: 18px; line-height: 1; }
.app-shell .ctxbar .spacer { flex: 1; }

/* site selector dropdown */
.app-shell .site-select { position: relative; }
.app-shell .site-select .v {
  user-select: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); transition: border-color .12s, background .12s, box-shadow .12s;
}
.app-shell .site-select .v:hover { border-color: var(--accent); background: var(--accent-tint); }
.app-shell .site-select.open .v { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 2px var(--accent-tint); }
.app-shell .site-select .v .caret { transition: transform .12s; }
.app-shell .site-select.open .v .caret { transform: rotate(180deg); }
.app-shell .site-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 220px; max-height: 70vh; overflow-y: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: var(--space-1); display: none;
}
.app-shell .site-select.open .site-menu { display: block; }
.app-shell .site-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; font-family: var(--font); font-size: 13px; color: var(--ink);
  padding: 7px 10px; border-radius: var(--radius); cursor: pointer;
}
.app-shell .site-menu button:hover { background: var(--surface); }
.app-shell .site-menu button.sel { color: var(--accent); font-weight: 600; background: var(--accent-tint); }
.app-shell .site-menu button .check { margin-left: auto; color: var(--accent); font-size: 12px; visibility: hidden; }
.app-shell .site-menu button.sel .check { visibility: visible; }
.app-shell .site-menu .divider { height: 1px; background: var(--line); margin: var(--space-1) 0; }

/* Viewing menu (sites): click a name to switch, tick the box to combine */
.app-shell .sites-menu { min-width: 260px; }
.app-shell .site-search {
  width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 13px;
  padding: 7px 10px; margin-bottom: var(--space-1);
  border: 1px solid var(--line); border-radius: var(--radius); outline: none; color: var(--ink);
}
.app-shell .site-search:focus { border-color: var(--accent); }
.app-shell .sites-menu .site-row {
  display: flex; align-items: center; gap: 4px; width: 100%;
  border: none; background: none; padding: 0; border-radius: var(--radius); cursor: pointer;
}
.app-shell .sites-menu .site-row:hover { background: var(--surface); }
.app-shell .sites-menu .site-row.sel { background: var(--accent-tint); }
.app-shell .sites-menu .cbx {
  width: 16px; height: 16px; flex-shrink: 0; margin-left: 10px;
  border: 1.5px solid var(--muted); border-radius: 3px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.app-shell .sites-menu .site-row.sel .cbx { background: var(--accent); border-color: var(--accent); }
.app-shell .sites-menu .site-row.sel .cbx::after {
  content: ""; width: 8px; height: 4px; margin-top: -2px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg);
}
.app-shell .sites-menu .name {
  flex: 1; border: none; background: none; text-align: left; cursor: pointer;
  font-family: var(--font); font-size: 13px; color: var(--ink); padding: 8px 10px 8px 6px;
}
.app-shell .sites-menu .site-row.sel .name { color: var(--accent); font-weight: 600; }
.app-shell .sites-menu .name:hover { background: transparent; }
.app-shell .sites-menu .no-sites { padding: 8px 10px; font-size: 12px; color: var(--muted-text); }
.app-shell .sites-menu .menu-foot { display: flex; align-items: center; gap: var(--space-2); padding: 2px 6px; }
.app-shell .sites-menu .menu-foot .spacer { flex: 1; }
.app-shell .sites-menu .menu-foot .hint { font-size: 11px; color: var(--muted-text); }
.app-shell .sites-menu .foot-link {
  width: auto; border: none; background: none; cursor: pointer; font-family: var(--font);
  font-size: 12px; color: var(--muted-text); padding: 4px 8px; border-radius: var(--radius);
}
.app-shell .sites-menu .foot-link:hover { background: var(--surface); color: var(--ink); }
.app-shell .sites-menu .foot-link.primary { color: var(--accent); font-weight: 600; }

/* custom date-range panel inside the date menu */
.app-shell .rp-head { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-text); padding: 6px 10px 2px; }
.app-shell .range-panel { padding: 6px 10px 10px; }
.app-shell .range-panel .rp-row { display: flex; gap: 8px; margin-bottom: 10px; }
.app-shell .range-panel .rp-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.app-shell .range-panel label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-text); }
.app-shell .range-panel input[type=date] {
  font-family: var(--font); font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); outline: none;
}
.app-shell .range-panel input[type=date]:focus { border-color: var(--accent); }
.app-shell .range-panel .rp-err { font-size: 11px; color: var(--error); min-height: 14px; margin-bottom: 6px; }
.app-shell .range-panel .rp-actions { display: flex; justify-content: flex-end; gap: 8px; }
.app-shell .range-panel .rp-btn { font-family: var(--font); font-size: 12px; font-weight: 600; border-radius: var(--radius); padding: 6px 14px; border: 1px solid transparent; cursor: pointer; }
.app-shell .range-panel .rp-apply { background: var(--accent); color: #fff; }
.app-shell .range-panel .rp-apply:hover { background: var(--accent-hover); }

/* fixed site chip — non-Global users, not clickable */
.app-shell .site-chip {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: default;
}
.app-shell .site-chip .pin { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.app-shell .site-chip .label { font-size: 13px; font-weight: 600; }
.app-shell .site-chip .sub { font-size: 11px; color: var(--muted-text); }

/* date component — prev/next steppers fused with the period dropdown */
.app-shell .date-combo { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin-left: var(--space-6); }
.app-shell .date-combo button { font-family: var(--font); }
.app-shell .date-combo.disabled { opacity: .5; cursor: not-allowed; }
.app-shell .date-combo.disabled .dc-dd > .v { pointer-events: none; }
.app-shell .dc-step { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--accent); font-size: 17px; line-height: 1; width: 32px; cursor: pointer; transition: background .12s, color .12s; }
.app-shell .dc-step:hover:not(:disabled) { background: var(--accent-tint); }
.app-shell .dc-step:disabled { color: var(--muted); cursor: default; }
.app-shell .dc-prev { border-right: 1px solid var(--line); border-radius: 3px 0 0 3px; }
.app-shell .dc-next { border-left: 1px solid var(--line); border-radius: 0 3px 3px 0; }
.app-shell .date-combo .dc-dd { position: relative; display: inline-flex; align-items: center; padding: 0; border-radius: 3px; transition: background .12s; }
.app-shell .date-combo .dc-dd > .v {
  border: none; background: transparent; box-shadow: none; padding: 0 14px; height: 100%;
  font-size: 13px; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s;
}
.app-shell .date-combo .dc-dd > .v:hover,
.app-shell .date-combo .dc-dd.open > .v { background: var(--accent-tint); }
.app-shell .date-combo .dc-dd > .v .caret { color: var(--accent); font-size: 18px; line-height: 1; transition: transform .12s; }
.app-shell .date-combo .dc-dd.open > .v .caret { transform: rotate(180deg); }
.app-shell .date-combo .site-menu { min-width: 240px; }

/* click-away catcher for the open dropdowns */
.app-shell .menu-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }

/* ---- shell grid ---- */
.app-shell .shell { display: grid; grid-template-columns: var(--nav-w) 1fr; flex: 1; min-height: 0; }
.app-shell .shell > main { padding: var(--space-5); min-width: 0; overflow-y: auto; background: var(--white); }

/* ---- sidebar ---- */
.app-shell .sidebar { background: var(--white); border-right: 1px solid var(--line); padding: var(--space-3) 0; overflow-y: auto; }
.app-shell .nav-group { padding: var(--space-2) var(--space-3); }
.app-shell .nav-group + .nav-group { border-top: 1px solid var(--line); margin-top: var(--space-1); padding-top: var(--space-3); }
/* Group header doubles as the accordion toggle. Reset the button so it reads as the old
   .gh label, with a chevron that rotates when the group is open. */
.app-shell .nav-group button.gh {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-text); padding: 0 10px 6px;
  transition: color .12s;
}
.app-shell .nav-group button.gh:hover { color: var(--ink); }
.app-shell .nav-group .gh .chev {
  font-size: 24px; line-height: 1; color: var(--muted-text);
  transition: transform .15s ease; transform: rotate(0deg);
}
.app-shell .nav-group button.gh:hover .chev { color: var(--ink); }
.app-shell .nav-group.is-open .gh .chev { transform: rotate(90deg); }

/* a.nav-item beats Bootstrap's `a { color; text-decoration }` on specificity */
.app-shell a.nav-item,
.app-shell .nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; border: none; background: none; border-radius: var(--radius);
  font-size: 13px; color: var(--ink); cursor: pointer; text-decoration: none;
  transition: background .12s; margin-bottom: 1px;
}
.app-shell a.nav-item:hover,
.app-shell .nav-item:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.app-shell a.nav-item.active,
.app-shell .nav-item.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.app-shell .nav-item .ic { width: 22px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--muted-text); flex-shrink: 0; }
.app-shell a.nav-item.active .ic,
.app-shell .nav-item.active .ic { color: var(--accent); }

/* ---- mobile: off-canvas drawer + wrapping context bar (<=768px) ---- */
@media (max-width: 768px) {
  .app-shell .hamburger { display: inline-flex; }

  /* single-column shell; the sidebar leaves the grid flow and becomes a drawer */
  .app-shell .shell { grid-template-columns: 1fr; }
  .app-shell .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
    width: min(var(--nav-w), 82vw);
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }

  /* reuse .menu-backdrop for the drawer's click-away dimming */
  .app-shell.nav-open .menu-backdrop { background: rgba(0,0,0,.4); }

  /* let the site selector + date combo stack instead of overflowing */
  .app-shell .ctxbar { flex-wrap: wrap; gap: var(--space-3); }
  .app-shell .date-combo { margin-left: 0; }
}

/* ---- print: pages print their content only, no shell chrome ---- */
@media print {
  .app-shell { display: block; min-height: 0; height: auto; overflow: visible; }
  .app-shell .appbar,
  .app-shell .ctxbar,
  .app-shell .sidebar { display: none !important; }
  .app-shell .shell { display: block; }
  .app-shell .shell > main { padding: 0; }
}