/* ---------- THEME ---------- */
:root{
  /* Palet – pas deze 5 aan voor perfecte brand match */
  --bg: #0b0d12;            /* page background */
  --surface: #111418;       /* panel/card bg */
  --text: #e6eaf2;          /* primary text on dark */
  --muted: #9aa3b2;         /* secondary text */
  --accent: #0a84ff;        /* Opinime-ish electric blue */

  /* UI afgeleiden */
  --ring: rgba(10,132,255,.35);
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
  --radius-sm: 10px;
  --transition: 220ms cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(10,132,255,.12), transparent 60%),
    radial-gradient(800px 600px at -10% 100%, rgba(10,132,255,.08), transparent 50%),
    var(--bg);
  display:flex;
}

/* ---------- SIDEBAR (collapsible) ---------- */
.sidebar{
  position:relative;
  width:280px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border-right:1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--text);
  padding:18px 16px;
  transition: width var(--transition), padding var(--transition);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sidebar.collapsed{ width:80px; padding:18px 12px; }

#menuToggle{
  appearance:none; border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text); padding:10px 14px; border-radius:12px;
  font-weight:600; letter-spacing:.2px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.6rem;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
#menuToggle:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
#menuToggle:focus-visible{ outline:none; box-shadow: 0 0 0 6px var(--ring); }

#menuItems{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px; }
#menuItems.hidden{ display:none; }
#menuItems li a{
  display:flex; align-items:center; gap:.75rem;
  padding:10px 12px; border-radius:12px; color:var(--text); text-decoration:none;
  border:1px solid transparent; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
#menuItems li a:hover{
  background: rgba(10,132,255,.10);
  border-color: var(--ring);
}
/* kleine labels bij collapsed sidebar */
.sidebar.collapsed #menuItems li a span.label{ display:none; }

/* ---------- AUTH (login/register in sidebar) ---------- */
.auth{
  display:grid;
  gap:14px;
}
.auth-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:14px;
  box-shadow: var(--shadow);
}
.auth-card h3{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:700;
}
.auth .hint{ color:var(--muted); font-size:.9rem; margin:2px 0 8px; }

.auth form{
  display:grid;
  gap:10px;
}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0f1216;
  color:var(--text);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder{ color:#8f98a6; }
.input:focus{
  outline:none;
  border-color: var(--ring);
  box-shadow: 0 0 0 6px var(--ring);
}

.auth .row{
  display:flex;
  gap:8px;
  align-items:center;
}

.badge-info{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border-radius:999px;
  background: rgba(10,132,255,.15); color:#cfe5ff; border:1px solid rgba(10,132,255,.35);
  font-size:.85rem; font-weight:700;
}

/* ---------- KNOPPEN ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-weight:700;
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  background: linear-gradient(180deg, rgba(10,132,255,.95), rgba(10,132,255,.8));
  color:white; cursor:pointer; transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  box-shadow: 0 8px 18px rgba(10,132,255,.35);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); opacity:.9; }
.btn.ghost{
  background: transparent; color:var(--text); border-color:var(--border);
}
.btn.ghost:hover{ border-color: var(--ring); background: rgba(255,255,255,.06); }
.btn.full{ width:100%; }

/* ---------- MAIN LAYOUT ---------- */
main{
  flex:1; min-width:0; padding:40px clamp(20px, 5vw, 56px);
}
.container{ max-width:1200px; margin:0 auto; }

/* titels */
h1,h2,h3{ margin:0 0 14px; line-height:1.15; }
h1{ font-size: clamp(28px, 3.4vw, 42px); font-weight:800; letter-spacing:-.02em; }
h2{ font-size: clamp(20px, 2.2vw, 28px); font-weight:700; color:#f1f5fb; }
.subtle{ color:var(--muted); }

/* ---------- SECTIONS (routing via .active/.hidden) ---------- */
section.hidden{ display:none; }
section.active{ display:block; }

/* ---------- CHAT ---------- */
.chat-wrap{ display:grid; gap:18px; }
.chat-input{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.chat-input input[type="text"]{
  flex:1; min-width:260px;
  padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background: rgba(255,255,255,.06); color:var(--text);
  outline:none; transition: box-shadow var(--transition), border-color var(--transition);
}
.chat-input input[type="text"]::placeholder{ color:#9aa3b2; }
.chat-input input[type="text"]:focus{ border-color:var(--ring); box-shadow: 0 0 0 6px var(--ring); }

.messages{ display:grid; gap:12px; padding:8px 0 16px; }
.msg{
  max-width: 800px;
  padding:12px 14px; border-radius:16px; border:1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow);
}
.msg.user{
  margin-left:auto;
  background: linear-gradient(180deg, rgba(10,132,255,.18), rgba(10,132,255,.10));
  border-color: rgba(10,132,255,.35);
}
.msg.bot{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
}

/* ---------- REPORTS ---------- */
.cards{
  margin-top:10px;
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  padding:18px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{
  transform: translateY(-2px);
  border-color: var(--ring);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.card h3{ margin:0 0 10px; font-weight:800; }
.kpi{ font-size: clamp(28px, 4.5vw, 42px); font-weight:900; letter-spacing:-.015em; }
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border-radius:999px;
  background: rgba(10,132,255,.15); color:#cfe5ff; border:1px solid rgba(10,132,255,.35);
  font-size:.85rem; font-weight:700;
}

/* ---------- TABLES ---------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid var(--border); border-radius:12px;
}
.table th, .table td{ padding:12px 14px; text-align:left; }
.table thead th{
  background: rgba(255,255,255,.06); color:#f2f6ff; font-weight:700; border-bottom:1px solid var(--border);
}
.table tbody tr + tr td{ border-top:1px solid var(--border); }
.table tbody tr:hover td{ background: rgba(255,255,255,.03); }

/* ---------- UTILITIES ---------- */
hr{ border:0; height:1px; background: var(--border); }
a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.hidden{ display:none !important; }

/* ---------- MOBILE ---------- */
@media (max-width: 880px){
  .sidebar{ position:fixed; inset:0 auto 0 0; height:100dvh; z-index:50; transform: translateX(0); }
  .sidebar.collapsed{ transform: translateX(-100%); width:280px; }
  body{ display:block; }
  main{ padding:28px 20px 48px; }
}

/* --- Inputs: ook <select> en <button> krijgen dezelfde basis --- */
select.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f1216;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none; /* nette native-select */
}
select.input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 6px var(--ring);
}

/* --- Chat: scrolbare message-lijst --- */
.messages {
  max-height: calc(100vh - 280px); /* sidebar + header marge */
  overflow: auto;
  padding-right: 6px;
}

/* smooth scroll naar laatste bericht */
.messages { scroll-behavior: smooth; }

/* --- Error bubble (voor fouten in JS) --- */
.msg.error,
.msg-error {
  border-color: rgba(255, 99, 99, .45);
  background: linear-gradient(180deg, rgba(255,99,99,.14), rgba(255,99,99,.09));
  color: #ffdada;
}

/* --- Kleine layout helpers --- */
.row { display: flex; align-items: center; gap: 8px; }
.label { opacity: .95; }

/* --- Sidebar fine-tuning op smalle schermen --- */
@media (max-width: 880px) {
  .messages { max-height: calc(100dvh - 320px); }
}