/* ============================================================
   Macellum — Rapporten-portal
   styles.css  (Claude Design redesign — dist/styles.css)

   Redesign: "technisch-archivarisch" — Macellum-merk behouden,
   mono-labels + index-nummering + haarlijnen, slate-structuur,
   een subtiele echo van het rapport-cover. Hanken Grotesk display
   + JetBrains Mono labels. Licht "paper" thema.

   Alle JS-hooks intact: #search #status #sort #logout #list #empty,
   #login #password #err, .card .thumb .thumb-fallback .body .sub
   .meta .badge(.ok) .time .actions .open .dl-pdf .dl-ppt .month .grid.
   Kaart-structuur licht gewijzigd (.sub boven h3) → zie cardHtml() in main.js.
   Editor-werkbalk staat in src/routes/edit.js (apart blok).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------- Tokens ---------------- */
:root{
  /* kern-merk (gehouden) */
  --terra:#C86D2A;  --terra-deep:#A8551E;  --terra-soft:#F4E3D5;
  --slate:#3B555D;  --slate-deep:#2C4047;  --slate-soft:#E6EDED;
  --sage:#9FBEBB;   --sage-soft:#E9F1F0;
  --ink:#1f2a2e;    --muted:#6b7a80;
  --hair:#e7ecec;   --hair-2:#d8dfdf;
  --cream:#f6f4f0;  --paper:#ffffff;
  --alert:#C0432B;

  /* schaal */
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(31,42,46,.05);
  --sh-2:0 6px 20px rgba(59,85,93,.08);
  --sh-3:0 16px 38px rgba(59,85,93,.13);

  --font:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 26px; height:64px;
  background:var(--slate); color:#fff;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
.brand{
  display:flex; align-items:center; gap:11px;
  font-size:17px; font-weight:700; letter-spacing:-.01em;
}
/* "Macellum · Rapporten" — de "· Rapporten" wordt een mono-tag.
   Werkt ook zonder markup-wijziging (de hele string blijft leesbaar). */
.brand{ white-space:nowrap; }

.controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* zoekveld met ingebouwde loep (geen extra markup nodig) */
#search{
  appearance:none;
  background:
    rgba(255,255,255,.08)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>")
    no-repeat 11px center;
  border:1px solid rgba(255,255,255,.14); color:#fff;
  border-radius:var(--r-sm);
  padding:9px 12px 9px 34px; font:inherit; font-size:13.5px; width:220px;
  transition:border-color .18s, background-color .18s, box-shadow .18s;
}
#search::placeholder{ color:rgba(255,255,255,.5); }
#search:focus{
  outline:none; border-color:var(--terra);
  background-color:rgba(255,255,255,.13);
  box-shadow:0 0 0 3px rgba(200,109,42,.28);
}

#status, #sort{
  appearance:none;
  background:
    rgba(255,255,255,.08)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 10px center;
  border:1px solid rgba(255,255,255,.14); color:#fff;
  border-radius:var(--r-sm);
  padding:9px 30px 9px 12px; font:inherit; font-size:13.5px; cursor:pointer;
  transition:border-color .18s, background-color .18s, box-shadow .18s;
}
#status:focus, #sort:focus{
  outline:none; border-color:var(--terra);
  box-shadow:0 0 0 3px rgba(200,109,42,.28);
}
#status option, #sort option{ color:var(--ink); }

.ghost, #logout{
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.32); border-radius:var(--r-sm);
  padding:9px 15px; font:inherit; font-size:13.5px; cursor:pointer;
  transition:background .18s, border-color .18s;
}
.ghost:hover, #logout:hover{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5);
}
#view-toggle.active{
  background:rgba(200,109,42,.22); border-color:var(--terra); color:#fff;
}

/* custom dropdown (vervangt de native <select> open-lijst, die niet te stylen is) */
.dd{ position:relative; }
.dd-btn{
  appearance:none; cursor:pointer; position:relative; min-width:140px; text-align:left;
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  padding:9px 32px 9px 12px; font:inherit; font-size:13.5px;
  transition:border-color .18s, background-color .18s, box-shadow .18s;
}
.dd-btn::after{
  content:""; position:absolute; right:13px; top:calc(50% - 4px);
  width:7px; height:7px;
  border-right:2px solid rgba(255,255,255,.7); border-bottom:2px solid rgba(255,255,255,.7);
  transform:rotate(45deg); transition:transform .18s;
}
.dd.open .dd-btn::after{ transform:rotate(-135deg); }
.dd-btn:focus-visible, .dd.open .dd-btn{
  outline:none; border-color:var(--terra);
  background-color:rgba(255,255,255,.13); box-shadow:0 0 0 3px rgba(200,109,42,.28);
}
.dd-list{
  position:absolute; top:calc(100% + 6px); left:0; min-width:100%;
  margin:0; padding:5px; list-style:none; z-index:40;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:var(--r-md); box-shadow:var(--sh-3);
}
.dd-opt{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; white-space:nowrap;
  padding:8px 12px 8px 22px; border-radius:var(--r-sm); cursor:pointer; outline:none; position:relative;
  transition:background .14s;
}
.dd-opt:hover, .dd-opt:focus{ background:var(--cream); }
.dd-opt[aria-selected="true"]{ color:var(--terra-deep); font-weight:600; }
.dd-opt[aria-selected="true"]::before{ content:"›"; position:absolute; left:10px; color:var(--terra); }

/* ============================================================
   LAYOUT
   ============================================================ */
main, #list{ padding:8px 26px 48px; max-width:1220px; margin:0 auto; }

/* index-genummerde maand-koppen (CSS-counter = geen markup nodig) */
#list{ counter-reset:month; }
.month{
  counter-increment:month;
  display:flex; align-items:center; gap:14px;
  margin:34px 0 18px;
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate);
}
.month::before{
  content:counter(month,decimal-leading-zero) " /";
  color:var(--terra-deep); letter-spacing:.04em;
}
.month::after{
  content:""; flex:1; height:1px; background:var(--hair-2);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:20px;
}

/* ============================================================
   KAART  — "Dossiertegel"
   ============================================================ */
.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  overflow:hidden; cursor:pointer; outline:none;
  transition:box-shadow .15s, border-color .15s;
}
.card:hover{
  box-shadow:var(--sh-2); border-color:var(--hair-2);
}
.card:focus-visible{
  box-shadow:0 0 0 3px rgba(200,109,42,.4); border-color:var(--terra);
}

.thumb{
  position:relative;
  aspect-ratio:4/3; background:var(--slate); overflow:hidden;
  border-bottom:1px solid var(--hair);
}

/* archiveer/terugzet-knop — altijd zichtbaar (hover-onthulling was te onvindbaar);
   subtiel in rust, terra bij hover/focus. */
.card-archive{
  position:absolute; top:9px; right:9px; z-index:3;
  width:30px; height:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--r-sm); cursor:pointer;
  background:rgba(31,42,46,.62); color:#fff;
  opacity:.82; transition:opacity .16s, background .16s, transform .12s;
}
.card:hover .card-archive, .card-archive:focus-visible{ opacity:1; }
.card-archive:hover{ background:var(--terra); opacity:1; }
.card-archive:active{ transform:scale(.92); }
.card-archive svg{ width:15px; height:15px; }

/* verwijder-knop — alleen in de archief-weergave, links van de terugzet-knop */
.card-delete{
  position:absolute; top:9px; right:44px; z-index:3;
  width:30px; height:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--r-sm); cursor:pointer;
  background:rgba(31,42,46,.62); color:#fff;
  opacity:.82; transition:opacity .16s, background .16s, transform .12s;
}
.card:hover .card-delete, .card-delete:focus-visible{ opacity:1; }
.card-delete:hover{ background:var(--alert); opacity:1; }
.card-delete:active{ transform:scale(.92); }
.card-delete svg{ width:15px; height:15px; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* initialen-tegel als de thumbnail mist — echoot het rapport-cover */
.thumb-fallback{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-size:30px; font-weight:600; letter-spacing:.02em;
  color:#fff; background:var(--slate);
}
.thumb-fallback::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--terra);
}
.thumb-fallback::after{
  content:"MACELLUM";
  position:absolute; top:11px; left:16px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.26em; font-weight:500;
  color:rgba(255,255,255,.55);
}

.body{ padding:15px 16px 16px; }

/* .sub fungeert als mono-eyebrow (staat in de nieuwe cardHtml bóven h3) */
.sub{
  margin:0 0 7px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.body h3{
  margin:0; font-size:16.5px; font-weight:600; letter-spacing:-.012em; line-height:1.2;
  color:var(--ink); text-wrap:balance;
}

.meta{
  display:flex; align-items:center; gap:8px;
  margin:13px 0 14px; padding-top:13px; border-top:1px solid var(--hair);
}
.time{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.03em;
  color:var(--muted); margin-left:auto;
}

/* status-badge — mono met statusdot */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px 4px 8px; border-radius:var(--r-pill);
  background:var(--cream); color:var(--muted); border:1px solid var(--hair-2);
}
.badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--muted); box-shadow:0 0 0 2px rgba(107,122,128,.16);
}
.badge.ok{
  background:var(--sage-soft); color:var(--slate-deep); border-color:#cfe0de;
}
.badge.ok::before{
  background:var(--terra); box-shadow:0 0 0 2px rgba(200,109,42,.18);
}

/* acties — primair Openen + rustige mono PDF/PPT */
.actions{ display:flex; align-items:center; gap:8px; }
.actions a, .actions button{ font:inherit; cursor:pointer; text-decoration:none; }

.actions .open{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--terra); color:#fff;
  font-size:13.5px; font-weight:600;
  padding:9px 12px; border:0; border-radius:var(--r-sm);
  transition:background .18s;
}
.actions .open::after{ content:"→"; }
.actions .open:hover{ background:var(--terra-deep); }

.actions .dl-pdf, .actions .dl-ppt{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em;
  color:var(--slate); background:transparent;
  border:1px solid var(--hair-2); border-radius:var(--r-sm);
  padding:8px 10px;
  transition:border-color .18s, color .18s, background .18s;
}
.actions .dl-pdf:hover, .actions .dl-ppt:hover{
  border-color:var(--slate); color:var(--slate-deep); background:var(--slate-soft);
}

/* ============================================================
   LEGE STAAT — warm
   ============================================================ */
.empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:1220px; margin:24px auto; padding:64px 24px;
  background:var(--cream); border:1px dashed var(--hair-2); border-radius:var(--r-lg);
  font-size:15px; color:var(--muted); line-height:1.55;
}
.empty::before{
  content:"";
  width:56px; height:56px; margin-bottom:18px;
  border-radius:var(--r-md); background:var(--paper) center/26px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%233B555D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3v4a1 1 0 0 0 1 1h4'/><path d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2Z'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='13' y2='17'/></svg>");
  border:1px solid var(--hair-2); box-shadow:var(--sh-1);
}
/* main.js zet [hidden] zodra er rapporten zijn — display:flex hierboven moet
   dat respecteren (anders lekt de lege staat altijd onder het raster). */
.empty[hidden]{ display:none; }

/* ============================================================
   LOGIN — split-screen (echoot het rapport-cover)
   ============================================================ */
.login-body{
  margin:0; min-height:100vh;
  display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--paper);
}
.login-aside{
  position:relative; overflow:hidden;
  background:var(--slate); color:#fff;
  padding:48px 48px 42px;
  display:flex; flex-direction:column;
}
.login-aside::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--terra);
}
.login-aside::after{
  content:""; position:absolute; right:-90px; top:-70px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,109,42,.26),transparent 68%);
}
.login-aside .la-wm{
  font-family:var(--mono); font-size:11px; letter-spacing:.34em; font-weight:500;
  color:rgba(255,255,255,.7);
}
.login-aside .la-disp{
  margin-top:auto; font-size:clamp(28px,3.4vw,40px); font-weight:600;
  letter-spacing:-.02em; line-height:1.02;
}
.login-aside .la-disp em{ font-style:normal; color:var(--sage); }
.login-aside .la-foot{
  margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.5); line-height:1.7;
}

/* het formulier (#login) */
.login-card{
  align-self:center; justify-self:center;
  width:min(360px,86vw);
  display:flex; flex-direction:column;
  padding:0 8px;
}
.login-card .brand{
  display:block; color:var(--terra-deep);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600;
}
.login-card h1{
  font-size:23px; font-weight:600; letter-spacing:-.02em; margin:12px 0 24px; color:var(--ink);
}
.login-card input{
  width:100%; padding:12px 14px; font:inherit; font-size:15px;
  border:1px solid var(--hair-2); border-radius:var(--r-sm);
  background:var(--cream);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.login-card input:focus{
  outline:none; border-color:var(--terra); background:var(--paper);
  box-shadow:0 0 0 3px rgba(200,109,42,.22);
}
.login-card button{
  margin-top:14px; padding:13px; font:inherit; font-size:15px; font-weight:600;
  border:0; border-radius:var(--r-sm); background:var(--slate); color:#fff; cursor:pointer;
  transition:background .18s, transform .12s;
}
.login-card button:hover{ background:var(--slate-deep); }
.login-card button:active{ transform:scale(.985); }

.err{
  display:flex; align-items:center; gap:7px; margin:13px 0 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--alert);
}
.err::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--alert); }
.err[hidden]{ display:none; }

/* ============================================================
   TOAST (archiveren / ongedaan maken)
   ============================================================ */
#toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,12px);
  display:flex; align-items:center; gap:14px; z-index:200;
  background:var(--slate-deep); color:#fff;
  padding:11px 14px 11px 16px; border-radius:var(--r-md); box-shadow:var(--sh-3);
  font-size:13.5px; opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
#toast.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
#toast .toast-action{
  font:inherit; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  color:#fff; background:transparent;
  border:1px solid rgba(255,255,255,.3); border-radius:var(--r-sm); padding:6px 10px;
  transition:background .16s, border-color .16s;
}
#toast .toast-action:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
#toast .toast-action.danger{ background:var(--alert); border-color:transparent; }
#toast .toast-action.danger:hover{ background:#A5371F; border-color:transparent; }

/* ============================================================
   POPCONFIRM — verwijder-bevestiging bij de knop
   ============================================================ */
.popconfirm{
  position:fixed; z-index:300; width:232px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:var(--r-md); box-shadow:var(--sh-3);
  padding:13px 14px; animation:pc-in .12s var(--ease);
}
@keyframes pc-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
/* caret naar de knop (boven); bij 'flip' onderaan */
.popconfirm::before{
  content:""; position:absolute; top:-6px; right:13px; width:11px; height:11px;
  background:var(--paper); border-left:1px solid var(--hair-2); border-top:1px solid var(--hair-2);
  transform:rotate(45deg);
}
.popconfirm.flip::before{ top:auto; bottom:-6px; border:0; border-right:1px solid var(--hair-2); border-bottom:1px solid var(--hair-2); }
.popconfirm p{ margin:0 0 12px; font-size:13px; line-height:1.45; }
.pc-actions{ display:flex; gap:8px; justify-content:flex-end; }
.pc-actions button{ font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:var(--r-sm); cursor:pointer; }
.pc-cancel{ background:transparent; color:var(--muted); border:1px solid var(--hair-2); }
.pc-cancel:hover{ background:var(--cream); color:var(--ink); }
.pc-ok{ background:var(--alert); color:#fff; border:0; }
.pc-ok:hover{ background:#A5371F; }
@media (prefers-reduced-motion:reduce){ .popconfirm{ animation:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .topbar{ flex-wrap:wrap; height:auto; padding:14px 18px; gap:12px; }
  .controls{ width:100%; }
  #search{ flex:1 1 140px; width:auto; }
  main, #list{ padding:8px 16px 40px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
  .login-body{ grid-template-columns:1fr; }
  .login-aside{ padding:32px 28px; min-height:240px; }
  .login-card{ padding:32px 28px; width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}