/* ============================================================
   FlipAlert dashboard — v2
   Bewust dezelfde ontwerptaal als de landingspagina (landing.css):
   licht, ruim wit, ronde hoeken, zachte schaduwen, Manrope voor
   koppen/merknaam, Inter voor lopende tekst, JetBrains Mono voor
   cijfers/bedragen. Groen blijft gereserveerd voor winst/positief,
   goud voor de merkidentiteit/primaire actie.
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --bg-soft: #F7F7F5;
  --ink: #14171A;
  --ink-soft: #5B6169;
  --ink-faint: #8A9099;
  --gold: #C9962E;
  --gold-soft: #F4E7CE;
  --green: #1D9A6C;
  --green-soft: #E3F5EC;
  --red: #C4453C;
  --red-soft: #FBE8E6;
  --line: rgba(20, 23, 26, 0.08);
  --line-strong: rgba(20, 23, 26, 0.14);
  --radius-sm: 12px;
  --radius: 20px;
  --shadow-card: 0 2px 8px rgba(20,23,26,0.05), 0 12px 32px rgba(20,23,26,0.07);

  /* Backwards-compatible aliassen — sommige templates/inline-stijlen
     verwijzen nog naar de oude variabelenamen. */
  --text: var(--ink);
  --muted: var(--ink-soft);
  --accent: var(--green);
  --accent-dark: #157a56;
  --danger: var(--red);
  --panel: #ffffff;
  --panel-border: var(--line);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
}

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

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.topbar .brand { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 16px; }
.topbar .brand span { color: var(--gold); }

.topbar nav a {
  margin-left: 20px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}
.topbar nav a:hover { color: var(--ink); text-decoration: none; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

h1 { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 24px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 14px; color: var(--ink); }
.subtitle { color: var(--ink-soft); margin: 0 0 24px; font-size: 14px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

.stats-row { display: flex; gap: 14px; margin-bottom: 20px; }
.stat-box {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.stat-box .num { font-family: "JetBrains Mono", monospace; font-size: 26px; font-weight: 700; color: var(--gold); }
.stat-box .label { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }
td { font-family: "JetBrains Mono", monospace; font-size: 13px; }
td:first-child { font-family: "Inter", sans-serif; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: "Manrope", sans-serif;
}
.badge.on { background: var(--green-soft); color: var(--green); }
.badge.off { background: var(--bg-soft); color: var(--ink-faint); }
.badge.alert { background: var(--gold-soft); color: var(--gold); }

input[type=text], input[type=number], input[type=password], textarea, select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-top: 4px;
  font-family: "Inter", sans-serif;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }

label { font-size: 13px; color: var(--ink-soft); display: block; margin-top: 12px; font-weight: 500; }

.form-row { display: flex; gap: 12px; }
.form-row > div { flex: 1; }

button, .btn {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  font-family: "Manrope", sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button:hover, .btn:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,23,26,0.18); }

button.secondary, .btn.secondary {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
button.secondary:hover, .btn.secondary:hover { border-color: var(--ink); background: var(--bg-soft); transform: translateY(-1px); box-shadow: none; }

button.danger { background: transparent; color: var(--red); border: 1px solid rgba(196,69,60,0.3); }
button.danger:hover { background: var(--red-soft); color: var(--red); transform: none; box-shadow: none; }

.inline-form { display: inline; }

.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}
.flash.success { background: var(--green-soft); color: var(--green); }
.flash.error { background: var(--red-soft); color: var(--red); }

.scan-bar { display: flex; align-items: center; gap: 14px; }
.scan-status-text { color: var(--ink-soft); font-size: 13.5px; }

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-soft);
}
.login-card { width: 340px; }