/* =========================================================================
   MapAnything — Enterprise Design System
   Single source of truth for surfaces, typography, and components.
   ========================================================================= */

/* ----- Design tokens -------------------------------------------------- */
:root {
  /* Brand */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  /* Slate neutrals */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Semantic colors */
  --success-500: #10b981;
  --success-600: #059669;
  --success-50:  #ecfdf5;
  --success-100: #d1fae5;
  --success-200: #a7f3d0;
  --success-700: #047857;

  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-700: #b45309;

  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-700: #b91c1c;

  --info-500:   #0ea5e9;
  --info-600:   #0284c7;
  --info-50:    #f0f9ff;
  --info-100:   #e0f2fe;

  /* Surfaces */
  --bg-app:        #f6f8fb;
  --bg-surface:    #ffffff;
  --bg-muted:      var(--slate-50);
  --bg-subtle:     var(--slate-100);

  /* Text */
  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-700);
  --text-tertiary:  var(--slate-500);
  --text-muted:     var(--slate-400);
  --text-inverse:   #ffffff;
  --text-brand:     var(--brand-700);

  /* Borders */
  --border-subtle: var(--slate-100);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-focus:  var(--brand-500);

  /* Brand surfaces (alias) */
  --brand:         var(--brand-600);
  --brand-hover:   var(--brand-700);
  --brand-active:  var(--brand-800);
  --brand-soft:    var(--brand-50);
  --brand-soft-2:  var(--brand-100);
  --brand-on-soft: var(--brand-700);

  /* Nav (always dark) */
  --nav-bg:           #0a0f1e;
  --nav-bg-2:         #111a30;
  --nav-border:       rgba(255, 255, 255, .06);
  --nav-text:         rgba(255, 255, 255, .68);
  --nav-text-hover:   #ffffff;
  --nav-text-active:  #ffffff;
  --nav-active-bg:    rgba(255, 255, 255, .07);
  --nav-pill-bg:      var(--brand-600);
  --nav-pill-hover:   var(--brand-700);

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, .05), 0 12px 24px rgba(15, 23, 42, .08);
  --shadow-xl: 0 12px 24px rgba(15, 23, 42, .08), 0 24px 56px rgba(15, 23, 42, .12);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, .18);
  --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, .18);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 999px;

  /* Spacing scale used in components */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-10: 56px;
  --sp-12: 72px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.8125rem;   /* 13 */
  --fs-base: 0.875rem;    /* 14 */
  --fs-md:   0.9375rem;   /* 15 */
  --fs-lg:   1.0625rem;   /* 17 */
  --fs-xl:   1.25rem;     /* 20 */
  --fs-2xl:  1.5rem;      /* 24 */
  --fs-3xl:  1.875rem;    /* 30 */
  --fs-4xl:  2.5rem;      /* 40 */
  --fs-5xl:  3.25rem;     /* 52 */

  --lh-tight:  1.18;
  --lh-snug:   1.32;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.1em;
}

/* ----- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
button { font: inherit; color: inherit; cursor: pointer; }
code, pre, kbd, samp { font-family: var(--font-mono); }

/* ----- Focus ring (accessibility) ------------------------------------ */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ----- Layout helpers ------------------------------------------------- */
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-6); }
.container-narrow { max-width: 920px; margin-inline: auto; padding-inline: var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.muted { color: var(--text-tertiary); }
.subtle { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

/* =========================================================================
   Top navigation (shared shell)
   ========================================================================= */
.appbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(8px);
}
.appbar-inner {
  max-width: 1280px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-6); height: 60px;
}
.appbar-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1rem; letter-spacing: var(--tracking-tight);
  color: #fff;
}
.appbar-brand:hover { color: #fff; }
.appbar-brand .brand-mark {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.appbar-brand .brand-name b { font-weight: 700; color: #fff; }
.appbar-brand .brand-name i {
  font-style: normal; font-weight: 600;
  background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.appbar-nav { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.appbar-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--nav-text);
  font-size: var(--fs-sm); font-weight: 500;
  padding: 7px 12px; border-radius: var(--r-sm);
  transition: background .12s ease, color .12s ease;
}
.appbar-nav a:hover { color: var(--nav-text-hover); background: var(--nav-active-bg); }
.appbar-nav a.is-active { color: var(--nav-text-active); background: var(--nav-active-bg); }

.appbar-spacer { flex: 1; }

.appbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.appbar-actions a {
  color: var(--nav-text); font-size: var(--fs-sm); font-weight: 500;
  padding: 7px 12px; border-radius: var(--r-sm);
}
.appbar-actions a:hover { color: var(--nav-text-hover); background: var(--nav-active-bg); }

.appbar-cta {
  background: var(--brand-600) !important; color: #fff !important;
  padding: 8px 16px !important; border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px rgba(79, 70, 229, .35);
  transition: background .12s, transform .08s;
}
.appbar-cta:hover { background: var(--brand-700) !important; }
.appbar-cta:active { transform: translateY(1px); }

.appbar-user {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: rgba(255,255,255,.6); font-size: var(--fs-sm);
  padding-left: var(--sp-3); border-left: 1px solid var(--nav-border);
  margin-left: var(--sp-2);
}
.appbar-user .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Page header bar */
.page-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.page-header-inner {
  max-width: 1280px; margin-inline: auto; padding: var(--sp-5) var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.page-eyebrow {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-tertiary);
}
.page-title {
  font-size: var(--fs-2xl); font-weight: 700;
  letter-spacing: var(--tracking-tight); color: var(--text-primary);
}
.page-sub { font-size: var(--fs-md); color: var(--text-tertiary); margin-top: 2px; }
.page-header-meta { margin-left: auto; display: flex; gap: var(--sp-2); }

.page-shell { max-width: 1280px; margin-inline: auto; padding: var(--sp-7) var(--sp-6); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600;
  line-height: 1; white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .08s ease;
  text-decoration: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--brand-600); color: #fff; border-color: var(--brand-600);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn-primary:focus-visible { box-shadow: var(--shadow-focus); }

.btn-secondary {
  background: #fff; color: var(--text-secondary);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-muted); color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent; color: var(--text-secondary); border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-muted); color: var(--text-primary); }

.btn-danger {
  background: #fff; color: var(--danger-600); border-color: var(--danger-200);
  box-shadow: var(--shadow-xs);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-50); border-color: var(--danger-300, #fca5a5); }
.btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); }

.btn-solid-danger {
  background: var(--danger-600); color: #fff; border-color: var(--danger-600);
}
.btn-solid-danger:hover:not(:disabled) { background: var(--danger-700); border-color: var(--danger-700); }

.btn-sm  { padding: 6px 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-xs  { padding: 4px 9px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-lg  { padding: 12px 22px; font-size: var(--fs-md); }
.btn-xl  { padding: 14px 28px; font-size: var(--fs-lg); border-radius: var(--r-lg); }
.btn-block { width: 100%; }

.btn-icon { padding: 8px; aspect-ratio: 1 / 1; }
.btn-icon.btn-sm { padding: 5px; }

.btn-group {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  overflow: hidden; background: #fff;
}
.btn-group .btn {
  border-radius: 0; border-color: transparent;
  border-right: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn-group .btn:last-child { border-right: none; }
.btn-group .btn.is-active { background: var(--brand-50); color: var(--brand-700); }

/* Google sign-in style */
.btn-google {
  background: #fff; color: var(--text-secondary);
  border: 1px solid var(--border-strong); display: flex; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-md); font-weight: 600;
  width: 100%; justify-content: center;
}
.btn-google:hover { background: var(--bg-muted); color: var(--text-primary); }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* =========================================================================
   Cards & surfaces
   ========================================================================= */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.card-elevated { box-shadow: var(--shadow-md); }
.card-hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}
.card-hd-stack { display: flex; flex-direction: column; gap: 2px; }
.card-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); letter-spacing: var(--tracking-tight); }
.card-sub   { font-size: var(--fs-sm); color: var(--text-tertiary); }
.card-bd    { padding: var(--sp-5); }
.card-ft    { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-subtle); background: var(--bg-muted); }

.section-stack > * + * { margin-top: var(--sp-5); }

/* Stat tiles */
.stat-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.stat-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 6px;
}
.stat-card .sl {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600;
}
.stat-card .sv {
  font-size: 1.8rem; font-weight: 800;
  color: var(--text-primary); letter-spacing: var(--tracking-tight); line-height: 1;
}
.stat-card .sd {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  display: inline-flex; align-items: center; gap: 4px;
}
.stat-card.brand .sv  { color: var(--brand-700); }
.stat-card.blue .sv   { color: var(--brand-700); }
.stat-card.green .sv  { color: var(--success-600); }
.stat-card.amber .sv  { color: var(--warning-600); }
.stat-card.red   .sv  { color: var(--danger-600); }

/* =========================================================================
   Badges
   ========================================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-soft { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
.badge-brand { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.badge-success, .badge-online, .badge-paid {
  background: var(--success-50); color: var(--success-700); border-color: var(--success-200);
}
.badge-warning, .badge-idle, .badge-pending, .badge-high {
  background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-200);
}
.badge-danger, .badge-offline, .badge-urgent {
  background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-200);
}
.badge-info, .badge-resolved {
  background: var(--info-50); color: var(--info-600); border-color: #bae6fd;
}
.badge-purple, .badge-superadmin {
  background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe;
}
.badge-admin   { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.badge-free    { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
.badge-grey    { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
.badge-blue    { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.badge-green   { background: var(--success-50); color: var(--success-700); border-color: var(--success-200); }
.badge-red     { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-200); }
.badge-orange  { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-200); }
.badge-open    { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-200); }
.badge-closed  { background: var(--bg-subtle); color: var(--text-tertiary); border-color: var(--border); }
.badge-low     { background: var(--bg-subtle); color: var(--text-tertiary); border-color: var(--border); }
.badge-normal  { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

.badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}

/* =========================================================================
   Tables
   ========================================================================= */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl, .tbl-wrap > table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-base);
}
.tbl-wrap > table thead th, table.tbl thead th {
  background: var(--bg-muted);
  text-align: left;
  padding: 10px 16px;
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
.tbl-wrap > table tbody td, table.tbl tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.tbl-wrap > table tbody tr:last-child td, table.tbl tbody tr:last-child td { border-bottom: none; }
.tbl-wrap > table tbody tr:hover td, table.tbl tbody tr:hover td { background: var(--bg-muted); }
.td-link { color: var(--brand); font-weight: 600; }
.td-link:hover { text-decoration: underline; }
.td-mono { font-family: var(--font-mono); font-size: .8em; color: var(--text-tertiary); }

/* =========================================================================
   Forms
   ========================================================================= */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 160px; }
label, .label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-secondary);
}
.label-help { font-weight: 400; color: var(--text-muted); }
.help { font-size: var(--fs-xs); color: var(--text-tertiary); }
.help-error { color: var(--danger-600); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=url], input[type=date], input[type=tel],
select, textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-sans); font-size: var(--fs-base);
  color: var(--text-primary); background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: var(--shadow-xs);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:hover:not(:focus):not(:disabled):not([readonly]),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled):not([readonly]) {
  border-color: var(--slate-400);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-500); box-shadow: var(--shadow-focus);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background: var(--bg-muted); color: var(--text-tertiary); cursor: not-allowed;
  box-shadow: none;
}
textarea { min-height: 96px; resize: vertical; line-height: var(--lh-snug); }

/* Search input with leading icon */
.input-search {
  position: relative; display: inline-flex; align-items: center; width: 100%;
}
.input-search > svg {
  position: absolute; left: 12px; width: 16px; height: 16px;
  color: var(--text-muted); pointer-events: none;
}
.input-search > input { padding-left: 36px; }

/* Checkbox / Radio (basic) */
input[type=checkbox], input[type=radio] {
  accent-color: var(--brand-600);
}

/* Form group helpers used in legacy templates */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--sp-3); }
.form-group label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.form-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--sp-3); }
.form-row .form-group { flex: 1; min-width: 140px; }

/* =========================================================================
   Alerts / Flashes
   ========================================================================= */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 500;
  border: 1px solid transparent;
  line-height: var(--lh-snug);
}
.alert-success, .alert.ok, .flash.ok {
  background: var(--success-50); color: var(--success-700); border-color: var(--success-200);
}
.alert-error, .alert.err, .flash.err {
  background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-200);
}
.alert-warning {
  background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-200);
}
.alert-info {
  background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100);
}
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* =========================================================================
   Tabs
   ========================================================================= */
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab {
  position: relative;
  padding: 10px 16px; border: none; background: none;
  font-size: var(--fs-base); font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer; white-space: nowrap;
  transition: color .12s ease;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--brand-700); }
.tab.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--brand-600); border-radius: 2px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =========================================================================
   Pill / segmented filters
   ========================================================================= */
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  text-decoration: none;
}
.pill:hover { background: var(--bg-muted); color: var(--text-primary); border-color: var(--border-strong); }
.pill.is-active, .pill.active {
  background: var(--slate-900); color: #fff; border-color: var(--slate-900);
}

/* =========================================================================
   Modals
   ========================================================================= */
.modal-backdrop, .modal-bg {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: var(--sp-5);
}
.modal-backdrop.open, .modal-bg.open { display: flex; }
.modal {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  min-width: 320px; max-width: 520px; width: 100%;
  box-shadow: var(--shadow-xl);
  max-height: 92vh; overflow-y: auto;
}
.modal h2, .modal h3 {
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--text-primary); letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-3);
}
.modal-footer, .modal-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

/* =========================================================================
   Toasts
   ========================================================================= */
.toast-container {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  background: var(--danger-600); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 8px;
  animation: toast-in .18s ease;
}
.toast.success { background: var(--success-600); }
.toast.info    { background: var(--brand-600); }
.toast.warn    { background: var(--warning-600); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Empty states
   ========================================================================= */
.empty-state {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  color: var(--text-tertiary);
}
.empty-state .es-icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
  font-size: 1.5rem;
}
.empty-state .es-title {
  font-size: var(--fs-md); font-weight: 700;
  color: var(--text-secondary); margin-bottom: 4px;
}
.empty-state .es-sub { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* =========================================================================
   Misc utilities
   ========================================================================= */
.divider {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--text-muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600;
  margin: var(--sp-4) 0;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.kbd {
  display: inline-block; padding: 2px 6px;
  font-family: var(--font-mono); font-size: .76em;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: var(--r-xs); color: var(--text-tertiary);
}

/* Code / mono blocks */
code {
  background: var(--bg-muted); border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs); padding: 1px 5px; font-size: .85em;
  color: var(--text-secondary);
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-border);
  padding: var(--sp-6) var(--sp-6);
  color: rgba(255,255,255,.55);
}
.site-footer-inner {
  max-width: 1280px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.site-footer a {
  color: rgba(255,255,255,.55);
  padding: 4px 10px; border-radius: var(--r-sm);
}
.site-footer a:hover { color: #fff; background: rgba(255,255,255,.05); }
.site-footer-links { display: flex; gap: 4px; }
.site-footer-brand {
  display: inline-flex; align-items: center; gap: 8px;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 768px) {
  .appbar-inner { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .appbar-nav { display: none; }
  .appbar-user { display: none; }
  .page-shell { padding: var(--sp-5) var(--sp-4); }
  .page-header-inner { padding: var(--sp-4); }
  .container, .container-narrow { padding-inline: var(--sp-4); }
}

/* =========================================================================
   Animations
   ========================================================================= */
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in .22s ease both; }