:root{--teal:#003b4a;--lime:#c6c900;--ink:#153d4d;--muted:#7b858b;--bg:#f6f8f8;--line:#e3e7e8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.header{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 25px}.logo img{width:145px}.logo{display:block}.user{display:flex;align-items:center;gap:10px;font-size:12px}.user small{display:block;color:var(--muted);font-size:10px}.avatar{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:bold}.shell{display:flex;min-height:calc(100vh - 70px)}.side{width:198px;background:#fff;border-right:1px solid var(--line);padding:22px 9px;display:flex;flex-direction:column;justify-content:space-between}.side a{display:flex;gap:14px;align-items:center;height:43px;padding:0 13px;border-radius:7px;text-decoration:none;color:var(--ink);font-size:13px}.side a:hover,.side a.active{background:var(--teal);color:#fff}.label{font-size:9px;color:#78838a;font-weight:bold;margin:10px 9px}.sidefoot img{width:125px}.sidefoot small{display:block;color:#8b9297;font-size:9px;margin-top:20px}.main{flex:1;padding:28px;max-width:1600px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.top h1{margin:2px 0;font-size:27px}.top p{margin:4px 0;color:var(--muted);font-size:12px}.button{background:var(--lime);color:var(--ink);padding:11px 17px;border-radius:6px;text-decoration:none;border:0;font-weight:bold;cursor:pointer;display:inline-block}.big{font-size:14px;padding:14px 20px}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}.stat{text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:15px;display:flex;gap:12px}.stat i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:20px;background:#dce5e7}.stat i.urgent{background:#f3b5b5}.stat i.orange{background:#ffd29e}.stat i.blue{background:#b8d9eb}.stat i.lime{background:var(--lime)}.stat i.grey{background:#d4d7d8}.stat small,.stat span{display:block;font-size:10px}.stat b{display:block;font-size:26px;margin:5px 0}.panel{background:#fff;border:1px solid var(--line);border-radius:9px;padding:18px;box-shadow:0 2px 9px #003b4a08;margin-bottom:18px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.heading h2,.panel h2{font-size:17px;margin:0 0 12px}.heading a{font-size:10px;color:#00657a;text-decoration:none;font-weight:bold}table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;font-size:8px;color:#68747a;padding:10px 6px;border-bottom:1px solid var(--line)}td{padding:11px 6px;border-bottom:1px solid #eef0f1}td a{color:var(--ink);text-decoration:none}td a small,td a b{display:block}td a small{font-size:8px;color:#7b858b;margin-bottom:3px}.view{color:#00657a;font-weight:bold;font-size:9px}em{font-style:normal;padding:4px 7px;border-radius:4px;font-size:8px;font-weight:bold}.large{font-size:11px}.urgent{background:#ffdddd;color:#b93838}.high{background:#fff0d0;color:#9b6200}.normal{background:#eef0ef}.status{background:#e5f0f3;color:#17677a}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.barrow{display:grid;grid-template-columns:1fr 28px;gap:8px;margin:12px 0;font-size:10px}.barrow i{grid-column:1/3;background:#edf0f0;height:7px;border-radius:9px;display:block}.barrow u{display:block;height:100%;background:var(--teal);border-radius:9px;text-decoration:none}.filters{display:grid;grid-template-columns:2fr repeat(4,1fr) auto;gap:8px;margin-bottom:18px}.filters input,.filters select{margin:0}.filters .button{padding:10px 15px}.formwrap{max-width:950px;margin:auto}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:15px}.row.three{grid-template-columns:repeat(3,1fr)}label{font-size:12px;font-weight:bold;display:block}input,select,textarea{display:block;width:100%;margin-top:6px;border:1px solid #dfe3e4;border-radius:6px;padding:11px;font:inherit;background:#fff}textarea{min-height:100px;resize:vertical}.check{display:flex;align-items:center;gap:8px}.check input{width:auto;margin:0}.flash{padding:12px;margin-bottom:15px;border-radius:6px}.flash.success{background:#e1f1e6;color:#28683d}.flash.error{background:#ffe2e2;color:#a12f2f}.crumb{margin-bottom:15px}.crumb a{color:#00657a;text-decoration:none;font-size:11px}.ref{color:#7b858b;font-weight:bold}.workflow{display:grid;grid-template-columns:repeat(7,1fr);background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:18px}.workflow div{text-align:center;font-size:9px;color:#9aa1a5;padding:7px;border-right:1px solid var(--line)}.workflow div:last-child{border:0}.workflow span{display:block;margin:auto auto 6px;width:25px;height:25px;border-radius:50%;background:#e9ecec;padding-top:7px}.workflow .done{color:#3d737d}.workflow .done span{background:#dcebed;color:var(--teal)}.workflow .current{color:var(--ink);font-weight:bold}.workflow .current span{background:var(--lime);color:var(--ink)}.detailgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.facts small{display:block;color:var(--muted);font-size:9px;margin-bottom:5px}.facts b{font-size:11px}hr{border:0;border-top:1px solid var(--line);margin:20px 0}.panel h3{font-size:11px;margin-top:18px}.panel p{font-size:11px;line-height:1.6}.copybox{white-space:pre-wrap;background:#f7f8f8;border:1px solid var(--line);padding:12px;border-radius:6px;font-size:11px}.actions form{border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:15px}.full{width:100%;margin-top:9px}.comment{border-left:3px solid var(--teal);padding:8px 12px;margin:12px 0;background:#fafbfb}.commenttop{display:flex;justify-content:space-between;font-size:10px}.commenttop small,.history small{color:var(--muted);font-size:8px}.comment p{margin:8px 0}.comment span{font-size:8px;background:#e7eeee;padding:3px 6px;border-radius:4px}.commentform{border-top:1px solid var(--line);padding-top:15px}.commentform textarea{min-height:70px}.history{border-left:2px solid #dfe5e6;padding:0 0 10px 10px;margin-bottom:10px}.history b{display:block;font-size:10px}.history p{font-size:9px;margin:4px 0}.history small{display:block}@media(max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}.filters{grid-template-columns:1fr 1fr}.detailgrid{grid-template-columns:1fr}.two{grid-template-columns:1fr}}@media(max-width:720px){.side{width:62px}.side span,.label,.sidefoot{display:none}.side a{justify-content:center}.main{padding:18px}.stats,.row,.row.three{grid-template-columns:1fr}.workflow{overflow-x:auto}.workflow div{min-width:100px}.facts{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr}}

.proofpanel .heading p{font-size:10px;color:var(--muted);margin:0}.proof{border:1px solid var(--line);border-radius:8px;padding:14px;margin:14px 0;background:#fcfdfd}.proofhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.proofhead b{display:block;font-size:13px}.proofhead small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.approved,.revision,.pending{font-size:9px;font-weight:bold;padding:6px 9px;border-radius:5px}.approved{background:#dff1e3;color:#2d7542}.revision{background:#fff0d2;color:#966100}.pending{background:#e7f0f2;color:#246777}.prooffile{margin-top:12px;background:#f0f3f3;border-radius:6px;overflow:hidden;text-align:center}.prooffile img{max-width:100%;max-height:600px;display:block;margin:auto}.filebox{padding:35px;font-size:12px}.filebox a{display:block;color:#00657a;margin-top:10px;font-weight:bold}.proofnote,.decisionnote{background:#f7f8f8;padding:10px;border-radius:5px;font-size:10px}.decisionnote{background:#fff8e8}.decision textarea{min-height:65px;margin-bottom:8px}.decision div{display:flex;gap:8px;justify-content:flex-end}.button.secondary{background:#e9edef;color:var(--ink)}.emptyproof{padding:28px;text-align:center;color:var(--muted);background:#f8f9f9;border-radius:7px}.uploadbox{border-top:1px dashed #cfd6d7;margin-top:18px;padding-top:18px}.uploadbox h3{margin-top:0}.uploadbox label{margin-bottom:10px}

.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.adminform{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.adminform label:last-of-type{grid-column:span 2}.adminform .button{grid-column:span 2}.adminlist{border-top:1px solid var(--line)}.adminrow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.adminrow b{display:block;font-size:11px}.adminrow small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.tiny{border:0;border-radius:5px;padding:6px 9px;font-size:9px;font-weight:bold;background:#dff1e3;color:#2d7542;cursor:pointer}.tiny.inactive{background:#eee;color:#777}.navadmin{font-size:10px;font-weight:bold;color:#fff;text-decoration:none;margin-left:auto}@media(max-width:800px){.admin-grid{grid-template-columns:1fr}.adminform{grid-template-columns:1fr}.adminform label:last-of-type,.adminform .button{grid-column:auto}}

.calendarbar{display:flex;justify-content:space-between;align-items:center;margin:12px 0 14px}.calendarbar a{font-size:10px;font-weight:bold;color:#00657a;text-decoration:none}.calendarbar h2{margin:0;font-size:17px}.calendar{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}.weekdays,.days{display:grid;grid-template-columns:repeat(7,1fr)}.weekdays{background:#f0f3f3;border-bottom:1px solid var(--line)}.weekdays b{padding:10px;font-size:9px;color:var(--muted)}.day{min-height:125px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px;background:#fff}.day:nth-child(7n){border-right:0}.mutedday{background:#fafafa;opacity:.55}.today{box-shadow:inset 0 0 0 2px #00657a}.daynum{font-size:10px;font-weight:bold;margin-bottom:5px}.calitem{display:block;text-decoration:none;border-radius:5px;padding:5px 6px;margin:4px 0;font-size:8px;background:#eef3f4;border-left:3px solid #7a8b8e;color:var(--ink)}.calitem.high{border-left-color:#d99500;background:#fff6df}.calitem.urgent{border-left-color:#bd3c3c;background:#fff0f0}.calitem strong,.calitem span,.calitem small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calitem strong{font-size:7px;color:#00657a}.calitem small{color:var(--muted);margin-top:2px}.legend{display:flex;gap:18px;padding:10px 2px;font-size:9px;color:var(--muted)}.workgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.loadrow{padding:13px 0;border-bottom:1px solid var(--line)}.loadname{display:flex;justify-content:space-between}.loadname b{font-size:11px}.loadname small{font-size:9px;color:var(--muted)}.loadbar{height:7px;background:#edf0f0;border-radius:8px;margin:8px 0}.loadbar span{display:block;height:100%;border-radius:8px;background:#00657a}.urgentcount{font-size:9px}.upcoming{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}.upcoming b,.upcoming small{display:block}.upcoming b{font-size:10px}.upcoming small{font-size:8px;color:var(--muted);margin-top:3px}.upcoming strong{font-size:9px;white-space:nowrap}@media(max-width:800px){.workgrid{grid-template-columns:1fr}.day{min-height:85px}.calitem span,.calitem small{display:none}.weekdays b{padding:6px}}

/* =========================================================
   KALENDER
   ========================================================= */

.calendar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.calendar-title {
    margin: 15px 0;
}

.calendar-title h2 {
    font-size: 18px;
    margin: 0;
}

.calendar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f4f6f6;
    border-bottom: 1px solid var(--line);
}

.calendar-weekdays div {
    padding: 10px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--muted);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
    min-height: 125px;
    padding: 8px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.empty-day {
    background: #fafafa;
}

.today-day {
    background: #f3f8f8;
}

.calendar-number {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 6px;
}

.today-day .calendar-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #00657a;
    color: #fff;
}

.calendar-event {
    display: block;
    padding: 6px;
    margin-bottom: 5px;
    border-radius: 5px;
    background: #edf4f5;
    color: #173238;
    text-decoration: none;
    border-left: 3px solid #00657a;
}

.calendar-event strong,
.calendar-event small,
.calendar-event span {
    display: block;
}

.calendar-event strong {
    font-size: 8px;
}

.calendar-event small,
.calendar-event span {
    font-size: 7px;
    color: #657477;
    margin-top: 2px;
}

.event-high {
    border-left-color: #d99500;
    background: #fff8e7;
}

.event-urgent {
    border-left-color: #bd3c3c;
    background: #fff0f0;
}


/* =========================================================
   WERKSLADING
   ========================================================= */

.workload-card {
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
}

.workload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workload-header strong,
.workload-header small {
    display: block;
}

.workload-header strong {
    font-size: 12px;
}

.workload-header small {
    font-size: 8px;
    color: var(--muted);
    margin-top: 3px;
}

.workload-number {
    font-size: 22px;
    font-weight: 800;
}

.workload-bar {
    height: 10px;
    margin: 10px 0;
    background: #edf0f0;
    border-radius: 10px;
    overflow: hidden;
}

.workload-fill {
    height: 100%;
    background: #00657a;
    border-radius: 10px;
}

.workload-stats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.workload-stats span {
    font-size: 8px;
    color: var(--muted);
}

.workload-stats b {
    color: #173238;
}

.danger-text,
.danger-text b {
    color: #bd3c3c !important;
}


@media (max-width: 800px) {

    .calendar-day {
        min-height: 90px;
        padding: 4px;
    }

    .calendar-event {
        padding: 4px;
    }

    .calendar-event small,
    .calendar-event span {
        display: none;
    }

}
/* =========================================
   MOS HEADER
   ========================================= */

.header-right {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 18px;
}


/* =========================================
   MOS NOTIFICATION BELL
   ========================================= */

.mos-notification-bell {

    position: relative;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    color: #ffffff;

    border-radius: 12px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.mos-notification-bell:hover {

    background: rgba(255,255,255,0.10);

    transform: translateY(-1px);

}


.bell-icon {

    font-size: 21px;

    line-height: 1;

}


.notification-badge {

    position: absolute;

    top: 1px;
    right: 0;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #D71920;

    color: #ffffff;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    line-height: 1;

    border: 2px solid #ffffff;

    box-sizing: border-box;

}
/* =========================================
   MOS LOGIN
   ========================================= */

.login-page {

    min-height: 100vh;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #f4f5f7 0%,
            #ffffff 100%
        );

}


.login-container {

    width: 100%;

    max-width: 440px;

    padding: 24px;

    box-sizing: border-box;

}


.login-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 42px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.10);

    border: 1px solid #e8e8e8;

}


.login-logo {

    display: block;

    width: 170px;

    max-width: 70%;

    height: auto;

    margin: 0 auto 28px;

}


.login-title {

    text-align: center;

    margin-bottom: 28px;

}


.login-title h1 {

    margin: 0 0 8px;

    font-size: 30px;

    font-weight: 800;

}


.login-title p {

    margin: 0;

    color: #6b7280;

    font-size: 14px;

}


.login-form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.login-form label {

    font-size: 13px;

    font-weight: 700;

    margin-top: 8px;

}


.login-form input {

    width: 100%;

    box-sizing: border-box;

    padding: 13px 14px;

    border: 1px solid #d6d9df;

    border-radius: 10px;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.login-form input:focus {

    border-color: #D71920;

    box-shadow:
        0 0 0 3px rgba(
            215,
            25,
            32,
            0.10
        );

}


.login-button {

    margin-top: 18px;

    width: 100%;

    border: none;

    border-radius: 10px;

    padding: 14px;

    background: #D71920;

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease;

}


.login-button:hover {

    opacity: 0.92;

    transform: translateY(-1px);

}


.login-footer {

    text-align: center;

    margin-top: 28px;

    color: #9ca3af;

}
/* =========================================================
   MOS USER MANAGEMENT
   ========================================================= */

.admin-grid {

    display: grid;

    grid-template-columns:
        minmax(300px, 380px)
        minmax(500px, 1fr);

    gap: 24px;

}


.card {

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    padding: 24px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.05);

}


.card-header {

    margin-bottom: 22px;

}


.card-header h2 {

    margin: 0 0 5px;

}


.card-header p {

    margin: 0;

    color: #6b7280;

    font-size: 13px;

}


.admin-form {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.admin-form label {

    font-size: 13px;

    font-weight: 700;

    margin-top: 7px;

}


.admin-form input,
.admin-form select {

    width: 100%;

    box-sizing: border-box;

    padding: 11px 12px;

    border: 1px solid #d6d9df;

    border-radius: 9px;

    background: #ffffff;

}


.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success {

    border: none;

    border-radius: 9px;

    padding: 10px 14px;

    font-weight: 700;

    cursor: pointer;

}


.btn-primary {

    background: #D71920;

    color: #ffffff;

}


.btn-secondary {

    background: #374151;

    color: #ffffff;

}


.btn-danger {

    background: #b91c1c;

    color: #ffffff;

}


.btn-success {

    background: #15803d;

    color: #ffffff;

}


.user-list {

    display: flex;

    flex-direction: column;

}


.user-management-row {

    display: grid;

    grid-template-columns:
        42px
        minmax(130px, 1fr)
        110px
        80px
        auto;

    align-items: center;

    gap: 14px;

    padding: 15px 0;

    border-bottom: 1px solid #eeeeee;

}


.user-management-row:last-child {

    border-bottom: none;

}


.management-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #D71920;

    color: #ffffff;

    font-weight: 800;

}


.management-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.management-info small {

    color: #6b7280;

    font-size: 12px;

}


.role-badge {

    display: inline-block;

    padding: 5px 9px;

    border-radius: 999px;

    background: #eef2f7;

    font-size: 11px;

    font-weight: 800;

}


.status-active {

    color: #15803d;

    font-size: 12px;

    font-weight: 800;

}


.status-inactive {

    color: #b91c1c;

    font-size: 12px;

    font-weight: 800;

}


.management-actions details summary {

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;

}


.user-action-panel {

    position: absolute;

    right: 0;

    z-index: 20;

    width: 300px;

    padding: 18px;

    margin-top: 8px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.15);

}


.management-actions {

    position: relative;

}


.user-action-panel form {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;

}


.user-action-panel form:last-child {

    margin-bottom: 0;

}


.user-action-panel label {

    font-size: 11px;

    font-weight: 800;

}


.user-action-panel input,
.user-action-panel select {

    padding: 9px;

    border: 1px solid #d6d9df;

    border-radius: 7px;

}


.empty-state {

    padding: 40px;

    text-align: center;

    color: #6b7280;

}


@media (max-width: 900px) {

    .admin-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 700px) {

    .user-management-row {

        grid-template-columns: 42px 1fr;

    }

    .management-role,
    .management-status {

        display: none;

    }

    .management-actions {

        grid-column: 2;

    }

}
.password-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
}

.password-field label {
    font-size: 13px;
    font-weight: 700;
}

.password-field input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #d6d9df;
    border-radius: 9px;
    background: #fff;
    color: #222;
    font-size: 14px;
}

.password-field input:focus {
    outline: none;
    border-color: #D71920;
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.12);
}

.password-field small {
    color: #6b7280;
    font-size: 11px;
}
}
.user-password-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* =========================================================
   SCHOOL MANAGEMENT
   ========================================================= */

.school-list {
    display: flex;
    flex-direction: column;
}

.school-management-row {
    display: grid;
    grid-template-columns: 42px 1fr 80px 80px 70px auto;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid #eeeeee;
}

.school-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    font-size: 20px;
}

.school-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.school-info small {
    color: #6b7280;
    font-size: 11px;
}

.school-count {
    text-align: center;
}

.school-count strong,
.school-count small {
    display: block;
}

.school-count strong {
    font-size: 16px;
}

.school-count small {
    font-size: 9px;
    color: #6b7280;
}


.school-type-list {
    display: flex;
    flex-direction: column;
}

.school-type-row {
    display: grid;
    grid-template-columns: 42px 1fr 80px auto;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid #eeeeee;
}

.school-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    font-size: 20px;
}

.school-type-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.school-type-info small {
    color: #6b7280;
    font-size: 11px;
}

.admin-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d6d9df;
    border-radius: 9px;
    font-family: inherit;
    resize: vertical;
}
/* =========================================================
   MOS DESIGNHUB - TEMPLATES
   ========================================================= */

.template-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.template-create-card {
    position: sticky;
    top: 20px;
}

.template-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.days-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.days-input input {
    flex: 1;
}

.days-input span {
    color: #6b7280;
    font-size: 12px;
}

.template-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.template-check input {
    width: auto !important;
    margin: 0;
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-item {
    border: 1px solid #e4e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.template-item summary {
    display: grid;
    grid-template-columns: 42px 1fr auto auto 22px;
    align-items: center;
    gap: 14px;
    padding: 15px;
    cursor: pointer;
    list-style: none;
}

.template-item summary::-webkit-details-marker {
    display: none;
}

.template-item summary:hover {
    background: #f8f9fa;
}

.template-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f2f4f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.template-summary-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.template-summary-name strong {
    font-size: 14px;
}

.template-summary-name small {
    font-size: 11px;
    color: #6b7280;
}

.template-priority {
    padding: 5px 9px;
    border-radius: 20px;
    background: #f2f4f5;
    font-size: 10px;
    font-weight: 700;
}

.template-chevron {
    color: #7c858c;
    transition: transform .2s ease;
}

.template-item[open] .template-chevron {
    transform: rotate(180deg);
}

.template-editor {
    padding: 18px;
    border-top: 1px solid #e7eaed;
    background: #fafafa;
}

.template-toggle-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 1000px) {

    .template-layout {
        grid-template-columns: 1fr;
    }

    .template-create-card {
        position: static;
    }
}

@media (max-width: 650px) {

    .template-form-grid {
        grid-template-columns: 1fr;
    }

    .template-item summary {
        grid-template-columns: 42px 1fr auto;
    }

    .template-priority,
    .template-item summary > div:nth-child(4) {
        display: none;
    }
}
/* =========================================================
   REQUEST TEMPLATE SELECTOR
   ========================================================= */

.template-selector-panel {
    border-left: 4px solid #bfb800;
}

.template-selector-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.template-selector-header h2 {
    margin: 0 0 3px;
}

.template-selector-header p {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
}

.template-selector-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    background: rgba(191, 184, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.template-applied-message {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f4f6ea;
    font-size: 12px;
    font-weight: 600;
    color: #003b4a;
}

/* =========================================================
   DESIGNHUB SETTINGS
   ========================================================= */

.settings-form {
    padding-bottom: 90px;
}

.settings-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.settings-layout .card:last-child {
    grid-column: 1 / -1;
}

.settings-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

.settings-section-heading h2 {
    margin: 0 0 3px;
}

.settings-section-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
}

.settings-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(191, 184, 0, 0.14);
    color: #003b4a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 0 0 44px;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.settings-number {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-number input {
    max-width: 120px;
}

.settings-number span {
    font-size: 12px;
    color: #6b7280;
}

.settings-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-top: 18px;
}

.settings-toggle > input {
    display: none;
}

.settings-toggle-ui {
    width: 42px;
    height: 24px;
    border-radius: 30px;
    background: #cfd4d8;
    position: relative;
    flex: 0 0 42px;
    transition: 0.2s ease;
}

.settings-toggle-ui::after {
    content: "";
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.settings-toggle input:checked
+ .settings-toggle-ui {
    background: #bfb800;
}

.settings-toggle input:checked
+ .settings-toggle-ui::after {
    transform: translateX(18px);
}

.settings-toggle strong,
.settings-toggle small {
    display: block;
}

.settings-toggle small {
    margin-top: 2px;
    color: #6b7280;
    font-size: 11px;
}

.settings-save-bar {
    position: sticky;
    bottom: 15px;
    margin-top: 20px;
    padding: 14px 18px;
    border: 1px solid #e2e5e8;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 30px rgba(0,0,0,.09);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 10;
}

.settings-save-bar strong,
.settings-save-bar small {
    display: block;
}

.settings-save-bar small {
    color: #6b7280;
    margin-top: 2px;
}

@media (max-width: 800px) {

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-layout .card:last-child {
        grid-column: auto;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MOS DESIGNHUB - STATISTIEK
   ========================================================= */

.stats-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.stats-header-button {
    white-space: nowrap;
}

.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.stats-kpi {
    background: #ffffff;
    border: 1px solid #e3e7e9;
    border-radius: 13px;
    padding: 17px;
    min-width: 0;
}

.stats-kpi-label {
    display: block;
    color: #66727a;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 7px;
}

.stats-kpi strong {
    display: block;
    color: #003b4a;
    font-size: 27px;
    line-height: 1;
    margin-bottom: 7px;
}

.stats-kpi small {
    color: #7b858c;
    font-size: 10px;
}

.stats-kpi-danger {
    border-top: 3px solid #c0392b;
}

.stats-kpi-warning {
    border-top: 3px solid #d98b19;
}

.stats-kpi-good {
    border-top: 3px solid #bfb800;
}

.stats-performance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.stats-performance-card {
    text-align: center;
}

.stats-performance-label {
    display: block;
    color: #6f7980;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 7px;
}

.stats-performance-card strong {
    display: block;
    color: #003b4a;
    font-size: 30px;
}

.stats-performance-card small {
    color: #7b858c;
}

.stats-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.stats-section-heading h2 {
    margin: 0 0 3px;
}

.stats-section-heading p {
    margin: 0;
    color: #707a81;
    font-size: 11px;
}

.stats-monthly-card {
    margin-bottom: 20px;
}

.stats-month-chart {
    height: 235px;
    display: grid;
    grid-template-columns: repeat(12, minmax(30px, 1fr));
    gap: 8px;
    align-items: end;
    overflow-x: auto;
    padding-top: 12px;
}

.stats-month-column {
    height: 205px;
    min-width: 36px;
    display: grid;
    grid-template-rows: 20px 1fr 28px;
    align-items: end;
    text-align: center;
}

.stats-month-value {
    color: #59666e;
    font-size: 10px;
    font-weight: 700;
}

.stats-month-bar-wrap {
    height: 145px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid #e4e8ea;
}

.stats-month-bar {
    width: min(30px, 70%);
    min-height: 3px;
    background: #bfb800;
    border-radius: 6px 6px 0 0;
}

.stats-month-label {
    padding-top: 7px;
    color: #6d777e;
    font-size: 9px;
    white-space: nowrap;
}

.stats-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stats-bar-list,
.stats-ranking-list,
.stats-priority-list,
.stats-recent-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.stats-bar-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-bar-meta,
.stats-ranking-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
}

.stats-bar-meta strong,
.stats-ranking-meta strong {
    color: #003b4a;
}

.stats-bar-track {
    height: 7px;
    overflow: hidden;
    border-radius: 20px;
    background: #edf0f1;
}

.stats-bar-fill {
    height: 100%;
    min-width: 2px;
    border-radius: 20px;
    background: #bfb800;
}

.stats-priority-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #eef0f1;
}

.stats-priority-row:last-child {
    border-bottom: 0;
}

.stats-priority-row strong,
.stats-priority-row small {
    display: block;
}

.stats-priority-row strong {
    font-size: 12px;
}

.stats-priority-row small {
    margin-top: 2px;
    color: #7a848a;
    font-size: 10px;
}

.stats-priority-row b {
    color: #003b4a;
}

.stats-priority-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #bfb800;
}

.stats-priority-urgent {
    background: #c0392b;
}

.stats-priority-high {
    background: #d98b19;
}

.stats-ranking-row {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: center;
}

.stats-ranking-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f3f4;
    color: #003b4a;
    font-size: 10px;
    font-weight: 800;
}

.stats-ranking-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-designer-table {
    display: flex;
    flex-direction: column;
}

.stats-designer-head,
.stats-designer-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 90px 90px 90px;
    gap: 12px;
    align-items: center;
}

.stats-designer-head {
    padding: 0 10px 9px;
    color: #737d84;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.stats-designer-row {
    padding: 12px 10px;
    border-top: 1px solid #edf0f1;
    font-size: 11px;
}

.stats-designer-name {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.stats-designer-name strong {
    font-size: 12px;
}

.stats-text-link {
    color: #003b4a;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.stats-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f1;
    color: inherit;
    text-decoration: none;
}

.stats-recent-row:last-child {
    border-bottom: 0;
}

.stats-recent-row strong,
.stats-recent-row small {
    display: block;
}

.stats-recent-row strong {
    font-size: 11px;
    color: #17252d;
}

.stats-recent-row small {
    margin-top: 3px;
    color: #788289;
    font-size: 9px;
}

.stats-recent-row > span {
    color: #657078;
    font-size: 10px;
    white-space: nowrap;
}

@media (max-width: 1200px) {

    .stats-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {

    .stats-two-column,
    .stats-performance-grid {
        grid-template-columns: 1fr;
    }

    .stats-designer-head,
    .stats-designer-row {
        grid-template-columns: minmax(140px, 1fr) 60px 60px 60px;
    }
}

@media (max-width: 650px) {

    .stats-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .stats-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-month-chart {
        min-width: 620px;
    }

    .stats-designer-head,
    .stats-designer-row {
        grid-template-columns: 1fr 55px 55px;
    }

    .stats-designer-head span:last-child,
    .stats-designer-row span:last-child {
        display: none;
    }
}

/* =========================================================
   MOS DESIGNHUB - VERSLAE
   ========================================================= */

.reports-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.reports-header-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.reports-secondary-button {
    background: #ffffff;
    color: #003b4a;
    border: 1px solid #dfe4e6;
}

.reports-filter-card {
    margin-bottom: 20px;
}

.reports-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.reports-section-heading h2 {
    margin: 0 0 3px;
}

.reports-section-heading p {
    margin: 0;
    color: #707a81;
    font-size: 11px;
}

.reports-clear-link {
    color: #003b4a;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.reports-filter-form {
    display: grid;
    grid-template-columns:
        minmax(210px, 1.5fr)
        repeat(2, minmax(130px, .8fr))
        repeat(5, minmax(145px, 1fr));
    gap: 12px;
    align-items: end;
}

.reports-filter-form label {
    min-width: 0;
}

.reports-filter-form input,
.reports-filter-form select {
    width: 100%;
    box-sizing: border-box;
}

.reports-filter-submit {
    display: flex;
    align-items: end;
}

.reports-filter-submit .button {
    width: 100%;
    white-space: nowrap;
}

.reports-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 20px;
}

.reports-summary-card {
    background: #ffffff;
    border: 1px solid #e2e6e8;
    border-radius: 13px;
    padding: 16px;
}

.reports-summary-card > span {
    display: block;
    color: #6a757c;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 7px;
}

.reports-summary-card strong {
    display: block;
    color: #003b4a;
    font-size: 25px;
    line-height: 1;
    margin-bottom: 6px;
}

.reports-summary-card small {
    color: #7c858b;
    font-size: 9px;
}

.reports-summary-danger {
    border-top: 3px solid #c0392b;
}

.reports-summary-warning {
    border-top: 3px solid #d98b19;
}

.reports-summary-good {
    border-top: 3px solid #bfb800;
}

.reports-results-card {
    overflow: hidden;
}

.reports-print-meta {
    color: #80898f;
    font-size: 10px;
}

.reports-table-wrap {
    overflow-x: auto;
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.reports-table th {
    padding: 10px 9px;
    border-bottom: 1px solid #dfe4e6;
    color: #6f7980;
    font-size: 9px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.reports-table td {
    padding: 12px 9px;
    border-bottom: 1px solid #edf0f1;
    color: #313d43;
    font-size: 10px;
    vertical-align: middle;
}

.reports-table tbody tr:hover {
    background: #fafbfb;
}

.reports-ref-link {
    color: #003b4a;
    font-weight: 800;
    text-decoration: none;
}

.reports-title-cell strong,
.reports-title-cell small {
    display: block;
}

.reports-title-cell strong {
    color: #19282f;
    font-size: 11px;
}

.reports-title-cell small {
    margin-top: 3px;
    color: #7a848a;
    font-size: 9px;
}

.reports-priority,
.reports-status {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px 8px;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 800;
}

.reports-priority {
    background: #f0f2f3;
    color: #4b565c;
}

.reports-priority-urgent {
    background: rgba(192, 57, 43, .10);
    color: #9f2e22;
}

.reports-priority-high {
    background: rgba(217, 139, 25, .12);
    color: #9a6010;
}

.reports-status {
    background: rgba(0, 59, 74, .08);
    color: #003b4a;
}

.reports-overdue-date {
    color: #b5362a;
    font-weight: 800;
}

.reports-empty {
    padding: 35px !important;
    text-align: center;
    color: #788188 !important;
}

@media (max-width: 1450px) {

    .reports-filter-form {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .reports-search-field {
        grid-column: span 2;
    }
}

@media (max-width: 1100px) {

    .reports-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 750px) {

    .reports-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .reports-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-search-field {
        grid-column: 1 / -1;
    }

    .reports-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {

    .reports-filter-form,
    .reports-summary-grid {
        grid-template-columns: 1fr;
    }

    .reports-search-field {
        grid-column: auto;
    }

    .reports-header-actions {
        width: 100%;
    }

    .reports-header-actions .button {
        flex: 1;
        text-align: center;
    }
}


/* =========================================================
   PRINTABLE REPORT
   ========================================================= */

@media print {

    .header,
    .side,
    .reports-header-actions,
    .reports-filter-card,
    .flash,
    .sidefoot {
        display: none !important;
    }

    body,
    .shell,
    .main {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .reports-page-header {
        display: block;
        margin-bottom: 16px;
    }

    .reports-summary-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
    }

    .reports-summary-card,
    .reports-results-card {
        box-shadow: none !important;
        break-inside: avoid;
    }

    .reports-summary-card {
        padding: 9px;
    }

    .reports-summary-card strong {
        font-size: 18px;
    }

    .reports-table-wrap {
        overflow: visible;
    }

    .reports-table {
        min-width: 0;
        font-size: 8px;
    }

    .reports-table th,
    .reports-table td {
        padding: 6px 4px;
    }

    .reports-ref-link {
        color: #000000;
    }

    a {
        text-decoration: none !important;
    }
}

/* =========================================================
   MOS DESIGNHUB - UITVOER
   ========================================================= */

.export-page-header {
    margin-bottom: 18px;
}

.export-intro-card {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.export-intro-card h2 {
    margin: 0 0 4px;
}

.export-intro-card p {
    margin: 0;
    color: #727d83;
    font-size: 11px;
}

.export-intro-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(191, 184, 0, .15);
    color: #003b4a;
    font-size: 22px;
    font-weight: 800;
}

.export-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.export-card {
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.export-card-danger {
    border-top: 3px solid #c0392b;
}

.export-card-admin {
    border-top: 3px solid #003b4a;
}

.export-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.export-card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #f1f3f4;
    color: #003b4a;
    font-size: 19px;
}

.export-count {
    color: #003b4a;
    font-size: 22px;
    font-weight: 800;
}

.export-card h2 {
    margin: 0 0 6px;
    font-size: 16px;
}

.export-card p {
    flex: 1;
    margin: 0 0 18px;
    color: #737e84;
    font-size: 11px;
    line-height: 1.5;
}

.export-button {
    align-self: flex-start;
}

.export-custom-card {
    margin-bottom: 16px;
}

.export-section-heading {
    margin-bottom: 17px;
}

.export-section-heading h2 {
    margin: 0 0 4px;
}

.export-section-heading p {
    margin: 0;
    color: #707a81;
    font-size: 11px;
}

.export-custom-form {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(150px, 1fr))
        auto;
    gap: 12px;
    align-items: end;
}

.export-custom-form input,
.export-custom-form select {
    width: 100%;
    box-sizing: border-box;
}

.export-custom-submit {
    display: flex;
    align-items: end;
}

.export-custom-submit .button {
    white-space: nowrap;
}

.export-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 11px 13px;
    border-radius: 9px;
    background: #f4f6ea;
    color: #526068;
    font-size: 10px;
}

.export-note strong {
    color: #003b4a;
}

@media (max-width: 1100px) {

    .export-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .export-custom-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .export-grid,
    .export-custom-form {
        grid-template-columns: 1fr;
    }

    .export-custom-submit .button {
        width: 100%;
    }
}

/* =========================================================
   MOS DESIGNHUB - MY PROFIEL
   ========================================================= */

.profile-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.profile-header-button {
    white-space: nowrap;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.profile-main,
.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-account-card {
    padding: 22px;
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 19px;
    border-bottom: 1px solid #edf0f1;
}

.profile-avatar {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #003b4a;
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .03em;
}

.profile-identity-copy {
    min-width: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.profile-name-row h2 {
    margin: 0;
}

.profile-role-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px 9px;
    background: rgba(191, 184, 0, .16);
    color: #5e5a00;
    font-size: 9px;
    font-weight: 800;
}

.profile-identity-copy p {
    margin: 5px 0 4px;
    color: #526068;
    font-size: 11px;
}

.profile-identity-copy small {
    display: block;
    color: #7a848a;
    font-size: 10px;
    line-height: 1.5;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding-top: 19px;
}

.profile-details-grid > div {
    padding: 13px;
    border: 1px solid #e9edef;
    border-radius: 10px;
    background: #fafbfb;
}

.profile-details-grid span,
.profile-details-grid strong {
    display: block;
}

.profile-details-grid span {
    margin-bottom: 4px;
    color: #788289;
    font-size: 9px;
    font-weight: 700;
}

.profile-details-grid strong {
    overflow-wrap: anywhere;
    color: #25343b;
    font-size: 11px;
}

.profile-account-note {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #f4f6ea;
    color: #667178;
    font-size: 9px;
}

.profile-account-note strong {
    color: #003b4a;
    white-space: nowrap;
}

.profile-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
}

.profile-section-heading h2 {
    margin: 0 0 3px;
}

.profile-section-heading p {
    margin: 0;
    color: #747e84;
    font-size: 10px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.profile-stat {
    padding: 15px;
    border: 1px solid #e4e8ea;
    border-radius: 11px;
}

.profile-stat span {
    display: block;
    margin-bottom: 7px;
    color: #6f7a80;
    font-size: 9px;
    font-weight: 700;
}

.profile-stat strong {
    color: #003b4a;
    font-size: 24px;
    line-height: 1;
}

.profile-stat-focus {
    border-top: 3px solid #d98b19;
}

.profile-stat-good {
    border-top: 3px solid #bfb800;
}

.profile-text-link {
    color: #003b4a;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.profile-deadline-list {
    display: flex;
    flex-direction: column;
}

.profile-deadline-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f1;
    color: inherit;
    text-decoration: none;
}

.profile-deadline-row:last-child {
    border-bottom: 0;
}

.profile-deadline-date {
    padding: 7px 5px;
    border-radius: 8px;
    background: #f1f3f4;
    color: #003b4a;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}

.profile-deadline-main strong,
.profile-deadline-main small {
    display: block;
}

.profile-deadline-main strong {
    color: #1b2b32;
    font-size: 10px;
}

.profile-deadline-main small {
    margin-top: 3px;
    color: #7a848a;
    font-size: 9px;
}

.profile-deadline-row > span {
    color: #778187;
    font-size: 11px;
}

.profile-empty {
    padding: 22px 0;
    color: #7b858b;
    font-size: 10px;
    text-align: center;
}

.profile-password-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-password-form input {
    width: 100%;
    box-sizing: border-box;
}

.profile-access-card h2 {
    margin-top: 0;
}

.profile-access-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.profile-access-list span {
    padding-bottom: 8px;
    border-bottom: 1px solid #edf0f1;
    color: #536068;
    font-size: 10px;
}

.profile-access-list span:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

@media (max-width: 1050px) {

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 750px) {

    .profile-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-details-grid,
    .profile-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {

    .profile-identity {
        align-items: flex-start;
    }

    .profile-details-grid,
    .profile-stats-grid {
        grid-template-columns: 1fr;
    }

    .profile-account-note {
        flex-direction: column;
    }
}

/* =========================================================
   MOS DESIGNHUB - STAGE M GOEDKEURINGS
   ========================================================= */

.approvals-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.approvals-header-button {
    white-space: nowrap;
}

.approvals-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 20px;
}

.approvals-summary-card {
    padding: 16px;
    border: 1px solid #e2e7e9;
    border-radius: 13px;
    background: #ffffff;
}

.approvals-summary-card span,
.approvals-summary-card small {
    display: block;
}

.approvals-summary-card span {
    margin-bottom: 7px;
    color: #69757c;
    font-size: 10px;
    font-weight: 800;
}

.approvals-summary-card strong {
    display: block;
    margin-bottom: 6px;
    color: #003b4a;
    font-size: 26px;
    line-height: 1;
}

.approvals-summary-card small {
    color: #7b858b;
    font-size: 9px;
}

.approvals-summary-danger {
    border-top: 3px solid #c0392b;
}

.approvals-summary-urgent {
    border-top: 3px solid #d98b19;
}

.approvals-summary-warning {
    border-top: 3px solid #bfb800;
}

.approvals-filter-card {
    margin-bottom: 20px;
}

.approvals-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
}

.approvals-section-heading h2 {
    margin: 0 0 3px;
}

.approvals-section-heading p {
    margin: 0;
    color: #737e84;
    font-size: 10px;
}

.approvals-clear-link {
    color: #003b4a;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.approvals-filter-form {
    display: grid;
    grid-template-columns:
        minmax(210px, 1.5fr)
        repeat(4, minmax(145px, 1fr))
        auto;
    gap: 12px;
    align-items: end;
}

.approvals-filter-form input,
.approvals-filter-form select {
    width: 100%;
    box-sizing: border-box;
}

.approvals-filter-submit {
    display: flex;
    align-items: end;
}

.approvals-filter-submit .button {
    white-space: nowrap;
}

.approvals-list {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.approval-card {
    overflow: hidden;
    padding: 0;
}

.approval-card-urgent {
    border-left: 4px solid #d98b19;
}

.approval-card-overdue {
    border-left: 4px solid #c0392b;
}

.approval-card-main {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    min-height: 250px;
}

.approval-preview {
    min-height: 250px;
    border-right: 1px solid #e8ecee;
    background: #f4f6f7;
}

.approval-preview > a {
    width: 100%;
    height: 100%;
}

.approval-preview img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 250px;
    max-height: 330px;
    object-fit: cover;
}

.approval-file-preview {
    min-height: 250px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: #003b4a;
    text-align: center;
    text-decoration: none;
}

.approval-file-preview span {
    font-size: 34px;
}

.approval-file-preview strong {
    max-width: 170px;
    overflow-wrap: anywhere;
    font-size: 10px;
}

.approval-file-preview small {
    color: #6e7a81;
    font-size: 9px;
}

.approval-content {
    min-width: 0;
    padding: 20px;
}

.approval-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.approval-ref-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.approval-ref {
    color: #003b4a;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}

.approval-proof-version {
    padding: 4px 7px;
    border-radius: 20px;
    background: #eef1f2;
    color: #657178;
    font-size: 8px;
    font-weight: 800;
}

.approval-card-topline h2 {
    margin: 6px 0 0;
    color: #192a31;
    font-size: 17px;
}

.approval-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.approval-priority,
.approval-overdue-badge,
.approval-today-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px 8px;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 900;
}

.approval-priority {
    background: #eef1f2;
    color: #566269;
}

.approval-priority-high {
    background: rgba(217, 139, 25, .12);
    color: #965e12;
}

.approval-priority-urgent {
    background: rgba(192, 57, 43, .10);
    color: #9e3025;
}

.approval-overdue-badge {
    background: rgba(192, 57, 43, .10);
    color: #9e3025;
}

.approval-today-badge {
    background: rgba(191, 184, 0, .15);
    color: #625f00;
}

.approval-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 17px;
}

.approval-meta-grid > div {
    padding: 10px;
    border: 1px solid #e8ecee;
    border-radius: 9px;
    background: #fafbfb;
}

.approval-meta-grid span,
.approval-meta-grid strong {
    display: block;
}

.approval-meta-grid span {
    margin-bottom: 3px;
    color: #7a858b;
    font-size: 8px;
    font-weight: 800;
}

.approval-meta-grid strong {
    overflow-wrap: anywhere;
    color: #334149;
    font-size: 10px;
}

.approval-designer-note {
    margin-top: 14px;
    padding: 10px 12px;
    border-left: 3px solid #bfb800;
    border-radius: 0 8px 8px 0;
    background: #f7f8ed;
}

.approval-designer-note strong {
    color: #003b4a;
    font-size: 9px;
}

.approval-designer-note p {
    margin: 4px 0 0;
    color: #59656c;
    font-size: 10px;
    line-height: 1.5;
}

.approval-decision-form {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e8ecee;
}

.approval-decision-form textarea {
    width: 100%;
    min-height: 70px;
    box-sizing: border-box;
    resize: vertical;
}

.approval-decision-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

.approval-waiting-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 11px 12px;
    border-radius: 9px;
    background: #f1f4f5;
}

.approval-waiting-note > span {
    color: #003b4a;
    font-size: 20px;
}

.approval-waiting-note strong,
.approval-waiting-note small {
    display: block;
}

.approval-waiting-note strong {
    color: #003b4a;
    font-size: 10px;
}

.approval-waiting-note small {
    margin-top: 2px;
    color: #738087;
    font-size: 9px;
    line-height: 1.4;
}

.approvals-empty {
    padding: 45px 25px;
    text-align: center;
}

.approvals-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(191, 184, 0, .16);
    color: #625f00;
    font-size: 24px;
    font-weight: 900;
}

.approvals-empty h2 {
    margin-bottom: 5px;
}

.approvals-empty p {
    max-width: 430px;
    margin: 0 auto 17px;
    color: #758087;
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 1150px) {

    .approvals-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .approvals-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .approvals-search {
        grid-column: span 2;
    }
}

@media (max-width: 850px) {

    .approval-card-main {
        grid-template-columns: 1fr;
    }

    .approval-preview {
        min-height: 180px;
        border-right: 0;
        border-bottom: 1px solid #e8ecee;
    }

    .approval-preview img {
        min-height: 180px;
        max-height: 280px;
    }

    .approval-file-preview {
        min-height: 180px;
    }

    .approval-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .approvals-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .approvals-summary-grid,
    .approvals-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .approvals-search {
        grid-column: 1 / -1;
    }

    .approval-card-topline {
        flex-direction: column;
    }

    .approval-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {

    .approvals-summary-grid,
    .approvals-filter-form,
    .approval-meta-grid {
        grid-template-columns: 1fr;
    }

    .approvals-search {
        grid-column: auto;
    }

    .approval-decision-actions {
        flex-direction: column;
    }

    .approval-decision-actions .button {
        width: 100%;
    }
}
/* =========================================================
   MOS DESIGNHUB - STAGE N KENNISGEWINGS
   ========================================================= */

.notifications-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.notifications-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.notifications-header-actions form {
    margin: 0;
}

.notifications-secondary-button {
    border: 1px solid #dce2e4;
    background: #ffffff;
    color: #003b4a;
}

.notifications-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 20px;
}

.notifications-summary-card {
    padding: 16px;
    border: 1px solid #e2e7e9;
    border-radius: 13px;
    background: #ffffff;
}

.notifications-summary-card span,
.notifications-summary-card small {
    display: block;
}

.notifications-summary-card span {
    margin-bottom: 7px;
    color: #69757c;
    font-size: 10px;
    font-weight: 800;
}

.notifications-summary-card strong {
    display: block;
    margin-bottom: 6px;
    color: #003b4a;
    font-size: 26px;
    line-height: 1;
}

.notifications-summary-card small {
    color: #7b858b;
    font-size: 9px;
}

.notifications-summary-warning {
    border-top: 3px solid #d98b19;
}

.notifications-filter-card {
    margin-bottom: 18px;
}

.notifications-filter-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
}

.notifications-filter-form label {
    min-width: 180px;
}

.notifications-filter-form select {
    width: 100%;
    box-sizing: border-box;
}

.notifications-filter-submit {
    display: flex;
    align-items: end;
}

.notifications-clear-link {
    align-self: center;
    color: #003b4a;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-left: 4px solid #dfe4e6;
}

.notification-unread {
    box-shadow: 0 4px 14px rgba(0, 59, 74, .07);
    background: #fcfdf8;
}

.notification-info {
    border-left-color: #003b4a;
}

.notification-success {
    border-left-color: #bfb800;
}

.notification-warning {
    border-left-color: #d98b19;
}

.notification-danger {
    border-left-color: #c0392b;
}

.notification-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eef2f3;
    color: #003b4a;
    font-size: 15px;
    font-weight: 900;
}

.notification-success .notification-icon {
    background: rgba(191, 184, 0, .15);
    color: #646000;
}

.notification-warning .notification-icon {
    background: rgba(217, 139, 25, .12);
    color: #915a0c;
}

.notification-danger .notification-icon {
    background: rgba(192, 57, 43, .10);
    color: #9e3025;
}

.notification-content {
    min-width: 0;
}

.notification-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.notification-title-row > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.notification-title-row h2 {
    margin: 0;
    color: #1a2b32;
    font-size: 13px;
}

.notification-title-row time {
    flex: 0 0 auto;
    color: #7b858b;
    font-size: 9px;
}

.notification-new-badge {
    padding: 3px 7px;
    border-radius: 20px;
    background: #bfb800;
    color: #252500;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.notification-content > p {
    margin: 6px 0 11px;
    color: #5f6b72;
    font-size: 10px;
    line-height: 1.5;
}

.notification-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.notification-actions form {
    margin: 0;
}

.notification-text-button {
    padding: 0;
    border: 0;
    background: none;
    color: #657178;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
}

.notification-text-button:hover {
    color: #003b4a;
}

.notifications-empty {
    padding: 48px 24px;
    text-align: center;
}

.notifications-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(191, 184, 0, .16);
    color: #625f00;
    font-size: 24px;
    font-weight: 900;
}

.notifications-empty h2 {
    margin-bottom: 5px;
}

.notifications-empty p {
    max-width: 420px;
    margin: 0 auto 17px;
    color: #758087;
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 850px) {

    .notifications-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .notifications-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .notifications-header-actions {
        width: 100%;
    }

    .notification-title-row {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 480px) {

    .notifications-summary-grid {
        grid-template-columns: 1fr;
    }

    .notification-item {
        grid-template-columns: 1fr;
    }

    .notification-icon {
        width: 36px;
        height: 36px;
    }

    .notifications-filter-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .notifications-filter-form label {
        min-width: 0;
    }
}
/* =========================================================
   MOS DESIGNHUB - STAGE O KOMMUNIKASIE
   ========================================================= */

.communication-heading,
.activity-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.communication-heading h2,
.activity-heading h2 {
    margin: 0 0 4px;
}

.communication-heading p,
.activity-heading p {
    margin: 0;
    color: #758087;
    font-size: 10px;
    line-height: 1.5;
}

.communication-count-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.communication-count-grid > div {
    padding: 12px;
    border: 1px solid #e6eaec;
    border-radius: 10px;
    background: #fafbfb;
}

.communication-count-grid span,
.communication-count-grid strong {
    display: block;
}

.communication-count-grid span {
    margin-bottom: 5px;
    color: #778188;
    font-size: 8px;
    font-weight: 800;
}

.communication-count-grid strong {
    color: #003b4a;
    font-size: 20px;
    line-height: 1;
}

.communication-visibility-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px 8px;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 900;
}

.communication-visibility-badge.public {
    background: rgba(191, 184, 0, .16);
    color: #625f00;
}

.communication-visibility-badge.internal {
    background: rgba(0, 59, 74, .09);
    color: #003b4a;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 16px 0;
}

.conversation-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 92%;
}

.conversation-message.from-team {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.conversation-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef1f2;
    color: #003b4a;
    font-size: 9px;
    font-weight: 900;
}

.from-team .conversation-avatar {
    background: #003b4a;
    color: #ffffff;
}

.conversation-bubble {
    min-width: 180px;
    padding: 11px 12px;
    border: 1px solid #e5e9eb;
    border-radius: 4px 13px 13px 13px;
    background: #ffffff;
}

.from-team .conversation-bubble {
    border-radius: 13px 4px 13px 13px;
    background: #f6f7ec;
}

.conversation-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.conversation-meta > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.conversation-meta strong {
    color: #26363d;
    font-size: 9px;
}

.conversation-meta span {
    padding: 2px 6px;
    border-radius: 20px;
    background: #eef1f2;
    color: #6b767d;
    font-size: 7px;
    font-weight: 800;
}

.conversation-meta small {
    color: #899197;
    font-size: 8px;
    white-space: nowrap;
}

.conversation-bubble p {
    margin: 7px 0 0;
    color: #4f5d64;
    font-size: 10px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.communication-compose,
.internal-note-compose {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e8ecee;
}

.communication-compose textarea,
.internal-note-compose textarea {
    width: 100%;
    min-height: 85px;
    box-sizing: border-box;
    resize: vertical;
}

.communication-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
}

.communication-compose-footer > span {
    color: #7a858b;
    font-size: 8px;
    line-height: 1.4;
}

.internal-notes-panel {
    border-top: 3px solid #003b4a;
}

.internal-note-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 15px;
}

.internal-note {
    padding: 11px 12px;
    border-left: 3px solid #003b4a;
    border-radius: 0 9px 9px 0;
    background: #f4f7f8;
}

.internal-note-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.internal-note-head > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.internal-note-head strong {
    color: #003b4a;
    font-size: 9px;
}

.internal-note-head span {
    padding: 2px 6px;
    border-radius: 20px;
    background: #003b4a;
    color: #ffffff;
    font-size: 7px;
    font-weight: 800;
}

.internal-note-head small {
    color: #849097;
    font-size: 8px;
}

.internal-note p {
    margin: 7px 0 0;
    color: #55636a;
    font-size: 10px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.communication-empty {
    padding: 24px 16px;
    border: 1px dashed #dce2e4;
    border-radius: 10px;
    color: #738087;
    text-align: center;
}

.communication-empty.compact {
    padding: 16px;
}

.communication-empty-icon {
    margin-bottom: 7px;
    font-size: 22px;
}

.communication-empty strong,
.communication-empty span {
    display: block;
}

.communication-empty strong {
    margin-bottom: 3px;
    color: #34434a;
    font-size: 10px;
}

.communication-empty span {
    font-size: 9px;
    line-height: 1.5;
}

.activity-panel .history {
    position: relative;
    margin-left: 7px;
    padding: 0 0 15px 17px;
    border-left: 2px solid #e4e9eb;
}

.activity-panel .history:last-child {
    padding-bottom: 0;
}

.activity-panel .history::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bfb800;
    box-shadow: 0 0 0 3px #ffffff;
}

.activity-panel .history b {
    color: #26363d;
    font-size: 9px;
}

.activity-panel .history small {
    display: block;
    margin-top: 2px;
    color: #899197;
    font-size: 8px;
}

.activity-panel .history p {
    margin: 5px 0 0;
    color: #66737a;
    font-size: 9px;
    line-height: 1.45;
}

@media (max-width: 800px) {

    .communication-count-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .conversation-message {
        max-width: 100%;
    }
}

@media (max-width: 520px) {

    .communication-heading,
    .activity-heading,
    .communication-compose-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .communication-count-grid {
        grid-template-columns: 1fr;
    }

    .conversation-message,
    .conversation-message.from-team {
        flex-direction: column;
        align-self: stretch;
    }

    .conversation-bubble,
    .from-team .conversation-bubble {
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
    }

    .conversation-meta {
        flex-direction: column;
        gap: 4px;
    }

    .communication-compose-footer .button {
        width: 100%;
    }
}
/* =========================================================
   MOS DESIGNHUB - STAGE P VERWYSINGSLÊERS
   ========================================================= */

.reference-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.reference-heading h2 {
    margin: 0 0 4px;
}

.reference-heading p {
    margin: 0;
    color: #758087;
    font-size: 10px;
    line-height: 1.5;
}

.reference-optional-badge,
.reference-count-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px 8px;
    background: rgba(191, 184, 0, .16);
    color: #625f00;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 900;
}

.reference-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.reference-help-grid > div {
    padding: 11px 12px;
    border: 1px solid #e6eaec;
    border-radius: 9px;
    background: #fafbfb;
}

.reference-help-grid strong,
.reference-help-grid span {
    display: block;
}

.reference-help-grid strong {
    margin-bottom: 3px;
    color: #003b4a;
    font-size: 9px;
}

.reference-help-grid span {
    color: #778188;
    font-size: 8px;
    line-height: 1.4;
}

.reference-file-drop {
    position: relative;
    display: flex;
    min-height: 135px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px;
    border: 2px dashed #d9dfe1;
    border-radius: 12px;
    background: #fafbfb;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.reference-file-drop:hover {
    border-color: #bfb800;
    background: #fbfbf2;
}

.reference-file-drop input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.reference-upload-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #003b4a;
    color: #ffffff;
    font-size: 20px;
}

.reference-file-drop strong {
    color: #26363d;
    font-size: 10px;
}

.reference-file-drop small {
    color: #7b858b;
    font-size: 8px;
}

.selected-reference-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 14px;
}

.selected-reference-files > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e4e9eb;
    border-radius: 8px;
    background: #ffffff;
}

.selected-reference-files strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #34434a;
    font-size: 9px;
}

.selected-reference-files span {
    color: #7d888e;
    font-size: 8px;
    white-space: nowrap;
}

.template-picker-panel {
    border-top: 3px solid #bfb800;
}

.template-instructions {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #bfb800;
    border-radius: 0 8px 8px 0;
    background: #f7f8ed;
    color: #5c686f;
    font-size: 9px;
    line-height: 1.5;
}

.stage-p-readonly-select {
    pointer-events: none;
    background: #f5f6f6;
}

.request-reference-panel {
    border-top: 3px solid #bfb800;
}

.request-reference-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 15px;
}

.request-reference-file {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 11px;
    border: 1px solid #e5eaec;
    border-radius: 10px;
    background: #fafbfb;
}

.reference-file-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef2f3;
    color: #003b4a;
    font-size: 9px;
    font-weight: 900;
}

.reference-type-beeld {
    background: rgba(191, 184, 0, .16);
    color: #625f00;
}

.reference-type-pdf {
    background: rgba(192, 57, 43, .08);
    color: #943227;
}

.reference-type-bron {
    background: rgba(0, 59, 74, .10);
    color: #003b4a;
}

.reference-file-info {
    min-width: 0;
}

.reference-file-info strong,
.reference-file-info span,
.reference-file-info small {
    display: block;
}

.reference-file-info strong {
    overflow-wrap: anywhere;
    color: #293940;
    font-size: 10px;
}

.reference-file-info span {
    margin-top: 3px;
    color: #69757c;
    font-size: 8px;
    font-weight: 700;
}

.reference-file-info small {
    margin-top: 2px;
    color: #8a9398;
    font-size: 8px;
}

.reference-file-info p {
    margin: 6px 0 0;
    color: #5b686f;
    font-size: 9px;
    line-height: 1.45;
}

.reference-download-link {
    padding: 7px 9px;
    border: 1px solid #dce2e4;
    border-radius: 8px;
    background: #ffffff;
    color: #003b4a;
    font-size: 8px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.reference-add-more {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e7ebed;
}

.reference-add-more summary {
    color: #003b4a;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
}

.reference-detail-upload-form {
    margin-top: 13px;
    padding: 13px;
    border-radius: 10px;
    background: #f7f9f9;
}

.reference-detail-upload-form input[type="file"] {
    width: 100%;
    box-sizing: border-box;
}

.reference-upload-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.reference-upload-footer small {
    color: #7b858b;
    font-size: 8px;
    line-height: 1.4;
}

.communication-count-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px) {

    .reference-help-grid,
    .communication-count-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .reference-heading,
    .reference-upload-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .reference-help-grid,
    .communication-count-grid {
        grid-template-columns: 1fr;
    }

    .request-reference-file {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .reference-download-link {
        grid-column: 1 / -1;
        text-align: center;
    }

    .reference-upload-footer .button {
        width: 100%;
    }
}
/* =========================================================
   MOS DESIGNHUB - STAGE R SECURITY / BACKUPS
   ========================================================= */

.security-error-wrap {
    max-width: 620px;
    margin: 70px auto;
}

.security-error-card {
    padding: 38px;
    text-align: center;
}

.security-error-code {
    margin-bottom: 8px;
    color: #bfb800;
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
}

.security-error-card h1 {
    margin: 0 0 8px;
    color: #003b4a;
}

.security-error-card p {
    max-width: 470px;
    margin: 0 auto;
    color: #6d787f;
    font-size: 11px;
    line-height: 1.6;
}

.security-error-actions {
    margin-top: 20px;
}

.backup-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.backup-page-header form {
    margin: 0;
}

.backup-info-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.backup-info-card > div {
    padding: 12px;
    border: 1px solid #e5e9eb;
    border-radius: 10px;
    background: #fafbfb;
}

.backup-info-card strong,
.backup-info-card span {
    display: block;
}

.backup-info-card strong {
    margin-bottom: 4px;
    color: #003b4a;
    font-size: 9px;
}

.backup-info-card span {
    color: #737f85;
    font-size: 8px;
    line-height: 1.5;
}

.backup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.backup-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid #e5e9eb;
    border-radius: 10px;
    background: #fafbfb;
}

.backup-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(0, 59, 74, .09);
    color: #003b4a;
    font-size: 9px;
    font-weight: 900;
}

.backup-details strong,
.backup-details span {
    display: block;
}

.backup-details strong {
    overflow-wrap: anywhere;
    color: #2b3b42;
    font-size: 9px;
}

.backup-details span {
    margin-top: 3px;
    color: #7e888e;
    font-size: 8px;
}

.security-empty {
    padding: 30px;
    color: #7a858b;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 760px) {

    .backup-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .backup-info-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .backup-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .backup-row .button {
        grid-column: 1 / -1;
        width: 100%;
    }
}
/* =========================================================
   MOS DESIGNHUB - STAGE S TOPICS
   ========================================================= */

.topic-create-card {
    margin-bottom: 20px;
    border-top: 3px solid #bfb800;
}

.topic-section-heading,
.topic-builder-heading,
.topic-card-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.topic-section-heading h2,
.topic-builder-heading h3 {
    margin: 0 0 4px;
}

.topic-section-heading p,
.topic-builder-heading p,
.topic-card-summary p {
    margin: 0;
    color: #758087;
    font-size: 10px;
    line-height: 1.5;
}

.topic-dynamic-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 20px;
    background: rgba(191, 184, 0, .16);
    color: #625f00;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}

.topic-admin-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.topic-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.topic-capability {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px;
    border: 1px solid #e4e9eb;
    border-radius: 10px;
    background: #fafbfb;
}

.topic-capability strong,
.topic-capability small {
    display: block;
}

.topic-capability strong {
    color: #003b4a;
    font-size: 9px;
}

.topic-capability small {
    margin-top: 3px;
    color: #778188;
    font-size: 8px;
    line-height: 1.4;
}

.custom-field-builder {
    padding: 13px;
    border: 1px solid #e3e8ea;
    border-radius: 11px;
    background: #f7f9f9;
}

.custom-field-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.custom-field-row {
    display: grid;
    grid-template-columns:
        minmax(150px, 1.2fr)
        110px
        minmax(170px, 1fr)
        110px
        32px;
    gap: 7px;
    align-items: center;
}

.custom-field-row input,
.custom-field-row select {
    width: 100%;
    box-sizing: border-box;
}

.topic-required-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5c686f;
    font-size: 8px;
}

.topic-remove-field {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: rgba(192, 57, 43, .08);
    color: #9e3025;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
}

.topic-existing-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.topic-admin-card {
    padding: 17px;
}

.topic-inactive {
    opacity: .65;
}

.topic-title-row,
.topic-feature-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.topic-title-row h2 {
    margin: 0;
}

.topic-status-badge,
.topic-feature-tags span {
    padding: 4px 7px;
    border-radius: 20px;
    font-size: 7px;
    font-weight: 900;
}

.topic-status-badge.active {
    background: rgba(191, 184, 0, .16);
    color: #625f00;
}

.topic-status-badge.inactive,
.topic-feature-tags span {
    background: #eef2f3;
    color: #5d696f;
}

.topic-feature-tags {
    margin-top: 8px;
}

.topic-edit-details {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #e7ebed;
}

.topic-edit-details > summary {
    color: #003b4a;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
}

.topic-edit-details > form {
    margin-top: 14px;
}

.topic-inline-help {
    display: block;
    min-height: 13px;
    margin-top: 4px;
    color: #7a858b;
    font-size: 8px;
}

.topic-details-panel,
.topic-request-detail-panel {
    border-top: 3px solid #003b4a;
}

.topic-fields-group {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid #e7ebed;
}

.topic-fields-group h3 {
    margin: 0 0 10px;
    color: #003b4a;
}

.custom-topic-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.custom-topic-fields:empty {
    display: none;
}

.topic-no-extra-fields {
    margin-top: 15px;
    padding: 14px;
    border: 1px dashed #dce2e4;
    border-radius: 9px;
    color: #7a858b;
    font-size: 9px;
    text-align: center;
}

.topic-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.topic-detail-item {
    padding: 10px;
    border: 1px solid #e5e9eb;
    border-radius: 9px;
    background: #fafbfb;
}

.topic-detail-item span,
.topic-detail-item strong {
    display: block;
}

.topic-detail-item span {
    margin-bottom: 4px;
    color: #7a858b;
    font-size: 8px;
    font-weight: 800;
}

.topic-detail-item strong {
    color: #2e3d44;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.topic-empty {
    padding: 30px;
    color: #7a858b;
    text-align: center;
}

@media (max-width: 1000px) {

    .topic-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topic-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {

    .custom-field-row {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        border: 1px solid #e1e6e8;
        border-radius: 9px;
        background: #ffffff;
    }

    .custom-topic-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    .topic-section-heading,
    .topic-builder-heading,
    .topic-card-summary {
        flex-direction: column;
    }

    .topic-capability-grid,
    .topic-detail-grid,
    .custom-field-row {
        grid-template-columns: 1fr;
    }

    .topic-remove-field {
        width: 100%;
    }
}
/* =========================================================
   MOS DESIGNHUB - STAGE T SLA & MTTR
   ========================================================= */

.sla-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.sla-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.sla-summary-card {
    padding: 15px;
    border: 1px solid #e3e8ea;
    border-radius: 12px;
    background: #ffffff;
}

.sla-summary-card span,
.sla-summary-card small,
.sla-summary-card strong {
    display: block;
}

.sla-summary-card span {
    margin-bottom: 6px;
    color: #6e7a81;
    font-size: 9px;
    font-weight: 800;
}

.sla-summary-card strong {
    margin-bottom: 5px;
    color: #003b4a;
    font-size: 23px;
    line-height: 1.05;
}

.sla-summary-card small {
    color: #7f898f;
    font-size: 8px;
    line-height: 1.4;
}

.sla-summary-danger {
    border-top: 3px solid #c0392b;
}

.sla-summary-warning {
    border-top: 3px solid #d98b19;
}

.sla-filter-card {
    margin-bottom: 18px;
}

.sla-filter-form {
    display: grid;
    grid-template-columns:
        minmax(210px, 1.5fr)
        repeat(5, minmax(130px, 1fr));
    gap: 10px;
    align-items: end;
}

.sla-filter-form input,
.sla-filter-form select {
    width: 100%;
    box-sizing: border-box;
}

.sla-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sla-clear-link,
.sla-open-link {
    color: #003b4a;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.sla-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.sla-mini-table {
    margin-top: 13px;
}

.sla-mini-head,
.sla-mini-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.5fr) 70px 80px 100px;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}

.sla-mini-head {
    border-bottom: 1px solid #dfe5e7;
    color: #78838a;
    font-size: 8px;
    font-weight: 900;
}

.sla-mini-row {
    border-bottom: 1px solid #eef1f2;
    color: #5d696f;
    font-size: 9px;
}

.sla-mini-row strong {
    color: #2d3c43;
}

.sla-empty-mini,
.sla-empty-table {
    padding: 22px;
    color: #7c878d;
    font-size: 9px;
    text-align: center;
}

.sla-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.sla-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.sla-table th {
    padding: 9px 8px;
    border-bottom: 1px solid #dde3e5;
    color: #6f7b81;
    font-size: 8px;
    text-align: left;
}

.sla-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #edf0f1;
    color: #4e5d64;
    font-size: 9px;
    vertical-align: middle;
}

.sla-table td:first-child strong,
.sla-table td:first-child small {
    display: block;
}

.sla-table td:first-child strong {
    color: #003b4a;
}

.sla-table td:first-child small {
    margin-top: 2px;
    color: #7b858b;
}

.sla-state-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 20px;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 900;
}

.sla-badge-track {
    background: rgba(191, 184, 0, .16);
    color: #625f00;
}

.sla-badge-risk {
    background: rgba(217, 139, 25, .12);
    color: #915a0c;
}

.sla-badge-breached {
    background: rgba(192, 57, 43, .10);
    color: #9e3025;
}

.sla-badge-met {
    background: rgba(0, 59, 74, .09);
    color: #003b4a;
}

.sla-badge-none {
    background: #eef1f2;
    color: #6d787f;
}

.request-sla-panel {
    border-top: 3px solid #bfb800;
}

.request-sla-panel.sla-state-breached {
    border-top-color: #c0392b;
}

.request-sla-panel.sla-state-risk {
    border-top-color: #d98b19;
}

.request-sla-panel.sla-state-met {
    border-top-color: #003b4a;
}

.sla-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 13px;
    margin-bottom: 14px;
}

.sla-detail-heading h2 {
    margin: 0 0 4px;
}

.sla-detail-heading p {
    margin: 0;
    color: #78838a;
    font-size: 9px;
    line-height: 1.4;
}

.sla-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.sla-detail-grid > div {
    padding: 10px;
    border: 1px solid #e5eaec;
    border-radius: 9px;
    background: #fafbfb;
}

.sla-detail-grid span,
.sla-detail-grid strong {
    display: block;
}

.sla-detail-grid span {
    margin-bottom: 4px;
    color: #7a858b;
    font-size: 8px;
    font-weight: 800;
}

.sla-detail-grid strong {
    color: #2e3d44;
    font-size: 10px;
}

.sla-progress-track {
    height: 7px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 20px;
    background: #edf0f1;
}

.sla-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #bfb800;
}

.sla-state-breached .sla-progress-track > span {
    background: #c0392b;
}

.sla-state-risk .sla-progress-track > span {
    background: #d98b19;
}

.sla-state-met .sla-progress-track > span {
    background: #003b4a;
}

.sla-remaining-copy {
    display: block;
    margin-top: 5px;
    color: #78838a;
    font-size: 8px;
}

@media (max-width: 1100px) {

    .sla-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sla-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sla-search-field {
        grid-column: span 2;
    }
}

@media (max-width: 800px) {

    .sla-analysis-grid {
        grid-template-columns: 1fr;
    }

    .sla-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .sla-page-header,
    .sla-detail-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .sla-summary-grid,
    .sla-filter-form,
    .sla-detail-grid {
        grid-template-columns: 1fr;
    }

    .sla-search-field {
        grid-column: auto;
    }

    .sla-mini-head,
    .sla-mini-row {
        grid-template-columns: 1.4fr .7fr .8fr;
    }

    .sla-mini-head span:last-child,
    .sla-mini-row span:last-child {
        display: none;
    }
}
/* =========================================================
   MOS DESIGNHUB - STAGE U KOSTE-ALLOKASIE
   ========================================================= */

.costs-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cost-dashboard-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.cost-dashboard-card {
    padding: 15px;
    border: 1px solid #e3e8ea;
    border-radius: 12px;
    background: #ffffff;
}

.cost-dashboard-card span,
.cost-dashboard-card strong,
.cost-dashboard-card small {
    display: block;
}

.cost-dashboard-card span {
    margin-bottom: 6px;
    color: #6e7a81;
    font-size: 9px;
    font-weight: 800;
}

.cost-dashboard-card strong {
    margin-bottom: 5px;
    color: #003b4a;
    font-size: 22px;
    line-height: 1.05;
}

.cost-dashboard-card small {
    color: #7f898f;
    font-size: 8px;
}

.cost-dashboard-danger {
    border-top: 3px solid #c0392b;
}

.cost-filter-card {
    margin-bottom: 18px;
}

.cost-filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
}

.cost-search {
    grid-column: span 2;
}

.cost-filter-form input,
.cost-filter-form select {
    width: 100%;
    box-sizing: border-box;
}

.cost-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cost-clear-link,
.cost-open-link {
    color: #003b4a;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.cost-category-card {
    margin-bottom: 18px;
}

.cost-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.cost-category-summary {
    padding: 12px;
    border: 1px solid #e5e9eb;
    border-radius: 10px;
    background: #fafbfb;
}

.cost-category-summary > strong,
.cost-category-summary > span {
    display: block;
}

.cost-category-summary > strong {
    color: #003b4a;
    font-size: 9px;
}

.cost-category-summary > span {
    margin: 3px 0 10px;
    color: #7c878d;
    font-size: 8px;
}

.cost-category-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 5px;
}

.cost-category-summary small {
    color: #7a858b;
    font-size: 8px;
}

.cost-category-summary b {
    color: #35454c;
    font-size: 9px;
}

.cost-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.cost-table {
    width: 100%;
    min-width: 950px;
    border-collapse: collapse;
}

.cost-table th {
    padding: 9px 8px;
    border-bottom: 1px solid #dde3e5;
    color: #6f7b81;
    font-size: 8px;
    text-align: left;
}

.cost-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #edf0f1;
    color: #4e5d64;
    font-size: 9px;
}

.cost-table td:first-child strong,
.cost-table td:first-child small {
    display: block;
}

.cost-table td:first-child strong {
    color: #003b4a;
}

.cost-table td:first-child small {
    margin-top: 2px;
    color: #7b858b;
}

.request-cost-panel {
    border-top: 3px solid #bfb800;
}

.request-cost-over-budget {
    border-top-color: #c0392b;
}

.cost-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 13px;
    margin-bottom: 14px;
}

.cost-detail-heading h2 {
    margin: 0 0 4px;
}

.cost-detail-heading p {
    margin: 0;
    color: #78838a;
    font-size: 9px;
}

.cost-state-badge,
.cost-category-badge,
.cost-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 4px 7px;
    background: rgba(191, 184, 0, .16);
    color: #625f00;
    font-size: 7px;
    font-weight: 900;
}

.cost-state-badge.over {
    background: rgba(192, 57, 43, .10);
    color: #9e3025;
}

.cost-state-badge.neutral,
.cost-status-badge {
    background: #eef2f3;
    color: #5d696f;
}

.cost-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.cost-summary-grid > div {
    padding: 10px;
    border: 1px solid #e5eaec;
    border-radius: 9px;
    background: #fafbfb;
}

.cost-summary-grid span,
.cost-summary-grid strong {
    display: block;
}

.cost-summary-grid span {
    margin-bottom: 4px;
    color: #7a858b;
    font-size: 8px;
    font-weight: 800;
}

.cost-summary-grid strong {
    color: #2e3d44;
    font-size: 11px;
}

.cost-item-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
}

.cost-item {
    padding: 11px;
    border: 1px solid #e5eaec;
    border-radius: 10px;
    background: #fafbfb;
}

.cost-item-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cost-item-title-row > strong {
    color: #27383f;
    font-size: 10px;
}

.cost-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    color: #748087;
    font-size: 8px;
}

.cost-item p {
    margin: 7px 0 0;
    color: #59666d;
    font-size: 9px;
}

.cost-item-values {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.cost-item-values span,
.cost-item-values strong {
    display: block;
}

.cost-item-values span {
    color: #7d878d;
    font-size: 7px;
}

.cost-item-values strong {
    margin-top: 2px;
    color: #003b4a;
    font-size: 10px;
}

.cost-edit-details,
.cost-add-details {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e9eb;
}

.cost-edit-details > summary,
.cost-add-details > summary {
    color: #003b4a;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
}

.cost-edit-form,
.cost-add-form {
    margin-top: 12px;
}

.cost-delete-form {
    margin-top: 8px;
}

.cost-delete-button {
    border: 0;
    background: none;
    color: #9e3025;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.cost-empty,
.cost-empty-table {
    padding: 22px;
    color: #7c878d;
    font-size: 9px;
    text-align: center;
}

@media (max-width: 1050px) {

    .cost-dashboard-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cost-category-grid,
    .cost-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cost-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .costs-page-header,
    .cost-detail-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .cost-dashboard-summary,
    .cost-category-grid,
    .cost-filter-form,
    .cost-summary-grid {
        grid-template-columns: 1fr;
    }

    .cost-search {
        grid-column: auto;
    }
}
/* =========================================================
   MOS DESIGNHUB - STAGE U1 NEW REQUEST COSTS
   ========================================================= */

.new-request-cost-panel {
    border-top: 3px solid #bfb800;
}

.initial-cost-toggle {
    margin-top: 12px;
}

.initial-cost-fields {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #e4e9eb;
    border-radius: 11px;
    background: #fafbfb;
}

.initial-cost-fields[hidden] {
    display: none !important;
}

.new-request-cost-note {
    margin-top: 10px;
    padding: 9px 11px;
    border-left: 3px solid #003b4a;
    border-radius: 0 8px 8px 0;
    background: rgba(0, 59, 74, .05);
    color: #68747a;
    font-size: 8px;
    line-height: 1.5;
}
/* =========================================================
   MOS DESIGNHUB - STAGE V ONBOARDING
   ========================================================= */

.onboarding-page-header {
    margin-bottom: 18px;
}

.onboarding-credential-card {
    margin-bottom: 18px;
    border-top: 3px solid #bfb800;
}

.onboarding-ready-badge {
    display: inline-flex;
    margin-bottom: 7px;
    padding: 4px 8px;
    border-radius: 20px;
    background: rgba(191, 184, 0, .16);
    color: #625f00;
    font-size: 8px;
    font-weight: 900;
}

.onboarding-credential-heading h2 {
    margin: 0 0 4px;
    color: #003b4a;
}

.onboarding-credential-heading p {
    margin: 0;
    color: #717d83;
    font-size: 9px;
    line-height: 1.5;
}

.onboarding-credential-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.onboarding-credential-grid > div {
    padding: 12px;
    border: 1px solid #e2e7e9;
    border-radius: 10px;
    background: #fafbfb;
}

.onboarding-credential-grid span,
.onboarding-credential-grid strong {
    display: block;
}

.onboarding-credential-grid span {
    margin-bottom: 5px;
    color: #778188;
    font-size: 8px;
    font-weight: 800;
}

.onboarding-credential-grid strong {
    color: #283940;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.onboarding-credential-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.onboarding-credential-actions > span {
    color: #625f00;
    font-size: 8px;
    font-weight: 800;
}

.onboarding-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.onboarding-summary-card {
    padding: 14px;
    border: 1px solid #e3e8ea;
    border-radius: 11px;
    background: #ffffff;
}

.onboarding-summary-card span,
.onboarding-summary-card strong,
.onboarding-summary-card small {
    display: block;
}

.onboarding-summary-card span {
    color: #6f7b81;
    font-size: 8px;
    font-weight: 800;
}

.onboarding-summary-card strong {
    margin: 5px 0;
    color: #003b4a;
    font-size: 22px;
}

.onboarding-summary-card small {
    color: #818b90;
    font-size: 8px;
}

.onboarding-summary-warning {
    border-top: 3px solid #bfb800;
}

.onboarding-create-card {
    margin-bottom: 18px;
    border-top: 3px solid #003b4a;
}

.onboarding-create-form,
.onboarding-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.onboarding-create-note {
    padding: 10px 12px;
    border-left: 3px solid #bfb800;
    border-radius: 0 8px 8px 0;
    background: #fafaf1;
    color: #68747a;
    font-size: 8px;
    line-height: 1.5;
}

.onboarding-user-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
}

.onboarding-user-card {
    padding: 12px;
    border: 1px solid #e4e9eb;
    border-radius: 10px;
    background: #fafbfb;
}

.onboarding-user-pending {
    border-left: 3px solid #bfb800;
}

.onboarding-user-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.onboarding-user-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.onboarding-user-initials {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #003b4a;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
}

.onboarding-user-title strong,
.onboarding-user-title span {
    display: block;
}

.onboarding-user-title strong {
    color: #2d3c43;
    font-size: 10px;
}

.onboarding-user-title span {
    margin-top: 2px;
    color: #7d878d;
    font-size: 8px;
}

.onboarding-user-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.onboarding-role-badge,
.onboarding-status-badge {
    padding: 4px 7px;
    border-radius: 20px;
    background: #eef2f3;
    color: #5d696f;
    font-size: 7px;
    font-weight: 900;
}

.onboarding-status-badge.pending {
    background: rgba(191, 184, 0, .16);
    color: #625f00;
}

.onboarding-status-badge.completed {
    background: rgba(0, 59, 74, .09);
    color: #003b4a;
}

.onboarding-status-badge.inactive {
    background: rgba(192, 57, 43, .08);
    color: #9e3025;
}

.onboarding-user-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.onboarding-user-details > div {
    padding: 8px;
    border-radius: 8px;
    background: #ffffff;
}

.onboarding-user-details span,
.onboarding-user-details strong {
    display: block;
}

.onboarding-user-details span {
    margin-bottom: 3px;
    color: #818b90;
    font-size: 7px;
    font-weight: 800;
}

.onboarding-user-details strong {
    color: #425158;
    font-size: 8px;
}

.onboarding-user-edit {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #e4e9eb;
}

.onboarding-user-edit > summary {
    color: #003b4a;
    cursor: pointer;
    font-size: 8px;
    font-weight: 900;
}

.onboarding-user-edit > form {
    margin-top: 12px;
}

.onboarding-reset-form {
    margin-top: 8px;
}

.onboarding-empty {
    padding: 28px;
    color: #7c878d;
    font-size: 9px;
    text-align: center;
}

.first-login-wrap {
    max-width: 700px;
    margin: 38px auto;
}

.first-login-card {
    padding: 28px;
    border-top: 4px solid #bfb800;
}

.first-login-logo-mark {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #003b4a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.first-login-heading > span {
    color: #625f00;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.first-login-heading h1 {
    margin: 4px 0 7px;
    color: #003b4a;
}

.first-login-heading p {
    margin: 0;
    color: #707c82;
    font-size: 10px;
    line-height: 1.55;
}

.first-login-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0;
}

.first-login-profile-grid > div {
    padding: 10px;
    border: 1px solid #e4e9eb;
    border-radius: 9px;
    background: #fafbfb;
}

.first-login-profile-grid span,
.first-login-profile-grid strong {
    display: block;
}

.first-login-profile-grid span {
    margin-bottom: 3px;
    color: #7e898e;
    font-size: 7px;
    font-weight: 800;
}

.first-login-profile-grid strong {
    color: #36464d;
    font-size: 9px;
}

.first-login-access {
    padding: 12px;
    border-left: 3px solid #003b4a;
    border-radius: 0 8px 8px 0;
    background: rgba(0, 59, 74, .05);
}

.first-login-access strong {
    color: #003b4a;
    font-size: 9px;
}

.first-login-access p {
    margin: 4px 0 0;
    color: #66737a;
    font-size: 9px;
    line-height: 1.5;
}

.first-login-password-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.first-login-password-form small {
    display: block;
    margin-top: 3px;
    color: #7d878d;
    font-size: 8px;
}

.first-login-security-note {
    margin-top: 13px;
    color: #7c878d;
    font-size: 8px;
    text-align: center;
}

@media (max-width: 800px) {

    .onboarding-summary-grid,
    .onboarding-user-details,
    .first-login-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .onboarding-credential-grid,
    .onboarding-summary-grid,
    .onboarding-user-details,
    .first-login-profile-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-user-main,
    .onboarding-credential-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .onboarding-user-badges {
        justify-content: flex-start;
    }
}
/* =========================================================
   MOS DESIGNHUB - ADMIN PERMANENT DELETE
   ========================================================= */

.admin-delete-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-delete-action-group form {
    margin: 0;
}

.admin-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 10px;
    border: 1px solid rgba(158, 48, 37, .22);
    border-radius: 8px;
    background: rgba(192, 57, 43, .07);
    color: #9e3025;
    cursor: pointer;
    font: inherit;
    font-size: 8px;
    font-weight: 900;
    text-decoration: none;
}

.admin-delete-button:hover {
    background: rgba(192, 57, 43, .13);
}

.admin-permanent-delete-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eadfde;
}

.admin-delete-warning {
    margin-top: 7px;
    color: #8b5550;
    font-size: 8px;
    line-height: 1.45;
}

@media (max-width: 560px) {
    .admin-delete-action-group {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-delete-action-group form,
    .admin-delete-action-group button {
        width: 100%;
    }
}
/* MOS Klop — Klop aan. Ons help. */
.mos-klop-brand,.brand-copy{display:flex;flex-direction:column;gap:1px}.mos-klop-name,.brand-name{color:#003b4a;font-weight:900;letter-spacing:-.02em}.mos-klop-slogan,.brand-slogan,.login-brand-slogan{color:#777f82;font-size:8px;font-weight:700}.login-brand-slogan{margin-top:4px;font-size:10px}.klop-wordmark{display:inline-flex;align-items:baseline;gap:5px}.klop-wordmark strong{color:#003b4a}.klop-wordmark span{color:#bfb800}

/* MOS_KLOP_WORK_ORDER_FEATURE_V1 */
.workload-top{margin-bottom:16px}
.work-order-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.work-order-summary-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px 16px}
.work-order-summary-card small{display:block;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.work-order-summary-card strong{display:block;font-size:25px;margin-top:5px;color:var(--ink)}
.work-order-help{display:flex;gap:10px;align-items:flex-start;background:#eef4f4;border:1px solid #d8e3e4;border-left:4px solid var(--teal);border-radius:8px;padding:12px 14px;margin-bottom:18px;font-size:11px;line-height:1.5}
.work-order-help strong{white-space:nowrap}
.designer-queue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.designer-queue-card{padding:0;overflow:hidden}
.designer-queue-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);background:#fbfcfc}
.designer-queue-header h2{margin:0 0 4px;font-size:17px}
.designer-queue-header small{color:var(--muted);font-size:9px}
.designer-load-number{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.work-order-queue{padding:6px 14px 14px}
.work-order-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:11px 10px;margin-top:9px;background:#fff}
.work-order-item.can-drag{grid-template-columns:42px 18px minmax(0,1fr) auto;cursor:grab}
.work-order-item.is-dragging{opacity:.45}
.work-order-item.drag-target{border-color:var(--teal);box-shadow:0 0 0 2px rgba(0,59,74,.09)}
.work-order-position span{width:32px;height:32px;border-radius:50%;background:#edf2f2;color:var(--teal);display:grid;place-items:center;font-size:12px;font-weight:800}
.work-order-handle{font-size:18px;color:#8a9699;user-select:none}
.work-order-main{min-width:0}
.work-order-title-row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.work-order-title{font-size:11px;font-weight:800;color:var(--ink);text-decoration:none}
.work-order-priority{font-size:8px;font-weight:800;padding:4px 7px;border-radius:999px;white-space:nowrap}
.priority-urgent{background:#ffe0e0;color:#a72c2c}
.priority-high{background:#fff1cf;color:#8b5b00}
.priority-normal{background:#eef1f1;color:#566468}
.work-order-meta{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:6px;color:var(--muted);font-size:8px}
.work-order-overdue{color:#ad3030}
.work-order-position-form{margin:0}
.work-order-position-form label{margin:0}
.work-order-position-form select{width:auto;min-width:62px;margin:0;padding:7px 8px;font-size:9px}
.work-order-empty{padding:22px 18px;color:var(--muted);font-size:10px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1050px){.designer-queue-grid{grid-template-columns:1fr}}
@media(max-width:720px){.work-order-summary{grid-template-columns:1fr}.work-order-item,.work-order-item.can-drag{grid-template-columns:38px minmax(0,1fr) auto}.work-order-handle{display:none}}

/* =========================================================
   MOS KLOP V2 — MODULÊRE ROLLE, SKOLE & WERKVLOEI
   ========================================================= */
.v2-explainer{margin-bottom:18px;border-left:4px solid var(--teal);background:#f6f9f9}
.v2-explainer p{margin:6px 0 0;color:var(--muted);line-height:1.55}
.v2-fieldset{border:1px solid var(--line);border-radius:9px;padding:12px;margin:6px 0 14px}
.v2-fieldset legend{font-weight:800;padding:0 6px;color:var(--ink)}
.v2-fieldset.compact{padding:10px}
.v2-field-help{display:block;color:var(--muted);font-size:10px;margin:-2px 0 9px}
.v2-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v2-check-card{display:flex!important;align-items:flex-start;gap:8px;border:1px solid var(--line);border-radius:8px;padding:9px!important;background:#fff;cursor:pointer;margin:0!important}
.v2-check-card input{width:auto!important;margin:2px 0 0!important}
.v2-check-card span{display:flex;flex-direction:column;gap:2px}
.v2-check-card small{color:var(--muted);font-size:9px}
.v2-check-card.compact{padding:7px!important;font-size:10px}
.v2-tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.v2-role-chip{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:#edf2f2;color:var(--teal);font-size:8px;font-weight:800}
.v2-user-row{align-items:flex-start}
.v2-user-action-panel{min-width:min(620px,80vw)}

.v2-school-list{display:grid;gap:14px}
.v2-school-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px}
.v2-school-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.v2-school-head h3{margin:0 0 6px;font-size:16px}
.v2-school-counts{display:flex;gap:12px;text-align:right;color:var(--muted);font-size:9px}
.v2-school-counts span{display:flex;flex-direction:column}
.v2-school-counts b{font-size:16px;color:var(--ink)}
.v2-school-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:9px;margin:11px 0}
.v2-school-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid var(--line);padding-top:12px}
.v2-school-columns h4{margin:0 0 8px}
.v2-domain-row,.v2-approver-row{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:7px;padding:7px 9px;margin-bottom:6px;font-size:9px}
.v2-domain-row form{margin-left:auto}
.v2-domain-row small,.v2-approver-row small{color:var(--muted)}
.v2-approver-row{flex-direction:column;align-items:flex-start;gap:1px}
.v2-icon-danger{border:0;background:transparent;color:#a72c2c;font-size:18px;cursor:pointer;padding:0 4px}
.v2-inline-form{display:flex;gap:7px;align-items:center;margin-top:8px}
.v2-inline-form input{margin:0!important}
.v2-school-settings{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.v2-school-settings summary,.v2-queue-settings summary,.v2-delete-details summary{cursor:pointer;font-weight:800;color:var(--teal)}
.v2-school-settings-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;margin-top:12px}

.v2-approval-policy-note{display:flex;flex-direction:column;gap:3px;border-left:4px solid var(--lime,#bfb800);background:#fafbed;padding:10px 12px;border-radius:7px;font-size:10px}
.v2-approval-policy-note span{color:var(--muted)}
.v2-approval-flow{border:1px solid var(--line);border-radius:8px;padding:10px;margin:10px 0;background:#fafcfc}
.v2-approval-flow.compact{margin:12px 0}
.v2-approval-flow-rows{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.v2-approval-step{display:flex;flex-direction:column;padding:6px 8px;border-radius:7px;background:#eef2f2;font-size:8px}
.v2-approval-step small{opacity:.72}
.v2-approval-step.status-approved{background:#e8f6ec;color:#256539}
.v2-approval-step.status-revision{background:#ffe8e8;color:#9b2b2b}
.v2-approval-step.status-skipped{opacity:.55}
.v2-approval-step.status-pending{border:1px solid #cbd8da}

.v2-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.v2-dashboard-card{margin-bottom:16px}
.v2-dashboard-card .card-header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.v2-dashboard-card .card-header a{font-size:9px;font-weight:800;color:var(--teal)}
.v2-dashboard-list{display:grid;gap:7px}
.v2-dashboard-list>a{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;text-decoration:none;color:var(--ink);background:#fff}
.v2-dashboard-list>a:hover{border-color:var(--teal)}
.v2-dashboard-list>a>div{display:flex;flex-direction:column;min-width:0}
.v2-dashboard-list small{color:var(--muted);font-size:8px;margin-top:3px}
.v2-dashboard-list.compact>a{padding:8px 10px}
.v2-mini-order{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#edf2f2;color:var(--teal);font-weight:900;font-size:9px;flex:0 0 auto}
.v2-management-shortcut{display:flex;flex-direction:column;justify-content:space-between;gap:14px}

.management-board{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:14px;align-items:start;overflow-x:auto;padding-bottom:8px}
.management-lane{background:#f8faf9;border:1px solid var(--line);border-radius:10px;min-width:280px;overflow:hidden}
.management-lane-head{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--line);background:#fff}
.management-lane-head h2{font-size:15px;margin:0 0 3px}.management-lane-head small{font-size:8px;color:var(--muted)}
.management-lane-list{padding:8px}
.management-ticket{display:flex;gap:8px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:9px;margin-bottom:8px}
.management-ticket-order{font-size:10px;font-weight:900;color:var(--teal);padding-top:2px}
.management-ticket-body{min-width:0;flex:1}.management-ticket-body>a{text-decoration:none;color:var(--ink);font-size:10px}.management-ticket-body>small{display:block;color:var(--muted);font-size:8px;margin-top:4px}.management-ticket-body p{font-size:8px;background:#f3f5f4;padding:6px;border-radius:6px;margin:6px 0}
.management-ticket-controls{display:grid;gap:6px;margin-top:8px}.management-ticket-controls select,.management-ticket-controls input{margin:0;font-size:8px;padding:6px}.management-ticket-plan{display:grid;grid-template-columns:1fr 1.4fr auto;gap:5px}
.v2-unassigned-card{margin-bottom:16px}.v2-unassigned-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.v2-unassigned-list a{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;padding:9px;text-decoration:none;color:var(--ink)}.v2-unassigned-list span{font-size:8px;color:var(--muted);margin-top:3px}

.v2-work-state{font-weight:800;color:var(--teal)}
.v2-management-note{margin-top:7px;padding:7px 9px;border-radius:7px;background:#f3f5f4;color:#546065;font-size:9px;line-height:1.45}
.v2-management-note.detail-note{margin-bottom:12px}
.v2-queue-settings{margin-top:7px}.v2-queue-settings summary{font-size:8px}.v2-management-form{display:grid;grid-template-columns:1fr 1.6fr auto;gap:5px;margin-top:6px}.v2-management-form select,.v2-management-form input{margin:0!important;padding:6px;font-size:8px}

.v2-danger-zone{border-color:#e4bcbc;background:#fffafa}.v2-danger-zone h2{color:#8d2525}.v2-danger-zone p{font-size:9px;color:var(--muted)}.v2-danger-zone form{margin-top:8px}.v2-delete-details{margin-top:12px;padding-top:10px;border-top:1px solid #efd7d7}.v2-delete-form{display:grid;gap:7px}.v2-delete-form input{margin:0}.v2-archived-banner{margin-bottom:14px}
.v2-archive-search{max-width:720px}.v2-archive-list{display:grid;gap:8px}.v2-archive-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:10px}.v2-archive-row>div{display:flex;flex-direction:column}.v2-archive-row small{font-size:8px;color:var(--muted);margin-top:3px}

@media(max-width:1100px){.management-board{grid-template-columns:repeat(2,minmax(280px,1fr))}.v2-school-settings-grid,.v2-school-columns{grid-template-columns:1fr}}
@media(max-width:760px){.v2-check-grid,.v2-dashboard-grid,.v2-unassigned-list{grid-template-columns:1fr}.management-board{grid-template-columns:1fr}.management-ticket-plan,.v2-management-form{grid-template-columns:1fr}.v2-school-head,.v2-archive-row{flex-direction:column;align-items:flex-start}.v2-user-action-panel{min-width:0;width:100%}}

/* MOS_KLOP_V2_SCHOOL_OVERVIEW */
.v2-school-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.v2-school-overview-card{padding:0;overflow:hidden}
.v2-school-overview-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:18px;border-bottom:1px solid var(--line)}
.v2-school-overview-head h2{margin:0 0 5px;font-size:18px}
.v2-school-overview-head small{color:var(--muted)}
.v2-school-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.v2-school-stat-grid>div{background:#fff;padding:13px 12px}
.v2-school-stat-grid small{display:block;color:var(--muted);font-size:8px;min-height:22px}
.v2-school-stat-grid strong{font-size:20px;color:var(--ink)}
.v2-school-recent-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 7px}
.v2-school-recent-head h3{margin:0;font-size:13px}
.v2-school-recent-head a{font-size:9px;font-weight:700}
.v2-school-recent-list{padding:0 12px 14px}
.v2-school-request-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:11px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.v2-school-request-row:last-child{border-bottom:0}
.v2-school-request-row strong{display:block;font-size:10px}
.v2-school-request-row small{display:block;color:var(--muted);font-size:8px;margin-top:3px}
.v2-school-request-meta{text-align:right;flex:0 0 auto}
@media(max-width:1050px){.v2-school-overview-grid{grid-template-columns:1fr}}
@media(max-width:720px){.v2-school-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v2-school-request-row{align-items:flex-start;flex-direction:column}.v2-school-request-meta{text-align:left}}

/* =========================================================
   MOS Klop V2.1 - Media storage
   ========================================================= */
.storage-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.storage-status-card{display:flex;flex-direction:column;gap:5px}
.storage-status-card small{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.storage-status-card strong{font-size:20px;color:var(--ink)}
.storage-status-card span{font-size:10px;color:var(--muted)}
.storage-config-panel{margin-bottom:18px}
.storage-config-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.storage-config-grid>div{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fbfcfc;display:flex;flex-direction:column;gap:4px}
.storage-config-grid span{font-size:9px;color:var(--muted)}
.storage-config-grid strong{font-size:11px}
.storage-table-wrap{overflow:auto}
.storage-table{width:100%;border-collapse:collapse;font-size:10px}
.storage-table th,.storage-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.storage-table th{font-size:9px;text-transform:uppercase;color:var(--muted)}
.storage-worker-note code{display:block;background:#f3f5f5;border:1px solid var(--line);padding:9px 10px;border-radius:6px;margin-top:8px;overflow:auto}
.storage-upload-status{font-size:10px;font-weight:700;color:var(--teal);min-height:16px;margin-top:8px}
.storage-upload-busy{opacity:.82}
.storage-direct-note{display:block;margin:8px 0;color:var(--muted)}
.proof-video{width:100%;max-height:620px;background:#111;border-radius:8px}
@media(max-width:1100px){.storage-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.storage-config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.storage-status-grid,.storage-config-grid{grid-template-columns:1fr}}