/* ================= DEMO APP SHELL ================= */
.demo-banner{
  background:var(--amber); color:var(--ink);
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  text-align:center; padding:8px 16px; letter-spacing:.03em;
  position:sticky; top:0; z-index:50;
}
.demo-banner a{ text-decoration:underline; color:var(--ink); font-weight:600; margin-left:10px;}

.app-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; background:var(--paper); }
.app-sidebar{
  background:var(--ink); color:var(--paper); padding:22px 16px; display:flex; flex-direction:column;
  position:sticky; top:33px; height:calc(100vh - 33px);
}
.app-sidebar .logo{ color:var(--paper); font-size:17px; margin-bottom:28px; padding:0 8px;}
.app-sidebar .logo-mark{ background:var(--flow); }
.app-nav{ list-style:none; margin:0; padding:0; flex:1; }
.app-nav li{ margin-bottom:2px; }
.app-nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius); color:#B9C4BE; text-decoration:none; font-size:14px; font-family:'IBM Plex Sans',sans-serif; }
.app-nav a .ic{ font-family:'IBM Plex Mono',monospace; font-size:12px; width:16px; text-align:center; opacity:.8;}
.app-nav a:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.app-nav a.active{ background:var(--flow); color:#fff; }
.app-sidebar .back-link{ font-size:12.5px; color:#8DA098; text-decoration:none; padding:10px 12px; font-family:'IBM Plex Mono',monospace; border-top:1px solid rgba(255,255,255,0.12); margin-top:8px; }
.app-sidebar .back-link:hover{ color:#fff; }

.app-topbar{ display:none; }
.drawer-scrim2{ display:none; }
@media(max-width:900px){
  .app-shell{ grid-template-columns:1fr; }
  .app-sidebar{ position:fixed; left:-260px; top:33px; height:calc(100vh - 33px); width:230px; z-index:60; transition:left .2s ease; }
  .app-sidebar.open{ left:0; }
  .app-topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:33px; z-index:40; }
  .app-topbar .menu-btn{ background:none; border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; font-family:'IBM Plex Mono',monospace; font-size:13px; cursor:pointer; }
  .drawer-scrim2.open{ display:block; position:fixed; inset:0; top:33px; background:rgba(18,35,46,0.4); z-index:55; }
}

.app-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 28px; border-bottom:1px solid var(--line); background:var(--paper); }
.app-header h1{ font-size:21px; }
.app-main{ padding:28px; max-width:1280px; }

.kpi-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:28px;}
.kpi{ background:var(--paper); padding:18px 16px; }
.kpi .kpi-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; color:var(--text-muted); letter-spacing:.04em;}
.kpi .kpi-value{ font-family:'Space Grotesk',sans-serif; font-size:26px; margin-top:6px; }
.kpi.warn .kpi-value{ color:#B5432E; }
.kpi.good .kpi-value{ color:var(--flow-dark); }
@media(max-width:1100px){ .kpi-grid{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:560px){ .kpi-grid{ grid-template-columns:repeat(2,1fr);} }

.panel2{ background:#fff; border:1px solid var(--line); padding:22px; margin-bottom:20px; }
.panel2-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.panel2-head h2{ font-size:16px; }
.two-col2{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
@media(max-width:1000px){ .two-col2{ grid-template-columns:1fr; } }

.badge2{ font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 9px; border-radius:12px; display:inline-block; white-space:nowrap; }
.badge-nieuw{ background:#E7E9E3; color:var(--ink); }
.badge-ingepland{ background:var(--amber-light); color:#8A5A15; }
.badge-onderweg{ background:#DCEAF6; color:#1F5A82; }
.badge-oplocatie{ background:#E3E0F6; color:#4B3E9E; }
.badge-afgerond{ background:var(--flow-light); color:var(--flow-dark); }
.badge-probleem{ background:#F8DCD6; color:#9C3220; }
.prio-hoog{ color:#B5432E; font-weight:600; }
.prio-normaal{ color:var(--text-muted); }
.prio-laag{ color:var(--text-muted); opacity:.7; }

.data-table2{ width:100%; border-collapse:collapse; }
.data-table2 th{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; color:var(--flow-dark); letter-spacing:.05em; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--paper-2); }
.data-table2 td{ padding:12px; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle;}
.data-table2 tbody tr{ cursor:pointer; }
.data-table2 tbody tr:hover{ background:var(--paper-2); }
.data-table2 .num{ font-family:'IBM Plex Mono',monospace; }
@media(max-width:760px){ .data-table2{ display:none; } }
.card-list2{ display:none; flex-direction:column; gap:10px; }
.record-card2{ border:1px solid var(--line); background:#fff; padding:14px; cursor:pointer; }
.record-card2 .rc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.record-card2 .rc-row{ font-size:12.5px; color:var(--text-muted); display:flex; justify-content:space-between; padding:3px 0; }
@media(max-width:760px){ .card-list2{ display:flex; } }

.toolbar2{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.toolbar2 input[type="search"], .toolbar2 select{ border:1px solid var(--line); padding:9px 12px; font-size:13.5px; border-radius:var(--radius); font-family:'IBM Plex Sans',sans-serif; background:#fff; }
.toolbar2 input[type="search"]{ min-width:200px; }
.btn2{ font-family:'IBM Plex Sans',sans-serif; font-size:13.5px; padding:9px 16px; border-radius:var(--radius); border:1px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; }
.btn2.primary{ background:var(--flow); color:#fff; border-color:var(--flow); }
.spacer2{ flex:1; }

.feed2{ list-style:none; margin:0; padding:0; }
.feed2 li{ display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; }
.feed2 li:last-child{ border-bottom:none; }
.feed2 .dot3{ width:7px; height:7px; border-radius:50%; background:var(--flow); margin-top:5px; flex-shrink:0;}
.feed2 .t{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-muted); display:block; margin-top:2px;}

.bars2{ display:flex; align-items:flex-end; gap:8px; height:130px; margin-top:10px;}
.bars2 .bar-col2{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
.bars2 .bar2{ width:100%; background:var(--flow); border-radius:2px 2px 0 0; }
.bars2 .bar-label2{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-muted); }

.overlay2{ position:fixed; inset:0; background:rgba(18,35,46,0.45); z-index:100; display:none; align-items:stretch; justify-content:flex-end; }
.overlay2.open{ display:flex; }
.drawer2{ background:var(--paper); width:min(560px,100%); height:100%; overflow-y:auto; padding:26px 26px 40px; box-shadow:-8px 0 24px rgba(18,35,46,0.16); }
.drawer2-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.drawer2-head h2{ font-size:19px; }
.close-x2{ background:none; border:1px solid var(--line); width:32px; height:32px; border-radius:var(--radius); cursor:pointer; font-size:14px;}
.detail-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:20px;}
.detail-grid2 .dl-label2{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; color:var(--text-muted); }
.detail-grid2 .dl-value2{ font-size:14px; margin-top:2px; }

.timeline2{ list-style:none; margin:0; padding:0; }
.timeline2 li{ display:flex; gap:12px; padding-bottom:18px; position:relative; }
.timeline2 li::before{ content:""; position:absolute; left:5px; top:16px; bottom:-4px; width:1px; background:var(--line); }
.timeline2 li:last-child::before{ display:none; }
.timeline2 .tdot2{ width:11px; height:11px; border-radius:50%; background:var(--line); margin-top:3px; flex-shrink:0; z-index:1; }
.timeline2 li.done .tdot2{ background:var(--flow); }
.timeline2 .tl-time2{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-muted); }

.empty-state2{ text-align:center; padding:40px 20px; color:var(--text-muted); font-size:13.5px; }
.toast2{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:var(--radius); font-size:13.5px; z-index:200; display:none; }
.toast2.show{ display:block; }