/* ===== LEASA IT — Compliance GAP Analyse ===== */
:root {
    --leasa-dark:    #1E4D8F;
    --leasa-mid:     #2563B0;
    --leasa-light:   #5BB3E0;
    --leasa-grad:    linear-gradient(135deg, #1E4D8F 0%, #5BB3E0 100%);
    --leasa-grad-h:  linear-gradient(135deg, #163d72 0%, #4a9ecf 100%);
    --bs-primary:            #1E4D8F;
    --bs-primary-rgb:        30, 77, 143;
}

/* === Tekstvakken: begrens vrije resize (anti-overflow) === */
textarea { resize: vertical; max-height: 45vh; }
textarea, .form-control, .form-select { max-width: 100%; }

/* === Bootstrap primary override === */
.btn-primary                        { background-color: var(--leasa-dark) !important; border-color: var(--leasa-dark) !important; }
.btn-primary:hover                  { background-color: var(--leasa-mid)  !important; border-color: var(--leasa-mid)  !important; }
.btn-outline-primary                { color: var(--leasa-dark) !important; border-color: var(--leasa-dark) !important; }
.btn-outline-primary:hover          { background-color: var(--leasa-dark) !important; color: #fff !important; }
.bg-primary                         { background-color: var(--leasa-dark) !important; }
.text-primary                       { color: var(--leasa-dark) !important; }
.badge.bg-primary                   { background-color: var(--leasa-dark) !important; }
.border-primary                     { border-color: var(--leasa-dark) !important; }
.progress-bar.bg-primary,
.progress-bar                       { background-color: var(--leasa-light) !important; }
.form-check-input:checked           { background-color: var(--leasa-dark); border-color: var(--leasa-dark); }
a                                   { color: var(--leasa-mid); }
a:hover                             { color: var(--leasa-dark); }

/* === Navbar === */
.navbar-leasa {
    background: var(--leasa-grad) !important;
    box-shadow: 0 2px 12px rgba(30,77,143,0.25);
}
.navbar-leasa .navbar-brand img     { height: 32px; }
.navbar-leasa .btn-outline-light    { border-color: rgba(255,255,255,0.5); }
.navbar-leasa .btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* Admin navbar */
.navbar-admin {
    background: linear-gradient(135deg, #0f2744 0%, #1E4D8F 100%) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* === Login pagina === */
.login-bg {
    background: var(--leasa-grad);
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.login-card {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(30,77,143,0.3);
}
.login-logo { height: 56px; }

/* === Sidebar === */
.sidebar-item {
    color: #495057;
    font-size: 0.82rem;
    line-height: 1.3;
}
.sidebar-item:hover  { background: #e9ecef; color: #212529; }
.sidebar-item.active { background: var(--leasa-dark); color: #fff !important; }
.sidebar-item.active .badge { background: rgba(255,255,255,0.25) !important; color: #fff; }

/* === Cards & algemeen === */
body        { background-color: #f0f4f8; font-family: 'Segoe UI', system-ui, sans-serif; }
.card       { border-radius: 10px; }
.navbar     { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

.control-card               { transition: box-shadow 0.2s; }
.control-card:hover         { box-shadow: 0 4px 16px rgba(30,77,143,0.12) !important; }

.score-btn  { font-size: 0.78rem; padding: 3px 10px; border-radius: 20px; }
.btn-xs     { font-size: 0.72rem; padding: 2px 8px; border-radius: 20px; line-height: 1.4; }

/* Sub-vragen panel */
.sub-vraag  { border-bottom: 1px solid #e8eff8; padding-bottom: 6px; }
.sub-vraag:last-of-type { border-bottom: none; }

.table th {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}
.progress   { border-radius: 10px; }

/* === Readonly banner === */
.readonly-banner {
    background: linear-gradient(90deg, #fff3cd, #ffeaa7);
    border-left: 4px solid #f39c12;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.88rem;
}

/* === PDF print styles === */
@media print {
    .navbar, .btn, .no-print       { display: none !important; }
    body                           { background: white !important; font-size: 10pt; font-family: Arial, sans-serif; }
    .rapport-page                  { max-width: 100% !important; padding: 0 !important; }
    .card                          { border: 1px solid #dee2e6 !important; box-shadow: none !important; page-break-inside: avoid; }
    .card-body                     { padding: 0.5rem !important; }
    .page-break                    { page-break-before: always; }
    h4, h5, h6                     { color: #1E4D8F !important; }
    a                              { color: inherit !important; text-decoration: none !important; }

    /* Tabellen passend op pagina */
    table                          { width: 100% !important; font-size: 9pt !important; border-collapse: collapse !important; }
    th, td                         { padding: 4px 6px !important; word-break: break-word; }
    thead                          { display: table-header-group; }
    tr                             { page-break-inside: avoid; }

    /* Rapport header compacter */
    .rapport-header                { padding: 1rem !important; margin-bottom: 0.75rem !important; }
    .rapport-header .score-ring    { width: 60px !important; height: 60px !important; font-size: 1rem !important; }
    .stat-box .num                 { font-size: 1.2rem !important; }

    /* Section titles */
    .section-title                 { margin-top: 1rem !important; font-size: 8pt !important; }

    /* Actieplan tabel niet afsnijden */
    .actie-row td                  { font-size: 8.5pt !important; }

    /* Vergelijkingstabel */
    .table-responsive              { overflow: visible !important; }
}

/* === Compact print helper === */
.rapport-page { max-width: 900px; margin: 0 auto; padding: 1.5rem; }

/* =======================================================================
   Zijmenu (sidebar) — Leasa-huisstijl, model zorgapp
   ======================================================================= */
:root { --gap-sb-w: 256px; --gap-sb-cw: 66px; }

body.has-sidebar              { padding-left: var(--gap-sb-w); transition: padding-left .2s ease; }
body.has-sidebar.sb-collapsed { padding-left: var(--gap-sb-cw); }

.gap-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: var(--gap-sb-w);
    display: flex; flex-direction: column; z-index: 1040;
    background: linear-gradient(180deg, #143257 0%, #1E4D8F 100%);
    color: #e8eef6; box-shadow: 2px 0 16px rgba(0,0,0,.18);
    transition: width .2s ease, transform .2s ease; overflow: hidden;
}
.gap-sidebar.sb-admin          { background: linear-gradient(180deg, #0c1f38 0%, #16335c 100%); }
body.sb-collapsed .gap-sidebar { width: var(--gap-sb-cw); }

/* Top / merk */
.sb-top   { padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.10); }
.sb-brand { display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; overflow: hidden; min-height: 30px; }
.sb-logo  { height: 28px; filter: brightness(0) invert(1); }
.sb-logo-mark { display: none; }   /* merk-only, alleen zichtbaar in ingeklapte balk */
.sb-adminbadge { background: #ffc107; color: #14233b; font-size: .58rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
body.sb-collapsed .sb-top   { padding: 18px 0 14px; text-align: center; }
body.sb-collapsed .sb-brand { justify-content: center; }
/* Ingeklapt: breed woordmerk verbergen, vierkant merk-icoon gecentreerd tonen.
   Geen wit-filter: het icoon heeft eigen kleuren (blauw schild op wit). */
body.sb-collapsed .sb-logo-full { display: none; }
body.sb-collapsed .sb-logo-mark { display: block; height: 28px; width: 28px; filter: none; }
body.sb-collapsed .sb-adminbadge { display: none; }

/* Navigatie */
.sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 10px; }
.sb-nav ul { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.sb-nav li { list-style: none !important; }
.sb-nav li::marker { content: "" !important; }
.sb-nav::-webkit-scrollbar       { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }

.sb-link, .sb-grouprow {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
    border-radius: 10px; color: rgba(255,255,255,.82); text-decoration: none;
    font-size: .92rem; white-space: nowrap; position: relative; cursor: pointer; border: 0; width: 100%;
    background: transparent; text-align: left;
}
.sb-link:hover, .sb-grouprow:hover { background: rgba(255,255,255,.10); color: #fff; }
.sb-link.active {
    background: rgba(255,255,255,.16); color: #fff; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--leasa-light);
}
.sb-ico   { width: 20px; text-align: center; font-size: 1rem; flex: 0 0 auto; }
.sb-label { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.sb-badge { background: #e23b4e; color: #fff; font-size: .68rem; font-weight: 700; border-radius: 10px; padding: 1px 7px; flex: 0 0 auto; }
.sb-sep   { height: 1px; background: rgba(255,255,255,.12); margin: 9px 14px; }

/* Sectiekop (uitklapbaar) */
.sb-section    { text-transform: uppercase; letter-spacing: .045em; font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.62); }
.sb-grouprow:hover .sb-section { color: #fff; }
.sb-caret-ico  { font-size: .72rem; transition: transform .18s ease; color: rgba(255,255,255,.55); flex: 0 0 auto; }
.sb-group.open .sb-caret-ico { transform: rotate(180deg); }
.sb-sub { list-style: none; margin: 0 2px 4px; padding: 0; max-height: 0; overflow: hidden; transition: max-height .24s ease; }
.sb-group.open .sb-sub { max-height: 60vh; overflow-y: auto; }
.sb-sublink {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 34px; margin: 1px 0;
    border-radius: 9px; color: rgba(255,255,255,.74); text-decoration: none; font-size: .85rem; white-space: nowrap;
}
.sb-sublink:hover  { background: rgba(255,255,255,.10); color: #fff; }
.sb-sublink.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--leasa-light); }
.sb-subdot   { width: 6px; height: 6px; border-radius: 50%; background: var(--leasa-light); opacity: .8; flex: 0 0 auto; }
.sb-sub-meta { opacity: .6; font-size: .76rem; margin-left: 4px; }
.sb-sub-empty { padding: 7px 12px 7px 34px; font-size: .78rem; opacity: .5; }

/* Geneste norm-subgroep (Analyses/Projectplannen -> norm -> datum) */
.sb-normgroup { list-style: none; }
.sb-normrow {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 30px; margin: 1px 0;
    border-radius: 8px; color: rgba(255,255,255,.8); cursor: pointer; font-size: .83rem; white-space: nowrap;
}
.sb-normrow:hover { background: rgba(255,255,255,.10); color: #fff; }
.sb-normname { flex: 1 1 auto; font-weight: 600; letter-spacing: .01em; }
.sb-norm-caret { font-size: .68rem; transition: transform .18s ease; color: rgba(255,255,255,.55); flex: 0 0 auto; }
.sb-normgroup.open .sb-norm-caret { transform: rotate(180deg); }
.sb-normsub { list-style: none; margin: 0 0 2px; padding: 0; max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.sb-normgroup.open .sb-normsub { max-height: 40vh; overflow-y: auto; }
.sb-normsub .sb-sublink { padding-left: 46px; }
body.sb-collapsed .sb-normrow, body.sb-collapsed .sb-normsub { display: none !important; }

/* Onderkant */
.sb-bottom { padding: 8px 10px 10px; border-top: 1px solid rgba(255,255,255,.12); }
.sb-pin    { color: rgba(255,255,255,.9); }
.sb-readonly { display: flex; align-items: center; gap: 12px; padding: 7px 12px; color: #ffd66e; font-size: .8rem; white-space: nowrap; }
.sb-user   { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 2px; color: rgba(255,255,255,.85); font-size: .84rem; white-space: nowrap; }
.sb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--leasa-light); color: #0c1f38; font-weight: 700;
             display: flex; align-items: center; justify-content: center; flex: 0 0 auto; text-transform: uppercase; font-size: .85rem; }
.sb-logout-ico { margin-left: auto; color: rgba(255,255,255,.7); padding: 4px 6px; border-radius: 7px; flex: 0 0 auto; }
.sb-logout-ico:hover { background: rgba(226,59,78,.85); color: #fff; }
.sb-collapse {
    display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 4px; padding: 9px 12px;
    background: transparent; border: 0; border-radius: 10px; color: rgba(255,255,255,.6); font-size: .84rem; cursor: pointer; text-align: left;
}
.sb-collapse:hover { background: rgba(255,255,255,.10); color: #fff; }
body.sb-collapsed .sb-collapse .sb-ico { transform: rotate(180deg); }

/* Ingeklapt: alleen iconen */
body.sb-collapsed .sb-label,
body.sb-collapsed .sb-caret-ico,
body.sb-collapsed .sb-sub,
body.sb-collapsed .sb-sep,
body.sb-collapsed .sb-logout-ico { display: none !important; }
body.sb-collapsed .sb-link,
body.sb-collapsed .sb-grouprow,
body.sb-collapsed .sb-user,
body.sb-collapsed .sb-readonly,
body.sb-collapsed .sb-collapse   { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
body.sb-collapsed .sb-badge      { position: absolute; top: 4px; right: 8px; padding: 0 5px; }
body.sb-collapsed .sb-avatar     { margin: 0; }

/* Mobiel: off-canvas + hamburger */
.sb-hamburger {
    display: none; position: fixed; top: 12px; left: 12px; z-index: 1050;
    width: 42px; height: 42px; border: 0; border-radius: 10px;
    background: var(--leasa-dark); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; }

@media (max-width: 991.98px) {
    body.has-sidebar, body.has-sidebar.sb-collapsed { padding-left: 0; }
    .gap-sidebar              { transform: translateX(-100%); width: var(--gap-sb-w) !important; }
    body.sb-open .gap-sidebar { transform: none; }
    body.sb-collapsed .sb-label,
    body.sb-collapsed .sb-caret-ico,
    body.sb-collapsed .sb-sub,
    body.sb-collapsed .sb-logout-ico { display: revert !important; }
    /* Op mobiel is de balk niet echt ingeklapt -> volledig logo terug */
    body.sb-collapsed .sb-logo-full { display: block; }
    body.sb-collapsed .sb-logo-mark { display: none; }
    body.sb-collapsed .sb-link,
    body.sb-collapsed .sb-grouprow,
    body.sb-collapsed .sb-user,
    body.sb-collapsed .sb-readonly,
    body.sb-collapsed .sb-collapse   { justify-content: flex-start; gap: 12px; padding-left: 12px; padding-right: 12px; }
    .sb-hamburger             { display: flex; align-items: center; justify-content: center; }
    body.sb-open .sb-backdrop { display: block; }
    .sb-collapse              { display: none; }   /* op mobiel inklappen niet nodig */
}

@media print {
    .gap-sidebar, .sb-hamburger, .sb-backdrop { display: none !important; }
    body.has-sidebar { padding-left: 0 !important; }
}

/* =======================================================================
   MOBIELE LAAG 1 — toegevoegd 2026-07-03 (Leasa IT compliance)
   Alleen actief op telefoons (max-width: 767.98px). Desktop blijft volledig
   ongemoeid: op bredere schermen negeert de browser dit hele blok.
   Puur additief — geen bestaande regel gewijzigd of verwijderd.
   ======================================================================= */
@media (max-width: 767.98px) {

    /* --- Ruimte: grote pagina-padding terugbrengen op smal scherm --- */
    .container-fluid.p-4  { padding: 1rem !important; }
    .container-fluid.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .container.p-4, .container.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .card-body { padding: 1rem; }

    /* --- Typografie iets leesbaarder --- */
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.15rem; }

    /* --- Tikdoelen: knoppen groot genoeg voor vingers (~44px) --- */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    /* In tabellen compacter houden zodat rijen niet te hoog worden */
    .table .btn, .table .btn-sm { min-height: 34px; }

    /* --- Formuliervelden: 44px hoog + 16px font (voorkomt auto-zoom op iOS) --- */
    .form-control, .form-select { min-height: 44px; font-size: 1rem; }

    /* --- Tabellen: soepel horizontaal scrollen met nette rand/hint --- */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 8px;
    }
    .table-responsive > .table { margin-bottom: 0; }

    /* --- Koprijen (titel links, knop rechts) mogen afbreken i.p.v. persen --- */
    .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }

    /* --- Zoekbalk / input-group over de volle breedte --- */
    .input-group { max-width: 100% !important; }

    /* --- Modals dichter bij de schermranden, meer ademruimte --- */
    .modal-dialog { margin: .5rem; }
}

/* =======================================================================
   MOBIELE LAAG 2 — verfijningen 2026-07-03 (Leasa IT compliance)
   Alleen actief op telefoons (max-width: 767.98px). Desktop ongemoeid.
   Puur additief — geen bestaande regel gewijzigd of verwijderd.
   ======================================================================= */
@media (max-width: 767.98px) {

    /* --- 1. Hamburger-knop niet meer over de titel/eerste veld ---
       De zwevende hamburger staat op top:12px, 42px hoog. We reserveren
       daarvoor een strook bovenaan de pagina-inhoud. */
    body.has-sidebar { padding-top: 58px; }

    /* --- 2. Brede tabellen: leesbare minimumbreedte i.p.v. platdrukken ---
       Zo krijgt elke kolom genoeg ruimte en scrollt de tabel netjes
       horizontaal in zijn .table-responsive-omhulsel (geen overlap meer). */
    .table-responsive > .table { min-width: 640px; }

    /* --- 3. Assessment: per-subvraag antwoordknoppen ONDER de vraagtekst
       i.p.v. ernaast (voorkomt dat de vraag in een smalle kolom wordt geperst). */
    .col-md-7 .d-flex.align-items-center.justify-content-between { flex-wrap: wrap; }
    .col-md-7 .d-flex.align-items-center.justify-content-between > .flex-shrink-0 {
        flex-basis: 100%;
        margin-left: 0 !important;
        margin-top: .45rem;
        justify-content: flex-start !important;
    }

    /* --- 4. Kaart-rijen met tekst + badge/knop: netjes afbreken i.p.v.
       overlappen (o.a. klant-kaartjes op het admin-dashboard). */
    .card .d-flex.align-items-center.justify-content-between { flex-wrap: wrap; gap: .4rem; }
}

/* Klantweergave-balk (38px, fixed): zijpanelen en modals eronder laten beginnen
   zodat de paneelkop niet wegvalt achter de oranje balk. */
body.has-namens .offcanvas { top: 38px; height: calc(100vh - 38px); }
body.has-namens .modal { padding-top: 38px; }