/* Dezelfde tokens als het router-dashboard: crème canvas, kobalt accent,
   vlam-oranje vonk, scherpe hoeken, Archivo voor tekst en JetBrains Mono
   voor cijfers. Eén huisstijl over onze eigen gereedschappen heen. */
:root {
  --bg: #f5f3ee;
  --card: #ffffff;
  --ink: #08090f;
  --fg: #08090f;
  --muted: #6b6a66;
  --border: #ddd9d0;
  --cobalt: #1a2db8;
  --flame: #ff460d;
  --ok: #1a7f5a;
  --warn: #a8620a;
  --sidebar-fg: #f5f3ee;
  --sidebar-muted: #8d8d93;
}

* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}
.wordmark { font-family: Sora, Archivo, sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.card { background: var(--card); border: 1px solid var(--border); padding: 20px; }
.muted { color: var(--muted); }
.flame { color: var(--flame); }
.klein { font-size: 12px; }

button {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: 6px 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--ink); }
button.accent { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
button.accent:hover:not(:disabled) { filter: brightness(1.15); }
button.gevaar:hover:not(:disabled) { border-color: var(--flame); color: var(--flame); }
button:disabled { opacity: 0.5; cursor: default; }

a.knop {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: 6px 12px;
  display: inline-block;
}
a.knop:hover { border-color: var(--ink); text-decoration: none; }
a.knop.accent { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
a.knop.accent:hover { filter: brightness(1.15); }

input, select, textarea {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  width: 100%;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}
label { display: block; }
label .eyebrow { margin-bottom: 4px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }

/* --- inlogscherm --- */
.midden { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login { max-width: 420px; padding: 32px; }
.login h1 { font-size: 32px; margin: 4px 0 12px; }
.fout {
  border-left: 3px solid var(--flame);
  padding: 8px 12px;
  background: #fff4f0;
  margin: 0 0 16px;
}

/* --- raamwerk --- */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
aside {
  background: var(--ink);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
.merk { padding: 0 20px 24px; }
.merk p { margin: 0; }
.merk .wordmark { font-size: 20px; }
aside nav { display: flex; flex-direction: column; }
aside nav a {
  color: var(--sidebar-muted);
  padding: 8px 20px;
  border-left: 3px solid transparent;
}
aside nav a:hover { color: var(--sidebar-fg); text-decoration: none; }
aside nav a.actief { color: var(--sidebar-fg); border-left-color: var(--flame); }
.voet { margin-top: auto; padding: 20px; }
.voet .naam { margin: 0 0 10px; color: var(--sidebar-fg); }
.voet button { background: transparent; color: var(--sidebar-muted); border-color: #2a2b33; }
.voet button:hover:not(:disabled) { color: var(--sidebar-fg); border-color: var(--sidebar-fg); }

main { padding: 28px 32px 60px; max-width: 1100px; }
main > header { margin-bottom: 24px; }
main > header h1 { font-size: 24px; }
section { margin-bottom: 24px; }
section > h2 { margin-bottom: 12px; }

/* --- formulier --- */
.rooster { display: grid; gap: 12px 16px; grid-template-columns: repeat(4, 1fr); }
.rooster .breed { grid-column: 1 / -1; }
.vinkjes { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.vinkjes label { display: flex; gap: 6px; align-items: center; }
.vinkjes input { width: auto; }
.acties { display: flex; gap: 10px; align-items: center; margin-top: 16px; }

/* --- status --- */
.stip { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--muted); }
.stip.groen { background: var(--ok); }
.stip.oranje { background: var(--warn); }
.stip.rood { background: var(--flame); }
.stip.blauw { background: var(--cobalt); }

.log {
  background: var(--ink);
  color: #d6d5d0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  padding: 12px;
  margin: 8px 0 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}
.shorts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.shorts figure { margin: 0; width: 120px; }
.shorts video { width: 120px; height: 213px; background: #000; object-fit: cover; display: block; }
.shorts figcaption { font-size: 11px; word-break: break-all; margin-top: 4px; }

.melding { padding: 8px 12px; border-left: 3px solid var(--cobalt); background: #eef0fb; margin-bottom: 16px; }
.melding.fout { border-color: var(--flame); background: #fff4f0; }
.melding.gelukt { border-color: var(--ok); background: #eef7f3; }

pre.commando {
  background: var(--ink);
  color: #d6d5d0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  padding: 12px;
  overflow-x: auto;
  margin: 0 0 12px;
}

ol.stappen { padding-left: 20px; margin: 0; }
ol.stappen li { margin-bottom: 14px; }

@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .rooster { grid-template-columns: 1fr 1fr; }
  main { padding: 20px; }
}