/* ────────────────────────────────────────────────────────────────────────────
   portal-theme.css — Design tokens + reusable component classes that mirror
   spartan-portal-web.html (the customer portal).

   Pulled in as a thin additive layer over the existing styles.css. Each new
   internal-CRM surface that ships from iteration 12 onward uses these
   classes — gives us a coherent visual language without a full rewrite.
   Existing pages keep their current look until we explicitly migrate them.

   Palette source: spartan-portal-web.html uses Tailwind's stone-* warm
   greys, white surface, black `#0A0A0A` sidebar, red `#a16207` accent.
   These tokens recreate that without pulling in Tailwind.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Surface */
  --portal-bg:        #FAFAF9;        /* warm body bg */
  --portal-surface:   #FFFFFF;        /* card bg */
  --portal-sidebar:   #0A0A0A;        /* dark sidebar */
  --portal-overlay:   rgba(10,10,10,.4);

  /* Stone palette (warm greys) */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;

  /* Brand */
  --spartan-red:        #a16207;
  --spartan-red-hover:  #854d0e;
  --spartan-red-soft:   #fefce8;

  /* Status colours (same as v1 styles.css so existing pages don't shift) */
  --status-green:  #15803D;
  --status-amber:  #B45309;
  --status-blue:   #1D4ED8;
  --status-purple: #7C3AED;

  /* Radius */
  --portal-radius-sm: 10px;
  --portal-radius-md: 14px;
  --portal-radius-lg: 16px;   /* rounded-2xl in Tailwind */
  --portal-radius-xl: 20px;

  /* Shadows */
  --portal-shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --portal-shadow-md:  0 4px 14px rgba(0,0,0,.08);
  --portal-shadow-lg:  0 10px 35px rgba(0,0,0,.2);

  /* Typography */
  --portal-font-display: 'Archivo', 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --portal-font-body:    'Archivo', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Display heading — 32-46px range tracked tight, matches portal hero H1s. */
.portal-h1 {
  font-family: var(--portal-font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--stone-900);
  margin: 0;
}

/* Section heading — used for "Recent team calls", "Today" etc. */
.portal-h2 {
  font-family: var(--portal-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.15;
  color: var(--stone-900);
  margin: 0;
}

/* Tiny uppercase label (the "QUOTE · SURVEY · DESIGN" track in the portal).
   Iter 33 fidelity pass: matches the spartan-portal-web source exactly —
   text-[10px] / uppercase / tracking-[0.22em] / text-stone-400 / font-semibold.
   The 0.22em tracking gives the label its airy, almost-spaced-out look that
   reads as design language rather than as a heading. */
.portal-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-400);
}

/* Card — `rounded-2xl border border-stone-200 bg-white p-5 lg:p-6` in
   Tailwind terms. Default padding is 16px; .portal-card-pad-lg bumps it. */
.portal-card {
  background: var(--portal-surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--portal-radius-lg);
  padding: 16px;
  box-shadow: var(--portal-shadow-sm);
}
.portal-card-pad-lg { padding: 20px 24px; }
.portal-card-flat    { box-shadow: none; }

/* Buttons */
.portal-btn-primary {
  background: var(--fos-plate);
  color: var(--fos-on-plate);
  border: none;
  border-radius: 10px;
  font-family: var(--portal-font-body);
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s;
}
.portal-btn-primary:hover { background: var(--fos-plate-hover); color: var(--fos-on-plate); }

.portal-btn-ghost {
  background: var(--portal-surface);
  color: var(--stone-700);
  border: 1px solid var(--stone-200);
  border-radius: 10px;
  font-family: var(--portal-font-body);
  font-weight: 500;
  font-size: 12.5px;
  padding: 7px 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, border-color .12s;
}
.portal-btn-ghost:hover { background: var(--stone-100); border-color: var(--stone-300); }

/* Chip/pill — used for status indicators inline with text. */
.portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.portal-chip-green  { background: #DCFCE7; color: var(--status-green); border: 1px solid #86EFAC; }
.portal-chip-amber  { background: #FEF3C7; color: var(--status-amber); border: 1px solid #FCD34D; }
.portal-chip-red    { background: var(--spartan-red-soft); color: var(--spartan-red); border: 1px solid #fde68a; }
.portal-chip-blue   { background: #DBEAFE; color: var(--status-blue); border: 1px solid #93C5FD; }
.portal-chip-stone  { background: var(--stone-100); color: var(--stone-700); border: 1px solid var(--stone-200); }

/* Divider — thin warm-grey line used between card sections. */
.portal-divider {
  border: none;
  border-top: 1px solid var(--stone-200);
  margin: 14px 0;
}

/* Two-tier "stat" — a tiny label above a big number. Used for KPI cards.
   Iter 33: stat-label aligned with portal-label exactly (text-[10px] /
   tracking-[0.22em] / stone-400 / 600). Stat value bumped to 26px Archivo
   with -.015em tracking to match the portal hero KPI tiles. */
.portal-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-400);
}
.portal-stat-value {
  font-family: var(--portal-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--stone-900);
  line-height: 1.05;
  margin-top: 6px;
}
.portal-stat-sub {
  font-size: 11.5px;
  color: var(--stone-500);
  margin-top: 2px;
}

/* Empty-state — the dashed grey card the portal shows when no data exists. */
.portal-empty {
  background: var(--portal-surface);
  border: 1px dashed var(--stone-300);
  border-radius: var(--portal-radius-md);
  padding: 28px 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--stone-500);
}

/* ── A-397: Today page — "your calendar for the day", bubble-timeline ──────
   A vertical rail (time label · connecting line + coloured dot · rounded
   "bubble" pill card) per activity, time-ordered, with a live pulsing "now"
   marker. modules/08j-today-page.js _todayTimelineBubbles(). ─────────────── */
.portal-tl { position: relative; padding: 2px 0; }
.portal-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 6px 0;
}
.portal-tl-time {
  width: 58px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--stone-500);
  font-variant-numeric: tabular-nums;
  padding-top: 11px;
}
.portal-tl-rail {
  position: relative;
  width: 14px;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding-top: 15px;
}
.portal-tl-rail::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 50%;
  width: 2px;
  background: var(--stone-200);
  transform: translateX(-50%);
}
.portal-tl-item:first-child .portal-tl-rail::before { top: 50%; }
.portal-tl-item:last-child .portal-tl-rail::before { bottom: 50%; }
.portal-tl-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1.5px currentColor;
}
.portal-tl-bubble-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-tl-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: 999px;
  padding: 7px 16px 7px 7px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.portal-tl-bubble:hover {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border-color: var(--stone-300);
}
/* Real checkbox — ticking routes through toggleActivityDone(), the one
   writer every surface (Calendar, mobile) shares. Custom-styled to sit
   cleanly inside the pill without looking like a stock OS checkbox. */
.portal-tl-check {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; flex-shrink: 0;
  border: 2px solid var(--stone-300);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.portal-tl-check:hover { border-color: var(--spartan-red); transform: scale(1.08); }
.portal-tl-check:checked {
  background: var(--status-green);
  border-color: var(--status-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
.portal-tl-bubble-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.portal-tl-bubble-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-tl-bubble-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.portal-tl-bubble-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--stone-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-tl-bubble-sub {
  font-size: 11px;
  color: var(--stone-500);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.portal-tl-bubble-open {
  font-size: 11px;
  font-weight: 700;
  color: var(--stone-500);
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
}
.portal-tl-item.is-past .portal-tl-bubble { opacity: .62; }
.portal-tl-item.is-done .portal-tl-bubble { background: var(--stone-50); }
.portal-tl-item.is-done .portal-tl-bubble-title { text-decoration: line-through; color: var(--stone-400); }

/* A-397 — inline "what's next" panel shown right under a bubble the instant
   it's ticked done (schedule a follow-up, or leave a note — both write
   through the app's real activity persistence, same as everywhere else). */
.portal-tl-followup {
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--portal-radius-md, 14px);
  padding: 12px 14px;
  animation: portal-tl-followup-in .15s ease;
}
@keyframes portal-tl-followup-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.portal-tl-followup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.portal-tl-followup-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone-900);
}
.portal-tl-followup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-tl-followup-form { display: flex; flex-direction: column; gap: 8px; }
.portal-tl-followup-form textarea.inp { resize: vertical; font-family: inherit; }

.portal-tl-now { display: flex; align-items: center; gap: 14px; padding: 3px 0 3px; }
.portal-tl-now-time {
  width: 58px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  color: var(--spartan-red);
  font-variant-numeric: tabular-nums;
}
.portal-tl-now-rail {
  position: relative;
  width: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-tl-now-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--spartan-red);
  box-shadow: 0 0 0 4px var(--spartan-red-soft);
  animation: portal-tl-pulse 1.8s ease-in-out infinite;
}
.portal-tl-now-line { flex: 1; height: 2px; background: var(--spartan-red); border-radius: 1px; }
@keyframes portal-tl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--spartan-red-soft); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}