:root {
  --bg: #EAF0F6;                /* Soft Ice */
  --btn: #072537;               /* Deep Navy */
  --accent: #FF5769;            /* Primary / Action */
  --text: #072537;              /* Dark text */
  --muted: #677784;             /* Steel Grey */
  --card: #ffffff;
  --stroke: #d7e0ea;            /* subtiele 1px lijn */
  --nav-bg: #ffffff;
  --nav-border: #d7e0ea;
  --nav-hover: #f4f7fb;
  --nav-sub-bg: #f4f7fb;
  --nav-fg: #072537;
  --nav-item-bg: transparent;
  --surface-elevated: 0 4px 12px rgba(7,37,55,0.05);
}

:root[data-theme="dark"],
body.theme-dark,
body[data-theme="dark"] {
  --bg: #072537;                /* Deep Navy */
  --btn: #EAF0F6;
  --accent: #FF6B7A;
  --text: #EAF0F6;
  --muted: #C5D0DC;
  --card: #0D2E45;              /* iets lichter dan de bg */
  --stroke: rgba(234,240,246,0.14);
  --nav-bg: #0d1624;
  --nav-border: rgba(234,240,246,0.12);
  --nav-hover: rgba(255,107,122,0.14);
  --nav-sub-bg: rgba(234,240,246,0.04);
  --nav-fg: #EAF0F6;
  --nav-item-bg: rgba(234,240,246,0.05);
  --surface-elevated: 0 12px 28px rgba(0,0,0,0.26);
}

body {
  margin: 0;
  font-family: "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ===== Login pagina ===== */
body.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--bg);
}

.card {
  background: var(--card);
  border: 1px solid var(--stroke);
  padding: 24px;
  box-shadow: var(--surface-elevated);
  border-radius: 4px;
}

.card.login {
  max-width: 420px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.card.login::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #FF5769, rgba(255,87,105,0.32));
}

.card.login img {
  max-width: 180px;
  margin: 0 auto 14px;
  display: block;
}

.card.login h2 {
  text-align: center;
  margin: 0 0 16px;
  color: var(--btn);
}

.card.login label {
  font-size: 13px;
  font-weight: 600;
  color: var(--btn);
}

.card.login input,
.card.login button {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--stroke);
  font: inherit;
  box-sizing: border-box;
}

.card.login button {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border: none;
  padding: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 32px rgba(255,87,105,0.25);
}

.card.login button:disabled {opacity: 0.7; cursor: not-allowed;}
.card.login .msg {text-align:center;font-size:.9rem;color:#dc2626;margin-top:8px;}

/* ===== Header ===== */
header {
  background:var(--accent);color:#fff;padding:8px 16px;
  display:flex;justify-content:space-between;align-items:center;
}
header img {height:28px;margin:0;}
header .header-right {display:flex;align-items:center;gap:10px;}
header button {
  background:none;border:none;color:#fff;font-size:.9rem;cursor:pointer;
  padding:6px 10px;
}
header button:hover {text-decoration:underline;}

/* ===== Tabs ===== */
.tabs {
  display:flex;
  gap:20px;
  background:var(--card);
  border-bottom:1px solid var(--stroke);
  padding:10px 20px;
}
.tabs button {
  background:none;
  border:none;
  padding:8px 16px;
  cursor:pointer;
  font-weight:600;
  color:var(--btn);
  border-radius:10px;
  transition:all .2s;
}
.tabs button:hover {background:var(--nav-sub-bg);}
.tabs button.active {
  background:var(--accent);color:#fff;
}

/* ===== Layout ===== */
main {display:flex;gap:20px;padding:20px;}
.sidebar {
  flex:0 0 260px;background:#fff;border:1px solid var(--stroke);
  border-radius:8px;display:flex;flex-direction:column;
}
.sidebar-header {
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--stroke);
}
.sidebar-header h2 {margin:0;font-size:16px;font-weight:600;}
.sidebar ul {list-style:none;margin:0;padding:0;flex:1;overflow-y:auto;}
.sidebar li {
  padding:12px;border-bottom:1px solid var(--stroke);
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  transition:background 0.2s;
}
.sidebar li:hover {background:#f3f4f6;}
.sidebar li.active {
  background:var(--bg);font-weight:600;border-left:4px solid var(--accent);
}
.details {flex:1;}

/* ===== Algemene knoppen ===== */
button {
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(255,87,105,0.9);
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.18s ease;
  box-shadow: 0 6px 18px rgba(255,87,105,0.18);
}
button:hover {transform:translateY(-1px); box-shadow: 0 10px 22px rgba(255,87,105,0.2);}
button:active {transform:scale(.98);}
.primary-action {
  background:var(--btn);border-color:var(--btn);font-weight:700;
}
body[data-theme="dark"] .primary-action,
body.theme-dark .primary-action {
  color:#072537;
}
.page-actions {margin:16px 0;}

/* ===== Inputs ===== */
input, select, textarea {
  font:inherit;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:4px;
  width:100%;
  background:var(--card);
  color:var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
select {
  appearance:none;
  padding-right:30px;
  background:var(--card);
  background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23072537' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:16px;
}
[data-theme="dark"] select, body.theme-dark select {
  background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23e5e7eb' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
}
input:focus, select:focus, textarea:focus {
  border-color:var(--accent);outline:none;
  box-shadow:0 0 0 2px rgba(255,87,105,0.2);
}

/* ===== Toggle switch ===== */
.switch {position: relative;display: inline-block;width: 34px;height: 18px;}
.switch input {opacity:0;width:0;height:0;}
.slider {
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background-color:var(--stroke);transition:.3s;border-radius:18px;
}
.slider:before {
  position:absolute;content:"";height:14px;width:14px;
  left:2px;bottom:2px;background-color:var(--card);
  transition:.3s;border-radius:50%;
}
input:checked + .slider {background-color:var(--accent);}
input:checked + .slider:before {transform:translateX(16px);}

/* ===== Cards ===== */
.details .card, .worker-card, .tpl-card {
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:6px;
  padding:20px;
  margin-bottom:16px;
  box-shadow:var(--surface-elevated);
  display:flex;flex-direction:column;
}
.details .card h2, .details .card h3,
.worker-card h3, .tpl-card h3 {margin-top:0;color:var(--btn);}
.worker-head {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
}
.actions {margin-top:16px;display:flex;gap:10px;}

/* ===== Grid layout ===== */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
}

/* ===== Permissions (tabel) ===== */
#permList {margin-top:16px;}
#permList h3 {margin:12px 0 4px;color:var(--btn);}
.perm-table {
  width:100%;border-collapse:collapse;margin-bottom:12px;
}
.perm-table td {
  border:1px solid var(--stroke);padding:8px;
}
.perm-table td:first-child {width:70%;}
.perm-table td:last-child {text-align:right;}

/* ===== Worker logs ===== */
.logs {
  background:#f9fafb;border:1px solid var(--stroke);
  border-radius:6px;padding:10px;margin-top:10px;
  max-height:150px;overflow-y:auto;
}
.logs pre {
  margin:0;font-family:monospace;font-size:13px;line-height:1.4;
}

/* ===== Modal form ===== */
.modal {
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.4);backdrop-filter: blur(3px);
  display:none;justify-content:center;align-items:center;z-index:1000;
}
.modal .box {
  background:#fff;border-radius:8px;padding:24px;
  max-width:400px;width:100%;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.modal .box input, 
.modal .box select {
  width:100%;padding:12px;margin-bottom:12px;
  border:1px solid var(--stroke);
}
.modal .buttons {display:flex;gap:10px;margin-top:10px;}
.modal .buttons button {flex:1;}

/* ===== Responsive ===== */
@media(max-width: 768px) {
  main {flex-direction:column;}
  .sidebar {flex:1 1 auto; order:2;}
  .details {order:1; margin-bottom:20px;}
  .modal .box {max-width:90%;height:auto;}
  .grid {grid-template-columns:1fr;}
}
/* ============================================================
   App v1.1 – Admin & WhatsApp utilities (append-only)
   ============================================================ */

/* ---------- CSS custom properties (huisstijl) ---------- */
:root{
  --accent: #FF5769;
  --ink: #072537;
  --muted: #677784;
  --bg: #EAF0F6;
  --stroke: #E2E8F0;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --ok: #10B981;
  --warn: #F59E0B;
  --err: #EF4444;
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body.app{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- Header ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:var(--ink); color:#fff;
}
header .header-right button{
  margin-left:8px;
}

/* ---------- Buttons ---------- */
button{
  appearance:none; border:1px solid var(--stroke);
  background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:10px; cursor:pointer;
  transition: transform .02s ease, background .2s ease, border-color .2s ease;
}
button:hover{ background:#F1F5F9; }
button:active{ transform: translateY(1px); }
button[disabled]{ opacity:.6; cursor:not-allowed; }

.primary-action{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.primary-action:hover{ filter:brightness(.95); }

/* ---------- Inputs / Forms ---------- */
input, select, textarea{
  width:100%; padding:8px 10px; border:1px solid var(--stroke); border-radius:10px;
  background:#fff; color:var(--ink); outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color:#94A3B8; box-shadow:0 0 0 3px rgba(148,163,184,.2);
}
textarea{ min-height:100px; resize:vertical; }

/* ---------- Layout helpers ---------- */
main{ display:flex; gap:16px; padding:16px; }
@media (max-width: 900px){
  main{ flex-direction:column; }
}

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.row{ display:flex; gap:10px; }
.row>*{ flex:1; }

/* ---------- Cards / Sections ---------- */
.card{
  border:1px solid var(--stroke); border-radius:10px; background:#fff; padding:12px;
}
.card h3{ margin:4px 0 8px 0; }

/* ---------- Pills / Badges ---------- */
.pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; background:#EEF2F7; color:var(--ink);
}
.pill.ok{ background:#D1FAE5; color:#065F46; }
.pill.warn{ background:#FEF3C7; color:#92400E; }
.pill.err{ background:#FEE2E2; color:#7F1D1D; }

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:8px; border-bottom:1px solid var(--stroke); padding:8px 12px; background:#fff;
}
.tabs button{
  padding:8px 10px; border-radius:8px; border:1px solid var(--stroke); background:#fff; cursor:pointer;
}
.tabs button.active{ background:var(--bg); border-color:var(--bg); }

/* ---------- Sidebar / Details ---------- */
.sidebar{
  flex:0 0 320px; background:#fff; border:1px solid var(--stroke); border-radius:10px;
  display:flex; flex-direction:column; min-height:70vh; overflow:hidden;
}
.sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--stroke); padding:10px;
}
.sidebar ul{ list-style:none; margin:0; padding:0; overflow:auto; }
.sidebar li{
  padding:10px 12px; border-bottom:1px solid #F1F5F9; cursor:pointer;
}
.sidebar li:hover{ background:#F8FAFC; }
.sidebar li.active{ background:#F1F5F9; border-left:4px solid var(--accent); }

.details{
  flex:1; background:#fff; border:1px solid var(--stroke); border-radius:10px; min-height:70vh; padding:14px;
}

/* ---------- Modals ---------- */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(3px); z-index:1000;
}
.modal .box{
  background:#fff; border-radius:12px; padding:16px; min-width:340px; max-width:95vw;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.modal .buttons{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }

/* ---------- Tables / Lists (neutraal) ---------- */
.table{
  width:100%; border-collapse:collapse; border:1px solid var(--stroke); border-radius:10px; overflow:hidden;
}
.table th, .table td{ padding:8px 10px; border-bottom:1px solid var(--stroke); text-align:left; }
.table th{ background:#F8FAFC; color:#334155; font-weight:600; }

/* ---------- Small helpers ---------- */
.text-muted{ color: var(--muted); }
.text-right{ text-align:right; }
.mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; }
.mb-8{ margin-bottom:8px; } .mb-12{ margin-bottom:12px; } .mb-16{ margin-bottom:16px; }
.p-8{ padding:8px; } .p-12{ padding:12px; } .p-16{ padding:16px; }

/* ---------- Chat (POC-vriendelijk, lichtgewicht) ---------- */
.chat-list{ list-style:none; margin:0; padding:0; }
.chat-item{ margin:6px 0; }
.chat-meta{ color:#64748B; font-size:12px; }

/* ---------- Buttons color variants (optioneel) ---------- */
.btn-ok{ background:var(--ok); border-color:var(--ok); color:#fff; }
.btn-warn{ background:var(--warn); border-color:var(--warn); color:#fff; }
.btn-err{ background:var(--err); border-color:var(--err); color:#fff; }