/**
 * BlueDXP / Wajeeh BI — Shared UI Component Library
 * ═══════════════════════════════════════════════════
 * Requires: wajeeh-theme-tokens.css loaded first.
 *
 * Components: reset · focus · scrollbars · layout · theme toggle ·
 * buttons · cards · badges · tables · tabs · forms · stats ·
 * grids · typography helpers · empty/loading states
 *
 * Pages load this once, then add only page-specific layout CSS inline.
 */


/* ═══ RESET ════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--s0);
  color: var(--ts);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

a {
  color: var(--blue-xl);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--blue-2xl); }

img, svg { max-width: 100%; }


/* ═══ FOCUS — ADHD-friendly, high-visibility ══════════ */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ═══ SCROLLBARS — refined, unobtrusive ═══════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--s5); }


/* ═══ SKIP LINK — accessibility ═══════════════════════ */

.skip {
  position: absolute;
  left: -9999px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
}
.skip:focus {
  left: 12px;
  top: 12px;
  background: var(--s2);
  color: var(--tp);
  padding: 8px 12px;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 10000;
}


/* ═══ LAYOUT ══════════════════════════════════════════ */

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(var(--sp-4), 4vw, var(--sp-8));
  position: relative;
  z-index: 2;
}

.wrap-narrow {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 clamp(var(--sp-4), 4vw, var(--sp-8));
}


/* ═══ THEME TOGGLE ════════════════════════════════════ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  background: var(--s2);
  border: 1px solid var(--border-med);
  color: var(--ts);
  font-family: var(--sans);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.theme-toggle:hover {
  background: var(--s3);
  color: var(--tp);
  border-color: var(--border-hi);
}
.theme-toggle:focus-visible {
  box-shadow: var(--focus-ring);
}
.theme-toggle .theme-icon {
  font-size: 14px;
  line-height: 1;
}


/* ═══ BUTTONS ═════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.btn:active { transform: translateY(0); }

.btn-primary {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 4px 16px var(--blue-dim);
}
.btn-primary:hover {
  background: var(--blue-l);
  box-shadow: 0 6px 24px var(--blue-glow);
}

.btn-secondary {
  color: var(--tp);
  background: var(--s2);
  border-color: var(--border-med);
}
.btn-secondary:hover {
  background: var(--s3);
  border-color: var(--border-hi);
}

.btn-ghost {
  color: var(--ts);
  background: transparent;
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--s2);
  color: var(--tp);
  border-color: var(--border-med);
}

.btn-danger {
  color: var(--red-l);
  background: var(--red-dim);
  border-color: rgba(239, 68, 68, 0.18);
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.30);
}

.btn-success {
  color: #fff;
  background: var(--green);
  box-shadow: 0 4px 12px var(--green-dim);
}
.btn-success:hover { background: var(--green-l); }

.btn-sm {
  padding: 6px 14px;
  font-size: var(--fs-xs);
  border-radius: var(--r);
}

.btn-lg {
  padding: 14px 28px;
  font-size: var(--fs-md);
  border-radius: var(--r-lg);
}


/* ═══ CARDS ═══════════════════════════════════════════ */

.card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}
.card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-sm);
}

.card-interactive {
  cursor: pointer;
}
.card-interactive:hover {
  border-color: rgba(37, 99, 235, 0.30);
  box-shadow: 0 6px 24px var(--blue-dim);
  transform: translateY(-2px);
}


/* ═══ BADGES / PILLS ═════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.badge-blue   { background: var(--blue-dim);   color: var(--blue-xl);   border: 1px solid rgba(37,  99, 235, 0.20); }
.badge-green  { background: var(--green-dim);  color: var(--green-l);   border: 1px solid rgba(16, 185, 129, 0.20); }
.badge-amber  { background: var(--amber-dim);  color: var(--amber-l);   border: 1px solid rgba(245,158,  11, 0.20); }
.badge-red    { background: var(--red-dim);    color: var(--red-l);     border: 1px solid rgba(239, 68,  68, 0.20); }
.badge-purple { background: var(--purple-dim); color: var(--purple-l);  border: 1px solid rgba(139, 92, 246, 0.20); }
.badge-teal   { background: var(--teal-dim);   color: var(--teal-l);    border: 1px solid rgba(  6,182, 212, 0.20); }


/* ═══ TABLES ═════════════════════════════════════════ */

.table-wrap {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--tt);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  background: var(--s2);
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 12px 16px;
  font-size: var(--fs-sm);
  color: var(--ts);
  border-bottom: 1px solid var(--border);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--blue-dim); }


/* ═══ TABS ════════════════════════════════════════════ */

.tabs {
  display: flex;
  gap: 2px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  overflow-x: auto;
}

.tab {
  padding: 8px 18px;
  border-radius: var(--r);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  color: var(--ts);
  background: transparent;
  border: none;
  font-family: var(--sans);
  transition: all var(--dur-fast);
  white-space: nowrap;
}
.tab:hover { color: var(--tp); background: var(--s2); }
.tab.active { background: var(--s3); color: var(--tp); font-weight: var(--fw-semibold); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }


/* ═══ FORMS ═══════════════════════════════════════════ */

.input, .textarea, .select {
  width: 100%;
  padding: 10px 14px;
  background: var(--s2);
  border: 1px solid var(--border-med);
  border-radius: var(--r);
  color: var(--tp);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline: none;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.input::placeholder, .textarea::placeholder {
  color: var(--tt);
}
.textarea { resize: vertical; min-height: 80px; }

.label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--tt);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}


/* ═══ STAT CARDS ═════════════════════════════════════ */

.stat {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.stat-val {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--tp);
  line-height: 1;
}
.stat-label {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--tt);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}


/* ═══ GRID UTILITIES ═════════════════════════════════ */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

@media (max-width: 940px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
}


/* ═══ TYPOGRAPHY HELPERS ═════════════════════════════ */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

.heading-xl {
  font-family: var(--display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--tp);
}
.heading-lg {
  font-family: var(--display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tp);
}
.heading-md {
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--tp);
}

.lead {
  color: var(--ts);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: 66ch;
}

.mono { font-family: var(--mono); }
.caption { font-size: var(--fs-xs); color: var(--tt); }


/* ═══ EMPTY STATE ════════════════════════════════════ */

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--tt);
}
.empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.3; }
.empty-text { font-size: var(--fs-sm); margin-bottom: 8px; color: var(--ts); }


/* ═══ LOADING ════════════════════════════════════════ */

.loading {
  text-align: center;
  padding: 40px;
  color: var(--tt);
  font-size: var(--fs-sm);
}


/* ═══ TIMELINE ═══════════════════════════════════════ */

.timeline { padding: 16px; }
.timeline-item {
  position: relative;
  padding: 0 0 20px 24px;
  border-left: 2px solid var(--border-med);
}
.timeline-item:last-child { border-left-color: transparent; }
.timeline-dot {
  position: absolute;
  left: -5px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--s1);
}
.timeline-time {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--tt);
  margin-bottom: 2px;
}
.timeline-text { font-size: var(--fs-sm); color: var(--ts); }


/* ═══ MODAL OVERLAY ══════════════════════════════════ */

.wajeeh-modal-scrim {
  background: var(--modal-overlay) !important;
}


/* ═══ LIGHT MODE — component refinements ═════════════ */

[data-theme="light"] .card {
  box-shadow: var(--shadow-xs);
}
[data-theme="light"] .table-wrap {
  box-shadow: var(--shadow-xs);
}
[data-theme="light"] .btn-secondary {
  background: #fff;
  border-color: var(--border-med);
}
[data-theme="light"] .btn-primary {
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
}
[data-theme="light"] .stat {
  box-shadow: var(--shadow-xs);
}
[data-theme="light"] a {
  color: var(--blue);
}
[data-theme="light"] a:hover {
  color: var(--blue-l);
}