/* =========================================================
   Bevoegdheden — NP Portaal
   assets/style.css
   ========================================================= */

/* ---------- CSS reset / basis ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }

/* ---------- themakleuren ---------- */
:root{
  --bg-header:#0b1020;      /* donkerblauw header */
  --bg-body:#f6f8fc;        /* zachte achtergrond */
  --bg-card:#ffffff;
  --bg-muted:#eef2ff;

  --text-main:#0f1424;
  --text-muted:#5a667f;
  --text-weak:#8892a6;

  --border:#e6e8f0;
  --accent:#2563eb;         /* politieblauw */
  --accent-ink:#ffffff;

  --radius:12px;
  --shadow:0 2px 10px rgba(15,20,36,.08);
}

/* ---------- globale opmaak ---------- */
body{
  font-family: system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  color:var(--text-main);
  background:var(--bg-body);
  line-height:1.45;
}

/* voorkom horizontaal scrollen op mobiel */
html, body{ max-width:100%; overflow-x:hidden; }

/* ---------- header ---------- */
header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg,var(--bg-header),#121832);
  color: #fff;
  padding: 16px 14px 12px;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
header h1{
  margin: 0 0 10px;
  font-size: 1.15rem;
  letter-spacing: .2px;
}

.controls{ display:grid; gap:8px; }
.controls .row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* zoekveld */
.search{
  display:flex; gap:8px; align-items:center;
  background:#fff; border-radius: var(--radius);
  padding:10px 12px; box-shadow: var(--shadow);
}
.search input{
  border:0; outline:0; width:100%; font-size:16px; background:transparent;
}

/* selects */
.sel{
  appearance:none; border:0; background:#fff; color:var(--text-main);
  padding:10px 12px; border-radius: var(--radius); font-size:14px; box-shadow: var(--shadow);
}

/* teller */
#count{ color:#d7dcff; font-size:12px; }

/* ---------- main ---------- */
main{ padding:14px; }

/* ---------- kaarten (mobiel) ---------- */
.list{ display:grid; gap:10px; }
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10,10,20,.08);
}
.card h3{ margin:0 0 8px; font-size:16px; color:#1e2a55; }

.meta{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.chip{
  background:var(--bg-muted); color:#233176;
  padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600;
}
.rowp{ margin:6px 0; font-size:13px; }
.rowp small{ color:var(--text-muted); font-weight:600; }

/* links */
a.link{ color:var(--accent); text-decoration:none; }
a.link:hover{ text-decoration:underline; }

/* ---------- tabel (desktop) ---------- */
.table-wrap{ display:none !important; max-width:100%; overflow-x:hidden; } /* mobiel: verborgen */

@media (min-width:920px){
  .list{ display:none !important; }            /* desktop: kaarten uit */
  .table-wrap{
    display:block !important;
    background:#fff; border:1px solid var(--border);
    border-radius: var(--radius); overflow:auto; box-shadow: var(--shadow);
  }
  table{
    border-collapse:separate; border-spacing:0; width:100%; min-width:1100px;
    table-layout: fixed; /* voorkom uitrekken */
  }
  thead th{
    position: sticky; top: 0; z-index: 1;
    background:#fafbff; color:#24304f;
    border-bottom:1px solid var(--border); padding:10px; font-size:13px; text-align:left;
  }
  tbody td{
    border-bottom:1px solid #f0f2f8; padding:10px; vertical-align:top; font-size:14px;
    word-wrap: break-word; overflow-wrap: anywhere; white-space: normal;
  }
  tbody tr:hover{ background:#fcfdff; }
}

/* ---------- paginatie ---------- */
.pager{ display:flex; gap:8px; justify-content:center; margin:14px 0; }
.btn{
  border:1px solid var(--border); background:#fff; color:var(--text-main);
  border-radius:10px; padding:8px 12px; font-size:14px; cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover{ background:var(--accent); color:#fff; border-color: transparent; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- footer ---------- */
footer{
  padding:22px 14px 50px;
  color:var(--text-weak);
  font-size:12px; text-align:center;
}

/* ---------- helpers ---------- */
.hidden{ display:none !important; }

/* =========================================================
   Dark mode (volgt OS voorkeur)
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --bg-header:#121830;
    --bg-body:#0e121b;
    --bg-card:#161c27;
    --bg-muted:#1f2740;

    --text-main:#e8ecf4;
    --text-muted:#9aa3b3;
    --text-weak:#8290a8;

    --border:#2a3142;
    --accent:#3b82f6;
  }

  header{ background: linear-gradient(180deg,#182040,#0e1220); }

  .search, .sel, .card{ background:#1b2230; color:var(--text-main); border-color:#2a3145; }
  .card h3{ color:#9ec3ff; }
  .chip{ background:#223150; color:#cbd5e1; }

  .table-wrap{ background:#1b2230; border-color:#2a3145; }
  thead th{ background:#20283a; color:#cbd5e1; }
  tbody td{ border-color:#2a3145; }

  a.link{ color:#86b6ff; }
  a.link:hover{ color:#b9d4ff; }
}
/* onderaan ruimte zodat sentinel in beeld kan komen */
main::after{
  content:'';
  display:block;
  height: 24px;
}

.back-btn {
  display: inline-block;
  margin: 0 0 10px 0;
  padding: 8px 14px;
  background: #172c6b;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.2s ease;
}

.back-btn:hover {
  background: #172c6b;
}

@media (max-width: 600px) {
  .back-btn {
    width: 100%;
    text-align: center;
    margin-bottom: 14px;
  }
}