/*
 * ca_huisstijl.css -- Deel B (huisstijl-schil), opdracht "Bouwblok 1 -- Deel A/B/C".
 *
 * Gedeeld stijlbestand voor de admin-schil (top balk, zijbalk) EN de kaart-/knop-/
 * status-/toggle-/tabs-/tabelstijlen uit de mockups (docs/ui_huisstijl/mockups/*.html,
 * met name Websites_dossier.html en _themas_per_omgeving.txt). Enkel opmaak, geen
 * gedragswijziging -- bestaande klassen/structuur in page_head.php en sidebar.php blijven
 * ongewijzigd, dit bestand herstijlt ze via CSS custom properties per omgeving.
 *
 * Omgeving: <body data-omgeving="live|dev|lokaal">, gezet in inc/template_start.php via
 * caOmgevingBepalen() (php/helpers/ca_omgeving_helpers.php). Exacte kleurwaarden komen 1-op-1
 * uit _themas_per_omgeving.txt.
 */

/* ---------------------------------------------------------------------------------------------
   0. Typografie -- systeemlettertypes (HUISSTIJL RONDE 1, 04-10-2026, keuze 2 C)
   Helvetica Now Text (Monotype) is een betalend lettertype; de bestanden blijven in fonts/ staan maar worden niet meer
   geladen (geen licentiekwestie, en geen 404 meer voor HelveticaNowText-Medium.woff2, dat ontbrak).
   Nu: de systeemlijst hieronder (San Francisco op Apple, Segoe UI op Windows, Roboto op Android). Wil je een vrij
   weblettertype (bv. Inter of Heebo, licentie OFL), lever dan Regular 400, Medium 500 en Bold 700 als .woff2 aan in
   clientadmin/assets/css/fonts/ en zet de @font-face-regels hieronder aan (in commentaar klaar).
--------------------------------------------------------------------------------------------- */
/*
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Inter-Bold.woff2') format('woff2'); }
*/
body[data-omgeving] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------------------------
   1. Thema per omgeving -- CSS custom properties op <body data-omgeving="...">
   Waarden 1-op-1 uit docs/ui_huisstijl/mockups/_themas_per_omgeving.txt.
--------------------------------------------------------------------------------------------- */
body[data-omgeving] {
    --ca-bar-text: #FFFFFF;
    --ca-bar-muted: #B7C3CA;
    --ca-sel-border: #3C505D;
    --ca-bar-icon: #D8DEE2;
    --ca-nav-text: #D8DEE2;
    --ca-nav-muted: #8FA0AB;
    --ca-nav-active-text: #FFFFFF;
    --ca-icon-bg: #2C3E4A;
}

/* 30-09-2026: DevOnline ziet er weer uit als ClientAdmin Live (donker); het lichtblauwe thema was enkel voor lokaal (sinds 02-10-2026 ook donker antraciet, zie hieronder). */
body[data-omgeving="live"],
body[data-omgeving="dev"] {
    --ca-bar-bg: #1D2A33;
    --ca-bar-line: #17607A;
    --ca-nav-bg: #22313B;
    --ca-nav-active: #2C3E4A;
    --ca-env-bg: #DCEBF1;
    --ca-env-text: #0F4A5E;
    --ca-env-label: 'LIVE';
}

/* HUISSTIJL RONDE 1 (04-10-2026, keuze 1 A, variant 2 uit docs/ui_huisstijl/mockups/dev_kleur_varianten_2026-10-04.html):
   dev krijgt een eigen identiteit: donkergroene balk, amber onderrand en een groot amber label. Live blijft donkerblauw.
   Contrast (WCAG AA): wit op #1F3B30 12,2:1; #B7C3CA op #1F3B30 6,8:1; #1E1A10 op #E8A317 8,0:1. Geen paars. */
body[data-omgeving="dev"] {
    --ca-bar-bg: #1F3B30;
    --ca-bar-line: #E8A317;
    --ca-nav-bg: #24433A;
    --ca-nav-active: #2E5246;
    --ca-icon-bg: #2E5246;
    --ca-env-bg: #E8A317;
    --ca-env-text: #1E1A10;
    --ca-env-label: 'DEV';
}
body[data-omgeving="dev"] header.navbar {
    border-bottom-width: 6px !important;
}
body[data-omgeving="dev"] .ca-topbar-omgeving {
    font-size: 13px;
    padding: 4px 12px;
    letter-spacing: .06em;
}

/* 02-10-2026: lokaal is nu donker antraciet (neutraal grijs) in plaats van lichtblauw. Live/dev blijven het blauwgrijze donker;
   het omgevingslabel (LOKAAL · Devilbox, teal pil) blijft het verschil zichtbaar maken. De tekstkleuren komen uit de donkere basis hierboven. */
body[data-omgeving="lokaal"] {
    --ca-bar-bg: #26282B;
    --ca-bar-line: #17607A;
    --ca-nav-bg: #2D3034;
    --ca-nav-active: #3B3F45;
    --ca-bar-text: #FFFFFF;
    --ca-bar-muted: #B8BCC1;
    --ca-sel-border: #464A50;
    --ca-bar-icon: #D9DCDF;
    --ca-nav-text: #DADDE0;
    --ca-nav-muted: #959AA0;
    --ca-nav-active-text: #FFFFFF;
    --ca-icon-bg: #3B3F45;
    --ca-env-bg: #17607A;
    --ca-env-text: #FFFFFF;
}

/* ---------------------------------------------------------------------------------------------
   2. Top balk -- 64px, 4px onderrand in --ca-bar-line, MaW-icoon 36px, titel, omgevingslabel
--------------------------------------------------------------------------------------------- */
body[data-omgeving] header.navbar {
    min-height: 64px;
    background: var(--ca-bar-bg) !important;
    border-bottom: 4px solid var(--ca-bar-line) !important;
    color: var(--ca-bar-text);
}
body[data-omgeving] header.navbar .navbar-nav-custom > li > a,
body[data-omgeving] header.navbar .navbar-header a {
    color: var(--ca-bar-text) !important;
}
body[data-omgeving] header.navbar .navbar-nav-custom > li > a:hover {
    color: var(--ca-bar-text) !important;
    opacity: .8;
}

.ca-topbar-merk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 64px;
    float: left;
}
.ca-topbar-merk-icoon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ca-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 36px;
}
.ca-topbar-merk-icoon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ca-topbar-merk-titel {
    font-weight: 700;
    font-size: 15px;
    color: var(--ca-bar-text);
    white-space: nowrap;
}
.ca-topbar-omgeving {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ca-env-bg);
    color: var(--ca-env-text);
    margin-left: 6px;
    white-space: nowrap;
}
/* HUISSTIJL RONDE 1 (04-10-2026, keuze 3 A): MatAtWork-icoon subtiel, daarnaast het logo (of de naam) van de gekozen
   klant of website. Lukt het logo niet (geen logo_admin.png op de site), dan toont de topbalk de naam. */
.ca-topbar-merk-icoon.is-subtiel {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    opacity: .85;
}
.ca-topbar-scheiding {
    width: 1px;
    height: 26px;
    background: var(--ca-sel-border);
}
.ca-topbar-klant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ca-topbar-klantlogo {
    max-height: 30px;
    max-width: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #FFFFFF;
    border-radius: 6px;
    padding: 2px 6px;
}
.ca-topbar-klantnaam {
    font-weight: 600;
    font-size: 14px;
    color: var(--ca-bar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.ca-topbar-website {
    font-size: 12px;
    color: var(--ca-bar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Op smalle schermen (390px): de titel/omgevingslabel niet laten breken/overlappen -- titel en
   sitenaam mogen verdwijnen, het icoon en het omgevingslabel blijven altijd zichtbaar. */
@media (max-width: 480px) {
    .ca-topbar-merk-titel,
    .ca-topbar-website,
    .ca-topbar-scheiding {
        display: none;
    }
    .ca-topbar-klantnaam {
        max-width: 110px;
        font-size: 13px;
    }
    .ca-topbar-klantlogo {
        max-width: 90px;
        max-height: 26px;
    }
    .ca-topbar-merk {
        padding: 0 10px;
        gap: 6px;
    }
}

/* ---------------------------------------------------------------------------------------------
   3. Zijbalk -- 232px, kleine hoofdletters groepstitels, gevulde actieve status
--------------------------------------------------------------------------------------------- */
/* Fix 4.0.6 deel 4.1 (03-10-2026): de breedte van #sidebar stond hier zonder mediaquery, dus ook
   onder 992px. Daar houdt het ProUI-template de zijbalk dicht (main.css: #sidebar width 0) en schuift
   #main-container niet op; met 232px vast stond de zijbalk dan altijd open en lagen de kaarten
   (Bootstrap-kolommen, position:relative) erbovenop. Nu: 232px enkel vanaf 992px; daaronder enkel
   open via de menuknop (.sidebar-visible-xs), en dan schuift de inhoud 232px mee. */
body[data-omgeving] #sidebar,
body[data-omgeving] #sidebar-scroll {
    background: var(--ca-nav-bg) !important;
}
body[data-omgeving] #sidebar-scroll {
    width: 232px;
}
@media (min-width: 992px) {
    body[data-omgeving] #sidebar {
        width: 232px;
    }
    body[data-omgeving] #page-container:not(.sidebar-mini) #sidebar {
        width: 232px;
    }
}
@media (max-width: 991px) {
    body[data-omgeving] #page-container.sidebar-visible-xs #sidebar {
        width: 232px;
    }
    body[data-omgeving] #page-container.sidebar-visible-xs #main-container {
        margin-left: 232px;
        margin-right: -232px;
    }
    body[data-omgeving] #page-container.sidebar-visible-xs.header-fixed-top header.navbar-fixed-top,
    body[data-omgeving] #page-container.sidebar-visible-xs.footer-fixed #page-content + footer {
        left: 232px;
        right: -232px;
    }
}
body[data-omgeving] .sidebar-nav > .sidebar-view-group > .sidebar-view-toggle {
    color: var(--ca-nav-muted);
    font-weight: 700;
}
body[data-omgeving] .sidebar-nav a {
    color: var(--ca-nav-text);
}
body[data-omgeving] .sidebar-nav > li.active > a,
body[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: 8px;
}
body[data-omgeving] .sidebar-user-name,
body[data-omgeving] .sidebar-brand span {
    color: var(--ca-nav-text);
}

/* ---------------------------------------------------------------------------------------------
   4. Kaarten, knoppen, statuslabels, toggle, tabs, tabel -- waarden uit Websites_dossier.html
--------------------------------------------------------------------------------------------- */
body[data-omgeving] {
    background: #F4F3EF;
}

/* 02-10-2026 (S4, keuze Matthias): zelfde kaart als de recente schermen (.af-kaart, .ca-ei-kaart, ca_editor.css .ca-ed-kaart).
   Was: rand #E2E0DA, radius 12px. */
.ca-kaart {
    background: #FFFFFF;
    border: 1px solid #EFEEE9;
    border-radius: 10px;
    padding: 16px;
}

.ca-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.ca-btn-primair {
    background: #17607A;
    color: #FFFFFF;
}
.ca-btn-primair:hover {
    background: #124C61;
    color: #FFFFFF;
}
.ca-btn-secundair {
    background: #FFFFFF;
    border: 1px solid #D3D1CA;
    color: #33322D;
}
.ca-btn-secundair:hover {
    background: #F4F3EF;
}

.ca-pil {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
}
.ca-pil-inorde {
    background: #E6F1EA;
    color: #1F5A38;
}
.ca-pil-waarschuwing {
    background: #FBF3E6;
    color: #7A4B00;
}
.ca-pil-fout {
    background: #FBEAE8;
    color: #B3261E;
}

.ca-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.ca-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.ca-toggle-schuif {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #D3D1CA;
    border-radius: 999px;
    transition: background .15s ease;
}
.ca-toggle-schuif::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform .15s ease;
}
.ca-toggle input:checked + .ca-toggle-schuif {
    background: #17607A;
}
.ca-toggle input:checked + .ca-toggle-schuif::before {
    transform: translateX(18px);
}

.ca-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #E2E0DA;
}
.ca-tabs a {
    padding: 10px 14px;
    font-size: 13px;
    color: #6B6A63;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.ca-tabs a.actief {
    color: #17607A;
    border-bottom-color: #17607A;
    font-weight: 500;
}

.ca-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ca-tabel th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6B6A63;
    padding: 8px 10px;
    border-bottom: 1px solid #E2E0DA;
}
.ca-tabel td {
    padding: 10px;
    border-bottom: 1px solid #EFEEE9;
}

/* 1440px: geen overloop, geen horizontale scroll (opdracht-eis) */
@media (min-width: 1440px) {
    body[data-omgeving] #page-container:not(.sidebar-mini):not(.enable-page-overlay) {
        overflow-x: hidden;
    }
}


/* Nazicht 26-09-2026 (Claude): het oude thema legt een donkere laag op het submenu en het merkvlak,
   waardoor donkere tekst op grijs kwam te staan. Binnen het omgevingsthema: geen eigen laag, iconen
   in de tekstkleur van het thema. */
body[data-omgeving] .sidebar-nav .sidebar-view-items,
body[data-omgeving] .sidebar-nav ul {
    background: transparent !important;
}
body[data-omgeving] .sidebar-nav .sidebar-view-items a,
body[data-omgeving] .sidebar-nav ul a,
body[data-omgeving] .sidebar-nav a .sidebar-nav-icon,
body[data-omgeving] .sidebar-nav a i {
    color: var(--ca-nav-text) !important;
}
body[data-omgeving] .sidebar-brand {
    background: transparent !important;
    color: var(--ca-nav-text) !important;
}

/* Nazicht 26-09-2026 (Claude): de zijbalk is 232px breed (sectie 3), maar #main-container en de vaste
   bovenbalk schoven nog 200px op (oude template). Gevolg: 32px inhoud onder de zijbalk, op elk scherm.
   Enkel op brede schermen met zichtbare, niet-geminimaliseerde zijbalk. */
@media (min-width: 992px) {
    body[data-omgeving] #page-container.sidebar-visible-lg:not(.sidebar-mini) #main-container {
        margin-left: 232px;
    }
    body[data-omgeving] #page-container.sidebar-visible-lg:not(.sidebar-mini) header.navbar-fixed-top {
        left: 232px;
    }
}


/* Fix 30-09-2026 (zijbalk-hover): ingeklapte zijbalk (sidebar-partial zonder sidebar-visible-lg).
   Sectie 3 zet #sidebar altijd op 232px, waardoor de (bijna doorzichtige) zijbalk over 232px de hover
   opving terwijl de inhoud op 65px stond, en main.css bij hover de inhoud + kopbalk van 65 naar 200px
   liet springen. Nu: smalle strook 65px, bij hover 232px als overlay, inhoud blijft staan. */
@media (min-width: 992px) {
    body[data-omgeving] #page-container.sidebar-partial:not(.sidebar-visible-lg) #sidebar {
        width: 65px;
    }
    body[data-omgeving] #page-container.sidebar-partial:not(.sidebar-visible-lg) #sidebar:hover {
        width: 232px;
        z-index: 1031; /* boven de vaste kopbalk (1030), onder modals (1040/1050) */
    }
    body[data-omgeving] #page-container.sidebar-partial:not(.sidebar-visible-lg) #sidebar:hover + #main-container {
        margin-left: 65px;
    }
    body[data-omgeving] #page-container.sidebar-partial:not(.sidebar-visible-lg) #sidebar:hover + #main-container header.navbar-fixed-top,
    body[data-omgeving] #page-container.sidebar-partial:not(.sidebar-visible-lg) #sidebar:hover + #main-container header.navbar-fixed-bottom,
    body[data-omgeving] #page-container.sidebar-partial.footer-fixed:not(.sidebar-visible-lg) #sidebar:hover + #main-container #page-content + footer {
        left: 65px;
    }
}