/* ================================
   Korporaal Media — styles.css (volledig)
   - Licht/donker met systeemvoorkeur
   - iOS zoom fix op inputs (>=16px)
   - Responsief tot kleine smartphones
   ================================ */

/* --------- Kleuren & thema --------- */
:root{
  --bg:#f6f7fb; --card:#ffffff; --ink:#0f1222; --muted:#5c6479; --accent:#1457cc;
  --hl:#eef3ff; --border:#dfe3ee; --soft:#f1f4fb; --shadow: 0 1px 0 rgba(0,0,0,.04);
  --soft-strong: color-mix(in hsl, var(--soft) 75%, var(--card) 25%);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --card:#12182b; --ink:#e8ecf5; --muted:#a8b0c0; --accent:#4ea3ff;
    --hl:#1f2a44; --border:#1d2540; --soft:#0f1630; --shadow: 0 1px 0 rgba(0,0,0,.25);
    --soft-strong: color-mix(in hsl, var(--soft) 70%, var(--card) 30%);
  }
}

/* --------- Basis --------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
html{ -webkit-text-size-adjust:100%; } /* voorkom onverwachte tekst-zoom op iOS */

body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--soft));
  color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-tap-highlight-color: transparent;
}

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

h1{ margin:6px 0 10px; font-size:22px; letter-spacing:.2px }
.wrap{ max-width:1100px; margin:0 auto; padding:18px 16px; }

.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.meta{ color:var(--muted); font-size:12px; margin-top:8px }
.right{ margin-left:auto; }
.snap{ opacity:.9; }

/* Verminderde animatie-respect */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* --------- Header --------- */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(130%) blur(6px);
  background:color-mix(in hsl, var(--soft) 88%, transparent);
  border-bottom:1px solid var(--border);
}

h1{ font-weight:700; }

/* Terugknop */
.back-btn{
  display:inline-block; margin:0 0 8px 0; padding:8px 12px;
  background:var(--soft); border:1px solid var(--border); border-radius:8px;
  color:var(--ink); text-decoration:none; font-size:14px;
  touch-action: manipulation;
}
.back-btn:hover{
  background:color-mix(in hsl, var(--soft) 80%, var(--accent) 20%);
  color:#fff; border-color:transparent;
}

.site-alert {
  background-color: #ffe5e5;   /* lichtrood */
  color: #800000;              /* donkerrood tekst */
  border: 1px solid #ff9999;   /* rood randje */
  padding: 10px 14px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  top: 0;
  z-index: 1000;
  margin-top: 20px;
}

.site-alert strong {
  font-weight: 700;
}

.site-alert a {
  color: inherit;        /* neemt de tekstkleur van .site-alert over */
  text-decoration: none; /* optioneel, voor herkenbaarheid */
}

.site-alert a:hover {
  text-decoration: none; /* optioneel, bij hover geen underline */
}

/* --------- Controls / Zoeken --------- */
.controls{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.search-reset{
  display:flex; gap:8px; flex:1 1 520px; min-width:260px; max-width:720px;
}
.search-wrap{ position:relative; flex:1 1 auto; }

/* iOS zoom fix: alle form-controls >=16px */
input, select, textarea, button{
  font-size:16px; line-height:1.3;
  touch-action: manipulation;
}
.controls input[type="search"]{
  width:100%; padding:12px 12px; border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--ink); outline:none; box-shadow: var(--shadow);
  appearance:none; -webkit-appearance:none;
}

.pill{
  display:flex; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--border);
  background:var(--card); border-radius:999px; color:var(--muted); white-space:nowrap;
}
.pill input{ margin-right:6px }
.pill-click{ cursor:pointer; user-select:none }

.btn{
  padding:10px 14px; border:1px solid var(--border); background:var(--soft); color:var(--ink);
  border-radius:10px; cursor:pointer; touch-action: manipulation;
}
.btn:hover{
  background:color-mix(in hsl, var(--soft) 80%, var(--accent) 20%); color:#fff; border-color:transparent;
}
.empty{ padding:26px; color:var(--muted); text-align:center }

.pdf-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
}

.pdf-btn:hover {
  background: color-mix(in hsl, var(--accent) 85%, black);
}

/* --------- Accordeon (menu-modus) --------- */
.accordion{ margin:16px 0 40px }
details.acc{
  border:1px solid var(--border); border-radius:8px; background:var(--card);
  margin:10px 0; overflow:hidden;
}
details.acc > summary{
  list-style:none; cursor:pointer; padding:10px 12px; display:flex; align-items:center; gap:10px;
  user-select:none; background:var(--card); border-left:4px solid transparent;
}
details.acc > summary::-webkit-details-marker{ display:none }
details.acc > summary::before{
  content:'▸'; margin-right:6px; transition:transform .15s ease; color:var(--muted); font-size:16px;
}
details.acc:hover > summary{ background:var(--soft-strong); }
details.acc[open] > summary{
  background:var(--soft-strong); border-left-color: color-mix(in hsl, var(--accent) 60%, transparent);
}
details.acc[open] > summary::before{ transform:rotate(90deg) }
.acc-title{ font-weight:600 }
.acc-count{
  margin-left:auto; font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--border); color:var(--muted); background:var(--soft)
}

/* Hoofdcategorie visueel nadrukkelijker */
details.acc.acc-l1 > summary{
  background: var(--soft-strong);
  border-left-color: color-mix(in hsl, var(--accent) 60%, transparent);
}
details.acc.acc-l1[open] > summary{
  background: color-mix(in hsl, var(--soft-strong) 80%, var(--accent) 8%);
}

/* --------- Lijsten / Items --------- */
.items{
  padding:2px 8px 8px; border-top:1px solid var(--border);
  background:color-mix(in hsl, var(--card) 97%, var(--soft) 3%);
}
.item-head, .item-row{
  display:grid; grid-template-columns: 1.4fr .3fr .6fr 36px; gap:8px; align-items:center;
}
.item-head{ font-weight:600; color:var(--muted); padding:6px 2px }
.item-row{ padding:6px 2px; border-top:1px solid var(--border) }
.item-row:hover{ background:var(--hl) }
.bedrag{ font-variant-numeric:tabular-nums }
.feit{ color:color-mix(in hsl, var(--ink) 80%, var(--muted) 20%) }

/* Expand-knop */
.expand button{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--soft);
  color:var(--ink); cursor:pointer; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.expand button:hover{
  background:color-mix(in hsl, var(--soft) 80%, var(--accent) 20%); color:#fff; border-color:transparent;
}

/* Detailvak */
.details{
  display:none; grid-column:1 / -1;
  background:color-mix(in hsl, var(--soft) 80%, var(--card) 20%);
  border:1px solid var(--border); border-radius:6px;
  margin:6px 0 0 0; padding:8px 10px; color:inherit;
}
.details a{ color:var(--accent); text-decoration:none; word-break:break-all }
.details .detail-path{ font-weight:600; margin-bottom:4px }
.details .detail-money{ margin-top:4px }
.details .detail-tags{ margin-top:6px }
.details .detail-link{ margin-top:8px }
.details .detail-snap{ margin-top:6px }
.tag{
  display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--border); margin:0 6px 6px 0;
}

/* --------- Resultaatmodus (platte lijst) --------- */
.results{
  margin:16px 0 40px; background:var(--card); border:1px solid var(--border); border-radius:10px;
  overflow:hidden;
}
.r-head, .r-row{
  display:grid; grid-template-columns: 1.1fr 1fr .25fr .6fr 36px; gap:8px; align-items:center;
}
.r-head{
  background:var(--soft); color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border);
}
#r-body .r-row{ padding:8px 12px; border-bottom:1px solid var(--border) }
#r-body .r-row:hover{ background:var(--hl) }
#r-body .r-row .expand button{ width:36px; height:36px; font-size:16px }
#r-body .r-row .details{ margin-top:8px }

/* --------- Responsiveness --------- */

/* Tablet/smaller: verberg 'Categorie' kolom in resultaten */
@media (max-width: 900px){
  .r-head, .r-row{ grid-template-columns: 1fr .4fr .4fr 36px; }
  .r-head > div:nth-child(2), .r-row > .cat{ display:none; }
}

/* Smartphone layout: geen sticky header, controls stapelen, kaart-achtige rijen */
@media (max-width: 640px){
  header{
    position: static;
    backdrop-filter: none;
    background: var(--soft);
    border-bottom: 1px solid var(--border);
  }
  .wrap{ padding:12px 12px; }
  h1{ font-size:18px; margin:4px 0 8px; }

  .back-btn{ padding:6px 10px; font-size:13px; border-radius:6px; }

  .controls{
    gap:8px; margin-bottom:10px;
    flex-direction: column; align-items: stretch;
  }
  .search-reset{
    gap:8px; margin:0; flex:1 1 auto; min-width:0; max-width:100%;
    flex-direction: column;   /* zoekveld en knop onder elkaar */
    align-items: stretch;     /* beide volle breedte */
  }
  .search-reset input,
  .search-reset .btn {
    width: 100%;
  }
  .controls .pill, .controls .btn{ width:100%; }

  /* Blokken sluiten direct aan */
  .accordion, .results{ margin-top:8px; }

  details.acc{ border-radius:6px; }
  details.acc > summary{ padding:10px; }
  .acc-count{ padding:3px 8px; }

  .items{ padding:2px 6px 6px; }
  .item-head{ display:none; } /* tabelkop niet tonen op mobiel */
  .item-row{
    padding:8px 2px;
    display:grid; grid-template-columns: 1fr auto; gap:6px;
  }
  .item-row .feit{ grid-column:1; }
  .item-row .bedrag{ grid-column:2; justify-self:end; }
  .item-row .expand{ grid-column:2; justify-self:end; }
  .expand button{ width:32px; height:32px; }

  .results{ margin:12px 0 24px; border-radius:8px; }
  .r-head{ display:none; }
  #r-body .r-row{
    padding:10px 10px;
    display:grid; grid-template-columns: 1fr auto; gap:6px;
  }
  .r-row .feit{ grid-column:1; }
  .r-row .bedrag{ grid-column:2; justify-self:end; }
  .r-row .expand{ grid-column:2; justify-self:end; }
  .r-row .cat{ display:none; }
}

/* Iets ruimer breekpunt voor rustige omslag naar 1+auto */
@media (max-width: 720px){
  .item-head, .item-row{ grid-template-columns: 1fr auto; }
  .item-row .bedrag{ grid-column:2; justify-self:end; }
  .item-row .feit{ grid-column:1; }
  .item-row .expand{ grid-column:2; justify-self:end; }

  .r-head, .r-row{ grid-template-columns: 1fr auto; }
  .r-row .bedrag{ grid-column:2; justify-self:end; }
  .r-row .feit{ grid-column:1; }
  .r-row .expand{ grid-column:2; justify-self:end; }
}