/*
 * huisstijl41.css -- HUISSTIJL 4.1, deel 1: de SCHIL (05-10-2026).
 *
 * Wordt ENKEL geladen als de schakelaar CA_HUISSTIJL_41 AAN staat
 * (php/helpers/ca_huisstijl41_helpers.php, opgeroepen in clientadmin/inc/template_start.php).
 * Elke regel hangt bovendien aan body.ca-hs41, die klasse komt er ook enkel bij met de schakelaar AAN.
 * Schakelaar UIT = dit bestand wordt niet geladen = exact het oude uitzicht.
 *
 * Enkel herstijling: kopbalk (chatcenter, iconen, LIVE-label, profiel), zijbalk, logo-balk,
 * profiel-/credentials-blok, lettertype, inhoudsachtergrond, witte blokken, groen accent (07-10: terug naar groen, B-08).
 * Geen markup gewijzigd. Dashboardpagina's: niet in dit bestand (andere opdracht).
 * Normen: ontwerp Main.dc.html / A_Frank.dc.html / A_Alex.dc.html.
 */

/* 0. Lettertype -- Helvetica Now Text uit assets/css/fonts/ (zelfde map als ca_huisstijl.css).
      Light 300 = standaard; 400/500 = Regular (Medium.woff2 ontbreekt); 600-800 = Bold. */
@font-face { font-family: 'Helvetica Now Text'; font-style: normal; font-weight: 300; font-display: swap;
    src: url('fonts/HelveticaNowText-Light.woff2') format('woff2'), url('fonts/HelveticaNowText-Light.woff') format('woff'); }
@font-face { font-family: 'Helvetica Now Text'; font-style: normal; font-weight: 400 500; font-display: swap;
    src: url('fonts/HelveticaNowText-Regular.woff2') format('woff2'), url('fonts/HelveticaNowText-Regular.woff') format('woff'); }
@font-face { font-family: 'Helvetica Now Text'; font-style: normal; font-weight: 600 800; font-display: swap;
    src: url('fonts/HelveticaNowText-Bold.woff2') format('woff2'), url('fonts/HelveticaNowText-Bold.woff') format('woff'); }

/* 1. Kleuren -- overschrijft de omgevingsvariabelen van ca_huisstijl.css */
body.ca-hs41[data-omgeving] {
    /* 07-10-2026 KLEUR_GROEN (beslissing B-08): accent terug naar het oude ClientAdmin-groen #69b899 i.p.v. petrol #1D6A86.
       Wit op #69b899 haalt maar 2.36:1 (norm 4.5:1). Daarom twee groenen:
       --hs41-groen       #69b899  accent: kopbalklijn, actieve zijbalkrand, schakelaars, tekst op de donkere zijbalk (5.4:1).
       --hs41-groen-knop  #397960  knoppen/labels met witte tekst (5.15:1) en groene tekst/links op wit (5.15:1) en #EEF1F3 (4.54:1).
       KEUZE A (overal exact #69b899, ook onder witte tekst): zet de regel --hs41-groen-knop hieronder op #69b899. */
    --hs41-groen: #69b899;
    --hs41-groen-knop: #397960;
    --hs41-groen-knop-hover: #2C5D4A;
    /* oude namen blijven (alle hs41_*.css en schermen gebruiken ze): petrol = nu het knopgroen */
    --hs41-petrol: var(--hs41-groen-knop);
    --hs41-petrol-hover: var(--hs41-groen-knop-hover);
    --hs41-kop: #0F3540;
    --hs41-tekst: #22303A;
    --hs41-inhoud-bg: #EEF1F3;
    --hs41-rand: #DDE2E6;
    --hs41-cred: #9FD3BE;

    --ca-bar-bg: #25292D;
    --ca-bar-line: var(--hs41-groen);
    --ca-bar-text: #FFFFFF;
    --ca-bar-muted: #BFC6CC;
    --ca-bar-icon: #FFFFFF;
    --ca-sel-border: #3A4046;
    --ca-icon-bg: #262A2E;
    --ca-nav-bg: #2E3338;
    --ca-nav-active: #3A4046;
    --ca-nav-active-text: #FFFFFF;
    --ca-nav-text: #E4E8EB;
    --ca-nav-muted: #BFC6CC;
    --ca-env-bg: var(--hs41-groen-knop);
    --ca-env-text: #FFFFFF;
}
/* Dev blijft herkenbaar aan zijn amber label (open punt: bevestigen) */
body.ca-hs41[data-omgeving="dev"] {
    --ca-env-bg: #E8A317;
    --ca-env-text: #1E1A10;
}

/* 2. Typografie */
body.ca-hs41[data-omgeving] {
    font-family: 'Helvetica Now Text', Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: var(--hs41-tekst);
    background: var(--hs41-inhoud-bg);
}
body.ca-hs41 b,
body.ca-hs41 strong,
body.ca-hs41 .btn,
body.ca-hs41 .label,
body.ca-hs41 .badge,
body.ca-hs41 .ca-topbar-omgeving {
    letter-spacing: -0.02em;
}
body.ca-hs41 h1, body.ca-hs41 h2, body.ca-hs41 h3,
body.ca-hs41 .h1, body.ca-hs41 .h2, body.ca-hs41 .h3,
body.ca-hs41 .ca-topbar-merk-titel,
body.ca-hs41 .sidebar-brand,
body.ca-hs41 .sidebar-user-name {
    letter-spacing: -0.03em;
}
body.ca-hs41 h1, body.ca-hs41 h2, body.ca-hs41 h3, body.ca-hs41 h4,
body.ca-hs41 .block-title h1, body.ca-hs41 .block-title h2, body.ca-hs41 .block-title h3 {
    color: var(--hs41-kop);
}
/* Font Awesome / Glyphicons houden hun eigen lettertype */
body.ca-hs41 .fa, body.ca-hs41 .gi, body.ca-hs41 .hi, body.ca-hs41 .si { letter-spacing: normal; }

/* 3. Kopbalk -- #25292D, onderrand 4px groen #69b899 (ook op dev, zie label voor de omgeving) */
body.ca-hs41[data-omgeving] header.navbar {
    background: var(--ca-bar-bg) !important;
    border-bottom: 4px solid var(--ca-bar-line) !important;
}
body.ca-hs41[data-omgeving] .ca-topbar-omgeving {
    font-weight: 700;
    border-radius: 999px;
}
body.ca-hs41[data-omgeving] header.navbar .label-indicator {
    font-weight: 700;
}

/* 4. Zijbalk -- #2E3338, logo-balk #262A2E */
body.ca-hs41[data-omgeving] #sidebar,
body.ca-hs41[data-omgeving] #sidebar-scroll {
    background: var(--ca-nav-bg) !important;
}
body.ca-hs41[data-omgeving] .sidebar-brand {
    background: #262A2E !important;
    color: #FFFFFF !important;
    font-weight: 700;
}
body.ca-hs41[data-omgeving] .sidebar-brand span { color: #FFFFFF; }
body.ca-hs41[data-omgeving] .sidebar-nav > .sidebar-view-group > .sidebar-view-toggle {
    color: var(--ca-nav-muted);
    font-weight: 700;
    letter-spacing: .06em;
}
body.ca-hs41[data-omgeving] .sidebar-nav a { font-weight: 300; }
body.ca-hs41[data-omgeving] .sidebar-nav > li.active > a,
body.ca-hs41[data-omgeving] .sidebar-nav > .sidebar-view-group .sidebar-view-items > li.active > a {
    background: var(--ca-nav-active) !important;
    color: var(--ca-nav-active-text) !important;
    border-radius: 0;
}
body.ca-hs41[data-omgeving] .sidebar-nav a:hover { background: var(--ca-nav-active); }

/* 5. Profielblok + credentials-blok (inhoud en werking ongewijzigd) */
body.ca-hs41[data-omgeving] .sidebar-user {
    background: #4A4F55;
}
body.ca-hs41[data-omgeving] .sidebar-user-name { color: #FFFFFF; font-weight: 400; }
body.ca-hs41[data-omgeving] .sidebar-user-sitetitle { color: #FFFFFF; font-weight: 700; letter-spacing: -0.02em; }
body.ca-hs41[data-omgeving] .sidebar-user-avatar img { border: 3px solid #FFFFFF; }
body.ca-hs41[data-omgeving] .sidebar-user-links a,
body.ca-hs41[data-omgeving] .sidebar-user-links a i { color: #FFFFFF; }
body.ca-hs41[data-omgeving] .sidebar-webadmin,
body.ca-hs41[data-omgeving] .sidebar-webadmin .small,
body.ca-hs41[data-omgeving] .sidebar-webadmin a,
body.ca-hs41[data-omgeving] .sidebar-webadmin a i,
body.ca-hs41[data-omgeving] .sidebar-website-name {
    color: var(--hs41-cred) !important;
    font-size: 12px;
}
body.ca-hs41[data-omgeving] .sidebar-webadmin {
    border-bottom: 1px solid #3A4046;
}

/* 6. Inhoud -- achtergrond #EEF1F3, witte blokken met rand #DDE2E6, groen accent (knoppen/links: --hs41-petrol = knopgroen) */
body.ca-hs41[data-omgeving] #page-content,
body.ca-hs41[data-omgeving] #main-container {
    background: var(--hs41-inhoud-bg);
}
body.ca-hs41[data-omgeving] .block,
body.ca-hs41[data-omgeving] .ca-kaart {
    background: #FFFFFF;
    border-color: var(--hs41-rand);
}
/* FIX1 05-10: werkscherm A-knoppen/-tegels (class wsa-*) uitgesloten -- anders werd de witte tekst van de
   petrol knop "Nieuwe website" ook petrol (= lege blauwe balk). */
body.ca-hs41[data-omgeving] #page-content a:not(.btn):not(.label):not(.badge):not([class*="wsa-"]) { color: var(--hs41-petrol); }
body.ca-hs41[data-omgeving] #page-content a:not(.btn):not(.label):not(.badge):not([class*="wsa-"]):hover { color: var(--hs41-petrol-hover); }
/* 07-10 KLEUR_GROEN: tegels bovenaan (main.css .nav-horizontal, actief/hover #69b899 met witte tekst). De linkregel hierboven
   maakte die tekst petrol op groen (onleesbaar); nu witte tekst op het knopgroen (5.15:1). Keuze A = weer #69b899 zoals main.css. */
body.ca-hs41[data-omgeving] #page-content .nav-horizontal a:hover,
body.ca-hs41[data-omgeving] #page-content .nav-horizontal li.active a {
    background-color: var(--hs41-petrol);
    color: #FFFFFF;
}
body.ca-hs41[data-omgeving] .btn-primary {
    background-color: var(--hs41-petrol);
    border-color: var(--hs41-petrol);
    color: #FFFFFF;
    font-weight: 700;
}
body.ca-hs41[data-omgeving] .btn-primary:hover,
body.ca-hs41[data-omgeving] .btn-primary:focus,
body.ca-hs41[data-omgeving] .btn-primary:active {
    background-color: var(--hs41-petrol-hover);
    border-color: var(--hs41-petrol-hover);
    color: #FFFFFF;
}

/* 7. FIX1 05-10: groene restanten van het oude thema (#69b899) naar petrol, enkel binnen body.ca-hs41.
      07-10 KLEUR_GROEN: schakelaar en tekst in de zijbalk = accentgroen (--hs41-groen); knoppen = knopgroen (--hs41-petrol).
      a) schakelaar "Uw website staat online/offline" (sidebar_website_status.php, #headerOnline)
      b) knoppen "TOON WEBSITE OP DEZE LOCATIE" / "Toon website op: ..." (#onlinewhitelist)
      c) footer-links "MatAtWork" en "for ClientAdmin" (inc/page_footer.php) */
body.ca-hs41[data-omgeving] #headerOnline,
body.ca-hs41[data-omgeving] #headerOnline p,
body.ca-hs41[data-omgeving] #headerOnline input {
    color: var(--hs41-groen) !important;
    border-bottom-color: var(--hs41-groen) !important;
}
body.ca-hs41[data-omgeving] input:checked + .slider {
    background-color: var(--hs41-groen) !important;
}
body.ca-hs41[data-omgeving] input:focus + .slider {
    box-shadow: 0 0 1px var(--hs41-groen) !important;
}
body.ca-hs41[data-omgeving] #onlinewhitelist button,
body.ca-hs41[data-omgeving] button.showwhitelist {
    background-color: var(--hs41-petrol) !important;
    border-color: var(--hs41-petrol) !important;
    color: #FFFFFF !important;
}
body.ca-hs41[data-omgeving] #onlinewhitelist button:hover,
body.ca-hs41[data-omgeving] #onlinewhitelist button:focus,
body.ca-hs41[data-omgeving] button.showwhitelist:hover,
body.ca-hs41[data-omgeving] button.showwhitelist:focus {
    background-color: var(--hs41-petrol-hover) !important;
    border-color: var(--hs41-petrol-hover) !important;
    color: #FFFFFF !important;
}
body.ca-hs41[data-omgeving] footer a,
body.ca-hs41[data-omgeving] footer a:visited {
    color: var(--hs41-petrol) !important;
}
body.ca-hs41[data-omgeving] footer a:hover,
body.ca-hs41[data-omgeving] footer a:focus {
    color: var(--hs41-petrol-hover) !important;
}

/* 8. FIX2 05-10: zijbalk onder 992px + slotjes (live, BRN-beta, Frank, ~960px breed).
      Oorzaak: de live ca_huisstijl.css zet #sidebar en #sidebar-scroll ZONDER mediaquery op 232px. Onder 992px
      houdt ProUI de zijbalk dicht (width 0) en schuift #main-container niet op; nu stond de zijbalk dus altijd
      open OVER de inhoud (inhoud links afgesneden), en position:relative-elementen uit de inhoud (schakelaars
      .mbx-toggle .sch, Bootstrap-kolommen) tekenden er bovenop omdat #sidebar geen z-index had.
      Herstel (enkel onder body.ca-hs41, onafhankelijk van welke ca_huisstijl.css op de server staat):
      dicht tot de menuknop hem opent (.sidebar-visible-xs); open = inhoud schuift 232px mee, zijbalk bovenaan. */
@media (max-width: 991px) {
    body.ca-hs41[data-omgeving] #page-container:not(.sidebar-visible-xs) #sidebar,
    body.ca-hs41[data-omgeving] #page-container:not(.sidebar-visible-xs) #sidebar-scroll {
        width: 0 !important;
        overflow: hidden;
    }
    body.ca-hs41[data-omgeving] #page-container:not(.sidebar-visible-xs) #main-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.ca-hs41[data-omgeving] #page-container.sidebar-visible-xs #sidebar,
    body.ca-hs41[data-omgeving] #page-container.sidebar-visible-xs #sidebar-scroll {
        width: 232px !important;
    }
    body.ca-hs41[data-omgeving] #page-container.sidebar-visible-xs #main-container {
        margin-left: 232px;
        margin-right: -232px;
    }
    body.ca-hs41[data-omgeving] #page-container.sidebar-visible-xs.header-fixed-top header.navbar-fixed-top,
    body.ca-hs41[data-omgeving] #page-container.sidebar-visible-xs.footer-fixed #page-content + footer {
        left: 232px;
        right: -232px;
    }
}
/* Zijbalk altijd boven de inhoud (schakelaars, kolommen), onder kopbalk-dropdowns/modals (1040+) */
body.ca-hs41[data-omgeving] #sidebar { z-index: 1031; }
/* Inhoud mag nooit horizontaal uitlopen (360px). Enkel onder 992px, en 'clip' i.p.v. 'hidden' waar de browser
   het kent: 'hidden' maakt van #page-content een scrollcontainer (dropdowns onderaan krijgen dan een binnen-scrollbalk). */
body.ca-hs41[data-omgeving] #main-container { min-width: 0; }
@media (max-width: 991px) {
    body.ca-hs41[data-omgeving] #page-content { overflow-x: hidden; overflow-x: clip; }
}

/* Slotjes in vergrendelde menu-items (navigation_helpers.php, li.ca-nav-slot): altijd rechts NA de tekst,
   nooit eroverheen (oude icoonregels van thema/ca_huisstijl.css gaven het slot een absolute positie/breedte). */
body.ca-hs41[data-omgeving] .sidebar-nav li.ca-nav-slot > a {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
body.ca-hs41[data-omgeving] .sidebar-nav li.ca-nav-slot > a > .sidebar-nav-mini-hide {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}
body.ca-hs41[data-omgeving] .sidebar-nav li.ca-nav-slot .ca-nav-slot-ico {
    position: static !important;
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 0 0 6px !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: inherit;
    flex: none;
    order: 99;
}

/* 9. FIX3 05-10: uitlijning navigatie op desktop (>= 992px). Gemeten op live, 1680px breed:
      - #sidebar 232px, maar .sidebar-content / merkbalk / profielblok / menu-items bleven op ProUI-breedte 200px
        (strook van 32px rechts; hover/actief stopte op 200px, pijltjes op x=182 i.p.v. rechts).
      - merkbalk 50px hoog, kopbalk 68px (64 + 4px petrol onderrand; 07-10: groen).
      - kopbalk: knoppen links/rechts 50px hoog (midden y=25), merkblok 64px (midden y=32): 7px verschil.
      - schakelaar "Uw website staat online" 212px breed in 200px kolom, tekst op x=10 i.p.v. de menu-kolom.
      - actief sub-item: linkerrand nog oud groen (#69b899).
      - pijltjes: menu-items op x=182, groepkoppen x=194 (ADMIN open: 44px brede gedraaide doos, x=181).
      Na FIX3: merkbalk 232x68 = kopbalk 68; iconen kopbalk allemaal op y=31-33; icoonkolom x=21 (20px), sub x=31;
      alle pijltjes op x=194; schakelaar op x=30 binnen de kolom. */
@media (min-width: 992px) {
    /* a. kolom = volle zijbalkbreedte */
    body.ca-hs41[data-omgeving] #sidebar .sidebar-content,
    body.ca-hs41[data-omgeving] #sidebar .sidebar-brand,
    body.ca-hs41[data-omgeving] #sidebar .sidebar-user,
    body.ca-hs41[data-omgeving] #sidebar .sidebar-webadmin,
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav {
        width: 100% !important;
        box-sizing: border-box;
    }
    /* b. merkbalk = kopbalk: 64px + 4px petrol onderrand, inhoud verticaal gecentreerd, zelfde x als de menu-iconen */
    body.ca-hs41[data-omgeving] #sidebar .sidebar-brand {
        display: flex !important;
        align-items: center;
        height: 68px !important;
        line-height: 1 !important;
        padding: 0 16px 0 20px !important;
        border-bottom: 4px solid var(--ca-bar-line);
        box-sizing: border-box;
    }
    body.ca-hs41[data-omgeving] #sidebar .sidebar-brand .imgWrapper { flex: none; margin: 0 10px 0 0 !important; }
    body.ca-hs41[data-omgeving] #sidebar .sidebar-brand > span { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* c. kopbalk: alle knoppen even hoog als de balk (64px), iconen op dezelfde middellijn als het merkblok */
    body.ca-hs41[data-omgeving] header.navbar .navbar-nav-custom > li > a {
        height: 64px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        line-height: 40px !important;
    }
    body.ca-hs41[data-omgeving] header.navbar .navbar-nav-custom > li > a > img { vertical-align: middle; }
    body.ca-hs41[data-omgeving] header.navbar .navbar-nav-custom > li > a .label-indicator { top: 8px; }
    /* d. menu: vaste icoonkolom (20px), tekst op een vaste x; pijltjes en slotjes rechts */
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav .sidebar-nav-icon {
        width: 20px !important;
        margin-right: 10px !important;
        text-align: center;
        line-height: 16px;
        vertical-align: -2px;
    }
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav a { padding-right: 20px !important; }
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav a > .sidebar-nav-indicator {
        width: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
    }
    /* e. actief: groene linkerrand (07-10: terug naar accentgroen #69b899) op hoofd- en subniveau; tekst blijft op zijn x */
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav a.active,
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav li.active > a.active {
        border-left-color: var(--hs41-groen) !important;
        background: var(--ca-nav-active) !important;
        color: #FFFFFF !important;
        font-weight: 400;
    }
    /* f. groepkoppen ADMIN / CLIENT / SUPPORT: tekst op de icoonkolom, lucht erboven, dunne scheiding */
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav > .sidebar-view-group > .sidebar-view-toggle {
        padding-left: 20px !important;
        padding-right: 20px !important;
        height: 44px;
        line-height: 44px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-top: 1px solid #3A4046;
    }
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav > .sidebar-view-group > .sidebar-view-toggle > i {
        width: 18px !important; height: 18px !important; line-height: 18px !important; margin: 13px 0 0 0 !important;
    }
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav > .sidebar-view-group > .sidebar-view-items { padding-bottom: 8px; }
    /* g. schakelaar "Uw website staat online": in de kolom, op de x van de menu-iconen */
    body.ca-hs41[data-omgeving] #sidebar #headerOnline {
        width: auto !important;
        margin: 12px 20px 16px 20px !important;
        padding: 12px 0 0 0 !important;
        border-top: 1px solid #3A4046;
        box-sizing: border-box;
    }
    body.ca-hs41[data-omgeving] #sidebar #headerOnline > div,
    body.ca-hs41[data-omgeving] #sidebar #headerOnline p { width: auto !important; margin: 6px 0 0 0 !important; padding: 0 !important; }
    body.ca-hs41[data-omgeving] #sidebar #headerOnline .switch { margin: 0 !important; }
    /* petrol tekst op donkergrijs was amper leesbaar (11px); schakelaar zelf blijft petrol */
    body.ca-hs41[data-omgeving] #sidebar #headerOnline p { color: var(--ca-nav-muted) !important; font-size: 12px; line-height: 16px; }
}

/* 10. 07-10-2026 ZIJBALK_SCHAKELAAR: "Uw website staat online/offline" -- de tekst NAAST een kleinere schakelaar.
      Enkel CSS (geen markup): #headerOnline > label.switch (input + div.slider.round) + #onlineStatus (p).
      Norm: bord Main.dc.html (.tg 30x16, tekst ernaast); hier 32x18 met knop 14px. Groen aan (07-10), grijs uit.
      Geldt op desktop en in de opengeklapte zijbalk op gsm (geen mediaquery); latere blokken in #headerOnline
      (bv. "toon website op deze locatie" bij offline) staan op een eigen regel eronder. */
body.ca-hs41[data-omgeving] #sidebar #headerOnline {
    display: flex !important;
    overflow: visible !important;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
}
body.ca-hs41[data-omgeving] #sidebar #headerOnline > .switch {
    float: none !important;
    flex: 0 0 32px;
    position: relative;
    display: block;
    width: 32px !important;
    height: 18px !important;
    margin: 0 !important;
}
body.ca-hs41[data-omgeving] #sidebar #headerOnline .slider,
body.ca-hs41[data-omgeving] #sidebar #headerOnline .slider.round {
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 32px !important;
    height: 18px !important;
    border-radius: 9px !important;
    background-color: #7C858D !important;
}
body.ca-hs41[data-omgeving] #sidebar #headerOnline .slider:before {
    width: 14px !important;
    height: 14px !important;
    left: 2px !important;
    bottom: 2px !important;
    border-radius: 50% !important;
}
body.ca-hs41[data-omgeving] #sidebar #headerOnline input:checked + .slider {
    background-color: var(--hs41-groen) !important;
}
body.ca-hs41[data-omgeving] #sidebar #headerOnline input:checked + .slider:before {
    -webkit-transform: translateX(14px) !important;
    -ms-transform: translateX(14px) !important;
    transform: translateX(14px) !important;
}
body.ca-hs41[data-omgeving] #sidebar #headerOnline > .switch + #onlineStatus {
    float: none !important;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none;
}
body.ca-hs41[data-omgeving] #sidebar #headerOnline > .switch + #onlineStatus p {
    margin: 0 !important;
    color: var(--ca-nav-muted) !important;
    font-size: 12px;
    line-height: 18px;
}
body.ca-hs41[data-omgeving] #sidebar #headerOnline > :not(.switch):not(.switch + #onlineStatus) {
    flex: 0 0 100%;
}

/* 11. 07-10-2026 HUISSTIJL_KADER_REGELS -- regels uit het ontwerp van Matthias (dashboard_frank_desktop_1440x900.ai, 07-10),
      vastgelegd in _PROJECTEN/ClientAdmin/UXUI_RONDE/HUISSTIJL_REGELS_KADER_2026-10-07.md. Gelden OVERAL (standaard en
      klantkader); kleuren blijven uit de bestaande variabelen (klantkader: hs41_kader.css). Markup: sidebar.php
      (.ca-merk-klantnaam, .sidebar-user-url), page_head.php (.ca-kader-merk, .ca-kop-omgeving-li). */

/* a. Regel 1 -- groepstitels in de zijbalk (client, support, admin ...): vet 19px, kleine letters, -0.02em */
body.ca-hs41[data-omgeving] #sidebar .sidebar-nav > .sidebar-view-group > .sidebar-view-toggle {
    font-size: 19px;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: -0.02em;
    line-height: 24px;
    padding-left: 11px;
}
@media (min-width: 992px) {
    body.ca-hs41[data-omgeving] #sidebar .sidebar-nav > .sidebar-view-group > .sidebar-view-toggle {
        padding-left: 11px !important;
        line-height: 44px !important;
    }
}

/* b. Regel 4 -- profielkop: url van de website onder de sitenaam (light 10px, afgekapt) */
body.ca-hs41[data-omgeving] .sidebar-user-sitetitle {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.ca-hs41[data-omgeving] .sidebar-user-url {
    color: var(--hs41-kader-tekst, #FFFFFF);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 14px;
    margin: 1px 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* c. Regel 5 -- "Uw website staat online" op een regel naast de schakelaar (aanvulling op blok 10) */
body.ca-hs41[data-omgeving] #sidebar #headerOnline > .switch + #onlineStatus,
body.ca-hs41[data-omgeving] #sidebar #headerOnline > .switch + #onlineStatus p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.03em;
}

/* d. Regel 7 -- merk op twee regels: "MatAtWork" vet 10px, daaronder de klantnaam light 13px */
body.ca-hs41[data-omgeving] #sidebar .sidebar-brand.ca-merk-tweeregels > span {
    display: inline-block;
    vertical-align: middle;
    min-width: 0;
    max-width: 150px;
    font-size: 10px;
    line-height: 12px !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
}
body.ca-hs41[data-omgeving] #sidebar .sidebar-brand.ca-merk-tweeregels > span strong { font-weight: 700; }
body.ca-hs41[data-omgeving] #sidebar .sidebar-brand.ca-merk-tweeregels .ca-merk-klantnaam {
    display: block;
    font-size: 13px;
    line-height: 16px;
    font-weight: 300;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 992px) {
    body.ca-hs41[data-omgeving] #sidebar .sidebar-brand.ca-merk-tweeregels > span {
        display: block;
        flex: 1 1 auto;
        max-width: none;
    }
}

/* e. Regel 7 -- kopbalk: MatAtWork-logo | klantlogo, allebei rond op wit (ook standaard; was hs41_kader.css §4) */
body.ca-hs41[data-omgeving] .ca-kader-merk { gap: 8px; }
body.ca-hs41[data-omgeving] .ca-kader-rond {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    overflow: hidden;
}
body.ca-hs41[data-omgeving] .ca-kader-rond img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
body.ca-hs41[data-omgeving] .ca-kader-scheiding {
    width: 1px;
    height: 20px;
    background: var(--hs41-kader-scheiding, var(--ca-sel-border));
    flex: none;
}
body.ca-hs41[data-omgeving] .ca-kader-klant { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
body.ca-hs41[data-omgeving] .ca-kader-klantnaam {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--hs41-kader-tekst, var(--ca-bar-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
@media (max-width: 480px) {
    body.ca-hs41[data-omgeving] .ca-kader-merk { padding: 0 8px; gap: 6px; }
    body.ca-hs41[data-omgeving] .ca-kader-rond { flex-basis: 28px; width: 28px; height: 28px; }
    body.ca-hs41[data-omgeving] .ca-kader-klantnaam { max-width: 90px; font-size: 13px; }
}

/* f. Regel 8 (OPEN VRAAG) -- omgevingslabel. A: klein en rustig rechts voor het profiel. Dev blijft amber gevuld (regel 0). */
body.ca-hs41[data-omgeving] header.navbar .navbar-nav-custom > li.ca-kop-omgeving-li {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 6px;
}
body.ca-hs41[data-omgeving] .ca-kop-omgeving-li .ca-topbar-omgeving {
    margin: 0;
    font-size: 10px;
    padding: 2px 8px;
    letter-spacing: 0;
    background: transparent;
    color: var(--ca-bar-muted);
    border: 1px solid var(--ca-bar-muted);
}
body.ca-hs41[data-omgeving="dev"] .ca-kop-omgeving-li .ca-topbar-omgeving {
    background: var(--ca-env-bg);
    color: var(--ca-env-text);
    border-color: var(--ca-env-bg);
}
/* B: label van de website-omgeving naast het merk (beta-website / live-website) */
body.ca-hs41[data-omgeving] .ca-kader-website-omgeving {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--ca-bar-muted);
    color: var(--ca-bar-text);
    white-space: nowrap;
}
@media (min-width: 992px) {
    body.ca-hs41[data-omgeving] header.navbar .navbar-nav-custom > li.ca-kop-omgeving-li { height: 64px; padding: 0 10px; }
}
@media (max-width: 480px) {
    body.ca-hs41[data-omgeving] .ca-kop-omgeving-li .ca-topbar-omgeving { font-size: 9px; padding: 1px 6px; }
    body.ca-hs41[data-omgeving] header.navbar .navbar-nav-custom > li.ca-kop-omgeving-li { padding: 0 2px; }
}