/* ═══════════════════════════════════════════════════════
   DEV THEME OVERRIDE
   #F5FAF6 achtergrond · #1D4949 header & sidebar
   #F7A82D oranje knoppen met witte tekst
   ═══════════════════════════════════════════════════════ */

/* ── CSS variabelen overschrijven ── */
:root {
  --bg:           #F5FAF6;
  --teal-dark:    #F5FAF6;

  /* Oranje accent vervangt indigo */
  --lime:         #F7A82D;
  --lime-dim:     rgba(247,168,45,0.09);
  --lime-bd:      rgba(247,168,45,0.25);
  --lime-glow:    0 0 16px rgba(247,168,45,0.25), 0 0 40px rgba(247,168,45,0.10);

  /* Compat aliassen */
  --teal:         #F7A82D;
  --teal-mid:     #E09520;
  --teal-hover:   #E09520;
  --teal-light:   #F7A82D;
  --amber:        #F7A82D;

  /* Randen & oppervlakken */
  --bd:           rgba(29,73,73,0.12);
  --bd-str:       rgba(29,73,73,0.25);
  --border:       rgba(29,73,73,0.12);
  --border-dark:  rgba(29,73,73,0.25);

  /* Tekst donker op lichte achtergrond */
  --text:         #1D4949;
  --text-m:       rgba(29,73,73,0.65);
  --text-d:       rgba(29,73,73,0.40);
  --off-white:    #1D4949;
  --text-muted:   rgba(29,73,73,0.55);
  --text-dim:     rgba(29,73,73,0.35);

  /* Schaduw */
  --shadow:       0 2px 16px rgba(29,73,73,0.10);
  --shadow-lg:    0 8px 40px rgba(29,73,73,0.15);
}

/* ── Holografische achtergrond → eenvoudige lichte achtergrond ── */
body::before {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%,  rgba(247,168,45,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 0%  100%, rgba(29,73,73,0.04)  0%, transparent 55%),
    #F5FAF6 !important;
}

/* ── Knoptekst: wit op oranje ── */
.btn-primary { color: #FFFFFF !important; }
.sbtn        { color: #FFFFFF !important; }
.btn-amber   { color: #FFFFFF !important; }

/* ── Hover/active glow → oranje toon ── */
.fn-btn:hover svg { filter: drop-shadow(0 0 5px rgba(247,168,45,.45)) !important; }
.nav-item.fn-btn.active svg { filter: drop-shadow(0 0 7px rgba(247,168,45,.55)) !important; }
.fn-chat-btn:hover { background: rgba(247,168,45,0.15) !important; box-shadow: var(--lime-glow) !important; }

/* ══════════════════════════════════════════════
   FLOATING NAV (SIDEBAR) → donker teal #1D4949
   ══════════════════════════════════════════════ */
.float-nav {
  background: #1D4949 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

.fn-logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}
.fn-divider { background: rgba(255,255,255,0.15) !important; }

.fn-btn { color: rgba(255,255,255,0.55) !important; }
.fn-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.10) !important;
}
.fn-btn:hover svg { filter: none !important; }

.nav-item.fn-btn.active {
  color: #F7A82D !important;
  background: rgba(247,168,45,0.15) !important;
  box-shadow: 0 0 0 1px rgba(247,168,45,0.30) !important;
}

.fn-co-icon { color: rgba(255,255,255,0.55) !important; }
.fn-co-wrap:hover .fn-co-icon {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.10) !important;
}

.fn-chat-btn {
  background: rgba(247,168,45,0.20) !important;
  color: #F7A82D !important;
  box-shadow: 0 0 0 1px rgba(247,168,45,0.35) !important;
}

.fn-lock-dot { background: rgba(255,255,255,0.35) !important; box-shadow: none !important; }
.fn-locked:hover { background: rgba(255,255,255,0.05) !important; }

.fn-tooltip {
  background: rgba(14,40,40,0.96) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
}

.fn-cost .cost-meter-bar  { background: rgba(255,255,255,0.12) !important; }
.fn-cost .cost-meter-fill { background: #F7A82D !important; }

.fn-logout:hover { color: #ff9999 !important; }

/* ══════════════════════════════════════════════
   TOPBAR → donker teal #1D4949
   ══════════════════════════════════════════════ */
.topbar {
  background: #1D4949 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.topbar-title { color: #FFFFFF !important; }
.topbar-hint  { color: rgba(255,255,255,0.40) !important; }

.model-sel {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.65) !important;
}
.model-sel option { background: #1D4949 !important; color: #FFFFFF !important; }

.flow-toggle       { color: rgba(255,255,255,0.45) !important; }
.logout-btn        { border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.50) !important; }
.logout-btn:hover  { border-color: rgba(255,100,100,0.50) !important; color: #ff9999 !important; }
.actions-list      { background: rgba(14,40,40,0.95) !important; border-color: rgba(255,255,255,0.12) !important; backdrop-filter: blur(16px) !important; }
.action-item       { color: rgba(255,255,255,0.65) !important; }
.action-item:hover { background: rgba(255,255,255,0.08) !important; color: #FFFFFF !important; }

/* ══════════════════════════════════════════════
   GRAFIEK CARD (PowerPoint stijl)
   ══════════════════════════════════════════════ */
.chart-card {
  margin-top: 18px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 2px 24px rgba(29,73,73,0.09), 0 0 0 1px rgba(29,73,73,0.07);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.chart-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(29,73,73,0.07);
  background: #FAFCFC;
}
.chart-card-accent {
  width: 4px;
  height: 30px;
  border-radius: 4px;
  background: linear-gradient(180deg, #F7A82D 0%, #E09520 100%);
  flex-shrink: 0;
}
.chart-card-titles { flex: 1; min-width: 0; }
.chart-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1D4949;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-card-subtitle {
  font-size: 11px;
  color: rgba(29,73,73,0.40);
  margin-top: 2px;
}
.chart-card-body {
  padding: 18px 20px 20px;
}
.chart-card-canvas {
  max-height: 260px;
}

/* ── Aanbod knop ── */
.chart-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 14px;
  background: rgba(247,168,45,0.05);
  border: 1px solid rgba(247,168,45,0.20);
  border-radius: 10px;
  flex-wrap: wrap;
}
.chart-offer-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }
.chart-offer-text { font-size: 12.5px; color: rgba(29,73,73,0.65); flex: 1; min-width: 140px; }
.chart-offer-btn {
  padding: 6px 16px;
  background: #1D4949;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.chart-offer-btn:hover { background: #F7A82D; }