/* App screens: boot splash, sign-in, and the sidebar + main shell. */

/* ---------- boot ---------- */
.boot {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;
  background: var(--page); color: var(--muted);
}

/* ---------- sign-in / no-access ---------- */
.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.signin-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 32px 28px; box-shadow: var(--shadow);
}
.signin-brand { text-align: center; margin-bottom: 20px; }
.signin-brand h1 { margin: 10px 0 2px; font-size: 20px; }
.signin-brand p { margin: 0; font-size: 12.5px; }
/* Brand mark: official Apars logo, swapped per theme (blue on light, white on dark). */
.logo { width: 44px; height: 44px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo .logo-light { display: none; }
  :root:not([data-theme='light']) .logo .logo-dark { display: block; }
}
:root[data-theme='dark'] .logo .logo-light { display: none; }
:root[data-theme='dark'] .logo .logo-dark { display: block; }
.signin-note { font-size: 12px; text-align: center; margin: 16px 0 0; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); }
.brand .logo { width: 34px; height: 34px; margin: 0; }
.brand div { display: flex; flex-direction: column; line-height: 1.25; }
.brand span { font-size: 11.5px; }

.nav { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 13.5px;
}
.nav a .ico { width: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.nav a:hover { background: var(--page); color: var(--ink); }
.nav a.active { background: var(--series-wash); color: var(--series); }
/* Leaves the dashboard (API reference): set apart from the views, and never
   marked active — it is a different page, not a section of this one. */
.nav a.nav-external { margin-top: auto; color: var(--muted); font-weight: 400; }
.nav a.nav-external .ico-end { margin-left: auto; opacity: 0.7; }

.sidebar-foot { border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.userbox { display: flex; gap: 9px; align-items: center; min-width: 0; }
.userbox-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.userbox-text strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbox-text span { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--series); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
}
.role-badge {
  align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--series); background: var(--series-wash); padding: 3px 8px; border-radius: 999px;
}
.foot-actions { display: flex; gap: 6px; }
.foot-actions .btn { flex: 1; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px 0; }
/* The title yields space (ellipsis) so the clock never gets squeezed into wrapping. */
.topbar h1 { margin: 0; font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One line, always: no wrap between the two city clocks, none inside either. */
.topbar-right {
  font-size: 12.5px; display: flex; gap: 12px; flex: 0 0 auto;
  flex-wrap: nowrap; white-space: nowrap; justify-content: flex-end;
}
.clock-seg { white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock-seg + .clock-seg { border-left: 1px solid var(--grid); padding-left: 12px; }
.clock-city { font-weight: 600; color: var(--ink-2); margin-right: 6px; }
main#content { padding: 18px 28px 40px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- mobile (app-like PWA layout) ---------- */
@media (max-width: 820px) {
  /* auto 1fr: without it the grid stretches both auto rows to fill 100vh,
     inflating the header row with dead space. */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* Sidebar collapses into one compact header row; nav moves to a bottom tab bar. */
  .sidebar {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    border-right: none; border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
  }
  .brand { border-bottom: none; padding: 10px 14px; }
  .brand span { display: none; } /* subtitle: keep the row slim */
  .sidebar-foot { border-top: none; padding: 8px 14px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .userbox-text { display: none; } /* avatar stays as the signed-in cue */
  .role-badge { display: none; }
  .foot-actions .btn { flex: none; }
  .btn-label { display: none; } /* icon-only theme toggle */
  .nav {
    position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; flex: none;
    flex-direction: row; gap: 0; overflow-x: auto; overscroll-behavior-x: contain;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  .nav a { flex: 1 0 auto; flex-direction: column; gap: 2px; min-width: 58px; padding: 6px 8px; font-size: 10.5px; }
  /* As a tab it is icon-over-label like the rest: no bottom-pinning, and the
     trailing "leaves the app" mark would only stack a second icon under it. */
  .nav a.nav-external { margin-top: 0; }
  .nav a.nav-external .ico-end { display: none; }
  /* Two clocks don't fit beside the title on a phone — let them take their own
     row (still one line) instead of stacking on top of each other. */
  .topbar { padding: 14px 16px 0; flex-wrap: wrap; row-gap: 6px; }
  /* min-width/overflow: a freak-long city name clips instead of forcing the
     whole app to scroll sideways. */
  .topbar-right { font-size: 11.5px; gap: 10px; margin-left: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .clock-seg + .clock-seg { padding-left: 10px; }
  /* Keep content clear of the fixed tab bar. */
  main#content { padding: 14px 16px calc(78px + env(safe-area-inset-bottom)); }
}

/* Narrow phones, two clocks: trim the optional parts rather than wrap. */
@media (max-width: 520px) {
  .clock-dual .clock-you { display: none; } /* the city already says whose it is */
}
@media (max-width: 430px) {
  .clock-dual .clock-sec { display: none; } /* minutes are enough at this width */
}
@media (max-width: 380px) {
  .clock-dual { font-size: 10.5px; gap: 8px; }
  .clock-dual .clock-seg + .clock-seg { padding-left: 8px; }
}