/* ZOVVA authenticated app shell — layout only.
   Reuses every color token from /assets/site.css (--bg/--surface/--card/
   --border/--text/--text-dim/--btn-bg/--btn-text/--radius) verbatim — no
   palette is redefined here. site.css must be linked BEFORE this file (see
   app/index.html) so these custom properties already exist.

   Logical (flow-relative) properties are used throughout instead of
   left/right — margin-inline-*, padding-inline-*, inset-inline-*,
   border-inline-* — so the sidebar/nav mirror correctly under [dir="rtl"]
   automatically, without a parallel set of RTL overrides. The one thing
   logical properties can't do (mirroring an inherently directional glyph)
   gets an explicit [dir="rtl"] rule near the bottom of this file. */

html, body { height: 100%; }

#app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.app-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* ── Sidebar / nav (desktop & tablet: a left sidebar; see the narrow-width
   media query below for the bottom-bar layout) ─────────────────────────── */

#app-nav {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#app-nav[hidden] { display: none; }

.app-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.app-nav-brand img { width: 26px; height: 26px; border-radius: 7px; }

.app-nav-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.app-nav-link,
.app-nav-signout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: calc(var(--radius) * 0.65);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: start;
}

.app-nav-link .icon,
.app-nav-signout .icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.app-nav-link:hover,
.app-nav-signout:hover {
  background: var(--card);
  color: var(--text);
}

.app-nav-link.active {
  background: var(--card);
  color: var(--text);
  border-inline-start: 3px solid var(--text);
  padding-inline-start: 9px; /* 12px - 3px border, keeps content aligned */
}

.app-nav-footer {
  padding: 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Content area ────────────────────────────────────────────────────── */

#app-content {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 90px;
}

/* A login/register screen has no sidebar — center it and drop the reserved
   sidebar gutter entirely rather than leaving empty space. */
body.is-auth-page #app-content {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.route-unavailable {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.route-unavailable .path {
  margin-top: 6px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Auth screens (login / register) ────────────────────────────────────
   A focused card, not the sidebar shell — reuses .btn/.btn-primary/
   .card-block/.notice from site.css so it looks like the rest of the site,
   not a second design system. */

.auth-screen {
  width: min(380px, 92vw);
  padding: 20px;
}

.auth-screen .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 22px;
}

.auth-screen .brand img { width: 28px; height: 28px; border-radius: 7px; }

.auth-screen h1 { font-size: 20px; margin: 0 0 4px; text-align: center; }
.auth-screen p.sub { margin: 0 0 22px; font-size: 13px; color: var(--text-dim); text-align: center; }

.auth-screen label { display: block; font-size: 12.5px; font-weight: 600; margin: 14px 0 4px; }

.auth-screen input {
  width: 100%;
  padding: 10px 12px;
  border-radius: calc(var(--radius) * 0.65);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.auth-screen .err {
  color: #c0392b;
  font-size: 12.5px;
  min-height: 16px;
  margin-top: 10px;
}

.auth-screen .row { display: flex; gap: 10px; margin-top: 18px; }
.auth-screen .row .btn { flex: 1; justify-content: center; }

.auth-screen .divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--text-dim);
  font-size: 12px;
}
.auth-screen .divider::before,
.auth-screen .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-screen .switch-link {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-dim);
}

/* ── Tablet width (769–1024px): still a sidebar, just a tighter one ─────
   A genuine intermediate tier rather than desktop's 240px sidebar holding
   all the way down to the 768px bottom-bar switch — at ~800px that gutter
   is a big fraction of the viewport. Narrows the rail and trims the
   content padding; nothing structural changes, so no new overflow risk. */

@media (min-width: 769px) and (max-width: 1024px) {
  #app-nav { width: 200px; }
  .app-nav-brand { padding: 16px; font-size: 15px; }
  .app-nav-link,
  .app-nav-signout { font-size: 13px; }
  #app-content { padding: 24px 24px 90px; }
}

/* ── Narrow / mobile-browser width: bottom bar instead of sidebar ──────── */

@media (max-width: 768px) {
  #app-shell { flex-direction: column; }

  #app-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    border-inline-end: none;
    border-top: 1px solid var(--border);
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .app-nav-brand { display: none; }

  /* 10 destinations + Sign Out do not fit a phone width without either
     truncating labels ("Dres…") or overlapping. Instead: give every item
     its natural width and let the bar scroll horizontally — a known,
     legible pattern — with the scrollbar itself hidden (nav.js scrolls the
     active item into view on each route change so it is never off-screen
     on load). */
  .app-nav-list {
    flex-direction: row;
    padding: 4px 4px;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .app-nav-list::-webkit-scrollbar { display: none; }

  .app-nav-link,
  .app-nav-signout {
    flex: 0 0 auto;
    width: auto;
    min-width: 60px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 6px 8px;
    white-space: nowrap;
    border-radius: 0;
  }

  .app-nav-link.active {
    border-inline-start: none;
    border-top: 2px solid var(--text);
    padding-inline-start: 8px;
    padding-top: 4px;
  }

  .app-nav-footer {
    border-top: none;
    border-inline-start: 1px solid var(--border);
    padding: 0;
    flex: 0 0 auto;
  }

  #app-content {
    padding: 18px 16px calc(84px + env(safe-area-inset-bottom, 0));
  }

  body.is-auth-page #app-content {
    padding: 0;
  }
}

/* ── RTL: the one thing logical properties don't cover automatically —
   a directional affordance glyph, if a page ever adds one inside the
   shell chrome. Kept here (rather than left unaddressed) per the brief's
   explicit callout that naive `direction: rtl` alone misses icon
   mirroring. Nav icons in js/nav.js are deliberately symmetric emoji
   (no chevrons/arrows), so there is nothing to mirror in the shell today;
   this rule is future-proofing for the day one is added. */
[dir="rtl"] .icon-mirror { transform: scaleX(-1); }