/* Backup Bridge — één stylesheet, geen externe fonts of CDN's. */

:root {
  color-scheme: light dark;

  --bg: #f4f6f9;
  --bg-elev: #ffffff;
  --bg-sunken: #eceff4;
  --border: #d8dee8;
  --border-strong: #c2cad8;
  --text: #1b2230;
  --text-muted: #5d6a7e;
  --text-faint: #8a94a5;

  --accent: #2563eb;
  --accent-text: #ffffff;
  --accent-soft: #e3ecff;

  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --err: #b91c1c;
  --err-soft: #fee2e2;
  --busy: #6d28d9;
  --busy-soft: #ede9fe;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -8px rgba(16, 24, 40, .16);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141b;
    --bg-elev: #171c26;
    --bg-sunken: #0c0f15;
    --border: #262d3a;
    --border-strong: #364052;
    --text: #e6eaf2;
    --text-muted: #9aa6ba;
    --text-faint: #6c788c;

    --accent: #4f83ff;
    --accent-text: #0b1020;
    --accent-soft: #1c2942;

    --ok: #4ade80;
    --ok-soft: #14301f;
    --warn: #fbbf24;
    --warn-soft: #362a10;
    --err: #f87171;
    --err-soft: #3a1717;
    --busy: #a78bfa;
    --busy-soft: #241a3d;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ---------------------------------------------------------------- layout */

.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 18px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.brand .mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: none;
}

.brand small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--text-faint);
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid transparent;
}

.nav-link:hover { background: var(--bg-sunken); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); border-color: var(--border); font-weight: 550; }
.nav-link .count { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.sidebar-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* min-width: 0 is nodig, anders kan deze gridkolom niet krimpen onder de
   breedte van een brede tabel en gaat de hele pagina horizontaal scrollen
   in plaats van de tabel zelf. */
.main { padding: 28px 32px 64px; max-width: 1180px; min-width: 0; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.page-head h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; }
.page-head p { margin: 0; color: var(--text-muted); font-size: 14px; max-width: 62ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  overflow: hidden;
}

.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.card-head .sub { font-size: 12px; color: var(--text-faint); }
.card-body { padding: 18px; }
/* Brede tabellen mogen binnen de kaart scrollen; anders verdwijnen kolommen
   achter de rand van de kaart, die overflow: hidden heeft. */
.card-body.tight { padding: 0; overflow-x: auto; }

.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; }
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.kpi-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.kpi-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-card .value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-card .hint { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  white-space: nowrap;
}
tbody td { padding: 11px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--bg-sunken); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* De knoppen mogen naar een volgende regel afbreken. Met nowrap liep de rij
   buiten de kaart en waren de laatste knoppen niet meer aan te klikken. */
td.actions { text-align: right; }

/* De knoppenrij breekt af naar meerdere regels in plaats van de tabel breder
   te maken. Met nowrap liep hij buiten de kaart en waren de laatste knoppen
   niet meer aan te klikken. */
.btn-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  /* Vaste breedte, anders geeft de tabel deze kolom te weinig ruimte en komt
     elke knop op een eigen regel. */
  width: 250px;
  max-width: 100%;
  margin-left: auto;
}
.cell-title { font-weight: 550; overflow-wrap: anywhere; }
/* Lange paden mogen afbreken; anders maken ze de hele tabel breder dan de kaart. */
.cell-sub { font-size: 12px; color: var(--text-faint); overflow-wrap: anywhere; }

/* Brede tabel in een dialoog: mag zelf scrollen. */
.table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.cell-input {
  width: auto;
  min-width: 160px;
  font-size: 13px;
  padding: 5px 8px;
}

.empty {
  padding: 40px 18px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

/* --------------------------------------------------------------- buttons */

button, .btn {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  line-height: 1.4;
}
button:hover:not(:disabled), .btn:hover { background: var(--bg-sunken); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
.btn-danger { color: var(--err); border-color: var(--border-strong); }
.btn-danger:hover:not(:disabled) { background: var(--err-soft); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-ghost { border-color: transparent; background: transparent; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--err-soft); color: var(--err); }
.badge.busy { background: var(--busy-soft); color: var(--busy); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.busy .dot { animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ----------------------------------------------------------------- forms */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 5px; }
.field .help { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

input[type=text], input[type=password], input[type=number], input[type=url], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
}
textarea { resize: vertical; min-height: 80px; font-family: var(--mono); font-size: 13px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

.row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.row.three { grid-template-columns: 2fr 1fr 1fr; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check label { margin: 0; font-weight: 500; }

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 0 0 16px;
}
legend { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 0 6px; }

/* --------------------------------------------------------------- dialogs */

dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  padding: 0;
  width: min(720px, calc(100vw - 32px));
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .45);
}
dialog::backdrop { background: rgba(8, 12, 20, .55); }
.dialog-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.dialog-head h2 { margin: 0; font-size: 16px; }
.dialog-body { padding: 20px; max-height: min(66vh, 620px); overflow-y: auto; }
.dialog-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--bg-sunken); }

/* -------------------------------------------------------------- overige */

.progress {
  height: 6px;
  background: var(--bg-sunken);
  border-radius: 999px;
  overflow: hidden;
  min-width: 110px;
}
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }

.log {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  max-height: 460px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.log .line { display: flex; gap: 10px; }
.log .ts { color: var(--text-faint); flex: none; }
.log .line.warn .msg { color: var(--warn); }
.log .line.error .msg { color: var(--err); }

code, .mono { font-family: var(--mono); font-size: 12.5px; }

.keyblock {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  word-break: break-all;
  user-select: all;
}

.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.callout.warn { border-left-color: var(--warn); }
.callout.err { border-left-color: var(--err); }
.callout h3 { margin: 0 0 6px; font-size: 13px; }
.callout ol, .callout ul { margin: 8px 0 0; padding-left: 20px; }
.callout li { margin-bottom: 4px; }

/* ------------------------------------------------------- startwizard */

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step-mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-sunken);
  color: var(--text-faint);
  border: 1px solid var(--border);
}
.step.current .step-mark { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.step.done .step-mark { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.step.done .step-body strong { color: var(--text-muted); }
.step-body p { font-size: 13px; margin: 3px 0 0; max-width: 72ch; }

/* --------------------------------------------------- beveiligingslijst */

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check-mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--warn-soft);
  color: var(--warn);
}
.checklist li.ok .check-mark { background: var(--ok-soft); color: var(--ok); }
.checklist li .cell-sub { max-width: 78ch; }

/* --------------------------------------------------------- planner-ui */

#sched-times { display: flex; flex-wrap: wrap; gap: 8px; }
.time-row { display: inline-flex; align-items: center; gap: 4px; }
.time-row input[type=time] {
  width: auto;
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
}

.daypicker { display: flex; flex-wrap: wrap; gap: 6px; }
.day { position: relative; margin: 0; }
.day input { position: absolute; opacity: 0; width: 0; height: 0; }
.day span {
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 550;
  text-transform: capitalize;
  cursor: pointer;
  user-select: none;
}
.day input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.day input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

details { margin-bottom: 14px; }
summary { cursor: pointer; font-size: 13px; padding: 4px 0; }
summary:hover { color: var(--text); }

.toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
  max-width: 380px;
}
.toast {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  box-shadow: var(--shadow);
}
.toast.err { border-left-color: var(--err); }
.toast.ok { border-left-color: var(--ok); }

.center-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card { width: min(420px, 100%); }

.list-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 4px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt { margin-top: 14px; }
.mb0 { margin-bottom: 0; }

.dl { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 6px 16px; font-size: 13px; margin: 0; }
.dl dt { color: var(--text-muted); }
.dl dd { margin: 0; word-break: break-word; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px;
  }
  .brand { padding: 0 8px 0 0; }
  .sidebar-foot { margin-left: auto; padding-top: 0; border-top: 0; flex-direction: row; align-items: center; }
  .main { padding: 20px 16px 48px; }
  .row, .row.three { grid-template-columns: 1fr; }
  thead { display: none; }
  tbody td { display: block; padding: 6px 14px; border: 0; }
  tbody tr { display: block; border-bottom: 1px solid var(--border); padding: 8px 0; }
  td.actions { text-align: left; }
}