/* ═══════════════════════════════════════════════════════════════
   Margevo Design System — Single source of truth
   Supports dark (default) and light themes via data-theme attribute.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Primitives + theme-independent sizing/spacing */
@import 'tokens.css?v=3';

/* 2. Theme files — dark is default, light activates via [data-theme="light"] */
@import 'theme-dark.css?v=3';
@import 'theme-light.css?v=3';

/* 3. Component library */
@import 'components/cards.css';
@import 'components/weather.css';
@import 'components/tables.css';
@import 'components/buttons.css';
@import 'components/badges.css';
@import 'components/alerts.css';
@import 'components/sidebar.css?v=3';
@import 'components/topbar.css?v=4';
@import 'components/overview.css';
@import 'components/charts.css';
@import 'components/news.css';
@import 'components/bento.css?v=14';
@import 'components/install-pages.css';
@import 'components/dashboard-header.css';
@import 'components/attribution.css';
@import 'components/component-library.css';
@import 'components/scope-filter.css';
@import 'components/help.css';
@import 'components/filters.css';
@import 'components/collapsible.css';
@import 'components/admin.css';
@import 'components/margevo-voice.css';
@import 'components/loader.css';
@import 'components/ai_assistant_btn.css';
@import 'components/clerk-overrides.css';
@import 'components/ltv-status.css';
@import 'components/data-health.css?v=2';
@import 'components/period-selector.css';
@import 'components/onboarding-wizard.css';
@import 'components/side-panel.css?v=3';

/* 4. Utilities — LAST (higher specificity for overrides) */
@import 'components/utilities.css';


/* ═══════════════════════════════════
   CSS VARIABLES (theme-independent)
   ═══════════════════════════════════ */

:root {
  /* Komponenter (aliases into token layer) */
  --card-radius:   var(--radius-card);
  --badge-radius:  var(--radius-sm);
  --pill-radius:   var(--radius-pill);
  --card-shadow:   var(--shadow-card);
  --card-padding:  var(--card-padding-y) var(--card-padding-x);
}


/* ═══════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════ */

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  letter-spacing: 0.2px;
  margin: 0;
}

/* Topbar gains a tabs row when the current section has children.
   Sidebar's mobile drawer + any sticky offsets read --topbar-height. */
body.has-subnav {
  --topbar-height: 80px;
}

h1, h2, h3 {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.subtitle {
  color: var(--text-secondary);
}

.mono { font-family: var(--font-mono); }
.positive { color: var(--color-positive); }
.negative { color: var(--color-negative); }

a { color: var(--text-link); }

/* Scrollbar */
::-webkit-scrollbar { width: var(--scrollbar-width); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-sm); }


/* ═══════════════════════════════════
   NAVIGATION (Sidebar)
   ═══════════════════════════════════ */

/* Sidebar styles → components/sidebar.css (single source of truth) */

/* Tenant switcher (shared between sidebar and legacy nav) */
.tenant-select {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--overlay-25);
  background: var(--overlay-10);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}

.tenant-select:hover,
.tenant-select:focus {
  border-color: var(--accent-green);
  background: var(--overlay-15);
}

.tenant-select option {
  background: var(--bg-base);
  color: var(--text-primary);
}


/* ═══════════════════════════════════
   PAGE CONTENT WRAPPER
   ═══════════════════════════════════ */

.page-content {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--page-padding-y) var(--space-xl);
}

/* Dashboard page base styles — see components/dashboard-header.css */


/* ═══════════════════════════════════
   ICONS (Lucide)
   ═══════════════════════════════════ */

.icon, [data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
}

.icon-sm, [data-lucide].icon-sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  top: -0.05em;
}

.icon-lg, [data-lucide].icon-lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  top: -0.05em;
}

.icon-xl, [data-lucide].icon-xl {
  width: var(--space-lg);   /* 24px */
  height: var(--space-lg);
  top: 0;
}

.icon-2xl, [data-lucide].icon-2xl {
  width: var(--space-xl);   /* 32px */
  height: var(--space-xl);
  top: 0;
}

button [data-lucide],
td [data-lucide],
th [data-lucide],
.badge [data-lucide],
.status-badge [data-lucide] {
  vertical-align: middle;
  top: -0.05em;
}

h1 [data-lucide], h2 [data-lucide],
h3 [data-lucide], strong [data-lucide] {
  vertical-align: middle;
  top: -0.08em;
}


/* ═══════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════ */

/* Metric utility — tabular nums for aligned columns */
.metric {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.delta .up { color: var(--color-positive); }
.delta .down { color: var(--color-negative); }

.trend-up, .up { color: var(--color-positive); }
.trend-down, .down { color: var(--color-negative); }


/* ═══════════════════════════════════
   CARDS (generic)
   .card + .kpi-card → components/cards.css
   ═══════════════════════════════════ */


/* ═══════════════════════════════════
   SELECTS AND INPUTS
   ═══════════════════════════════════ */

select {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--bg-card);
  color: var(--text-primary);
}

select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

input[type="text"],
input[type="number"],
input[type="file"],
textarea {
  background: var(--bg-raised);
  color: var(--text-primary);
  border-color: var(--border-strong);
}


/* ═══════════════════════════════════
   RANGE INPUTS / SLIDERS
   ═══════════════════════════════════ */

.slider-wrapper {
  margin-bottom: var(--space-md);
}

.slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.slider-value {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--slider-track-height);
  background-color: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  background-image: linear-gradient(var(--accent-green), var(--accent-green));
  background-size: var(--fill-percent, 50%) 100%;
  background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent-green);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="range"]::-webkit-slider-thumb:hover {
  border-color: var(--accent-teal);
  box-shadow: var(--shadow-focus-green);
}

input[type="range"]::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent-green);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb:hover {
  border-color: var(--accent-teal);
  box-shadow: var(--shadow-focus-green);
}

input[type="range"]::-moz-range-progress {
  background: var(--accent-green);
  height: var(--slider-track-height);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

input[type="range"]:focus { outline: none; }
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: var(--shadow-focus-green);
}


/* ═══════════════════════════════════
   SECTION HEADER TYPOGRAPHY
   ═══════════════════════════════════ */

.page-content h2,
.page-content .h2 {
  font-size: var(--font-size-h2, 18px);
  font-weight: var(--font-weight-h2, 600);
  color: var(--text-primary);
}

.page-content h3,
.page-content .h3 {
  font-size: var(--font-size-h3, 14px);
  font-weight: var(--font-weight-h3, 500);
  color: var(--text-secondary);
}

/* .section-header__period → components/collapsible.css */


/* ═══════════════════════════════════
   TEXT LINKS
   ═══════════════════════════════════ */

.text-link {
  background: none;
  border: none;
  color: var(--accent-teal);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.text-link:hover {
  color: var(--text-primary);
}

.toggle-link {
  color: var(--text-secondary);
}

.toggle-link:hover {
  color: var(--text-primary);
}

.load-more-container {
  text-align: center;
  padding: var(--space-md) 0;
}


/* ═══════════════════════════════════
   GENERIC TABLE OVERRIDES
   .data-table → components/tables.css
   ═══════════════════════════════════ */

table th {
  background: var(--bg-raised);
  color: var(--text-muted);
  border-bottom-color: var(--overlay-6);
}

table td {
  color: var(--text-primary);
  border-bottom-color: var(--overlay-4);
}

table tr:hover {
  background: var(--overlay-3);
}

/* Products: hierarchy rows */
.L1:hover { background: var(--overlay-3); }
.L2 { background: var(--bg-base); }
.L2:hover { background: var(--overlay-3); }
.L3 { background: var(--bg-raised); }