/* ═══════════════════════════════════════════════════════════
   ILLUMINATE AI — SHARED COMPONENTS (all pages)
   Per design-system/MASTER.md · Soft UI Evolution
   Requires: css/core/tokens.css loaded first
   ═══════════════════════════════════════════════════════════ */

/* ── Layout helpers ── */
.container { width: min(1120px, 92%); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--primary); color:var(--on-primary);
  padding:var(--sp-2) var(--sp-4); border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus { left:0; }

/* ── Buttons (clay primary / outline ghost) ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius-full); border:none;
  font-family:var(--font-body); font-size:var(--text-base); font-weight:600;
  cursor:pointer; text-decoration:none;
  transition:transform var(--transition-fast), box-shadow var(--transition), border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-primary {
  background:linear-gradient(160deg, var(--accent), var(--primary));
  color:var(--on-primary);
  box-shadow:var(--shadow-md), inset 0 1.5px 0 rgba(255,255,255,.35);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-primary:active { transform:none; box-shadow:var(--shadow-sm); }
.btn-outline { border:1.5px solid var(--border); color:var(--text); background:transparent; }
.btn-outline:hover { border-color:var(--accent); color:var(--primary); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:8px 16px; font-size:var(--text-sm); }
.btn-lg { padding:14px 28px; font-size:var(--text-lg); }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none !important; }

/* ── Cards (glass surface, soft shadow) ── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-6);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-hover:hover {
  transform:translateY(-4px); box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* ── Forms ── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-4); }
.form-label { font-size:var(--text-sm); font-weight:600; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:12px 15px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--bg); color:var(--text);
  font-family:inherit; font-size:var(--text-base); outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-dim); opacity:.7; }
.form-error { color:var(--danger); font-size:var(--text-sm); }

/* ── Badges & status pills ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 11px; border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.02em;
}
.badge-success { background:rgba(16,185,129,.14); color:#059669; }
.badge-warning { background:rgba(217,119,6,.14); color:#B45309; }
.badge-danger  { background:rgba(220,38,38,.12);  color:#DC2626; }
.badge-accent  { background:var(--accent-soft);   color:var(--primary); }
[data-theme="dark"] .badge-success { color:#34D399; }
[data-theme="dark"] .badge-warning { color:#FBBF24; }

/* ── Alerts ── */
.alert {
  display:flex; gap:10px; align-items:flex-start;
  padding:var(--sp-4); border-radius:var(--radius-md);
  font-size:var(--text-sm); border:1px solid transparent; margin-bottom:var(--sp-4);
}
.alert-info    { background:var(--accent-soft); color:var(--text); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.alert-error   { background:rgba(220,38,38,.08); color:var(--danger); border-color:rgba(220,38,38,.25); }
.alert-success { background:rgba(16,185,129,.10); color:#059669; border-color:rgba(16,185,129,.3); }
[data-theme="dark"] .alert-success { color:#34D399; }

/* ── Skeleton loaders ── */
.skeleton {
  position:relative; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--surface-2); min-height:14px;
}
.skeleton::after {
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-dim) 14%, transparent), transparent);
  animation:skeletonWave 1.4s infinite;
}
@keyframes skeletonWave { to { transform:translateX(100%); } }
.skeleton-text  { height:14px; margin-bottom:8px; }
.skeleton-title { height:22px; width:55%; margin-bottom:12px; }
.skeleton-card  { height:140px; border-radius:var(--radius-lg); }

/* ── Breadcrumbs ── */
.breadcrumbs {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  padding:var(--sp-3) 0; font-size:var(--text-sm); color:var(--text-dim);
}
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; }
.breadcrumbs li { display:flex; align-items:center; gap:6px; }
.breadcrumbs li+li::before { content:'/'; color:var(--border); }
.breadcrumbs a { color:var(--text-dim); }
.breadcrumbs a:hover { color:var(--primary); text-decoration:underline; }
.breadcrumbs [aria-current="page"] { color:var(--text); font-weight:600; }

/* ── Section rhythm ── */
.page-section { padding-block:var(--sp-10); }
.section-head { max-width:600px; margin-bottom:var(--sp-8); }
.section-head h2 { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:400; letter-spacing:-.01em; margin-bottom:var(--sp-2); }
.eyebrow {
  font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--primary); margin-bottom:var(--sp-2); display:block;
}

/* ── Empty / error states ── */
.state-block { text-align:center; padding:var(--sp-12) var(--sp-6); color:var(--text-dim); }
.state-block .material-symbols-outlined { font-size:44px; color:var(--border); display:block; margin:0 auto var(--sp-3); }
.state-block h3 { font-family:var(--font-body); font-weight:700; color:var(--text); margin-bottom:var(--sp-1); }

/* ── Tables ── */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
table.data { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
table.data th {
  text-align:left; padding:var(--sp-3) var(--sp-4);
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-dim); border-bottom:1px solid var(--border);
}
table.data td { padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); }
table.data tr:last-child td { border-bottom:none; }
table.data tbody tr:hover { background:var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .card, .btn { transition:none; }
  .skeleton::after { animation:none; }
}