/* =============================================================================
   PLATFORM — Shared styles
   Loaded by ALL pages (platform + agent). Agent-specific CSS layers on top.
   Mobile-first. No frameworks.
   ============================================================================= */

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Maestren brand tokens ───────────────────────────────────────────────
     Brand palette: deep bone ground, near-black ink, burgundy signature accent,
     aged-brass secondary. Restraint = premium. Used by all new surfaces.
     ─────────────────────────────────────────────────────────────────────── */
  --brand-ground:        #FAF8F4;  /* bone — primary light background */
  --brand-ground-dark:   #0B0D10;  /* near-black — primary dark background */
  --brand-ink:           #15171C;  /* body text on light */
  --brand-ink-inverse:   #E8E6E1;  /* body text on dark */
  --brand-ink-muted:     #6E6B65;  /* secondary text on light */
  --brand-accent:        #8B2F2B;  /* burgundy — buttons, active states, brand moments */
  --brand-accent-hover:  #6E2220;
  --brand-accent-tint:   #F4EAE8;  /* very pale burgundy wash for hover backgrounds */
  --brand-brass:         #C9B88A;  /* muted accent — illustration, dividers, subtle highlights */
  --brand-hairline:      #E5E1D8;  /* divider lines on bone */

  /* Legacy tokens — retained so existing agent pages keep rendering while
     individual pages are migrated to brand tokens above. Do NOT add new
     references to these. */
  --blue:        #2563eb;
  --blue-light:  #eff6ff;
  --blue-dark:   #1d4ed8;
  --green:       #16a34a;
  --green-light: #f0fdf4;
  --amber:       #d97706;
  --amber-light: #fffbeb;
  --red:         #dc2626;
  --red-light:   #fef2f2;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-400:    #9ca3af;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-700:    #374151;
  --gray-800:    #1f2937;
  --gray-900:    #111827;
  --white:       #ffffff;

  --shadow-sm:   0 1px 2px rgba(0,0,0,.05);
  --shadow:      0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --radius:      8px;
  --radius-lg:   12px;

  /* Type stacks — Inter for UI, JetBrains Mono for numbers/IDs, system fallback */
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--brand-ink);
  background: var(--brand-ground);
  line-height: 1.55;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── Typography ──────────────────────────────────────────────────────────────
   Maestren type scale: big and quiet. Hero H1 generous, body at 16/1.55.
   ────────────────────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-size: 2.25rem;      /* 36px — bigger, quieter */
  font-weight: 600;        /* medium, not bold — confidence without shout */
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.text-sm  { font-size: 0.8125rem; }
.text-xs  { font-size: 0.75rem; }
.text-muted { color: var(--brand-ink-muted); }
.text-mono { font-family: var(--font-mono); }
.fw-600 { font-weight: 600; }

/* ── Maestren wordmark (header logo) ─────────────────────────────────────────
   Supports both <img> (preferred) and text fallback. When used as <img>, set
   a fixed pixel height via the class so we don't have to set it inline.
   ────────────────────────────────────────────────────────────────────────── */
.platform-header-logo {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--brand-ink);
  text-transform: lowercase;
}
img.platform-header-logo {
  display: block;
  height: 34px;
  width: auto;
  /* Compensate for Illustrator artboard padding around the glyph.
     Negative horizontal margin pulls the visual left-edge to container edge. */
  margin-left: -6px;
  /* The descender below the "n" means the PNG's geometric center sits BELOW
     the main letter block. Flex centering aligns the bounding box, which
     makes the letters appear high. Translate DOWN so the letter block sits
     at header center; the descender extends below it. */
  transform: translateY(5px);
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}
.container-lg {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--brand-accent);
  color: var(--brand-ground);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-accent-hover); }
.btn-secondary {
  background: var(--brand-ground);
  color: var(--brand-ink);
  border: 1px solid var(--brand-hairline);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.btn-danger {
  background: var(--red);
  color: var(--white);
}
.btn-sm { padding: 6px 12px; font-size: 0.8125rem; }
.btn-block { width: 100%; }

/* ── Form fields ───────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-ink-muted);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  padding: 10px 12px;
  border: 1px solid var(--brand-hairline);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-family: inherit;
  background: var(--brand-ground);
  color: var(--brand-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(139,47,43,.12);
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--brand-ground);
  border: 1px solid var(--brand-hairline);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* ── Auth page ─────────────────────────────────────────────────────────────── */
.auth-wrapper {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--brand-ground);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--brand-ground);
  border: 1px solid var(--brand-hairline);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
}
.auth-logo {
  text-align: center;
  margin-bottom: 24px;
}
.auth-logo h1 {
  font-size: 1.5rem;
  margin-top: 8px;
}
.auth-logo .logo-icon {
  font-size: 2.5rem;
}
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--brand-hairline);
}
.tab-btn {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--brand-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn.active {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

/* ── Form messages ─────────────────────────────────────────────────────────── */
.form-error {
  background: var(--red-light);
  color: var(--red);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
}
.form-success {
  background: var(--green-light);
  color: var(--green);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
}
.hidden { display: none !important; }

/* ── Alert banners ─────────────────────────────────────────────────────────── */
.alert-banner {
  background: var(--amber-light);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.8125rem;
  color: var(--brand-ink);
}
.alert-banner.info {
  background: var(--brand-accent-tint);
  border-color: var(--brand-accent);
  color: var(--brand-ink);
}

/* ── Category section (groups available agents on dashboard) ─────────────── */
.category-section {
  margin-bottom: 36px;
}
.category-section:last-child { margin-bottom: 0; }
.category-section-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--brand-hairline);
}
.category-section-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.category-section-tagline {
  font-size: 0.8125rem;
  color: var(--brand-ink-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Agent picker grid ─────────────────────────────────────────────────────── */
.agent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px) {
  .agent-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .agent-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1200px) {
  .agent-grid { grid-template-columns: repeat(4, 1fr); }
}

.agent-card {
  background: var(--brand-ground);
  border: 1px solid var(--brand-hairline);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.agent-card:hover {
  border-color: var(--brand-accent);
  background: var(--brand-accent-tint);
  transform: translateY(-1px);
  text-decoration: none;
}
.agent-card.active {
  border-color: var(--brand-accent);
}
.agent-card.locked {
  opacity: 0.5;
  cursor: default;
}
.agent-card-icon {
  font-size: 1.75rem;
  margin-bottom: 10px;
  filter: grayscale(0.2);
}
.agent-card-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}
.agent-card-desc {
  font-size: 0.8125rem;
  color: var(--brand-ink-muted);
  line-height: 1.5;
}
.agent-card-status {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--brand-ink-muted);
}
.agent-card-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-hairline);
}
.agent-card-status .dot.active {
  background: var(--brand-accent);
}

/* ── Platform header ─────────────────────────────────────────────────────────
   Header is full-width (for the sticky background + bottom hairline), but its
   contents are constrained to the same max-width as main so the wordmark
   aligns vertically with the dashboard column below.
   ────────────────────────────────────────────────────────────────────────── */
.platform-header {
  background: var(--brand-ground);
  border-bottom: 1px solid var(--brand-hairline);
  position: sticky;
  top: 0;
  z-index: 100;
}
.platform-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.platform-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-header-back {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--brand-ink-muted);
  cursor: pointer;
  border: none;
  background: none;
  padding: 4px 8px;
  border-radius: var(--radius);
}
.platform-header-back:hover { background: var(--brand-accent-tint); color: var(--brand-accent); }

.avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-accent);
  color: var(--brand-ground);
  border: none;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Toast notifications ───────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--gray-800);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.2s ease-out;
}
.toast.success { background: var(--green); }
.toast.error   { background: var(--red); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 520px) {
  .modal-overlay { align-items: center; padding: 24px; }
}
.modal {
  background: var(--brand-ground);
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 20px;
  animation: slideUp 0.2s ease-out;
}
@media (min-width: 520px) {
  .modal { border-radius: var(--radius-lg); }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px;
  color: var(--gray-400);
}

/* ── Bottom nav (used by agent dashboards) ─────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--brand-ground);
  border-top: 1px solid var(--brand-hairline);
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
  z-index: 100;
}
.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--brand-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.bottom-nav-btn .nav-icon { font-size: 1.25rem; }
.bottom-nav-btn.active { color: var(--brand-accent); }

/* ── Badge ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge-pending   { background: var(--gray-100); color: var(--gray-600); }
.badge-overdue   { background: var(--red-light); color: var(--red); }
.badge-chasing   { background: var(--amber-light); color: var(--amber); }
.badge-paused    { background: var(--amber-light); color: var(--amber); }
.badge-paid      { background: var(--green-light); color: var(--green); }
.badge-partial   { background: var(--brand-accent-tint); color: var(--brand-accent); }
.badge-disputed  { background: var(--red-light); color: var(--red); }
.badge-cancelled { background: var(--gray-100); color: var(--gray-400); }
.badge-new       { background: var(--brand-accent-tint); color: var(--brand-accent); }
.badge-active    { background: var(--green-light); color: var(--green); }

/* ── Timeline ──────────────────────────────────────────────────────────────── */
.timeline { padding-left: 20px; }
.timeline-item {
  position: relative;
  padding: 0 0 20px 16px;
  border-left: 2px solid var(--gray-100);
}
.timeline-item:last-child { border-left-color: transparent; }
.timeline-dot {
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gray-300);
  border: 2px solid var(--white);
}
.timeline-dot.sent   { background: var(--brand-accent); }
.timeline-dot.reply  { background: var(--amber); }
.timeline-dot.paid   { background: var(--green); }
.timeline-dot.system { background: var(--gray-400); }
.timeline-title { font-weight: 600; font-size: 0.875rem; }
.timeline-date  { font-size: 0.75rem; color: var(--gray-400); margin-top: 2px; }
.timeline-preview {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Detail rows ───────────────────────────────────────────────────────────── */
.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-50);
  font-size: 0.875rem;
}
.detail-label { color: var(--gray-500); }
.detail-value { font-weight: 600; }
.detail-value.overdue { color: var(--red); }

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-400);
}
.empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state h3 { color: var(--gray-600); margin-bottom: 6px; }
.empty-state p { font-size: 0.875rem; }

/* ── Filter chips ──────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}
.filter-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent;
  color: var(--brand-ink-muted);
  border: 1px solid var(--brand-hairline);
  cursor: pointer;
}
.filter-chip.active {
  background: var(--brand-accent);
  color: var(--brand-ground);
  border-color: var(--brand-accent);
}

/* ── Toggle switch ─────────────────────────────────────────────────────────── */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked + .toggle-slider {
  background: var(--brand-accent);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}