/* =====================================================================
   Infra Connect — Premium "dark glass" theme layer
   Loaded AFTER the app bundle CSS. Purely cosmetic: overrides design
   tokens + polishes existing semantic classes. No layout/DOM changes,
   so no app functionality is affected.
   Restore note: this file + the <link> in index.html disappear on a
   frontend redeploy — re-add them from backups/ if that happens.
   ===================================================================== */

/* ---------- 1. Refined token palette ---------- */
[data-theme=dark]{
  --bg-color:#0c0808;
  --surface-color-1:#ffffff0a;
  --surface-color-2:#ffffff14;
  --border-color:#ffffff1c;
  --text-primary:#fbf3f3;
  --text-secondary:#bda2a2;
  --accent-color:#ef4444;
  --accent-2:#f97316;
  --accent-glow:#ef44445c;
  --accent-gradient:linear-gradient(135deg,#f87171 0%,#ef4444 42%,#dc2626 100%);
  /* AA-veilige knop-gradients: wit label haalt >=4.5 contrast op elke stop */
  --btn-gradient:linear-gradient(135deg,#b91c1c 0%,#991b1b 50%,#7f1d1d 100%);
  --btn-success-gradient:linear-gradient(135deg,#15803d 0%,#047857 100%);
  --success-color:#22c55e;
  --success-glow:#22c55e59;
  --danger-color:#fb7185;
  --danger-glow:#f43f5e59;
  --warning-color:#fbbf24;
  --card-bg:#1a0f0fcc;
  --bg-glass:#ffffff0d;
  --border-glass:#ffffff24;
  --navbar-bg:#0c0808cc;
  --input-bg:#ffffff08;
  --input-focus-bg:#ffffff12;
  --surface-elevated:#ffffff12;
  --surface-muted:#ffffff08;
  --hero-bg:linear-gradient(150deg,#ffffff12 0%,#1a0f0fcc 60%,#0c0808e6 100%);
  --hero-shadow:inset 0 1px 0 #ffffff1f, inset 0 0 60px #00000080;
  --table-hover-bg:#ffffff0a;
  --table-row-border:#ffffff12;
  --body-gradient-1:#ef444426;
  --body-gradient-2:#f9731616;
  --ring:0 0 0 3px var(--accent-glow);
  --shadow-card:0 18px 40px -20px #000000c0, 0 2px 8px #0006;
  --ic-sidebar-w:268px;
  --ic-rail-w:76px;
}

/* Keep light theme tasteful & consistent (secondary, but not broken) */
[data-theme=light]{
  --bg-color:#fbf2f2;
  --accent-color:#dc2626;
  --accent-2:#ea580c;
  --accent-glow:#dc26264d;
  --accent-gradient:linear-gradient(135deg,#ef4444 0%,#dc2626 50%,#b91c1c 100%);
  --btn-gradient:linear-gradient(135deg,#b91c1c 0%,#991b1b 50%,#7f1d1d 100%);
  --btn-success-gradient:linear-gradient(135deg,#15803d 0%,#047857 100%);
  --body-gradient-1:#dc262614;
  --body-gradient-2:#ea580c0f;
  --shadow-card:0 14px 34px -18px #4a101040, 0 1px 4px #4a101014;
  --ring:0 0 0 3px var(--accent-glow);
}

/* ---------- 2. Ambient animated backdrop ---------- */
body{position:relative;}
body::before{
  content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,  var(--body-gradient-1), transparent 60%),
    radial-gradient(34vmax 34vmax at 88% 12%, var(--body-gradient-2), transparent 60%),
    radial-gradient(40vmax 40vmax at 80% 88%, #f9731614, transparent 60%);
  filter:blur(8px);
  animation:icAmbient 26s ease-in-out infinite alternate;
}
@keyframes icAmbient{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(2%,-2%,0) scale(1.06);}
  100%{transform:translate3d(-2%,2%,0) scale(1.02);}
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none;}
}

/* ---------- 3. Navbar ---------- */
.navbar{
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  backdrop-filter:blur(26px) saturate(160%);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--border-glass) 20%,var(--accent-color) 50%,var(--border-glass) 80%,transparent) 1;
  box-shadow:0 10px 30px -22px #000;
}

/* Brand wordmark → gradient text + logo mark */
.nav-brand{letter-spacing:.2px;}
.nav-brand::before{
  content:"";width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  background:url("/infra-logo.svg") center/contain no-repeat;
  box-shadow:0 6px 16px -6px var(--accent-glow);
  transition:transform .35s ease;
}
.nav-brand:hover::before{transform:rotate(-6deg) scale(1.06);}
.nav-brand span{
  background:var(--accent-gradient);
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;
  font-weight:800;
}

/* ---------- 4. Glass cards ---------- */
.glass-card{
  position:relative;
  background:
    linear-gradient(180deg,#ffffff0f,transparent 42%),
    var(--card-bg);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--border-glass);
  border-radius:18px;
  box-shadow:var(--shadow-card);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s, background .35s;
}
.glass-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,#ffffff40,transparent 40%,transparent 60%,var(--accent-color) 140%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;pointer-events:none;transition:opacity .35s;
}
.glass-card:hover{
  transform:translateY(-3px);
  box-shadow:0 28px 60px -26px #000000d0, 0 0 0 1px var(--border-glass), 0 0 40px -14px var(--accent-glow);
  border-color:#ffffff33;
}
.glass-card:hover::before{opacity:.9;}

/* ---------- 5. Hero panels ---------- */
[class*="-hero"], .hero-checkin{
  position:relative;overflow:hidden;
  border-radius:24px!important;
  box-shadow:var(--hero-shadow), 0 30px 60px -34px #000;
}
[class*="-hero"]::after, .hero-checkin::after{
  content:"";position:absolute;top:-40%;right:-10%;width:50%;height:160%;
  background:radial-gradient(closest-side,var(--accent-glow),transparent);
  filter:blur(10px);opacity:.7;pointer-events:none;
}

/* ---------- 6. Buttons ---------- */
.btn{
  border-radius:10px;letter-spacing:.2px;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s, filter .25s, background .25s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-primary{
  background-image:var(--btn-gradient);background-size:160% 160%;
  background-color:#2563eb;color:#fff;
  box-shadow:0 8px 22px -8px var(--accent-glow), inset 0 1px 0 #ffffff40;
}
.btn-primary:hover{
  background-position:100% 0;
  box-shadow:0 14px 30px -8px var(--accent-glow), inset 0 1px 0 #ffffff55;
  filter:brightness(1.05);
}
.btn-success{
  background-image:var(--btn-success-gradient);
  background-color:#15803d;color:#fff;
  box-shadow:0 8px 22px -8px var(--success-glow), inset 0 1px 0 #ffffff40;
}
.btn-success:hover{box-shadow:0 14px 30px -8px var(--success-glow);filter:brightness(1.05);}

/* ---------- 7. Inputs ---------- */
.input-field,.nav-search-input,.inventory-search-input,
input[type=text],input[type=email],input[type=password],
input[type=search],input[type=number],input[type=date],
input[type=time],select,textarea{
  border-radius:10px;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.input-field:focus,.nav-search-input:focus,.inventory-search-input:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--accent-color)!important;
  background:var(--input-focus-bg)!important;
  box-shadow:var(--ring);
}

/* ---------- 8. Tables ---------- */
.data-table th,.checkins-table th{
  text-transform:uppercase;letter-spacing:.6px;font-size:.72rem;
  color:var(--text-secondary);font-weight:700;
}
.data-table tbody tr{transition:background .2s;}
.data-table tbody tr:hover{background:var(--table-hover-bg);}

/* ---------- 9. Theme toggle / pills ---------- */
.theme-toggle-btn{border-radius:50px;transition:all .25s;}
.theme-toggle-btn:hover{
  color:var(--text-primary);border-color:var(--accent-color);
  box-shadow:var(--ring);transform:translateY(-1px);
}
.user-greeting{font-weight:600;}

/* ---------- 10. Scrollbar + selection ---------- */
*{scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;}
*::-webkit-scrollbar{width:11px;height:11px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ffffff30,#ffffff14);
  border-radius:20px;border:3px solid transparent;background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--accent-color),#ffffff14);background-clip:content-box;}
::selection{background:var(--accent-glow);color:#fff;}

/* ---------- 11. Headings polish ---------- */
h1,h2,h3{letter-spacing:-.01em;}

/* ---------- 11b. Unstyled buttons (bijv. Reset) → outline stijl ---------- */
button:not([class]):not([type=submit]){
  border-radius:10px;padding:.5rem 1.1rem;cursor:pointer;font-weight:600;
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--border-color);
  transition:all .2s;
}
button:not([class]):not([type=submit]):hover{
  color:var(--text-primary);border-color:var(--accent-color);
  background:var(--surface-color-1);
}

/* ---------- 11c. Taken-lijst opschonen ---------- */
.glass-card[style*="border-left"]{
  border-radius:14px!important;
  padding:1.1rem 1.3rem!important;
  transition:transform .18s, box-shadow .18s;
  margin-bottom:4px!important;
  border-left-width:5px!important;
}
.glass-card[style*="border-left"]:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px -12px #000a;
}
/* Taak-titel prominenter */
.glass-card[style*="border-left"] div[style*="font-weight: 600"]{
  font-size:1.18rem!important;
  letter-spacing:-.01em;
  margin-bottom:6px!important;
}
/* Taak-code naast titel */
.glass-card[style*="border-left"] div[style*="font-weight: 600"] span{
  font-size:.78rem!important;
  opacity:.7;
  font-weight:500!important;
  margin-left:6px;
}
/* Team-tekst: 1 regel, kleiner, icon-prefix */
.glass-card[style*="border-left"] div[style*="flex: 1"] > div[style*="font-size: 0.9rem"]{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  font-size:.82rem!important;
  opacity:.65;
  margin-bottom:4px!important;
}
/* Datum-info (gepland op) kleiner en compacter */
.glass-card[style*="border-left"] div[style*="flex: 1"] > div[style*="rgb(147, 197, 253)"]{
  font-size:.8rem!important;
  opacity:.8;
  margin-bottom:4px!important;
}
/* LMRA badges: compacter */
.glass-card[style*="border-left"] div[style*="flex: 1"] > div[style*="align-items: center"]{
  margin-top:4px!important;
  gap:8px!important;
}
.glass-card[style*="border-left"] div[style*="flex: 1"] > div[style*="align-items: center"] span[style*="inline-flex"]{
  font-size:.72rem!important;
  padding:3px 10px!important;
  border-radius:20px!important;
}
/* Rechterkolom: tijd + foto's */
.glass-card[style*="border-left"] > div > div[style*="text-align: right"]{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  gap:4px;min-width:fit-content;
}
/* Checkbox kleiner en subtieler */
.glass-card[style*="border-left"] > div > button[style*="38px"]{
  width:32px!important;height:32px!important;
  opacity:.5;
  transition:opacity .2s;
}
.glass-card[style*="border-left"]:hover > div > button[style*="38px"]{opacity:.9;}
/* Datum boven de titel: kleiner */
.glass-card[style*="border-left"] div[style*="flex: 1"] > div[style*="color: var(--text-secondary)"][style*="font-size"]:first-child{
  font-size:.75rem!important;
  margin-bottom:2px!important;
  opacity:.6;
}

/* ---------- 11e. Taken: per-dag bemanning (gevuld door kablo-taken.js) ---------- */
.ic-taskdays{display:flex;flex-direction:column;gap:5px;margin:8px 0 6px;}
.ic-taskday{
  display:flex;align-items:center;gap:10px;font-size:.84rem;
  background:var(--surface-color-1);border:1px solid var(--border-color);
  border-radius:9px;padding:5px 11px;
}
.ic-taskday-date{font-weight:700;color:var(--accent-color);white-space:nowrap;flex:0 0 auto;min-width:104px;}
.ic-taskday-people{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;}
.ic-taskday-count{
  flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--text-primary);
  background:var(--surface-color-2);border:1px solid var(--border-color);border-radius:20px;
  padding:1px 9px;min-width:24px;text-align:center;
}
.ic-taskday-empty{font-size:.82rem;color:var(--text-secondary);font-style:italic;margin:6px 0;}

/* ---------- 11g. Taakdetail "Werkfoto's per fase": foto-rijen swipebaar binnen de kaart ----
   De fase-kaarten zijn grid-items met min-width:auto, waardoor ze meegroeiden met de
   foto-rij i.p.v. de overflow-x:auto-rij te laten scrollen. min-width:0 dwingt ze terug
   binnen de grid-track, zodat de foto's horizontaal scrollbaar/swipebaar binnen de balk blijven. */
div[style*="display: grid"][style*="gap: 0.85rem"] > div{min-width:0!important;}
div[style*="overflow-x: auto"]{max-width:100%!important;}
div[style*="overflow-x: auto"]{scrollbar-width:thin;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}

/* ---------- 11i. Klachten Inbox: zoekbalk + resultaten (kablo-klachten.js) ---------- */
.ic-cz-bar{margin:0 0 1.2rem;}
.ic-cz-input{
  width:100%;box-sizing:border-box;padding:.85rem 1.1rem;border-radius:14px;
  background:var(--input-bg);border:1px solid var(--border-color);color:var(--text-primary);
  font-size:1rem;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;
}
.ic-cz-input::placeholder{color:var(--text-secondary);}
.ic-cz-input:focus{border-color:var(--accent-color);box-shadow:var(--ring);}
.ic-cz-info{margin-top:.5rem;font-size:.82rem;color:var(--text-secondary);font-weight:600;}
.ic-cz-results{display:flex;flex-direction:column;gap:.7rem;}
.ic-cz-card{
  background:var(--card-bg);border:1px solid var(--border-glass);border-radius:14px;
  padding:.85rem 1.1rem;transition:transform .15s,box-shadow .15s,border-color .2s;
}
.ic-cz-card:hover{transform:translateY(-1px);border-color:var(--accent-color);box-shadow:0 12px 30px -16px #000a;}
.ic-cz-subject{font-weight:700;font-size:1rem;color:var(--text-primary);margin-bottom:3px;}
.ic-cz-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;margin-bottom:5px;}
.ic-cz-from{color:#34d399;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%;}
.ic-cz-date{color:var(--text-secondary);white-space:nowrap;}
.ic-cz-snippet{font-size:.86rem;color:var(--text-secondary);line-height:1.5;}
.ic-cz-hl{background:var(--accent-glow);color:#fff;border-radius:3px;padding:0 2px;}
.ic-cz-empty{font-size:.9rem;color:var(--text-secondary);font-style:italic;padding:1rem 0;}

/* ---------- 11h. Klachten Inbox: "Alles verwijderen"-knop (kablo-klachten.js) ---------- */
.ic-del-all{
  margin-right:12px;padding:.7rem 1.3rem;border-radius:12px;cursor:pointer;
  font-weight:700;font-size:.95rem;font-family:inherit;
  background:transparent;color:var(--danger-color);
  border:1px solid var(--danger-color);
  transition:background .2s,color .2s,box-shadow .2s;
}
.ic-del-all:hover{background:var(--danger-color);color:#fff;box-shadow:0 8px 20px -10px var(--danger-glow);}
.ic-del-all:disabled{opacity:.6;cursor:wait;}

/* ---------- 11d. Alle Foto's: stat-balken weg ---------- */
.photo-stats-grid{display:none!important;}

/* ---------- 11f. Bestand-inputs binnen hun kaart houden + themen ---------- */
input[type=file]{
  display:block;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  min-width:0;
  font-size:.8rem;
  color:var(--text-secondary);
  background:var(--input-bg);
  border:1px solid var(--border-color);
  border-radius:10px;
  padding:6px;
  cursor:pointer;
  overflow:hidden;
}
input[type=file]::file-selector-button{
  margin-right:10px;padding:6px 12px;border:0;border-radius:8px;
  background:var(--btn-gradient);color:#fff;font-weight:600;font-size:.78rem;cursor:pointer;
  transition:filter .2s;
}
input[type=file]::file-selector-button:hover{filter:brightness(1.12);}
input[type=file]::-webkit-file-upload-button{
  margin-right:10px;padding:6px 12px;border:0;border-radius:8px;
  background:var(--btn-gradient);color:#fff;font-weight:600;font-size:.78rem;cursor:pointer;
}
/* Overlay bovenaan de foto: selectie-bolletje links, Taakfoto/Schadefoto-badge rechts.
   De container spant nu de volle breedte (left+right) en plaatst beide met space-between. */
.glass-card div[style*="top: 12px"][style*="left: 12px"]{
  left:12px!important;right:12px!important;
  flex-direction:row!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
}
/* Filterbalk: kolommen flexibel zodat Toepassen + Reset binnen de balk blijven
   (vaste 190px-kolom was te smal -> Reset viel buiten de kaart) */
@media (min-width:900px){
  .photo-filter-form{
    grid-template-columns:minmax(190px,1.6fr) repeat(4,minmax(115px,1fr)) auto!important;
  }
}
.photo-filter-actions{flex-shrink:0;}

/* =====================================================================
   12. SIDEBAR — functies-navigatie (gevuld door kablo-sidebar.js)
   ===================================================================== */
.ic-sidebar{
  position:fixed;top:0;left:0;height:100vh;width:var(--ic-sidebar-w,268px);
  z-index:1200;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff10,transparent 22%), var(--navbar-bg);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  border-right:1px solid var(--border-glass);
  box-shadow:18px 0 50px -30px #000;
  transition:width .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1);
  overflow:hidden;
}
.ic-sb-head{
  display:flex;align-items:center;gap:10px;padding:18px 18px 14px;
  border-bottom:1px solid var(--border-color);min-height:64px;
}
.ic-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1;min-width:0;}
.ic-brand img{width:30px;height:30px;flex:0 0 30px;border-radius:9px;box-shadow:0 6px 16px -6px var(--accent-glow);}
.ic-brand span{
  font-size:1.18rem;font-weight:800;letter-spacing:.2px;white-space:nowrap;
  background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ic-collapse{
  display:none;width:30px;height:30px;flex:0 0 30px;border-radius:8px;cursor:pointer;
  background:var(--surface-color-1);border:1px solid var(--border-color);color:var(--text-secondary);
  align-items:center;justify-content:center;transition:all .2s;
}
.ic-collapse:hover{color:var(--text-primary);border-color:var(--accent-color);}
.ic-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 20px;}
.ic-group{margin-top:14px;}
.ic-group:first-child{margin-top:4px;}
.ic-group-title{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--text-secondary);opacity:.7;padding:6px 12px;white-space:nowrap;
}
.ic-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0;border-radius:11px;
  color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:.92rem;
  white-space:nowrap;position:relative;transition:background .18s,color .18s,box-shadow .18s;
}
.ic-item:hover{background:var(--surface-color-1);color:var(--text-primary);}
.ic-item.is-active{
  color:#fff;background:var(--btn-gradient);
  box-shadow:0 8px 20px -8px var(--accent-glow), inset 0 1px 0 #ffffff33;
}
.ic-item.is-active .ic-ic{color:#fff;}
.ic-ic{flex:0 0 22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--accent-color);}
.ic-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.ic-label{overflow:hidden;text-overflow:ellipsis;}
.ic-sb-foot{padding:12px 16px;border-top:1px solid var(--border-color);font-size:.74rem;color:var(--text-secondary);white-space:nowrap;}

/* Floating controls */
.ic-burger{
  position:fixed;top:14px;left:14px;z-index:1300;width:42px;height:42px;border-radius:12px;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  background:var(--navbar-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--border-glass);color:var(--text-primary);box-shadow:0 8px 22px -10px #000;
}
.ic-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.ic-backdrop{
  position:fixed;inset:0;z-index:1150;background:#04020a99;opacity:0;pointer-events:none;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .28s;
}

/* Injected home welcome (vervangt de tegels) */
.ic-home-hero{
  position:relative;overflow:hidden;border-radius:24px;padding:2.6rem 2.4rem;margin-bottom:1.5rem;
  background:var(--hero-bg);border:1px solid var(--border-glass);box-shadow:var(--hero-shadow),0 30px 60px -34px #000;
}
.ic-home-hero::after{content:"";position:absolute;top:-50%;right:-8%;width:46%;height:180%;
  background:radial-gradient(closest-side,var(--accent-glow),transparent);filter:blur(12px);opacity:.7;pointer-events:none;}
.ic-home-hero .eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ic-home-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:.4rem 0 .5rem;letter-spacing:-.02em;}
.ic-home-hero p{color:var(--text-secondary);max-width:60ch;margin:0;font-size:1.05rem;}

/* ---------- Desktop layout: ruimte voor de sidebar ---------- */
@media (min-width:1024px){
  /* alleen ruimte voor de sidebar als die er is (ingelogd) — anders staat o.a. het
     login-scherm uit het midden */
  html.ic-ready #root{padding-left:var(--ic-sidebar-w,268px);transition:padding-left .28s cubic-bezier(.2,.7,.2,1);}
  .navbar .nav-brand{display:none;}            /* brand zit nu in de sidebar */
  .ic-collapse{display:flex;}
  html.ic-rail #root{padding-left:var(--ic-rail-w,76px);}
  html.ic-rail .ic-sidebar{width:var(--ic-rail-w,76px);}
  html.ic-rail .ic-brand span,
  html.ic-rail .ic-label,
  html.ic-rail .ic-group-title,
  html.ic-rail .ic-sb-foot{opacity:0;visibility:hidden;}
  html.ic-rail .ic-item{justify-content:center;padding:10px 0;}
  html.ic-rail .ic-sb-head{justify-content:center;padding:18px 0 14px;}
  html.ic-rail .ic-collapse{position:absolute;top:20px;right:10px;}
}

/* ---------- Mobiel: off-canvas drawer ---------- */
@media (max-width:1023px){
  .ic-sidebar{transform:translateX(-100%);box-shadow:none;}
  .ic-burger{display:flex;}
  .navbar{padding-left:68px;}
  .navbar .nav-brand{display:none;}
  html.ic-open .ic-sidebar{transform:translateX(0);box-shadow:24px 0 60px -20px #000;}
  html.ic-open .ic-backdrop{opacity:1;pointer-events:auto;}
  html.ic-open{overflow:hidden;}
}

/* Functies staan nu in de sidebar i.p.v. op de homepage — verberg nav-tegels
   maar behoud de Aandachtspunten-counters (live data). JS markeert de juiste
   secties met [data-ic-hide]. */
html.ic-ready [data-ic-hide]{display:none!important;}
html.ic-ready .admin-background-card{display:none!important;}

/* ---------- 13. Sidebar-header: logo gecentreerd + nette collapse-knop ---------- */
.ic-sb-head{position:relative;justify-content:center;}
.ic-brand{flex:0 1 auto;justify-content:center;gap:11px;}
.ic-collapse{
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  width:30px;height:30px;border-radius:9px;
  background:transparent;border:0;color:var(--text-secondary);
  opacity:.5;transition:opacity .2s,color .2s,background .2s;
}
.ic-collapse:hover{opacity:1;color:var(--accent-color);background:var(--surface-color-1);border:0;}
.ic-collapse svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
@media (min-width:1024px){
  /* rail (ingeklapt): logo + knop netjes gestapeld en gecentreerd */
  html.ic-rail .ic-sb-head{flex-direction:column;gap:10px;justify-content:center;padding:16px 0 14px;}
  html.ic-rail .ic-brand{width:auto;flex:0 0 auto;}
  html.ic-rail .ic-brand span{display:none;}    /* tekst echt weg -> logo blijft gecentreerd */
  html.ic-rail .ic-collapse{position:static;top:auto;right:auto;transform:none;margin:0 auto;}
  html.ic-rail .ic-collapse svg{transform:rotate(180deg);}  /* « -> » : pijltjes wijzen naar buiten als ingeklapt */
  /* labels echt verbergen (niet enkel visibility) -> iconen perfect gecentreerd */
  html.ic-rail .ic-label{display:none;}
  html.ic-rail .ic-item{gap:0;}
}

@media (prefers-reduced-motion:reduce){
  .ic-sidebar,#root,.ic-backdrop{transition:none;}
}