/* assets/app.css */
/* ====== Basisthema zoals eerder opgemaakt ====== */
:root {
  --brand: #3b82f6; /* wordt overschreven in _header.php via :root{--brand:...} */

  /* LIGHT */
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --heading: #1f2937;
  --subtle: #374151;
  --border: #e5e7eb;

  --ring: rgba(74, 144, 226, .35);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.12);
  --radius-lg: 18px;

  --input-bg: #ffffff;
  --input-bd: #e5e7eb;
  --input-fg: #111827;
  --input-ph: #6b7280;

  /* Hero (light) */
  --hero-bg:
    radial-gradient(1200px 400px at 10% -10%, color-mix(in oklab, var(--brand) 20%, #fff) 0%, transparent 60%),
    radial-gradient(1200px 400px at 90% -10%, color-mix(in oklab, var(--brand) 16%, #fff) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand) 12%, #fff), color-mix(in oklab, var(--brand) 6%, #cbd5e1));

  /* Tabel (light) */
  --tbl-head-bg: color-mix(in oklab, var(--brand) 8%, #fff);
  --tbl-row-alt: color-mix(in oklab, var(--brand) 4%, #fff);
  --tbl-bd: rgba(0,0,0,.08);
}

[data-theme="dark"] {
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #d1d5db;
  --heading: #ffffff;
  --subtle: #e5e7eb;
  --border: #25324a;

  --ring: rgba(74, 144, 226, .55);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px rgba(0,0,0,.7);

  --input-bg: #1a2336;
  --input-bd: #2a3550;
  --input-fg: #e5e7eb;
  --input-ph: #93a4c3;

  /* Hero (dark) */
  --hero-bg:
    radial-gradient(1200px 400px at 10% -10%, color-mix(in oklab, var(--brand) 12%, #000) 0%, transparent 60%),
    radial-gradient(1200px 400px at 90% -10%, color-mix(in oklab, var(--brand) 10%, #000) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, #000), color-mix(in oklab, var(--brand) 6%, #111827));

  /* Tabel (dark) – duidelijk donkerder */
  --tbl-head-bg: #182338;
  --tbl-row-alt: #141e31;
  --tbl-bd: #25324a;
}

/* Basis */
* { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
html, body { background: var(--bg); color: var(--text); }

/* Topbar/Hero */
.topbar-wrap { background: var(--hero-bg); padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-sm); }
.navbar { background: transparent !important; }
.nav-brand { display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand-badge {
  width: 38px; height: 38px; border-radius: 12px;
  display:grid; place-items:center; background:#fff; color:var(--brand);
  font-weight:800; letter-spacing:.5px; box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.hero-text { color: var(--heading) !important; }
.hero-subtle { color: var(--muted) !important; }

/* Buttons/Forms/Cards */
.btn-brand{ background:#fff; color:var(--brand); border:none; border-radius:999px; }
.theme-toggle{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.18); border-radius:999px; }
[data-theme="dark"] .theme-toggle{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.14); color:#e5e7eb; }

.heading-strong { color: var(--heading) !important; font-weight: 700; }
.text-subtle { color: var(--subtle) !important; font-weight: 500; }

.card { border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); border:1px solid var(--border); }
.btn-primary { background: var(--brand); border:none; }
.btn-primary:hover { filter: brightness(0.95); }

.form-label { color: var(--heading); }
[data-theme="dark"] .form-label { color:#fff !important; }
.form-control, .form-select, textarea.form-control {
  background: var(--input-bg); color: var(--input-fg); border: 1px solid var(--input-bd);
}
.form-control::placeholder, textarea.form-control::placeholder { color: var(--input-ph); opacity: 1; }
.form-control:focus, .form-select:focus, textarea.form-control:focus {
  border-color: color-mix(in oklab, var(--brand) 55%, var(--input-bd));
  box-shadow: 0 0 0 .2rem rgba(74,144,226,.25);
}
.form-text { color: var(--subtle) !important; }
[data-theme="dark"] .form-text { color: #fff !important; }

.ring-focus:focus { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Tabellen – optie 1: wikkel je table in .table-overview voor exact dezelfde look */
.table-overview {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}
.table-overview table { background: var(--card) !important; color: var(--text) !important; margin: 0; }
.table-overview thead th {
  background: var(--tbl-head-bg) !important;
  color: #0f172a;
  border-bottom: 1px solid var(--tbl-bd);
}
[data-theme="dark"] .table-overview thead th { color: #fff; }
.table-overview tbody td, .table-overview tfoot th {
  background: var(--card) !important; color: var(--text) !important; border-top: 1px solid var(--tbl-bd) !important;
}
.table-overview tbody tr:nth-child(odd) td { background: var(--tbl-row-alt) !important; }

/* Tabellen – optie 2: generieke table kleuring (als je .table-overview niet gebruikt) */
.table thead th { background: var(--tbl-head-bg) !important; color:#0f172a; border-bottom:1px solid var(--tbl-bd)!important; }
[data-theme="dark"] .table thead th { color:#fff; }
.table tbody td { background: var(--card)!important; color: var(--text)!important; border-top:1px solid var(--tbl-bd)!important; }
.table tbody tr:nth-child(odd) td { background: var(--tbl-row-alt)!important; }
.table tfoot th { border-top: 1px solid var(--tbl-bd)!important; }