:root{
  --bg:#070908; --panel:#111411; --panel2:#191d18; --card:#1b201a; --text:#f3f6ef; --muted:#9ba597;
  --line:#2a3028; --green:var(--green); --green2:#7ee32f; --orange:#ffad33; --red:#ff5d5d; --white:#fff;
  --shadow:0 22px 60px rgba(0,0,0,.45); --radius:26px;
  --color-status-active: #22C55E; --color-status-active-border: #16A34A; --color-status-active-bg: #F0FDF4;
  --color-status-concept: #F59E0B; --color-status-concept-border: #D97706; --color-status-concept-bg: #FFFBEB;
  --color-status-hist: #CBD5E1; --color-status-hist-border: #94A3B8;
  --color-status-active-dot: #22C55E;
  --color-status-active-text: #15803D;
  --color-status-concept-dot: #F59E0B;
  --color-status-concept-text: #92400E;
  --color-diff-added-bg: #F0FDF4;
  --color-diff-added-border: #BBF7D0;
  --color-diff-added-text: #15803D;
  --color-diff-modified-bg: #FFFBEB;
  --color-diff-modified-border: #FDE68A;
  --color-diff-modified-text: #92400E;
  --color-diff-removed-bg: #FEF2F2;
  --color-diff-removed-border: #FECACA;
  --color-diff-removed-text: #B91C1C;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 20% -10%,#25331d 0,#070908 42%),var(--bg);color:var(--text)}
a{color:var(--green);text-decoration:none} a:hover{text-decoration:underline}.muted{color:var(--muted)}
.app-shell{display:flex;height:100vh;overflow:hidden}.sidebar{width:270px;background:#050705;border-right:1px solid var(--line);padding:26px 18px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}.logo{width:54px;height:54px;border-radius:18px;object-fit:contain;background:#fff;padding:6px}.brand-title{font-weight:900;letter-spacing:.3px}.brand-sub{color:var(--green);font-size:12px}.nav{display:flex;flex-direction:column;gap:9px}.nav a{color:#e9efe3;padding:13px 14px;border-radius:18px;background:transparent;text-decoration:none}.nav a:hover{background:#171c15}.nav .primary{background:linear-gradient(135deg,#0D9488,#0891B2);color:#fff;font-weight:700}.user-pill{margin-top:28px;padding:14px;border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:13px}.content{flex:1;padding:34px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.page-title h1{margin:0;font-size:34px}.page-title p{margin:7px 0 0;color:var(--muted)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:22px}.glass{background:rgba(255,255,255,.045);backdrop-filter:blur(10px)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.kpi{min-height:150px}.kpi h3{margin:0 0 20px;color:var(--muted);font-size:14px;font-weight:600}.metric{font-size:44px;font-weight:950;letter-spacing:-2px}.kpi .hint{margin-top:14px;color:var(--muted);font-size:13px}.accent{color:var(--green)}.warn{color:var(--orange);font-weight:800}.danger{color:var(--red);font-weight:800}.ok{color:var(--green);font-weight:800}.info{color:#38bdf8;font-weight:800}
.btn,button{background:linear-gradient(135deg,var(--green),#d8ff94);color:#0a0d08;border:0;padding:12px 16px;border-radius:16px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;margin:4px 6px 4px 0;cursor:pointer;font-weight:800}.btn.secondary{background:#242923;color:var(--text);border:1px solid var(--line)}.btn.danger{background:#331b1b;color:#ffb3b3;border:1px solid #5a2b2b}
input,textarea,select{width:100%;padding:13px 14px;margin:8px 0 16px;background:#0b0e0b;color:var(--text);border:1px solid var(--line);border-radius:15px}label{color:#cdd8c6;font-weight:700;font-size:14px}textarea{resize:vertical}.table-wrap{overflow:auto;border-radius:20px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;background:#111411}th,td{padding:14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:#b8c7b0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;background:#151a14}tr:hover td{background:#151a14}.pill{border-radius:999px;padding:6px 10px;background:#252c22;display:inline-block;font-size:.9em;color:#dbe8d2;border:1px solid var(--line)}.score-pill{background:var(--green);color:#0b1008;font-weight:950}.flash{background:#2b220f;color:#ffe5a4;border:1px solid #5a4314;padding:13px;border-radius:16px;margin-bottom:18px}.bar-bg{background:#0b0e0b;border-radius:999px;overflow:hidden;height:18px;border:1px solid var(--line)}.bar{background:linear-gradient(90deg,var(--green2),var(--green));height:18px;color:#071006;font-size:12px;text-align:right;padding-right:7px;box-sizing:border-box;font-weight:900}.trend{display:flex;align-items:end;gap:10px;height:180px;border-bottom:1px solid var(--line);padding-top:8px}.trendbar{background:linear-gradient(180deg,var(--green),var(--orange));min-width:28px;border-radius:12px 12px 0 0;text-align:center;color:#071006;font-size:11px;font-weight:900;writing-mode:vertical-rl;transform:rotate(180deg)}
.audit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.audit-card{background:#111411;border:1px solid var(--line);border-radius:22px;padding:18px}.audit-card h3{margin:0 0 8px}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}.kanban{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:18px}.kanban-col{background:#10140f;border:1px solid var(--line);border-radius:24px;padding:16px}.task{background:#1b2118;border:1px solid var(--line);border-radius:18px;padding:14px;margin:12px 0}.thumb{max-width:180px;max-height:135px;border-radius:14px;border:1px solid var(--line);margin:6px}body.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at center,#203c1a 0%,#08110a 42%,#000000 100%);
}
body.login-page .content{
  width:100%;
  max-width:none;
  min-height:100vh;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-wrap{width:100%;max-width:460px;margin:0 auto;padding:28px}.login-logo{display:block;max-width:240px;max-height:110px;object-fit:contain;margin:0 auto 30px;background:#fff;border-radius:22px;padding:10px}.mini{font-size:.9em;color:var(--muted)}.mobile-top{display:none}
@media(max-width:900px){body.login-page .content{padding:16px}.login-wrap{max-width:440px;padding:24px}.login-logo{max-width:220px}.app-shell{display:block}.sidebar{position:relative;width:auto;height:auto}.nav{display:grid;grid-template-columns:repeat(2,1fr)}.content{padding:18px}.split,.kanban{grid-template-columns:1fr}.topbar{display:block}.mobile-top{display:block}.page-title h1{font-size:28px}}

.btn-danger {
    background: #ff5f57;
    color: #140000;
    border: none;
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
}

.btn-danger:hover {
    filter: brightness(1.08);
}
.photo-required {
    outline: 2px solid rgba(255, 190, 80, .55);
    border-radius: 12px;
    padding: 6px;
}
.photo-required .mini::before {
    content: "⚠ ";
}
.photo-suggested .photo-hint {
    color: #0891B2;
    font-weight: 700;
}

/* Extra ruimte tussen CAPA Kanban-kolommen en de actielijst */
.kanban + .card {
    margin-top: 32px;
}

.brand-title{font-size:32px;font-weight:800}.login-subtitle{margin-top:-10px;opacity:.85}.login-logo{max-width:320px;width:100%;height:auto;display:block;margin:0 auto 20px auto}

/* Audito sidebar branding: alleen het icoon naast de naam */
.brand{gap:14px;align-items:center;}
.logo.brand-icon{
  width:58px;
  height:58px;
  padding:0;
  background:transparent;
  border-radius:18px;
  object-fit:contain;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.brand-title{line-height:1;font-size:30px;font-weight:950;letter-spacing:-.6px;}
.brand-sub{margin-top:6px;font-size:13px;color:var(--green);}

/* Audito logo update: wit kruis in groen symbool, gelijk aan mock-up */
.login-wrap{
  max-width:560px;
  padding:34px;
}
.login-brand{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:34px;
}
.login-brand-icon{
  width:138px;
  height:138px;
  object-fit:contain;
  border-radius:32px;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,.28));
  flex:0 0 auto;
}
.login-brand-title{
  font-size:58px;
  line-height:.95;
  font-weight:950;
  letter-spacing:-2px;
  color:#fff;
}
.login-brand-sub{
  margin-top:10px;
  color:#b8c4b3;
  font-size:19px;
  line-height:1.25;
}
.login-wrap .login-subtitle{
  margin:0 0 14px 0;
  font-size:34px;
  opacity:1;
}
.logo.brand-icon{
  background:transparent !important;
  padding:0 !important;
  object-fit:contain;
}
@media(max-width:650px){
  .login-wrap{max-width:92vw;padding:26px;}
  .login-brand{gap:16px;margin-bottom:26px;}
  .login-brand-icon{width:92px;height:92px;border-radius:24px;}
  .login-brand-title{font-size:42px;letter-spacing:-1.2px;}
  .login-brand-sub{font-size:15px;}
}

.password-wrap{display:flex;gap:8px;align-items:center}.password-wrap button{padding:10px 12px;border-radius:10px}

/* Templatebeheer filterbalk */
.filter-form {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-form > div {
  display: flex;
  flex-direction: column;
  min-width: 240px;
}

.filter-form label {
  margin-bottom: 8px;
}

.filter-form select,
.filter-form input {
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
}

.filter-form button,
.filter-form .btn-secondary {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  margin-top: 24px;
  box-sizing: border-box;
  line-height: 1;
}

.filter-form .btn-secondary {
  text-decoration: none;
}

.drag-handle {
  cursor: grab;
  font-size: 20px;
  text-align: center;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.sortable-ghost {
  opacity: 0.4;
}

.category-controls {
  display: flex;
  gap: 12px;
  margin: 12px 0 18px;
  flex-wrap: wrap;
}

.audit-category {
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 12px 0;
  overflow: hidden;
  background: #fff;
}

.audit-category summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--navy);
  background: var(--bg);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.audit-category summary::-webkit-details-marker {
  display: none;
}

.audit-category summary::after { content: none; }

.audit-category .table-wrap {
  margin: 0;
  border-top: 1px solid var(--border);
}

.audit-category table {
  margin: 0;
  border-radius: 0;
}

.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.metric-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
}

.metric-label,
.metric-sub {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.metric-value {
  display: block;
  font-size: 36px;
  font-weight: 800;
  margin: 8px 0;
  color: var(--navy);
  letter-spacing: -.02em;
}

.metric-value.small {
  font-size: 20px;
  font-weight: 700;
}

.danger-text {
  color: #DC2626;
}

.warn-text {
  color: #D97706;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.detail-grid div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.detail-grid strong,
.detail-grid span {
  display: block;
}

.detail-grid strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.findings-list {
  display: grid;
  gap: 14px;
}

.finding-card {
  border: 1px solid #FEE2E2;
  background: #FFF5F5;
  border-radius: 16px;
  padding: 18px;
}

.finding-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.finding-question {
  font-size: 17px;
  font-weight: 700;
}

.danger-pill {
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.capa-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.audit-detail-section {
  margin: 20px 0;
}

.audit-detail-section summary {
  cursor: pointer;
  font-weight: 700;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
}

.photo-gallery,
.thumb-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.large-thumb {
  width: 140px;
  height: 100px;
  object-fit: cover;
}

.dossier-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  position: static;
  margin-bottom: 20px;
}

.dossier-nav a {
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  transition: all .15s;
}

.dossier-nav a:hover {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
  text-decoration: none;
}

.timeline {
  position: relative;
  margin-top: 18px;
  padding-left: 28px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  margin-bottom: 22px;
}

.timeline-dot {
  position: absolute;
  left: -26px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--indigo);
  box-shadow: 0 0 0 4px #EEF2FF;
}

.timeline-dot.warn-dot {
  background: #D97706;
}

.timeline-dot.ok-dot {
  background: #16A34A;
}

.timeline-item p {
  margin: 4px 0 0;
  color: var(--muted);
}

.tenant-pill {
    margin: 14px 0 16px 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    font-size: 0.9rem;
    line-height: 1.35;
}

.tenant-pill strong {
    display: block;
}

.tenant-pill span {
    opacity: 0.8;
    font-size: 0.82rem;
}

.sidebar {
    overflow-y: auto;
    max-height: 100vh;
}

.nav a {
    padding-top: 9px;
    padding-bottom: 9px;
}


/* Compacte footer */
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--text);
}

/* Loginpagina: gecentreerd scherm met footer onderaan */
body.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

body.login-page .content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

body.login-page .content > form,
body.login-page .content > .card {
    width: min(440px, calc(100vw - 32px));
}

.login-footer {
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
    background: rgba(0,0,0,.18);
}

.login-footer .footer-inner {
    justify-content: center;
}

.login-footer .footer-links {
    justify-content: center;
}

.login-footer p {
    display: none;
}

footer.card {
    padding: 16px 20px;
}


/* Juridische pagina's */
.legal-wrap {
    width: min(980px, 100%);
    margin: 0 auto;
}

.legal-card {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.legal-section {
    display: block;
    margin-bottom: 26px;
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-section h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.legal-section p,
.legal-card p {
    max-width: 780px;
    line-height: 1.6;
}

/* Superadmin dashboard layout fix */
.content > .card,
.content > .split,
.content > .grid,
.content > .topbar {
    max-width: 100%;
    box-sizing: border-box;
}

.content .table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.app-shell .content {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.dashboard-wide-fix {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.drag-row {
    cursor: grab;
}

.drag-row.dragging {
    opacity: 0.55;
}

.drag-handle {
    cursor: grab;
    font-weight: 700;
    user-select: none;
}

/* Public landing page */
.landing-page {
    min-height: 100vh;
}

.landing-nav {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.landing-nav nav {
    display: flex;
    gap: 14px;
    align-items: center;
}

.landing-nav a {
    text-decoration: none;
}

.landing-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 22px 60px;
}

.landing-hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 28px;
    align-items: center;
    margin-top: 30px;
}

.eyebrow {
    color: var(--accent, #8fd694);
    font-weight: 700;
    margin-bottom: 14px;
}

.landing-hero h1 {
    font-size: clamp(42px, 7vw, 72px);
    line-height: .95;
    letter-spacing: -0.07em;
    margin: 0 0 22px;
}

.hero-text {
    font-size: 20px;
    line-height: 1.55;
    max-width: 680px;
    color: var(--muted);
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.dashboard-preview {
    padding: 28px;
    min-height: 300px;
}

.preview-top {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.preview-top span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0;
}

.preview-grid div {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
}

.preview-grid strong {
    display: block;
    font-size: 26px;
}

.preview-grid small {
    color: var(--muted);
}

.preview-bar {
    height: 12px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 20px 0;
}

.preview-bar span {
    display: block;
    height: 100%;
    background: var(--accent, #8fd694);
    border-radius: 999px;
}

.landing-section {
    margin-top: 42px;
}

.landing-section h2 {
    font-size: 34px;
    letter-spacing: -0.04em;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.feature-grid .card {
    min-height: 150px;
}

.landing-cta {
    text-align: center;
    padding: 42px;
}

.landing-footer {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 22px 50px;
    color: var(--muted);
}

@media (max-width: 850px) {
    .landing-hero,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .landing-nav {
        align-items: flex-start;
        gap: 18px;
        flex-direction: column;
    }
}


/* Landing page CTA visibility fix */
.landing-page .btn,
.landing-page a.btn {
    background: #8fd694;
    color: #071009 !important;
    border: 1px solid #8fd694;
    font-weight: 800;
    box-shadow: 0 14px 32px rgba(143, 214, 148, .18);
}

.landing-page .btn:hover,
.landing-page a.btn:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

.landing-page .btn.secondary,
.landing-page a.btn.secondary {
    background: rgba(255,255,255,.10);
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: none;
}

.landing-page .btn.secondary:hover,
.landing-page a.btn.secondary:hover {
    background: rgba(255,255,255,.16);
}

.landing-nav nav a:not(.btn) {
    color: #ffffff !important;
    font-weight: 700;
}

.hero-actions .btn {
    min-width: 180px;
    text-align: center;
}

/* Landing page upgrade */
.landing-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.landing-trust span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
}

.preview-list {
    margin-top: 18px;
}

.preview-list p {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    margin: 8px 0;
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.workflow-grid .card span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: #8fd694;
    color: #071009;
    font-weight: 900;
    margin-bottom: 12px;
}

.landing-highlight {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 28px;
    align-items: center;
    padding: 38px;
}

.mini-template-card {
    border-radius: 20px;
    background: rgba(255,255,255,.06);
    padding: 20px;
}

.mini-template-card p {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pricing-card {
    min-height: 260px;
}

.pricing-card.featured {
    outline: 2px solid #8fd694;
    box-shadow: 0 18px 50px rgba(143, 214, 148, .12);
}

.price {
    color: var(--muted);
    font-weight: 700;
}

.pricing-card ul {
    padding-left: 20px;
    line-height: 1.9;
    color: var(--muted);
}

@media (max-width: 950px) {
    .workflow-grid,
    .pricing-grid,
    .landing-highlight {
        grid-template-columns: 1fr;
    }

    .landing-nav nav {
        flex-wrap: wrap;
    }
}


/* Landing page mobile polish */
@media (max-width: 720px) {
    .landing-page {
        overflow-x: hidden;
    }

    .landing-nav {
        padding: 18px 16px;
        gap: 14px;
    }

    .landing-logo {
        font-size: 28px;
    }

    .landing-nav nav {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .landing-nav nav a {
        text-align: center;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255,255,255,.06);
    }

    .landing-nav nav a.btn {
        grid-column: 1 / -1;
    }

    .landing-wrap {
        padding: 12px 16px 42px;
    }

    .landing-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 12px;
    }

    .landing-hero h1 {
        font-size: clamp(36px, 13vw, 52px);
        line-height: 1.02;
        letter-spacing: -0.055em;
    }

    .hero-text {
        font-size: 17px;
        line-height: 1.55;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-actions .btn,
    .landing-cta .btn {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .landing-trust {
        gap: 8px;
    }

    .landing-trust span {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .dashboard-preview {
        padding: 20px;
        min-height: auto;
        overflow: hidden;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .preview-list p {
        font-size: 14px;
    }

    .landing-section {
        margin-top: 28px;
    }

    .landing-section h2 {
        font-size: 28px;
        line-height: 1.1;
    }

    .feature-grid,
    .workflow-grid,
    .pricing-grid,
    .landing-highlight {
        grid-template-columns: 1fr !important;
    }

    .landing-highlight {
        padding: 24px;
    }

    .pricing-card {
        min-height: auto;
    }

    .landing-cta {
        padding: 28px 20px;
    }

    .landing-footer {
        padding: 24px 16px 40px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .landing-nav nav {
        grid-template-columns: 1fr;
    }

    .landing-hero h1 {
        font-size: 38px;
    }

    .eyebrow {
        font-size: 14px;
    }

    .dashboard-preview h3,
    .feature-grid h3,
    .workflow-grid h3,
    .pricing-card h3 {
        font-size: 18px;
    }

    .preview-grid strong {
        font-size: 24px;
    }

    .card {
        border-radius: 18px;
    }
}


/* Landing live product mockups */
.product-mockups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.mockup-card {
    padding: 22px;
}

.mockup-top {
    display: flex;
    gap: 7px;
    margin-bottom: 16px;
}

.mockup-top span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
}

.mockup-card h3 {
    margin-top: 0;
}

.mockup-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.mockup-kpis div {
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
}

.mockup-kpis strong {
    display: block;
    font-size: 22px;
}

.mockup-kpis small {
    color: var(--muted);
}

.mockup-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin: 14px 0;
}

.mockup-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #8fd694;
}

.mockup-row,
.mockup-list p,
.mockup-template p {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: var(--muted);
}

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    margin-right: 8px;
}

.danger-dot {
    background: #ff6b6b;
}

.warn-dot {
    background: #ffd166;
}

.ok-dot {
    background: #8fd694;
}

.mockup-mini-table {
    margin-top: 12px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
}

.mockup-mini-table div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.mockup-mini-table div:last-child {
    border-bottom: 0;
}

.mockup-template p span {
    color: #8fd694;
    font-weight: 900;
    margin-right: 6px;
}

.mockup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mockup-badges span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(143,214,148,.12);
    color: #8fd694;
    font-weight: 800;
    font-size: 13px;
}

@media (min-width: 980px) {
    .landing-hero {
        grid-template-columns: .9fr 1.1fr;
    }

    .product-mockups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .product-mockups {
        grid-template-columns: 1fr;
    }

    .mockup-kpis {
        grid-template-columns: 1fr;
    }

    .mockup-card {
        padding: 18px;
    }
}

/* Landing mockup carousel */
.carousel-mockups {
    position: relative;
    min-height: 430px;
}

.carousel-mockups .mockup-card {
    display: none;
    animation: mockupFade .35s ease;
}

.carousel-mockups .mockup-card.active {
    display: block;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.carousel-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    cursor: pointer;
}

.carousel-dots button.active {
    background: #8fd694;
    transform: scale(1.25);
}

@keyframes mockupFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 720px) {
    .carousel-mockups {
        min-height: auto;
    }
}


/* Mockup carousel vaste hoogte */
.carousel-mockups {
    position: relative;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.carousel-mockups .mockup-card {
    flex: 1;
}

.carousel-dots {
    margin-top: auto;
    padding-top: 16px;
}

@media (max-width: 720px) {
    .carousel-mockups {
        min-height: 620px;
    }
}


/* Carousel slide equal height fix */
.carousel-mockups {
    min-height: 560px;
}

.carousel-mockups .mockup-card {
    min-height: 500px;
    box-sizing: border-box;
}

.carousel-dots {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .carousel-mockups {
        min-height: 620px;
    }

    .carousel-mockups .mockup-card {
        min-height: 540px;
    }
}

/* Landing hamburger menu */
.landing-logo {
    color: inherit;
    text-decoration: none;
}

.landing-menu-toggle {
    display: none;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 22px;
    cursor: pointer;
}

@media (max-width: 720px) {
    .landing-nav {
        flex-direction: row;
        align-items: center;
        position: relative;
    }

    .landing-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    .landing-nav .landing-menu {
        display: none !important;
        position: absolute;
        top: 72px;
        left: 16px;
        right: 16px;
        z-index: 999;
        padding: 14px;
        border-radius: 18px;
        background: rgba(15, 23, 18, .98);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 20px 60px rgba(0,0,0,.35);
    }

    .landing-nav .landing-menu.open {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .landing-nav .landing-menu a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255,255,255,.06);
    }

    .landing-nav .landing-menu a.btn {
        text-align: center;
    }
}

/* Mobile hamburger menu readability fix */
@media (max-width: 720px) {
    .landing-nav {
        width: calc(100% - 32px);
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
    }

    .landing-nav .landing-menu {
        left: 0;
        right: 0;
        top: calc(100% + 12px);
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
    }

    .landing-nav .landing-menu a {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        color: #ffffff !important;
        font-weight: 800;
    }

    .landing-nav .landing-menu a.btn {
        background: #8fd694 !important;
        color: #071009 !important;
        border: 1px solid #8fd694 !important;
        text-align: center;
        box-shadow: 0 10px 24px rgba(143, 214, 148, .22);
    }

    .landing-menu-toggle {
        flex-shrink: 0;
    }
}

/* Mobile swipeable mockup carousel */
@media (max-width: 720px) {
    .carousel-mockups {
        touch-action: pan-y;
    }

    .carousel-mockups .mockup-card {
        user-select: none;
    }

    .carousel-dots {
        margin-top: 14px;
    }
}

/* Mobile homepage compacting */
.landing-process {
    padding: 28px;
}

.landing-process h2 {
    margin-top: 0;
}

.process-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

.process-bar div:not(.process-arrow) {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.05);
}

.process-bar span {
    font-size: 22px;
}

.process-bar strong {
    font-size: 14px;
}

.process-arrow {
    color: var(--muted);
    font-weight: 900;
}

@media (max-width: 720px) {
    .landing-process {
        padding: 18px;
    }

    .landing-process h2 {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .process-bar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .process-bar div:not(.process-arrow) {
        padding: 12px;
        border-radius: 12px;
    }

    .process-bar span {
        font-size: 20px;
    }

    .process-bar strong {
        font-size: 14px;
    }

    .process-arrow {
        text-align: center;
        font-size: 18px;
        transform: rotate(90deg);
    }

    .carousel-mockups {
        min-height: auto !important;
    }

    .carousel-mockups .mockup-card {
        min-height: 380px !important;
    }

    .feature-grid .card:nth-child(n+4) {
        display: none;
    }

    .feature-grid {
        grid-template-columns: 1fr !important;
    }

    .feature-grid .card {
        min-height: auto;
    }
}

/* Desktop workflow professional styling */
.process-bar div:not(.process-arrow) {
    align-content: start;
}

.process-bar div:not(.process-arrow) span {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(143,214,148,.14);
    color: #8fd694;
    font-weight: 900;
    font-size: 13px;
}

.process-bar div:not(.process-arrow) small {
    color: var(--muted);
    line-height: 1.45;
    max-width: 180px;
}

@media (max-width: 720px) {
    .process-bar div:not(.process-arrow) small {
        display: none;
    }

    .process-bar div:not(.process-arrow) span {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
}

/* Dashboard widget settings tiles */
.dashboard-widget-toggle {
    display: block;
    position: relative;
    padding: 20px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    transition: .18s ease;
    min-height: 105px;
    box-sizing: border-box;
}

.dashboard-widget-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dashboard-widget-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.18);
}

.dashboard-widget-toggle.is-active {
    border-color: rgba(143, 214, 148, .75);
    background: rgba(143, 214, 148, .10);
    box-shadow: 0 0 0 1px rgba(143, 214, 148, .15), 0 18px 44px rgba(143, 214, 148, .12);
}

.widget-toggle-title {
    display: block;
    font-weight: 800;
    margin-bottom: 12px;
}

.widget-toggle-status {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
    background: rgba(255,255,255,.06);
}

.dashboard-widget-toggle.is-active .widget-toggle-status {
    color: #071009;
    background: #8fd694;
}

/* Dashboard widget tiles: badge altijd onderaan */
.dashboard-widget-toggle {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.widget-toggle-title {
    display: block;
    font-weight: 800;
    margin-bottom: 12px;
    min-height: 48px;
}

.widget-toggle-status {
    margin-top: auto;
    align-self: flex-start;
}

/* App mobile sidebar + general mobile polish */
.app-menu-toggle,
.app-mobile-backdrop {
    display: none;
}

@media (max-width: 820px) {
    .app-shell {
        display: block;
    }

    .app-menu-toggle {
        display: inline-flex;
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 1200;
        width: 46px;
        height: 46px;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(15, 23, 18, .96);
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 12px 34px rgba(0,0,0,.35);
    }

    .app-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0,0,0,.52);
        backdrop-filter: blur(2px);
    }

    .app-mobile-backdrop.open {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1100;
        width: min(84vw, 320px);
        height: 100vh;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 20px 0 60px rgba(0,0,0,.35);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .content {
        width: 100%;
        box-sizing: border-box;
        padding: 76px 14px 28px;
        overflow-x: hidden;
    }

    .topbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .topbar > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .topbar .btn,
    .topbar .btn.secondary {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .grid,
    .split {
        grid-template-columns: 1fr !important;
    }

    .card {
        max-width: 100%;
        box-sizing: border-box;
    }

    .kpi .metric {
        font-size: clamp(28px, 12vw, 48px);
    }

    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 720px;
    }

    input,
    select,
    textarea,
    button,
    .btn {
        max-width: 100%;
        box-sizing: border-box;
    }

    .audit-filters {
        grid-template-columns: 1fr !important;
    }

    .footer-inner {
        display: grid;
        gap: 10px;
        text-align: center;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .card {
        padding: 16px;
        border-radius: 18px;
    }

    .page-title h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .btn,
    button {
        min-height: 42px;
    }
}

/* App hamburger mobile usability fix */
@media (max-width: 820px) {
    .app-menu-toggle {
        top: 12px;
        left: 12px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: rgba(12, 18, 15, .98);
    }

    .sidebar {
        width: min(78vw, 300px);
        max-width: 300px;
        padding: 18px 14px 28px;
        box-sizing: border-box;
    }

    .sidebar .brand {
        margin-top: 52px;
    }

    .sidebar .nav {
        display: grid;
        gap: 8px;
    }

    .sidebar .nav a {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 15px;
        line-height: 1.2;
    }

    .tenant-pill {
        font-size: 13px;
        line-height: 1.35;
    }

    .content {
        padding-top: 68px;
    }
}

@media (max-width: 420px) {
    .sidebar {
        width: min(86vw, 310px);
    }

    .sidebar .nav a {
        font-size: 14px;
        padding: 11px 12px;
    }
}

/* App sidebar mobile menu alignment fix */
@media (max-width: 820px) {
    .sidebar {
        overflow-x: hidden;
    }

    .sidebar * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .sidebar .nav {
        width: 100%;
        padding: 0 12px;
        margin: 16px 0 0;
    }

    .sidebar .nav a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px 12px;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        box-sizing: border-box;
    }

    .sidebar .nav a.primary {
        justify-content: center;
        text-align: center;
    }

    .sidebar .brand,
    .tenant-pill {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Mobile dashboard compaction */
@media (max-width: 820px) {
    .mobile-collapsible {
        padding: 0;
        overflow: hidden;
    }

    .mobile-collapsible summary {
        list-style: none;
        cursor: pointer;
        padding: 16px 18px;
        font-weight: 900;
        font-size: 17px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .mobile-collapsible summary::-webkit-details-marker {
        display: none;
    }

    .mobile-collapsible summary::after {
        content: "＋";
        float: right;
        color: var(--muted);
    }

    .mobile-collapsible[open] summary::after {
        content: "−";
    }

    .mobile-collapsible-body {
        padding: 16px;
    }

    /* KPI-overzicht als horizontale cards */
    .content > .grid:first-of-type,
    .mobile-collapsible-body > .grid {
        display: flex !important;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .content > .grid:first-of-type > .card,
    .mobile-collapsible-body > .grid > .card {
        min-width: 210px;
        scroll-snap-align: start;
    }

    .kpi {
        min-height: 120px;
    }

    .kpi .metric {
        font-size: 34px;
    }

    /* Scores/risico tabellen minder hoog laten voelen */
    .table-wrap {
        max-height: 420px;
        overflow: auto;
    }
}

/* Mobile pakketgebruik fix */
@media (max-width: 820px) {
    .mobile-collapsible-body > .grid {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .mobile-collapsible-body > .grid > .card.kpi {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    .mobile-collapsible-body .metric.small {
        font-size: 28px;
        word-break: break-word;
    }

    .mobile-collapsible-body .hint {
        font-size: 14px;
        line-height: 1.35;
    }
}

/* Compact pakketgebruik op mobiel */
.package-mobile-list {
    display: none;
}

@media (max-width: 820px) {
    .package-kpi-grid {
        display: none !important;
    }

    .package-mobile-list {
        display: grid;
        gap: 10px;
        margin: 14px 0;
    }

    .package-mobile-list div {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.08);
    }

    .package-mobile-list strong {
        font-size: 14px;
        color: var(--muted);
    }

    .package-mobile-list span {
        font-size: 22px;
        font-weight: 900;
        white-space: nowrap;
    }
}

/* Mobile audit cards */
.audit-mobile-cards {
    display: none;
}

@media (max-width: 820px) {
    .audit-desktop-table {
        display: none;
    }

    .audit-mobile-cards {
        display: grid;
        gap: 12px;
        margin-top: 14px;
    }

    .audit-mobile-card {
        display: block;
        text-decoration: none;
        color: inherit;
        padding: 14px;
        border-radius: 16px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.08);
    }

    .audit-mobile-card-top {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .audit-mobile-card-top strong {
        line-height: 1.25;
    }

    .audit-mobile-meta {
        display: grid;
        gap: 4px;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 12px;
    }

    .audit-mobile-score {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .audit-mobile-score span {
        color: var(--muted);
    }

    .audit-mobile-score strong {
        font-size: 24px;
        color: var(--accent);
    }
}

/* Mobile compact audit filters */
.mobile-filter-panel {
    margin: 12px 0;
}

.mobile-filter-panel summary {
    display: none;
}

@media (max-width: 820px) {
    .mobile-filter-panel {
        border-radius: 16px;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.08);
        overflow: hidden;
    }

    .mobile-filter-panel summary {
        display: block;
        cursor: pointer;
        padding: 13px 14px;
        font-weight: 900;
    }

    .mobile-filter-panel summary::after {
        content: "＋";
        float: right;
        color: var(--muted);
    }

    .mobile-filter-panel[open] summary::after {
        content: "−";
    }

    .mobile-filter-panel:not([open]) .audit-filters {
        display: none !important;
    }

    .mobile-filter-panel .audit-filters {
        padding: 12px;
        margin: 0 !important;
    }
}

/* Mobile dashboard: compact risk and CAPA sections */
@media (max-width: 820px) {
    .mobile-collapsible-body table tr:nth-child(n+5) {
        display: none;
    }

    .mobile-collapsible-body h3 + .table-wrap table tr:nth-child(n+7) {
        display: none;
    }
}

/* Score tabs */
.score-tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.score-tab {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: inherit;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
    cursor: pointer;
}

.score-tab.active {
    background: #8fd694;
    color: #071009;
    border-color: #8fd694;
}

.score-tab-panel {
    display: none;
}

.score-tab-panel.active {
    display: block;
}

@media (min-width: 821px) {
    .score-tab-buttons {
        display: none;
    }

    .score-tab-panel {
        display: block;
    }

    .score-tabs {
        display: grid;
        gap: 16px;
    }
}

@media (max-width: 820px) {
    .score-tab-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .score-tab {
        width: 100%;
        text-align: center;
        padding: 10px 8px;
    }
}

/* KPI tabs on mobile */
.kpi-tab-buttons {
    display: none;
}

@media (max-width: 820px) {
    .kpi-tabs {
        width: 100%;
    }

    .kpi-tab-buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }

    .kpi-tab {
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.06);
        color: inherit;
        border-radius: 999px;
        padding: 10px 8px;
        font-weight: 800;
        font-size: 13px;
        cursor: pointer;
        text-align: center;
    }

    .kpi-tab.active {
        background: #8fd694;
        color: #071009;
        border-color: #8fd694;
    }

    .kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    .kpi-tab-panel {
        display: none !important;
    }

    .kpi-tab-panel.active {
        display: block !important;
    }

    .kpi-tab-panel {
        width: 100%;
        min-width: 0 !important;
    }
}

@media (min-width: 821px) {
    .kpi-tab-panel {
        display: block !important;
    }
}

/* Dashboard actions: mobiel in hamburger menu */
.mobile-only-nav {
    display: none !important;
}

@media (max-width: 820px) {
    .dashboard-mobile-hide {
        display: none !important;
    }

    .mobile-only-nav {
        display: flex !important;
    }

    .dashboard-top-actions {
        width: 100%;
    }

    .dashboard-top-actions .btn:not(.dashboard-mobile-hide) {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 821px) {
    .mobile-only-nav {
        display: none !important;
    }
}

/* Mobile CAPA cards */
.capa-mobile-cards {
    display: none;
}

@media (max-width: 820px) {
    .capa-desktop-table {
        display: none;
    }

    .capa-mobile-cards {
        display: grid;
        gap: 12px;
        margin-top: 4px;
    }

    .capa-mobile-card {
        display: block;
        text-decoration: none;
        color: inherit;
        padding: 14px;
        border-radius: 16px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.08);
    }

    .capa-mobile-card-top {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .capa-mobile-card-top strong {
        line-height: 1.25;
    }

    .capa-mobile-meta {
        display: grid;
        gap: 5px;
        color: var(--muted);
        font-size: 14px;
    }
}

/* Audit detail CAPA mobile cards */
.audit-capa-mobile-cards {
    display: none;
}

@media (max-width: 820px) {
    .audit-capa-desktop-table {
        display: none;
    }

    .audit-capa-mobile-cards {
        display: grid;
        gap: 12px;
        margin-top: 14px;
    }

    .audit-capa-mobile-card {
        padding: 14px;
        border-radius: 16px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.08);
    }

    .audit-capa-mobile-form {
        display: grid;
        gap: 10px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .audit-capa-mobile-form input,
    .audit-capa-mobile-form select,
    .audit-capa-mobile-form button {
        width: 100%;
    }
}

/* Audit detail mobile optimization */
.audit-actions-mobile {
    display: none;
}

.audit-kpi-tab-buttons {
    display: none;
}

.timeline-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

@media (max-width: 820px) {
    .audit-actions-desktop {
        display: none;
    }

    .audit-actions-mobile {
        display: block;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--border);
        overflow: hidden;
    }

    .audit-actions-mobile summary {
        cursor: pointer;
        padding: 13px 14px;
        font-weight: 900;
        list-style: none;
    }

    .audit-actions-mobile summary::-webkit-details-marker {
        display: none;
    }

    .audit-actions-mobile summary::after {
        content: "＋";
        float: right;
        color: var(--muted);
    }

    .audit-actions-mobile[open] summary::after {
        content: "−";
    }

    .audit-actions-mobile a {
        display: block;
        padding: 12px 14px;
        text-decoration: none;
        color: inherit;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .audit-kpi-tab-buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }

    .audit-kpi-tab {
        border: 1px solid var(--border);
        background: #fff;
        color: var(--muted);
        border-radius: 999px;
        padding: 10px 8px;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        text-align: center;
    }

    .audit-kpi-tab.active {
        background: var(--indigo);
        color: #fff;
        border-color: var(--indigo);
    }

    .audit-summary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .audit-kpi-panel {
        display: none !important;
    }

    .audit-kpi-panel.active {
        display: block !important;
    }

    .audit-info-compact {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .audit-info-compact > div {
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255,255,255,.045);
    }

    .audit-info-compact strong {
        display: block;
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 3px;
    }

    .timeline-item {
        display: grid;
        grid-template-columns: 36px 1fr;
        gap: 10px;
        align-items: start;
    }
}

@media (min-width: 821px) {
    .audit-kpi-panel {
        display: block !important;
    }
}

/* Auditformulier mobiel */
@media (max-width: 768px) {
    body {
        padding-bottom: 92px;
    }

    .mobile-save-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 12px;
        background: #fff;
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
        margin: 0;
    }

    .mobile-bar-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        width: 100%;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
        padding: 10px 8px;
        margin: 0;
        white-space: nowrap;
        box-shadow: none;
    }

    .mobile-save-main {
        background: var(--indigo);
        border-color: var(--indigo);
        color: #fff;
    }

    .category-nav {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-save-bar {
        margin-top: 1rem;
    }

    .mobile-cat-prev,
    .mobile-cat-next {
        display: none !important;
    }

    .category-nav {
        display: none !important;
    }
}


.photo-input {
    display: none;
}

.photo-upload-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    margin-bottom: 6px;
}

.photo-upload-btn:hover {
    border-color: var(--indigo);
    color: var(--indigo);
}

/* Auditformulier mobile question cards */
@media (max-width: 768px) {
    .audit-category .table-wrap {
        overflow: visible !important;
        width: 100%;
    }

    .audit-category table,
    .audit-category tbody,
    .audit-category tr,
    .audit-category td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .audit-category table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .audit-category th {
        display: none !important;
    }

    .audit-category tr {
        background: #ffffff;
        border: 1px solid var(--border, #E2E8F0);
        border-radius: 18px;
        padding: 14px;
        margin: 0 0 14px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        overflow: hidden;
    }

    .audit-category td {
        border: 0 !important;
        padding: 8px 0 !important;
        color: var(--navy2, #1A1F2E);
        overflow-wrap: anywhere;
    }

    .audit-category td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 800;
        color: var(--muted, #64748B);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .audit-category td[data-label="#"] {
        font-size: 13px;
        font-weight: 800;
        color: var(--muted, #64748B);
        padding-bottom: 2px !important;
    }

    .audit-category td[data-label="#"]::before {
        display: none;
    }

    .audit-category .question-cell {
        font-size: 16px;
        font-weight: 800;
        color: var(--navy2, #1A1F2E);
        line-height: 1.4;
    }

    .audit-category .norm-cell {
        background: var(--bg, #F8FAFC);
        border-radius: 12px;
        padding: 10px !important;
        margin: 6px 0;
        color: var(--muted, #64748B);
    }

    .audit-category select,
    .audit-category textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px;
        box-sizing: border-box;
        background: #ffffff;
        color: var(--navy2, #1A1F2E);
        border: 1.5px solid var(--border, #E2E8F0);
        border-radius: 12px;
    }

    .audit-category textarea {
        min-height: 80px;
    }

    .audit-category .photo-upload-btn {
        width: 100%;
        box-sizing: border-box;
    }
}


/* Auditformulier mobile cards compact fix */
@media (max-width: 768px) {
    .audit-category .table-wrap {
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .audit-category table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .audit-category tbody {
        width: 100% !important;
    }

    .audit-category tr {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin: 0 0 12px 0 !important;
        border-radius: 16px !important;
    }

    .audit-category td {
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 0 !important;
        font-size: 14px;
    }

    .audit-category .question-cell {
        font-size: 15px !important;
        line-height: 1.35 !important;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .audit-category .norm-cell {
        padding: 9px !important;
        font-size: 14px;
    }

    .audit-category td::before {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .audit-category select,
    .audit-category textarea {
        font-size: 15px !important;
        min-height: 44px;
    }

    .audit-category textarea {
        min-height: 72px !important;
    }
}


/* Auditformulier mobile textarea visibility fix */
@media (max-width: 768px) {
    .audit-category tr {
        overflow: visible !important;
    }

    .audit-category td[data-label="Opmerking"] {
        padding-bottom: 14px !important;
    }

    .audit-category textarea {
        display: block;
        width: 100% !important;
        min-height: 90px !important;
        height: 90px;
        resize: vertical;
        box-sizing: border-box;
        margin-bottom: 4px;
    }
}


/* Auditformulier mobile card clipping hard fix */
@media (max-width: 768px) {
    .audit-category,
    .audit-category[open],
    .audit-category .table-wrap,
    .audit-category table,
    .audit-category tbody,
    .audit-category tr,
    .audit-category td {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .audit-category tr {
        padding-bottom: 20px !important;
        margin-bottom: 16px !important;
    }

    .audit-category td[data-label="Opmerking"] {
        display: block !important;
        padding-bottom: 22px !important;
        margin-bottom: 8px !important;
    }

    .audit-category td[data-label="Opmerking"] textarea {
        display: block !important;
        min-height: 110px !important;
        height: 110px !important;
        margin-bottom: 12px !important;
    }
}


/* Auditformulier mobile hide table header row */
@media (max-width: 768px) {
    .audit-category .audit-table-header {
        display: none !important;
    }

    .audit-category summary {
        border-radius: 16px !important;
        overflow: hidden;
    }
}


/* Auditdetail header/menu position fix */
.audit-detail-actions,
.audit-actions-desktop,
.audit-actions-mobile,
.audit-kpi-tabs,
.audit-kpi-tab-buttons {
    position: static !important;
    float: none !important;
}

@media (min-width: 901px) {
    .content > .topbar {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 20px !important;
        margin-bottom: 28px !important;
    }

    .audit-detail-actions {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .audit-actions-desktop {
        display: flex !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .audit-actions-mobile {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .content > .topbar {
        display: block !important;
        margin-bottom: 20px !important;
    }

    .audit-detail-actions {
        margin-top: 12px !important;
        width: 100% !important;
    }

    .audit-actions-desktop {
        display: none !important;
    }

    .audit-actions-mobile {
        display: block !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    .audit-actions-mobile summary {
        width: fit-content !important;
    }

    .audit-kpi-tabs {
        margin-top: 16px !important;
        clear: both !important;
    }

    .audit-kpi-tab-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }
}


/* Auditdetail topbar hard layout fix */
.audit-detail-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 20px !important;
    position: static !important;
    overflow: visible !important;
}

.audit-detail-title {
    min-width: 0 !important;
    position: static !important;
}

.audit-detail-actions {
    position: static !important;
    align-self: start !important;
    justify-self: end !important;
    margin: 0 !important;
    width: auto !important;
    z-index: auto !important;
}

.audit-actions-desktop {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

.audit-actions-mobile {
    position: static !important;
    z-index: auto !important;
}

.audit-kpi-tabs {
    position: static !important;
    clear: both !important;
}

@media (max-width: 820px) {
    .audit-detail-topbar {
        display: block !important;
    }

    .audit-detail-actions {
        width: 100% !important;
        margin-top: 12px !important;
    }

    .audit-actions-desktop {
        display: none !important;
    }

    .audit-actions-mobile {
        display: block !important;
        width: 100% !important;
    }
}

/* Auditdetail alle antwoorden mobiel details-list */
.audit-answers-mobile {
    display: none;
}

@media (max-width: 820px) {
    .audit-answers-desktop {
        display: none !important;
    }

    .audit-answers-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    /* ── Antwoord card ── */
    .answer-mobile-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        overflow: hidden;
    }

    /* Kleurstrook links: Ja = groen, Nee = rood, nvt/leeg = grijs */
    .answer-mobile-card.ans-ja  { border-left: 4px solid #22C55E; }
    .answer-mobile-card.ans-nee { border-left: 4px solid #EF4444; }
    .answer-mobile-card.ans-nvt { border-left: 4px solid var(--border); }

    /* Summary = altijd zichtbaar, gesloten staat */
    .answer-mobile-card summary {
        list-style: none;
        cursor: pointer;
        padding: 11px 13px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: start;
        -webkit-user-select: none;
        user-select: none;
    }

    .answer-mobile-card summary::-webkit-details-marker { display: none; }

    /* Categorie-label */
    .answer-mobile-card summary strong {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted);
        margin-bottom: 3px;
    }

    /* Vraagtekst */
    .answer-mobile-card summary em {
        display: block;
        font-style: normal;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--navy);
        overflow-wrap: anywhere;
    }

    /* Antwoord-badge rechts */
    .answer-mobile-card summary b {
        display: inline-block;
        border-radius: 99px;
        padding: 3px 10px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
        background: var(--bg);
        color: var(--muted);
        border: 1px solid var(--border);
        margin-top: 1px;
    }
    .answer-mobile-card summary b.ok {
        background: rgba(34,197,94,.1);
        color: #15803D;
        border-color: rgba(34,197,94,.3);
    }
    .answer-mobile-card summary b.danger {
        background: rgba(239,68,68,.1);
        color: #B91C1C;
        border-color: rgba(239,68,68,.3);
    }

    /* Chevron indicator open/gesloten */
    .answer-mobile-card summary::after {
        content: none;
    }
    .answer-mobile-card[open] summary em {
        color: var(--indigo);
    }

    /* Detail velden (richtlijn, opmerking, foto's) */
    .answer-mobile-field {
        border-top: 1px solid var(--border);
        padding: 10px 13px;
        background: var(--bg);
    }

    .answer-mobile-field label {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted);
        margin-bottom: 4px;
    }

    .answer-mobile-field p {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text);
        overflow-wrap: anywhere;
    }

    .answer-mobile-photos {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 2px;
    }

    .answer-mobile-photos .thumb {
        width: 72px;
        height: 56px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid var(--border);
    }
}

@media (min-width: 821px) {
    .audit-answers-desktop {
        display: block;
    }
}


.status-card {
    padding: 18px;
    border-radius: 18px;
}

.status-success {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
}

.signature-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 16px;
    margin-top: 14px;
}

.signature-summary p {
    margin: 0;
}


.status-warning {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    margin-bottom: 16px;
}

/* ── Audit detail dark mode ── */
[data-theme="dark"] .metric-card {
    background: #1E293B;
    border-color: #334155;
}
[data-theme="dark"] .metric-value { color: #E2E8F0; }
[data-theme="dark"] .metric-label,
[data-theme="dark"] .metric-sub { color: #64748B; }
[data-theme="dark"] .finding-card {
    background: #1C0A0A;
    border-color: #7F1D1D;
}
[data-theme="dark"] .finding-question { color: #F1F5F9; }
[data-theme="dark"] .danger-pill {
    background: #450A0A;
    color: #FCA5A5;
    border-color: #7F1D1D;
}
[data-theme="dark"] .audit-detail-section summary {
    background: #1E293B;
    border-color: #334155;
    color: #E2E8F0;
}
[data-theme="dark"] .status-success {
    background: #052E16;
    border-color: #166534;
}
[data-theme="dark"] .status-success h3 { color: #4ADE80; }
[data-theme="dark"] .status-success p,
[data-theme="dark"] .status-success strong { color: #86EFAC; }
[data-theme="dark"] .status-warning {
    background: #1C1A06;
    border-color: #713F12;
}
[data-theme="dark"] .status-warning h3 { color: #FCD34D; }
[data-theme="dark"] .status-warning p { color: #D97706; }
[data-theme="dark"] .audit-actions-mobile {
    background: #1E293B;
    border-color: #334155;
}
[data-theme="dark"] .audit-kpi-tab {
    background: #1E293B;
    border-color: #334155;
    color: #64748B;
}
[data-theme="dark"] .audit-kpi-tab.active {
    background: var(--indigo);
    color: #fff;
    border-color: var(--indigo);
}

.signature-form {
    display: block !important;
    margin-top: 12px;
}


/* Dashboard onboarding */
.onboarding-card {
    margin-bottom: 24px;
    border: 1px solid rgba(143,214,148,.25);
    background: linear-gradient(135deg, rgba(143,214,148,.08), rgba(143,214,148,.03));
}

.onboarding-card h2 {
    margin-top: 0;
}

.onboarding-steps {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.onboarding-steps div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
}

.onboarding-steps span {
    color: var(--muted);
}

.onboarding-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* Auditorganisatie dossier mobile v3.1 */
.auditorg-mobile-cards {
    display: none;
}

@media (max-width: 820px) {
    .auditorg-mobile-page .topbar {
        display: block;
    }

    .auditorg-mobile-page .topbar .btn {
        width: 100%;
        margin-top: 8px;
        text-align: center;
    }

    .auditorg-mobile-page .grid-2 {
        display: block;
    }

    .auditorg-mobile-page .card {
        margin-bottom: 14px;
    }

    .auditorg-kpi-scroll {
        display: flex !important;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    .auditorg-kpi-scroll .kpi {
        min-width: 155px;
        flex: 0 0 155px;
        scroll-snap-align: start;
        padding: 14px;
    }

    .auditorg-kpi-scroll .kpi h3 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .auditorg-kpi-scroll .metric {
        font-size: 24px;
    }

    .auditorg-mobile-page h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .auditorg-mobile-page .table-wrap table {
        display: none;
    }

    .auditorg-mobile-cards {
        display: grid;
        gap: 12px;
    }

    .auditorg-mobile-card {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255,255,255,0.03);
        padding: 14px;
    }

    .auditorg-card-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .auditorg-card-head strong {
        font-size: 16px;
        line-height: 1.25;
    }

    .auditorg-card-head span {
        font-weight: 900;
        font-size: 18px;
        color: var(--green);
        white-space: nowrap;
    }

    .auditorg-card-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 12px;
    }

    .auditorg-mobile-card .btn {
        width: 100%;
        text-align: center;
        padding: 10px 12px;
    }

    .auditorg-planning-card .kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .auditorg-planning-card .kpi {
        padding: 12px;
        min-height: auto;
    }

    .auditorg-planning-card .kpi h3 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .auditorg-planning-card .metric {
        font-size: 22px;
    }

    .auditorg-mobile-page .trend {
        overflow-x: auto;
        height: 145px;
        gap: 8px;
    }

    .auditorg-mobile-page .trendbar {
        min-width: 24px;
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    .auditorg-card-meta {
        grid-template-columns: 1fr;
    }

    .auditorg-kpi-scroll .kpi {
        min-width: 140px;
        flex-basis: 140px;
    }
}


/* Auditorganisatie dossier mobile v3.2 */
@media (max-width: 820px) {
    .auditorg-card-meta-single {
        grid-template-columns: 1fr !important;
    }

    .auditorg-mobile-details {
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 12px;
        background: rgba(255,255,255,0.03);
    }

    .auditorg-mobile-details summary {
        cursor: pointer;
        font-weight: 900;
        margin-bottom: 10px;
    }

    .auditorg-mobile-details .auditorg-mobile-card {
        margin-top: 10px;
    }
}


/* Auditorganisatie KPI swipe fix */
@media (max-width: 820px) {
    .auditorg-mobile-page .auditorg-kpi-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 2px 4px 12px 2px;
        margin-left: -2px;
        margin-right: -2px;
        max-width: 100%;
    }

    .auditorg-mobile-page .auditorg-kpi-scroll > .card.kpi {
        flex: 0 0 72% !important;
        min-width: 72% !important;
        max-width: 72% !important;
        scroll-snap-align: start;
    }

    .auditorg-mobile-page .auditorg-kpi-scroll::-webkit-scrollbar {
        display: none;
    }

    .auditorg-mobile-page .auditorg-kpi-scroll {
        scrollbar-width: none;
    }
}

@media (max-width: 420px) {
    .auditorg-mobile-page .auditorg-kpi-scroll > .card.kpi {
        flex-basis: 82% !important;
        min-width: 82% !important;
        max-width: 82% !important;
    }
}


.nav-section{
    margin-top:18px;
    margin-bottom:6px;
    padding:0 10px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    opacity:.8;
}


/* Mobile sidebar section layout fix */
@media (max-width: 900px) {
    .sidebar.open .nav,
    .sidebar .nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .sidebar .nav-section {
        width: 100%;
        margin: 18px 0 4px 0;
        padding: 10px 0 6px;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 11px;
        font-weight: 950;
        letter-spacing: .11em;
        text-transform: uppercase;
        opacity: .9;
    }

    .sidebar .nav-section:first-of-type {
        margin-top: 10px;
        border-top: 0;
    }

    .sidebar .nav a {
        width: 100%;
        box-sizing: border-box;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding: 10px 12px !important;
        border-radius: 10px;
        background: rgba(255,255,255,0.025);
    }

    .sidebar .nav a.primary {
        justify-content: center;
        margin-bottom: 6px;
    }

    .sidebar .nav a .pill {
        margin-left: 8px;
    }
}


/* Mobile sidebar primary audit button */
@media (max-width: 900px) {
    .sidebar .nav a.primary {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        min-height: 48px;
        margin: 6px 0 12px 0;
        background: linear-gradient(135deg, #0D9488, #0891B2) !important;
        color: #fff !important;
        font-weight: 700;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(13,148,136,.3);
    }
}


/* ===== Audito Scrollbar ===== */

html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--green) 45%, transparent) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--green) 45%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--green) 75%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Sidebar iets subtieler */
.sidebar {
    scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

/* Login SaaS polish v1 */
body.login-page .content > .login-wrap.card {
    width: min(760px, calc(100vw - 32px));
}

.login-wrap {
    max-width: 760px !important;
    padding: 38px 44px !important;
}

.login-brand {
    gap: 18px;
    margin-bottom: 26px;
}

.login-brand-icon {
    width: 88px !important;
    height: 88px !important;
    border-radius: 24px;
}

.login-brand-title {
    font-size: 42px !important;
    letter-spacing: -1.4px;
}

.login-brand-sub {
    font-size: 16px;
    max-width: 360px;
}

.login-wrap .login-subtitle {
    margin-top: 8px;
    font-size: 30px;
}

.login-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

.login-benefits span {
    border: 1px solid rgba(190,255,120,.18);
    background: rgba(190,255,120,.08);
    color: #d9ffb0;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 700;
}

.login-wrap form button[type="submit"],
.login-wrap form .btn.secondary {
    width: 100%;
    justify-content: center;
    margin-right: 0;
}

.login-wrap form .btn.secondary {
    margin-top: 8px;
}

@media(max-width:650px){
    .login-wrap {
        max-width: 92vw !important;
        padding: 26px !important;
    }

    .login-brand-icon {
        width: 76px !important;
        height: 76px !important;
    }

    .login-brand-title {
        font-size: 36px !important;
    }

    .login-benefits {
        gap: 6px;
    }
}

/* Mobiel: voorkom onbedoeld dubbel-tap zoom en houd formulieren stabiel */
html,
body {
    touch-action: manipulation;
}

@media(max-width:900px){
    input,
    textarea,
    select,
    button {
        font-size: 16px;
    }
}

/* Superadmin dashboard mobile cards */
.superadmin-trial-mobile,
.superadmin-capa-mobile {
    display: none;
}

@media (max-width: 820px) {
    .superadmin-dashboard .split {
        grid-template-columns: 1fr !important;
    }

    .superadmin-trial-desktop,
    .superadmin-capa-desktop {
        display: none;
    }

    .superadmin-trial-mobile,
    .superadmin-capa-mobile {
        display: grid;
        gap: 12px;
        margin-top: 14px;
    }

    .superadmin-mobile-card {
        padding: 14px;
        border-radius: 16px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.08);
        min-width: 0;
    }

    .superadmin-mobile-card strong {
        display: block;
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .superadmin-mobile-meta {
        display: grid;
        gap: 5px;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 10px;
        overflow-wrap: anywhere;
    }

    .superadmin-mobile-card .btn,
    .superadmin-mobile-card button {
        width: 100%;
        justify-content: center;
    }
}

/* Filterformulier reset-link exact gelijk aan filterknop */
.filter-form .btn.secondary {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    margin-top: 24px;
    box-sizing: border-box;
    line-height: 1;
}

@media (min-width: 901px) { .hide-on-desktop { display: none !important; } }

/* ── Helpcentrum — hulpkleur losgekoppeld van brand-accent ── */
:root { --help-blue: #2563EB; --help-blue-10: rgba(37,99,235,.10); --help-blue-06: rgba(37,99,235,.06); }

.help-hero { text-align: center; padding: 2.5rem 1rem 2rem; margin-bottom: .5rem; overflow: visible; }
.help-hero-title { font-size: 1.75rem; font-weight: 700; color: var(--text); margin: 0 0 .5rem; letter-spacing: -.02em; }
.help-hero-sub { font-size: 15px; color: var(--muted); margin: 0 0 1.75rem; }
.help-search-wrap { position: relative; margin: 0 auto; max-width: 640px; overflow: visible; }
.help-searchbar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 28px; padding: 12px 16px 12px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.help-searchbar > svg { flex-shrink: 0; color: var(--muted); }
.help-searchbar input { flex: 1; border: none; background: transparent; font-size: 15px; color: var(--text); outline: none !important; min-width: 0; margin: 0; padding: 0; }
#help-q:focus { outline: none !important; box-shadow: none !important; }
#help-q:focus::placeholder { color: transparent; }
.help-searchbar input::placeholder { color: var(--muted); }
/* Clear-knop: hoge specificiteit zodat globale button-stijl niet wint */
.help-searchbar .help-search-clear { all: unset; flex-shrink: 0; display: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; color: var(--muted); background: transparent; transition: color 150ms, background 150ms; }
.help-searchbar .help-search-clear:hover { color: var(--text); background: var(--bg); }
.help-searchbar .help-search-clear.visible { display: flex; }
.help-autocomplete { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; z-index: 9999; display: none; box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06); overflow: hidden; }
.help-autocomplete-section { padding: 8px 0 4px; }
.help-autocomplete-section:not(:first-child) { border-top: 1px solid var(--border); }
.help-autocomplete-section-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 16px 4px; display: block; }
.help-autocomplete-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px; color: var(--text); text-decoration: none; transition: background 100ms; cursor: pointer; }
.help-autocomplete-item:hover, .help-autocomplete-item.ac-active { background: var(--help-blue-06); }
.help-autocomplete-item .ac-icon { color: var(--muted); flex-shrink: 0; line-height: 0; }
.help-autocomplete-item .ac-title { flex: 1; }
.help-autocomplete-item .ac-cat { font-size: 11px; color: var(--muted); flex-shrink: 0; background: var(--bg); border-radius: 6px; padding: 1px 7px; }
.help-autocomplete-footer { padding: 8px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; gap: 6px; }
.help-autocomplete-footer kbd { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 11px; font-family: inherit; color: var(--muted); }

.help-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 12px; }

.help-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 2rem; }
.help-cat-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--text); transition: border-color 200ms, background 200ms; cursor: pointer; }
.help-cat-card:hover { border-color: var(--help-blue); background: var(--bg); }
.help-cat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.help-cat-blue  .help-cat-icon { background: #DBEAFE; color: #1D4ED8; }
.help-cat-green .help-cat-icon { background: #D1FAE5; color: #065F46; }
.help-cat-purple .help-cat-icon { background: #EDE9FE; color: #6D28D9; }
.help-cat-amber .help-cat-icon { background: #FEF3C7; color: #92400E; }
.help-cat-coral .help-cat-icon { background: #FEE2E2; color: #991B1B; }
.help-cat-slate .help-cat-icon { background: #F1F5F9; color: #475569; }
.help-cat-label { font-size: 14px; font-weight: 600; color: var(--text); }
.help-cat-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.help-cat-arrow { margin-left: auto; color: var(--muted); flex-shrink: 0; }

.help-article-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2rem; }
.help-article-list--full { gap: 8px; }
.help-article-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--text); transition: background 150ms; }
.help-article-item:hover { background: var(--bg); }
.help-article-item--card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; align-items: flex-start; }
.help-article-item--card:hover { border-color: var(--help-blue); background: var(--bg); }
.help-article-icon-wrap { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted); margin-top: 1px; }
.help-article-titel { font-size: 14px; color: var(--text); flex: 1; }
.help-article-preview { font-size: 13px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-article-cat { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.help-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.help-badge-nieuw    { background: #DBEAFE; color: #1D4ED8; }
.help-badge-video    { background: #EDE9FE; color: #6D28D9; }
.help-badge-populair { background: #D1FAE5; color: #065F46; }

.help-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.help-empty svg { opacity: .4; }
.help-empty p { margin: 0; font-size: 15px; color: var(--text); }
.help-empty-sub { font-size: 13px; color: var(--muted) !important; }

/* Artikel pagina */
.help-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 1.5rem; }
.help-breadcrumb a { color: var(--muted); text-decoration: none; }
.help-breadcrumb a:hover { color: var(--help-blue); }
.help-breadcrumb span { color: var(--text); }

.help-artikel-layout { display: grid; grid-template-columns: 1fr 240px; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .help-artikel-layout { grid-template-columns: 1fr; } .help-sidebar { order: -1; } }

.help-artikel-titel { font-size: 26px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.help-artikel-meta  { font-size: 13px; color: var(--muted); margin: 0 0 1.5rem; }

.help-video-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: var(--bg); margin-bottom: 1.75rem; border: 1px solid var(--border); }
.help-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.help-intro { font-size: 15px; color: var(--sub); line-height: 1.7; margin: 0 0 1.75rem; }

.help-stappen { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
.help-stap { display: flex; gap: 14px; }
.help-stap-num { width: 28px; height: 28px; border-radius: 50%; background: var(--help-blue); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.help-stap-body { flex: 1; }
.help-stap-titel { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--text); }
.help-stap-tekst { font-size: 14px; color: var(--sub); line-height: 1.65; margin: 0; }
.help-stap-tekst a, .help-vrije-tekst a, .help-intro a { color: var(--help-blue); text-decoration: underline; text-underline-offset: 2px; }
.help-stap-tekst a:hover, .help-vrije-tekst a:hover, .help-intro a:hover { opacity: .8; }
.help-stap-screenshot { width: 100%; border-radius: 8px; margin-top: 10px; border: 1px solid var(--border); }
.help-waarschuwing { display: flex; align-items: flex-start; gap: 8px; background: #FEF9C3; border: 1px solid #FDE047; border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 13px; color: #78350F; }
[data-theme="dark"] .help-waarschuwing { background: #422006; border-color: #78350F; color: #FDE047; }

.help-subsectie-titel { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 10px; }
.help-screenshot-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 1.75rem; }
.help-screenshot-thumb { flex-shrink: 0; width: 160px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; overflow: hidden; text-align: left; padding: 0; transition: border-color 200ms; }
.help-screenshot-thumb:hover { border-color: var(--help-blue); }
.help-screenshot-thumb img { width: 100%; height: 90px; object-fit: cover; display: block; }
.help-screenshot-label { display: block; font-size: 11px; color: var(--muted); padding: 6px 8px; }

.help-vrije-tekst { font-size: 14px; line-height: 1.75; color: var(--sub); margin-bottom: 1.75rem; }
.help-vrije-tekst h2 { font-size: 17px; font-weight: 700; margin: 1.5rem 0 .75rem; color: var(--text); }
.help-vrije-tekst code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 13px; }

.help-nuttig-bar { display: flex; align-items: center; gap: 12px; padding: 1.25rem 0 0; border-top: 1px solid var(--border); margin-top: 1.75rem; font-size: 13px; color: var(--muted); }
.help-nuttig-btns { display: flex; gap: 8px; }
.help-nuttig-btns button { all: unset; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; cursor: pointer; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color 150ms, background 150ms; }
.help-nuttig-btns button:hover { border-color: var(--help-blue); background: var(--bg); }

/* Sidebar */
.help-sidebar { position: sticky; top: 24px; }
.help-sidebar-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; }
.help-related-list { display: flex; flex-direction: column; gap: 2px; }
.help-related-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; color: var(--sub); text-decoration: none; transition: background 150ms; line-height: 1.5; }
.help-related-item:hover { background: var(--bg); color: var(--text); }
.help-toc { padding-left: 16px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.help-toc a { font-size: 12px; color: var(--muted); text-decoration: none; }
.help-toc a:hover { color: var(--help-blue); }

/* Lightbox */
.help-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.help-lightbox[hidden] { display: none; }
.help-lightbox-close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,.15); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 150ms; }
.help-lightbox-close:hover { background: rgba(255,255,255,.3); }
.help-lightbox-img { max-width: 100%; max-height: 80vh; border-radius: 8px; object-fit: contain; }
.help-lightbox-caption { color: rgba(255,255,255,.7); font-size: 13px; margin-top: 12px; }

/* Contextuele help tooltip */
.help-tooltip-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 200ms, color 200ms; vertical-align: middle; margin-left: 6px; }
.help-tooltip-btn:hover { border-color: var(--help-blue); color: var(--help-blue); }
.help-tooltip-popup { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--sub); line-height: 1.6; box-shadow: 0 4px 16px rgba(0,0,0,.1); max-width: 280px; z-index: 50; }
.help-tooltip-popup strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 4px; }
.help-tooltip-popup a { color: var(--help-blue); text-decoration: none; font-size: 12px; }

/* Contextueel zijpaneel */
.help-context-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.help-context-panel .help-context-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.help-context-panel p { font-size: 13px; color: var(--sub); line-height: 1.65; margin: 0 0 10px; }
.help-context-panel a.help-context-link { font-size: 12px; color: var(--help-blue); text-decoration: none; display: flex; align-items: center; gap: 4px; }

/* Gidsmodus */
.help-gids-bar { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--help-blue); border-radius: 0 10px 10px 0; padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; }
.help-gids-tekst { flex: 1; font-size: 13px; color: var(--sub); line-height: 1.6; }
.help-gids-tekst strong { color: var(--text); display: block; margin-bottom: 2px; }
.help-gids-btns { display: flex; gap: 6px; flex-shrink: 0; }

/* Dark-mode aanpassingen helpcentrum */
[data-theme="dark"] .help-cat-blue .help-cat-icon   { background: #1e3a5f; color: #60A5FA; }
[data-theme="dark"] .help-cat-green .help-cat-icon  { background: #064E3B; color: #34D399; }
[data-theme="dark"] .help-cat-purple .help-cat-icon { background: #3b0764; color: #C084FC; }
[data-theme="dark"] .help-cat-amber .help-cat-icon  { background: #451a03; color: #FCD34D; }
[data-theme="dark"] .help-cat-coral .help-cat-icon  { background: #450a0a; color: #FCA5A5; }
[data-theme="dark"] .help-cat-slate .help-cat-icon  { background: #1e293b; color: #94A3B8; }
[data-theme="dark"] .help-badge-nieuw    { background: #1e3a5f; color: #60A5FA; }
[data-theme="dark"] .help-badge-video    { background: #3b0764; color: #C084FC; }
[data-theme="dark"] .help-badge-populair { background: #064E3B; color: #34D399; }


/* ── Onboarding wizard (shared, used outside dashboard too) ── */
.db-onboarding {
  background: linear-gradient(135deg, #EEF2FF 0%, #F0FDFA 100%);
  border: 1px solid #C7D2FE;
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.db-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.db-ob-step {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #94A3B8;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.db-ob-step-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #94A3B8;
  flex-shrink: 0;
}
.db-ob-step.active { border-color: #C7D2FE; background: #EEF2FF; color: #4F46E5; }
.db-ob-step.active .db-ob-step-num { background: #4F46E5; border-color: #4F46E5; color: #fff; }
.db-ob-step.done { border-color: #A7F3D0; background: #ECFDF5; color: #059669; }
.db-ob-step.done .db-ob-step-num { background: #D1FAE5; border-color: #A7F3D0; color: #059669; }
.db-ob-step strong { display: block; font-weight: 700; margin-bottom: 2px; color: inherit; }
.db-onboarding h2 { font-size: 20px; font-weight: 800; color: #0F172A; letter-spacing: -.02em; margin: 0 0 8px; }
.db-onboarding p { font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 10px; }
.db-onboarding .db-muted { color: #94A3B8; }
@media (max-width: 600px) {
  .db-onboarding-steps { grid-template-columns: 1fr 1fr; }
}
[data-theme="dark"] .db-onboarding { background: linear-gradient(135deg, #1e1b4b33 0%, #042F2E 100%); border-color: #334155; }
[data-theme="dark"] .db-onboarding h2 { color: #F1F5F9; }
[data-theme="dark"] .db-ob-step { background: #1E293B !important; border-color: #334155 !important; color: #94A3B8 !important; }
.db-onboarding-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.db-btn-ghost-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 500;
  border: 1px solid #E2E8F0; color: #64748B; background: #fff;
  text-decoration: none; transition: all .15s;
}
.db-btn-ghost-sm:hover { border-color: #94A3B8; color: #475569; background: #F8FAFC; }
[data-theme="dark"] .db-btn-ghost-sm { border-color: #334155; color: #64748B; background: #1E293B; }
[data-theme="dark"] .db-btn-ghost-sm:hover { border-color: #475569; color: #94A3B8; background: #253348; }

/* ── Template versie tijdlijn ── */
.version-timeline { padding: 8px 0; }
.version-row {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.version-row:last-child { border-bottom: none; }
.version-row--active { background: var(--color-status-active-bg); }
.version-row--concept { background: var(--color-status-concept-bg); }
.version-indicator { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.version-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid;
  flex-shrink: 0;
}
.dot-active { background: var(--color-status-active); border-color: var(--color-status-active-border); }
.dot-concept { background: var(--color-status-concept); border-color: var(--color-status-concept-border); }
.dot-hist { background: var(--color-status-hist); border-color: var(--color-status-hist-border); }
.version-line { width: 2px; flex: 1; background: var(--border); margin: 4px 0; min-height: 20px; }
.version-content { flex: 1; }
.version-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.version-num { font-size: 15px; font-weight: 700; color: var(--navy); margin-right: 8px; }
.version-meta { display: flex; gap: 16px; font-size: 12px; color: var(--sub); flex-wrap: wrap; }
.version-changes { margin-top: 8px; font-size: 13px; color: var(--navy); background: rgba(0,0,0,.03); border-radius: 8px; padding: 8px 12px; }
.stat-chip { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;font-size:13px;font-weight:600; }
/* ── Diff secties ── */
.diff-section-added { background: var(--color-diff-added-bg); }
.diff-section-added .diff-section-header { border-bottom: 1px solid var(--color-diff-added-border); background: var(--color-diff-added-bg); color: var(--color-diff-added-text); }
.diff-section-modified { background: var(--color-diff-modified-bg); }
.diff-section-modified .diff-section-header { border-bottom: 1px solid var(--color-diff-modified-border); background: var(--color-diff-modified-bg); color: var(--color-diff-modified-text); }
.diff-section-removed { background: var(--color-diff-removed-bg); }
.diff-section-removed .diff-section-header { border-bottom: 1px solid var(--color-diff-removed-border); background: var(--color-diff-removed-bg); color: var(--color-diff-removed-text); }
.diff-removed-text { color: var(--color-diff-removed-text); text-decoration: line-through; }
.stat-green { background:#DCFCE7;color:#15803D; }
.stat-orange { background:#FEF3C7;color:#92400E; }
.stat-red { background:#FEE2E2;color:#B91C1C; }

.badge-example { background: var(--primary-light, #EEF2FF); color: var(--primary, #4F46E5); border-radius: 5px; padding: 2px 8px; font-size: 12px; font-weight: 500; white-space: nowrap; }