/* ===== Layout & Theme (polish) ===== */
:root{
  --sidebar-w:270px;
  --header-h:56px;
  --bg:#0f172a;            /* slate-900 (sidebar/topbar) */
  --card:#ffffff;          /* card background */
  --text:#111827;          /* standaard tekstkleur */
  --muted:#6b7280;
  --accent:#ff5a1f;        /* oranje */
  --accent-2:#00c2a8;      /* teal */
  --accent-3:#f43f5e;      /* rose */
  --accent-4:#22c55e;      /* green */
}

html,body{height:100%}
body{
  padding-top:var(--header-h);
  background:
    radial-gradient(1200px 600px at -20% -20%, rgba(255,90,31,.08), transparent 60%),
    radial-gradient(1000px 500px at 120% -20%, rgba(0,194,168,.06), transparent 60%),
    #f6f7fb;
  color:var(--text);
}

/* Topbar (dark) */
.topbar{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:1050;
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(90deg,#0f172a 0%,#1f2937 60%,#0f172a 100%);
  color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}

/* Sidebar (dark) */
.app-sidebar{
  position:fixed; top:var(--header-h); left:0; bottom:0; z-index:1040;
  width:var(--sidebar-w); overflow-y:auto;
  background:linear-gradient(180deg,#0f172a 0%,#111827 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
.text-light-50{color:rgba(255,255,255,.6)}
.app-sidebar .list-group-item{
  background:transparent; color:rgba(255,255,255,.85);
  border:0; border-radius:0; padding:.75rem 1rem; display:flex; align-items:center; gap:.5rem;
}
.app-sidebar .list-group-item:hover,
.app-sidebar .list-group-item.active{
  background:rgba(255,255,255,.08); color:#fff;
}

/* Main area */
.app-main{ margin-left:var(--sidebar-w); min-height:calc(100vh - var(--header-h)); }
@media (max-width:991.98px){
  .app-sidebar{ transform:translateX(-100%); transition:transform .2s ease; }
  .app-sidebar.open{ transform:translateX(0); }
  .app-main{ margin-left:0; }
}

/* Cards, tables, typography */
.card{ background:var(--card); color:var(--text); border:1px solid rgba(15,23,42,.06); border-radius:14px; }
.card-header{ background:transparent; border-bottom:1px solid rgba(15,23,42,.06); font-weight:600; }
.table thead th{ font-weight:600; white-space:nowrap; }
.table tbody td{ vertical-align:middle; }
.table-actions{ white-space:nowrap; }

/* KPI cards */
.kpi-card{ border:0; color:#fff; }
.kpi-card .card-body{ display:flex; align-items:center; gap:14px; }
.kpi-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.25); }

/* Sorting indicators */
th.sortable{ cursor:pointer; }
th.sortable:after{ content:"↕"; font-size:.8rem; margin-left:.35rem; opacity:.5; }
th.sortable.asc:after{ content:"↑"; }
th.sortable.desc:after{ content:"↓"; }

/* Buttons/inputs alignment & contrast */
.btn{ vertical-align:middle; }
.btn-sm{ line-height:1.25; }
.btn-accent{ background:var(--accent); color:#fff; border:0; }
.btn-accent:hover{ opacity:.95; color:#fff; }
.topbar .btn-outline-light{ --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.6); --bs-btn-hover-bg:rgba(255,255,255,.15); }

/* Tabs */
.nav-tabs .nav-link{ color:var(--muted); }
.nav-tabs .nav-link.active{ color:var(--text); font-weight:600; background:#fff; border-color:#e5e7eb #e5e7eb #fff; }

/* Utility */
.section-hero{ border-radius:20px; }
.badge-soft{ background:rgba(15,23,42,.05); color:var(--text); border:1px solid rgba(15,23,42,.06); }