/* ════════════════════════════════════════════
   base.css — Shared Component Stylesheet
   APPEX360 Global Theme Engine — Release 18.0
   
   Every component consumes ONLY semantic tokens.
   No hardcoded colours anywhere.
   
   Token files define the variables.
   This file defines the components.
   ════════════════════════════════════════════ */

/* ── Base Document ── */
body {
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}
p, li, .text-secondary {
  color: var(--text-secondary);
}
.text-muted, small, .caption {
  color: var(--text-muted);
}
a, .link {
  color: var(--text-link);
}

/* ── Cards ── */
.card, .vis-card, .exec-card, .ds-card, [class*="card"]:not(.no-theme) {
  background: var(--surface-card);
  border: var(--border-width) solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card:hover, .vis-card:hover, .exec-card:hover {
  border-color: var(--surface-border-hover);
  box-shadow: var(--shadow-md);
}

/* ── KPI Cards ── */
.kpi-card, .ds-kpi-card, .stat-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--surface-border);
  border-radius: var(--radius-md);
}
.kpi-card .kpi-label, .ds-kpi-label {
  color: var(--text-secondary);
}
.kpi-card .kpi-value, .ds-kpi-value {
  color: var(--text-primary);
}

/* ── Buttons ── */
.btn-primary, .ds-btn-primary, button.primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--btn-radius);
  height: var(--btn-height);
  border: none;
}
.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary, .ds-btn-secondary {
  background: transparent;
  color: var(--accent);
  border: var(--border-width) solid var(--surface-border);
  border-radius: var(--btn-radius);
  height: var(--btn-height);
}
.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Navigation Bar ── */
.nav, .apex-global-nav, .top-nav, [class*="navbar"] {
  background: var(--nav-bg);
  border-bottom: var(--border-width) solid var(--nav-border);
}
.nav a, .nav-link, .apex-nav-link {
  color: var(--nav-text);
}
.nav a:hover, .nav-link:hover, .apex-nav-link:hover {
  color: var(--nav-text-hover);
}
.nav a.active, .nav-link.active, .apex-nav-link.active, .apex-nav-active {
  background: var(--nav-active-bg);
  color: var(--nav-text-hover);
}

/* ── Sidebar ── */
.sidebar, [class*="sidebar"] {
  background: var(--sidebar-bg);
  border-right: var(--border-width) solid var(--sidebar-border);
}
.sidebar a, .sidebar-link {
  color: var(--sidebar-text);
}
.sidebar a:hover, .sidebar-link:hover {
  color: var(--text-primary);
}
.sidebar a.active, .sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: var(--text-primary);
}

/* ── Tables ── */
table, .table, [class*="table"] {
  border-collapse: separate;
  border-spacing: 0;
}
table th, .table th, [class*="table"] th {
  background: var(--table-header-bg, var(--surface-inset));
  color: var(--text-secondary);
  border-bottom: var(--border-width) solid var(--table-border, var(--surface-border));
}
table td, .table td, [class*="table"] td {
  border-bottom: var(--border-width) solid var(--table-border, var(--surface-border));
  color: var(--text-primary);
}
table tr:hover, .table tr:hover, [class*="table"] tr:hover {
  background: var(--table-row-hover, var(--surface-card-hover));
}

/* ── Inputs ── */
input, textarea, select, .input, .ds-input {
  background: var(--input-bg);
  border: var(--border-width) solid var(--input-border);
  border-radius: var(--input-radius, var(--radius-md));
  color: var(--text-primary);
  height: var(--input-height);
}
input:focus, textarea:focus, select:focus, .input:focus, .ds-input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

/* ── Badges ── */
.badge, .ds-badge, [class*="badge"] {
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size, 11px);
  padding: var(--badge-padding, 2px 10px);
  font-weight: var(--badge-font-weight, 600);
}
.badge-success {
  background: var(--success-light);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-light);
  color: var(--warning);
}
.badge-danger {
  background: var(--danger-light);
  color: var(--danger);
}
.badge-info {
  background: var(--info-light);
  color: var(--info);
}

/* ── Dividers ── */
hr, .divider, .section-divider {
  border: none;
  height: var(--border-width);
  background: var(--surface-border);
}

/* ── Modals / Dialogs ── */
.modal-overlay, [class*="overlay"] {
  background: var(--modal-overlay, var(--surface-overlay));
}
.modal, .modal-content, [class*="dialog"] {
  background: var(--modal-bg, var(--surface-elevated));
  border: var(--border-width) solid var(--modal-border, var(--surface-border));
  border-radius: var(--modal-radius, var(--radius-xl));
  box-shadow: var(--shadow-xl);
}

/* ── Tooltips ── */
.tooltip, [class*="tooltip"], .tip-popup, .gloss-popup {
  background: var(--surface-elevated);
  border: var(--border-width) solid var(--surface-border-hover);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ── Charts ── */
.chart-grid, [class*="chart-grid"] {
  stroke: var(--chart-grid);
  color: var(--chart-grid);
}
.chart-axis, [class*="chart-axis"] {
  color: var(--chart-axis);
  fill: var(--chart-axis);
}

/* ── Selection ── */
::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* ── Progress Bars ── */
.progress, [class*="progress"] {
  background: var(--surface-inset);
  border-radius: var(--radius-full);
}
.progress-fill, [class*="progress-fill"] {
  background: var(--accent);
  border-radius: var(--radius-full);
}

/* ── Category Accents ── */
.category-financial { color: var(--category-financial); }
.category-risk { color: var(--category-risk); }
.category-governance { color: var(--category-governance); }
.category-intelligence { color: var(--category-intelligence); }
.category-operations { color: var(--category-operations); }
.category-executive { color: var(--category-executive); }