/* ============================================================
   Tony's Tools -- shared brand shell
   One source of truth for fonts, palette, and the unified topbar
   across every internal-tools page (scheduling + analytics).
   Matches the public ordering site (tonyspizzeriaabq.com).
   Loaded AFTER each page's inline <style> so it wins on equal
   specificity -- this is what reskins the older scheduling pages.
   ============================================================ */

/* ---- Brand typefaces (Typekit, same as the public site) ---- */
@font-face { font-family: new-spirit; src: url(https://use.typekit.net/af/fda8af/00000000000000007735c4bc/31/l?subset_id=2&fvd=n5&v=3) format("woff2"), url(https://use.typekit.net/af/fda8af/00000000000000007735c4bc/31/d?subset_id=2&fvd=n5&v=3) format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: new-spirit; src: url(https://use.typekit.net/af/1f5fff/00000000000000007735c4c0/31/l?subset_id=2&fvd=n7&v=3) format("woff2"), url(https://use.typekit.net/af/1f5fff/00000000000000007735c4c0/31/d?subset_id=2&fvd=n7&v=3) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: array-mono; src: url(https://use.typekit.net/af/4f657e/00000000000000007735cc67/31/l?subset_id=2&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/4f657e/00000000000000007735cc67/31/d?subset_id=2&fvd=n4&v=3) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: array-mono; src: url(https://use.typekit.net/af/8a0415/00000000000000007735cc6c/31/l?subset_id=2&fvd=n7&v=3) format("woff2"), url(https://use.typekit.net/af/8a0415/00000000000000007735cc6c/31/d?subset_id=2&fvd=n7&v=3) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: array-mono; src: url(https://use.typekit.net/af/4da107/00000000000000007735cc6a/31/l?subset_id=2&fvd=i4&v=3) format("woff2"), url(https://use.typekit.net/af/4da107/00000000000000007735cc6a/31/d?subset_id=2&fvd=i4&v=3) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---- Brand palette (same tokens as the analytics dashboard) ---- */
:root {
  --red: hsl(357, 85%, 52%);
  --red-dark: hsl(357, 85%, 40%);
  --red-faded: hsl(357, 40%, 70%);
  --yellow: hsl(48, 98%, 68%);
  --sage: hsl(77, 31%, 76%);
  --cream: hsl(40, 49%, 92%);
  --black: #2D1810;
  --white: #ffffff;
  --heading: new-spirit, Georgia, 'Times New Roman', serif;
  --mono: array-mono, 'Courier New', Courier, monospace;
  --brand-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
  --brand-shadow-lg: 0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06);
  /* Notch / status-bar safe areas (0 unless launched as an installed app on a
     device with insets). Used so the sticky topbar clears the status bar.
     Kept as variables so the shoot script can simulate a notch for review. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ---- Base typography -> brand ---- */
body {
  margin: 0;                 /* full-bleed topbar: don't let the UA's 8px body
                                margin inset the sticky header on pages that
                                lack their own reset (e.g. operations). */
  font-family: var(--mono);
  background: var(--cream);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .page-header h1, .page-title {
  font-family: var(--heading);
  letter-spacing: -0.01em;
}

/* ============================================================
   Unified topbar  (identical on every page)
   ============================================================ */
.topbar {
  background: var(--red);
  padding: 0 1.5rem;
  height: auto;
  min-height: 56px;
  display: flex;
  align-items: stretch;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-bottom: none;
  flex-wrap: wrap;
}

.topbar-brand {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 0;
  margin-right: 2rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
}
.topbar-brand span { font-family: var(--heading); font-weight: 700; }
.topbar-brand .logo {
  width: 34px; height: 34px;
  background: var(--cream);
  border-radius: 8px;
  display: grid; place-items: center;
  overflow: hidden;
}
.topbar-brand .logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 3px;
}

/* Top-level section navigation (real links between pages) */
.topnav {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  align-items: stretch;
  /* Right-align the nav on every page from this single source, so it doesn't
     depend on each page's inline .topbar rules (some set justify-content,
     some don't — which made the nav jump left/right between tabs). */
  margin-left: auto;
}
.topnav .nav-link {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-faded);
  background: none;
  border: none;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.topnav .nav-link:hover { color: var(--cream); background: none; }
.topnav .nav-link.active { color: var(--cream); font-weight: 700; background: none; }
.topnav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 1.1rem; right: 1.1rem;
  height: 3px;
  background: var(--yellow);
  border-radius: 3px 3px 0 0;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Desktop sign-out button (the mobile drawer has its own .nav-drawer-logout).
   Sits at the far right of the topbar, visually distinct from the nav links. */
.topbar-logout {
  align-self: center;
  margin-left: 1.25rem;
  padding: 0.45rem 0.95rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-faded);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--red-faded);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topbar-logout:hover { background: var(--cream); color: var(--red); border-color: var(--cream); }

/* Secondary bar -- page-specific controls (e.g. analytics sub-tabs) */
.subbar {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.5rem;
  flex-wrap: wrap;
  position: sticky;
  top: 56px;
  z-index: 99;
}
.subbar .tab-btn { color: #9a8d83; }
.subbar .tab-btn:hover { color: var(--black); }
.subbar .tab-btn.active { color: var(--red); }
.subbar .tab-btn.active::after { background: var(--red); }

/* ============================================================
   Mobile app shell — hamburger + slide-in drawer
   The drawer markup is injected by /app.js from the existing
   .topnav links, so every page gets it for free. Hidden on
   desktop; the topnav stays the primary nav there.
   ============================================================ */

/* Animated hamburger button (hidden until mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-right: 0.5rem;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  align-self: center;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Scrim + drawer */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(45,24,16,0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 998;
}
.nav-scrim.open { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: var(--cream);
  box-shadow: 6px 0 28px rgba(0,0,0,0.25);
  transform: translateX(-104%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: max(var(--safe-top), 0.5rem) 0 max(var(--safe-bottom), 0.75rem);
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 1.25rem 1rem;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--black);
  border-bottom: 1px solid rgba(45,24,16,0.1);
}
.nav-drawer-logo {
  width: 34px; height: 34px;
  background: var(--red);
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 1.05rem;
}

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  gap: 2px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.nav-drawer-link {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--black);
  text-decoration: none;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.nav-drawer-link:hover { background: rgba(45,24,16,0.06); }
.nav-drawer-link.active {
  background: var(--red);
  color: var(--cream);
}

.nav-drawer-logout {
  margin: 0.5rem 1rem 0;
  padding: 0.8rem 1rem;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red-dark);
  text-decoration: none;
  border: 1px solid var(--red-faded);
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.nav-drawer-logout:hover { background: var(--red); color: var(--cream); border-color: var(--red); }

body.nav-open { overflow: hidden; }

/* ---- The mobile breakpoint ---- */
@media (max-width: 720px) {
  .topbar {
    /* Longhand padding so the safe-area top inset is never clobbered by a
       shorthand. On an installed app with a notch, --safe-top pushes the
       hamburger + brand clear of the status bar; in a browser it's 0px. */
    padding-top: max(var(--safe-top), 0.4rem);
    padding-bottom: 0.4rem;
    padding-left: max(var(--safe-left), 0.75rem);
    padding-right: max(var(--safe-right), 0.75rem);
    flex-wrap: wrap;            /* page-specific controls (e.g. analytics) wrap below */
    min-height: 56px;
    align-items: center;
    row-gap: 0.4rem;
  }
  /* Keep the secondary bar docked just under the (now taller) topbar. */
  .subbar { top: calc(56px + max(var(--safe-top), 0px)); }
  .topbar-brand { margin-right: auto; font-size: 1.05rem; padding: 0; }
  /* Beats the per-page `.topbar nav { display:flex }` (0,1,1) inline rules. */
  .topbar nav.topnav { display: none; }   /* replaced by the drawer */
  .topbar-logout { display: none; }        /* sign-out lives in the drawer on mobile */
  .nav-toggle { display: flex; }
  .topbar-right { gap: 0.4rem; }
  /* Tighten generic page padding so content gets the width on phones */
  .wrap, .container, main { padding-left: 0.85rem; padding-right: 0.85rem; }
}