/* ===== Dark Dashboard look & feel (zoals je screenshot) ===== */
:root{
  --bg:#0b0f14; --card:#0f1620; --panel:#0b1320; --line:rgba(255,255,255,.08);
  --text:#e5e7eb; --muted:#94a3b8; --mono:#cbd5e1;
  --green:#22c55e; --green-2:#16a34a; --red:#ef4444;
  --radius:14px; --shadow:0 12px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}

/* topbar in base.html */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); position:sticky; top:0; z-index:10; backdrop-filter:blur(6px)}
.brand{display:flex; align-items:center; gap:12px}
/* Voor het logo zelf */
.brand {
  display: flex;
  align-items: center;  /* logo + tekst mooi uitgelijnd */
  gap: 10px;            /* ruimte tussen logo en tekst */
  text-decoration: none; /* geen onderlijning */
  color: inherit;        /* tekstkleur overnemen van body */
}
.brand-logo-link {
  display: flex;
  align-items: center;
  margin-right: 12px;
}

.brand-logo {
  width: auto;     /* of 32px, probeer wat je mooi vindt */
  height: 32px;
  object-fit: contain;
  display: block;
}


.brand-title {
  font-weight: 700;
  color: var(--text);
}

.brand-sub {
  font-size: 12px;
  color: var(--muted);
}


.brand-title{font-weight:700}
.brand-sub{font-size:12px; color:var(--muted)}
.topnav{display:flex; gap:16px}
.topnav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px}
.topnav a:hover{background:rgba(255,255,255,.04); color:var(--text)}
.topnav a.active{background:rgba(34,197,94,.15); color:#d1fae5}

.container{max-width:1200px; margin:0 auto; padding:20px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:980px){.grid-2{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.card-title{margin:0 0 4px 0; font-size:18px; font-weight:700}
.card-sub{margin:0 0 12px 0; color:var(--muted)}

.form{display:flex; flex-direction:column; gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
.field-inline{display:flex; align-items:center; gap:10px}
.input{width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text); padding:12px 14px; border-radius:12px; outline:none}
.input.lg{font-size:15px}
.input:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.wide{width:100%}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; transition:.15s}
.btn:hover{background:#101c2b}
.btn-primary{background:var(--green); border-color:var(--green); color:#062410; font-weight:700}
.btn-primary:hover{background:var(--green-2)}
.btn.danger{background:var(--red); border-color:var(--red); color:#fff}
.btn.danger:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}

.switch{position:relative; display:inline-flex; align-items:center; gap:10px}
.switch input{display:none}
.switch .track{width:46px; height:26px; background:#475569; border-radius:999px; position:relative; transition:.15s}
.switch .track::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:999px; transition:transform .15s ease}
.switch input:checked + .track{background:var(--green)}
.switch input:checked + .track::after{transform:translateX(20px)}
.sw-text{color:var(--muted); font-size:13px}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px}
.stat-label{color:var(--muted); font-size:12px}
.stat-value{font-weight:800; font-size:22px}

.table-wrap{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
.table thead th{background:#0b1423; position:sticky; top:0; z-index:1; font-weight:700}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.card-rows .table tbody tr{box-shadow:inset 0 -1px 0 var(--line)}
.right{display:flex; justify-content:flex-end}
.gap8{gap:8px}
.hidden{display:none}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color:var(--mono)}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--line); font-size:12px}
.badge.ok{background:rgba(34,197,94,.15); color:#d1fae5; border-color:rgba(34,197,94,.35)}
.badge.muted{color:var(--muted)}
.empty{padding:18px; text-align:center; color:var(--muted)}
.mt12{margin-top:12px}
.w120{width:120px} .w160{width:160px} .w60{width:60px} .w420{width:420px}
.hide-sm{display:table-cell}
@media (max-width:760px){.hide-sm{display:none}}

.rules-header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.card + .card {
  margin-top: 20px; /* zelfde waarde als de gap boven */
}
.grid-2 + .card {
  margin-top: 20px; /* zelfde afstand als de gap in je grid */
}
/* ===== Rules toolbar buttons (zelfde look als dashboard) ===== */
.toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.toolbar .spacer { flex: 1; }

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform .05s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }

/* groen primary (zoals Add Wallet/Active look) */
.btn--primary {
  background: #22c55e;              /* green */
  color: #0b1a12;
  border-color: #16a34a;
  box-shadow: 0 0 0 1px #16a34a inset;
}
.btn--primary:hover { background: #16a34a; }

/* zachte secundaire (donkerblauw-grijs, zoals 'Pause' stijl) */
.btn--muted {
  background: #0f2230;
  color: #d5f6ff;
  border-color: #214458;
}
.btn--muted:hover { background: #133146; }

/* transparante ghost (zoals 'Back to Dashboard') */
/* transparante ghost zonder harde lijn */
.btn--ghost {
  background: transparent;
  color: #cde7ff;
  border: none;
  text-decoration: none; /* ⬅️ underline weg */
}
.btn--ghost:hover {
  background: #0f2230;
  text-decoration: none; /* ook bij hover */
}

/* ===== Form controls styling ===== */

/* Dropdowns (select) */
select {
  background: #0f2230;
  color: #d5f6ff;
  border: 1px solid #214458;
  border-radius: 9999px;
  padding: .4rem .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
select:hover {
  background: #133146;
  border-color: #2a5a72;
}
select:focus {
  outline: none;
  border-color: #22c55e; /* zelfde groen accent */
}

/* Number inputs */
input[type="number"] {
  background: #0f2230;
  color: #d5f6ff;
  border: 1px solid #214458;
  border-radius: 9999px;
  padding: .4rem .8rem;
  width: 100%;
  transition: background .2s ease, border-color .2s ease;
}
input[type="number"]:focus {
  outline: none;
  border-color: #22c55e;
}

/* Checkboxen */
input[type="checkbox"] {
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid #214458;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: all .2s ease;
  display: inline-block;
}
input[type="checkbox"]:checked {
  background: #22c55e;
  border-color: #22c55e;
}
/* force-hide utility */
.hidden { display: none !important; }
.login-wrapper {
  min-height: calc(100vh - 60px); /* schermhoogte minus navbar */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Hoogte van de topbar (pas aan indien nodig) */
:root { --topbar-h: 64px; }

/* Gebied onder de topbar op volle hoogte houden */
.under-topbar {
  min-height: calc(100vh - var(--topbar-h));
}

/* In dat gebied exact centreren */
.center-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px; /* beetje marge op mobiel */
}

/* Cardbreedte */
#login-page { width: 100%; max-width: 440px; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 3 zones: left | center | right */
  height: 64px; /* zelfde waarde als je --topbar-h */
  padding: 0 20px;
}

.nav-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center; /* centreren in het midden */
  gap: 24px;
}

.nav-right {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* login knop rechts */
}
/* --- Nav links in het midden en rechts (zelfde look als vroeger) --- */
.nav-center a,
.nav-right a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
}

.nav-center a:hover,
.nav-right a:hover {
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.nav-center a.active {
  background: rgba(34,197,94,.15);
  color: #d1fae5;
}
/* Zorg dat het logo altijd exact 28–32px hoog is */
.brand-logo {
  height: 32px !important;   /* pas eventueel aan naar 28px of 24px */
  width: auto !important;
  object-fit: contain;
  display: block;
}
/* --- Userbox opmaak --- */
.userbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* E-mail als subtiele pill */
.user-pill {
  max-width: 260px;               /* breder? pas aan */
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9999px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kleine knoppenvariant */
.btn.sm {
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 1;
}

/* Subtiele 'outline danger' voor Logout */
.btn-danger-outline {
  background: transparent;
  color: #fecaca;                 /* zacht rood */
  border: 1px solid rgba(239, 68, 68, .6); /* var(--red) met transparantie */
}
.btn-danger-outline:hover {
  background: rgba(239, 68, 68, .12);
  color: #ffe4e6;
  border-color: rgba(239, 68, 68, .85);
}
/* --- Userbox: e-mail + knoppen netjes naast elkaar --- */
.userbox {
  display: flex;
  align-items: center;
  gap: 10px;             /* ruimte tussen tekst en knop */
  white-space: nowrap;   /* geen wrap in smalle vensters */
}

/* E-mail als compacte pill, verticaal gecentreerd */
.user-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9999px;
  color: var(--text);
  font-size: 13px;
  line-height: 1;
}

/* Kleine knoppen op dezelfde hoogte als de pill */
.btn.sm {
  height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 1;
}

/* Zorg dat de danger-variant dominant rood blijft */
.btn.danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
.btn.danger:hover { filter: brightness(1.05); }
/* --- User box: perfecte horizontale uitlijning --- */
.userbox{
  display:flex;
  align-items:center;   /* verticaal exact centreren */
  gap:8px;              /* compacter naast de knop */
  white-space:nowrap;
}

.user-pill{
  display:inline-flex;
  align-items:center;
  height:32px;          /* exact gelijk aan knophoogte */
  padding:0 12px;       /* verticale padding weg -> echte 32px */
  border:1px solid var(--line);
  border-radius:9999px;
  background:var(--panel);
  color:var(--text);
  font-size:13px;
  line-height:1;        /* geen extra verticale ruimte */
}

.btn.sm{
  height:32px;          /* dezelfde 32px als de pill */
  padding:0 14px;       /* alleen horizontale padding */
  border-radius:9999px;
  font-size:13px;
  line-height:1;
}

/* Rood gevuld blijft dominant */
.btn.danger{
  background:var(--red) !important;
  border-color:var(--red) !important;
  color:#fff !important;
}
.btn.danger:hover{ filter:brightness(1.05); }
.userbox {
  display: flex;
  align-items: center;
  gap: 12px; /* ruimte tussen knoppen en email */
}

#user-email {
  font-size: 14px;
  color: var(--muted);
}
/* === Topbar userbox (final overrides) === */
.nav-right {                     /* iets meer lucht t.o.v. midden-navigatie */
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.userbox{
  display:flex;
  align-items:center;            /* verticaal gelijk met knop-tekst */
  gap:16px;                      /* meer ruimte tussen e-mail en knoppen */
  white-space:nowrap;
}

.user-pill{                      /* e-mail als nette "pill" op knophoogte */
  display:inline-flex;
  align-items:center;
  height:32px;                   /* zelfde hoogte als .btn.sm */
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:9999px;
  background:var(--panel);
  color:var(--text);
  font-size:13px;
  line-height:1;
}

.btn.sm{                         /* knophoogte matcht de e-mail pill */
  height:32px;
  padding:0 14px;
  border-radius:9999px;
  font-size:13px;
  line-height:1;
}

/* optioneel: e-mail iets subtieler */
#user-email { color: var(--muted); }