/* =============================================================================
   app.css — Shared Design System (B2)
   School Admissions & Visitor App
   -----------------------------------------------------------------------------
   PURPOSE
     Single source of truth for design tokens + common components, to reduce the
     CSS duplicated across 132 HTML pages.

   USAGE
     Add this in <head>, before each page's own <style> block:
       <link rel="stylesheet" href="/static/app.css?v=3">
     (Served from project root via app.mount("/static", StaticFiles(directory=".")) )

   SAFE-BY-DEFAULT (IMPORTANT)
     Only :root tokens and @keyframes are global, and both are INERT:
       - tokens render nothing by themselves and a page's own :root overrides them
       - keyframes do nothing unless an `animation:` references them
     Every reset/base/component/utility rule is SCOPED under `.app-base`, so simply
     LINKING this file changes NOTHING on a page. This makes it safe to add the
     <link> to all 132 pages without any visual regression — even on pages that
     already use generic class names like .btn/.card/.table without defining them.

   MIGRATING A PAGE (opt-in, per page, when you choose)
     1. Add class="app-base" to the page's <body>.
     2. Delete the now-redundant token/reset/component rules from its <style>.
     3. Keep only page-unique CSS. Override brand color via :root{ --primary:#... }.
============================================================================= */

/* ------------------------------------------------------------------ Tokens */
/* Global + inert. A page's own :root (loaded after this file) overrides any
   token it redefines, so brand colors/fonts stay per-section. */
:root {
  /* Brand */
  --primary:        #667eea;
  --primary-light:  #818cf8;
  --primary-dark:   #4f46e5;
  --primary-bg:     #eef2ff;

  /* Accents (semantic) */
  --success:        #059669;
  --success-bg:     #ecfdf5;
  --danger:         #dc2626;
  --danger-bg:      #fef2f2;
  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --info:           #2563eb;
  --info-bg:        #eff6ff;

  /* Named accents kept for parity with existing pages */
  --teal:           #0d9488;
  --gold:           #d4af37;
  --purple:         #7c3aed;
  --pink:           #db2777;
  --ocean:          #0284c7;

  /* Neutrals */
  --bg:             #f4f6fb;
  --surface:        #ffffff;
  --white:          #ffffff;
  --text:           #1f2937;
  --muted:          #6b7280;
  --border:         #e5e7eb;
  --light:          #f9fafb;
  --sidebar:        #1e293b;

  /* Radius */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;

  /* Shadows */
  --shadow-sm:      0 1px 2px rgba(0,0,0,.06);
  --shadow:         0 2px 8px rgba(0,0,0,.08);
  --shadow-md:      0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:      0 10px 30px rgba(0,0,0,.15);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Typography */
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --fs-sm: 13px;
  --fs:    14px;
  --fs-lg: 16px;
}

/* Global keyframes (inert unless referenced by an `animation:`). Names match the
   per-page copies so a migrated page can delete its own duplicate. */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* =============================================================================
   Everything below is SCOPED to .app-base — dormant until a page opts in via
   <body class="app-base">. Linking this file does not apply any of it.
============================================================================= */

/* ------------------------------------------------------------------- Reset */
body.app-base,
.app-base *, .app-base *::before, .app-base *::after { box-sizing: border-box; }
/* include body.app-base so removing a page's own `*{margin:0;padding:0}` reset
   doesn't let the browser's default 8px body margin return. */
body.app-base,
.app-base *, .app-base *::before, .app-base *::after { margin: 0; padding: 0; }

/* -------------------------------------------------------------------- Base */
body.app-base {
  font-family: var(--font);
  font-size: var(--fs);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------- Buttons */
/* Canonical metrics chosen to match the codebase majority:
   padding 8px 16px, font-weight 700, border-radius 8px (most common across pages). */
.app-base .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 16px;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: var(--primary);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.app-base .btn:hover      { background: var(--primary-dark); }
.app-base .btn:active     { transform: translateY(1px); }
.app-base .btn:disabled,
.app-base .btn[disabled]  { opacity: .55; cursor: not-allowed; }

/* .btn-primary is used in markup on ~104 pages; make it explicit (same as base). */
.app-base .btn-primary    { background: var(--primary); color: #fff; }
.app-base .btn-primary:hover { background: var(--primary-dark); }
.app-base .btn-secondary  { background: var(--surface); color: var(--text); border-color: var(--border); }
.app-base .btn-secondary:hover { background: var(--light); }
.app-base .btn-success    { background: var(--success); }
.app-base .btn-success:hover { filter: brightness(.95); }
.app-base .btn-danger     { background: var(--danger); }
.app-base .btn-danger:hover { filter: brightness(.95); }
.app-base .btn-warning    { background: var(--warning); }
.app-base .btn-warning:hover { filter: brightness(.95); }
.app-base .btn-outline    { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.app-base .btn-outline:hover { background: var(--primary-bg); }
.app-base .btn-ghost      { background: transparent; color: var(--primary); }
.app-base .btn-ghost:hover{ background: var(--primary-bg); }
.app-base .btn-sm         { padding: 6px 12px; font-size: var(--fs-sm); }
.app-base .btn-lg         { padding: 14px 24px; font-size: var(--fs-lg); }
.app-base .btn-block      { display: flex; width: 100%; }

/* ------------------------------------------------------------------- Cards */
.app-base .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.app-base .card-header { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--space-4); }
.app-base .card-muted  { color: var(--muted); }

/* ------------------------------------------------------------------- Forms */
.app-base .form-group { margin-bottom: var(--space-4); }
.app-base .form-label { display: block; margin-bottom: var(--space-2); font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.app-base .form-control,
.app-base .input, .app-base select.input, .app-base textarea.input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.app-base .form-control:focus,
.app-base .input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

/* ------------------------------------------------------------------ Tables */
.app-base .table { width: 100%; border-collapse: collapse; font-size: var(--fs); }
.app-base .table th, .app-base .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.app-base .table th { font-weight: 700; color: var(--muted); background: var(--light); white-space: nowrap; }
.app-base .table tbody tr:hover { background: var(--light); }
.app-base .table-striped tbody tr:nth-child(even) { background: var(--light); }

/* ------------------------------------------------------------------ Badges */
.app-base .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: 999px;
  background: var(--light);
  color: var(--text);
}
.app-base .badge-success { background: var(--success-bg); color: var(--success); }
.app-base .badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.app-base .badge-warning { background: var(--warning-bg); color: var(--warning); }
.app-base .badge-info    { background: var(--info-bg);    color: var(--info); }

/* ------------------------------------------------------------------ Toasts */
.app-base .toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.app-base .toast {
  min-width: 260px;
  max-width: 380px;
  padding: 12px 16px;
  color: #fff;
  background: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs);
  animation: toast-in .2s ease;
}
/* Support BOTH contracts used in the codebase: dash (.toast-success) and the
   dominant dot variant (.toast.success) emitted by ~50 pages' JS. */
.app-base .toast-success, .app-base .toast.success { background: var(--success); color: #fff; }
.app-base .toast-error,   .app-base .toast.error   { background: var(--danger);  color: #fff; }
.app-base .toast-warning, .app-base .toast.warning { background: var(--warning); color: #fff; }
.app-base .toast-info,    .app-base .toast.info    { background: var(--info);    color: #fff; }

/* ------------------------------------------------------------------ Modals */
.app-base .modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .5);
}
.app-base .modal {
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.app-base .modal-header { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--space-4); }
.app-base .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }

/* --------------------------------------------------------------- Utilities */
.app-base .u-flex     { display: flex; }
.app-base .u-between  { display: flex; align-items: center; justify-content: space-between; }
.app-base .u-center   { display: flex; align-items: center; justify-content: center; }
.app-base .u-gap-2    { gap: var(--space-2); }
.app-base .u-gap-4    { gap: var(--space-4); }
.app-base .u-mt-4     { margin-top: var(--space-4); }
.app-base .u-mb-4     { margin-bottom: var(--space-4); }
.app-base .u-muted    { color: var(--muted); }
.app-base .u-right    { text-align: right; }
.app-base .u-center-text { text-align: center; }
.app-base .u-hidden   { display: none !important; }
.app-base .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
