/* App shell. Desktop: rail + top bar + content grid. Tablet: icon rail.
   Phone: large-title header + bottom tab bar. Same system, different layouts. */

.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100dvh; }

/* ---------- Rail ---------- */
.rail {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--rail-bg); color: var(--rail-text);
  border-right: 1px solid var(--rail-border);
  padding: var(--s3) var(--s2);
  z-index: 30;
}
.rail__brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s4); color: var(--rail-text-strong); }
.rail__brand img { width: 28px; height: 28px; border-radius: 7px; background: #fff; object-fit: contain; padding: 2px; }
.rail__brand strong { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.rail__brand small { display: block; color: var(--rail-text); font-size: var(--fs-xs); font-weight: 400; margin-top: -1px; }
.rail__nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.rail__group { margin: var(--s4) var(--s3) var(--s1); font-size: var(--fs-xs); color: #6f7d92; letter-spacing: .02em; }
.rail__group:first-child { margin-top: 0; }
.rail__link {
  display: flex; align-items: center; gap: var(--s3);
  height: 36px; padding: 0 var(--s3);
  color: var(--rail-text); border-radius: var(--r);
  font-size: var(--fs-base); font-weight: 500; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rail__link:hover { background: var(--rail-hover); color: var(--rail-text-strong); text-decoration: none; }
.rail__link[aria-current="page"] { background: var(--rail-active); color: var(--rail-text-strong); box-shadow: inset 2px 0 0 var(--rail-accent); }
.rail__link .icon { width: 18px; height: 18px; flex: none; }
.rail__link .count { margin-left: auto; font-size: var(--fs-xs); color: var(--rail-text); background: var(--rail-hover); padding: 0 6px; border-radius: 9px; line-height: 18px; }
.rail__foot { border-top: 1px solid var(--rail-border); padding-top: var(--s3); margin-top: var(--s2); display: flex; flex-direction: column; gap: 2px; }
.rail__user {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s2) var(--s3); border: 0; background: transparent; border-radius: var(--r);
  color: var(--rail-text-strong); text-align: left;
}
.rail__user:hover { background: var(--rail-hover); }
.rail__user small { display: block; color: var(--rail-text); font-size: var(--fs-xs); }

.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}

/* ---------- Main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--bar-h); display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s6);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar__title { font-size: var(--fs-md); font-weight: 600; min-width: 0; }
.topbar__site { color: var(--text-2); font-size: var(--fs-sm); margin-left: var(--s2); }
.topbar__spacer { flex: 1; }
.topbar__search {
  display: flex; align-items: center; gap: var(--s2);
  height: 32px; width: 280px; padding: 0 var(--s3);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text-3); font-size: var(--fs-sm);
}
.topbar__search:hover { border-color: var(--border-strong); }
.topbar__search kbd { margin-left: auto; font-family: var(--font); font-size: 11px; border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; color: var(--text-3); }

.content { padding: var(--s6); width: 100%; max-width: 1480px; margin: 0 auto; flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.page-head h1 { font-size: var(--fs-xl); }
.page-head p { color: var(--text-2); margin-top: 2px; }
.page-head__actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
/* Opt-in: panels in one row share a height (Overview). Elsewhere panels keep their natural height. */
.grid--equal { align-items: stretch; }
.grid--equal > * > .panel { height: 100%; display: flex; flex-direction: column; }
.grid--equal > * > .panel > .panel__body { flex: 1; }
.grid--equal .panel__body:has(> .chart) { display: flex; }
.grid--equal > .stack > .panel { height: auto; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }

/* ---------- Phone tab bar ---------- */
.tabbar { display: none; }

/* ---------- Tablet: icon rail ---------- */
@media (max-width: 1099px) and (min-width: 768px) {
  .app { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
  .rail { align-items: center; padding-inline: var(--s2); }
  .rail__brand > div, .rail__link span, .rail__group, .rail__user > div, .rail__link .count { display: none; }
  .rail__brand { padding-inline: 0; }
  .rail__link { justify-content: center; width: 44px; padding: 0; }
  .rail__user { justify-content: center; padding: var(--s2); width: 44px; }
  .span-3, .span-4, .span-5 { grid-column: span 6; }
  .span-7, .span-8 { grid-column: 1 / -1; }
  .topbar__search { width: 200px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .app { display: block; }
  .rail { display: none; }
  .main { min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .topbar { padding: var(--safe-t) var(--s4) 0; height: auto; min-height: calc(44px + var(--safe-t)); background: color-mix(in srgb, var(--bg) 92%, transparent); }
  .topbar__title, .topbar__search, .topbar__site { display: none; }
  .topbar__spacer { order: 1; }
  .content { padding: var(--s4); }
  .page-head { align-items: flex-end; margin-bottom: var(--s4); }
  .page-head__actions .btn span { display: none; }
  .page-head h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
  .grid { grid-template-columns: 1fr; gap: var(--s3); }
  .grid > * { grid-column: auto !important; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 40;
    height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--border);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--text-3); font-size: 10.5px; font-weight: 500; background: transparent; border: 0; text-decoration: none;
  }
  .tabbar .icon { width: 22px; height: 22px; }
  .tabbar [aria-current="page"] { color: var(--accent); }
}

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--s5); padding: var(--s6) var(--s4); padding-top: calc(var(--s6) + var(--safe-t)); background: var(--bg); }
.login__card { width: min(380px, 100%); padding: var(--s8) var(--s6) var(--s6); }
.login__brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.login__brand img { width: 40px; height: 40px; border-radius: 10px; background: #fff; object-fit: contain; padding: 3px; border: 1px solid var(--border); }
.login__brand h1 { font-size: var(--fs-lg); } .login__brand p { font-size: var(--fs-sm); }
.login__foot { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
@media (max-width: 767px) { .login { place-content: start center; padding-top: calc(72px + var(--safe-t)); } .login .login__card { border: 0; background: transparent; padding-inline: 0; width: 100%; } }

/* Copyright notice at the foot of every page */
.sitefoot { padding: var(--s4) var(--s6) var(--s6); text-align: center; color: var(--text-3); font-size: var(--fs-xs); }
.login__copy { margin-top: var(--s2); font-size: var(--fs-xs); text-align: center; }
@media (max-width: 767px) { .sitefoot { padding: var(--s3) var(--s4) var(--s5); } }