:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#17212b;background:#f3f6f8;line-height:1.45}*{box-sizing:border-box}body{margin:0}a{color:inherit}.topbar{position:sticky;top:0;z-index:20;background:#DE5307;color:#241007;display:flex;align-items:center;gap:24px;padding:14px 24px;box-shadow:0 2px 10px #0002}.brand{font-size:1.25rem;font-weight:800;text-decoration:none;white-space:nowrap}.topbar nav{display:flex;gap:14px;flex-wrap:wrap;flex:1}.topbar nav a{text-decoration:none;font-size:.92rem;opacity:.9}.topbar nav a:hover{opacity:1;text-decoration:underline}.account{display:flex;align-items:center;gap:12px;white-space:nowrap}.account form{margin:0}.link-button{background:none;border:0;color:#241007;padding:0;text-decoration:underline}.container{max-width:1420px;margin:0 auto;padding:28px 22px 70px}h1,h2,h3{line-height:1.2;margin-top:0}h1{font-size:2rem;margin-bottom:8px}h2{font-size:1.25rem}h3{font-size:1rem}.card{background:white;border:1px solid #dce4e9;border-radius:12px;padding:20px;box-shadow:0 4px 16px #de530712}.login-card{max-width:480px;margin:70px auto}.stack{display:grid;gap:15px}.demo-accounts{margin-top:22px;padding:14px;background:#fff1e9;border-radius:8px;font-size:.92rem}.alert{padding:12px 15px;border-radius:8px;margin-bottom:14px}.alert-success{background:#dcf4e6;color:#145c33}.alert-danger{background:#fde4e4;color:#8a1e1e}.alert-warning{background:#fff0c9;color:#6c5000}.alert-info{background:#ffe4d5;color:#7a2d04}.page-heading,.day-header,.shift-header,.application-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.page-heading{margin-bottom:18px}.page-heading p,.day-header span,.shift-header span{margin:0;color:#5a6b77}.button,button{border:1px solid #b8c5cc;border-radius:7px;background:#fff;padding:9px 13px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}button:hover,.button:hover{filter:brightness(.97)}button.primary,.primary{background:#DE5307;color:#241007;border-color:#DE5307;font-weight:700}button.danger,.danger{background:#b83a3a;color:white;border-color:#b83a3a}button.warning,.warning{background:#df9a19;color:#2c2105;border-color:#df9a19}button.dark,.dark{background:#2e3c46;color:white;border-color:#2e3c46}button.small,.small{font-size:.84rem;padding:6px 9px}.muted{color:#70808a;font-size:.9rem}.badge{display:inline-block;border-radius:999px;background:#e7edf1;padding:4px 9px;font-size:.76rem;font-weight:700;white-space:nowrap}.badge-success{background:#d9f3e4;color:#17633a}.badge-warning{background:#fff0bd;color:#6c5100}.badge-dark{background:#34434d;color:white}.badge-info{background:#ffe0cf;color:#7a2d04}.badge-status{background:#ffe8da;color:#7a2d04}.day-card{margin-bottom:20px}.day-header{padding-bottom:15px;border-bottom:1px solid #e5eaed}.shift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.shift-card{border:1px solid #dce4e9;border-radius:10px;padding:15px;background:#fbfcfd}.shift-card.locked{border-color:#798894;background:#f0f3f5}.lock-note{font-size:.84rem;background:#dfe5e9;padding:8px;border-radius:6px;margin:10px 0}.slot-list{display:grid;gap:8px;margin-top:12px}.slot-row,.slot-admin-row{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #e7ecef;padding-top:9px}.slot-admin-row{align-items:flex-start}.assigned{display:block;color:#17633a;font-size:.9rem;margin-top:2px}.slot-actions{display:grid;gap:6px;justify-items:end}.inline-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0}.small-check{font-size:.72rem;color:#62727d}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0}.stat{text-decoration:none;display:flex;flex-direction:column}.stat strong{font-size:2.1rem;color:#DE5307}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:18px}.generate-row{display:grid;grid-template-columns:1fr 180px auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #e5eaed}.log-list>div{display:grid;gap:2px;padding:9px 0;border-top:1px solid #e5eaed}.log-list span{font-size:.9rem}.log-list small{color:#72818b}.application-grid,.card-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:15px;margin:18px 0}.application-card dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px}.application-card dt{font-weight:700}.application-card dd{margin:0}.actions{display:flex;gap:9px;flex-wrap:wrap}.reject-form{display:flex;gap:6px;flex:1}.reject-form input{min-width:100px;flex:1}.table-wrap{overflow:auto;padding:0}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:left;padding:12px;border-bottom:1px solid #e3e9ed;vertical-align:top}th{background:#eef3f6;font-size:.85rem}tr:last-child td{border-bottom:0}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end}.form-grid.wide{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.requirements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:13px;align-items:end}label{display:grid;gap:5px;font-weight:650;font-size:.9rem}label.check{display:flex;align-items:center;gap:7px;font-weight:500}input,select,textarea{width:100%;padding:9px 10px;border:1px solid #b9c6ce;border-radius:7px;background:white;font:inherit}input[type=checkbox]{width:auto}fieldset{border:1px solid #d6e0e5;border-radius:8px;padding:10px;display:flex;gap:10px;flex-wrap:wrap}legend{font-weight:700;padding:0 6px}.role-checks{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.empty{text-align:center;color:#677883;margin:18px 0}.closed-day{opacity:.65}@media(max-width:900px){.topbar{align-items:flex-start;flex-wrap:wrap}.topbar nav{order:3;width:100%}.shift-grid,.two-column,.stats-grid{grid-template-columns:1fr}.slot-row,.slot-admin-row{align-items:flex-start;flex-direction:column}.slot-actions{justify-items:start;width:100%}.generate-row{grid-template-columns:1fr}.page-heading{flex-direction:column}.container{padding:20px 12px}}
.overview-filter label{min-width:145px}.overview-table-wrap{padding:0}.overview-table{min-width:1000px}.overview-table td{padding:9px 10px}.compact-slots{display:flex;flex-wrap:wrap;gap:5px}.compact-slot{display:inline-block;border:1px solid #d6e0e5;border-radius:6px;padding:4px 7px;font-size:.76rem;white-space:nowrap}.compact-filled{background:#e1f4e9;border-color:#b9dfc8}.compact-pending{background:#fff2c9;border-color:#ead48b}.compact-open{background:#f1f4f6;color:#64747e}
.shift-grid.single-shift{grid-template-columns:minmax(0,1fr)}
.day-badges,.day-mode-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.day-mode-actions form{margin:0}.mode-help{margin-top:10px}
@media(max-width:900px){.day-mode-actions{justify-content:flex-start}}
.whole-day-card,.whole-day-admin{margin-top:16px;border:1px solid #dce4e9;border-radius:10px;padding:15px;background:#fbfcfd}.whole-day-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding-bottom:12px;border-bottom:1px solid #e1e7eb}.whole-day-heading h3{margin-bottom:3px}.whole-day-slot{border-top:1px solid #e7ecef;padding:11px 0}.whole-day-slot:first-child{border-top:0}.whole-day-slot-main{display:flex;align-items:center;justify-content:space-between;gap:15px}.whole-day-actions{display:flex;align-items:center;gap:8px}.period-summary{display:flex;gap:14px;flex-wrap:wrap;color:#5f707b;font-size:.86rem;margin-top:3px}.period-options{margin-top:8px}.period-options summary{cursor:pointer;color:#DE5307;font-size:.83rem;font-weight:700}.period-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.period-buttons form{margin:0}.whole-day-admin-table{display:grid;margin-top:12px}.whole-day-admin-head,.whole-day-admin-row{display:grid;grid-template-columns:minmax(160px,.75fr) repeat(2,minmax(260px,1fr));gap:12px;align-items:start;padding:10px 0;border-top:1px solid #e3e9ed}.whole-day-admin-head{font-size:.8rem;font-weight:800;color:#5a6b77;border-top:0}.daypart-admin-cell{display:grid;gap:7px}.locked-cell{padding:8px;border-radius:7px;background:#edf0f2}.compact-admin-form{display:flex;gap:6px;align-items:center;margin:0}.compact-admin-form select,.compact-admin-form input{min-width:0}.span-two{grid-column:2/4}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.actions form{margin:0}@media(max-width:900px){.whole-day-slot-main,.whole-day-heading{flex-direction:column;align-items:flex-start}.whole-day-admin-head{display:none}.whole-day-admin-row{grid-template-columns:1fr}.span-two{grid-column:auto}.daypart-admin-cell{padding:8px;border:1px solid #e3e9ed;border-radius:7px}}

/* Asynchroon opslaan zonder volledige paginaverversing */
button.is-saving{cursor:wait;opacity:.72;position:relative}
button:disabled{cursor:not-allowed}
#page-content.ajax-updated{animation:ajax-content-in .24s ease-out}
@keyframes ajax-content-in{from{opacity:.68}to{opacity:1}}

/* ORB-oranjethema */
:root{--orb-orange:#DE5307;--orb-orange-dark:#b84305;--orb-orange-soft:#fff1e9;--orb-orange-text:#7a2d04;accent-color:var(--orb-orange)}
input:focus,select:focus,textarea:focus,button:focus-visible,.button:focus-visible{outline:3px solid rgba(222,83,7,.24);outline-offset:2px;border-color:var(--orb-orange)}
.topbar nav a:hover,.topbar nav a:focus-visible{color:#241007;text-decoration-thickness:2px}
button.primary:hover,.primary:hover{background:var(--orb-orange-dark);border-color:var(--orb-orange-dark);color:white;filter:none}


/* Reddingsbrigade-banner met voertuig-geïnspireerde diagonale strepen */
.topbar{
    min-height:92px;
    padding:18px 24px;
    background-color:var(--orb-orange);
    background-image:
        linear-gradient(90deg,rgba(117,35,0,.08) 0%,rgba(117,35,0,.14) 42%,rgba(1,29,70,.30) 100%),
        url("orb-banner.webp");
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    color:#fff;
    border-bottom:4px solid rgba(255,255,255,.88);
    box-shadow:0 5px 18px rgba(15,31,46,.24);
}
.brand{
    color:#fff;
    font-size:1.34rem;
    letter-spacing:.01em;
    text-shadow:0 2px 5px rgba(0,0,0,.38);
}
.topbar nav a{
    color:#fff;
    padding:5px 7px;
    border-radius:6px;
    background:rgba(13,31,53,.13);
    text-shadow:0 1px 4px rgba(0,0,0,.58);
    transition:background-color .16s ease,transform .16s ease;
}
.topbar nav a:hover,.topbar nav a:focus-visible{
    color:#fff;
    background:rgba(255,255,255,.20);
    text-decoration:none;
    transform:translateY(-1px);
}
.account{
    color:#fff;
    padding:7px 10px;
    border-radius:8px;
    background:rgba(13,31,53,.18);
    text-shadow:0 1px 4px rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
}
.link-button{
    color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
@media(max-width:900px){
    .topbar{
        min-height:84px;
        padding:15px 14px;
        background-position:68% center;
    }
    .topbar nav{gap:7px}
    .topbar nav a{background:rgba(13,31,53,.22)}
    .account{padding:6px 8px}
}

/* Admin-dashboard: seizoensfilter en open diensten */
.dashboard-heading{align-items:stretch}
.season-filter{display:flex;align-items:flex-end;gap:10px;padding:12px 14px;min-width:min(100%,420px);margin:0}
.season-filter label{flex:1}
.season-filter select{min-width:300px}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-heading h2{margin-bottom:3px}
.open-services-card{margin:18px 0}
.open-services-table-wrap{border:1px solid #e1e7eb;border-radius:9px}
.open-services-table{min-width:880px}
.open-services-table td{vertical-align:middle}
.open-position-list{display:flex;flex-wrap:wrap;gap:6px;max-width:680px}
.open-position{font-weight:650}
.open-position b{color:var(--orb-orange-text)}
.table-action{text-align:right;white-space:nowrap}
.open-services-empty{display:grid;gap:4px;padding:26px 10px}
.dashboard-lower-grid{margin-top:18px}
@media(max-width:900px){
    .dashboard-heading{align-items:flex-start}
    .season-filter{width:100%;align-items:stretch;flex-direction:column}
    .season-filter select{min-width:0}
    .section-heading{flex-direction:column}
}

/* Pending roosterplekken: direct gereserveerd na de eerste aanmelding */
.slot-pending,
.pending-cell{
    background:#fff3bf !important;
    border-color:#e2bf38 !important;
}
.slot-row.slot-pending,
.slot-admin-row.slot-pending,
.whole-day-slot.slot-pending{
    margin-left:-8px;
    margin-right:-8px;
    padding-left:8px;
    padding-right:8px;
    border-radius:8px;
}
.pending-label,
.pending-text{
    color:#765800;
    font-weight:800;
    font-style:normal;
}
.compact-pending{
    background:#ffed99;
    border-color:#d9b72f;
    color:#644b00;
    font-weight:750;
}

/* Dynamische reserveplekken */
.dynamic-reserve-setting {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    min-height: 4.25rem;
    padding: .75rem 1rem;
    border: 1px dashed rgba(222, 83, 7, .55);
    border-radius: .75rem;
    background: rgba(222, 83, 7, .06);
}
.dynamic-reserve-setting span {
    color: var(--muted, #667085);
    font-size: .9rem;
}

/* Ledendashboard met compact actueel rooster */
.member-dashboard-heading p{margin:0;color:#5a6b77}
.member-dashboard-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.dashboard-summary-card{display:grid;gap:4px;padding:16px 18px}
.dashboard-summary-card strong{font-size:1.25rem;color:var(--orb-orange-text)}
.my-next-services{margin-bottom:18px}
.my-service-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.my-service-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;border:1px solid #e1e7eb;border-radius:8px;background:#fbfcfd}
.my-service-item div{display:grid;gap:2px}.my-service-item span:not(.badge){color:#667782;font-size:.88rem}
.dashboard-roster-list{display:grid;gap:16px}
.dashboard-roster-day{padding:0;overflow:hidden}
.dashboard-roster-day-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:17px 18px;background:linear-gradient(90deg,#fff5ef,#fff)}
.dashboard-roster-day-header h2{margin:0 0 3px}.dashboard-roster-day-header p{margin:0;color:#667782}
.dashboard-roster-grid{display:grid;grid-template-columns:minmax(170px,.8fr) repeat(2,minmax(180px,1fr));gap:10px;align-items:stretch;padding:8px 18px}
.dashboard-roster-grid-head{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#61717b;background:#eef3f6}
.dashboard-roster-row{border-top:1px solid #e5eaed}
.dashboard-role{display:flex;align-items:center;gap:7px;padding:6px 0}
.dashboard-person{display:flex;flex-direction:column;justify-content:center;min-height:42px;padding:7px 10px;border-radius:7px;font-size:.9rem}
.dashboard-person span{font-size:.8rem;color:#657680}.dashboard-person.is-filled{background:#e1f4e9;color:#17633a}.dashboard-person.is-pending{background:#fff2c9;color:#6c5100}.dashboard-person.is-open{background:#f1f4f6;color:#687984}
.span-dashboard-periods{grid-column:2/4}
@media(max-width:900px){.member-dashboard-summary{grid-template-columns:1fr}.dashboard-roster-grid-head{display:none}.dashboard-roster-grid{grid-template-columns:1fr 1fr;padding:11px 12px}.dashboard-role{grid-column:1/3;padding-bottom:0}.span-dashboard-periods{grid-column:1/3}.dashboard-roster-day-header{padding:15px 12px}}

/* Ledendashboard met compact actueel rooster */
.member-dashboard-heading p{margin:0;color:#5a6b77}
.member-dashboard-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.dashboard-summary-card{display:grid;gap:4px;padding:16px 18px}
.dashboard-summary-card strong{font-size:1.25rem;color:var(--orb-orange-text)}
.my-next-services{margin-bottom:18px}
.my-service-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.my-service-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;border:1px solid #e1e7eb;border-radius:8px;background:#fbfcfd}
.my-service-item div{display:grid;gap:2px}.my-service-item span:not(.badge){color:#667782;font-size:.88rem}
.dashboard-roster-list{display:grid;gap:16px}
.dashboard-roster-day{padding:0;overflow:hidden}
.dashboard-roster-day-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:17px 18px;background:linear-gradient(90deg,#fff5ef,#fff)}
.dashboard-roster-day-header h2{margin:0 0 3px}.dashboard-roster-day-header p{margin:0;color:#667782}
.dashboard-roster-grid{display:grid;grid-template-columns:minmax(170px,.8fr) repeat(2,minmax(180px,1fr));gap:10px;align-items:stretch;padding:8px 18px}
.dashboard-roster-grid-head{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#61717b;background:#eef3f6}
.dashboard-roster-row{border-top:1px solid #e5eaed}
.dashboard-role{display:flex;align-items:center;gap:7px;padding:6px 0}
.dashboard-person{display:flex;flex-direction:column;justify-content:center;min-height:42px;padding:7px 10px;border-radius:7px;font-size:.9rem}
.dashboard-person span{font-size:.8rem;color:#657680}.dashboard-person.is-filled{background:#e1f4e9;color:#17633a}.dashboard-person.is-pending{background:#fff2c9;color:#6c5100}.dashboard-person.is-open{background:#f1f4f6;color:#687984}
.span-dashboard-periods{grid-column:2/4}
@media(max-width:900px){.member-dashboard-summary{grid-template-columns:1fr}.dashboard-roster-grid-head{display:none}.dashboard-roster-grid{grid-template-columns:1fr 1fr;padding:11px 12px}.dashboard-role{grid-column:1/3;padding-bottom:0}.span-dashboard-periods{grid-column:1/3}.dashboard-roster-day-header{padding:15px 12px}}

/* Accountbeheer en wachtwoordpagina */
.account-link{color:inherit;text-decoration:underline;font-size:.9rem}
.account-password-card{max-width:560px}
.account-type-check{align-self:center;padding:9px 0}
.account-card{display:grid;gap:18px}
.account-danger-zone{padding-top:14px;border-top:1px solid #eed7cc;display:flex;justify-content:flex-end}
.account-danger-zone form{margin:0}
@media(max-width:900px){.account-danger-zone{justify-content:flex-start}.account{flex-wrap:wrap}}