/* ============================================================================
   SAGE shared stylesheet — design tokens + shell + components
   ----------------------------------------------------------------------------
   Every SAGE webapp page links this file and includes /shared/shell.js.
   Tokens are traceable to the CSVT brand: the Notion Style Guide (#styleguide)
   for the six brand colors + Poppins, and the carsharevt.org WP theme
   (carshare-vt/style.css) for the purple ramp, link color, button language,
   and accent tints. Living reference: /styleguide/ renders every component.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Purple ramp (from the WP theme — the brand's real neutral spine) */
  --purple-900: #38255a;
  --purple-800: #462f6f;   /* Deep Purple — chrome, headings, primary hover */
  --purple-700: #58437d;   /* links, solid buttons */
  --purple-400: #a297b7;   /* muted text on purple, outline borders */
  --purple-300: #d1cbdb;
  --purple-200: #e4e0ea;   /* borders, dividers */
  --purple-100: #f3f2f6;   /* washed backgrounds, hover fills */
  --purple-50:  #f9f8fa;

  /* Brand accents + text-safe darks + tints (tints from the WP theme) */
  --teal:       #18c9c9;
  --teal-700:   #0d7f7f;
  --teal-100:   #d1f4f4;
  --teal-50:    #effbfb;
  --green:      #4fc168;
  --green-700:  #2e7d44;
  --green-100:  #dcf3e1;
  --green-50:   #f0faf2;
  --orange:     #ff9a2c;
  --orange-700: #a35b00;
  --orange-100: #ffd5a9;
  --orange-50:  #fff4e6;
  --crimson:    #f43454;
  --crimson-700:#c11f3f;
  --crimson-800:#a51733;
  --crimson-100:#fddbe2;
  --crimson-50: #fef0f3;
  --yellow:     #ffde39;
  --yellow-50:  #fffbea;

  /* Semantic aliases — use these in page code, not raw colors */
  --color-link:    var(--purple-700);
  --color-success: var(--green-700);
  --color-warning: var(--orange-700);
  --color-danger:  var(--crimson-700);
  --color-info:    var(--teal-700);

  /* Text + surfaces (purple-tinted, not gray) */
  --text:        #2d2a33;
  --text-muted:  #6b6478;
  --text-faint:  #a29aad;
  --bg:          #f6f5f8;
  --surface:     #ffffff;
  --border:      var(--purple-200);
  --border-strong: var(--purple-300);

  --radius:    4px;
  --radius-lg: 8px;
  --shadow-1: 0 1px 3px rgba(70, 47, 111, 0.08);
  --shadow-2: 0 4px 24px rgba(70, 47, 111, 0.18);
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --speed: 150ms;
  --nav-w: 228px;
}

/* ---------------------------------------------------------------- base ---- */

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

html.sage-booting body { visibility: hidden; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4 { color: var(--purple-800); font-weight: 600; line-height: 1.3; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--text-muted); font-size: 12px; }
.amount { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- shell layout --- */
/* shell.js builds: body > aside.sage-nav + div.sage-right > header + main   */

body.sage { display: flex; min-height: 100vh; }
.sage-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sage-main { flex: 1; padding: 20px 24px; }

/* ------------------------------------------------------------- left nav --- */

.sage-nav {
  width: var(--nav-w);
  flex-shrink: 0;
  background: var(--purple-800);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 18px 0 12px;
}
.sage-nav .brand { padding: 0 20px 14px; }
.sage-nav .brand a { color: #fff; text-decoration: none; }
.sage-nav .brand .wordmark { font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.sage-nav .brand .wordmark .dot { color: var(--teal); }
.sage-nav .brand .org { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--purple-400); margin-top: 1px; }
.sage-nav .nav-scroll { flex: 1; overflow-y: auto; }
.sage-nav .group-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  color: var(--purple-400); padding: 14px 20px 4px;
}
.sage-nav .nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 20px 7px 17px;
  border-left: 3px solid transparent;
  color: var(--purple-300); font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: background var(--speed), color var(--speed);
}
.sage-nav .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.sage-nav .nav-item.active { background: var(--purple-700); color: #fff; border-left-color: var(--teal); }
.sage-nav .nav-item .ext { font-size: 11px; color: var(--purple-400); }
.sage-nav .nav-item.soon { cursor: default; color: var(--purple-400); }
.sage-nav .nav-item.soon:hover { background: transparent; color: var(--purple-400); }
.sage-nav .soon-chip {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.12); color: var(--purple-300);
  padding: 1px 6px; border-radius: 8px;
}
.sage-nav .nav-foot { padding: 10px 20px 0; font-size: 10px; color: var(--purple-400); }

/* --------------------------------------------------------------- topbar --- */

.sage-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 16px;
}
.sage-topbar .page-title { font-size: 15px; font-weight: 600; color: var(--purple-800); }
.sage-topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.sage-topbar .help-toggle { font-size: 13px; }
.sage-topbar .user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sage-topbar .user-chip img { width: 26px; height: 26px; border-radius: 50%; }
.sage-topbar .nav-burger {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--purple-800); padding: 2px 6px;
}

/* ------------------------------------------------------------ help panel -- */

.help-panel {
  background: var(--yellow-50);
  border-bottom: 1px solid #f0e6c0;
  padding: 16px 24px;
  font-size: 13px;
  max-width: 900px;
}
.help-panel p { margin-bottom: 8px; }
.help-panel ul, .help-panel ol { margin: 0 0 8px 20px; }
.help-panel li { margin-bottom: 6px; }
.help-panel h4 { font-size: 13px; margin: 10px 0 6px; }

/* ---------------------------------------------------------------- cards --- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 16px 20px;
}

/* ------------------------------------------------------------- stat bar --- */

.stat-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  display: flex; gap: 32px; align-items: baseline; flex-wrap: wrap;
}
.stat-bar .stat { display: flex; flex-direction: column; }
.stat-bar .stat-value { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-bar .stat-value.danger { color: var(--color-danger); }
.stat-bar .stat-value.success { color: var(--color-success); }
.stat-bar .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-top: 2px; }

/* ------------------------------------------------------------- controls --- */

.controls {
  background: var(--surface);
  padding: 12px 24px;
  border-bottom: 1px solid var(--purple-100);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.controls label { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.controls .meta { font-size: 12px; color: var(--text-faint); margin-left: auto; }

/* ---------------------------------------------------------------- table --- */

.table-wrap { overflow-x: auto; }
table.sage-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.sage-table thead th {
  background: var(--purple-50);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.sage-table tbody td {
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--purple-100);
  vertical-align: top;
}
.sage-table tbody tr:hover { background: var(--purple-50); }
.sage-table .member-link { font-weight: 600; }
.empty-msg { text-align: center; padding: 40px; color: var(--text-faint); font-size: 14px; }

/* ---------------------------------------------------------------- chips --- */

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.chip.sm { font-size: 10px; padding: 1px 7px; text-transform: uppercase; letter-spacing: 0.3px; }
.chip-teal    { background: var(--teal-100);    color: var(--teal-700); }
.chip-green   { background: var(--green-100);   color: var(--green-700); }
.chip-orange  { background: var(--orange-100);  color: var(--orange-700); }
.chip-red     { background: var(--crimson-100); color: var(--crimson-700); }
.chip-yellow  { background: var(--yellow-50);   color: var(--orange-700); }
.chip-purple  { background: var(--purple-100);  color: var(--purple-700); }
.chip-gray    { background: #ececee;            color: var(--text-muted); }
/* Semantic aliases — prefer these where the meaning is a status */
.chip-success { background: var(--green-100);   color: var(--green-700); }
.chip-warning { background: var(--orange-100);  color: var(--orange-700); }
.chip-danger  { background: var(--crimson-100); color: var(--crimson-700); }
.chip-info    { background: var(--teal-100);    color: var(--teal-700); }

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border: none; border-radius: var(--radius);
  font-family: var(--font); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background var(--speed), border-color var(--speed), color var(--speed);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.busy { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--purple-700); color: #fff; }
.btn-primary:hover { background: var(--purple-800); }
.btn-outline { background: var(--surface); border: 1px solid var(--border-strong); color: var(--purple-700); }
.btn-outline:hover { background: var(--purple-100); }
.btn-danger { background: var(--crimson-700); color: #fff; }
.btn-danger:hover { background: var(--crimson-800); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--purple-100); color: var(--text); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.busy::after {
  content: '';
  width: 12px; height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sage-spin 700ms linear infinite;
}
.btn-outline.busy::after, .btn-ghost.busy::after { border-color: var(--purple-300); border-top-color: var(--purple-700); }
@keyframes sage-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- forms --- */

.input, select.input, textarea.input {
  font-family: var(--font); font-size: 13px;
  color: var(--text);
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--speed), box-shadow var(--speed);
}
.input:focus {
  outline: none;
  border-color: var(--purple-400);
  box-shadow: 0 0 0 3px rgba(24, 201, 201, 0.25);
}
.input::placeholder { color: var(--text-faint); }
label.field { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; }

/* --------------------------------------------------------- modal/confirm -- */

.sage-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(70, 47, 111, 0.45);
  display: none; align-items: center; justify-content: center;
  z-index: 90;
}
.sage-modal-overlay.open { display: flex; }
.sage-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 24px 28px;
  width: 440px; max-width: 92vw;
  max-height: 88vh; overflow-y: auto;
}
.sage-modal h3 { font-size: 16px; margin-bottom: 4px; }
.sage-modal .modal-sub { color: var(--text-muted); font-size: 12px; margin-bottom: 16px; }
.sage-modal .modal-body { font-size: 13px; margin-bottom: 18px; }
.sage-modal .modal-body ul { margin: 8px 0 8px 20px; }
.sage-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------------------------------------------------------------- toast --- */

.sage-toasts {
  position: fixed; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 110;
}
.sage-toast {
  background: var(--purple-800); color: #fff;
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 10px 16px;
  font-size: 13px;
  max-width: 380px;
  animation: sage-toast-in 200ms ease;
}
.sage-toast.success { border-left-color: var(--green); }
.sage-toast.error { border-left-color: var(--crimson); }
@keyframes sage-toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- login --- */

.login-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
}
.login-overlay.open { display: flex; }
.login-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 40px 48px;
  text-align: center;
  max-width: 400px;
}
.login-card .wordmark { font-size: 26px; font-weight: 700; letter-spacing: 1px; color: var(--purple-800); }
.login-card .wordmark .dot { color: var(--teal); }
.login-card h2 { font-size: 15px; font-weight: 500; color: var(--text); margin: 6px 0 4px; }
.login-card p { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.login-card .login-err { color: var(--color-danger); font-size: 13px; margin-top: 12px; min-height: 16px; }
.login-card .gbtn { display: flex; justify-content: center; }

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 900px) {
  .sage-nav {
    position: fixed; top: 0; bottom: 0; left: 0;
    z-index: 95;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--shadow-2);
  }
  body.nav-open .sage-nav { transform: translateX(0); }
  .sage-topbar .nav-burger { display: block; }
  .sage-main { padding: 16px; }
}

/* Touch devices: iOS Safari auto-zooms the whole viewport when a focused field's
   font is under 16px — and doesn't zoom back out on blur, so the page looks
   "expanded" until the user pinches. 16px is exactly the threshold. Scoped to
   coarse pointers so desktop keeps the 13px density; body.sage specificity
   beats per-page element rules (e.g. Create Res Note's bare input/textarea). */
@media (hover: none) and (pointer: coarse) {
  body.sage input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body.sage select,
  body.sage textarea,
  body.sage .input { font-size: 16px; }
}