:root {
  --bg:        #eef1f4;
  --surface:   #ffffff;
  --ink:       #16212b;
  --ink-soft:  #5a6b78;
  --line:      #d9e0e6;
  --brand:     #0d4f5c;
  --brand-ink: #0a3a44;
  --accent:    #137a8c;

  --ok-bg:#e3f5ec; --ok-fg:#0f7a44; --ok-dot:#16a35a;
  --warn-bg:#fdf0db; --warn-fg:#9a6206; --warn-dot:#d8901a;
  --off-bg:#eceff1; --off-fg:#5a6b78; --off-dot:#90a0ab;
  --danger:#b3261e;

  --radius:10px;
  --shadow:0 1px 2px rgba(16,33,43,.06), 0 4px 16px rgba(16,33,43,.05);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}

/* ---------- Topbar ---------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  background:var(--brand);
  color:#eaf4f6;
  padding:.7rem 1.25rem;
}
.brand {
  display:flex; align-items:center; gap:.6rem;
  color:#fff; text-decoration:none;
  font-weight:650; letter-spacing:-.01em; font-size:1.02rem;
}
.brand-mark {
  width:14px; height:14px; border-radius:3px;
  background:linear-gradient(135deg,#37c0d6,#5fe0b0);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.topnav { display:flex; align-items:center; gap:1.1rem; font-size:.92rem; }
.topnav a { color:#cfe6ea; text-decoration:none; }
.topnav a:hover { color:#fff; }
.topnav .who { color:#9fc4cc; }
.topnav a.ghost {
  border:1px solid rgba(255,255,255,.3); border-radius:7px;
  padding:.28rem .7rem;
}

/* ---------- Layout ---------- */
.wrap { max-width:980px; margin:0 auto; padding:1.6rem 1.25rem 3rem; }
.foot { text-align:center; color:var(--ink-soft); font-size:.82rem; padding:1.5rem; }

h1 { font-size:1.45rem; letter-spacing:-.02em; margin:.2rem 0 .2rem; }
h2 { font-size:1.05rem; letter-spacing:-.01em; margin:1.6rem 0 .7rem; }
.lead { color:var(--ink-soft); margin:.1rem 0 1.4rem; }

/* ---------- Cards / tables ---------- */
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600; background:#f7f9fa; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#f9fbfc; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
.iccid { font-family:var(--mono); font-size:.86rem; }
.sublabel { color:var(--ink-soft); font-size:.82rem; }
a.row-link { color:var(--brand-ink); font-weight:600; text-decoration:none; }
a.row-link:hover { text-decoration:underline; }

/* ---------- Status badge ---------- */
.badge {
  display:inline-flex; align-items:center; gap:.42rem;
  padding:.2rem .6rem; border-radius:999px;
  font-size:.8rem; font-weight:600; white-space:nowrap;
}
.badge .dot { width:7px; height:7px; border-radius:50%; }
.badge.ok   { background:var(--ok-bg);   color:var(--ok-fg); }
.badge.ok   .dot { background:var(--ok-dot); }
.badge.warn { background:var(--warn-bg); color:var(--warn-fg); }
.badge.warn .dot { background:var(--warn-dot); }
.badge.off  { background:var(--off-bg);  color:var(--off-fg); }
.badge.off  .dot { background:var(--off-dot); }

/* ---------- Detail ---------- */
.back { display:inline-block; color:var(--ink-soft); text-decoration:none; font-size:.9rem; margin-bottom:.6rem; }
.back:hover { color:var(--ink); }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.cell { background:var(--surface); padding:.9rem 1rem; }
.cell .k { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.cell .v { font-size:1.05rem; margin-top:.15rem; font-variant-numeric:tabular-nums; }
.cell .v.mono { font-family:var(--mono); font-size:.95rem; }

/* ---------- Actions ---------- */
.actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.btn {
  font:inherit; font-weight:600; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:.6rem 1rem; border-radius:8px; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
}
.btn:hover { border-color:#b9c4cc; }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover { background:var(--brand-ink); }
.btn.warn { background:var(--warn-fg); border-color:var(--warn-fg); color:#fff; }
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- Forms ---------- */
.form { max-width:380px; margin:3rem auto; }
.form .card { padding:1.6rem; }
label { display:block; font-size:.85rem; font-weight:600; margin:.9rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], select {
  width:100%; padding:.6rem .7rem; font:inherit;
  border:1px solid var(--line); border-radius:8px; background:#fff;
}
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }

/* ---------- Flash ---------- */
.flash { padding:.7rem 1rem; border-radius:8px; margin-bottom:1.2rem; font-size:.92rem; }
.flash.ok { background:var(--ok-bg); color:var(--ok-fg); }
.flash.err { background:#fbe6e4; color:var(--danger); }

.empty { text-align:center; color:var(--ink-soft); padding:3rem 1rem; }
.note { font-size:.85rem; color:var(--ink-soft); background:#f7f9fa; border:1px solid var(--line); border-radius:8px; padding:.7rem .9rem; margin-top:1rem; }
.demo-banner { background:var(--warn-bg); color:var(--warn-fg); text-align:center; font-size:.85rem; font-weight:600; padding:.4rem; }

@media (max-width:560px) {
  .hide-sm { display:none; }
  th, td { padding:.65rem .7rem; }
}

/* ---------- Toolbar (zoeken) ---------- */
.toolbar { display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.search {
  flex:1; min-width:220px; position:relative;
}
.search input {
  width:100%; padding:.6rem .8rem .6rem 2.1rem;
  border:1px solid var(--line); border-radius:9px; font:inherit; background:#fff;
}
.search input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.search svg { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-soft); }
.count { color:var(--ink-soft); font-size:.85rem; white-space:nowrap; }

/* ---------- Sorteerbare tabel ---------- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover { color:var(--ink); }
th.sortable::after { content:"\2195"; opacity:.35; margin-left:.35rem; font-size:.85em; }
th.sort-asc::after  { content:"\2191"; opacity:.9; }
th.sort-desc::after { content:"\2193"; opacity:.9; }

/* ---------- Mobiel: tabel als kaartjes ---------- */
@media (max-width:640px) {
  .sim-table thead { display:none; }
  .sim-table, .sim-table tbody, .sim-table tr, .sim-table td { display:block; width:100%; }
  .sim-table tr {
    border:1px solid var(--line); border-radius:10px;
    margin-bottom:.7rem; background:var(--surface); overflow:hidden;
  }
  .sim-table td {
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    border:0; border-bottom:1px solid var(--line); padding:.6rem .9rem; text-align:right;
  }
  .sim-table td:last-child { border-bottom:0; }
  .sim-table td::before {
    content:attr(data-label); font-weight:600; color:var(--ink-soft);
    text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
  }
  .sim-table td.num, .sim-table td .iccid { font-family:var(--mono); }
}

/* ---------- Kolomkiezer (settingswieltje) ---------- */
.cols { position:relative; }
.cols-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--line); border-radius:9px;
  background:#fff; cursor:pointer; color:var(--ink-soft);
}
.cols-btn:hover { color:var(--ink); border-color:#b9c4cc; }
.cols-btn svg { width:18px; height:18px; }
.cols-panel {
  position:absolute; right:0; top:46px; z-index:20; width:240px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:.6rem; display:none;
}
.cols-panel.open { display:block; }
.cols-panel .ttl { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:.2rem .3rem .5rem; }
.cols-panel label { display:flex; align-items:center; gap:.5rem; font-weight:500; margin:0; padding:.32rem .3rem; border-radius:6px; cursor:pointer; }
.cols-panel label:hover { background:#f7f9fa; }
.cols-panel input { width:auto; }

/* ---------- Paginering ---------- */
.pager { display:flex; gap:.4rem; align-items:center; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
.pager button {
  font:inherit; min-width:36px; padding:.4rem .6rem; cursor:pointer;
  border:1px solid var(--line); background:#fff; border-radius:8px; color:var(--ink);
}
.pager button:hover:not(:disabled) { border-color:#b9c4cc; }
.pager button.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.pager button:disabled { opacity:.4; cursor:default; }
.pager .gap { color:var(--ink-soft); padding:0 .2rem; }

/* ---------- Aantal per pagina ---------- */
.pagesize {
  padding:.55rem .7rem; border:1px solid var(--line); border-radius:9px;
  background:#fff; font:inherit; color:var(--ink); cursor:pointer; height:38px;
}
.pagesize:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }