:root{
    font-family:"Segoe UI",system-ui,sans-serif;
    color:#203147;
    background:#f2f5f8;
    line-height:1.55;
    font-size:15px;
    --navy:#132e46;
    --teal:#007e80;
    --border:#dce4ec
}
*{
    box-sizing:border-box
}
body{
    margin:0
}
a{
    color:#006d79;
    text-underline-offset:3px
}
a:hover{
    color:#00454e
}
button,input,select,textarea{
    font:inherit
}
button,.button{
    background:var(--teal);
    color:white;
    border:1px solid transparent;
    border-radius:8px;
    padding:10px 18px;
    font-weight:650;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:normal
}
button:hover,.button:hover{
    background:#006669;
    color:white
}
button.secondary,.button.secondary{
    background:white;
    border-color:var(--border);
    color:var(--navy)
}
button.quiet{
    background:transparent;
    color:inherit;
    border-color:#7890a3;
    padding:6px 12px
}
.danger{
    background:#aa3544
}
.danger:hover{
    background:#842535
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
    outline:3px solid #d18d24;
    outline-offset:3px
}
input:not([type=checkbox],[type=radio]),select,textarea{
    width:100%;
    border:1px solid #b9c9d6;
    border-radius:7px;
    padding:10px 11px;
    background:white;
    color:#203147;
    min-height:44px
}
input[type=checkbox],input[type=radio]{
    width:19px;
    height:19px;
    accent-color:var(--teal);
    flex-shrink:0
}
label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-weight:600;
    margin-bottom:16px;
    min-width:0
}
label small{
    font-weight:400
}
.check{
    flex-direction:row;
    align-items:center;
    font-weight:400;
    gap:10px
}
.topbar{
    background:var(--navy);
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px max(24px,calc((100vw - 1500px)/2));
    gap:20px
}
.brand{
    display:flex;
    gap:13px;
    align-items:center;
    text-decoration:none;
    color:white;
    font-size:23px;
    font-weight:700;
    letter-spacing:-.4px
}
.brand:hover{
    color:white
}
.brand img{
    height:44px;
    max-width:140px;
    object-fit:contain
}
.brand-mark{
    background:#d6eeee;
    color:#007678;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px
}
.brand small{
    display:block;
    color:#a8c4d5;
    font-size:9px;
    letter-spacing:1.6px
}
.account{
    display:flex;
    align-items:center;
    gap:22px;
    font-size:14px
}
.account small{
    display:block;
    color:#a8c4d5
}
.account form{
    margin:0
}
.navigation{
    display:flex;
    background:white;
    border-bottom:1px solid var(--border);
    gap:4px;
    padding:0 max(16px,calc((100vw - 1500px)/2));
    overflow-x:auto
}
.navigation a{
    padding:16px 13px;
    color:#465b6b;
    text-decoration:none;
    white-space:nowrap;
    font-size:14px;
    font-weight:600;
    border-bottom:3px solid transparent
}
.navigation a:hover{
    background:#f0f8f8;
    border-color:var(--teal)
}
main{
    max-width:1548px;
    margin:auto;
    padding:30px 24px;
    min-height:75vh
}
h1{
    font-size:32px;
    line-height:1.2;
    letter-spacing:-1px;
    margin:6px 0 12px
}
h2{
    font-size:20px;
    margin:4px 0 14px
}
h3{
    margin:4px 0 8px
}
p{
    margin:10px 0 18px
}
.eyebrow{
    letter-spacing:1.8px;
    font-size:11px;
    font-weight:750;
    color:#007e80;
    margin:0 0 7px
}
.muted{
    color:#607586;
    font-weight:400;
    font-size:14px
}
.page-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin:0 0 23px
}
.page-heading p{
    margin-bottom:0
}
.card{
    background:white;
    border:1px solid var(--border);
    border-radius:13px;
    padding:25px;
    margin-bottom:24px;
    box-shadow:0 3px 14px #18354805
}
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:24px
}
.stats>div{
    background:white;
    border:1px solid var(--border);
    border-radius:11px;
    padding:20px 24px;
    min-width:0
}
.stats strong{
    font-size:28px;
    display:block;
    font-weight:700;
    letter-spacing:-1px
}
.stats span{
    color:#607586;
    font-size:13px
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:0 24px
}
.two-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}
.button-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap
}
.alert{
    background:#e5f4ed;
    color:#155a39;
    border:1px solid #b7dac6;
    border-radius:9px;
    padding:16px 20px;
    margin-bottom:20px
}
.alert.error{
    color:#8e2638;
    background:#fff0f1;
    border-color:#e8c1c6
}
.auth-card{
    max-width:470px;
    margin:40px auto;
    padding:34px
}
.auth-card h1{
    font-size:30px
}
.auth-card button{
    width:100%;
    margin-top:5px
}
.auth-card .muted:last-child{
    font-size:12px;
    margin:20px 0 0
}
.table-scroll{
    overflow:auto
}
table{
    border-collapse:collapse;
    width:100%;
    text-align:left
}
th{
    font-size:11px;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:#62788a;
    padding:14px 15px;
    background:#f6f8fa;
    border-bottom:1px solid var(--border)
}
td{
    border-bottom:1px solid #e8edf2;
    padding:16px 15px;
    vertical-align:top
}
tbody tr:last-child td{
    border-bottom:0
}
tbody tr:hover{
    background:#f9fbfc
}
td small{
    color:#6b7e8d
}
.badge{
    display:inline-block;
    background:#ecf2f7;
    color:#3b5368;
    border-radius:6px;
    font-size:12px;
    font-weight:650;
    padding:4px 9px
}
.badge.warning,.badge.pending{
    background:#fff1d2;
    color:#8b5a00
}
.badge.approved{
    background:#dbf2ed;
    color:#006551
}
.badge.cancelled{
    background:#eeeef0;
    color:#6b6b77
}
.empty-state{
    text-align:center;
    padding:30px;
    color:#647987
}
.toolbar{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    padding-bottom:15px
}
.toolbar h2{
    margin-bottom:0
}
.toolbar small{
    color:#607586;
    font-size:12px
}
.toolbar label{
    font-size:12px;
    min-width:140px;
    margin:0 0 0 auto
}
.toolbar label+label{
    margin-left:0
}
.toolbar select{
    padding:7px 10px
}
.legend{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    font-size:12px;
    margin:4px 0 16px
}
.dot{
    display:flex;
    align-items:center;
    gap:8px
}
.dot:before{
    content:"";
    height:11px;
    width:11px;
    border-radius:3px;
    background:#008b88
}
.dot.provisional:before{
    background:#fff6dd;
    border:1px dashed #aa7c20
}
.dot.workshop:before{
    background:#6e73b8
}
.dot.defect:before{
    background:#bc4656
}
.mobile-hint{
    font-size:12px;
    margin:0 0 12px
}
.calendar-scroll{
    overflow:auto;
    border:1px solid var(--border);
    border-radius:8px;
    max-height:700px
}
.calendar-grid{
    min-width:1800px
}
.calendar-heading,.vehicle-row{
    display:grid;
    grid-template-columns:210px 1fr
}
.calendar-heading{
    position:sticky;
    top:0;
    z-index:5;
    min-height:65px;
    background:#f3f6f9
}
.calendar-heading .vehicle-label{
    font-size:11px;
    letter-spacing:1px;
    font-weight:700;
    background:#edf2f7;
    justify-content:center
}
.vehicle-label{
    position:sticky;
    left:0;
    z-index:3;
    background:white;
    padding:13px 15px;
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    justify-content:center
}
.vehicle-label strong{
    font-size:14px;
    overflow-wrap:anywhere
}
.vehicle-label span,.vehicle-label small{
    font-size:11px;
    color:#667e8f
}
.vehicle-row{
    border-top:1px solid var(--border);
    min-height:85px
}
.vehicle-row[hidden]{
    display:none
}
.days{
    display:grid;
    grid-template-columns:repeat(28,1fr)
}
.days>div{
    border-right:1px solid var(--border);
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    font-size:11px;
    color:#516e81
}
.days span{
    font-size:10px
}
.days .weekend{
    background:#e6edf2
}
.track{
    background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / 28 - 1px),#e2e8ef calc(100% / 28 - 1px),#e2e8ef calc(100% / 28));
    padding:10px 0;
    min-width:0;
    align-content:center
}
.lane{
    position:relative;
    height:32px;
    min-width:0
}
.lane.empty{
    font-size:11px;
    color:#8c9daa;
    display:flex;
    align-items:center;
    padding-left:12px
}
.event{
    position:absolute;
    height:25px;
    border-radius:5px;
    background:#008b88;
    color:white;
    font-size:11px;
    line-height:23px;
    text-decoration:none;
    padding:0;
    min-width:3px;
    white-space:nowrap;
    text-overflow:ellipsis;
    display:block;
    max-width:100%;
    cursor:pointer
}
.event:hover,.event:focus{
    color:white;
    z-index:10;
    outline-offset:1px
}
.event.provisional{
    background:#fff4d8;
    border:1px dashed #a77912;
    color:#7a5410;
    line-height:21px
}
.event.workshop{
    background:#7277ba
}
.event.defect{
    background:#bb4556
}
.event-detail{
    display:none;
    position:absolute;
    top:27px;
    left:0;
    min-width:230px;
    max-width:400px;
    white-space:normal;
    background:#172e42;
    color:white;
    line-height:1.5;
    padding:10px 13px;
    border-radius:6px;
    box-shadow:0 4px 12px #0003;
    z-index:20
}
.event:hover .event-detail,.event:focus .event-detail,.event.expanded .event-detail{
    display:block
}
.request-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:14px
}
.request-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:8px;
    text-decoration:none;
    color:#203147
}
.request-card:hover{
    border-color:var(--teal);
    background:#f4fbfb
}
.request-card>span:not(.badge){
    font-size:12px;
    color:#607586
}
.request-card .badge{
    align-self:start
}
.vehicle-options{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:10px;
    margin:15px 0
}
.vehicle-option{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:10px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:8px;
    margin:0;
    font-weight:400;
    font-size:13px
}
.vehicle-option small{
    display:block;
    color:#607586
}
.vehicle-option:has(input:checked){
    border-color:var(--teal);
    background:#f0faf8
}
.availability{
    display:block;
    font-size:11px;
    color:#187250;
    margin-top:6px
}
.availability.conflict,.conflict{
    color:#aa3544
}
.capacity{
    background:#edf6fa;
    border-radius:7px;
    padding:15px;
    font-weight:600
}
.assignment-list{
    padding-left:20px
}
.assignment-list li{
    padding:7px 0
}
.danger-zone{
    margin-top:25px;
    border-top:1px solid var(--border);
    padding-top:20px;
    display:flex;
    align-items:center;
    gap:15px;
    flex-wrap:wrap
}
fieldset{
    border:1px solid var(--border);
    border-radius:8px;
    padding:17px;
    margin:15px 0
}
legend{
    font-weight:600;
    font-size:14px
}
details{
    border-bottom:1px solid var(--border);
    padding:13px 0
}
summary{
    cursor:pointer;
    font-size:13px
}
pre{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:12px;
    background:#f4f6f8;
    padding:15px
}
footer{
    max-width:1500px;
    margin:auto;
    padding:25px 24px;
    border-top:1px solid var(--border);
    font-size:12px;
    color:#6c8394;
    display:flex;
    justify-content:space-between;
    gap:15px
}
[hidden]{
    display:none!important
}
.event-label{
    display:block;
    padding:0 4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.vehicle-option>span{
    min-width:0;
    overflow-wrap:anywhere
}
.card p,.request-card{
    overflow-wrap:anywhere
}
@media(max-width:850px){
    .topbar{
        padding:17px 20px
    }
    .brand{
        font-size:18px
    }
    .brand small{
        font-size:8px
    }
    .account{
        font-size:12px;
        gap:10px
    }
    .account>span{
        display:none
    }
    .stats{
        grid-template-columns:repeat(2,1fr)
    }
    .stats strong{
        font-size:24px
    }
    .stats>div{
        padding:16px
    }
    .page-heading{
        align-items:flex-start;
        flex-wrap:wrap
    }
    .two-columns{
        grid-template-columns:1fr;
        gap:0
    }
    main{
        padding:22px 14px
    }
    .card{
        padding:20px
    }
    h1{
        font-size:28px
    }
    .toolbar label{
        margin-left:0;
        flex:1
    }
    .navigation{
        padding:0 8px
    }
    .navigation a{
        padding:13px 11px
    }
    .calendar-card{
        padding:16px
    }
    .vehicle-label{
        padding:10px
    }
    .calendar-heading,.vehicle-row{
        grid-template-columns:155px 1fr
    }
    .calendar-grid{
        min-width:1745px
    }
    .calendar-scroll{
        max-height:70vh
    }
    .form-grid{
        grid-template-columns:1fr
    }
    .auth-card{
        margin:20px auto
    }
    .brand img{
        max-width:80px
    }
    .brand-mark{
        display:none
    }
    footer{
        flex-direction:column
    }
    .vehicle-options{
        grid-template-columns:1fr
    }
}
@media(prefers-reduced-motion:no-preference){
    button,.button,.request-card{
        transition:background .15s,border-color .15s
    }
}