/* ============================================================
   SPEE RUST — design refresh overlay
   Doel: minder "AI-saas", meer rust, warmte en premium-gevoel.
   Laad NA style.css zodat dit als override fungeert.
   ============================================================ */

:root {
  /* warmer fundament */
  --bg: #f3ede0;
  --bg-accent: #faf6ed;
  --surface: rgba(255, 252, 246, 0.94);
  --surface-strong: #fffdf8;
  --surface-soft: #f5efe0;
  --border: rgba(58, 45, 30, 0.10);
  --border-strong: rgba(58, 45, 30, 0.18);
  --text: #2a2118;
  --muted: #7a6a58;
  --muted-strong: #5a4a3a;

  /* rustiger blauw — geen electric meer */
  --primary: #2c3e5d;
  --primary-strong: #1f2d44;
  --primary-soft: rgba(44, 62, 93, 0.08);

  /* accenten — warm */
  --accent-warm: #b87a4a;
  --accent-warm-soft: #e8d5c0;

  --success: #4a7c4e;
  --danger: #b8453a;

  /* sidebar = espresso ipv tech-navy */
  --sidebar-bg: #1c1611;
  --sidebar-bg-soft: rgba(245, 235, 215, 0.06);
  --sidebar-text: #f0e8d8;

  /* schaduwen warmer en zachter */
  --shadow-lg: 0 24px 60px rgba(58, 45, 30, 0.10);
  --shadow-md: 0 16px 34px rgba(58, 45, 30, 0.07);
  --shadow-sm: 0 8px 18px rgba(58, 45, 30, 0.05);

  /* premium serif accent */
  --font-serif-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
}

/* === BODY: rustige cream-wash, geen radial gradients === */
html, body {
  background:
    radial-gradient(circle at 0% 0%, rgba(184, 122, 74, 0.05), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(74, 124, 78, 0.04), transparent 28%),
    linear-gradient(180deg, #faf6ed 0%, #f3ede0 100%);
  color: var(--text);
}

/* === EYEBROW / PANEL KICKER: italic serif premium accent === */
.eyebrow,
.panel-kicker {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.95rem;
  color: var(--muted-strong);
}

/* === HEADINGS: zachter, leesbaarder === */
h1, h2, h3 {
  color: var(--text);
  letter-spacing: -0.01em;
}
h1 { font-weight: 600; }
h2, h3 { font-weight: 600; }

/* === PANELEN: warme cream achtergrond, zachte border === */
.panel {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* === AI BEDRIJFSADVISEUR — van blauwe gradient naar warm cream === */
#dashboardView .panel[style*="linear-gradient(135deg, #f8faff"],
#dashboardView .panel.wide-panel[style*="#cce0ff"] {
  background: linear-gradient(180deg, #faf6ed 0%, #f5efe0 100%) !important;
  border: 1px solid var(--border-strong) !important;
  border-left: 3px solid var(--accent-warm) !important;
}
#dashboardView .panel h3[style*="#0056b3"] {
  color: var(--text) !important;
  font-family: var(--font-serif-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.005em;
}
#dashboardView .panel .badge[style*="#0056b3"] {
  background: rgba(58, 45, 30, 0.08) !important;
  color: var(--muted-strong) !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
}
#ceoAdvisorContent {
  color: var(--text) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}
#ceoAdvisorContent b { color: var(--text); font-weight: 600; }

/* Concept-bericht block — warm rood ipv knal rood */
#ceoAdvisorContent blockquote {
  border-left-color: var(--accent-warm) !important;
  background: #fdf4ea !important;
  color: #6e3a1f !important;
  border-radius: 6px;
}

/* === KNOPPEN === */
.primary-button {
  background: var(--primary) !important;
  color: #fdfbf6 !important;
  border: none !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.18s ease;
}
.primary-button:hover { background: var(--primary-strong) !important; }

.secondary-button {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 500;
}
.secondary-button:hover {
  background: var(--surface-soft);
}

.ghost-button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted-strong);
}
.ghost-button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

/* === SIDEBAR === */
.sidebar,
aside.sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text);
}
.sidebar a, .sidebar button { color: var(--sidebar-text); }
.sidebar .sidebar-note,
.sidebar p { color: rgba(240, 232, 216, 0.7); }
.sidebar .badge,
.sidebar .nav-badge {
  background: var(--accent-warm) !important;
  color: #1c1611 !important;
}

/* === DASHBOARD HEADER === */
.workspace-header h1 {
  font-family: var(--font-serif-display);
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
}
.view-description { color: var(--muted); }

/* === METRIC CARDS — rustiger === */
.dashboard-metric-grid > * {
  background: var(--surface-strong);
  border: 1px solid var(--border);
}

/* === TABELLEN === */
.data-table th {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted-strong);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border-strong);
}
.data-table td { color: var(--text); }

/* === HEADER COMPANY SWITCH — minder druk === */
.header-company-switch {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.header-company-label {
  font-family: var(--font-serif-display);
  font-style: italic;
  color: var(--muted-strong);
  font-size: 12px;
}

/* === CLOUD-KNOP — subtieler === */
#lifeCloudBtn {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--muted-strong);
}

/* === MODALS === */
.modal-card {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.modal-head h3 {
  font-family: var(--font-serif-display);
  font-weight: 500;
  font-size: 1.5rem;
}

/* === INPUTS === */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  transition: border-color 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 3px rgba(184, 122, 74, 0.12);
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(58, 45, 30, 0.20);
  border-radius: 10px;
}
::-webkit-scrollbar-track { background: transparent; }