/* Añejo HUB — shared design tokens + mobile-first components.
   Brand: deep green + gold. Mobile-first; desktop widens the command center. */

:root {
  /* brand */
  --green: #1b3a2b;          /* deep green (theme color) */
  --green-700: #163414;
  --green-500: #1A3D2E;
  --green-200: #e7f0ea;
  --gold: #C6A85B;
  --gold-dark: #8B6B3E;
  --black: #0D0D0D;
  --cream: #F5F2EC;
  --cream-dark: #EAE5D8;
  --ink: #1A1A1A;
  --muted: #6b6b6b;
  --line: rgba(26, 61, 46, .15);
  --white: #ffffff;

  /* status */
  --ok: #2e7d4f;
  --warn: #C08418;
  --crit: #b3261e;
  --info: #2b6cb0;

  /* layout */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(13, 13, 13, .08);
  --nav-h: 60px;
  --nav-gap: 24px;   /* clearance between the last content and the fixed nav */
  --pad: 16px;
  --max: 1100px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Clear the fixed bottom nav — plus real breathing room.
     This used to be EXACTLY the nav height, so the last row of every page ended flush against the
     bar: technically scrollable into view, visually cut off, and impossible to tap comfortably.
     The extra --nav-gap means the final item always sits clear of the bar instead of touching it. */
  padding-bottom: calc(var(--nav-h) + var(--nav-gap) + env(safe-area-inset-bottom, 0px));
}

/* Anything the page pins to the bottom itself (action bars, sticky totals) must sit ABOVE the nav,
   not under it. Pages that add their own fixed footer should use this offset rather than
   hard-coding a number that drifts when --nav-h changes. */
.hub-above-nav {
  bottom: calc(var(--nav-h) + var(--nav-gap) + env(safe-area-inset-bottom, 0px));
}

a { color: var(--green); }

/* Keyboard focus ring. The browser default is invisible against the dark bar/nav and gets
   suppressed by resets, leaving keyboard users with no position indicator — make it explicit
   on every focusable control. :focus-visible only, so mouse clicks stay clean.

   Gold ALONE fails WCAG 2.2 SC 1.4.11: #C6A85B on the cream page background is only 2.05:1
   (3:1 required), and most controls sit on cream/white — so the gold ring is paired with a
   dark green halo, which carries the contrast on light surfaces (green-on-cream ≈ 11:1) while
   the gold keeps it visible on the dark app bar and nav. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--green);
}

/* ---------- App bar ---------- */
.hub-bar {
  background: var(--black);
  color: var(--gold);
  /* extra right padding reserves room for the fixed ☰ account button (top:10px; right:12px;
     width:38px) so it never overlaps the bar's right-side actions (lang toggle, etc.). */
  padding: 14px 58px 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.hub-bar h1 { font-size: 16px; letter-spacing: 3px; font-weight: 700; }
.hub-bar .hub-bar-actions { display: flex; gap: 8px; align-items: center; }
.hub-bar button {
  background: none;
  border: 1px solid rgba(198, 168, 91, .4);
  color: var(--gold);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

/* ---------- Layout wrap ---------- */
.hub-wrap { max-width: var(--max); margin: 0 auto; padding: var(--pad); }
.hub-section { margin-bottom: 22px; }
.hub-section > h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.card.accent { border-left: 5px solid var(--gold); }
.card.accent-green { border-left: 5px solid var(--green); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* stat tiles */
.stat { text-align: left; }
.stat .stat-num { font-size: 28px; font-weight: 800; color: var(--green); line-height: 1; }
.stat .stat-label { font-size: 12px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- List rows ---------- */
.list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: none; }
.row .row-main { flex: 1; min-width: 0; }
.row .row-title { font-weight: 600; }
.row .row-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- Badges / status ---------- */
.badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--cream-dark);
  color: var(--muted);
}
.badge.ok { background: var(--green-200); color: var(--ok); }
.badge.warn { background: #fbf3da; color: var(--gold-dark); }
.badge.crit { background: #fbe3e1; color: var(--crit); }
.badge.info { background: #e6eff7; color: var(--info); }

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--white);
  color: var(--ink);
}
/* Checkboxes & radios must NOT inherit the full-width text-input sizing above — that
   stretched the box across the row and pushed its label far off to the right. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  flex: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
textarea { min-height: 90px; resize: vertical; }
.field { margin-bottom: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: var(--green);
  color: var(--cream);
}
.btn.gold { background: var(--gold); color: var(--black); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--green); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Bottom nav ---------- */
.hub-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--green-700);
  display: flex;
  z-index: 20;
  /* Scroll horizontally when there are more tabs than fit (e.g. owner has 11) so none are cut
     off on mobile; fills the width on desktop. Hidden scrollbar for a clean fixed bar. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hub-nav::-webkit-scrollbar { display: none; }
.hub-nav a {
  flex: 1 0 auto;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: rgba(245, 242, 236, .65);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .5px;
}
.hub-nav a .nav-ico { font-size: 20px; line-height: 1; }
.hub-nav a.active { color: var(--gold); }

/* The shared EN/ES toggle (#langToggle) is fixed bottom-left and would cover the bottom
   nav's first tab on the HUB. Lift it above the fixed mobile nav; reset on desktop where
   the nav is static (see 900px breakpoint below). */
#langToggle { bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; z-index: 25 !important; }

/* ---------- Install prompt + toasts ---------- */
.hub-install {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(13, 13, 13, .18);
  z-index: 30;
  align-items: center;
  gap: 10px;
}
.hub-install.show { display: flex; }
.hub-install .grow { flex: 1; font-size: 13px; }

.hub-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom, 0px));
  background: var(--black);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  transition: opacity .2s;
  z-index: 40;
  pointer-events: none;
}
.hub-toast.show { opacity: 1; }

/* ---------- Loading / empty ---------- */
.hub-loading, .hub-empty { text-align: center; color: var(--muted); padding: 48px 16px; }

/* ---------- Desktop (all HUB roles) ---------- */
@media (min-width: 900px) {
  /* Bottom nav stays FIXED on desktop too (inherits position:fixed/bottom:0 + the dark
     green bar from the base rule) so every role's pages keep the menu visible at all
     times — no scrolling to the bottom to switch pages. body keeps its base
     padding-bottom (= nav height) so content never hides behind the bar. */
  .hub-nav a {
    flex: 1 1 auto;           /* items share the bar width evenly — fits any count (5–7) without overflow */
    flex-direction: row;
    gap: 8px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }
  .hub-nav a .nav-ico { font-size: 18px; }
  /* active tab = gold text (base rule); the EN/ES toggle stays lifted above the fixed
     bar via the base #langToggle rule. */
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hub-toast { transition: none; }
}