@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --sidebar-bg: #131417;
    --sidebar-bg-hover: #1d1f24;
    --sidebar-bg-active: #212327;
    --sidebar-text: #a7abb4;
    --sidebar-text-active: #ffffff;
    --sidebar-border: #232529;

    --brand-red: #e0202a;
    --brand-red-dark: #b8161f;
    --brand-red-glow: rgba(224, 32, 42, 0.28);

    --bg-page: #f3f4f7;
    --bg-card: #ffffff;
    --border: #e7e9ee;
    --border-soft: #eef0f3;

    --text: #191b1f;
    --text-dim: #676c76;
    --text-faint: #9aa0aa;

    --amber-bg: #fdf1d6; --amber-fg: #92650a; --amber-solid: #f5a524;
    --green-bg: #e1f6ea; --green-fg: #157a4a; --green-solid: #22c55e;
    --gray-bg: #eceef1;  --gray-fg: #4b5563;  --gray-solid: #6b7280;
    --blue-bg: #e5eefe;  --blue-fg: #1d4ed8;  --blue-solid: #3b82f6;

    /* Extra themavariabelen (standaardwaarden = het originele lichte thema) */
    --surface: #ffffff;
    --row-hover: #fafbfc;
    --on-brand: #ffffff;
    --brand-tint: rgba(224, 32, 42, 0.12);
    --brand-soft: #fdecee;
    --red-bg: #fdecee; --red-fg: #a1121b; --red-solid: #e0202a;
    --danger-fg: #c0242f; --danger-border: #f3c7ca;
    --alert-success-bg: #e9f9ef; --alert-info-bg: #eaf2ff;
    --snow-color: rgba(130, 155, 180, 0.55);
    --ice: #ffffff;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-red); text-decoration: none; }
a:hover { color: var(--brand-red-dark); }
*:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

/* ============ Auth pages (login) ============ */
.auth-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px;
    background: var(--sidebar-bg);
    background-image: radial-gradient(ellipse 800px 500px at 20% 0%, var(--brand-tint), transparent 60%);
}
.auth-box {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 38px 34px;
    width: 100%; max-width: 380px;
    box-shadow: 0 30px 70px -25px rgba(0,0,0,0.55);
}
.auth-box h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: var(--text); letter-spacing: -0.01em; }
.auth-box h1 .accent { color: var(--brand-red); }
.auth-box h2 { font-size: 14px; font-weight: 500; color: var(--text-faint); margin: 0 0 24px; }

label {
    display: block; margin-bottom: 16px;
    font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
input, select, textarea {
    display: block; width: 100%; margin-top: 7px;
    padding: 11px 13px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 9px;
    color: var(--text); font-size: 14px; font-family: var(--font-body);
    font-weight: 400;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-red);
    box-shadow: 0 0 0 3px var(--brand-tint);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 9px; border: none;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
    cursor: pointer; text-align: center;
    transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary {
    background: linear-gradient(180deg, var(--brand-red), var(--brand-red-dark));
    color: var(--on-brand);
    box-shadow: 0 4px 14px -4px var(--brand-red-glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px var(--brand-red-glow); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-page); }
.btn-danger { background: var(--surface); color: var(--danger-fg); border: 1px solid var(--danger-border); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 12px; }

.alert { padding: 11px 15px; border-radius: 9px; margin-bottom: 16px; font-size: 13px; border-left: 3px solid; }
.alert-error { background: var(--red-bg); border-color: var(--red-solid); color: var(--red-fg); }
.alert-success { background: var(--alert-success-bg); border-color: var(--green-solid); color: var(--green-fg); }
.alert-info { background: var(--alert-info-bg); border-color: var(--blue-solid); color: var(--blue-fg); }

/* ============ App shell: sidebar + main ============ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px; flex-shrink: 0;
    background: var(--sidebar-bg);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand .name {
    font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.01em;
    display: block; line-height: 1.15;
}
.sidebar-brand .tagline {
    font-size: 10.5px; font-weight: 700; color: var(--brand-red);
    letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px; display: block;
}
.sidebar-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; margin-bottom: 2px;
    border-radius: 9px; color: var(--sidebar-text);
    font-size: 13.5px; font-weight: 500;
}
.sidebar-nav a:hover { background: var(--sidebar-bg-hover); color: #fff; }
.sidebar-nav a.active { background: var(--sidebar-bg-active); color: #fff; font-weight: 600; }
.sidebar-nav .icon { width: 17px; text-align: center; opacity: 0.9; }
.sidebar-nav .nav-badge {
    margin-left: auto; background: var(--brand-red); color: var(--on-brand);
    font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}
.sidebar-divider { height: 1px; background: var(--sidebar-border); margin: 10px 4px; }

.sidebar-help {
    margin: 12px; padding: 16px;
    background: var(--sidebar-bg-hover); border-radius: 12px;
}
.sidebar-help h4 { margin: 0 0 6px; color: #fff; font-size: 13px; font-weight: 700; }
.sidebar-help p { margin: 0 0 12px; color: var(--sidebar-text); font-size: 12px; line-height: 1.5; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.content-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.content-topbar .page-heading { font-size: 17px; font-weight: 700; color: var(--text); }
.content-topbar .right-controls { display: flex; align-items: center; gap: 18px; }
.bell-wrap { position: relative; color: var(--text-dim); font-size: 18px; }
.bell-wrap .dot {
    position: absolute; top: -4px; right: -6px;
    background: var(--brand-red); color: var(--on-brand); font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.avatar-chip { display: flex; align-items: center; gap: 10px; }
.avatar-circle {
    width: 32px; height: 32px; border-radius: 999px;
    background: var(--sidebar-bg); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.avatar-chip .uname { font-size: 13.5px; font-weight: 600; color: var(--text); }
.avatar-chip a.logout-link { font-size: 12px; color: var(--text-faint); font-weight: 500; }
.avatar-chip a.logout-link:hover { color: var(--brand-red); }

.container { max-width: 1120px; margin: 0 auto; padding: 26px 24px 60px; width: 100%; }

h1.page-title { font-size: 22px; font-weight: 700; margin: 0 0 18px; color: var(--text); }

/* ============ Cards / stat tiles ============ */
.card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 22px 24px; margin-bottom: 18px;
}
.card h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 16px; }

.stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px;
}
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 20px;
}
.stat-icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 14px;
}
.stat-icon.icon-total { background: var(--sidebar-bg); color: #fff; }
.stat-icon.icon-progress { background: var(--amber-solid); color: #fff; }
.stat-icon.icon-done { background: var(--green-solid); color: #fff; }
.stat-icon.icon-archived { background: var(--gray-solid); color: #fff; }
.stat-number { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.stat-label { font-size: 12.5px; color: var(--text-dim); margin: 5px 0 12px; }
.stat-card a { font-size: 12.5px; font-weight: 700; }

.dash-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: 1fr 1fr; } }

.card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-header-row h3 { margin: 0; }
.card-header-row a { font-size: 12.5px; font-weight: 700; }

/* ============ Table ============ */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--border-soft); }
th { color: var(--text-faint); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
tr:hover td { background: var(--row-hover); }
.cell-primary { font-weight: 600; color: var(--text); }
.cell-sub { font-size: 12px; color: var(--text-faint); }

/* ============ Status badges (pastel pills, matching mockup) ============ */
.badge {
    display: inline-block; padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
}
.badge-new { background: var(--blue-bg); color: var(--blue-fg); }
.badge-progress { background: var(--amber-bg); color: var(--amber-fg); }
.badge-done { background: var(--green-bg); color: var(--green-fg); }
.badge-sent { background: var(--gray-bg); color: var(--gray-fg); }

/* ============ Forms ============ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; margin-top: 8px; }
.checkbox-grid label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--text); margin-bottom: 0; }
.checkbox-grid input { width: auto; margin: 0; }

.detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.detail-row:last-child { border-bottom: none; }
.detail-row span:first-child { color: var(--text-faint); font-size: 12px; font-weight: 600; }
.detail-row span:last-child { font-weight: 500; text-align: right; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--text-faint); font-size: 13px; }
.empty-state a { font-weight: 700; }

/* ============ Nieuwe opdracht CTA panel ============ */
.cta-panel {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 22px;
}
.cta-panel h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.cta-panel p { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 16px; }

/* ============ Hoe het werkt ============ */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
.step-item { text-align: left; }
.step-circle {
    width: 42px; height: 42px; border-radius: 999px;
    background: var(--sidebar-bg); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; margin-bottom: 12px;
}
.step-circle.done { background: var(--green-solid); }
.step-item h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 5px; color: var(--text); }
.step-item p { font-size: 12.5px; color: var(--text-dim); margin: 0; line-height: 1.5; }

/* ============ Berichten / chat ============ */
.messages-layout { display: grid; grid-template-columns: 260px 1fr; gap: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-card); min-height: 460px; }
@media (max-width: 800px) { .messages-layout { grid-template-columns: 1fr; } }
.thread-list { border-right: 1px solid var(--border); overflow-y: auto; max-height: 620px; }
.thread-list a { display: block; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.thread-list a:hover { background: var(--bg-page); }
.thread-list a.active { background: var(--brand-soft); }
.thread-list .t-name { font-size: 13.5px; font-weight: 700; }
.thread-list .t-preview { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.thread-panel { display: flex; flex-direction: column; }
.thread-header { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.thread-messages { flex: 1; padding: 18px; overflow-y: auto; max-height: 480px; display: flex; flex-direction: column; gap: 12px; }
.msg-bubble { max-width: 72%; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.msg-bubble .meta { font-size: 10.5px; opacity: 0.7; margin-top: 5px; }
.msg-in { align-self: flex-start; background: var(--bg-page); color: var(--text); border-bottom-left-radius: 3px; }
.msg-out { align-self: flex-end; background: var(--brand-red); color: var(--on-brand); border-bottom-right-radius: 3px; }
.msg-system { align-self: center; background: var(--gray-bg); color: var(--gray-fg); font-size: 12px; padding: 7px 14px; border-radius: 999px; }
.thread-form { border-top: 1px solid var(--border); padding: 14px 16px; display: flex; gap: 10px; }
.thread-form textarea { margin: 0; resize: none; }

/* ============ Utility ============ */
.hamburger { display: none; }
@media (max-width: 760px) {
    .sidebar { position: fixed; left: -260px; z-index: 40; transition: left .2s ease; }
    .sidebar.open { left: 0; }
    .hamburger { display: inline-flex; background: none; border: none; font-size: 20px; color: var(--text); cursor: pointer; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   THEMA'S
   Het actieve thema staat als data-theme op <html> (Admin > Instellingen).
   'standaard' gebruikt gewoon de :root-waarden hierboven.
   ===================================================================== */

/* ---- Licht, blauw accent ---- */
html[data-theme="blauw"] {
    --brand-red: #2563eb; --brand-red-dark: #1d4ed8;
    --brand-red-glow: rgba(37, 99, 235, 0.28);
    --brand-tint: rgba(37, 99, 235, 0.12);
    --brand-soft: #e8f0fe;
    --sidebar-bg: #111827; --sidebar-bg-hover: #1b2433; --sidebar-bg-active: #1f2a3c; --sidebar-border: #1f2937;
}

/* ---- Licht, groen accent ---- */
html[data-theme="groen"] {
    --brand-red: #16a34a; --brand-red-dark: #15803d;
    --brand-red-glow: rgba(22, 163, 74, 0.28);
    --brand-tint: rgba(22, 163, 74, 0.12);
    --brand-soft: #e6f6ec;
    --sidebar-bg: #111814; --sidebar-bg-hover: #1a231d; --sidebar-bg-active: #1e2a22; --sidebar-border: #1d2620;
}

/* ---- Donker, rood accent (gedeelde donkere basis) ---- */
html[data-theme="donker"],
html[data-theme="middernacht"] {
    color-scheme: dark;
    --sidebar-bg: #0a0b0d; --sidebar-bg-hover: #16181c; --sidebar-bg-active: #1c1f24; --sidebar-border: #1b1d21;

    --bg-page: #0f1013;
    --bg-card: #17191d;
    --surface: #1d2025;
    --border: #2b2e35;
    --border-soft: #23262c;
    --row-hover: #1d2025;

    --text: #e8eaee;
    --text-dim: #a5aab4;
    --text-faint: #767c88;

    --brand-tint: rgba(224, 32, 42, 0.18);
    --brand-soft: #34161a;

    --amber-bg: #3a2c0f; --amber-fg: #f5c46a;
    --green-bg: #11301f; --green-fg: #62d597;
    --gray-bg: #262a31;  --gray-fg: #b6bcc6;
    --blue-bg: #16264a;  --blue-fg: #92b6ff;
    --red-bg: #3a1519;   --red-fg: #ff8d93;
    --danger-fg: #ff6f77; --danger-border: #5a2328;
    --alert-success-bg: #11301f; --alert-info-bg: #16264a;
}

/* ---- Middernacht: donker blauwgrijs, blauw accent ---- */
html[data-theme="middernacht"] {
    --sidebar-bg: #070c16; --sidebar-bg-hover: #111a2a; --sidebar-bg-active: #162136; --sidebar-border: #121b2b;
    --bg-page: #0b1220;
    --bg-card: #111a2b;
    --surface: #16213a;
    --border: #243251;
    --border-soft: #1c2842;
    --row-hover: #16213a;
    --text: #e6ecf5;
    --text-dim: #a0b1ca;
    --text-faint: #6c7e99;
    --brand-red: #3b82f6; --brand-red-dark: #2563eb;
    --brand-red-glow: rgba(59, 130, 246, 0.32);
    --brand-tint: rgba(59, 130, 246, 0.18);
    --brand-soft: #172a4d;
}

/* ---- Automatisch: volgt licht/donker van het apparaat ---- */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        color-scheme: dark;
        --sidebar-bg: #0a0b0d; --sidebar-bg-hover: #16181c; --sidebar-bg-active: #1c1f24; --sidebar-border: #1b1d21;
        --bg-page: #0f1013;
        --bg-card: #17191d;
        --surface: #1d2025;
        --border: #2b2e35;
        --border-soft: #23262c;
        --row-hover: #1d2025;
        --text: #e8eaee;
        --text-dim: #a5aab4;
        --text-faint: #767c88;
        --brand-tint: rgba(224, 32, 42, 0.18);
        --brand-soft: #34161a;
        --amber-bg: #3a2c0f; --amber-fg: #f5c46a;
        --green-bg: #11301f; --green-fg: #62d597;
        --gray-bg: #262a31;  --gray-fg: #b6bcc6;
        --blue-bg: #16264a;  --blue-fg: #92b6ff;
        --red-bg: #3a1519;   --red-fg: #ff8d93;
        --danger-fg: #ff6f77; --danger-border: #5a2328;
        --alert-success-bg: #11301f; --alert-info-bg: #16264a;
    }
}

/* =====================================================================
   SEIZOENSTHEMA'S
   ===================================================================== */

/* ---- Lente: fris lichtgroen, bloesemroze accent ---- */
html[data-theme="lente"] {
    --sidebar-bg: #1f2b22; --sidebar-bg-hover: #29382d; --sidebar-bg-active: #2e3f32; --sidebar-border: #2a372d;
    --sidebar-text: #b9c7bb;
    --bg-page: #f5f8f2; --border: #e2eadc; --border-soft: #ebf1e6; --row-hover: #f8fbf5;
    --brand-red: #db4f86; --brand-red-dark: #b93a6c;
    --brand-red-glow: rgba(219, 79, 134, 0.28);
    --brand-tint: rgba(219, 79, 134, 0.13);
    --brand-soft: #fce9f1;
}

/* ---- Zomer: zandkleurig, zeeblauwe sidebar, zonnig oranje ---- */
html[data-theme="zomer"] {
    --sidebar-bg: #0f2a3d; --sidebar-bg-hover: #16384f; --sidebar-bg-active: #1a3f59; --sidebar-border: #173449;
    --sidebar-text: #a9c3d4;
    --bg-page: #fbf6ec; --border: #efe5d3; --border-soft: #f4ecdf; --row-hover: #fdfaf3;
    --brand-red: #f08c00; --brand-red-dark: #d06f00;
    --brand-red-glow: rgba(240, 140, 0, 0.30);
    --brand-tint: rgba(240, 140, 0, 0.14);
    --brand-soft: #fff1dc;
}

/* ---- Herfst: warm, roestbruin accent ---- */
html[data-theme="herfst"] {
    --sidebar-bg: #2a1c13; --sidebar-bg-hover: #36251a; --sidebar-bg-active: #3d2a1d; --sidebar-border: #352419;
    --sidebar-text: #cdb8a6;
    --bg-page: #f5efe6; --bg-card: #fffdf9; --surface: #fffdf9;
    --border: #e9dccb; --border-soft: #f0e6d9; --row-hover: #faf5ee;
    --text: #2b211a; --text-dim: #74655a; --text-faint: #a39385;
    --brand-red: #c2571a; --brand-red-dark: #9c4313;
    --brand-red-glow: rgba(194, 87, 26, 0.28);
    --brand-tint: rgba(194, 87, 26, 0.13);
    --brand-soft: #f8e6d8;
}

/* ---- Winter: ijzig lichtblauw, petrol accent ---- */
html[data-theme="winter"] {
    --sidebar-bg: #0c2238; --sidebar-bg-hover: #143150; --sidebar-bg-active: #18395c; --sidebar-border: #163049;
    --sidebar-text: #b3cbe0;
    --bg-page: #e3eef8; --border: #cfdeeb; --border-soft: #dde8f2; --row-hover: #eef5fb;
    --text: #12212f; --text-dim: #566a7e; --text-faint: #8899ab;
    --brand-red: #0e7490; --brand-red-dark: #0a5870;
    --brand-red-glow: rgba(14, 116, 144, 0.30);
    --brand-tint: rgba(14, 116, 144, 0.15);
    --brand-soft: #d9eef5;
    --snow-color: rgba(110, 145, 180, 0.6);
    --ice: #cfe7f5;
}
html[data-theme="winter"] .content-topbar { background: linear-gradient(180deg, #ffffff, #f2f8fc); }

/* ---- Kerst: dennengroene sidebar, kerstrood accent, goud ---- */
html[data-theme="kerst"] {
    --sidebar-bg: #0d2a1b; --sidebar-bg-hover: #143a26; --sidebar-bg-active: #18432c; --sidebar-border: #163523;
    --sidebar-text: #bcd3c4;
    --bg-page: #f8f3ea; --border: #ebe1d0; --border-soft: #f2eadc; --row-hover: #fcf8f1;
    --brand-red: #c8102e; --brand-red-dark: #960a21;
    --brand-red-glow: rgba(200, 16, 46, 0.30);
    --brand-tint: rgba(200, 16, 46, 0.12);
    --brand-soft: #fbe3e7;
    --green-solid: #0d6b3a;
    --snow-color: rgba(150, 165, 180, 0.6);
}
html[data-theme="kerst"] .sidebar-brand .tagline { color: #d4a537; }

/* ---- Kerstnacht: donker groen, goud accent ---- */
html[data-theme="kerstnacht"] {
    color-scheme: dark;
    --sidebar-bg: #08150f; --sidebar-bg-hover: #10241a; --sidebar-bg-active: #142c20; --sidebar-border: #10211a;
    --sidebar-text: #9fb8a8;
    --bg-page: #0c1a13; --bg-card: #12251b; --surface: #173023;
    --border: #234030; --border-soft: #1c3527; --row-hover: #173023;
    --text: #ecf2ee; --text-dim: #a9bfb1; --text-faint: #6f8a7a;
    --brand-red: #d4a537; --brand-red-dark: #b0861f;
    --brand-red-glow: rgba(212, 165, 55, 0.30);
    --brand-tint: rgba(212, 165, 55, 0.18);
    --brand-soft: #2a2a16;
    --on-brand: #1a1405;
    --amber-bg: #3a2c0f; --amber-fg: #f5c46a;
    --green-bg: #11301f; --green-fg: #62d597;
    --gray-bg: #22332a;  --gray-fg: #b6c4bb;
    --blue-bg: #16264a;  --blue-fg: #92b6ff;
    --red-bg: #3d1419;   --red-fg: #ff8d93;
    --danger-fg: #ff6f77; --danger-border: #5a2328;
    --alert-success-bg: #11301f; --alert-info-bg: #16264a;
    --snow-color: rgba(255, 255, 255, 0.8);
}
html[data-theme="kerstnacht"] .sidebar-brand .tagline { color: #d4a537; }

/* =====================================================================
   SEIZOENSEFFECTEN
   Gestuurd door data-fx op <html> (kerst / winter / sneeuw) en alleen actief
   als data-effects="on" (vinkje in Admin > Instellingen). Alles puur CSS,
   pointer-events: none, en uit bij "minder beweging".
   ===================================================================== */

/* ---- Sneeuwval: twee lagen (ver/klein + dichtbij/groot) ---- */
html[data-effects="on"][data-fx="sneeuw"] body::before,
html[data-effects="on"][data-fx="sneeuw"] body::after,
html[data-effects="on"][data-fx="winter"] body::before,
html[data-effects="on"][data-fx="winter"] body::after,
html[data-effects="on"][data-fx="kerst"] body::before,
html[data-effects="on"][data-fx="kerst"] body::after {
    content: "";
    position: fixed; left: 0; right: 0; top: -300px; bottom: 0;
    pointer-events: none; z-index: 30;
}
html[data-effects="on"][data-fx] body::before {
    background-image:
        radial-gradient(2.5px 2.5px at 25px 35px, var(--snow-color) 50%, transparent 55%),
        radial-gradient(2px 2px at 95px 120px, var(--snow-color) 50%, transparent 55%),
        radial-gradient(3px 3px at 160px 60px, var(--snow-color) 50%, transparent 55%),
        radial-gradient(2px 2px at 210px 170px, var(--snow-color) 50%, transparent 55%),
        radial-gradient(2.5px 2.5px at 60px 190px, var(--snow-color) 50%, transparent 55%),
        radial-gradient(2px 2px at 135px 15px, var(--snow-color) 50%, transparent 55%);
    background-size: 240px 220px;
    animation: portal-snow-far 28s linear infinite;
    opacity: .7;
}
html[data-effects="on"][data-fx] body::after {
    background-image:
        radial-gradient(5px 5px at 50px 80px, var(--snow-color) 50%, transparent 56%),
        radial-gradient(4px 4px at 190px 30px, var(--snow-color) 50%, transparent 56%),
        radial-gradient(6px 6px at 300px 210px, var(--snow-color) 50%, transparent 56%),
        radial-gradient(4.5px 4.5px at 120px 260px, var(--snow-color) 50%, transparent 56%),
        radial-gradient(5px 5px at 370px 120px, var(--snow-color) 50%, transparent 56%);
    background-size: 420px 300px;
    animation: portal-snow-near 16s linear infinite;
}
html[data-effects="on"][data-fx=""] body::before,
html[data-effects="on"][data-fx=""] body::after { content: none; }
@keyframes portal-snow-far {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 40px 220px, -30px 440px, 20px 220px, -40px 440px, 30px 220px, -20px 440px; }
}
@keyframes portal-snow-near {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 80px 300px, -60px 600px, 50px 300px, -80px 600px, 40px 300px; }
}

/* ---- Sneeuwduin onderin de sidebar (winter + kerst) ---- */
html[data-effects="on"][data-fx="winter"] .sidebar,
html[data-effects="on"][data-fx="kerst"] .sidebar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C30 18 55 30 80 34 C110 39 125 12 160 20 C190 27 210 44 250 30 L250 90 L0 90Z' fill='%23ffffff' fill-opacity='.55'/%3E%3Cpath d='M0 60 C40 44 70 56 100 52 C135 47 150 36 185 44 C215 51 230 58 250 50 L250 90 L0 90Z' fill='%23ffffff' fill-opacity='.9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 90px;
    padding-bottom: 80px; /* ruimte zodat het duin nooit over de onderste menuknop valt */
    background-attachment: local; /* duin schuift mee en ligt altijd onder het laatste menu-item */
}

/* ================= KERST ================= */
html[data-effects="on"][data-fx="kerst"] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23c8102e' stroke-opacity='.09' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M30 18v24M19.6 24l20.8 12M19.6 36l20.8-12M30 18l-3 3M30 18l3 3M30 42l-3-3M30 42l3-3'/%3E%3C/g%3E%3Cg fill='none' stroke='%230d6b3a' stroke-opacity='.09' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M115 95v30M102 102.5l26 15M102 117.5l26-15'/%3E%3C/g%3E%3Ccircle cx='120' cy='35' r='1.6' fill='%23d4a537' fill-opacity='.35'/%3E%3Ccircle cx='55' cy='130' r='1.4' fill='%23d4a537' fill-opacity='.35'/%3E%3C/svg%3E");
}
html[data-effects="on"][data-theme="kerstnacht"] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23d4a537' stroke-opacity='.10' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M30 18v24M19.6 24l20.8 12M19.6 36l20.8-12M30 18l-3 3M30 18l3 3M30 42l-3-3M30 42l3-3'/%3E%3Cpath d='M115 95v30M102 102.5l26 15M102 117.5l26-15'/%3E%3C/g%3E%3Ccircle cx='120' cy='35' r='1.6' fill='%23fff' fill-opacity='.25'/%3E%3Ccircle cx='55' cy='130' r='1.4' fill='%23fff' fill-opacity='.25'/%3E%3C/svg%3E");
}
/* Kerstboom achter de merknaam, cadeautje achter de paginakop */
html[data-effects="on"][data-fx="kerst"] .sidebar-brand .name::after { content: " \1F384"; }
html[data-effects="on"][data-fx="kerst"] .content-topbar .page-heading::after { content: " \1F381"; font-size: 15px; }

/* Kerstlichtjes langs de onderkant van de bovenbalk */
html[data-effects="on"][data-fx="kerst"] .content-topbar { position: relative; }
html[data-effects="on"][data-fx="kerst"] .content-topbar::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 9px;
    pointer-events: none; z-index: 6;
    background: radial-gradient(ellipse 22px 9px at 50% 0, transparent 72%, #2a4434 76%, transparent 84%) 0 0 / 40px 9px repeat-x;
}
html[data-effects="on"][data-fx="kerst"] .content-topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 14px;
    pointer-events: none; z-index: 7;
    background:
        radial-gradient(ellipse 4px 6px at 50% 55%, #ff3347 0 92%, transparent 100%) 0 0 / 160px 14px repeat-x,
        radial-gradient(ellipse 4px 6px at 50% 55%, #ffd23f 0 92%, transparent 100%) 40px 0 / 160px 14px repeat-x,
        radial-gradient(ellipse 4px 6px at 50% 55%, #34d36c 0 92%, transparent 100%) 80px 0 / 160px 14px repeat-x,
        radial-gradient(ellipse 4px 6px at 50% 55%, #3ea2ff 0 92%, transparent 100%) 120px 0 / 160px 14px repeat-x;
    filter: drop-shadow(0 0 3px rgba(255, 215, 120, .9)) drop-shadow(0 0 7px rgba(255, 190, 90, .5));
    animation: portal-twinkle 1.8s ease-in-out infinite alternate;
}
@keyframes portal-twinkle {
    0%   { opacity: 1;   filter: drop-shadow(0 0 3px rgba(255,215,120,.95)) drop-shadow(0 0 8px rgba(255,190,90,.6)); }
    50%  { opacity: .55; filter: drop-shadow(0 0 1px rgba(255,215,120,.4)); }
    100% { opacity: 1;   filter: drop-shadow(0 0 4px rgba(255,215,120,.95)) drop-shadow(0 0 10px rgba(255,190,90,.6)); }
}
/* Kerstlint (rood-goud-groen) bovenaan elke kaart */
html[data-effects="on"][data-fx="kerst"] .card,
html[data-effects="on"][data-fx="kerst"] .stat-card,
html[data-effects="on"][data-fx="kerst"] .cta-panel {
    background-image: linear-gradient(90deg, #c8102e 0 33%, #d4a537 33% 66%, #0d6b3a 66%);
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: top;
}
/* Zuurstokstrepen op de hoofdknoppen */
html[data-effects="on"][data-fx="kerst"] .btn-primary {
    background-image:
        repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 7px, transparent 7px 14px),
        linear-gradient(180deg, var(--brand-red), var(--brand-red-dark));
}
html[data-effects="on"][data-fx="kerst"] .auth-box { border-top: 5px solid #c8102e; }

/* ================= WINTER ================= */
html[data-effects="on"][data-fx="winter"] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%230e5a78' stroke-opacity='.10' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M36 16v40M18.7 26l34.6 20M18.7 46l34.6-20M36 16l-4 4M36 16l4 4M36 56l-4-4M36 56l4-4M18.7 26l1.5 5.5M18.7 26l5.5-1.5M53.3 46l-1.5-5.5M53.3 46l-5.5 1.5'/%3E%3Cpath d='M135 110v26M123.7 116.5l22.6 13M123.7 129.5l22.6-13'/%3E%3C/g%3E%3Cg fill='none' stroke='%230e5a78' stroke-opacity='.07' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M140 30v16M133 34l14 8M133 42l14-8M50 140v16M43 144l14 8M43 152l14-8'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #dceaf6 0%, #eef4fa 45%, #f7fafd 100%);
    background-attachment: fixed;
}
html[data-effects="on"][data-fx="winter"] .sidebar-brand .name::after { content: " \2744\FE0F"; }
/* IJspegels onder de bovenbalk */
html[data-effects="on"][data-fx="winter"] .content-topbar { position: relative; }
html[data-effects="on"][data-fx="winter"] .content-topbar::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px;
    pointer-events: none; z-index: 6;
    background:
        linear-gradient(135deg, var(--ice) 50%, transparent 50%) 0 0 / 14px 9px repeat-x,
        linear-gradient(225deg, var(--ice) 50%, transparent 50%) 0 0 / 14px 9px repeat-x,
        linear-gradient(160deg, var(--ice) 50%, transparent 50%) 0 0 / 34px 22px repeat-x,
        linear-gradient(200deg, var(--ice) 50%, transparent 50%) 0 0 / 34px 22px repeat-x,
        linear-gradient(172deg, var(--ice) 50%, transparent 50%) 9px 0 / 62px 34px repeat-x,
        linear-gradient(188deg, var(--ice) 50%, transparent 50%) 9px 0 / 62px 34px repeat-x;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 3px 3px rgba(14, 90, 120, .25));
}
/* Berijpte (frosted glass) kaarten */
html[data-effects="on"][data-fx="winter"] .card,
html[data-effects="on"][data-fx="winter"] .stat-card,
html[data-effects="on"][data-fx="winter"] .cta-panel {
    background-color: rgba(255, 255, 255, .72);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 24px -14px rgba(14, 70, 110, .35);
}
html[data-effects="on"][data-fx="winter"] .btn-primary {
    background-image: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%), linear-gradient(180deg, var(--brand-red), var(--brand-red-dark));
}
html[data-effects="on"][data-fx="winter"] .auth-box { border-top: 5px solid #7cc4e4; }

@media (prefers-reduced-motion: reduce) {
    html[data-effects="on"] body::before,
    html[data-effects="on"] body::after { animation: none; display: none; }
    html[data-effects="on"] .content-topbar::after { animation: none; }
}

/* =====================================================================
   EIGEN THEMA'S (Thema-creator)
   Een eigen thema zet alleen 5 basiskleuren (--c-*); de rest wordt hier afgeleid.
   ===================================================================== */
html[data-custom="1"] {
    --sidebar-bg: var(--c-sidebar);
    --sidebar-bg-hover: color-mix(in srgb, var(--c-sidebar), #fff 7%);
    --sidebar-bg-active: color-mix(in srgb, var(--c-sidebar), #fff 11%);
    --sidebar-border: color-mix(in srgb, var(--c-sidebar), #fff 8%);
    --sidebar-text: color-mix(in srgb, var(--c-sidebar), #fff 68%);
    --bg-page: var(--c-page);
    --bg-card: var(--c-card);
    --surface: var(--c-card);
    --border: color-mix(in srgb, var(--c-card), var(--c-text) 12%);
    --border-soft: color-mix(in srgb, var(--c-card), var(--c-text) 7%);
    --row-hover: color-mix(in srgb, var(--c-card), var(--c-text) 3%);
    --text: var(--c-text);
    --text-dim: color-mix(in srgb, var(--c-text), var(--c-card) 38%);
    --text-faint: color-mix(in srgb, var(--c-text), var(--c-card) 58%);
    --brand-red: var(--c-accent);
    --brand-red-dark: color-mix(in srgb, var(--c-accent), #000 20%);
    --brand-red-glow: color-mix(in srgb, var(--c-accent) 30%, transparent);
    --brand-tint: color-mix(in srgb, var(--c-accent) 15%, transparent);
    --brand-soft: color-mix(in srgb, var(--c-accent) 14%, var(--c-card));
    --snow-color: rgba(130, 155, 180, .55);
    --ice: #ffffff;
}
html[data-custom="1"][data-mode="dark"] {
    color-scheme: dark;
    --surface: color-mix(in srgb, var(--c-card), #fff 5%);
    --amber-bg: #3a2c0f; --amber-fg: #f5c46a;
    --green-bg: #11301f; --green-fg: #62d597;
    --gray-bg: color-mix(in srgb, var(--c-card), #fff 10%); --gray-fg: #b6bcc6;
    --blue-bg: #16264a;  --blue-fg: #92b6ff;
    --red-bg: #3a1519;   --red-fg: #ff8d93;
    --danger-fg: #ff6f77; --danger-border: #5a2328;
    --alert-success-bg: #11301f; --alert-info-bg: #16264a;
    --snow-color: rgba(255, 255, 255, .75);
}
/* Frosted-kaarten en winterachtergrond volgen bij eigen thema's de eigen kleuren */
html[data-custom="1"][data-effects="on"][data-fx="winter"] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%230e5a78' stroke-opacity='.10' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M36 16v40M18.7 26l34.6 20M18.7 46l34.6-20M36 16l-4 4M36 16l4 4M36 56l-4-4M36 56l4-4M18.7 26l1.5 5.5M18.7 26l5.5-1.5M53.3 46l-1.5-5.5M53.3 46l-5.5 1.5'/%3E%3Cpath d='M135 110v26M123.7 116.5l22.6 13M123.7 129.5l22.6-13'/%3E%3C/g%3E%3Cg fill='none' stroke='%230e5a78' stroke-opacity='.07' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M140 30v16M133 34l14 8M133 42l14-8M50 140v16M43 144l14 8M43 152l14-8'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-custom="1"][data-effects="on"][data-fx="winter"] .card,
html[data-custom="1"][data-effects="on"][data-fx="winter"] .stat-card,
html[data-custom="1"][data-effects="on"][data-fx="winter"] .cta-panel {
    background-color: color-mix(in srgb, var(--c-card) 78%, transparent);
    border-color: color-mix(in srgb, var(--c-card), #fff 30%);
}

/* ---- Themakiezer (Admin > Instellingen) ---- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.theme-option { margin: 0; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.theme-option .theme-card {
    display: block; border: 2px solid var(--border); border-radius: 12px; overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.theme-option input:checked + .theme-card { border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--brand-tint); }
.theme-option input:focus-visible + .theme-card { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.theme-preview { display: flex; height: 64px; }
.theme-preview .tp-side { width: 30%; }
.theme-preview .tp-main { flex: 1; padding: 9px 8px; display: flex; flex-direction: column; gap: 6px; }
.theme-preview .tp-card { height: 14px; border-radius: 4px; }
.theme-preview .tp-btn { width: 46%; height: 10px; border-radius: 3px; }
.theme-preview.split { position: relative; }
.theme-preview.split .tp-half { flex: 1; display: flex; }
.theme-name { display: block; padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--bg-card); }
.theme-name small { display: block; font-weight: 500; color: var(--text-faint); font-size: 11px; }
.theme-group-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin: 4px 0 10px; }
.theme-preview.seasons span { flex: 1; }
.theme-effects { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.theme-effects input { width: auto; margin: 0; }

/* ============ Foutcodes (klant) ============ */
.fc-card { padding: 28px 24px 22px; }
.fc-card h3.fc-title { font-size: 17px; margin: 0 0 18px; }
.fc-choices { display: flex; flex-direction: column; gap: 4px; }
.fc-choice {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 7px 10px;
    font-size: 16px; font-weight: 500; color: var(--text); cursor: pointer;
    border-radius: 9px; max-width: 420px; transition: background .12s ease;
}
.fc-choice:hover { background: var(--row-hover); }
.fc-choice input {
    appearance: none; -webkit-appearance: none; flex: none;
    width: 22px; height: 22px; margin: 0; padding: 0; border-radius: 50%;
    border: 1.5px solid var(--text-faint); background: var(--surface);
    display: grid; place-content: center; cursor: pointer;
}
.fc-choice input::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: var(--brand-red); transform: scale(0); transition: transform .12s ease;
}
.fc-choice input:checked { border-color: var(--brand-red); }
.fc-choice input:checked::before { transform: scale(1); }
.fc-choice:has(input:checked) { background: var(--brand-tint); }
.fc-divider { border-top: 1px solid var(--border); margin: 26px -24px 20px; }
.fc-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-actions-end { justify-content: flex-end; }
.fc-actions .btn { min-width: 130px; padding: 13px 24px; font-size: 14.5px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
textarea.fc-codes {
    min-height: 420px; resize: vertical; margin: 0; padding: 14px 16px;
    font-family: var(--font-mono); font-size: 15px; line-height: 1.6;
    word-break: break-all; background: var(--bg-page); border-radius: 14px;
}
.fc-meta { display: flex; gap: 16px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.fc-version { font-weight: 700; color: var(--text); }
@media (max-width: 700px) {
    textarea.fc-codes { min-height: 300px; font-size: 14px; }
    .fc-actions .btn { flex: 1; }
}

/* ============ Nieuws ============ */
.news-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.news-head h3 { margin: 0; font-size: 16px; }
.news-tags { display: flex; gap: 6px; flex-shrink: 0; }
.news-date { font-size: 12px; color: var(--text-faint); margin: 4px 0 12px; }
.news-body { font-size: 14px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.news-pinned { border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--brand-tint); }
.news-mini { display: block; padding: 10px 0; border-bottom: 1px solid var(--border-soft); color: inherit; text-decoration: none; }
.news-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.news-mini:hover .news-mini-title { color: var(--brand-red); }
.news-mini-title { font-size: 13px; font-weight: 700; }
.news-mini-text { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.news-mini-date { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* ============ Brede tabellen netjes laten passen ============ */
/* Admin gebruikt de beschikbare schermbreedte (klantportaal blijft compact) */
body.is-admin .container { max-width: 1560px; }
/* Is een tabel toch breder dan de kaart, dan schuift alleen de kaart, nooit de hele pagina */
.card { overflow-x: auto; }
.card > table { min-width: 100%; }

/* Klantenoverzicht */
.clients-table td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.clients-table td .cell-primary { font-weight: 700; }
.client-settings { display: grid; grid-template-columns: repeat(2, minmax(118px, auto)); gap: 6px 14px; }
.client-settings form { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.cs-label { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.cs-btn { min-width: 46px; padding: 5px 10px; }
select.cs-select { margin: 0; padding: 4px 6px; width: auto; font-size: 12.5px; }
.client-actions { display: flex; flex-wrap: wrap; gap: 6px; max-width: 330px; }
.client-actions form { margin: 0; display: inline-flex; }
.client-grant { gap: 4px; align-items: center; }
.client-grant input { width: 74px; margin: 0; padding: 6px 8px; }
@media (max-width: 1100px) {
    .client-settings { grid-template-columns: 1fr; }
}

/* Klantrechten-overzicht compact */
.perm-table th, .perm-table td { padding: 8px 6px; }
.perm-table th.perm-col { text-align: center; font-size: 10.5px; line-height: 1.3; max-width: 96px; white-space: normal; vertical-align: bottom; }
.perm-table td.perm-cell { text-align: center; }
.perm-table td.perm-cell form { margin: 0; }
.perm-table .perm-toggle { min-width: 44px; padding: 5px 8px; font-size: 12px; }
.perm-table .perm-bulk-cell { white-space: nowrap; }
.perm-table .perm-bulk-cell form { display: inline-block; }
.perm-table .perm-mini { padding: 3px 7px; font-size: 10.5px; }
.perm-table td.perm-all { white-space: nowrap; }
.perm-table td.perm-all form { display: inline-block; margin: 0; }
.perm-table td:first-child { min-width: 170px; }