/* ─── Brand polish (whole dashboard) ───────────────────
   Loaded last. Visual layer only, no layout or behaviour changes, taken
   from nathabit.in's own stylesheet:
   - CTA: 135° gradient #C3502B → #A03F22 (hover #A03F22 → #80331C),
     bold uppercase-ish labels
   - surfaces: blush cream #FCF8F8, 20px card radius, pill controls
   - scrollbars: slate #A8BBBF, as on the site's custom-scrollbar
   Covers the chrome (top bar, sidebar, filter lane) and everything that
   opens from a button: dropdown panels, the date picker, the data modal
   (KPI breakdowns, row trend charts), the loading card and sign-in. */

:root {
  --brand-grad: linear-gradient(135deg, #C3502B 0%, #A03F22 100%);
  --brand-grad-hover: linear-gradient(135deg, #A03F22 0%, #80331C 100%);
  --brand-glow: 0 6px 16px -6px rgba(160, 63, 34, 0.55);
  --bg-surface-2: #FCF8F8;
  --radius-xl: 20px;
  accent-color: #C3502B; /* native checkboxes / radios / date inputs */
}
[data-theme="dark"] {
  --brand-grad: linear-gradient(135deg, #E07A4F 0%, #C3502B 100%);
  --brand-grad-hover: linear-gradient(135deg, #F0956C 0%, #E07A4F 100%);
  --brand-glow: 0 6px 16px -6px rgba(224, 122, 79, 0.45);
  --bg-surface-2: #211A15;
  accent-color: #E07A4F;
}

/* Scrollbars */
* { scrollbar-color: color-mix(in srgb, #A8BBBF 70%, transparent) transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, #A8BBBF 60%, transparent); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #A8BBBF; }

/* Keyboard focus, everywhere */
button:focus-visible, [role="button"]:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─── Toggles ─────────────────────────────────────────── */
.segment-bar { border-radius: 999px; }
.segment-btn { border-radius: 999px; transition: background var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast), transform var(--ease-fast); }
.segment-btn.active {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--brand-glow);
}
.segment-btn.active .pivot-dim-order { background: #fff; color: var(--primary); }

/* ─── Primary buttons ─────────────────────────────────── */
.btn-login,
.multiselect-apply-btn {
  background: var(--brand-grad);
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: var(--brand-glow);
}
.btn-login:hover,
.multiselect-apply-btn:hover { background: var(--brand-grad-hover); }
.btn-icon-text { border-radius: 10px; font-weight: 700; }
.btn-icon { border-radius: 10px; }

/* ─── Top bar ─────────────────────────────────────────── */
/* No backdrop-filter here: it would make the top bar the containing block
   and stacking context for the date picker's fixed dropdown, which then
   renders underneath the filter lane. */
.top-bar { box-shadow: 0 1px 0 var(--border-subtle), 0 6px 18px -14px rgba(43, 20, 12, 0.25); }
.breadcrumb-current { font-weight: 800; }
.daterange-trigger { border-radius: 999px; font-weight: 700; }
.daterange-trigger:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.profile-avatar { background: var(--brand-grad); box-shadow: var(--brand-glow); }

/* ─── Sidebar ─────────────────────────────────────────── */
.nav-item { border-radius: 12px; }
.sub-item { border-radius: 10px; }
.sub-item.active {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--brand-glow);
}
.sub-item.active::before { color: #fff; }

/* ─── Filter lane ─────────────────────────────────────── */
.filter-select { border-radius: 10px; }
.filter-select:hover, .filter-select:focus { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }

/* ─── Dropdown panels (filters, Campaign filters, heat picker) ── */
.multiselect-panel {
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px -16px rgba(43, 20, 12, 0.35), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.multiselect-panel-header { background: var(--bg-surface-2); border-bottom: 1px solid var(--border-subtle); }
.multiselect-panel-footer { border-radius: 0 0 16px 16px; }
.multiselect-option { border-radius: 8px; }
.multiselect-option:has(input:checked) { color: var(--primary); font-weight: 700; }
.multiselect-panel input[type="text"],
.multiselect-panel input[type="search"] { border-radius: 10px !important; }

/* ─── Top-bar date picker ─────────────────────────────── */
.daterange-dropdown {
  border-radius: 18px;
  box-shadow: 0 22px 48px -18px rgba(43, 20, 12, 0.38), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.daterange-preset-btn { border-radius: 10px; font-weight: 600; }
.daterange-preset-btn:hover { background: var(--primary-light); color: var(--primary); }
.daterange-day.range-start,
.daterange-day.range-end { background: var(--brand-grad); box-shadow: var(--brand-glow); }
.daterange-day.in-range { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* ─── Modals (KPI breakdown, row trend, drilldowns) ───── */
.modal-overlay {
  background: rgba(30, 18, 12, 0.55);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.data-modal-card {
  border-radius: 20px;
  box-shadow: 0 40px 80px -24px rgba(20, 10, 6, 0.6);
  animation: odin-modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes odin-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.data-modal-header {
  background: linear-gradient(180deg, var(--bg-surface-2) 0%, var(--bg-surface) 100%);
  border-bottom: 1px solid var(--border-subtle);
}
.data-modal-header h2 { font-size: 17px; font-weight: 900; letter-spacing: -0.01em; }
.data-modal-header .btn-icon { border-radius: 50%; }
.data-modal-header .btn-icon:hover { background: var(--primary-light); color: var(--primary); }
/* Section headings inside the modal body carry inline styles from
   app.js; a left accent bar makes them read as section starts. */
.data-modal-body h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900 !important;
  color: var(--text-primary) !important;
}
.data-modal-body h3::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--brand-grad);
}
.data-modal-body .kpi-value { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.data-modal-body .data-table thead th { background: var(--bg-surface-2); }
.data-modal-body .data-table tbody tr:hover td { background: var(--bg-hover); }
.kpi-detail-spark-wrap { border-radius: 14px; background: var(--bg-surface-2); padding: 6px 8px; }

/* Movers block */
.kpi-mover-block { border-radius: 16px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); }
.kpi-mover-tab.active { background: var(--brand-grad); border-color: transparent; box-shadow: var(--brand-glow); }
.mover-row { border-radius: 12px; }
.mover-row-clickable:hover { background: var(--bg-surface); box-shadow: 0 4px 14px -8px rgba(43, 20, 12, 0.3); }
.mover-drilldown-back { font-weight: 800; color: var(--primary); }

/* Row trend modal picker */
.campaign-chart-picker { border-radius: 12px; border: 1px solid var(--border-subtle); padding: 4px; }
.campaign-chart-picker-row { border-radius: 8px; }
#campaign-chart-search { border-radius: 10px !important; }

/* ─── Loading card ────────────────────────────────────── */
.loading-card { border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(43, 20, 12, 0.45); }
.loading-bar-track { border-radius: 999px; }
.loading-bar-fill { border-radius: 999px; background: var(--brand-grad); }

/* ─── Sign-in / settings cards ────────────────────────── */
.login-card, .settings-card { border-radius: 20px; }
.login-card { box-shadow: 0 40px 80px -24px rgba(20, 10, 6, 0.6); border-top: 4px solid #C3502B; }
.profile-dropdown, .notif-bell-dropdown { border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(43, 20, 12, 0.35); }
.dropdown-item { border-radius: 10px; }

/* ─── Page section headings get the brand accent ──────── */
.ov-block-head h3 { display: flex; align-items: center; gap: 8px; }
.ov-block-head h3::before {
  content: '';
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--brand-grad);
}
.section-title { font-weight: 900; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  .data-modal-card { animation: none; }
}