/* ==========================================================================
   0. KLEURPALET -- EEN BRON VAN WAARHEID
   --------------------------------------------------------------------------
   Alle kleuren in deze stylesheet trekken uit onderstaande tokens. Een tint
   bijstellen = hier een regel wijzigen. Palet is bewust gedempt ("niet hard"):
   verzadiging omlaag, zachte pastel-fills met donkere tekst van dezelfde
   kleurfamilie. Accent = terracotta, een rustige echo van het site-oranje.
   ========================================================================== */
:root {
    /* --- Neutralen / structuur --- */
    --ink:            #2c3e50;   /* titels, donkere balken */
    --ink-soft:       #34495e;   /* tabelheaders, iets lichter dan ink */
    --text:           #333333;   /* hoofdtekst */
    --text-muted:     #7f8c8d;   /* secundaire tekst, labels */
    --text-faint:     #94a3b8;   /* hints, tijdstempels */
    --border:         #e2e8f0;   /* standaard randen */
    --border-strong:  #cbd5e1;   /* nadrukkelijke randen */
    --surface:        #ffffff;   /* kaarten, witte vlakken */
    --surface-2:      #f8fafc;   /* lichte secties, hover */
    --surface-3:      #f1f5f9;   /* nog iets dieper grijs-blauw */
    --page-bg:        #f0f2f5;   /* paginavlak */

    /* --- Accent: terracotta (gedempte echo van site-oranje #fe5502) --- */
    --accent:         #d9663a;
    --accent-hover:   #c2562d;
    --accent-soft-bg: #fbede6;
    --accent-soft-fg: #9a4422;

    /* --- Primair: gedempt blauw (save, links, focus) --- */
    --primary:        #34708f;
    --primary-hover:  #2b5d77;
    --primary-soft-bg:#e9f1f6;
    --primary-soft-fg:#2a5872;

    /* --- Positief: goud / amber (add, actief, succes) --- */
    --success:        #c79024;
    --success-hover:  #ad7c1b;
    --success-soft-bg:#f6edd6;
    --success-soft-fg:#856312;

    /* --- Waarschuwing: oranje (onderscheidend van goud-succes & terracotta-accent) --- */
    --warning-soft-bg:#fde4d0;
    --warning-soft-fg:#9a4f1c;

    /* --- Gevaar / verwijderen: gedempt rood --- */
    --danger:         #c0564a;
    --danger-hover:   #a8473c;
    --danger-soft-bg: #fdece9;
    --danger-soft-fg: #8f3a30;

    /* --- Neutrale badge / gedempte actie --- */
    --neutral-soft-bg:#eef1f3;
    --neutral-soft-fg:#475569;

    /* --- Paars (alleen pageview-badge in de activity log) --- */
    --purple-soft-bg: #f3e9f7;
    --purple-soft-fg: #6a3a86;

    /* --- Maatvoering --- */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;
}

/* ==========================================================================
   1. BASIS & LAYOUT SYSTEM
   ========================================================================== */
body { 
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; 
    margin: 0; 
    background: var(--page-bg); 
    color: var(--text); 
    padding-bottom: 40px; 
    font-size: 11px; 
}

nav { 
    background: white; 
    padding: 10px 25px; 
    margin: 10px auto !important; 
    width: 99% !important; 
    max-width: 1050px !important; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    border-radius: 12px; 
    box-sizing: border-box; 
}

.nav-left, .nav-center, .nav-right { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
    text-transform: uppercase; 
    flex: 1; 
}

.nav-98 { 
    width: 99% !important; 
    max-width: 99% !important; 
}

.nav-center { justify-content: center; }
.nav-right { justify-content: flex-end; }

.nav-user { 
    font-size: 11px; 
    margin-left: 0; 
    font-weight: bold; 
}

.nav-right a { 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 11px; 
}

.nav-link-logout { 
    color: var(--danger) !important; 
}

.card { 
    background: white; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    width: 99% !important; 
    max-width: 1050px !important; 
    margin: 0 auto 20px auto !important; 
    box-sizing: border-box; 
}

.section { 
    margin-bottom: 20px; 
    padding: 0; 
    border: none; 
    background: transparent; 
}

/* Hangende tabs onder de titelkaart: admin-instellingen (.admin-tab) en
   OBS-tabs (.obs-tab) delen exact dezelfde look. */
.admin-tabs, .obs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 99% !important;
    max-width: 1050px !important;
    margin: -8px auto 24px auto !important;
    padding: 0;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}
.admin-tab, .obs-tab {
    padding: 14px 13px 9px 13px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    background: #e8edf3;
    border: 1px solid #d8e0ea;
    border-top: none;
    border-radius: 0 0 8px 8px;
    cursor: pointer;
}
.admin-tab.active, .obs-tab.active {
    color: #3c3151;
    background: #fff;
    border-color: transparent;
    position: relative;
    z-index: 3;
    margin-top: -8px;
    padding-top: 22px;
}
.admin-tab-pane { display: none; }
.admin-tab-pane.active { display: block; }

.viewer-page { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    overflow: hidden; 
}

/* ==========================================================================
   2. BUTTONS & INPUTS (STANDAARD)
   ========================================================================== */
.btn { 
    font-family: inherit; 
    padding: 4px 12px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, background-color 0.2s ease;
    white-space: nowrap;
}
.btn:active { transform: scale(0.95); }

.btn-add { background-color: var(--success) !important; color: white !important; }
.btn-add:hover { background-color: var(--success-hover) !important; transform: scale(1.02); }

.btn-del { background: var(--danger-soft-bg); color: var(--danger-soft-fg); }
.btn-del:hover { transform: scale(1.02); }
.btn-submit.btn-del { background: var(--danger-soft-bg); color: var(--danger-soft-fg); }
.btn-submit.btn-del:hover { background: #f7ddd6; }
.btn-danger { background: var(--danger) !important; color: #fff !important; }
.btn-danger:hover { background: var(--danger-hover) !important; transform: scale(1.02); }

.btn-x {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--danger-soft-bg) !important;
    color: var(--danger-soft-fg) !important;
    font-size: 16px !important;
    font-weight: bold;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-x:hover   { background: #f7ddd6 !important; transform: scale(1.05); }
.btn-x:active  { transform: scale(0.95); }
/* -lg bestaat nog voor oude aanroepen, maar is gelijk aan de basis (26px) */
.btn-x-lg { width: 26px !important; height: 26px !important; font-size: 16px !important; }

.btn-circle {
    width: 26px; height: 26px; min-width: 26px;
    padding: 0; border: none; border-radius: 50%;
    font-size: 13px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--surface); transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-circle:hover  { transform: scale(1.05); }
.btn-circle:active { transform: scale(0.95); }
.btn-circle-add  { background: var(--success); }
.btn-circle-add:hover  { background: var(--success-hover); }
.btn-circle-cancel { background: var(--danger-soft-bg); color: var(--danger-soft-fg); }
.btn-circle-cancel:hover { background: #f2d0c8; }
.btn-circle-save { background: var(--primary); }
.btn-circle-save:hover { background: var(--primary-hover); }
.btn-circle-preview { background: var(--primary); padding-left: 2px; }
.btn-circle-preview:hover { background: var(--primary-hover); }

.btn-del-text {
    background: var(--danger-soft-bg); color: var(--danger-soft-fg);
    border: none; cursor: pointer; font-size: 10px; font-weight: bold;
    text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm);
    transition: background-color .2s ease;
}
.btn-del-text:hover { background: #f7ddd6; }

.btn-save { background-color: var(--primary) !important; color: white !important; }
.btn-save:hover { background-color: var(--primary-hover) !important; transform: scale(1.02); }

.btn-disabled { width: 100%; margin-top: 15px; cursor: not-allowed !important; opacity: 0.6; }

.btn-move { 
    background: #ecf0f1 !important; 
    border: 1px solid #bdc3c7 !important; 
    padding: 2px 6px !important; 
    color: var(--ink) !important; 
}
.btn-move:hover { background: #bdc3c7 !important; }

.btn-dynamic { 
    background-color: var(--success) !important; 
    color: white !important; 
    padding: 4px 10px !important;
}

.btn-menu {
    background: #ecf0f1;
    color: var(--ink);
    text-decoration: none;
    padding: 6px 15px;
    border-radius: 6px; 
    font-size: 11px; 
    font-weight: bold; 
    transition: 0.2s; 
    white-space: nowrap; 
}
.btn-menu:hover { background: #bdc3c7; }
.btn-menu.active { background: var(--accent); color: white; }

.info-pill { 
    background: #ecf0f1; 
    padding: 2px 8px; 
    border-radius: 12px; 
    font-size: 10px; 
    font-weight: bold; 
    color: var(--ink); 
    border: 1px solid #bdc3c7; 
}

h1 { 
    color: var(--ink); 
    font-size: 18px; 
    border-bottom: 3px solid var(--accent); 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
    margin-top: -8px; 
}

input[type="text"], input[type="email"], input[type="password"], select {
    width: 100%;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 10px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    /* Dropdowns overal wit i.p.v. het grijze systeemvlak; specifiekere
       regels (bv. gekleurde type-selects) blijven gewoon voorgaan. */
    background: #fff;
    color: var(--text);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(217, 102, 58, 0.18);
}

/* 2.1 USER MANAGEMENT FORM & COMPONENTS */
.grid-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}
.form-group { display: flex; flex-direction: column; }
.form-group label {
    font-size: 11px; font-weight: bold; color: var(--text-muted);
    margin-bottom: 5px; text-transform: uppercase;
}
.form-control {
    height: 28px; padding: 8px 12px;
    border: 1px solid var(--border-strong); border-radius: 6px;
    font-size: 10px; box-sizing: border-box; width: 100%;
    transition: border-color 0.2s;
}
.form-control:focus {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 2px rgba(217, 102, 58, 0.18);
}
.btn-submit {
    background: var(--success); color: white; border: none;
    padding: 4px 12px; border-radius: 4px; font-family: inherit;
    font-size: 11px; font-weight: bold; cursor: pointer;
    text-transform: uppercase; transition: background 0.2s;
}
.btn-submit:hover { background: var(--success-hover); transform: scale(1.02);}

/* 2.2 USER MANAGEMENT TABLE & BADGES */
th { background-color: #f4f6f7; color: var(--ink-soft); padding: 8px 12px; text-align: left; font-size: 12px; text-transform: uppercase; }
td { padding: 8px 12px; border-bottom: 1px solid #ecf0f1; vertical-align: middle; font-size: 14px; }

#columns-table th,
#columns-table td { padding-top: 3px !important; padding-bottom: 3px !important; }
/* Eerste vijf (icoon)kolommen zo smal mogelijk: minder zijpadding, kopjes klein */
#columns-table th:nth-child(-n+5),
#columns-table td:nth-child(-n+5) { padding-left: 2px !important; padding-right: 2px !important; }
#columns-table th:nth-child(-n+5) { font-size: 10px; letter-spacing: 0; }
/* DB COLUMN staat in <code>; zelfde lettertype als de rest van de tabel */
#columns-table code { font-family: inherit; font-size: inherit; }

.badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; text-transform: uppercase; display: inline-block; }
.badge-admin { background: var(--danger-soft-bg); color: var(--danger-soft-fg); } 
.badge-user { background: var(--primary-soft-bg); color: var(--primary-soft-fg); }  
.badge-delete { background: var(--danger-soft-bg); color: var(--danger-soft-fg); }

.badge-status-clickable {
    padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: bold;
    text-transform: uppercase; text-decoration: none; display: inline-block;
    transition: transform 0.1s, opacity 0.2s; user-select: none;
}
.badge-status-clickable:hover { transform: scale(1.05); opacity: 0.9; }
.badge-active { background: var(--success-soft-bg); color: var(--success-soft-fg); } 
.badge-inactive { background: var(--surface-3); color: var(--neutral-soft-fg); }

.badge-status-disabled {
    padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: bold;
    text-transform: uppercase; display: inline-block;
    background: var(--success-soft-bg); color: var(--success-soft-fg);
    cursor: not-allowed; opacity: 0.7;
}

.clickable-username { color: var(--primary); cursor: pointer; user-select: none; transition: color 0.2s; }
.clickable-username:hover { color: var(--primary-hover); text-decoration: underline; }
/* USERS-tab als rijenlijst: chevron, avatar, naam+e-mail, chips, acties; detailpaneel eronder */
#users-list .usr-row, #companies-body .usr-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; background:#fff; border:1px solid var(--border,#dfe6e9); border-radius:9px; padding:6px 8px 6px 11px; }
#users-list .ft-chev, #companies-body .ft-chev { border:none; background:none; color:#9aa3af; cursor:pointer; font-size:11px; width:14px; padding:0; text-align:center; flex:0 0 auto; }
#users-list .usr-av, #companies-body .usr-av { width:30px; height:30px; border-radius:50%; background:#ECE9F2; color:#3c3151; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; }
#users-list .usr-av svg, #companies-body .usr-av svg { display:block; }
#users-list .usr-av-user      { background:#E6F1FB; color:#185FA5; }
#users-list .usr-av-permit    { background:#FAEEDA; color:#854F0B; }
#users-list .usr-av-obs_admin { background:#E1F5EE; color:#0F6E56; }
#users-list .usr-av-admin     { background:#FCEBEB; color:#A32D2D; }
#users-list .usr-av-qtrakk    { background:#EEEDFE; color:#534AB7; }
#companies-body .usr-av-cmp { background:#FAEEDA; color:#854F0B; }
/* Editors-lijst in de plotplan-admin: kleine rol-avatar per rij */
.pp-oe-av { width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; background:#E6F1FB; color:#185FA5; }
.pp-oe-av-permit    { background:#FAEEDA; color:#854F0B; }
.pp-oe-av-obs_admin { background:#E1F5EE; color:#0F6E56; }
.pp-oe-av-admin     { background:#FCEBEB; color:#A32D2D; }
#users-list .usr-id, #companies-body .usr-id { flex:0 0 220px; min-width:0; cursor:pointer; }
#users-list .usr-nm, #companies-body .usr-nm { font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#users-list .usr-em, #companies-body .usr-em { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#users-list .usr-cmp, #companies-body .usr-cmp { flex:1 1 0; min-width:0; overflow:hidden; text-align:center; }
#users-list .usr-cmp .badge { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#users-list .usr-chips, #companies-body .usr-chips { flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
#users-list .usr-flt, #companies-body .usr-flt { flex:1 1 0; min-width:0; display:flex; justify-content:center; }
#users-list .usr-chips .badge, #users-list .usr-cmp .badge { font-size:10px !important; padding:2px 7px; letter-spacing:.04em; }
#users-list .badge-obs { background:#e1f5ee; color:#085041; }
.ud-obs-chips { display:flex; flex-wrap:wrap; gap:4px; min-height:28px; align-items:center; }
.ud-obs-chips .ud-obs-chip { display:inline-flex; align-items:center; gap:5px; background:#e1f5ee; color:#085041; font-size:10px !important; padding:3px 8px; }
.ud-obs-chips .ud-obs-chip b { cursor:pointer; font-size:12px; line-height:1; }
#users-list .filter-actions, #companies-body .filter-actions { display:flex; align-items:center; justify-content:flex-end; white-space:nowrap; flex:0 0 auto; }
.on-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#3a9b57; margin-right:5px; vertical-align:baseline; }
#users-list .usr-ll, #companies-body .usr-ll { font-size:11px; color:var(--text-secondary); font-variant-numeric:tabular-nums; width:124px; flex:0 0 auto; text-align:right; white-space:nowrap; }
#users-list .user-detail-holder, #companies-body .user-detail-holder { flex:0 0 100%; }
#users-list .row-inactive > *:not(.user-detail-holder), #companies-body .row-inactive > *:not(.user-detail-holder) { opacity:.45; filter:grayscale(.6); }
.ud-panel { margin:4px 0 4px; padding:14px 16px 12px; border:1px solid var(--border); border-radius:10px; background:#f7f6fa; }

/* Rol-iconen in de account-dropdowns, gelijk aan de avatar-iconen in de lijst */
.ud-sel-role.is-user { background-color:#E6F1FB !important; color:#185FA5 !important; background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23185FA5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23185FA5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important; }
.ud-sel-role.is-permit { background-color:#FAEEDA !important; color:#854F0B !important; background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/><rect x='9' y='3' width='6' height='4' rx='2'/><path d='M9 14l2 2 4-4'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important; }
.ud-sel-role.is-obs_admin { background-color:#E1F5EE !important; color:#0F6E56 !important; background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 21v-2a4 4 0 0 1 4-4h2'/><path d='M22 16c0 4-2.5 6-3.5 6s-3.5-2-3.5-6c1 0 2.5-.5 3.5-1.5 1 1 2.5 1.5 3.5 1.5z'/><circle cx='10' cy='7' r='4'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important; }
.ud-sel-role.is-admin { background-color:#FCEBEB !important; color:#A32D2D !important; background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A32D2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6l4 6 5-4-2 10H5L3 8l5 4z'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23A32D2D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important; }
.ud-sel-role.is-qtrakk { background-color:#EEEDFE !important; color:#534AB7 !important; background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23534AB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 5h12l3 5-8.5 9.5a.7.7 0 0 1-1 0L3 10l3-5z'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23534AB7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important; }
/* Detailpaneel: velden links (2 kolommen), accountacties rechts */
.ud-cols { display:grid; grid-template-columns:1fr 270px; gap:16px; align-items:start; }
.ud-cols .ud-fields { grid-template-columns:repeat(6, 1fr); margin:0; border-left:none; background:transparent; padding:0; gap:14px 16px; }
.ud-cols .ud-fields > .detail-block { grid-column:span 2; }
.ud-cols .ud-fields > .detail-block:nth-child(1),
.ud-cols .ud-fields > .detail-block:nth-child(2) { grid-column:span 3; }
/* Compactere maatvoering in het detailpaneel, passend bij de rijenlijst */
.ud-cols .ud-fields .detail-block label { font-size:10px; margin-bottom:3px; }
.ud-cols .ud-fields .detail-block .form-control { height:28px; font-size:12px; }
.ud-cols .ud-fields .ud-select { height:28px; font-size:11px !important; }
.ud-cols .ud-fields .ud-notes { min-height:28px; font-size:12px; font-family:inherit; }
.btn-power { width:26px; height:26px; min-width:26px; padding:0; border:none; border-radius:50%;
    background:#eef1f4; color:#8a97a6; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    transition:background-color .15s, color .15s, transform .1s; }
.btn-power:hover { transform:scale(1.05); }
.btn-power.is-on { background:#e6f4ea; color:#1e7a3f; }
.ud-actions { border-left:1px solid var(--border); padding:0 0 0 16px; display:flex; flex-direction:column; align-self:stretch; }
.ud-act-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:11.5px; color:var(--ink-soft); }
.ud-act-row > :last-child { width:64px; display:flex; justify-content:flex-end; flex:0 0 auto; }
.ud-act-row form { display:flex; justify-content:flex-end; }
.ud-act-row .pwd-reset-link {
    width:26px; height:26px; min-width:26px; padding:0; border-radius:13px;
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    background:#eef1f4; color:var(--primary); white-space:nowrap;
}
.ud-act-row .pwd-reset-link:hover { background:#e3e8ee; }
.ud-act-row + .ud-act-row { border-top:1px solid var(--border); }
.ud-act-row.ud-act-danger { color:#8f3a30; }
.ud-notes { min-height:32px; resize:none; overflow:hidden; line-height:1.4; }
@media (max-width:760px) { .ud-cols { grid-template-columns:1fr; } }

.expandable-content {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    padding: 15px 10px; background: var(--surface-2); border-radius: 6px;
    margin: 10px 0; border-left: 4px solid var(--primary);
}
.detail-block { display: flex; flex-direction: column; }
.detail-block label {
    font-size: 11px; font-weight: bold; color: var(--text-faint);
    text-transform: uppercase; margin-bottom: 5px;
}
.detail-block span { color: var(--neutral-soft-fg); font-size: 14px; }

/* 2.3 USER MANAGEMENT ACTIVITY LOG */
.log-container { width: 100%; margin-top: 20px; }
.log-filter { max-width: 300px; margin-bottom: 20px; }
.log-filters-container { display: flex; gap: 20px; margin-bottom: 20px; }
.log-table-wrapper {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    max-height: 400px; overflow-y: auto; padding: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}
.log-time { color: var(--text-faint); font-size: 11px; display: inline-block; margin-right: 8px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   3. TABULATOR DATA GRID SPECIFIC
   ========================================================================== */
#group-container { 
    background: var(--surface); border: 1px solid #dfe6e9; border-bottom: none !important; 
    width: 99%; margin: 0 auto !important; border-radius: 12px 12px 0 0; 
    padding: 6px 15px; box-sizing: border-box; display: flex; align-items: center; 
}
#data-table { 
    flex-grow: 1; width: 99%; margin: 0 auto 5px auto !important; 
    border: 1px solid #dfe6e9; border-top: none !important; 
    background: var(--surface-2) !important; transform: translateZ(0); overflow: hidden; 
}
.tabulator { 
    font-size: 11px !important; background: var(--surface) !important; 
    border: 1px solid #dfe6e9 !important; border-top: none !important;
    width: 99%; margin: 0 auto !important; border-radius: 0 0 12px 12px; 
    box-sizing: border-box; overflow: hidden;
}
.tabulator-header { 
    background: var(--surface) !important; border-bottom: 1px solid #dfe6e9 !important; 
    margin-bottom: 0 !important; padding: 0 !important; 
}
.tabulator-tableholder { margin-top: -1px !important; padding-top: 0 !important; background: var(--surface); }
.tabulator-tableholder .tabulator-table > .tabulator-row.tabulator-group:first-child { border-top: none !important; }
.tabulator-col-title-holder { 
    display: flex !important; align-items: center !important; 
    justify-content: space-between !important; padding-right: 15px !important; position: relative !important; 
}
.tabulator-col-sorter { 
    position: absolute !important; right: 2px !important; top: 50% !important; 
    transform: translateY(-50%) !important; margin: 0 !important; 
}
.tabulator-col-title { 
    color: #000000 !important; font-weight: 700 !important; padding-right: 5px !important; 
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; 
}
.tabulator-popup-container, .tabulator-edit-select-list { background: var(--surface) !important; font-size: 9px !important; }
.tabulator-header-filter input { font-size: 8px !important; }
#btn-clear-groups, #btn-clear-filters, #btn-clear-sorting { display: none !important; }
#group-adder,
#cmt-group-adder,
#prg-group-adder { font-size: 9px !important; width: auto !important; height: 26px !important; padding: 2px 5px !important; }
/* GROUP ON-dropdown in de planning: witte achtergrond met donkere tekst */
#group-adder { background: #fff; color: var(--text); }

/* Permit desk: GROUP BY-dropdown in dezelfde stijl als de filter-dropdowns,
   past in de labelkolom (naast het icoon) */
#prm-group-adder { font-size: 11px !important; flex: 1 1 auto; width: auto !important; min-width: 0; height: 24px !important;
                   padding: 3px 4px !important; border: 1px solid #ccc; border-radius: 3px; background: #fff;
                   color: var(--text); font-family: inherit; line-height: 1.3; box-sizing: border-box; }

.group-tag { 
    background: var(--primary) !important; color: var(--surface) !important; 
    padding: 2px 8px !important; border-radius: 12px !important; font-size: 10px !important; 
    font-weight: 600 !important; display: inline-flex !important; align-items: center !important; 
    gap: 2px; border: none !important; 
}
.btn-pill-red { 
    background: var(--danger) !important; color: var(--surface) !important; 
    padding: 2px 10px !important; border-radius: 12px !important; font-size: 10px !important; 
    font-weight: bold !important; cursor: pointer !important; border: none !important; margin-left: 0 !important; 
}
.btn-pill-grey { 
    background: #555 !important; color: var(--surface) !important; 
    padding: 2px 10px !important; border-radius: 12px !important; font-size: 10px !important; 
    font-weight: bold !important; cursor: pointer !important; border: none !important; 
    margin-left: auto; white-space: nowrap; 
}

.tabulator .tabulator-row {
    background-color: var(--surface) !important; color: var(--text) !important;
    border-bottom: 1px solid #f1f2f6 !important; border-left: none !important; box-shadow: none !important;
}
.tabulator .tabulator-row::before,
.tabulator .tabulator-row.tabulator-selectable::before { display: none !important; }
.tabulator .tabulator-row .tabulator-cell:first-child { border-left: none !important; }
.tabulator .tabulator-row .tabulator-cell { padding-top: 3px !important; padding-bottom: 3px !important; }
.tabulator .tabulator-row { min-height: 0 !important; }
.tabulator-row-even { background-color: var(--surface-2) !important; }

/* ==========================================================================
   4. TABULATOR GROUPS (LEVELS 0 t/m 4)
   ========================================================================== */
.tabulator .tabulator-row.tabulator-group {
    border-top: 1px solid var(--ink-soft) !important;
    min-height: 28px !important; z-index: 20 !important; font-weight: bold;
}
.tabulator .tabulator-row.tabulator-group,
.tabulator .tabulator-row.tabulator-group span { color: var(--surface) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-0 { background: var(--ink) !important; padding-left: 10px !important; }
.tabulator-group-level-0 .tabulator-arrow { border-left-color: var(--surface) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 { background: #636e72 !important; padding-left: 30px !important; }
.tabulator-group-level-1 .tabulator-arrow { border-left-color: var(--surface) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 { background: #95a5a6 !important; padding-left: 50px !important; color: var(--text) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 span { color: var(--text) !important; }
.tabulator-group-level-2 .tabulator-arrow { border-left-color: var(--text) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 { background: #bdc3c7 !important; padding-left: 70px !important; color: var(--text) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 span,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow { color: var(--text) !important; }
.tabulator-group-level-3 .tabulator-arrow { border-left-color: var(--text) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 { background: #ecf0f1 !important; padding-left: 90px !important; color: var(--text) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 span,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow { color: var(--text) !important; }
.tabulator-group-level-4 .tabulator-arrow { border-left-color: var(--text) !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-6,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-7,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-8,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-9 { background: #ecf0f1 !important; color: #000 !important; }
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 span,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-6 span,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-7 span,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-8 span,
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-9 span { color: #000 !important; }
.tabulator-group-level-5 { padding-left: 110px !important; }
.tabulator-group-level-6 { padding-left: 130px !important; }
.tabulator-group-level-7 { padding-left: 150px !important; }
.tabulator-group-level-8 { padding-left: 170px !important; }
.tabulator-group-level-9 { padding-left: 190px !important; }
.tabulator .tabulator-row.tabulator-group .tabulator-arrow { margin-right: 10px !important; transform: scale(1.5); }
.tabulator-group-level-0 .tabulator-arrow,
.tabulator-group-level-1 .tabulator-arrow { border-left-color: var(--surface) !important; border-top-color: var(--surface) !important; }
.tabulator-group-level-2 .tabulator-arrow,
.tabulator-group-level-3 .tabulator-arrow,
.tabulator-group-level-4 .tabulator-arrow { border-left-color: var(--text) !important; border-top-color: var(--text) !important; }
.tabulator-group-level-5 .tabulator-arrow,
.tabulator-group-level-6 .tabulator-arrow,
.tabulator-group-level-7 .tabulator-arrow,
.tabulator-group-level-8 .tabulator-arrow,
.tabulator-group-level-9 .tabulator-arrow { border-left-color: #000 !important; border-top-color: #000 !important; }

/* ==========================================================================
   5. ADMIN PANEL & CONFIGURATION CLASSES
   ========================================================================== */
.table-responsive { overflow-x: auto; width: 100%; box-sizing: border-box; }
.table-responsive table { min-width: 600px; width: 100%; }
#columns-table { min-width: 850px; table-layout: fixed; }

 

.rts-field-label { font-size: 11px; }

/* ==========================================================================
   6. DATA-METRICS & DATA-BADGES
   ========================================================================== */
.status-badge { font-weight: bold; padding: 1px 8px; border-radius: 4px; font-size: 10px; display: inline-block; }
.status-start    { background: var(--success-soft-bg); color: var(--success-soft-fg); }
.status-wait     { background: var(--warning-soft-bg); color: var(--warning-soft-fg); }
.status-wait-1   { background: var(--warning-soft-bg); color: var(--warning-soft-fg); }
.status-wait-2   { background: #fbd0b0; color: var(--warning-soft-fg); }
.status-wait-3   { background: var(--danger-soft-bg); color: var(--danger-soft-fg); }
.status-wait-far { background: #ea868f; color: var(--surface); }
.status-done     { background: #f1f3f4; color: #5f6368; }
.status-nopred   { background: var(--primary-soft-bg); color: var(--primary-soft-fg); }
.status-error-red { color: var(--danger-soft-fg); background: var(--danger-soft-bg); padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.status-error-orange { color: var(--warning-soft-fg); font-weight: bold; background: var(--warning-soft-bg); padding: 2px 6px; border-radius: 4px; }
.val-positive { color: var(--success-soft-fg) !important; font-weight: bold; } 
.val-negative { color: var(--danger-soft-fg) !important; font-weight: bold; } 

/* ==========================================================================
   7. LOADER OVERLAY (ANIMATED)
   ========================================================================== */
#loader {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.9); z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-size: 14px; font-weight: bold; color: var(--ink);
}
/* Gantt-balkjes: drie 'taken' die als een mini-planning aangroeien. */
#loader .ldr { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
#loader .ldr span {
    height: 9px; border-radius: 5px; transform-origin: left;
    animation: loader-grow 1.4s ease-in-out infinite;
}
#loader .ldr span:nth-child(1) { width: 70px;  background: #3c3151; }
#loader .ldr span:nth-child(2) { width: 110px; background: #564a73; margin-left: 22px; animation-delay: .2s; }
#loader .ldr span:nth-child(3) { width: 85px;  background: var(--accent); margin-left: 44px; animation-delay: .4s; }
@keyframes loader-grow {
    0%, 100% { transform: scaleX(.25); opacity: .5; }
    50%      { transform: scaleX(1);   opacity: 1; }
}

/* ==========================================================================
   8. UTILITIES & SCROLLBARS
   ========================================================================== */
.full-width { width: 100%; }
.select-centered { text-align-last: center; text-align: center; }
.text-center { text-align: center; }
.flex-gap-10 { display: flex; gap: 10px; }
.mt-10 { margin-top: 10px; }
* { scrollbar-width: thin; scrollbar-color: #bdc3c7 #f1f1f1; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #95a5a6; }

/* ==========================================================================
   9. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 768px) {
    nav { flex-direction: column; gap: 10px; padding: 15px; }
    .nav-left, .nav-center, .nav-right { justify-content: center; flex-wrap: wrap; width: 100%; }
    #group-container { flex-direction: column; align-items: flex-start; }
    .btn-pill-grey { margin-left: 0; margin-top: 10px; width: 100%; }
}

/* ==========================================================================
   10. KEY BASELINE DATES TABLE STYLING
   ========================================================================== */
.key-dates-header {
    background: #3c3151; color: white;
    margin: -25px -25px 0 -25px; padding: 6px 8px; text-align: center;
    font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: .05em;
    text-transform: uppercase; border-radius: 12px 12px 0 0;
    border: 1px solid #3c3151; box-sizing: border-box; font-family: Calibri, Arial, sans-serif;
    position: relative;
}
/* OBS-naam binnen het kopje in accentkleur, zodat opvalt dat het specifiek over
   die OBS/block gaat. */
.key-dates-header .obs-highlight { color: #ffce8a; }

.key-dates-split {
    display: flex; margin: 0 -25px;
    gap: 16px;  /* ruimte tussen de helften zodat afgeronde binnenhoeken tegen wit vallen */
    align-items: flex-start;
}
.key-dates-half { flex: 1; width: 50%; }

.key-dates-table {
    width: 100%;
    border-collapse: separate;   /* nodig voor border-radius op cellen */
    border-spacing: 0;
    font-size: 12px; font-family: Calibri, Arial, sans-serif;
}
.key-dates-table td { padding: 6px 12px; }
.key-dates-half:first-child .key-dates-table td:first-child { padding-left: 25px; }
.key-dates-half:last-child .key-dates-table td:last-child { padding-right: 25px; }

/* Categoriebalk: lichtblauw, compacte hoogte, dun lijntje eronder */
/* Achtergrond op de TD-cellen (niet op de TR), zodat de afgeronde hoeken
   tegen wit vallen i.p.v. tegen een doorschemerende TR-achtergrond. */
.cat-row { font-weight: bold; }
.cat-row td {
    background: #cdddef; padding: 3px 10px; line-height: 1.5;
    border-bottom: 1px solid #b3c8e3;
}
.cat-title { color: #1f3a5f; text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.cat-row .col-date { font-size: 10px; font-weight: 600; color: #5a6b82; text-align: center; }

/* Dun verticaal streepje tussen START en END */
.cat-row .col-date:last-child { border-left: 1px solid #b3c8e3; }
.task-row .col-date:last-child { border-left: 1px solid #ececec; }

/* Afgeronde binnenhoeken in het midden (waar links en rechts samenkomen) */
.key-dates-split .key-dates-half:first-child .cat-row .col-date:last-child {
    border-top-right-radius: 7px; border-bottom-right-radius: 7px;
}
.key-dates-split .key-dates-half:last-child .cat-row .cat-title {
    border-top-left-radius: 7px; border-bottom-left-radius: 7px;
}

.task-row td {
    border-bottom: 0.5px solid #f0f0ee; color: var(--text);
    padding-top: 2px; padding-bottom: 2px;
}
.col-main { width: 60%; text-align: left; }
.col-date { width: 15%; text-align: center; white-space: nowrap; }

@media (max-width: 768px) {
    .key-dates-split { flex-direction: column; gap: 20px; }
    .key-dates-half { width: 100%; }
    .key-dates-half:first-child .key-dates-table td:last-child { padding-right: 25px; }
    .key-dates-half:last-child .key-dates-table td:first-child { padding-left: 25px; }
}

/* ==========================================================================
   11. ADMIN FORMS, TABLES & REMARKS (CLEANUP)
   ========================================================================== */
.flex-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.flex-col-2 { flex: 2; min-width: 150px; }
.flex-col-1 { flex: 1; min-width: 120px; }
.flex-col-0 { flex: 0; min-width: 60px; text-align: center; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table thead th { 
    background-color: var(--ink-soft) !important; color: white !important;
    padding: 8px 12px !important; font-size: 10px !important; font-weight: bold; 
    text-transform: uppercase; border: none !important;
}
.admin-table tbody td { 
    padding: 6px 12px !important; border-bottom: 1px solid #ddd !important; 
    vertical-align: middle; font-size: 11px !important; color: var(--text) !important;
}
.admin-table tbody tr:hover td { background-color: var(--surface-2) !important; }
.btn-action { 
    border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; 
    font-weight: bold; font-size: 10px; text-transform: uppercase; margin-right: 5px; 
    transition: transform 0.1s, opacity 0.2s; 
}
.btn-action:hover { transform: scale(1.05); opacity: 0.9; }
.btn-action.edit { background: var(--warning-soft-bg); color: var(--warning-soft-fg); } 
.btn-action.del { background: var(--danger-soft-bg); color: var(--danger-soft-fg); margin-right: 0; } 
.btn-action.save { background: var(--success-soft-bg); color: var(--success-soft-fg); } 
.btn-action.cancel { background: var(--surface-3); color: var(--neutral-soft-fg); margin-right: 0; } 

.remarks-display { padding: 0; font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; font-family: monospace; }
.admin-table th:nth-child(1), .admin-table td:nth-child(1),
.admin-table th:nth-child(4), .admin-table td:nth-child(4),
.admin-table th:nth-child(5), .admin-table td:nth-child(5),
.admin-table th:nth-child(6), .admin-table td:nth-child(6),
.admin-table th:nth-child(7), .admin-table td:nth-child(7) { width: 1%; white-space: nowrap !important; }
.admin-table th:nth-child(2), .admin-table td:nth-child(2),
.admin-table th:nth-child(3), .admin-table td:nth-child(3) { width: auto; }

/* ==========================================================================
   12. ADMIN USERS PAGE
   ========================================================================== */
table { width: 100%; border-collapse: collapse; }
h3    { color: var(--ink); }
.alert         { padding: 12px; border-radius: 6px; margin-bottom: 20px; font-weight: bold; }

.field-label { display: block; font-size: 11px; font-weight: bold; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; }
.label-danger { color: var(--danger); }
.col-shrink   { width: 1%; white-space: nowrap; }
.row-inactive { opacity: 0.65; }

/* Rechts uitlijnen in de user/company-tabellen: waterdicht, ongeacht andere regels */

.text-muted     { color: var(--text-muted); }
.text-faint     { color: #bdc3c7; }
.cell-lastlogin { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.nav-user-clickable { cursor: pointer; color: var(--accent); }
.badge-neutral { background: #bdc3c7 !important; color: var(--surface) !important; }
.detail-block .form-control { height: 32px; font-size: 13px; margin-top: 2px; }
.form-control:disabled,
.form-control[disabled]      { background: var(--surface-3); cursor: not-allowed; color: var(--text-faint); }
.detail-block-wide    { grid-column: span 3; }
.detail-block-actions { grid-column: 1 / -1; display: flex; align-items: flex-end; margin-top: 10px; }
.btn-submit.is-saving   { opacity: 0.7; }
.btn-submit.is-error    { background: var(--danger); }

#log-output { margin-top: 5px; background: var(--surface-2); }
.log-placeholder       { color: #64748b; text-align: center; padding: 40px 10px; font-weight: bold; }
.log-placeholder-empty { color: var(--warning-soft-fg); text-align: center; padding: 40px 10px; }
.log-user    { color: var(--neutral-soft-fg); }
.log-details { color: var(--neutral-soft-fg); margin-left: 10px; }
.log-ip      { color: var(--text-faint); float: right; font-size: 11px; }
/* Activity log als tijdlijn: inklapbare dag-koppen, lijn met gekleurde stippen */
.log-dayhead { display:flex; align-items:center; gap:8px; padding:5px 10px; margin:8px 0 4px;
    border-left:3px solid #6f9ab0; background:#f3f7fa; border-radius:0 6px 6px 0;
    font-size:11.5px; font-weight:700; color:var(--ink); cursor:pointer; user-select:none; }
.log-dayhead:hover { filter:brightness(.975); }
.log-tl { position:relative; padding-left:22px; margin:2px 0 6px; }
.log-tl::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--border); }
.log-te { position:relative; display:flex; align-items:baseline; gap:8px; padding:3px 4px 3px 0; font-size:12px; }
.log-te .log-details { flex:1; margin-left:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-te .log-ip { float:none; flex:0 0 auto; }
.log-dot { position:absolute; left:-19px; top:6px; width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 2px #fff; }
.log-dot.d-green { background:#639922; }
.log-dot.d-red   { background:#E24B4A; }
.log-dot.d-blue  { background:#378ADD; }
.log-dot.d-amber { background:#EF9F27; }
.log-dot.d-grey  { background:#B4B2A9; }
.log-chip-ip           { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18-2.5-2.6-2.5-15.4 0-18z'/></svg>") !important; background-position:11px center !important; padding-right:12px !important; }
.log-chip-ip.is-active { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18-2.5-2.6-2.5-15.4 0-18z'/></svg>") !important; background-position:11px center !important; padding-right:12px !important; }
.badge-danger   { background: var(--danger-soft-bg); color: var(--danger-soft-fg); }
.badge-info     { background: var(--primary-soft-bg); color: var(--primary-soft-fg); }
.badge-default  { background: var(--surface-3); color: var(--neutral-soft-fg); }
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;
}
.modal-overlay.is-open { display: flex; }
.modal-box { background: var(--surface); padding: 25px; border-radius: 8px; width: 300px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.modal-title { margin-top: 0; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 10px; }
.modal-box .form-control { height: 35px; font-size: 12px; }
.modal-actions { display: flex; gap: 10px; justify-content: space-between; }
.modal-msg { display: none; font-size: 11px; margin-bottom: 15px; padding: 10px; border-radius: 4px; font-weight: bold; text-align: center; }
.modal-msg.is-visible    { display: block; }
.modal-msg-success       { background: var(--success-soft-bg); color: var(--success-soft-fg); }
.modal-msg-error         { background: var(--danger-soft-bg); color: var(--danger-soft-fg); }
.mb-12   { margin-bottom: 12px; }
.mb-20   { margin-bottom: 20px; }
.btn-flex { flex: 1; text-align: center; }

/* -- SEND DATA TO DATABASE: voortgangs-/resultaat-popup ------------------- */
@keyframes pushSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.push-progress-card {
    background: var(--surface); border-radius: 10px; width: 520px; max-width: 92vw;
    max-height: 82vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.28);
    animation: pushSlideUp .28s ease-out;
}
.push-progress-header {
    padding: 16px 20px; font-weight: 800; letter-spacing: .04em; font-size: 14px;
    color: #fff; background: var(--accent);
}
/* Bezig-staat */
.push-progress-busy { padding: 34px 24px 38px; text-align: center; }
.push-spinner { display: flex; flex-direction: column; gap: 5px; margin: 0 auto 12px; width: 70px; }
.push-spinner span {
    height: 7px; border-radius: 4px; transform-origin: left;
    animation: loader-grow 1.4s ease-in-out infinite;
}
.push-spinner span:nth-child(1) { width: 44px; background: #3c3151; }
.push-spinner span:nth-child(2) { width: 70px; background: #564a73; margin-left: 14px; animation-delay: .2s; }
.push-spinner span:nth-child(3) { width: 54px; background: var(--accent); margin-left: 28px; animation-delay: .4s; }
.push-busy-text { font-size: 15px; font-weight: 700; color: var(--ink); }
.push-busy-sub  { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
/* Klaar-staat */
.push-progress-done { display: flex; flex-direction: column; min-height: 0; }
.push-progress-summary {
    padding: 14px 20px; font-size: 13px; font-weight: 700; text-align: center;
}
.push-progress-summary.is-success { background: var(--success-soft-bg); color: var(--success-soft-fg); }
.push-progress-summary.is-error   { background: var(--danger-soft-bg);  color: var(--danger-soft-fg); }
.push-progress-log {
    padding: 8px 12px; overflow-y: auto; max-height: 46vh;
    background: var(--surface-2); border-top: 1px solid var(--border);
}
/* In de popup de volle breedte gebruiken (de 50% is voor het inline-panel). */
.push-progress-log .import-log-entry { width: 100%; }
.push-progress-actions {
    padding: 12px 20px; display: flex; justify-content: flex-end;
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   13. DASHBOARD (index.php) -- basisklassen
   ========================================================================== */
/* Gedeelde stijl voor de drie "lege" meldingen (geen filters / geen datums /
   geen remarks), zodat ze er identiek uitzien: zelfde lettertype, grootte en
   inspringing. */
.empty-note, .key-dates-empty {
    text-align: left; margin: 0; padding: 18px 25px;
    color: var(--text-muted); font-style: italic; font-size: 13px; line-height: 1.45;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Tabelcel-variant (key-dates): overschrijf de compacte td-padding + Calibri. */
.key-dates-table td.empty-note { padding: 18px 25px; }
/* Remarks: de melding is een directe kind van .card (die zelf al 25px padding
   heeft), dus geen extra horizontale padding -> tekst lijnt op 100px net als de
   andere twee (die in full-bleed kaarten staan). */
.card > .empty-note { padding-left: 0; padding-right: 0; }

/* ===========================================================================
 * Print: kleuren behouden + paginafooter.
 * - print-color-adjust: exact zorgt dat achtergrond- en tekstkleuren (badges,
 *   groepsbalken, val-positive/negative) ook op papier/PDF verschijnen.
 * - @page-marges: linksonder de data-update-datum (gezet als CSS-variabele
 *   --print-footer-left door de pagina zelf), rechtsonder "Page x of y".
 *   Margin-boxes werken in moderne Chromium-browsers; browsers zonder
 *   ondersteuning printen gewoon zonder footer.
 * ======================================================================== */
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
@page {
    @bottom-left {
        content: var(--print-footer-left, "");
        font-size: 9px; font-family: Arial, sans-serif; color: #555;
    }
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 9px; font-family: Arial, sans-serif; color: #555;
    }
}

/* Sterknop in SCHEDULE SETTINGS > FILTERS: markeert 1 filter als standaard-
   layout voor een kale u_schedule.php. Open ster = uit, gevulde gouden ster =
   aan (zelfde goud als de save-knoppen). */
.ft-default-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
    background: #e7eaef; color: #3d4451; padding: 0;
    transition: background .15s, color .15s; vertical-align: middle;
}
.ft-default-btn:hover { background: #d8dde4; }
.ft-default-btn.is-on { background: #c79024; color: #fff; }
.ft-default-btn.is-on:hover { background: #b58120; }
.ft-default-btn:disabled { opacity: .45; cursor: not-allowed; }
.task-row.task-done { opacity: 0.5; }
/* Done-vinkje op het rapport: klein gevuld rondje met wit vinkje */
.done-check {
    display:inline-flex; align-items:center; justify-content:center;
    width:14px; height:14px; border-radius:50%;
    background:var(--success); color:#fff;
    font-size:9px; font-weight:bold; line-height:1;
    /* Negatieve verticale marges: het 14px-rondje telt anders mee in de
       regelhoogte en duwt afgevinkte rijen ~2px hoger dan gewone rijen.
       vertical-align 2px centreert het rondje weer op de tekst. */
    margin:-4px 5px -4px 0; vertical-align:2px;
}

/* Done-chip bij Registered Baseline Dates: rond klikbaar vinkje */
.done-chip {
    width:22px; height:22px; padding:0; border-radius:50%;
    border:2px solid #c9d0d9; background:#fff; color:transparent;
    font-size:12px; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s, border-color .15s, color .15s;
    vertical-align:middle;
}
.done-chip:hover { border-color:var(--success); color:#c9d0d9; }
.done-chip.is-on { background:var(--success); border-color:var(--success); color:#fff; }
.done-chip.is-on:hover { background:var(--success-hover); border-color:var(--success-hover); }
.pb-15 { padding-bottom: 15px; }
.mb-10 { margin-bottom: 10px; }

/* ==========================================================================
   14. SCHEDULE SETTINGS (admin_schedule.php)
   ========================================================================== */
.row-calc          { background-color: #f0faff; }
.is-hidden-vis     { visibility: hidden; }
.btn-move-cfg      { padding: 2px 5px; margin-left: 5px; }

/* ==========================================================================
   15. REPORT SETTINGS (admin_report.php)
   ========================================================================== */
.btn-submit-sm { padding: 4px 14px; font-size: 11px; }
.form-msg      { font-size: 12px; font-weight: bold; }
.msg-success   { color: var(--success-soft-fg); }
.msg-error     { color: var(--danger-hover); }
.row-dim       { opacity: 0.5; }
.nowrap        { white-space: nowrap; }
.cell-category { font-weight: bold; color: var(--primary); }
.cb-flush      { margin-top: 0; }
.input-date    { width: 110px; }

/* ==========================================================================
   16. SCHEDULE VIEWER (viewer.php)
   ========================================================================== */
#group-container { padding: 8px 15px; }
.group-bar      { display: flex; align-items: center; width: 100%; }
.group-controls { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
#active-groups  { display: flex; gap: 3px; flex-wrap: wrap; }
.group-actions  { margin-left: auto; display: flex; gap: 5px; }
.group-remove   { cursor: pointer; margin-left: 1px; }
.ml-10          { margin-left: 10px; }
#loader.is-hidden { display: none; }

/* ==========================================================================
   17. P6 XML IMPORT (admin_global.php)
   ========================================================================== */
.selector-grid          { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:12px; }
.field-group            { border:1px solid #c8d8ef; border-radius:6px; overflow:hidden; }
.field-group-header     { color:var(--surface); padding:8px 12px; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:12px; background:#3c3151; }
.toggle-all             { font-size:11px; cursor:pointer; background:rgba(255,255,255,.2); border:none; color:var(--surface); border-radius:3px; padding:2px 6px; }
.field-group-header .fg-chev { border:none; background:none; color:rgba(255,255,255,.8); cursor:pointer; font-size:13px; width:16px; padding:0; flex:0 0 auto; }
.field-group-header .fg-chev:hover { color:#fff; }
.toggle-all:hover       { background:rgba(255,255,255,.35); }
.field-group-body       { padding:8px 10px; max-height:220px; overflow-y:auto; }
.field-group-body-open  { max-height:none; padding:10px 12px; }
.col-row                { display:grid; grid-template-columns:55% 1fr; align-items:center; gap:5px; padding:2px 3px; border-radius:3px; }
.col-row:hover          { background:#eef3ff; }
.col-row label          { display:flex; align-items:center; gap:5px; font-size:12px; cursor:pointer; overflow:hidden; }
.count-badge            { background:rgba(255,255,255,.25); padding:1px 6px; border-radius:10px; font-size:11px; }
.filter-row             { display:grid; grid-template-columns:1fr 76px 1fr 20px; gap:3px; margin-bottom:4px; align-items:center; }
.filter-col-sel,
.filter-op-sel,
input.filter-col-sel[type="text"],
input.filter-val-sel[type="text"],
.filter-val-sel         { font-size:11px; padding:3px 4px; border:1px solid #ccc; border-radius:3px; width:100%; background:#fff;
                          /* min-width:0 laat de 1fr-kolommen puur op fractie sturen,
                             zodat de kolom-dropdown niet verspringt bij een lange naam */
                          min-width:0;
                          /* selects en tekstvelden krijgen anders elk hun eigen
                             systeemfont; expliciet erven houdt ze gelijk */
                          font-family:inherit; line-height:1.3; height:24px; box-sizing:border-box; color:var(--text); }
.filter-del             { width:26px; height:26px; min-width:26px; padding:0; border:none; border-radius:50%;
                          background:var(--danger-soft-bg); color:var(--danger-soft-fg); cursor:pointer;
                          font-size:16px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
                          transition:background-color .2s ease, transform .1s ease; }
.filter-del:hover       { background:#f7ddd6; transform:scale(1.05); }
.filter-del:active      { transform:scale(0.95); }
.arrow-sep              { font-size:10px; color:#888; text-align:center; }
.action-row             { display:flex; gap:8px; margin-top:12px; align-items:center; }
.panels-row             { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:14px; }
.import-log-panel           { background:#f5f5f5; border:1px solid #ddd; border-radius:6px; overflow:hidden; margin-top:16px; }
.import-log-header          { background:#e8e8e8; padding:8px 12px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ddd; }
.import-log-header span     { color:var(--text); font-weight:600; font-size:11px; letter-spacing:.06em; }
.import-log-header a        { font-size:10px; color:#888; text-decoration:none; }
.import-log-header a:hover  { color:var(--text); }
.import-log-body            { padding:8px; max-height:180px; overflow-y:auto; display:flex; flex-wrap:wrap; }
.import-log-entry           { display:grid; grid-template-columns:auto 1fr; gap:5px; font-size:11px; line-height:1.5; width:50%; min-width:300px; }
.import-log-time            { color:#999; white-space:nowrap; font-family:monospace; padding-top:1px; }
.import-log-msg             { color:#444; }
.import-log-success .import-log-time { color:var(--success-soft-fg); }
.import-log-success .import-log-msg  { color:var(--success-soft-fg); }
.import-log-error .import-log-time,
.import-log-error .import-log-msg   { color:var(--danger-soft-fg); }
.import-log-info .import-log-time,
.import-log-info .import-log-msg    { color:var(--primary); }
.import-log-empty           { color:var(--text-muted); font-size:11px; padding:6px 3px; }
.section-band { margin: -25px -25px 18px -25px; border-radius: var(--radius) var(--radius) 0 0 !important; display: block; }
.btn-sm  { padding:4px 10px !important; font-size:11px !important; }
.mt-20   { margin-top:20px; }

/* ==========================================================================
   18. GEREFACTORDE INLINE-STYLES -> KLASSEN
   ========================================================================== */
.m-0          { margin: 0; }
.mt-8         { margin-top: 8px; }
.mt-12        { margin-top: 12px; }
.mb-8         { margin-bottom: 8px; }
.mb-16        { margin-bottom: 16px; }

.is-hidden    { display: none; }
.d-inline     { display: inline; }

.w-10pct      { width: 10%; }
.w-13pct      { width: 13%; }
.w-14pct      { width: 14%; }
.row-flex-wrap   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-flex-end    { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.row-flex-gap8   { display: flex; gap: 8px; }
.row-actions-8   { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.row-between     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.row-label-inline{ display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.row-cond        { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 3px; }
.row-cond::before { content: attr(data-conn); flex: 0 0 44px; text-align: right; font-size: 11px; font-weight: 700; color: var(--primary); }
.row-cond[data-conn="OR"]::before { color: var(--danger); }
.row-cond.no-conn::before { content: "WHERE"; visibility: visible; color: var(--text-muted); }
.row-toolbar8    { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 2-koloms chart-config (Period + Capacity) */
.chart-cfg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; align-items: stretch; }
.chart-cfg-rightcol { display: flex; flex-direction: column; gap: 14px; }
.chart-cfg-panel { background: #efecf4; border: 1px solid #e0dceb; border-radius: 8px; padding: 12px; overflow: hidden; }
.chart-cfg-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #fff; text-transform: uppercase; text-align: center; background: #6b6480; margin: -12px -12px 10px -12px; padding: 7px 12px; border-radius: 8px 8px 0 0; }
.chart-cfg-panel .cfg-field { margin-bottom: 9px; }
.chart-cfg-panel .cfg-field:last-child { margin-bottom: 0; }
.chart-cfg-panel .cfg-field .form-control { width: 100%; box-sizing: border-box; }
.cfg-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hours-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.hours-grid label { display: block; font-size: 10px; color: var(--text-muted); text-align: center; margin-bottom: 2px; text-transform: uppercase; }
.hours-grid .form-control { text-align: center; }
/* TYPE-dropdown en uren-velden wit (in het paarse REMAINING-paneel) */
.chart-cfg-panel .form-control { background: #fff; }
@media (max-width: 720px) { .chart-cfg-cols { grid-template-columns: 1fr; } }
.hint-muted      { font-size: 11px; color: var(--text-muted); }
.hint-muted-mt6  { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
/* Progress-samenvatting met pills */
.progress-summary { font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.9; }

.data-pill-count { background: #6b6480; border-color: #6b6480; color: #fff; }
.pill-arrow { color: var(--text-muted); font-weight: 700; }
/* FROM DATE-veld en knoppen netjes op de onderkant uitlijnen */
.progress-toolbar { align-items: flex-end; }
.progress-toolbar form.row-toolbar8 { align-items: flex-end; margin-top: 0; }

.hint-muted-mb10 { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.hint-small      { font-size: 12px; color: #666; margin: 0 0 12px; }
.text-sm-44      { font-size: 12px; color: #444; }
.field-sublabel  { font-size: 11px; font-weight: 600; color: #666; margin-bottom: 6px; }
.field-sublabel-block { font-size: 11px; font-weight: 600; color: #666; display: block; margin-bottom: 3px; }
/* Opgeschoonde filtergroep (chart-config) */
.filter-data-box { background: #efecf4; border: 1px solid #e0dceb; border-radius: 8px; padding: 12px; margin-bottom: 12px; overflow: hidden; }
.filter-data-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #fff; text-transform: uppercase; text-align: center; background: #6b6480; margin: -12px -12px 10px -12px; padding: 7px 12px; border-radius: 8px 8px 0 0; }
.cond-group-head { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.btn-add-filter { width: 100%; margin-top: 4px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: #3c3151; background: none; border: 1px dashed var(--border-strong); border-radius: 6px; cursor: pointer; }
.btn-add-filter:hover { background: var(--surface-1); }
.col-note        { font-size: 9px; color: #aaa; margin-left: 4px; font-style: italic; }
.empty-italic    { color: var(--text-faint); font-style: italic; }
.is-locked-dim   { opacity: .55; }
.fc-32        { height: 32px; font-size: 12px; }
.fc-32-c      { height: 32px; font-size: 12px; text-align: center; text-align-last: center; }
.fc-32-w160   { height: 32px; font-size: 12px; width: 160px; }
.fc-28-c160   { height: 28px; font-size: 12px; max-width: 160px; text-align: center; text-align-last: center; }
.fc-center    { text-align: center; text-align-last: center; }
.fc-center-220{ max-width: 220px; text-align: center; text-align-last: center; }
.fc-name      { flex: 1; height: 28px; font-size: 13px; font-weight: 600; min-width: 150px; }
/* Chart-titel invulveld binnen de paarse header: semi-transparant wit + witte tekst */
.field-group-header .fc-name {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.30);
    color: #fff;
}
.field-group-header .fc-name::placeholder { color: rgba(255,255,255,0.65); }
.field-group-header .fc-name:focus {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.55);
    outline: none;
}
/* Dropdowns (COPY SETTINGS FROM + OBS) in de paarse header: zelfde stijl, witte tekst */
.field-group-header .fc-28-c160 {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.30);
    color: #fff;
    /* Basis .form-control heeft 8px verticale padding; bij 28px hoogte kapt
       dat de tekst in selects af. Nul verticale padding centreert netjes. */
    padding-top: 0; padding-bottom: 0;
}
.field-group-header .fc-28-c160:focus {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.55);
    outline: none;
}
/* Opengeklapte opties op donkere tekst, zodat ze leesbaar blijven op systeem-wit */
.field-group-header .fc-28-c160 option { color: var(--ink); background: #fff; }
.fc-name-up   { flex: 1; height: 28px; font-size: 13px; font-weight: 600; min-width: 150px; text-transform: uppercase; }
.input-color  { width: 104px; height: 40px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; background: #fff; }
/* GLOBAL CHART COLORS: nette kleur-tegels + ronde actieknoppen */
.color-tiles { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding: 4px 2px 8px; }
.color-tile { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.color-tile-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.color-tile-hex { font-size: 11px; font-weight: 600; color: var(--text-muted); font-family: var(--font-mono, monospace); letter-spacing: .02em; }
.color-tile:hover .input-color { border-color: #3c3151; }
.color-actions { position: absolute; right: 2px; bottom: 4px; display: inline-flex; gap: 8px; }
/* Compacte kaart (minder witruimte onder de inhoud) */
.card-compact { padding: 25px 25px 16px !important; }
.card-compact .section { margin-bottom: 0 !important; }
.card-compact .action-row { margin-bottom: 0 !important; }
/* Kleuren-kaart: extra tweaks bovenop card-compact */
.card-colors .section-band { margin-bottom: 12px !important; }
.card-colors .color-tiles { padding-top: 0; padding-bottom: 2px; }
.cond-conn-or   { color: var(--danger); }
.cond-conn-and  { color: var(--primary); }
.cond-group-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-bottom: 8px; background: var(--surface-2); }
/* MATCH ALL/ANY GROUPS: gecentreerd + eigen accentkleur (grijs-paars) als scheiding tussen groepen */
.group-logic-badge { display: flex; justify-content: center; }
.group-logic-badge .match-line { background: #e3def0; border-color: #ccc3e4; color: #3c3151; }
.cond-fixed-80  { width: 80px; min-width: 80px; flex: 0 0 80px; }
/* role + contains + value als groep gecentreerd; vrije ruimte links en rechts */
.row-cond .fc-col, .row-cond .fc-val { flex: 0 0 30%; width: auto; min-width: 0; }
.btn-link-primary { border: none; background: none; color: var(--primary); font-weight: 700; font-size: 12px; cursor: pointer; }
/* Inline MATCH [ALL] FILTERS op een regel: de select niet 100% breed laten worden */
.text-sm-44 { white-space: nowrap; }
.match-line { display: inline-flex; align-items: center; gap: 8px; background: #f4f2f8; border: 1px solid #e4e0ee; border-radius: 20px; padding: 5px 14px; color: #3c3151; font-weight: 600; }
.match-toggle { display: inline-flex; border: 1px solid #d5dcff; border-radius: 6px; overflow: hidden; }
.match-opt { border: none; background: #fff; color: #888; font-size: 11px; font-weight: 700; padding: 3px 12px; cursor: pointer; line-height: 18px; min-width: 46px; text-align: center; box-sizing: border-box; }
.match-opt + .match-opt { border-left: 1px solid #d5dcff; }
.match-opt.is-on { background: #3c3151; color: #fff; }
/* Compacte segmented toggle voor GROUP BY / CUMULATIVE (full-width in smalle kolom) */
.seg-toggle { display: flex; border: 1px solid #d5dcff; border-radius: 6px; overflow: hidden; width: 100%; }
.seg-opt { flex: 1 1 0; border: none; background: #fff; color: #888; font-size: 11px; font-weight: 700; padding: 4px 4px; cursor: pointer; line-height: 18px; text-align: center; }
.seg-opt + .seg-opt { border-left: 1px solid #d5dcff; }
.seg-opt.is-on { background: #3c3151; color: #fff; }
/* DATE LABEL schuifbalk */
.fc-slider { width: 100%; margin: 4px 0 0; accent-color: #3c3151; cursor: pointer; }
.slider-val { font-weight: 700; color: #3c3151; }

.rte-wrap    { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.rte-toolbar { background: var(--surface-2); border-bottom: 1px solid var(--border-strong); padding: 4px 6px; display: flex; gap: 4px; }
.rte-btn     { width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface); cursor: pointer; font-size: 13px; }
.rte-btn-sm  { font-size: 11px; }
.rte-btn-b   { font-weight: 700; }
.rte-btn-i   { font-style: italic; }
.rte-btn-u   { text-decoration: underline; }
.rte-sep     { width: 1px; background: var(--border-strong); margin: 2px 2px; }
.rte-area    { min-height: 100px; padding: 8px; font-size: 13px; font-family: inherit; outline: none; white-space: pre-wrap; line-height: 1.5; }
.chart-canvas-wrap { position: relative; height: 280px; }
.chart-empty-note  { font-size: 13px; color: var(--text-muted); padding: 8px; }
.report-band   { background: #3c3151; color: var(--surface); font-weight: 700; text-align: center; padding: 6px 8px; font-size: 15px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--radius) var(--radius) 0 0; border: 1px solid #3c3151 !important; box-sizing: border-box; vertical-align: middle; }
.report-note   { padding: 10px 12px; font-size: 13px; color: #444; text-align: left; }
.cell-flush    { padding: 0; overflow: hidden; }
.cell-plain    { background: var(--surface) !important; border: none !important; }
.cell-divider-top { border-top: 3px double #4a5560 !important; }

.checkbox-inline { font-weight: normal; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.btn-bare        { border: none; cursor: pointer; font: inherit; }

.remarks-prewrap { white-space: pre-wrap; font-family: inherit; }
.login-page  { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box;
    /* Effen vlak: het iso-papier wordt door de achtergrondtekening (svg)
       zelf meegeleverd, zodat de leidingen exact op de rasterlijnen liggen */
    background: #eef1f4;
}
/* Twee zachte gloeden (oranje en paars) die tegenover elkaar langzaam om de
   inlogkaart heen draaien en ondertussen om en om ademen. Puur CSS: elk is
   een oversized vierkante laag met de gloed uit het midden geplaatst; de
   laag draait om het schermmidden en neemt de gloed mee in een cirkel. */
.login-page::before, .login-page::after {
    content: ""; position: fixed; left: 50%; top: 50%;
    width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax;
    pointer-events: none;
    animation: login-orbit 26s linear infinite, login-breathe 7s ease-in-out infinite;
}
.login-page::before { background: radial-gradient(ellipse 26% 20% at 50% 41%, rgba(217,102,58,.22), transparent 70%); }
.login-page::after  { background: radial-gradient(ellipse 26% 20% at 50% 41%, rgba(86,74,115,.22), transparent 70%);
    animation: login-orbit-b 26s linear infinite, login-breathe 7s ease-in-out 3.5s infinite; }
@keyframes login-orbit   { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes login-orbit-b { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
@keyframes login-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* Login-animatie: zie assets/login_anim.css (geladen door login.php en set_password.php) */
/* Inlogknop: het gouden bol-vinkje, rechtsonder zoals in de popups (26px, sitestandaard) */
.gold-round-btn.login-submit { margin:6px 0 0 auto; display:flex; }

/* Projectnaam op de plek van de oude LOGIN-kop (accentkleur behouden) */
.login-project-h1 { color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.login-card  { width: 100% !important; max-width: 320px !important; margin: 0 !important; position: relative; z-index: 1; }
.login-card input[type="text"],
.login-card input[type="password"] { margin-bottom: 12px; height: 34px; }
.login-card .btn-submit { width: 100%; margin-top: 4px; }
.error-msg   { color: var(--danger); font-weight: bold; font-size: 11px; margin-bottom: 10px; }
.info-msg    { color: #854F0B; background:#FAEEDA; border-radius:6px; padding:7px 10px; font-weight:600; font-size:11px; margin-bottom:10px; }

/* Import-rij: import-knop links, DATA DATE-pil rechts uitgelijnd. */
.import-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* DATA DATE in een lichte pil. */
.datadate-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--ink-soft);
}
.datadate-pill .datadate-key { color: var(--text-faint); font-weight: 700; }
/* ==========================================================================
   19. DASHBOARD -- SCHEDULE OVERVIEW + KEY BASELINE DATES VERFIJNINGEN
   --------------------------------------------------------------------------
   Voeg dit blok TOE AAN HET EINDE van style.css. Het staat na sectie 10/13,
   dus de regels hieronder verfijnen die secties zonder ze te hoeven wijzigen.
   ========================================================================== */

/* --- 19.1 Titel-card + niet-klikbare UPDATE-tab (zoals OBS-tabs in REPORTS) - */
.title-card {
    margin-bottom: 0 !important;
    padding-bottom: 14px !important;
    position: relative;
    z-index: 2;
}
.title-update { font-size:12px; font-weight:700; letter-spacing:.04em; color:#64748b; white-space:nowrap; }
.title-card header,
.title-card h1 { margin-bottom: 0 !important; }

/* --- 19.2 SCHEDULE OVERVIEW: filtertabel-card --- */
.filter-card {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px;
    border: none !important;
    background: #fff;
}
.filter-card .key-dates-header { margin: 0; border-radius: 0; }
.filter-table-wrap { padding: 0 !important; margin: 0 !important; }

#filter-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 12px;
    table-layout: fixed;
}
#filter-table col.fc-name { width: 280px; }
#filter-table col.fc-act  { width: 34px; }
#filter-table th,
#filter-table td {
    padding: 10px 4px;
    text-align: center;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}
#filter-table thead .ft-head-top th:last-child,
#filter-table thead .ft-head-sub th:last-child { padding-right: 0; }

/* Twee-laags header (lichtblauw, zoals de baseline-dates card) */
#filter-table thead th { background: #cdddef; color: #1f3a5f; font-weight: 600; }
#filter-table thead .ft-head-top th {
    font-size: 10px;
    letter-spacing: .03em;
    padding: 8px 4px 3px;
    text-transform: none;
}
#filter-table thead .ft-head-sub th {
    font-size: 10px;
    font-weight: 400;
    padding: 1px 4px 5px;
    color: #5a6b82;
    text-transform: none;
}

/* Groepskleuren (bovenlaag) */
#filter-table .grp-start { color: #0F6E56; }
#filter-table .grp-sched { color: #185FA5; }
#filter-table .grp-late  { color: #854F0B; }
#filter-table .grp-crit  { color: #A32D2D; }

/* Gekleurde onderstreping (onderlaag) */
#filter-table .sub-start { border-bottom: 2px solid #1D9E75; }
#filter-table .sub-sched { border-bottom: 2px solid #378ADD; }
#filter-table .sub-late  { border-bottom: 2px solid #BA7517; }
#filter-table .sub-near  { border-bottom: 2px solid #D4537E; }
#filter-table thead .ft-head-sub th.sub-crit {
    border-bottom: 2px solid #E24B4A;
    color: #A32D2D;
    font-size: 17px;
    font-weight: 700;
    line-height: 10px;
}

/* Verticale scheiding tussen categoriegroepen */
#filter-table .ft-head-sub .sep-r { border-right: 0.5px solid rgba(31,58,95,.18); }
#filter-table tbody td.sep-r { border-right: 0.5px solid #eee; }

/* Filternaam: vaste breedte, afgekapt */
#filter-table th.ft-name { text-align: left; text-transform: none; }
#filter-table thead th.ft-name { vertical-align: middle; font-size: 11px; padding-left: 12px; }
#filter-table td.ft-name {
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    padding-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#filter-table td.ft-name .ft-name-link { color: #2a3543; text-decoration: none; }
#filter-table td.ft-name .ft-name-link:hover { text-decoration: underline; }
#filter-table tbody tr:hover { background: rgba(247,248,250,.6); }

/* Klikbare badges met categoriekleur */
#filter-table .ft-badge {
    display: inline-block;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s;
}
#filter-table .ft-badge:hover { filter: brightness(.94); }
#filter-table .ft-badge.b-ready { background: #E1F5EE; color: #0F6E56; }
#filter-table .ft-badge.b-sched { background: #E6F1FB; color: #185FA5; }
#filter-table .ft-badge.b-late  { background: #FAEEDA; color: #854F0B; }
#filter-table .ft-badge.b-near  { background: #FBEAF0; color: #993556; }
#filter-table .ft-badge.b-crit  { background: #FCEBEB; color: #A32D2D; }

/* Nul: grijze rand-pil, transparant, niet klikbaar */
#filter-table .ft-badge.ft-badge-zero {
    background: transparent;
    border: 0.5px solid #d3d1c7;
    color: #b4b2a9;
    cursor: default;
    pointer-events: none;
    filter: none;
}

/* Actieknoppen */
#filter-table th.ft-act, #filter-table td.ft-act { padding: 8px 2px; }
#filter-table .ft-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #e7eaef;
    color: #3d4451;
    font-size: 14px;
    transition: background .15s;
}
#filter-table .ft-edit:hover { background: #d3d9e2; }
#filter-table .ft-edit.is-saving { background: #c79024; color: #fff; }
#filter-table .ft-edit.is-saving:hover { background: #ba7517; }
#filter-table .ft-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #e9d3cf;
    color: #a23b2c;
    font-size: 15px;
    line-height: 1;
    transition: background .15s;
}
#filter-table .ft-del:hover { background: #dbb8b2; }

/* --- 19.3 KEY BASELINE DATES -- verfijningen (override op sectie 10) --- */
/* Compactere categoriebalk (zelfde lettergrootte, minder hoogte), lichtblauw */
.key-dates-table .cat-row td {
    background: #cdddef !important;
    padding: 3px 10px !important;
    line-height: 1.5;
    border-bottom: 1px solid #b3c8e3;
}
.key-dates-table .cat-row .cat-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f3a5f;
    letter-spacing: .03em;
}
.key-dates-table .cat-row .col-date {
    font-size: 10px;
    font-weight: 600;
    color: #5a6b82;
    text-align: center;
}

/* Dun verticaal streepje tussen START en END (laatste datumkolom) */
.key-dates-table .cat-row .col-date:last-child { border-left: 1px solid #b3c8e3; }
.key-dates-table .task-row .col-date:last-child { border-left: 1px solid #ececec; }

/* Afgeronde binnenhoeken in het midden (waar links en rechts samenkomen) */
.key-dates-split .key-dates-half:first-child .cat-row .col-date:last-child {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}
.key-dates-split .key-dates-half:last-child .cat-row .cat-title {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

/* Rustige rij-scheiding */
.key-dates-table .task-row td { border-bottom: 0.5px solid #f0f0ee; }
/* =========================================================================
   GEBUNDELDE COMPONENT-CSS (verplaatst uit inline <style>-blokken)
   Bronbestanden: u_schedule / admin_schedule / admin_report / admin_users
   / u_report. Kleuren gebruiken de :root-variabelen; ronde annuleerknoppen
   zijn samengevoegd tot een gedeelde .cfm-cancel-look.
   ========================================================================= */

/* -------------------------------------------------------------------------
   GEDEELD: ronde bevestigingsknoppen (vink + kruis)
   Overal 26px, gelijk aan .gold-round-btn en .btn-round-cancel.
   ------------------------------------------------------------------------- */
.cfm-btn {
    width:26px; height:26px; min-width:26px; flex:0 0 26px; padding:0; border:none;
    border-radius:50%; cursor:pointer; font-size:13px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    box-sizing:border-box;
    transition:background-color .2s ease, transform .1s ease;
}
.cfm-btn:active { transform:scale(0.93); }
.cfm-ok       { background:var(--success); color:#fff; }
.cfm-ok:hover { background:var(--success-hover); }
.cols-dirty { display:none; align-items:center; background:#fbf1dc; color:#7a5410; border:1px solid #e0a422; border-radius:12px; padding:2px 10px; font-size:10px; font-weight:600; letter-spacing:.04em; }
.cols-dirty.is-on { display:inline-flex; }
.cfm-ok.is-dirty { background:#e0a422; box-shadow:0 0 0 3px rgba(224,164,34,.25); }
.cfm-ok.is-dirty:hover { background:#c79024; }
.cfm-cancel       { background:var(--danger-soft-bg); color:var(--danger-soft-fg); font-size:16px; }
.cfm-cancel:hover { background:#f2d0c8; }

/* -------------------------------------------------------------------------
   GEDEELD: kleine ronde "annuleer/sluit/verwijder"-knop (rood)
   Vervangt de vroegere losse namen .btn-circle-cancel / .um-cancel-btn /
   .sv-cancel / .cmt-del. Gebruik: class="btn-round-cancel".
   ------------------------------------------------------------------------- */
.btn-round-cancel {
    width:26px; height:26px; flex:0 0 26px; padding:0; border:none;
    border-radius:50%; cursor:pointer; font-size:15px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    box-sizing:border-box;
    background:var(--danger-soft-bg); color:var(--danger-soft-fg);
    transition:background .15s, transform .1s;
}
.btn-round-cancel:hover  { background:#f2d0c8; }
.btn-round-cancel:active { transform:scale(.94); }
/* Compacte variant (20px), voor in comment-items */
.btn-round-cancel.is-sm { width:20px; height:20px; flex:0 0 20px; font-size:13px; }

/* -------------------------------------------------------------------------
   GEDEELD: kleine ronde "opslaan/verzend"-knop (goud vinkje)
   Vervangt .sv-save / .cmt-send / .filter-save-btn look.
   ------------------------------------------------------------------------- */
.btn-round-save {
    width:26px; height:26px; flex:0 0 26px; padding:0; border:none;
    border-radius:50%; cursor:pointer; font-size:15px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    box-sizing:border-box;
    background:var(--success); color:#fff;
    transition:background .15s, transform .1s;
}
.btn-round-save:hover  { background:var(--success-hover); }
.btn-round-save:active { transform:scale(.94); }
.btn-round-save:disabled { cursor:default; opacity:.85; }
.btn-round-save.is-sm  { width:20px; height:20px; flex:0 0 20px; font-size:12px; }

/* -------------------------------------------------------------------------
   GEDEELD: kleine ronde neutrale "sluit"-knop (grijs kruis)
   Vervangt .cmt-close.
   ------------------------------------------------------------------------- */
.btn-round-close {
    width:26px; height:26px; flex:0 0 26px; border:none; border-radius:50%; cursor:pointer;
    background:var(--neutral-soft-bg); color:var(--neutral-soft-fg); font-size:16px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s;
}
/* Sluitknop op de oranje titelbalk: semi-transparant wit */
#commentsModal .cmt-head .btn-round-close,
#permitModal   .cmt-head .btn-round-close {
    background:rgba(255,255,255,.22); color:#fff;
}
#commentsModal .cmt-head .btn-round-close:hover,
#permitModal   .cmt-head .btn-round-close:hover {
    background:rgba(255,255,255,.35);
}
.btn-round-close:hover { background:#dde2e6; }

/* =========================================================================
   u_schedule.php  (Schedule viewer)
   ========================================================================= */
.viewer-page .tabulator-col-title { text-transform:uppercase; }
.viewer-page .group-tag span       { text-transform:uppercase; }

/* Comment-knop in de comment-kolom: grijs als leeg, terracotta als gevuld */
.cmt-btn {
    border:none; background:transparent; cursor:pointer;
    line-height:1; padding:1px; border-radius:5px; position:relative;
    color:#b4b8be; transition:color .15s, background .15s;
    display:inline-flex; align-items:center; justify-content:center;
}
.cmt-btn .cmt-ico { display:block; }
.cmt-btn:hover { background:#f1f0ec; color:var(--accent-hover); }
.cmt-btn.has-comments { color:var(--accent); }
.cmt-btn.has-comments:hover { color:var(--accent-hover); }
/* Telling als kleine badge rechtsboven over het icoon */
.cmt-count {
    position:absolute; top:-3px; right:-4px;
    min-width:11px; height:11px; padding:0 2px; box-sizing:border-box;
    font-size:8px; font-weight:700; line-height:11px; text-align:center;
    color:#fff; background:var(--accent); border-radius:6px;
    font-family:'Segoe UI',sans-serif;
}
.tabulator-cell[tabulator-field="_comments"] { padding-left:0 !important; padding-right:0 !important; overflow:visible !important; }

/* Permit-knop: klembord met vink, grijs = leeg, terracotta = actief */
.prm-btn {
    border:none; background:transparent; cursor:pointer;
    line-height:1; padding:1px; border-radius:5px;
    color:#b4b8be; transition:color .15s, background .15s;
    display:inline-flex; align-items:center; justify-content:center;
}
.prm-btn .prm-ico { display:block; }
.prm-btn:hover { background:#f1f0ec; color:var(--accent-hover); }
.prm-btn.has-permit { color:#D4A017; }
.prm-btn.has-permit:hover { color:#b8860b; }
/* Beoordeelde aanvragen: groen = prepared, rood = rejected */
.prm-btn.has-permit.prm-ok { color:#2e6fb8; }
.prm-btn.has-permit.prm-ok:hover { color:#265e9c; }
.prm-btn.has-permit.prm-no { color:#c0392b; }
.prm-btn.has-permit.prm-no:hover { color:#a93226; }
.prm-btn.has-permit.prm-done { color:#2f9e57; }
.prm-btn.has-permit.prm-done:hover { color:#268a4a; }
.prm-btn.has-permit.prm-rel { color:#e07b00; }
.prm-btn.has-permit.prm-rel:hover { color:#c46e00; }
.prm-btn.has-permit.prm-live { color:#7c3aed; }
.prm-btn.has-permit.prm-live:hover { color:#6a2fce; }
.tabulator-cell[tabulator-field="_permit"] { padding-left:0 !important; padding-right:0 !important; overflow:visible !important; }
/* Smalle permit-kolom: gekozen filtertekst niet tonen (te weinig ruimte) */
.tabulator-col[tabulator-field="_permit"] .tabulator-header-filter input,
.tabulator-col[tabulator-field="_comments"] .tabulator-header-filter input {
    color:transparent !important; caret-color:transparent; text-shadow:none;
    cursor:pointer;
}

/* Header-filter (tickCross) in de smalle icoon-kolommen: netjes gecentreerd */
.tabulator-col[tabulator-field="_comments"] .tabulator-header-filter,
.tabulator-col[tabulator-field="_permit"] .tabulator-header-filter {
    text-align:center !important; padding:0 !important; margin:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:100% !important; height:100% !important; box-sizing:border-box !important;
}
.tabulator-col[tabulator-field="_comments"] .tabulator-header-filter input,
.tabulator-col[tabulator-field="_permit"] .tabulator-header-filter input {
    margin:0 auto !important; float:none !important; position:static !important;
    display:block !important; width:18px !important; height:22px !important;
    padding:0 !important; box-sizing:border-box !important; transform:translate(-5px, -7px) !important;
    border:0.5px solid #555 !important; border-radius:4px; background:#fff;
}

/* Save-view-modal */
#saveViewModal .sv-input {
    width:100%; box-sizing:border-box; height:38px;
    border:1px solid var(--border-strong); border-radius:8px; padding:0 12px;
    font-size:13px; margin:4px 0 6px; transition:border-color .15s;
}
#saveViewModal .sv-input:focus { outline:none; border-color:var(--success); box-shadow:0 0 0 3px rgba(199,144,36,.15); }
#saveViewModal .sv-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Comments-popup */
#commentsModal .modal-box { display:flex; flex-direction:column; max-height:80vh; width:94%; max-width:640px; }
#commentsModal .cmt-head {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:#3c3151; border-radius:6px; padding:8px 12px; margin-bottom:12px;
}
#commentsModal .cmt-sub { font-size:11px; color:var(--text-muted); margin:2px 0 12px; word-break:break-all; }
#commentsModal .cmt-list { flex:1 1 auto; overflow-y:auto; margin:0 -4px 12px; padding:0 4px; }
#commentsModal .cmt-section-comments { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
#commentsModal .cmt-section-comments .cmt-list { margin:0 0 10px; }
#commentsModal .cmt-empty { color:var(--text-faint); font-style:italic; font-size:12px; padding:14px 2px; text-align:center; }
#commentsModal .cmt-item { border:1px solid #e0e5eb; border-radius:8px; padding:8px 10px; margin-bottom:8px; background:#fff; }
#commentsModal .cmt-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px; }
#commentsModal .cmt-author { font-size:11px; font-weight:700; color:var(--ink); }
#commentsModal .cmt-time { font-size:10px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
#commentsModal .cmt-text { font-size:13px; color:var(--text); white-space:pre-wrap; word-break:break-word; line-height:1.45; }
#commentsModal .cmt-comp { color:#94a3b8; font-weight:400; }
#commentsModal .cmt-item.own { background:#FDF6E9; border-color:#F0C27A; }
#commentsModal .cmt-item.own .cmt-author { color:#633806; }
#commentsModal .cmt-item.own .cmt-comp   { color:#a9803f; }
#commentsModal .cmt-item.own .cmt-time   { color:#854F0B; }
#commentsModal .cmt-item.own .cmt-text   { color:#633806; }
#commentsModal .cmt-add { display:block; margin-bottom:10px; }
#commentsModal .cmt-input {
    width:100%; box-sizing:border-box; min-height:40px; max-height:120px; resize:vertical;
    border:1px solid var(--border-strong); border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit;
}
#commentsModal .cmt-input:focus { outline:none; border-color:var(--success); box-shadow:0 0 0 3px rgba(199,144,36,.15); }
#commentsModal .cmt-count { color:#94a3b8; font-weight:400; }
#commentsModal .cmt-section { border:1px solid #dfe4ea; border-radius:8px; padding:10px 12px; margin-bottom:10px; background:#f1f4f6; }
#commentsModal .cmt-section-title { font-size:11px; font-weight:700; letter-spacing:.05em; color:#5a6b7b; text-transform:uppercase; margin-bottom:8px; }

/* PROGRESS-besturing (werkt in comment- en permit-popup) */

.prog-pill {
    display:inline-flex; align-items:center; gap:5px;
    border:none; border-radius:10px; cursor:pointer; user-select:none;
    background:#eef1f4; color:#94a3b8;
    font-size:11px; font-weight:700; letter-spacing:.03em;
    padding:4px 12px; transition:background .15s, color .15s;
}
.prog-pill:hover { background:#e4e8ee; }
.prog-pill.is-on { background:var(--success-soft-bg); color:var(--success-soft-fg); }
.prog-pill.is-on::before { content:"\2713"; font-size:11px; }

#prog-value {
    width:62px; box-sizing:border-box; height:30px; text-align:center;
    border:1px solid var(--border-strong); border-radius:8px; font-size:13px; font-family:inherit;
}
#prog-value:focus { outline:none; border-color:var(--success); box-shadow:0 0 0 3px rgba(199,144,36,.15); }
.cmt-prog-pct { font-size:13px; font-weight:700; color:#5a6b7b; }
.prog-preset {
    border:1px solid var(--border-strong); background:#fff; color:#5a6b7b;
    border-radius:6px; font-size:12px; font-weight:700; cursor:pointer;
    height:30px; min-width:30px; padding:0 6px;
}
.prog-preset:hover { background:#FAEEDA; border-color:#EF9F27; color:#854F0B; }
.prog-preset.is-active { background:#FAEEDA; border-color:#EF9F27; color:#854F0B; }

.cmt-prog-presets { display:flex; gap:6px; }
.cmt-prog-free { display:flex; align-items:center; gap:6px; margin-left:14px; }
.cmt-prog-checks { display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.cmt-prog-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.prog-divider { width:1px; height:22px; background:var(--border-strong); margin:0 2px; flex:0 0 1px; }
.prog-book-row { display:flex; justify-content:flex-end; margin-top:8px; }
.gold-round-btn {
    width:26px; height:26px; flex:0 0 26px; border:none; border-radius:50%; cursor:pointer;
    background:#BA7517; color:#fff; font-size:13px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s, transform .1s;
}
.gold-round-btn:hover  { background:#9a6212; }
.gold-round-btn:active { transform:scale(.94); }
.gold-round-btn:disabled { opacity:.6; cursor:default; }
/* .is-sm bestaat nog voor oude aanroepen, maar is gelijk aan de basis (26px) */
.gold-round-btn.is-sm { width:26px; height:26px; flex:0 0 26px; font-size:13px; }

/* Permit-popup */
#permitModal .cmt-head {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:#3c3151; border-radius:6px; padding:8px 12px; margin-bottom:12px;
}
#permitModal .cmt-sub { font-size:11px; color:var(--text-muted); margin:2px 0 14px; word-break:break-word; }
#permitModal .modal-box { width:94%; max-width:640px; }
#permitModal .prm-section { border:1px solid #dfe4ea; border-radius:8px; padding:10px 12px; background:#f1f4f6; }
#permitModal .prm-section-title { font-size:11px; font-weight:700; letter-spacing:.05em; color:#5a6b7b; text-transform:uppercase; margin-bottom:8px; }
#permitModal .prog-section { margin-top:10px; }
/* Progress-velden gecentreerd in de popup */
#permitModal .cmt-prog-checks   { justify-content:center; }
#permitModal .cmt-prog-controls { justify-content:center; }
#permitModal .cmt-prog-free     { margin-left:0; }
#permitModal #prog-meta {
    border:1px solid #e0e5eb; border-radius:8px; background:#fff;
    padding:8px 12px 10px;
}
#permitModal .pm-grid {
    display:grid; grid-template-columns:52px minmax(0,1fr) auto;
    gap:5px 10px; align-items:center; font-size:11px;
}
#permitModal .pm-badge {
    background:#FAEEDA; color:#854F0B; font-weight:700;
    text-align:center; padding:2px 0; border-radius:9px;
}
#permitModal .pm-who  { color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#permitModal .pm-comp { color:#94a3b8; font-weight:400; }
#permitModal .pm-time { color:#94a3b8; font-variant-numeric:tabular-nums; }
#permitModal .prog-meta-title {
    text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em;
    color:#5a6b7b; text-transform:uppercase; margin-bottom:6px;
}

#permitModal .prm-request-btn {
    border:none; border-radius:8px; background:var(--success); color:#fff;
    font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:9px 16px; cursor:pointer;
}
#permitModal .prm-request-btn:hover { background:var(--success-hover); }
/* Losse verwijder-knop in permit-popup: 26px zodat hij bij .btn-round-close past */
/* permit-popup: geen aparte maat meer nodig, .cfm-btn is overal 26px */

/* =========================================================================
   admin_schedule.php  (Schedule settings)
   ========================================================================= */
/* Gouden toggle-switch (aan/uit, slaat zelf op) */
.gold-toggle {
    position:relative; width:46px; height:24px; border:none; border-radius:24px;
    background:#cfd4da; cursor:pointer; padding:0; transition:background .18s; flex:0 0 46px;
}
.gold-toggle .gold-toggle-thumb {
    position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s;
}
.gold-toggle.is-on { background:var(--success); }
.gold-toggle.is-on .gold-toggle-thumb { transform:translateX(22px); }
.gold-toggle:disabled { opacity:.5; cursor:default; }

/* Filters-tabel: compacte regelhoogte + kolombreedtes */

/* FILTERS-tab als rijenlijst: nummer, naam, samenvatting-chips, acties */
#filters-list .ft-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; background:#fff; border:1px solid var(--border,#dfe6e9); border-radius:9px; padding:6px 8px 6px 11px; }
#filters-list .ft-chev { border:none; background:none; color:#9aa3af; cursor:pointer; font-size:11px; width:14px; padding:0; text-align:center; flex:0 0 auto; }
#filters-list .ft-chev:disabled { opacity:.25; cursor:default; }
#filters-list .ft-num { min-width:22px; height:22px; border-radius:11px; font-size:11px; }
#filters-list .ft-nm { flex:0 0 auto; min-width:150px; max-width:260px; font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#filters-list .ft-name { flex:0 0 auto; width:240px; margin:0; }
#filters-list .ft-nm, #filters-list .ft-name { flex:1 1 auto; max-width:none; }
#filters-list .ft-sum { flex:0 0 100%; display:flex; flex-wrap:wrap; gap:4px; padding:6px 0 2px; border-top:1px solid var(--border,#dfe6e9); }
#filters-list .ft-chip { font-size:10.5px; line-height:1.5; padding:1px 8px; border-radius:999px; background:#f1efe8; color:#444441; white-space:nowrap; }
#filters-list .ft-chip-f { background:#ECE9F2; color:#3c3151; }
#filters-list .ft-chip-g { background:#e1f5ee; color:#085041; }
#filters-list .ft-chip-s { background:#faeeda; color:#633806; }
#filters-list .filter-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; flex:0 0 auto; }

/* Save-vink in filtertabel + popup (rond, goud) */
.filter-save-btn {
    width:26px !important; height:26px !important; flex:0 0 26px;
    display:inline-flex !important; align-items:center; justify-content:center;
    border:none !important; border-radius:50% !important; cursor:pointer;
    background:var(--success); color:#fff; font-size:14px; line-height:1;
    padding:0 !important; transition:background .15s; box-sizing:border-box;
}
.filter-save-btn:hover { background:var(--success-hover); }
.filter-save-btn:disabled { cursor:default; opacity:.85; }

/* =========================================================================
   admin_report.php  (Report settings, key dates, OBS, charts)
   ========================================================================= */
#dates-table-body .form-control { height:28px; font-size:11px; padding:2px 6px; }
#dates-table-body input.input-date { width:120px; }
#dates-table-body select.form-control { min-width:90px; }
.admin-table td { vertical-align:middle; }
/* Lichte, compacte kop — alleen voor de baseline-dates-tabel op admin_report.php
   (gescoped via de tbody-id; elders houdt .admin-table de donkere kop). */
.admin-table:has(#dates-table-body) thead th {
    padding-top:3px !important; padding-bottom:3px !important;
    background-color:#f4f6f7 !important; color:var(--ink-soft) !important;
}
/* Ronde edit/save/cancel-knoppen in de dates-tabel */
.rd-edit {
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
    background:#e7eaef; color:#3d4451; font-size:14px; transition:background .15s;
    vertical-align:middle; margin-right:4px;
}
.rd-edit:hover { background:#d3d9e2; }
.rd-save, .rd-cancel {
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
    font-size:15px; line-height:1; transition:background .15s;
    vertical-align:middle; margin-right:4px;
}
.rd-save   { background:var(--success); color:#fff; }
.rd-save:hover   { background:var(--success-hover); }
.rd-cancel { background:var(--danger-soft-bg); color:var(--danger-soft-fg); }
.rd-cancel:hover { background:#f2d0c8; }
#dates-table-body .rd-edit,
#dates-table-body .rd-save,
#dates-table-body .rd-cancel,
#dates-table-body .btn-x {
    vertical-align:middle; width:26px; height:26px;
    display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
}
/* OBS-nodes als compacte lijst-rijen */
#obs-list .obs-row { display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:0.5px solid #eee; }
#obs-list .obs-row:last-child { border-bottom:none; }
#obs-list .obs-row-input {
    flex:1; height:30px; font-size:13px; font-weight:600;
    border:1px solid transparent; background:transparent;
    padding:0 6px; border-radius:6px; transition:border-color .15s, background .15s;
}
#obs-list .obs-row-input:hover { border-color:var(--border); background:#fbfcfd; }
#obs-list .obs-row-input:focus { border-color:var(--accent); background:#fff; outline:none; box-shadow:0 0 0 2px rgba(217,102,58,.15); }
#obs-list .obs-rnd { width:26px !important; height:26px !important; min-width:26px; font-size:14px !important; }
#obs-list .obs-edit-btn {
    display:inline-flex; align-items:center; justify-content:center;
    border:none; border-radius:50%; cursor:pointer; line-height:1; transition:background .15s;
    background:#e7eaef !important; color:#3d4451 !important;
}
#obs-list .obs-edit-btn:hover { background:#d3d9e2 !important; }
#obs-list .obs-edit-btn.is-editing { background:var(--success) !important; color:#fff !important; }
#obs-list .obs-edit-btn.is-editing:hover { background:var(--success-hover) !important; }
#obs-list .obs-row-input[readonly] { border-color:transparent; background:transparent; cursor:default; }

/* Force-logout-knopje in de userstabel (deur-met-pijl) */
.btn-forcelogout { color:#854F0B; border-color:#EBD3A8; }
.btn-forcelogout:hover { background:#FAEEDA; border-color:#EF9F27; }

/* Project Data: statusregel geladen baseline/actual */
.pd-loaded {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:#f1f4f6; border:1px solid #dfe4ea; border-radius:8px;
    padding:8px 12px; margin:10px 0 14px; font-size:12px; color:var(--text);
}
.pd-loaded b { color:var(--ink); }
/* DATA BACKUP: sub-blokken binnen de kaart */
.bk-sub { border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-top:12px; }
.bk-sub-band { background:#564a73; color:#fff; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; text-align:center; padding:5px 8px; }
.bk-sub-bd { padding:10px 14px; }
.bk-pill { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2px 10px; font-size:11px; font-weight:700; }
.bk-pill-ok   { background:#e6f4ea; color:#1e6b3a; }
.bk-pill-err  { background:#fdece9; color:#8f3a30; }
.bk-pill-grey { background:#eef1f4; color:#8a97a6; }
/* MAINTENANCE MODE: statusbanner met grote schakelaar */
.mt-banner { display:flex; align-items:center; gap:14px; border-radius:8px; padding:12px 16px; margin:4px 0; background:#EAF3DE; color:#27500A; }
.mt-banner.is-on { background:#FCEBEB; color:#791F1F; }
.mt-big { font-size:14px; font-weight:700; }
.mt-sub { font-size:11.5px; opacity:.85; margin-top:2px; }
.mt-toggle.is-on { background:#c0392b !important; }
/* QTRAKK LICENSE: bezettingsbalk */
.lic-usage { margin-bottom:4px; }
.lic-usage-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; font-size:12.5px; margin-bottom:6px; }
.lic-usage-top .lic-period { justify-self:center; }
.lic-usage-top b { justify-self:end; }
.lic-period { display:inline-flex; align-items:center; border-radius:999px; padding:2px 10px; font-size:10px; font-weight:700; letter-spacing:.04em; background:#EEEDFE; color:#3C3489; }
.lic-bar { height:10px; border-radius:5px; background:#eef1f4; overflow:hidden; }
.lic-bar i { display:block; height:100%; border-radius:5px; transition:width .3s; }
/* STORED PROGRESS DATA: stat-tegels + gevarenzone */
.pg-tile { background:#f6f7f9; border-radius:8px; padding:10px 14px; flex:1; min-width:120px; }
.pg-lbl { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
.pg-val { font-size:15px; font-weight:700; margin-top:2px; color:var(--ink); font-variant-numeric:tabular-nums; }
.pg-danger { border:1px solid #F0997B; background:#FAECE7; border-radius:8px; padding:12px 14px;
    display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.pd-loaded.is-empty { color:#94a3b8; font-style:italic; }
.pd-loaded-dot { width:9px; height:9px; border-radius:50%; background:#3a9b57; flex:0 0 auto; }
.pd-loaded-del { margin-left:auto !important; }

/* Filterrij op slot: velden ogen als platte tekst tot het potlood is geklikt */

/* Sorteerprioriteit op de kolom-chip (Schedule Settings > COLUMNS) */

/* Zwevende melding: nieuwe import beschikbaar */

/* Permit desk: groep-tags met ruimere onderlinge afstand */
#prm-active-groups,
.adm-active-groups { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }

/* Actieknoppen rechts in de permit-kaart, gestapeld; huidige status uitgelicht */
.prm-actcol { display:grid; grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(3, auto);
              grid-auto-flow:column; gap:3px 5px; align-content:start; flex:0 0 164px; }
.prm-actcol .prm-act { width:100%; opacity:.72; padding:2px 4px; line-height:1.25; }
.prm-actcol .prm-act:hover { opacity:1; }
.prm-actcol .prm-act.is-current {
    opacity:1;
    box-shadow:0 0 0 2px #fff, 0 0 0 4px #374151;
}

/* Filternummer (database-id, blijft gelijk bij hernoemen) */
.ft-num {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 2px; margin-right:3px;
    background:#ECE9F2; color:#564a73; border-radius:9px;
    font-size:10px; font-weight:700; flex:0 0 auto;
}

/* QTRAKK-rol: groene badge in de gebruikerslijst */
.badge-qtrakk { background:#e2f3e7; color:#1e7a3f; }

/* Key baseline dates: groep per OBS, categorie-zebra binnen de groep */
.admin-table tbody tr.rd-obs-row td,
.admin-table tbody tr.rd-obs-row:hover td {
    background:transparent !important; padding:8px 0 4px;
}
.rd-obs-band {
    display:block; background:#564a73; color:#fff; font-weight:700; font-size:10px;
    letter-spacing:.06em; text-transform:uppercase; padding:5px 12px;
    text-align:center; border-radius:8px;
}
#dates-table-body tr.row-cat-shade td { background:#f2f4f7; }

/* JOB COUNT-instellingen: items per twee naast elkaar (1 kolom op smal) */
.cc-items-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:10px; margin-top:10px; align-items:start; }

/* JOB COUNT-charts (u_report): standen-kop boven de grafiek */
.cc-stats { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:6px 0 -8px; position:relative; z-index:1; }
.cc-stat-row {
    display:flex; align-items:center; gap:7px; font-size:10px;
    /* Zachtpaarse pill (app-accent) zodat de items beter opvallen */
    background:#f2eefa; border:1px solid #cfc2e6; border-radius:20px;
    padding:3px 11px;
    box-shadow:0 1px 4px rgba(30,41,59,.10);
}
.cc-line { display:inline-block; width:22px; flex:0 0 auto; }
.cc-stat-label { font-weight:700; color:#5b2d8e; white-space:nowrap; }
.cc-badge {
    display:inline-flex; align-items:baseline; gap:4px;
    border-radius:11px; padding:1px 9px;
    font-weight:600; letter-spacing:.02em; white-space:nowrap;
    color:#fff;   /* achtergrondkleur (chartkleur) komt inline mee */
}
.cc-badge b { font-size:11px; }
.cc-stat-of { color:rgba(255,255,255,.75); font-weight:400; }

/* Rapport-tabellen (u_report): 10 urenvelden per groepswaarde */
.rpt-tbl { width:100%; border-collapse:collapse; font-size:11px; }
.rpt-tbl th, .rpt-tbl td { border:1px solid #dfe4ea; padding:4px 8px; }
.rpt-tbl thead .rpt-super th {
    background:#3c3151; color:#fff; font-size:10px; font-weight:700;
    letter-spacing:.05em; text-align:center; padding:6px 8px;
}
.rpt-tbl thead .rpt-sub th {
    background:#564a73; color:#fff; font-size:10px; font-weight:700;
    letter-spacing:.03em; text-align:center; padding:5px 6px;
}
.rpt-tbl .rpt-groupth { min-width:150px; }
/* Dikkere scheidingslijnen om de blokken baseline / actual / delta,
   doorlopend over koppen, datarijen en de TOTAL-regel. */
.rpt-tbl thead .rpt-super th:nth-child(2),
.rpt-tbl thead .rpt-super th:nth-child(3),
.rpt-tbl thead .rpt-super th:nth-child(4),
.rpt-tbl thead .rpt-sub th:nth-child(1),
.rpt-tbl thead .rpt-sub th:nth-child(4),
.rpt-tbl thead .rpt-sub th:nth-child(8),
.rpt-tbl tbody td:nth-child(2),
.rpt-tbl tbody td:nth-child(5),
.rpt-tbl tbody td:nth-child(9) { border-left:2px solid #b8c4cc; }
/* Super- en subkop van hetzelfde blok lopen in elkaar over (geen
   horizontale lijn ertussen); de dunne verticale lijntjes tussen de
   subkoppen (TOTAL H | PLANNED H | ...) blijven gewoon doorlopen. */
.rpt-tbl thead .rpt-super th { border-bottom:none; }
.rpt-tbl thead .rpt-sub th { border-top:none;
    /* De standaard randkleur valt weg tegen de lichte tint; halftransparant
       donker blijft op elke sectiekleur zichtbaar. */
    border-left:1px solid rgba(0,0,0,.14); border-right:1px solid rgba(0,0,0,.14); }
.rpt-tbl tbody td { text-align:right; font-variant-numeric:tabular-nums; color:var(--text); background:#fff; font-size:10px; }
.rpt-tbl tbody td.rpt-name { text-align:left; font-weight:600; color:var(--ink); }
.rpt-tbl tbody tr:nth-child(even) td { background:#f7f9fa; }
.rpt-tbl td.rpt-neg { color:#c43a30; }
.rpt-tbl tr.rpt-total td { font-weight:700; background:#f1f4f6 !important; border-top:2px solid #564a73; color:var(--ink); }
/* Tabel loopt tot de randen van de card (compenseert de card-padding),
   naadloos aansluitend op de titelband erboven. */
.rpt-tbl-wrap { margin:0 -25px -25px -25px; }
.rpt-tbl-wrap > div { overflow-x:auto; }
.rpt-tbl th:first-child, .rpt-tbl td:first-child { border-left:none; }
.rpt-tbl th:last-child,  .rpt-tbl td:last-child  { border-right:none; }
.rpt-tbl tbody tr:last-child td { border-bottom:none; }
.rpt-tbl tr.rpt-total td:first-child { border-bottom-left-radius:12px; }
.rpt-tbl tr.rpt-total td:last-child  { border-bottom-right-radius:12px; }

/* User-popup: dropdowns kleuren mee met de gekozen waarde */
.ud-select {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    border:1px solid transparent !important; border-radius:8px !important;
    height:32px; font-size:12px !important; font-weight:700; cursor:pointer;
    padding:0 28px 0 30px !important;
    background-color:#eef1f4 !important; color:#5a6b7b !important;
    background-repeat:no-repeat, no-repeat !important;
    background-position:9px center, right 9px center !important;
    transition:background-color .15s, color .15s;
}
.ud-select:focus { outline:none; box-shadow:0 0 0 2px rgba(217,102,58,.15); }
.ud-select:disabled { cursor:default; opacity:.75; }
.ud-sel-role              { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a95a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.ud-sel-obs               { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='6' r='1.4'/%3E%3Cline x1='9' y1='6' x2='21' y2='6'/%3E%3Ccircle cx='7' cy='12' r='1.4'/%3E%3Cline x1='12' y1='12' x2='21' y2='12'/%3E%3Ccircle cx='10' cy='18' r='1.4'/%3E%3Cline x1='15' y1='18' x2='21' y2='18'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a95a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.ud-sel-obs.is-set        { background-color:#E1F5EE !important; color:#085041 !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23085041' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='6' r='1.4'/%3E%3Cline x1='9' y1='6' x2='21' y2='6'/%3E%3Ccircle cx='7' cy='12' r='1.4'/%3E%3Cline x1='12' y1='12' x2='21' y2='12'/%3E%3Ccircle cx='10' cy='18' r='1.4'/%3E%3Cline x1='15' y1='18' x2='21' y2='18'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23085041' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.ud-sel-company           { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M10 21v-4h4v4'/%3E%3Cline x1='8' y1='8' x2='8' y2='8.01'/%3E%3Cline x1='12' y1='8' x2='12' y2='8.01'/%3E%3Cline x1='16' y1='8' x2='16' y2='8.01'/%3E%3Cline x1='8' y1='12' x2='8' y2='12.01'/%3E%3Cline x1='12' y1='12' x2='12' y2='12.01'/%3E%3Cline x1='16' y1='12' x2='16' y2='12.01'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a95a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.ud-sel-company.is-set    { background-color:#FAEEDA !important; color:#854F0B !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M10 21v-4h4v4'/%3E%3Cline x1='8' y1='8' x2='8' y2='8.01'/%3E%3Cline x1='12' y1='8' x2='12' y2='8.01'/%3E%3Cline x1='16' y1='8' x2='16' y2='8.01'/%3E%3Cline x1='8' y1='12' x2='8' y2='12.01'/%3E%3Cline x1='12' y1='12' x2='12' y2='12.01'/%3E%3Cline x1='16' y1='12' x2='16' y2='12.01'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }

/* User-detail-popup: profielkaart-kop (avatar, badges, last login) */

.badge-company { background:#FAEEDA; color:#854F0B; }

/* Wachtwoord-reset als schakelbare link in de actieregel */
.pwd-reset-link {
    display:inline-flex; align-items:center; gap:6px;
    border:none; background:transparent; cursor:pointer;
    font-size:11px; font-weight:600; color:var(--primary); padding:4px 8px; border-radius:8px;
    transition:background .15s, color .15s;
}
.pwd-reset-link:hover { background:#eef1f4; }
.pwd-reset-link .prl-on { display:none; }
.pwd-reset-link.is-armed { background:#FAEEDA; color:#854F0B; }
.pwd-reset-link.is-armed .prl-off { display:none; }
.pwd-reset-link.is-armed .prl-on { display:inline; }

/* Activity log: instellingenblok - welke categorieen gelogd worden */
.log-settings-box {
    border:1px solid #e6e9ee; border-radius:8px; background:#f7f9fa;
    padding:10px 14px 12px; margin-bottom:14px;
}
.log-settings-title { font-size:11px; font-weight:700; letter-spacing:.05em; color:#5a6b7b; text-transform:uppercase; margin-bottom:8px; }
.log-settings-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(185px, 1fr));
    gap:9px 18px;
}
.log-setting { display:inline-flex; align-items:center; gap:7px; }
.log-setting-label { font-size:11px; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.gold-toggle.gold-toggle-sm { width:30px; height:17px; flex:0 0 30px; border-radius:17px; }
.gold-toggle.is-locked { cursor:default; }
.gold-toggle.gold-toggle-sm .gold-toggle-thumb { width:13px; height:13px; top:2px; left:2px; }
.gold-toggle.gold-toggle-sm.is-on .gold-toggle-thumb { transform:translateX(13px); }

/* Activity log: filters als icoon-chips (amber zodra een filter actief is) */
.log-filters-container { flex-wrap:wrap; gap:10px !important; }
.log-chip {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    width:auto !important; min-width:160px; height:30px !important;
    border:1px solid var(--border-strong) !important; border-radius:16px !important;
    background-color:#fff !important; color:#5a6b7b !important;
    font-size:11px !important; font-weight:700; letter-spacing:.02em;
    padding:0 28px 0 30px !important; cursor:pointer; line-height:28px;
    background-repeat:no-repeat, no-repeat !important;
    background-position:11px center, right 10px center !important;
    transition:background-color .15s, border-color .15s, color .15s;
}
.log-chip:hover { background-color:#f6f8fa !important; }
.log-chip:focus { outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 2px rgba(217,102,58,.12); }
/* IP-filter is een tekstveld, maar oogt exact als de andere chips. */
input.log-chip-ip { max-width:170px; }
input.log-chip-ip::placeholder { color:#5a6b7b; font-weight:700; letter-spacing:.02em; }
.log-chip.is-active { background-color:#FAEEDA !important; border-color:#EF9F27 !important; color:#854F0B !important; }
.log-chip-user           { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a95a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.log-chip-user.is-active { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23BA7517' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.log-chip-company           { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M10 21v-4h4v4'/%3E%3Cline x1='8' y1='8' x2='8' y2='8.01'/%3E%3Cline x1='12' y1='8' x2='12' y2='8.01'/%3E%3Cline x1='16' y1='8' x2='16' y2='8.01'/%3E%3Cline x1='8' y1='12' x2='8' y2='12.01'/%3E%3Cline x1='12' y1='12' x2='12' y2='12.01'/%3E%3Cline x1='16' y1='12' x2='16' y2='12.01'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a95a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.log-chip-company.is-active { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M10 21v-4h4v4'/%3E%3Cline x1='8' y1='8' x2='8' y2='8.01'/%3E%3Cline x1='12' y1='8' x2='12' y2='8.01'/%3E%3Cline x1='16' y1='8' x2='16' y2='8.01'/%3E%3Cline x1='8' y1='12' x2='8' y2='12.01'/%3E%3Cline x1='12' y1='12' x2='12' y2='12.01'/%3E%3Cline x1='16' y1='12' x2='16' y2='12.01'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23BA7517' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.log-chip-action           { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a95a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
.log-chip-action.is-active { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23BA7517' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }

/* Filters-tab: users-toewijzing als icoon-chip (persoontje + aantal) */
.usr-chip {
    display:inline-flex; align-items:center; gap:5px;
    border:1px solid transparent; border-radius:11px; cursor:pointer;
    background:#FAEEDA; color:#854F0B; font-size:11px; font-weight:700;
    padding:3px 10px; line-height:1; transition:background .15s, color .15s;
}
.usr-chip:hover { background:#f4e2c2; }
.usr-chip.is-empty { background:transparent; color:#94a3b8; border-color:var(--border-strong); }
.usr-chip.is-empty:hover { background:#eef1f4; }

/* Columns-tab (Schedule Settings): icoon-chips, align-segment, order-stepper
   en een TYPE-select die meekleurt met de gekozen waarde */
#columns-table .col-chip {
    width:26px; height:26px; padding:0; border:none; border-radius:50%;
    background:transparent; color:#c3cad3; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s, color .15s;
}
#columns-table .col-chip:hover { background:#eef1f4; color:#8a95a3; }
#columns-table .col-chip.is-on { background:#FAEEDA; color:#854F0B; }
#columns-table .col-chip.is-on:hover { background:#f4e2c2; }

#columns-table .align-seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:7px; overflow:hidden; background:#fff; vertical-align:middle; }
#columns-table .align-btn {
    border:none; border-radius:0; background:transparent; color:#8a95a3;
    padding:4px 7px; cursor:pointer; line-height:1; display:inline-flex; align-items:center;
    transition:background .15s, color .15s;
}
#columns-table .align-btn + .align-btn { border-left:1px solid var(--border); }
#columns-table .align-btn:hover { background:#eef1f4; }
#columns-table .align-btn.is-on { background:#FAEEDA; color:#854F0B; }

.order-stepper { display:inline-flex; flex-direction:column; border:1px solid var(--border-strong); border-radius:7px; overflow:hidden; background:#fff; vertical-align:middle; }
.order-btn {
    border:none; border-radius:0; background:transparent; color:#8a95a3;
    padding:2px 8px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s, color .15s;
}
.order-btn + .order-btn { border-top:1px solid var(--border); }
.order-btn:hover { background:#eef1f4; color:#5a6b7b; }

/* Sleepgreep voor kolomvolgorde: op EEN regel naast de order-stepper,
   anders wrapt de greep erboven en wordt de rij onnodig hoog */
#columns-table .cell-order { white-space:nowrap; }
#columns-table .col-drag {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:26px; margin-right:2px; vertical-align:middle;
    color:#c3cad3; cursor:grab; border-radius:5px;
    transition:background .15s, color .15s;
}
#columns-table .col-drag:hover { background:#eef1f4; color:#5a6b7b; }
#columns-table .col-drag:active { cursor:grabbing; }
#columns-table tr.is-dragging { opacity:.45; background:#FAEEDA; }
#columns-table tr.is-dragging td { border-top:1px dashed #854F0B; border-bottom:1px dashed #854F0B; }

#columns-table .type-select {
    font-weight:700 !important; border:1px solid transparent !important; border-radius:8px !important;
    cursor:pointer; text-align:left; text-align-last:left;
    padding-left:26px !important;
    background-repeat:no-repeat !important;
    background-position:8px center !important;
}
#columns-table .type-select.type-text { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 7 4 4 20 4 20 7'/%3E%3Cline x1='9' y1='20' x2='15' y2='20'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3C/svg%3E") !important; }
#columns-table .type-select.type-number { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23856312' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E") !important; }
#columns-table .type-select.type-percentage { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E") !important; }
#columns-table .type-select.type-date { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23085041' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important; }
#columns-table .type-select.type-calc { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23564a73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 L20 20 H4 Z'/%3E%3C/svg%3E") !important; }
#columns-table .type-select.type-rts_status { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23564a73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E") !important; }
#columns-table .type-select.type-text       { background-color:#eef1f4 !important;              color:#5a6b7b !important; }
#columns-table .type-select.type-number     { background-color:var(--success-soft-bg) !important; color:var(--success-soft-fg) !important; }
#columns-table .type-select.type-percentage { background-color:#FAEEDA !important;              color:#854F0B !important; }
#columns-table .type-select.type-date       { background-color:#E7F0FA !important;              color:#1B5A96 !important; }
#columns-table .type-select.type-calc       { background-color:#ECE9F2 !important;              color:#564a73 !important; }
#columns-table .type-select.type-rts_status { background-color:#ECE9F2 !important;              color:#564a73 !important; }

/* Remarks: per OBS een eigen box; titelbalk gecentreerd in lichter paars
   (band = #3c3151, deze balk een tint lichter) */
#remark-boxes .remark-box { border:1px solid #e6e9ee; border-radius:8px; padding:12px 14px; background:#fbfcfd; margin-bottom:14px; }
#remark-boxes .remark-box:last-child { margin-bottom:0; }
#remark-boxes .remark-box-title {
    margin:-12px -14px 12px -14px;
    background:#564a73; color:#fff;
    text-align:center; font-size:12px; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase;
    padding:6px 8px; border-radius:7px 7px 0 0;
}
#remark-boxes .remark-box-title span { color:#fff; }
#remark-boxes .rte-area { min-height:70px; background:#fff; }

/* Registered Companies: inline naam-bewerken (zelfde look als de OBS-lijst) */
#companies-body .cmp-row-input {
    width:100%; box-sizing:border-box;
    /* Regelhoogte gelijk aan de userslijst (24px inhoud, zoals de btn-x daar) */
    height:24px; line-height:22px;
    /* Zelfde letter en kleur als de username in de userslijst (12px in dit pane) */
    font-size:12px; font-weight:bold; color:var(--primary); font-family:inherit;
    border:1px solid transparent; background:transparent;
    padding:0 6px; border-radius:6px; transition:border-color .15s, background .15s;
}
#companies-body .cmp-row-input:not([readonly]) { color:var(--ink); }
#companies-body .cmp-row-input:hover { border-color:var(--border); background:#fbfcfd; }
#companies-body .cmp-row-input:focus { border-color:var(--accent); background:#fff; outline:none; box-shadow:0 0 0 2px rgba(217,102,58,.15); }
#companies-body .cmp-row-input[readonly] { border-color:transparent; background:transparent; cursor:default; box-shadow:none; }
#companies-body .cmp-edit-btn {
    width:24px; height:24px; min-width:24px; font-size:13px;
    display:inline-flex; align-items:center; justify-content:center;
    border:none; border-radius:50%; cursor:pointer; line-height:1; transition:background .15s;
    background:#e7eaef; color:#3d4451;
}
#companies-body .cmp-edit-btn:hover { background:#d3d9e2; }
#companies-body .cmp-edit-btn.is-editing { background:var(--success); color:#fff; }
#companies-body .cmp-edit-btn.is-editing:hover { background:var(--success-hover); }
#obs-list .obs-row-input.is-editing { border-color:var(--accent); background:#fff; }
/* Chart-selectievelden */
#pane-charts select.fc-32-c { font-size:11px; min-width:120px; }
#pane-charts select.fc-32-c option { font-size:11px; }
#pane-charts .field-group-header .fc-name,
#pane-charts .field-group-header .fc-28-c160 { font-size:11px; }
#pane-charts .field-group-header .fc-28-c160 { max-width:200px; padding:0 22px 0 8px; line-height:26px; }

/* =========================================================================
   admin_users.php  (User management)
   ========================================================================= */
#pane-list thead th,
#pane-company thead th { padding-top:3px !important; padding-bottom:3px !important; font-size:12px; }
#pane-list td,
#pane-company td { font-size:12px; }
#pane-list .cell-lastlogin, #pane-company .cell-lastlogin, #pane-list .badge { font-size:12px !important; }
#pane-list .badge-status-clickable,
#pane-list .badge-status-disabled { padding:4px 8px; font-size:11px; }
/* Status toggle-switch: groen = actief, grijs = inactief */

/* Filter-telling pil */

.filter-pill-empty {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:24px; height:21px; padding:0 9px; border-radius:11px;
    background:transparent; border:0.5px solid var(--border-strong);
    color:var(--text-faint); font-size:12px; font-weight:600;
}
/* Users-picker / dual-list (shared_ui cw_dual_list_modal #dl-modal, maar ook
   #users-modal in admin_schedule en .pp-um in het plot plan gebruiken deze
   um-classes — daarom bewust NIET aan een id gescoped) */
.um-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch; margin:6px 0 14px; }
.um-search { width:100%; height:30px; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:6px; padding:0 8px; font-size:12px; margin-bottom:5px; }
.um-col-label {
    font-size:10px; font-weight:700; letter-spacing:.06em; color:#5a6b7b;
    text-transform:uppercase; text-align:center;
    background:#eef1f4; border-radius:5px; padding:4px 6px; margin:2px 0 5px;
}
.um-list { border:1px solid var(--border-strong); border-radius:6px; background:#fff; height:190px; overflow-y:auto; padding:4px; }
.um-item { padding:6px 8px; border-radius:5px; font-size:13px; cursor:pointer; user-select:none; }
.um-item:hover { background:#f1f1f1; }
.um-item.active { background:#FAEEDA; color:#854F0B; font-weight:600; }
.um-mid { display:flex; flex-direction:column; justify-content:center; gap:6px; }
.um-btn { width:36px; height:30px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; cursor:pointer; font-size:14px; line-height:1; }
.um-btn:hover { border-color:#EF9F27; background:#FAEEDA; color:#854F0B; }
.um-empty { color:#aaa; font-size:12px; text-align:center; padding:14px 8px; }

/* =========================================================================
   u_report.php  (User reports: cards + OBS-tabs + stats-tabel)
   ========================================================================= */

.stats-table { width:calc(100% + 50px); border-collapse:separate; border-spacing:0; font-size:12px; margin:0 -25px 10px -25px; table-layout:fixed; overflow:hidden; }
.stats-table td { padding:2px 4px; border:1px solid #b8c4cc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stats-table-flush { border-radius:0; margin:0 -25px 10px -25px; }
.s-neg { color:#c0392b !important; }
.s-pos { color:#27ae60 !important; }
.stats-loading { font-size:11px; color:var(--text-faint); padding:8px; }
.report-chart-wrap { position:relative; height:300px; margin:0 -25px; }
.report-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-faint); }
.report-empty { text-align:center; padding:60px 20px; color:var(--text-faint); font-size:13px; }
/* Hangende tabjes onder een titel-card (zoals u_report), herbruikbaar op admin-pagina's */
.card-flush-bottom {
    border-bottom-left-radius:8px !important; border-bottom-right-radius:8px !important;
    padding-bottom:14px !important; margin-bottom:0 !important; position:relative; z-index:2;
}
.card-flush-bottom h1 { margin-bottom:0; }
/* .obs-tabs/.obs-tab: samengevoegd met .admin-tabs/.admin-tab bovenin. */
/* EXPORT PDF-pill in de titelkaart van de reports-pagina: rechtsboven, op de
   titelregel (boven de oranje lijn). */
.report-title-card { position: relative; }
.report-export-btn { position: absolute; top: 20px; right: 25px; }

/* Permit desk: 'SAVE VIEW'-knop identiek aan de EXPORT PDF-knop in reports */
.prm-title-card { position: relative; }
.prm-viewbtn    { position: absolute; top: 20px; right: 25px; }

/* Status-toast bij het opslaan van een chart */
.chart-toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 9999;
    display: flex; align-items: center; gap: 10px;
    background: #3c3151; color: #fff; font-size: 13px; font-weight: 600;
    padding: 10px 16px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.chart-toast.is-open { opacity: 1; transform: translateY(0); }
.chart-toast-done  { background: #1f7a55; }
.chart-toast-error { background: #b23b32; }
.chart-toast-ic { font-weight: 700; font-size: 15px; }
.chart-toast-spin { display: flex; flex-direction: column; gap: 2px; width: 16px; }
.chart-toast-spin i {
    display: block; height: 3px; border-radius: 2px; background: #fff;
    transform-origin: left; animation: loader-grow 1.4s ease-in-out infinite;
}
.chart-toast-spin i:nth-child(1) { width: 10px; }
.chart-toast-spin i:nth-child(2) { width: 16px; margin-left: 3px; animation-delay: .2s; }
.chart-toast-spin i:nth-child(3) { width: 12px; margin-left: 6px; animation-delay: .4s; }

/* ==========================================================================
   21. PLOT PLAN ADMIN (verplaatst uit admin_plotplan.php)
   ========================================================================== */
#pp-cf-list .cf-row, #permit-cf-list .cf-row, #permit-cols-list .cf-row, #pp-oe-list .cf-row{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border,#dfe6e9);border-radius:9px;padding:6px 8px 6px 11px}
#pp-cf-list .cf-num, #permit-cf-list .cf-num, #permit-cols-list .cf-num{width:18px;text-align:center;color:var(--text-muted);font-size:11px}
#pp-cf-list .cf-nm, #permit-cf-list .cf-nm, #permit-cols-list .cf-nm, #pp-oe-list .cf-nm{flex:1;font-size:12.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#permit-cols-list .cf-row.cf-fixed{background:#f5f4f8}
#permit-cols-list .cf-row.cf-fixed .cf-nm{color:var(--text-muted)}
#permit-cols-list .cf-hint{font-size:11px;color:var(--text-faint,#9aa3af);margin-right:8px;white-space:nowrap}
#permit-cols-list .cf-grp{min-width:52px;text-align:center}
#permit-cols-list .cf-mv-gap{display:inline-block;width:52px}
#permit-cols-list .cf-rm:disabled{opacity:.25;cursor:default}
.cf-opt{border:1px solid var(--border,#dfe6e9);background:#fff;color:#6b7686;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer;line-height:1.4}
.cf-opt.on{background:#6d5b8e;border-color:#6d5b8e;color:#fff}
.cf-opt.on.star{background:#e0a422;border-color:#e0a422}
.cf-mv{border:none;background:none;color:#8a97a6;cursor:pointer;font-size:14px;padding:2px 4px}
.cf-mv:disabled{opacity:.3;cursor:default}
.cf-rm{border:none;background:none;color:#b0392e;cursor:pointer;font-size:16px;padding:2px 5px}
/* live voorbeeld (zelfde look als het echte cel-paneel) */
.cf-prev{width:290px;background:#fff;border:1px solid #d7dbe2;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.cf-prev-hd{display:flex;align-items:center;justify-content:space-between;background:#3c3151;color:#fff;padding:8px 12px}
.cf-prev-hd .cc{font-weight:800;font-size:13px}
.cf-prev-hd .cnt{font-size:11px;color:rgba(255,255,255,.7)}
.cf-prev-bd .it{padding:9px 12px;border-bottom:1px solid #eef0f3}
.cf-prev-bd .it:nth-child(even){background:#f5f7fa}
.cf-prev .ttl{font-weight:800;color:#3c3151;font-size:13px;margin-bottom:4px;word-break:break-word}
.cf-prev .flds{display:flex;flex-wrap:wrap;gap:4px 12px}
.cf-prev .fld{font-size:11.5px;line-height:1.4;min-width:0}
.cf-prev .fld.full{flex:0 0 100%}
.cf-prev .fld.half{flex:0 0 calc(50% - 6px)}
.cf-prev .fld.big .v{font-size:13px;font-weight:800;color:#3c3151;text-transform:uppercase;letter-spacing:.02em}
.cf-prev .fld.small{font-size:10px}
.cf-prev .fld .k{display:block;color:#93a0af;text-transform:uppercase;letter-spacing:.04em;font-size:9px;font-weight:700}
.cf-prev .fld .v{color:#2c3e50;word-break:break-word}
.cf-prev .fld .v.b{font-weight:700}
.cf-prev .pill{display:inline-block;font-size:9.5px;font-weight:700;color:#fff;border-radius:20px;padding:1px 8px}
.cf-prev-empty{padding:14px 12px;color:#8a97a6;font-size:11.5px}
    

/* --------------------------------------------------------------------------
   PERMITS BULK: groep-checkbox met duidelijk onderscheid tussen
        'alles geselecteerd' (blauw + wit vinkje) en 'deels geselecteerd'
        (wit vakje, oranje rand + oranje streepje). De rij-checkboxes
        blijven de standaard browserweergave houden.
   -------------------------------------------------------------------------- */
.prm-gsel {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; margin: 0;
    border: 2px solid var(--border-strong); border-radius: 4px;
    background: #fff; cursor: pointer; position: relative; flex: 0 0 auto;
}
.prm-gsel:checked { background: #2563eb; border-color: #2563eb; }
.prm-gsel:checked::after {
    content: ""; position: absolute; left: 3px; top: 0;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.prm-gsel:indeterminate { background: #fff; border-color: #e08a00; }
.prm-gsel:indeterminate::after {
    content: ""; position: absolute; left: 2px; top: 5px;
    width: 8px; height: 2px; background: #e08a00;
}
.prm-gsel:hover { border-color: #2563eb; }
.prm-gsel:indeterminate:hover { border-color: #b06c00; }
/* ===========================================================================
 * Help pop-up (shared_ui.php) -- paginaspecifieke uitleg.
 * Hergebruikt de bestaande .modal-overlay / .modal-box; hieronder alleen de
 * afwijkingen voor de bredere, scrollbare help-inhoud.
 * ======================================================================== */
.nav-help-btn { display: inline-flex; align-items: center; }
.help-box {
    width: 92%; max-width: 720px; max-height: 86vh;
    padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
.help-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 22px; border-bottom: 2px solid var(--accent); flex: 0 0 auto;
}
.help-title { margin: 0; border: none; padding: 0; flex: 1; font-size: 16px; }
.help-close {
    border: none; background: var(--surface-3); color: var(--ink);
    width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1;
    cursor: pointer; flex: 0 0 auto; transition: background 0.2s;
}
.help-close:hover { background: var(--danger); color: #fff; }
.help-body {
    padding: 18px 22px 24px; overflow-y: auto; flex: 1 1 auto;
    font-size: 13px; line-height: 1.55; color: var(--ink-soft);
}
.help-body p { margin: 0 0 12px; }
.help-body b { color: var(--ink); }
.help-h {
    margin: 20px 0 6px; font-size: 13px; color: var(--accent-soft-fg);
    text-transform: uppercase; letter-spacing: .3px;
}
.help-fig { margin: 4px 0 18px; }
.help-fig img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.help-tbl { border-collapse: collapse; width: 100%; margin: 4px 0 14px; font-size: 12px; }
.help-tbl th, .help-tbl td {
    border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top;
}
.help-tbl th { background: var(--surface-2); color: var(--ink-soft); font-size: 11px; text-transform: uppercase; }
.help-ul { margin: 4px 0 12px; padding-left: 20px; }
.help-ul li { margin-bottom: 6px; }
.help-note {
    margin: 16px 0 0; padding: 10px 14px; border-radius: 6px;
    background: var(--surface-2); border-left: 3px solid var(--accent);
    font-size: 12px; color: var(--ink-soft);
}
.help-body code {
    background: var(--surface-3); padding: 1px 5px; border-radius: 3px; font-size: 12px;
}

/* ============================== PERMITS: DATUMSLIDER ======================
   Slider die door de aanwezige aanvraagdatums scrubt (stand 0 = All dates),
   zelfde bediening als de datum-sliders in het plot plan. */
.prm-dslider { display: flex; align-items: center; gap: 12px; width: 100%; }
.prm-dslider input[type="range"] { flex: 1; margin: 0; accent-color: var(--accent); cursor: pointer; }
.prm-ds-val { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface-3);
              padding: 2px 10px; border-radius: 10px; white-space: nowrap; }
.prm-dslider.on .prm-ds-val { color: #fff; background: var(--accent); }

/* Permit desk: bedieningskaart (DATE / FILTERS / GROUP BY) */
.prm-ctlcard { border:1px solid var(--border); border-radius:10px; background:var(--surface); margin:12px 0; overflow:hidden; }
.prm-ctlsec  { display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:start; padding:11px 16px; }
.prm-ctlsec + .prm-ctlsec { border-top:1px solid var(--border); }
.prm-ctllead { padding-top:3px; }
.prm-ctllbl  { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--ink); text-transform:uppercase; }
.prm-ctllbl svg { width:15px; height:15px; stroke:#64748b; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.prm-ctlsub  { display:block; color:var(--text-muted); font-size:11px; margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }
.prm-addbtn  { display:inline-flex; align-items:center; gap:5px; margin-top:2px; padding:4px 12px; border-radius:13px; background:transparent; color:var(--accent); border:1px dashed var(--accent); font-size:11px; font-weight:700; cursor:pointer; }
.prm-addbtn:hover { background:var(--accent-soft-bg); }
/* Permit desk: groepering als nette boom (accentbalk links + geleidelijn) */
.prm-grp    { }
.prm-ghead  { display:flex; align-items:center; gap:8px; padding:6px 10px; font-weight:700;
              text-transform:uppercase; letter-spacing:.03em; color:#2c3e50; border-radius:5px;
              cursor:pointer; user-select:none; }
.prm-ghead:hover { filter:brightness(.975); }
.prm-gchev  { color:#9aa3af; font-size:10px; flex:0 0 auto; width:9px; text-align:center; }
.prm-gname  { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prm-gcount { background:#e7eaf0; color:#5a6b7b; border-radius:9px; font-size:10px; padding:1px 8px; font-weight:700; flex:0 0 auto; }
.prm-gkids  { margin-left:15px; border-left:1px solid #e6e8ee; padding-left:11px; margin-top:2px; }

/* Permit-kaart: ingerichte velden (Schedule Settings > PERMITS) */
.prm-cf-title { font-size:14px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; margin-bottom:5px; }
.prm-flds   { display:flex; flex-wrap:wrap; gap:2px 16px; margin-bottom:4px; }
.prm-fld    { font-size:13px; color:var(--ink-soft); min-width:0; }
.prm-fld.full { flex:1 1 100%; }
.prm-fld.half { flex:1 1 44%; }
.prm-fk     { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.02em; margin-right:5px; }
.prm-fv.b   { font-weight:700; color:var(--ink); }
/* Groot lettertype (A-toggle): kopstijl, mag ook half (2 naast elkaar) */
.prm-fld.big .prm-fv { font-size:14px; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; }
/* Logregels op de kaart (Released/Request/Prepared/... by user · company · tijd):
   kleiner lettertype, in 2 kolommen naast elkaar. Redenregels over volle breedte. */
.prm-logs { display:grid; grid-template-columns:1fr 1fr; gap:1px 16px; }
.prm-log  { font-size:12px; color:var(--ink-soft); line-height:1.5; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prm-logs .u-muted-12-t2 { grid-column:1 / -1; }
/* Klein lettertype (a-toggle) */
.prm-fld.small { font-size:11px; }
.prm-fld.small .prm-fv { font-size:11px; }
.prm-fld.small .prm-fk { font-size:10px; }

.prm-morebar { text-align:center; padding:12px 14px; margin:8px 0 2px; background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:8px; color:var(--text-muted); font-size:12px; }
.prm-morebtn { margin-left:8px; padding:4px 13px; border-radius:13px; background:var(--accent); color:#fff; border:none; font-size:11px; font-weight:700; cursor:pointer; }
.prm-morebtn:hover { background:var(--accent-hover); }

/* ==========================================================================
   22. UTILITIES -- t.b.v. inline-style-opruiming. Deze sectie staat bewust
       ONDERAAN het bestand: de classes moeten component-regels hierboven
       kunnen overrulen (zelfde specificiteit, laatste regel wint).
   ========================================================================== */
/* --- 22a. Basis-utilities (refactor jul 2026) -- geen !important zodat JS
       via el.style altijd kan overrulen. --- */
.u-pad-cell { padding:14px 2px; }
.u-field-label { display:block; font-size:11px; letter-spacing:.05em; color:var(--text-muted); text-transform:uppercase; margin-bottom:5px; }
.u-mt-10 { margin-top:10px; }

.u-grow-200 { flex:1; min-width:200px; }
.u-text-muted { color:var(--text-muted); }
.u-modal-380 { max-width:380px; width:92%; }

.u-end-10 { justify-content:flex-end; gap:10px; }
.u-body-13 { font-size:13px; color:var(--text); line-height:1.45; }
.u-text-faint { color:var(--text-faint); }
.u-note-lilac { color:#cfc7e0; font-weight:600; font-size:.78em; }
.u-upper-white { text-transform:uppercase;font-weight:700;color:#fff; }
.u-badge-left { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:9px; font-weight:600; opacity:.8; letter-spacing:.4px; }
.u-end-8 { justify-content:flex-end;gap:8px; }
.u-strong-13 { font-size:13px; font-weight:600; color:var(--ink); }
.u-muted-13 { font-size:13px; color:var(--text-muted); }
.u-hint-block { font-size:12px; color:var(--text-muted); line-height:1.6; margin:6px 0 14px; }
.u-valign-4 { vertical-align:-4px; }
.u-minw-200 { min-width:200px; margin:0; }
.u-minw-170 { min-width:170px; margin:0; }
.u-modal-560 { max-width:560px;width:92%; }

.u-card-frame { margin-bottom:10px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.u-end { justify-content:flex-end; }
.u-h12 { font-size:12px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; }
.u-muted-12 { font-size:12px; color:var(--text-muted); }
.u-muted-12-t2 { font-size:12px; color:var(--text-muted); margin-top:2px; }
.u-h11-muted { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.u-h11 { font-size:11px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; }

.u-row-between { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.u-col-label-fixed { display:flex; flex-direction:column; gap:2px; font-size:11px; color:#3c3151; font-weight:600; flex:0 0 auto; }
.u-col-label { display:flex; flex-direction:column; gap:2px; font-size:11px; color:#3c3151; font-weight:600; }
.u-row-12 { display:flex; align-items:center; gap:12px; }
.u-toggle-head { cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface); user-select:none; }
.u-card-soft { border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:8px; background:var(--surface-2); }

[hidden] { display:none !important; }
/* Geen data: tabs + panes verbergen (body-class i.p.v. inline <style>-blok) */
.no-tab-data .admin-tabs, .no-tab-data .admin-tab-pane { display:none !important; }

/* marges / maten */
.u-m-20-auto { margin:20px auto !important; }
.u-my-4  { margin:4px 0; }
.u-mt-1  { margin-top:1px; }
.u-mt-3  { margin-top:3px; }
.u-mt-14 { margin:14px 0 0; }
.u-mb-6  { margin-bottom:6px; }
.u-modal-480 { max-width:480px; width:92%; }
.u-maxw-280 { max-width:280px; }
.u-maxw-360 { max-width:360px; }
.u-pt-0  { padding-top:0; }
.u-pb-11 { padding:0 0 11px; }
.u-py-11 { padding:11px 0; }
.u-pad-6-2  { padding:6px 2px; }
.u-pad-fold { padding:10px 12px 2px; }

/* flex-hulpjes */
.u-gap-8 { gap:8px; }
.u-ai-center { align-items:center; }
.u-ai-start  { align-items:flex-start; }
.u-row-8      { display:flex; align-items:center; gap:8px; }
.u-row-end-12 { display:flex; align-items:flex-end; gap:12px; flex-wrap:nowrap; }
.u-col-6 { display:flex; flex-direction:column; gap:6px; }
.u-col-8 { display:flex; flex-direction:column; gap:8px; }
.u-wrap-16 { display:flex; flex-wrap:wrap; gap:16px; }
.u-flex-center { display:flex; align-items:center; }
.u-grow-min0 { flex:1; min-width:0; }
/* Instellingsbalk: label+toggle links, actieknop rechts */
.u-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px 32px; margin:4px 0; }
.u-bar-12 { gap:12px 32px; }

/* tekst / accenten */
.u-fs-13 { font-size:13px; }
.u-fs-9  { font-size:9px; }
.u-break { word-break:break-word; }
.u-stamp { font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.u-accent-b   { font-weight:700; color:var(--accent); }
.u-pre-accent { white-space:pre-wrap; font-weight:700; color:var(--accent); }
.u-fold-arrow { font-size:10px; color:var(--text-muted); transition:transform .15s; }
.u-cb-16 { width:16px; height:16px; }
.u-filebtn { cursor:pointer; margin:0; display:inline-flex; align-items:center; }
.u-card-soft-lilac { background:#ECE9F2; }
.p6-sheet-band { background:var(--secondary-color); color:#fff; font-weight:600; letter-spacing:.5px; }
.ft-num-link { margin-right:0; text-decoration:none; cursor:pointer; }

/* Permit-kaart (desk + preview in Schedule Settings) */
.prm-card { display:flex; gap:14px; align-items:stretch; border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:8px; background:#ECE9F2; }
.prm-card.is-sel { border-color:var(--accent); background:#eef3fa; }

/* extra utilities (opruimronde admin_plotplan) */
.u-fs-12 { font-size:12px; }
.u-w600  { font-weight:600; }
.u-danger    { color:var(--danger-soft-fg); }
.u-danger-13 { font-size:13px; color:var(--danger-soft-fg); }
.u-amber { color:#b45309; }
.u-placeholder { color:#93a0af; }
.u-dim-70 { opacity:.7; }
.u-mt-4   { margin-top:4px; }
.u-m-4-20 { margin:4px 0 20px; }
.u-ml-auto { margin-left:auto; }
.u-gap-10 { gap:10px; }
.u-h-34  { height:34px; }
.u-inp-30 { height:30px; background:#fff; }
.u-badge-sm { font-size:10px; padding:2px 7px; }
.u-col-12 { display:flex; flex-direction:column; gap:12px; }
.u-grow-170 { flex:1; min-width:170px; }
.u-grow-200-280 { flex:1; min-width:200px; max-width:280px; }
.u-grow-320 { flex:0 1 320px; min-width:250px; }
.u-grow-420 { flex:1 1 420px; min-width:0; }
.u-push-right { flex:0 0 auto; margin-left:auto; }
.u-wrap-12-end { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.u-wrap-24-start { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.u-inline-6  { display:inline-flex; gap:6px; align-items:center; }
.u-inline-10 { display:inline-flex; gap:10px; align-items:center; padding-bottom:3px; }
.u-col-end { display:inline-flex; flex-direction:column; align-items:flex-end; }
.u-btn-34-full  { height:34px; width:100%; padding:4px 16px; }
.u-btn-34-grow  { height:34px; flex:1; padding:4px 8px; }
.u-btn-34-pad22 { height:34px; padding:4px 22px; }
.u-sel-26 { padding-top:0; padding-bottom:0; line-height:26px; }
.u-cal-head { width:100%; font-size:11px; color:var(--text-muted); }

/* Drawing-kaart: uitklapbaar calibratieblok (JS zet display:none/flex) */
.pp-dw-body { flex-wrap:wrap; gap:8px; align-items:flex-end; padding:12px; background:#f5f3f9; }
/* Kalibratie-/content-velden groeien mee over de volle kaartbreedte; de
 * u-cal-head ervoor is width:100% en fungeert zo als rij-scheider. */
.pp-cal-field { flex:1 1 120px; min-width:110px; }

/* Equipment-import preview (admin_plotplan EQUIPMENT-tab) */
.eqt-count-pill { box-sizing:border-box; height:14px; margin-bottom:5px; display:inline-flex; align-items:center;
                  background:var(--surface-3, #f1f5f9); border:1px solid var(--border, #e2e8f0); border-radius:20px;
                  padding:0 12px; font-size:11px; font-weight:600; color:var(--ink, #2c3e50); white-space:nowrap; }
.eqt-chip { display:block; color:#fff; font-size:10px; font-weight:700; border-radius:20px; padding:2px 6px; text-align:center; }
.eqt-chip-amber { background:#b45309; }
.eqt-chip-red   { background:#b0392e; }
.eqt-chip-gray  { background:#64748b; }
.eqt-chip-green { background:#1e7a3f; }
.eqt-chip-blue  { background:#1d4ed8; }
.eqt-cell { flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eqt-line    { display:flex; align-items:center; gap:14px; padding:4px 8px; border-bottom:1px solid var(--border, #e2e8f0); }
.eqt-colhead { display:flex; align-items:center; gap:14px; padding:5px 16px 3px; border-bottom:1px solid var(--border, #e2e8f0); }
.eqt-rest { flex:1; min-width:0; font-size:12px; display:flex; align-items:center; gap:10px; }
.eqt-hs { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint, #94a3b8); font-weight:700; }
.eqt-c-row   { text-align:right; color:var(--text-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.eqt-c-req   { color:var(--text-muted); font-size:12px; font-style:italic; }
.eqt-c-muted { color:var(--text-muted); font-size:12px; }
.eqt-c-arrow { color:var(--text-faint, #94a3b8); font-size:12px; text-align:center; }
.eqt-box { border:1px solid var(--border, #e2e8f0); border-radius:8px; margin-bottom:12px; overflow:hidden; }
.eqt-boxhead { display:flex; align-items:center; gap:10px; padding:6px 12px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.eqt-boxhead-danger { background:var(--danger-soft-bg); color:var(--danger-soft-fg); }
.eqt-boxhead-none   { background:var(--surface-3, #f1f5f9); color:var(--text-muted); }
.eqt-boxhead-go     { background:#e8f5ec; color:#1e7a3f; }
.eqt-scroll { max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:2px; padding:4px 8px; }

/* extra utilities (opruimronde admin_report) */
.u-m0-20 { margin:0 0 20px; }
.u-gap-14 { gap:14px; }
.u-maxw-200 { max-width:200px; }
.u-minw-240 { min-width:240px; margin:0; }
.u-minw-220 { min-width:220px; margin:0; }
.u-fg-340 { min-width:240px; max-width:340px; flex:0 1 340px; margin:0; }
.u-pad-10-2 { padding:10px 2px; }
.u-w-100 { width:100px; }
.u-w-135 { width:135px; }
.u-grow-1-200 { flex:1 1 200px; }
.u-m0-fix { margin:0; flex:0 0 auto; }
.u-faint-12 { font-size:12px; color:#94a3b8; }
.u-formrow { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; }
.u-inline-8 { display:inline-flex; gap:8px; align-items:center; padding-bottom:4px; }
.u-row-10 { display:flex; gap:10px; align-items:center; }
.u-row-end-8 { display:flex; align-items:flex-end; gap:8px; }
.u-row-center-rel { display:flex; align-items:center; justify-content:center; gap:8px; position:relative; }
.u-abs-right-x { position:absolute; right:8px; top:50%; transform:translateY(-50%); color:#fff; }
.u-inp-32 { height:32px; box-sizing:border-box; border:1px solid var(--border); border-radius:6px; padding:0 8px; font-size:12px; background:#fff; }
.u-inp-deadline { border-color:#b40000; }
/* paarse verplaats-pijltjes (omhoog/omlaag) op .cfm-btn in field-group headers */
.cfm-move { background:#ece9f3; color:#5b2d8e; font-size:10px; }
/* uitklapbare field-group-body; JS zet display:flex/none */
.fg-flex { gap:14px; flex-wrap:wrap; align-items:end; padding:12px; background:#f5f3f9; border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; }

/* extra utilities (opruimronde admin_projectdata) */
.u-m-0 { margin:0; }
.u-mt-6 { margin-top:6px; }
.u-m-10-14 { margin:10px 0 14px; }
.u-maxw-220 { max-width:220px; }
.u-w-90  { width:90px; }
.u-w-180 { width:180px; }
.u-w-280 { width:280px; }
.u-fix { flex:0 0 auto; }
.u-grow { flex:1; }
.u-grow-260 { flex:1; min-width:260px; margin:0; }
.u-shrink { flex:0 1 auto; min-width:0; }
.u-wrap-10 { display:flex; gap:10px; flex-wrap:wrap; }
.u-wrap-32 { display:flex; gap:32px; flex-wrap:wrap; }
.u-wrap-14-end { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.u-bar-plain { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.u-inp-plain { height:30px; box-sizing:border-box; border:1px solid var(--border); border-radius:6px; padding:0 8px; font-size:12px; }
.u-code-block { display:block; font-size:11px; user-select:all; background:#f5f3f9; border-radius:6px; padding:8px 10px; overflow-x:auto; white-space:nowrap; }
/* backup-groep: label met verborgen checkbox + gouden mini-toggle */
.bk-group { display:flex; align-items:center; gap:10px; font-size:12px; padding:3px 0; cursor:pointer; white-space:nowrap; }
.pd-loaded-dot.is-err { background:#c0392b; }

/* extra utilities (opruimronde u_report) */
.u-pad-8-2 { padding:8px 2px; }
.u-scroll-x { overflow-x:auto; }
/* UPDATE-stempel naast de REPORTS-titel */
.rpt-upd { font-size:11px; font-weight:400; color:var(--text); margin-left:14px; letter-spacing:.02em; }
/* statistiekcellen onder de charts; bg/tekstkleur blijft inline (chartkleur).
   Als td.… geschreven zodat ze .stats-table td (0,1,1) verslaan. */
td.cs-cell { text-align:center; padding:2px 4px; border:1px solid #b8c4cc; font-size:12px; font-weight:600; }
td.mcell   { text-align:center; padding:2px 8px; border:1px solid #b8c4cc; font-size:12px; font-weight:600; }
td.cs-cell.cs-b, td.mcell.cs-b { font-weight:700; }
td.mcell-gap { border:none; background:transparent; }

/* Manual entry (u_entry): invoerbalk + historierijen. Kolombreedtes via
   u-w-*; me-third/me-grow staan NA me-cell/me-hdr zodat hun flex wint. */
.u-w-60  { width:60px; }
.u-w-110 { width:110px; }
.u-w-118 { width:118px; }
.u-w-130 { width:130px; }
.me-row     { display:flex; align-items:center; gap:14px; flex-wrap:nowrap; overflow-x:auto; padding:3px 12px; border-bottom:1px solid var(--border); }
.me-hdr-row { display:flex; align-items:center; gap:14px; flex-wrap:nowrap; padding:8px 12px 4px; }
.me-entrybar { display:flex; align-items:end; gap:14px; flex-wrap:nowrap; overflow-x:auto; margin:0 0 6px; padding:10px 12px; background:#ECE9F2; border-radius:8px; width:100%; box-sizing:border-box; }
.me-cell { flex:0 0 auto; font-size:12px; }
.me-hdr  { flex:0 0 auto; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; }
.me-third { flex:0 0 33.333%; min-width:0; }
.me-grow  { flex:1 1 auto; min-width:120px; }
.me-ell   { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-pct   { font-weight:700; color:#854F0B; }
.me-stamp { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.me-inp-26 { height:26px; box-sizing:border-box; border:1px solid var(--border); border-radius:6px; padding:0 8px; font-size:12px; background:#fff; flex:0 0 auto; }
.me-name-val { height:32px; display:inline-flex; align-items:center; font-size:13px; font-weight:700; color:#3c3151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* extra utilities (opruimronde admin_users) */
.u-m-10-0  { margin:10px 0 0; }
.u-m-12-14 { margin:12px 0 14px; }
.u-maxw-420 { max-width:420px; }
.u-span-all { grid-column:1 / -1; }
/* wint van .ud-cols .ud-fields > .detail-block { grid-column:span 2; } */
.ud-cols .ud-fields > .detail-block.u-span-all { grid-column:1 / -1; }
.u-fg-200 { flex:1 1 200px; margin:0; }
.u-wrap-15-end { display:flex; gap:15px; align-items:flex-end; flex-wrap:wrap; }
.u-inline-10-2 { display:inline-flex; gap:10px; align-items:center; padding-bottom:2px; }
/* groene online-indicator (users/companies) */
.u-online { color:#3a9b57; font-weight:700; }
.cfm-btn:disabled { opacity:.45; cursor:not-allowed; }
/* uitklapdeel van het nieuwe-gebruiker-formulier (JS zet display) */
.nu-more { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
/* userdetails zonder de standaard expandable-opmaak */
.ud-flat { margin:0; border-left:none; background:transparent; padding:0; }
.lic-bar-green { background:#639922; }

/* extra utilities (opruimronde u_permits) */
.u-mt-0 { margin-top:0; }
.u-accent { color:var(--accent); }
.u-pointer { cursor:pointer; }
.u-cb-14 { width:14px; height:14px; flex:0 0 auto; }
/* Permit-desk: zwevende bulkactiebalk (JS zet display:flex) */
.prm-bulkbar { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:60;
               background:var(--surface-2); border:1px solid var(--border-strong); border-radius:10px;
               box-shadow:0 4px 16px rgba(0,0,0,.18); padding:10px 14px; align-items:center; gap:10px; flex-wrap:wrap; max-width:92vw; }
.prm-rejectrow { gap:6px; align-items:center; }
.prm-reject-box { gap:6px; margin-top:8px; align-items:center; max-width:420px; }
/* Permit-statuskleuren (knoppen op desk/bulkbar/preview en help-pills);
   de :hover-variant voorkomt dat de groene hoverkleur van .btn-submit doorslaat */
.prm-st-rejected,  .btn-submit.prm-st-rejected:hover  { background:#c0392b; }
.prm-st-released,  .btn-submit.prm-st-released:hover  { background:#e07b00; }
.prm-st-requested, .btn-submit.prm-st-requested:hover { background:#D4A017; }
.prm-st-prepared,  .btn-submit.prm-st-prepared:hover  { background:#2e6fb8; }
.prm-st-active,    .btn-submit.prm-st-active:hover    { background:#7c3aed; }
.prm-st-completed, .btn-submit.prm-st-completed:hover { background:#2f9e57; }

/* extra utilities (opruimronde help_content) */
.u-maxw-300 { max-width:300px; }
.u-maxw-330 { max-width:330px; }
.u-maxw-340 { max-width:340px; }
.u-maxw-460 { max-width:460px; }
/* helppagina: statusflow met pijltjes + status-pills (kleur via .prm-st-*) */
.help-flow { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:8px 0 18px; font-weight:700; color:#9aa3af; }
.help-pill { display:inline-block; padding:3px 11px; border-radius:11px; color:#fff; font-size:11px; }
.help-pill-b { padding:2px 10px; font-weight:700; }

/* extra utilities (opruimronde u_schedule) */
.u-maxw-440 { max-width:440px; }
.u-fs-11 { font-size:11px; }
.u-fs13-lh { font-size:13px; line-height:1.45; }
.u-row-6 { display:flex; align-items:center; gap:6px; }
.u-note-12 { font-size:12px; color:#2a3543; }
.u-white-b { color:#fff; font-weight:700; }
.u-lilac-600 { font-weight:600; color:#cfc7e0; }
.u-gold-b { font-weight:700; color:#f0b268; }
/* permit-popup: actieve-permitregel (JS zet display:flex/none) */
.prm-active-row { align-items:center; justify-content:space-between; gap:10px; }
/* kaartlook zonder de vaste .card-breedtes (viewer-melding) */
.card-flat { background:#fff; padding:25px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,.1); width:100%; margin:0; box-sizing:border-box; }

/* extra utilities (opruimronde shared_ui) */
.u-m0-10 { margin:0 0 10px; }
.u-inline-5 { display:inline-flex; align-items:center; gap:5px; }
/* BACK TO APP-knop in de adminbalk; ook op :hover accentkleur houden */
.btn-menu.btn-menu-accent, .btn-menu.btn-menu-accent:hover { background:var(--accent); color:#fff; }
.push-upd-txt { font:700 11px/1 system-ui,sans-serif; letter-spacing:.03em; }
/* welkomstmodal voor nieuwe gebruikers */
.welcome-modal { width:560px; max-width:92vw; box-sizing:border-box; }
.welcome-body { font-size:13px; color:var(--text); line-height:1.6; margin:0 0 18px; }
.welcome-list { margin:6px 0 0; padding-left:18px; }
/* Zwevende meldingen (shared_ui): verbinding weg / hersteld / data geüpdatet.
   JS zet display (inline-flex/none); positie en look staan hier. */
.float-banner { position:fixed; top:68px; left:50%; transform:translateX(-50%);
                color:#fff; padding:9px 18px; border-radius:22px;
                font:700 12.5px/1.4 system-ui,sans-serif; letter-spacing:.04em;
                box-shadow:0 6px 22px rgba(0,0,0,.35); align-items:center; gap:10px; max-width:92vw; }
.conn-banner { z-index:9999; background:#b0392e; text-align:center; }
.conn-ok { z-index:9999; background:#2e7d4f; }
.data-upd-banner { z-index:9998; background:#5b2d8e; }
.conn-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#fff; animation:connblink 1s infinite; }
@keyframes connblink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.banner-btn { background:rgba(255,255,255,.22); border:0; color:#fff; font:700 11px/1 system-ui,sans-serif; letter-spacing:.05em; padding:5px 12px; border-radius:14px; cursor:pointer; }
.banner-x { background:none; border:0; color:#fff; font:700 14px/1 system-ui,sans-serif; cursor:pointer; padding:2px 4px; }
.banner-col { display:flex; flex-direction:column; gap:2px; text-align:left; }
.banner-sub { font-weight:400; font-size:11px; letter-spacing:.02em; opacity:.85; }
/* keuzemenu onder de push-updates-knop; top/right zet JS per klik */
.push-upd-menu { position:fixed; z-index:9999; background:#fff; border:1px solid #d8d4e4; border-radius:10px;
                 box-shadow:0 8px 26px rgba(0,0,0,.22); padding:6px; display:flex; flex-direction:column; gap:4px; min-width:200px; }
.push-upd-item { border:0; border-radius:7px; padding:8px 10px; cursor:pointer; text-align:left;
                 font:700 11.5px/1.35 system-ui,sans-serif; letter-spacing:.03em; }
.push-upd-sub { font-weight:400; opacity:.75; }

/* extra utilities (opruimronde ui_dialogs/index) */
.u-m0-8 { margin:0 0 8px; }
/* tekst + invoerveld in de prompt/confirm/alert-dialogen */
.ui-dlg-text { font-size:13px; color:var(--text); line-height:1.5; white-space:pre-line; }
.ui-dlg-input { width:100%; box-sizing:border-box; height:34px; border:1px solid var(--border); border-radius:6px; padding:0 10px; font-size:13px; margin:0 0 18px; }
/* section-band in rood zolang maintenance mode aan staat */
.section-band.band-mt-on { background:#7a2e24; border-color:#7a2e24 !important; }

/* ==========================================================================
   20. LIST2XML -- SCOPELIJST -> P6-XML-WIZARD (admin_projectdata)
   --------------------------------------------------------------------------
   Hergebruikt .card/.report-band/.field-group/.col-row/.btn/.datadate-pill;
   hieronder alleen wat de wizard zelf nodig heeft (stepper, panes, form-grid,
   meldingen). .l2x-map-grid .col-row wint bewust op specificiteit van de
   basis .col-row (55%-grid) voor de header+select-indeling.
   ========================================================================== */
.l2x-stepper { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.l2x-step {
    display:flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    background:var(--surface-3); color:#64748b; border:1px solid var(--border); cursor:pointer;
}
.l2x-step .l2x-n {
    width:17px; height:17px; border-radius:50%; background:var(--border-strong); color:#fff;
    display:inline-flex; align-items:center; justify-content:center; font-size:10px;
}
.l2x-step.done { background:var(--success-soft-bg); color:var(--success-soft-fg); border-color:#ecdcae; }
.l2x-step.done .l2x-n { background:var(--success); }
.l2x-step.active { background:#3c3151; color:#fff; border-color:#3c3151; }
.l2x-step.active .l2x-n { background:rgba(255,255,255,.3); }
.l2x-pane { display:none; }
.l2x-pane.active { display:block; }
.l2x-note { font-size:12px; color:var(--text-muted); margin:0 0 14px; max-width:80ch; }
.l2x-map-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px 16px; }
.l2x-map-grid .col-row { grid-template-columns:1fr 130px; }
.l2x-hdr { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.l2x-ex { color:var(--text-faint); font-size:11px; font-weight:normal; }
.l2x-form { display:grid; grid-template-columns:repeat(4,1fr); gap:12px 14px; padding:12px; }
.l2x-form label {
    display:block; font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color:var(--text-muted); margin-bottom:3px;
}
.l2x-form input[type="date"] {
    width:100%; padding:0 8px; border:1px solid #ccc; border-radius:4px; font-size:10px;
    box-sizing:border-box; height:30px; background:#fff; font-family:inherit; color:var(--text);
}
.l2x-form input[type="date"]:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 2px rgba(217,102,58,.18); }
.l2x-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.l2x-foot-r { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.l2x-msg { border-radius:6px; padding:8px 12px; margin:10px 0 0; font-size:12px; }
.l2x-msg.err  { background:var(--danger-soft-bg);  color:var(--danger-soft-fg);  border:1px solid #f2c4bd; }
.l2x-msg.warn { background:var(--warning-soft-bg); color:var(--warning-soft-fg); border:1px solid #f4cdaa; }
.l2x-msg.ok   { background:var(--success-soft-bg); color:var(--success-soft-fg); border:1px solid #ecdcae; }
.l2x-sum { display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 4px; }
@media (max-width: 900px) {
    .l2x-map-grid { grid-template-columns:1fr 1fr; }
    .l2x-form { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
    .l2x-map-grid { grid-template-columns:1fr; }
    .l2x-form { grid-template-columns:1fr; }
}
/* == QTRAKK LICENSE: periode-rijen ========================================
   Eén regel per periode: bundel, van, t/m, blokken, periodetotaal en de
   verwijderknop. Op smalle schermen scrollt de lijst horizontaal. */
#lic-periods { overflow-x:auto; }
.lic-period-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:nowrap; }
.lic-period-row .form-group { margin:0; flex-shrink:0; }
.lic-fld-bundle { flex:0 0 250px; }
.lic-fld-date   { flex:0 0 150px; }
.lic-fld-calc   { flex:0 0 130px; }
.lic-period-row .filter-del { align-self:flex-end; margin-bottom:4px; }

/* Number-input zonder spinner-pijltjes (o.a. onderhandeld periodetotaal). */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.no-spin { -moz-appearance:textfield; appearance:textfield; }