/* ============================================================
   FOUNDATION · Components
   Every component: full states (hover / focus / active / disabled).
   Requires foundation.css (tokens) loaded first.
   ============================================================ */

/* ---- BUTTONS ------------------------------------------------ */
.btn {
  --_bg:var(--surface); --_fg:var(--text); --_bd:var(--border-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--tap); padding:0.625rem 1.125rem;
  font:inherit; font-size:var(--text-sm); font-weight:700; letter-spacing:var(--tracking);
  color:var(--_fg); background:var(--_bg);
  border:1px solid var(--_bd); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs), var(--shadow-inset);
  cursor:pointer; user-select:none; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { box-shadow:var(--shadow-sm), var(--shadow-inset); border-color:var(--c-neutral-400); }
.btn:active { transform:translateY(1px); box-shadow:var(--shadow-xs); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-primary { --_bg:var(--accent); --_fg:var(--text-on-accent); --_bd:var(--accent-active); }
.btn-primary:hover { --_bg:var(--accent-hover); }
.btn-primary:active { --_bg:var(--accent-active); }

.btn-ghost { --_bg:transparent; --_bd:transparent; box-shadow:none; }
.btn-ghost:hover { --_bg:var(--surface-sunken); box-shadow:none; }

.btn-danger { --_bg:var(--danger-weak); --_fg:var(--danger-strong); --_bd:color-mix(in srgb,var(--danger) 35%,transparent); }
.btn-danger:hover { --_bg:color-mix(in srgb,var(--danger) 14%,var(--surface)); }

.btn-sm { min-height:36px; padding:0.375rem 0.75rem; font-size:var(--text-xs); }
.btn-lg { min-height:52px; padding:0.875rem 1.5rem; font-size:var(--text-base); }
.btn-block { width:100%; }

/* ---- CARD --------------------------------------------------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:var(--space-5);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-hover:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-pad-lg { padding:var(--space-6); }
.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.card-title { font-size:var(--text-md); font-weight:700; }
.card-glass {
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-color:color-mix(in srgb, var(--c-neutral-0) 50%, var(--border));
}

/* ---- KPI / STAT TILE --------------------------------------- */
.kpi { display:flex; flex-direction:column; gap:var(--space-2); }
.kpi-label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-muted); font-weight:700; }
.kpi-value { font-size:var(--text-2xl); font-weight:700; line-height:1; letter-spacing:-0.02em; }
.kpi-foot { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--text-muted); }
.kpi-spark { height:36px; margin-top:var(--space-1); }

/* ---- DELTA / TREND ----------------------------------------- */
.delta { display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:var(--text-xs); padding:2px 8px; border-radius:var(--radius-pill); }
.delta-up { color:var(--success-strong); background:var(--success-weak); }
.delta-down { color:var(--danger-strong); background:var(--danger-weak); }
.delta-flat { color:var(--text-muted); background:var(--surface-sunken); }

/* ---- BADGE / PILL ------------------------------------------ */
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; font-size:var(--text-xs); font-weight:700; border-radius:var(--radius-pill); border:1px solid transparent; letter-spacing:var(--tracking); }
.badge-neutral { background:var(--surface-sunken); color:var(--text-secondary); border-color:var(--border); }
.badge-accent  { background:var(--accent-weak); color:var(--accent-active); border-color:var(--accent-weak-border); }
.badge-success { background:var(--success-weak); color:var(--success-strong); }
.badge-warn    { background:var(--warn-weak); color:var(--warn-strong); }
.badge-danger  { background:var(--danger-weak); color:var(--danger-strong); }
.badge-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ---- TABLE -------------------------------------------------- */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.tbl thead th {
  position:sticky; top:0; z-index:1;
  text-align:left; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--text-muted); font-weight:700;
  background:var(--surface-2); padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.tbl tbody td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl tbody tr { transition:background var(--dur-fast) var(--ease); }
.tbl tbody tr:hover { background:var(--surface-2); }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl th.sort { cursor:pointer; }
.tbl th.sort:hover { color:var(--text-secondary); }
.tbl th.sort::after { content:"\2195"; margin-left:6px; opacity:.4; }
.tbl th.sort.asc::after { content:"\2191"; opacity:1; }
.tbl th.sort.desc::after { content:"\2193"; opacity:1; }

/* ---- FORM CONTROLS ----------------------------------------- */
.field { display:flex; flex-direction:column; gap:var(--space-2); }
.label { font-size:var(--text-sm); font-weight:700; color:var(--text-secondary); }
.hint { font-size:var(--text-xs); color:var(--text-muted); }
.input, .select, .textarea {
  width:100%; min-height:var(--tap); padding:0.625rem 0.875rem;
  font:inherit; font-size:var(--text-sm); color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); box-shadow:var(--shadow-xs) inset;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height:120px; resize:vertical; line-height:var(--leading-snug); }
.input::placeholder, .textarea::placeholder { color:var(--c-neutral-400); }
.input:hover, .select:hover, .textarea:hover { border-color:var(--c-neutral-400); }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.input:disabled, .select:disabled, .textarea:disabled { background:var(--surface-sunken); color:var(--text-muted); cursor:not-allowed; }
.input.is-error, .select.is-error, .textarea.is-error { border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 25%,transparent); }
.error-text { font-size:var(--text-xs); color:var(--danger-strong); font-weight:700; }
.select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.5rem; }

/* Checkbox / radio / switch */
.check { display:inline-flex; align-items:center; gap:var(--space-2); min-height:var(--tap); cursor:pointer; }
.check input { width:22px; height:22px; accent-color:var(--accent); cursor:pointer; }
.switch { position:relative; display:inline-flex; align-items:center; width:48px; height:28px; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track { width:48px; height:28px; border-radius:var(--radius-pill); background:var(--c-neutral-300); transition:background var(--dur) var(--ease); }
.switch .thumb { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease); }
.switch input:checked ~ .track { background:var(--accent); }
.switch input:checked ~ .thumb { transform:translateX(20px); }
.switch input:focus-visible ~ .track { box-shadow:0 0 0 3px var(--ring); }

/* ---- TABS --------------------------------------------------- */
.tabs { display:inline-flex; gap:4px; padding:4px; background:var(--surface-sunken); border-radius:var(--radius-md); border:1px solid var(--border); }
.tab { min-height:38px; padding:0.375rem 0.875rem; font:inherit; font-size:var(--text-sm); font-weight:700; color:var(--text-muted); background:transparent; border:0; border-radius:var(--radius-sm); cursor:pointer; transition:all var(--dur) var(--ease); }
.tab:hover { color:var(--text-secondary); }
.tab[aria-selected="true"] { color:var(--text); background:var(--surface); box-shadow:var(--shadow-sm); }

/* ---- NAV / TOPBAR ------------------------------------------ */
.topbar { display:flex; align-items:center; gap:var(--space-4); min-height:64px; padding:0 var(--space-5);
  background:color-mix(in srgb,var(--surface) 80%,transparent); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; overflow:hidden; }
.brand { display:flex; align-items:center; gap:var(--space-2); font-weight:700; font-size:var(--text-md); flex:0 0 auto; }
.brand-mark { width:32px; height:32px; border-radius:9px; background:linear-gradient(150deg,var(--accent),var(--accent-active)); box-shadow:var(--shadow-sm); flex:0 0 auto; }
/* nav shrinks + scrolls horizontally instead of widening the page on mobile */
.nav { display:flex; gap:2px; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.nav::-webkit-scrollbar { display:none; }
.nav a { padding:0.5rem 0.875rem; border-radius:var(--radius-sm); color:var(--text-secondary); text-decoration:none; font-weight:700; font-size:var(--text-sm); white-space:nowrap; transition:background var(--dur) var(--ease); }
.nav a:hover { background:var(--surface-sunken); color:var(--text); }
.nav a[aria-current="page"] { background:var(--accent-weak); color:var(--accent-active); }

/* ---- ALERT / CALLOUT --------------------------------------- */
.alert { display:flex; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-md); border:1px solid; font-size:var(--text-sm); }
.alert-icon { flex:0 0 auto; font-size:var(--text-md); line-height:1.2; }
.alert-info { background:var(--info-weak); border-color:color-mix(in srgb,var(--info) 25%,transparent); color:var(--info-strong); }
.alert-success { background:var(--success-weak); border-color:color-mix(in srgb,var(--success) 25%,transparent); color:var(--success-strong); }
.alert-warn { background:var(--warn-weak); border-color:color-mix(in srgb,var(--warn) 30%,transparent); color:var(--warn-strong); }
.alert-danger { background:var(--danger-weak); border-color:color-mix(in srgb,var(--danger) 30%,transparent); color:var(--danger-strong); }

/* ---- PROGRESS / METER -------------------------------------- */
.meter { height:10px; background:var(--surface-sunken); border-radius:var(--radius-pill); overflow:hidden; border:1px solid var(--border); }
.meter > span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-hover)); border-radius:var(--radius-pill); transition:width var(--dur-slow) var(--ease); }

/* ---- DIVIDER / EMPTY STATE --------------------------------- */
.divider { height:1px; background:var(--border); border:0; margin:var(--space-5) 0; }
.empty { text-align:center; padding:var(--space-7) var(--space-5); color:var(--text-muted); }
.empty-mark { width:56px; height:56px; margin:0 auto var(--space-3); border-radius:var(--radius-lg); background:var(--surface-sunken); display:grid; place-items:center; font-size:var(--text-lg); }

/* ---- SKELETON (loading) ------------------------------------ */
.skeleton { background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--c-neutral-100) 37%,var(--surface-sunken) 63%); background-size:400% 100%; animation:shimmer 1.4s var(--ease) infinite; border-radius:var(--radius-sm); }
@keyframes shimmer { 0%{background-position:100% 0;} 100%{background-position:0 0;} }