/* Vitals Versus admin dashboard — branded styling layer on top of Tailwind.
 *
 * Mirrors the landing page's design system (landing/static/css/style.css):
 * Barlow Condensed (display) + DM Sans (body), deep navy + blue + gold
 * palette with medal-tier accents, 16px card radii, subtle texture.
 *
 * Kept intentionally small. Tailwind utilities still drive most layout;
 * this file adds typography, atmosphere, and branded component hooks.
 *
 * Fonts are loaded via <link> in index.html (not @import here) so the
 * browser can dispatch the request in parallel with CSS parsing. */

:root {
  /* Landing-aligned brand tokens also exposed as CSS variables for any
     element that wants to use them via var(--...) directly. app.js sets
     --brand / --brand-accent at runtime from the active org's config;
     --brand-default is the static VitalsVersus blue for fallbacks. */
  --brand-default: #185FA5;
  --navy: #0C447C;
  --sky: #378ADD;
  --deep: #061B35;
  --ice: #E6F1FB;
  --gold: #EF9F27;
  --gold-dim: #c6851f;
  --silver: #B4B2A9;
  --bronze: #CD7F32;
}

/* ===== Typography ===== */

body {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display-style heading: Barlow Condensed, uppercase, loose tracking.
   Opt-in via class so routine H3/H4 labels don't get shouted at. Applied
   to H1 page titles and the sidebar wordmark. */
.heading-display {
  font-family: 'Barlow Condensed', Barlow, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
}

/* ===== Sidebar atmosphere =====
   Deep navy base with a subtle 48×48 grid texture overlay matching the
   landing hero. Applied to the sidebar <aside>; the texture is behind
   content (no pointer-event cost because it's a background image). */

#sidebar.bg-deep {
  background-color: var(--deep);
  background-image:
    linear-gradient(rgba(230, 241, 251, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230, 241, 251, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 0 0;
}

/* Mobile app bar matches sidebar depth */
[data-testid="mobile-app-bar"].bg-deep {
  background-color: var(--deep);
}

/* ===== Buttons ===== */

/* Branded blue primary: add the landing's blue-tinted shadow to any
   button using bg-brand. Applied narrowly via attribute selector so we
   don't affect tertiary buttons that also use brand color. */
button.bg-brand,
a.bg-brand {
  box-shadow: 0 4px 16px rgba(24, 95, 165, 0.25);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
button.bg-brand:hover,
a.bg-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(24, 95, 165, 0.3);
}

/* Gold CTA variant — reserved for growth/upgrade/billing moments per the
   design decision. Use .btn-gold on a button or link. Intentionally
   opt-in so routine save/edit buttons stay brand-blue. */
.btn-gold {
  background-color: var(--gold);
  color: var(--deep);
  box-shadow: 0 4px 16px rgba(239, 159, 39, 0.3);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.btn-gold:hover {
  background-color: var(--gold-dim);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(239, 159, 39, 0.35);
}

/* ===== Medal accent utilities =====
   3px top-border accents for podium callouts. Pair with bg-white + rounded-xl
   to match landing's challenge-card treatment. */
.accent-gold   { border-top: 3px solid var(--gold); }
.accent-silver { border-top: 3px solid var(--silver); }
.accent-bronze { border-top: 3px solid var(--bronze); }

/* ===== Card hover lift =====
   Subtle rise + shadow bump matching the landing's challenge-card hover.
   Opt-in via .card-hover so static tables/forms aren't affected. */
.card-hover {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ===== Staggered reveal for Overview cards =====
   One well-orchestrated entrance on the dashboard's KPI tiles. Applied
   to children of [data-reveal="stagger"]; each child gets its own delay
   via nth-child. Respects prefers-reduced-motion. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-reveal="stagger"] > * {
  animation: rise-in 360ms ease-out both;
}
[data-reveal="stagger"] > *:nth-child(1) { animation-delay: 0ms; }
[data-reveal="stagger"] > *:nth-child(2) { animation-delay: 60ms; }
[data-reveal="stagger"] > *:nth-child(3) { animation-delay: 120ms; }
[data-reveal="stagger"] > *:nth-child(4) { animation-delay: 180ms; }
[data-reveal="stagger"] > *:nth-child(5) { animation-delay: 240ms; }
[data-reveal="stagger"] > *:nth-child(6) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal="stagger"] > * {
    animation: none;
  }
  button.bg-brand,
  a.bg-brand,
  .btn-gold,
  .card-hover {
    transition: none;
  }
  button.bg-brand:hover,
  a.bg-brand:hover,
  .btn-gold:hover,
  .card-hover:hover {
    transform: none;
  }
}