:root {
  --primary: #0a192f; --primary-l: #112240; --accent: #d4af37; --accent-h: #e5c158;
  --text: #0a192f; --dim: #8892b0; --bg: #f4f7f6; --card: #fff;
  --border: #e2e8f0; --border-l: #f0f0f2;
  --success: #28a745; --danger: #dc3545; --warn-bg: #fff8e1; --warn-border: #d4af37;
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono: 'JetBrains Mono',monospace;
  --sidebar: 270px; --sidebar-sm: 68px;
  --logo-uri: url('/assets/images/logo_icon.png');
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);display:flex;min-height:100vh;font-size:14px;line-height:1.6}

/* SIDEBAR */
aside{width:var(--sidebar);background:var(--card);border-right:1px solid var(--border);position:fixed;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:100;transition:width .25s ease}
body.sidebar-collapsed aside{width:var(--sidebar-sm);overflow:hidden}
.sidebar-header{padding:20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:80px;position:sticky;top:0;z-index:10;background:var(--card)}
body.sidebar-collapsed .sidebar-header{padding:20px 0;justify-content:center}
.sidebar-header a{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-img {
  width: 42px;
  height: 42px;
  background-image: var(--logo-uri);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.sidebar-header .logo-img { width: 42px; height: 42px; }
.top-bar-brand .logo-img { width: 32px; height: 32px; }
.sidebar-brand-text{transition:opacity .2s}
body.sidebar-collapsed .sidebar-brand-text{opacity:0;width:0;overflow:hidden}
.sidebar-brand{font-size:1.3rem;font-weight:800;color:var(--primary);letter-spacing:-.5px;line-height:1}
.sidebar-brand .dot{color:var(--accent)}
.sidebar-subtitle{font-size:.65rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.sidebar-nav{padding:16px 8px;flex:1}
.nav-group{margin-bottom:20px}
.nav-label{font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;padding-left:12px;white-space:nowrap;overflow:hidden}
body.sidebar-collapsed .nav-label{opacity:0;height:0}
nav a{display:flex;align-items:center;gap:9px;padding:9px 12px;color:var(--dim);text-decoration:none;border-radius:8px;margin-bottom:2px;font-weight:600;font-size:13px;transition:all .2s;position:relative;white-space:nowrap;overflow:hidden}
nav a svg{flex-shrink:0;width:16px;height:16px;opacity:.6}
nav a.active{background:var(--primary);color:#fff}
nav a.active svg{opacity:1;filter:brightness(0) invert(1)}
nav a.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--accent);border-radius:0 3px 3px 0}
nav a:hover:not(.active){background:rgba(10,25,47,.04);color:var(--primary)}
nav a:hover:not(.active) svg{opacity:.8}
span.label{transition:opacity .2s}
body.sidebar-collapsed span.label{opacity:0;width:0;overflow:hidden;display:none}
.sidebar-footer{padding:12px 8px;border-top:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.sidebar-footer a{display:flex;align-items:center;gap:8px;color:var(--dim);text-decoration:none;font-size:12px;font-weight:600;padding:6px 12px;border-radius:6px;transition:all .2s}
.sidebar-footer a:hover{color:var(--accent)}
.sidebar-toggle-container {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 80px;
  z-index: 9;
  background: var(--card);
}

/* Sidebar verbergen als er geen file is geladen */
body.no-file aside { display: none !important; }
body.no-file main { margin-left: 0 !important; }
#toggle-btn {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 11px;
  color: var(--dim);
  font-family: var(--font);
  font-weight: 700;
  transition: all 0.2s;
  margin-top: 10px;
  width: fit-content;
  display: block;
}
#toggle-btn:hover {
  border-color: var(--accent);
  color: var(--primary);
  background: var(--bg);
}
body.sidebar-collapsed #toggle-btn {
  padding: 6px 0;
  width: 100%;
  text-align: center;
}

/* MAIN */
main{flex:1;margin-left:var(--sidebar);transition:margin-left .25s ease;min-width:0}
body.sidebar-collapsed main{margin-left:var(--sidebar-sm)}
.top-bar{background:var(--card);border-bottom:1px solid var(--border);padding:12px 32px;display:flex;align-items:center;position:sticky;top:0;z-index:100;gap:24px}
.top-bar-brand{display:none;align-items:center;gap:12px;text-decoration:none;color:inherit}
.top-bar-brand .logo-img{height:30px;width:30px}
.top-bar-brand .sidebar-brand-text{display:flex;flex-direction:column;line-height:1}
.top-bar-brand .sidebar-brand{font-size:18px;font-weight:800;color:var(--primary)}
.top-bar-brand .sidebar-subtitle{font-size:9px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
body.no-file .top-bar-brand{display:flex}
body.no-file #view-title{display:none}
body.no-file aside {display: none;}
body.no-file main {margin-left: 0;}
.top-bar h1{font-size:1.4rem;font-weight:800;color:var(--primary);margin:0;letter-spacing:-.3px}
.content{padding:28px 32px 60px}
.company-info{display:none;flex-direction:column;align-items:flex-end;gap:1px}
.company-name{font-weight:700;font-size:13px;color:var(--primary)}
.company-year{font-size:11px;font-weight:600;color:var(--dim)}
.company-year.warn{color:var(--danger);font-size:10px}

/* CARDS & TABLES */
.card{background:var(--card);border-radius:12px;border:1px solid var(--border);overflow:hidden;margin-bottom:24px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.03)}
.card-header{padding:14px 22px;background:var(--primary);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.card-header .icon{color:var(--accent)}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:10px 20px;background:rgba(10,25,47,.02);border-bottom:2px solid var(--border);font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
td{padding:9px 20px;border-bottom:1px solid var(--border-l);vertical-align:middle;font-size:13px}
tr:hover td{background:rgba(10,25,47,.012)}
.code{font-family:var(--mono);font-weight:700;color:var(--primary);font-size:12px}
.amt{text-align:right;font-family:var(--mono);font-weight:600;font-size:13px;white-space:nowrap}
.amt.credit-val{color:#1a3a6b}
.total-row td{background:rgba(10,25,47,.03);font-weight:800;border-top:2px solid var(--border);color:var(--primary)}
.res-row td{background:rgba(212,175,55,.08);font-weight:800;border-top:2px solid var(--accent)}
.mem-row td{background:var(--warn-bg)!important}
.mem-badge{display:inline-block;background:var(--accent);color:var(--primary);font-size:10px;font-weight:800;padding:1px 6px;border-radius:4px;margin-left:4px}

/* KPI GRID */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}
.kpi-card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid var(--border);border-top:3px solid var(--accent);transition:transform .2s}
.kpi-card:hover{transform:translateY(-2px)}
.kpi-card.success{border-top-color:var(--success)}
.kpi-card.warning{border-top-color:var(--danger)}
.kpi-value{font-size:22px;font-weight:800;color:var(--primary);font-family:var(--mono)}
.kpi-label{font-size:11px;font-weight:700;color:var(--dim);text-transform:uppercase;margin-top:5px}

/* UPLOAD */
#upload-box{border:3px dashed var(--border);border-radius:16px;padding:70px 40px;text-align:center;background:var(--card);cursor:pointer;transition:all .2s;max-width:680px;margin:50px auto}
#upload-box:hover,#upload-box.active{border-color:var(--accent);background:rgba(212,175,55,.03)}
#upload-box h2{font-size:1.25rem;font-weight:800;color:var(--primary);margin:20px 0 6px}
#upload-box p{color:var(--dim);margin-bottom:20px}
.up-icon{width:72px;height:72px;margin:0 auto;background:rgba(10,25,47,.04);border-radius:18px;display:flex;align-items:center;justify-content:center}
.up-icon svg{width:32px;height:32px}
.upload-btn{display:inline-block;padding:11px 26px;background:var(--accent);color:var(--primary);border:none;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;font-family:var(--font);transition:all .2s}
.upload-btn:hover{background:var(--accent-h);transform:translateY(-2px);box-shadow:0 4px 12px rgba(212,175,55,.3)}
.fmt-tags{margin-top:16px;display:flex;justify-content:center;gap:8px}
.fmt-tag{display:inline-block;padding:3px 10px;background:rgba(10,25,47,.04);border-radius:20px;font-size:11px;font-weight:700;color:var(--dim);text-transform:uppercase}

/* BUTTONS */
.btn{display:inline-block;padding:9px 20px;background:var(--accent);color:var(--primary);border:none;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font);transition:all .2s;text-decoration:none}
.btn:hover{background:var(--accent-h);transform:translateY(-2px);box-shadow:0 4px 12px rgba(212,175,55,.3);color:var(--primary)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--dim)}
.btn-ghost:hover{border-color:var(--accent);color:var(--primary);background:transparent;box-shadow:none}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#c82333;color:#fff;box-shadow:none}

/* WARN BANNER */
.warn-banner{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:8px;padding:12px 18px;margin-bottom:20px;font-size:13px;display:flex;align-items:center;gap:10px}

/* PAGINATION */
.pagination{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.pagination button{padding:5px 12px;border:1px solid var(--border);background:var(--card);border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;color:var(--dim);transition:all .2s}
.pagination button.active,.pagination button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination button:disabled{opacity:.4;cursor:default}
select.per-page{padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:var(--font);color:var(--text)}

/* SPLIT VIEW (grootboekkaarten) */
.split-view{display:flex;gap:0;min-height:calc(100vh - 80px)}
.split-left{width:280px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;position:sticky;top:80px;height:calc(100vh - 80px)}
.split-right{flex:1;padding:28px 32px;min-width:0}
.acct-list-item{padding:10px 16px;border-bottom:1px solid var(--border-l);cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center;gap:8px}
.acct-list-item:hover{background:rgba(10,25,47,.03)}
.acct-list-item.active{background:var(--primary);color:#fff}
.acct-list-item.active .acct-saldo{color:rgba(255,255,255,.8)}
.acct-code{font-family:var(--mono);font-size:12px;font-weight:700}
.acct-desc{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.acct-saldo{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--dim);white-space:nowrap}
.acct-search{width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--border);font-family:var(--font);font-size:13px;outline:none}
.col-toggle-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.col-toggle{padding:4px 10px;border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;background:var(--card);color:var(--dim);transition:all .2s}
.col-toggle.on{border-color:var(--primary);background:var(--primary);color:#fff}
.col-toggle.unavailable{border-color:#ddd;color:#bbb;cursor:not-allowed;background:#fafafa;opacity:.7}

/* RGS subtotaal rijen */
.rgs-group-1{background:#f0f4ff;font-weight:800}
.rgs-group-2{background:#f6f8ff;font-weight:700}
.rgs-group-3{background:#fafbff;font-weight:600;font-style:italic}

.file-badge { display: inline-flex; align-items: center; gap: 8px; background: #e8f5e9; color: #2e7d32; padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 11px; white-space: nowrap; }
.file-badge::before { content: ''; width: 6px; height: 6px; background: #2e7d32; border-radius: 50%; opacity: 1; animation: pulse 2s infinite; }

/* ANIMATIONS */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .35s ease}

/* RESPONSIVE */
@media(max-width:900px){.kpi-grid{grid-template-columns:1fr 1fr}.split-view{flex-direction:column}.split-left{width:100%;height:240px;position:static}}
@media(max-width:600px){.content{padding:16px}}

/* COLLAPSIBLE NAV GROUP */
.nav-label-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.nav-label-toggle:hover{color:var(--primary)}
.nav-label-toggle .chev{transition:transform .22s ease;flex-shrink:0}
.stam-collapsed .nav-label-toggle .chev{transform:rotate(-90deg)}
.stam-nav{overflow:hidden;max-height:300px;transition:max-height .25s ease,opacity .2s ease;opacity:1}
.stam-nav.stam-hidden{max-height:0;opacity:0}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}

/* FILTER ROW & EXPORT */
.filter-row th{padding:4px 8px;background:#f8fafc}
.filter-row input,.filter-row select{width:100%;padding:4px 6px;border:1px solid var(--border);border-radius:4px;font-family:var(--font);font-size:11px;outline:none;background:var(--card)}
.filter-row input:focus,.filter-row select:focus{border-color:var(--accent)}
.export-bar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.export-bar label{font-size:12px;font-weight:700;color:var(--dim)}
.tfoot-totals td{background:rgba(10,25,47,.04);font-weight:800;border-top:2px solid var(--border);font-family:var(--mono);font-size:12px;padding:8px 20px}
.tfoot-saldo td{background:rgba(212,175,55,.08);border-top:1px solid var(--accent);font-weight:800;font-family:var(--mono);font-size:12px;padding:6px 20px}
/* Sticky Headers & Scroll fixes */
.sticky-table-wrapper {
  overflow: auto;
  max-height: calc(100vh - 260px);
  position: relative;
  scrollbar-width: thin;
}
.sticky-table-wrapper table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--border);
}
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 11;
  background-color: var(--card);
  box-shadow: inset -1px 0 0 var(--border);
}
tr:hover .sticky-col {
  background-color: #f8f9fa !important;
}
.sticky-table-wrapper th.sticky-col {
  z-index: 12;
}
/* Scrollbar altijd zichtbaar maken op Windows */
.sticky-table-wrapper::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.sticky-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}
.sticky-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.pager{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.pager button{padding:5px 11px;border:1px solid var(--border);background:var(--card);border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;color:var(--dim);font-family:var(--font);transition:all .15s}
.pager button:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary)}
.pager button.pg-active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pager button:disabled{opacity:.35;cursor:default}
.pager .pg-info{font-size:12px;color:var(--dim);font-weight:600;margin:0 4px}
.pager input.pg-jump{width:52px;padding:4px 6px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:var(--font);text-align:center}
.pager input.pg-jump:focus{border-color:var(--accent);outline:none}
.month-group td{background:var(--primary);color:#fff;cursor:pointer;padding:7px 16px;font-size:12px;font-weight:700;user-select:none}
.month-group td:hover{background:var(--primary-l)}
.month-group .chev{margin-right:6px;font-size:11px}

/* PRINT STYLES */
@media print {
  @page { margin: 12mm 10mm; }
  body { font-size: 10px !important; display: block !important; background: #fff !important; }
  aside, .sidebar-toggle-container, .export-bar, .pager, .warn-banner,
  .upload-btn, .col-toggle-bar, .file-badge, #toggle-btn, .sidebar-footer,
  .top-bar-brand, .btn, #loading, .acct-search-box { display: none !important; }
  main { margin-left: 0 !important; }
  .top-bar { position: static !important; border-bottom: 2px solid #000; padding: 4px 0 !important; }
  .top-bar h1 { font-size: 14px !important; }
  .company-info { display: flex !important; }
  .content, .split-right { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; margin-bottom: 8px !important; }
  .card-header { background: #f0f0f0 !important; color: #000 !important; padding: 6px 10px !important; font-size: 11px !important; }
  .sticky-table-wrapper { overflow: visible !important; max-height: none !important; }
  .sticky-col { position: static !important; box-shadow: none !important; }
  table { font-size: 9px !important; width: 100% !important; }
  th { background: #f5f5f5 !important; padding: 4px 6px !important; font-size: 8px !important; }
  td { padding: 3px 6px !important; font-size: 9px !important; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { page-break-inside: avoid; }
  .kpi-grid, .kpi-card { display: none !important; }
  .split-view { flex-direction: column !important; height: auto !important; }
  .split-left { display: none !important; }
  a { color: inherit !important; text-decoration: none !important; }
  .credit-val { color: #333 !important; }
}