/* ===========================================================================
   MK Forms — Admin UI
   ---------------------------------------------------------------------------
   Design system: ge-extraheerd uit MetriTrace (navy/oranje, sidebar-shell).
   Doel: één duidelijk admin-design, en backwards-compatible met de
   bestaande klassen die de views al gebruiken (.card, .btn-*, .alert-*,
   .form-control, .table, .badge, .text-*).
   =========================================================================== */

/* ---------- Design tokens ------------------------------------------------- */
:root {
    --sidebar-width:           260px;
    --sidebar-collapsed-width: 70px;

    --c-primary:        #0b2747;
    --c-primary-md:     #1a3a5c;
    --c-primary-lt:     #2c5282;
    --c-sidebar-bg:     #061a31;
    --c-accent:         #f28c00;
    --c-accent-hover:   #e07b00;
    --c-accent-dk:      #b86500;
    --c-accent-lt:      #fff3e0;

    --c-text:           #1e293b;
    --c-text-muted:     #64748b;
    --c-muted:          #5a6878;
    --c-bg:             #f3f4f6;
    --c-white:          #ffffff;
    --c-surface:        #ffffff;
    --c-border:         #e2e8f0;
    --c-border-lt:      #e4e8ed;

    --c-success:        #2a7d46;
    --c-success-lt:     #eaf5ee;
    --c-danger:         #b83030;
    --c-danger-lt:      #fdeaea;
    --c-warning:        #c97000;
    --c-warning-lt:     #fef6e7;
    --c-info:           #1565a0;
    --c-info-lt:        #e8f1fa;

    --radius-xs:        2px;
    --radius-sm:        4px;
    --radius-md:        12px;
    --radius-lg:        18px;

    --shadow-sm:        0 1px 3px  rgba(0,0,0,0.06);
    --shadow-md:        0 3px 10px rgba(0,0,0,0.10);
    --shadow-lg:        0 8px 24px rgba(0,0,0,0.12);

    --trans:            0.2s ease;
}

/* ---------- Reset & base -------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-sidebar-bg); /* sidebar-rand kleurt mee bij scroll */
}

a {
    color: var(--c-primary-lt);
    text-decoration: none;
    transition: color var(--trans);
}
a:hover, a:focus { color: var(--c-accent); }

h1, h2, h3, h4, h5 {
    color: var(--c-primary);
    font-weight: 700;
    letter-spacing: -0.2px;
    margin: 0 0 .6em;
}
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p { margin: 0 0 .8em; }

hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: 1.2rem 0;
}

::placeholder { color: #a8b5c2; opacity: 1; }


/* ===========================================================================
   APP SHELL — sidebar + topbar + main
   =========================================================================== */
.app {
    display: flex;
    min-height: 100vh;
    background: var(--c-bg);
}

/* ---------- Sidebar ------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--c-sidebar-bg);
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width var(--trans);
    z-index: 1000;
}

.sidebar.collapsed                  { width: var(--sidebar-collapsed-width); }
.sidebar.collapsed .menu a          { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .menu a span,
.sidebar.collapsed .menu-title,
.sidebar.collapsed .brand-meta,
.sidebar.collapsed .sidebar-bottom .user-meta { display: none; }
.sidebar.collapsed .menu a i        { margin: 0; font-size: 1.25rem; }
.sidebar.collapsed .sidebar-top     { padding: 16px 0; justify-content: center; }
.sidebar.collapsed .sidebar-collapse-btn .label { display: none; }
.sidebar.collapsed .sidebar-collapse-btn        { justify-content: center; }
.sidebar.collapsed .sidebar-collapse-btn i      { transform: rotate(180deg); }

.sidebar-top {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-meta { min-width: 0; }

.sidebar-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sidebar-logo img,
.sidebar-logo svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.brand-text {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
}
.brand-text .white  { color: #fff; }
.brand-text .orange { color: var(--c-accent); }

.brand-sub {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Collapse-knop onderin de sidebar — altijd zichtbaar, ook bij collapsed */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 16px);
    margin: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: #94a3b8;
    border-radius: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--trans);
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-collapse-btn i { font-size: 14px; transition: transform var(--trans); }

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 12px;
}

.menu-title {
    padding: 18px 20px 6px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #94a3b8;
    font-weight: 700;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0 12px;
}
.menu li { margin: 0; }

.menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: #cbd5e1;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 500;
    transition: var(--trans);
    white-space: nowrap;
}
.menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.menu a.active {
    background: var(--c-accent);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(242,140,0,0.25);
}
.menu a i { width: 18px; text-align: center; font-size: 14px; }

.sidebar-bottom {
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-bottom .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.sidebar-bottom .user-meta { line-height: 1.25; min-width: 0; }
.sidebar-bottom .user-meta strong { color: #fff; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-bottom .user-meta a {
    color: #94a3b8; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.sidebar-bottom .user-meta a:hover { color: var(--c-accent); }


/* ---------- Content column ------------------------------------------------ */
.content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
}

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.topbar h1 {
    margin: 0;
    font-size: 20px;
    color: var(--c-primary);
    font-weight: 700;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main {
    padding: 26px 28px 32px;
    flex: 1;
    min-width: 0;
}


/* ===========================================================================
   COMPONENTS — backwards-compatible met bestaande view-klassen
   =========================================================================== */

/* ---------- Card / Panel -------------------------------------------------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.card > .card-header,
.card-header {
    background: #f7f9fc;
    border-bottom: 1px solid var(--c-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 13px;
    color: var(--c-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.card-body  { padding: 18px 20px; }
/* Compat: views die het hele blok als kaart gebruiken (geen header/body) */
.card:not(:has(.card-header)):not(:has(.card-body)) { padding: 18px 20px; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    background: #fff;
    color: var(--c-text);
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: var(--trans);
    user-select: none;
}
.btn:hover, .btn:focus {
    background: #eef1f5;
    border-color: #9aab8;
    color: var(--c-text);
    text-decoration: none;
    outline: none;
}
.btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.btn-primary {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--c-primary-md);
    border-color: var(--c-primary-md);
    color: #fff;
    box-shadow: 0 3px 8px rgba(13,33,55,0.3);
}

/* Accent = oranje = primaire actie */
.btn-success {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}
.btn-success:hover, .btn-success:focus {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
    color: #fff;
    box-shadow: 0 3px 8px rgba(224,123,0,0.3);
}

.btn-danger {
    background: var(--c-danger);
    color: #fff;
    border-color: var(--c-danger);
}
.btn-danger:hover, .btn-danger:focus {
    background: #952626;
    border-color: #952626;
    color: #fff;
}

.btn-warning {
    background: var(--c-warning);
    color: #fff;
    border-color: var(--c-warning);
}
.btn-warning:hover, .btn-warning:focus {
    background: #a55c00;
    border-color: #a55c00;
    color: #fff;
}

.btn-info {
    background: var(--c-info);
    color: #fff;
    border-color: var(--c-info);
}
.btn-info:hover, .btn-info:focus {
    background: #0e4d82;
    border-color: #0e4d82;
    color: #fff;
}

.btn-secondary {
    background: #f4f6f8;
    color: var(--c-text);
    border-color: var(--c-border);
}
.btn-secondary:hover, .btn-secondary:focus {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: var(--c-text);
}

.btn-link {
    background: transparent;
    color: var(--c-primary-lt);
    border: none;
    padding-left: 0;
    padding-right: 0;
}
.btn-link:hover { color: var(--c-accent); text-decoration: underline; background: transparent; }

.btn-sm    { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-xs    { padding: 3px 8px;  font-size: 11px; border-radius: 5px; }
.btn-lg    { padding: 11px 22px; font-size: 14px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }

.btn-icon {
    padding: 6px 8px;
    background: transparent;
    border-color: transparent;
    color: var(--c-text-muted);
}
.btn-icon:hover { background: #eef1f5; color: var(--c-primary); border-color: transparent; }


/* ---------- Forms --------------------------------------------------------- */
.form-group { margin-bottom: 16px; }

label, .form-label {
    display: block;
    font-weight: 700;
    font-size: 11px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 5px;
}

.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="search"].form-control,
input[type="url"].form-control,
input[type="tel"].form-control,
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
select.form-control,
textarea.form-control {
    width: 100%;
    height: 38px;
    padding: 7px 11px;
    font-size: 14px;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color var(--trans), box-shadow var(--trans);
    font-family: inherit;
}
.form-control:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px rgba(224,123,0,0.18);
    outline: none;
}
.form-control[disabled],
.form-control[readonly] {
    background: #f4f6f8;
    color: var(--c-muted);
    cursor: not-allowed;
}
textarea.form-control { height: auto; min-height: 110px; resize: vertical; }
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6878' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    padding-right: 30px;
}

.form-text { color: var(--c-muted); font-size: 12px; margin-top: 4px; }
.form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.input-group { display: flex; }
.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .form-control:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group-text,
.input-group-append .input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: #f0f2f5;
    border: 1px solid var(--c-border);
    border-left: 0;
    color: var(--c-muted);
    font-size: 13px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.error,
.field-error {
    color: var(--c-danger);
    font-size: 12px;
    margin-top: 4px;
}


/* ---------- Tables -------------------------------------------------------- */
table,
.table {
    width: 100%;
    background: var(--c-surface);
    border-collapse: collapse;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    overflow: hidden;
}
table thead th,
.table > thead > tr > th,
.table thead th {
    background: var(--c-primary);
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 11px 14px;
    text-align: left;
    border-bottom: none;
}
table tbody td,
.table > tbody > tr > td,
.table tbody td {
    padding: 10px 14px;
    border-top: 1px solid var(--c-border-lt);
    color: var(--c-text);
    vertical-align: middle;
    font-size: 13.5px;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #f7f9fc; }
.table-hover  > tbody > tr:hover            { background: var(--c-accent-lt); }
.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--c-border); }
.table-responsive { overflow-x: auto; }


/* ---------- Alerts -------------------------------------------------------- */
.alert {
    border: none;
    border-left: 4px solid transparent;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.5;
}
.alert-info     { background: var(--c-info-lt);    border-left-color: var(--c-info);    color: #0d3c6e; }
.alert-success  { background: var(--c-success-lt); border-left-color: var(--c-success); color: #1a5230; }
.alert-warning  { background: var(--c-warning-lt); border-left-color: var(--c-warning); color: #7d4600; }
.alert-danger,
.alert-error    { background: var(--c-danger-lt);  border-left-color: var(--c-danger);  color: #7a1e1e; }


/* ---------- Badges & labels ----------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    background: var(--c-accent);
    border-radius: var(--radius-sm);
}
.badge-success  { background: var(--c-success); }
.badge-red,
.badge-danger   { background: var(--c-danger); }
.badge-warning  { background: var(--c-warning); }
.badge-info     { background: var(--c-info); }
.badge-muted    { background: #7a8ea0; }

.label {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    background: #7a8ea0;
    border-radius: var(--radius-xs);
}
.label-default { background: #7a8ea0; }
.label-primary { background: var(--c-primary-md); }
.label-success { background: var(--c-success); }
.label-danger  { background: var(--c-danger); }
.label-warning { background: var(--c-warning); }
.label-info    { background: var(--c-info); }


/* ---------- Text utilities ------------------------------------------------ */
.text-primary    { color: var(--c-primary) !important; }
.text-success    { color: var(--c-success) !important; }
.text-danger     { color: var(--c-danger) !important; }
.text-warning,
.text-warn       { color: var(--c-warning) !important; }
.text-info       { color: var(--c-info) !important; }
.text-muted      { color: var(--c-muted) !important; }
.text-gray-800   { color: #1f2937 !important; }
.font-weight-bold{ font-weight: 700 !important; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.text-left       { text-align: left; }


/* ---------- Spacing utilities -------------------------------------------- */
.m-0 { margin: 0 !important; }
.mt-1{ margin-top: 0.25rem !important; }
.mt-2{ margin-top: 0.5rem !important; }
.mt-3{ margin-top: 1rem !important; }
.mt-4{ margin-top: 1.5rem !important; }
.mb-1{ margin-bottom: 0.25rem !important; }
.mb-2{ margin-bottom: 0.5rem !important; }
.mb-3{ margin-bottom: 1rem !important; }
.mb-4{ margin-bottom: 1.5rem !important; }
.py-3{ padding-top: 1rem !important; padding-bottom: 1rem !important; }
.shadow{ box-shadow: var(--shadow-md) !important; }


/* ---------- Bootstrap-ish grid stub --------------------------------------- */
.container-fluid { width: 100%; padding: 0 12px; }
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}
.row > [class^="col-"] { padding: 0 8px; box-sizing: border-box; }
.col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-sm-3 { flex: 0 0 25%;       max-width: 25%; }
.col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-sm-9 { flex: 0 0 75%;       max-width: 75%; }


/* ---------- Page header -------------------------------------------------- */
.page-header {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-border-lt);
}
.page-header h1, .page-header h2 { margin: 0; }


/* ===========================================================================
   AUTH SHELL — Metritrace stijl
   Donkere navy achtergrond met subtiel grid, witte kaart met oranje
   bovenrand, donkere header met logo, lichte body met formulier.
   =========================================================================== */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--c-sidebar-bg);
    background-image:
        repeating-linear-gradient( 0deg, transparent, transparent 39px,
            rgba(255,255,255,0.025) 39px, rgba(255,255,255,0.025) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px,
            rgba(255,255,255,0.025) 39px, rgba(255,255,255,0.025) 40px);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--radius-xs);
    box-shadow: 0 20px 60px rgba(0,0,0,0.40);
    overflow: hidden;
    border-top: 4px solid var(--c-accent);
}

.auth-card-header {
    background: var(--c-sidebar-bg);
    padding: 26px 32px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}
.auth-card-header img.auth-logo {
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto 12px;
    object-fit: contain;
}
.auth-card-header .brand-text {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
}
.auth-card-header .brand-text .white  { color: #fff; }
.auth-card-header .brand-text .orange { color: var(--c-accent); }
.auth-card-header .brand-sub {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 8px;
}

.auth-card-body { padding: 26px 32px 28px; background: #fff; }
.auth-card-body h2 {
    font-size: 16px;
    text-align: center;
    margin: 0 0 18px;
    color: var(--c-primary);
}
.auth-card-body p { color: var(--c-muted); font-size: 13px; line-height: 1.5; }

.auth-card-body .form-group { margin-bottom: 14px; }
.auth-card-body label {
    font-size: 10px;
    letter-spacing: 0.7px;
}
.auth-card-body .form-control {
    background: #f4f6f8;
    border-color: #cdd3da;
    height: 40px;
    border-radius: var(--radius-xs);
}
.auth-card-body .form-control:focus { background: #fff; }

.auth-card-body .btn-primary,
.auth-card-body button[type="submit"].btn {
    width: 100%;
    height: 42px;
    padding: 0;
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: var(--radius-xs);
    box-shadow: 0 2px 8px rgba(224,123,0,0.30);
}
.auth-card-body .btn-primary:hover,
.auth-card-body button[type="submit"].btn:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
    box-shadow: 0 4px 14px rgba(224,123,0,0.40);
}

.auth-card-body .auth-foot {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--c-muted);
}
.auth-card-body .auth-foot a { color: var(--c-muted); }
.auth-card-body .auth-foot a:hover { color: var(--c-accent); }

.auth-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 14px 22px;
    color: rgba(255,255,255,0.30);
    font-size: 12px;
    letter-spacing: 0.3px;
    text-align: right;
}
.auth-footer strong { color: rgba(255,255,255,0.50); font-weight: 600; }


/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        left: -100%;
        height: 100vh;
        z-index: 2000;
        transition: left var(--trans), width var(--trans);
    }
    .sidebar.is-open { left: 0; }
    .sidebar.collapsed { width: var(--sidebar-width); } /* op mobiel altijd uitgeklapt */
    .topbar { padding: 12px 16px; }
    .topbar-burger { display: inline-flex !important; }
    .main { padding: 18px 16px; }
}

.topbar-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--c-border);
    padding: 6px 9px;
    border-radius: 6px;
    color: var(--c-primary);
    font-size: 18px;
    cursor: pointer;
}
.topbar-burger:hover { background: #f4f6f8; }


/* ===========================================================================
   SCROLLBAR — MK Forms huisstijl (Webkit + Firefox)
   =========================================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--c-accent) var(--c-border-lt);
}
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--c-border-lt); border-radius: 99px; }
::-webkit-scrollbar-thumb   { background: var(--c-accent);    border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent-hover); }
::-webkit-scrollbar-corner  { background: var(--c-border-lt); }

/* Sidebar — subtieler, transparante track op de donkere achtergrond */
.sidebar,
.sidebar * {
    scrollbar-color: rgba(242,140,0,0.55) transparent;
}
.sidebar ::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb        { background: rgba(242,140,0,0.45); }
.sidebar ::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover  { background: var(--c-accent); }
.sidebar ::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track        { background: transparent; }


/* ===========================================================================
   PRINT — verberg shell bij printen
   =========================================================================== */
@media print {
    .sidebar, .topbar { display: none !important; }
    .content, .main  { background: #fff; padding: 0; }
}