body{
    background:#f4f7fb;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:#263238
}

.app-navbar{
    background:#123b5d;
    min-height:64px
}

.sidebar{
    background:#fff;
    min-height:calc(100vh - 64px);
    border-right:1px solid #e7edf3
}

.side-link{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#425466;
    padding:11px 12px;
    border-radius:10px;
    font-weight:500
}

.side-link:hover{
    background:#eaf2f8;
    color:#123b5d
}

.main-content{
    min-height:calc(100vh - 64px)
}

.card{
    border:0;
    border-radius:16px;
    box-shadow:0 6px 22px rgba(22,50,79,.07)
}

.stat-card{
    padding:20px
}

.stat-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#e9f2f9;
    color:#123b5d;
    font-size:22px
}

.page-title{
    font-weight:700;
    color:#123b5d
}

.table thead th{
    white-space:nowrap;
    background:#f7f9fb
}

.badge-status{
    font-size:.78rem;
    padding:.5em .7em;
    border-radius:999px
}

.login-page{
    min-height:100vh;
    background:linear-gradient(135deg,#123b5d,#1d6b8f);
    display:grid;
    place-items:center
}

.login-card{
    max-width:440px;
    width:100%;
    border-radius:22px
}

.brand-circle{
    width:70px;
    height:70px;
    border-radius:20px;
    background:#eaf4fb;
    color:#123b5d;
    display:grid;
    place-items:center;
    font-size:32px;
    margin:auto
}

.form-control,
.form-select{
    border-radius:10px;
    padding:.7rem .85rem
}

.btn{
    border-radius:10px
}

.empty-state{
    padding:50px 20px;
    text-align:center;
    color:#7b8794
}

.notice{
    border-radius:12px
}

.small-muted{
    color:#7b8794;
    font-size:.9rem
}

@media(max-width:991px){
    .sidebar{
        min-height:auto;
        border-right:0;
        border-bottom:1px solid #e7edf3
    }

    .main-content{
        min-height:auto
    }
}


/* =========================================================
   PAPARAN JADUAL KENDERAAN
   ========================================================= */

.schedule-date-banner{
    background:linear-gradient(135deg,#123b5d,#1d6b8f);
    color:#fff;
    border-radius:16px;
    padding:18px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px
}

.legend-chip{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    padding:6px 10px
}

.legend-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
    margin-right:5px;
    background:#fff
}

.legend-dot.scheduled{
    background:#7db7ff
}

.legend-dot.completed{
    background:#8de0aa
}

.legend-dot.cancelled{
    background:#c7cdd4
}

.vehicle-schedule-card{
    background:#fff;
    border:1px solid #e7edf3;
    border-radius:16px;
    padding:18px;
    box-shadow:0 5px 18px rgba(22,50,79,.05)
}

.vehicle-free-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:12px;
    background:#f0faf4;
    color:#1d7a43
}

.vehicle-free-box>i{
    font-size:25px
}

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

.schedule-item{
    display:flex;
    gap:12px;
    padding:11px;
    border-radius:12px;
    border-left:4px solid #1d6b8f;
    background:#f7f9fb
}

.schedule-item.scheduled{
    border-left-color:#1d6b8f
}

.schedule-item.completed{
    border-left-color:#28a745;
    background:#f3faf5
}

.schedule-item.cancelled{
    border-left-color:#8b95a1;
    background:#f4f5f6;
    opacity:.8
}

.schedule-time{
    min-width:78px;
    font-weight:700;
    font-size:.86rem;
    color:#123b5d;
    display:flex;
    flex-direction:column;
    gap:2px
}

.schedule-time span{
    display:none
}

.schedule-detail{
    min-width:0
}

.schedule-detail .text-truncate{
    max-width:180px
}

.schedule-table tbody tr:hover{
    background:#f8fbfd
}

.schedule-purpose{
    max-width:300px
}

.badge-status{
    white-space:nowrap
}


/* =========================================================
   CALENDAR JADUAL KENDERAAN
   ========================================================= */

.calendar-header{
    padding:18px 22px
}

.calendar-month-title{
    color:#123b5d
}

.calendar-nav-btn{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0
}

.calendar-card{
    overflow:hidden
}

.calendar-wrapper{
    width:100%;
    overflow-x:auto
}


/* HEADER HARI */

.calendar-week-header{
    min-width:980px;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    background:#123b5d;
    color:#fff
}

.calendar-week-header>div{
    padding:13px 10px;
    text-align:center;
    font-size:.82rem;
    font-weight:700;
    border-right:1px solid rgba(255,255,255,.12)
}


/* GRID CALENDAR */

.calendar-grid{
    min-width:980px;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    background:#e7edf3;
    gap:1px
}


/* SETIAP TARIKH */

.calendar-day{
    background:#fff;
    min-height:185px;
    padding:9px;
    position:relative;
    overflow:hidden;
    transition:.15s ease
}

.calendar-day:hover{
    background:#fbfdff
}

.empty-day{
    background:#f3f5f7
}


/* HARI INI */

.calendar-day.today{
    background:#f0f8ff;
    box-shadow:inset 0 0 0 2px #1d6b8f
}


/* HEADER TARIKH */

.calendar-day-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    margin-bottom:8px
}

.day-number{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-weight:700;
    color:#425466
}

.today-number{
    background:#123b5d;
    color:#fff
}

.calendar-count{
    font-size:.67rem;
    color:#7b8794;
    white-space:nowrap
}


/* EVENT DALAM TARIKH */

.calendar-events{
    display:flex;
    flex-direction:column;
    gap:5px
}

.calendar-free{
    font-size:.7rem;
    color:#98a3ad;
    padding:8px 5px;
    text-align:center
}

.calendar-free i{
    margin-right:3px
}


/* EVENT */

.calendar-event{
    border-radius:8px;
    padding:7px 8px;
    cursor:pointer;
    transition:.15s ease;
    overflow:hidden
}

.calendar-event:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(22,50,79,.12)
}


/* DIJADUALKAN */

.calendar-event.scheduled{
    background:#eaf3ff;
    border-left:4px solid #1d6b8f;
    color:#123b5d
}


/* SELESAI */

.calendar-event.completed{
    background:#eaf8f0;
    border-left:4px solid #2e9d61;
    color:#247548
}


/* DIBATALKAN */

.calendar-event.cancelled{
    background:#f0f1f3;
    border-left:4px solid #8b95a1;
    color:#68727c;
    opacity:.75
}


/* MAKLUMAT EVENT */

.event-time{
    font-size:.69rem;
    font-weight:800;
    margin-bottom:2px
}

.event-vehicle{
    font-size:.7rem;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.event-user{
    font-size:.68rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:2px
}

.event-destination{
    font-size:.65rem;
    opacity:.8;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:2px
}


/* BUTANG PENGGUNAAN LAGI */

.calendar-more{
    border:0;
    background:transparent;
    color:#1d6b8f;
    font-size:.68rem;
    font-weight:700;
    text-align:left;
    padding:3px 5px;
    cursor:pointer
}

.calendar-more:hover{
    text-decoration:underline
}


/* LEGEND */

.calendar-legend{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:#fff;
    border:1px solid #e7edf3;
    font-size:.75rem;
    color:#596774
}

.calendar-legend span{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block
}

.calendar-legend.scheduled span{
    background:#1d6b8f
}

.calendar-legend.completed span{
    background:#2e9d61
}

.calendar-legend.cancelled span{
    background:#8b95a1
}

.calendar-legend.today span{
    background:#123b5d
}


/* RINGKASAN CALENDAR */

.calendar-summary-card{
    background:#fff;
    border:1px solid #e7edf3;
    border-radius:15px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:12px;
    height:100%;
    box-shadow:0 5px 18px rgba(22,50,79,.04)
}

.calendar-summary-icon{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:12px;
    background:#eaf2f8;
    color:#123b5d;
    display:grid;
    place-items:center;
    font-size:19px
}


/* MODAL MAKLUMAT PENGGUNAAN */

.event-modal-date{
    background:#eaf2f8;
    color:#123b5d;
    border-radius:12px;
    padding:11px 14px;
    font-weight:700
}

.event-info-list{
    display:flex;
    flex-direction:column;
    gap:13px
}

.event-info-row{
    display:flex;
    align-items:flex-start;
    gap:12px
}

.event-info-icon{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:11px;
    background:#f0f5f8;
    color:#123b5d;
    display:grid;
    place-items:center
}


/* RESPONSIVE CALENDAR */

@media(max-width:767px){

    .calendar-header{
        padding:14px
    }

    .calendar-month-title{
        font-size:1.25rem
    }

    .calendar-day{
        min-height:160px
    }

    .schedule-date-banner{
        align-items:flex-start;
        flex-direction:column
    }

    .schedule-time{
        min-width:68px
    }

    .schedule-purpose{
        max-width:180px
    }
}


/* PRINT */

@media print{

    .app-navbar,
    .sidebar,
    .btn,
    form,
    .schedule-date-banner .legend-chip{
        display:none!important
    }

    .main-content{
        width:100%!important
    }

    .card{
        box-shadow:none;
        border:1px solid #ddd
    }

    .schedule-date-banner{
        color:#111;
        background:#fff;
        border:1px solid #ddd
    }
}


/* =========================================================
   DASHBOARD PREMIUM
   ========================================================= */

.dashboard-hero{
    border-radius:20px;
    padding:24px;
    background:linear-gradient(135deg,#123b5d 0%,#1d6b8f 100%);
    color:#fff;
    position:relative;
    overflow:hidden
}

.dashboard-hero:after{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    border-radius:50%;
    right:-60px;
    top:-80px;
    background:rgba(255,255,255,.08)
}

.dashboard-hero .hero-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    background:rgba(255,255,255,.14);
    display:grid;
    place-items:center;
    font-size:27px
}

.dashboard-stat{
    position:relative;
    overflow:hidden;
    min-height:132px;
    padding:20px
}

.dashboard-stat .stat-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start
}

.dashboard-stat .stat-value{
    font-size:2rem;
    font-weight:800;
    line-height:1;
    margin-top:7px
}

.dashboard-stat .stat-icon{
    width:46px;
    height:46px
}

.dashboard-stat .stat-footer{
    margin-top:15px;
    font-size:.8rem;
    color:#7b8794
}

.dashboard-stat .accent{
    position:absolute;
    left:0;
    bottom:0;
    height:4px;
    width:100%;
    background:#1d6b8f
}

.dashboard-stat.success .accent{
    background:#2e9d61
}

.dashboard-stat.warning .accent{
    background:#d39e22
}

.dashboard-stat.danger .accent{
    background:#c94c4c
}

.dashboard-section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}

.dashboard-section-title h5{
    font-weight:750;
    margin:0;
    color:#123b5d
}

.dashboard-action{
    height:100%;
    padding:18px;
    text-decoration:none;
    color:#263238;
    display:block;
    border:1px solid #e7edf3;
    border-radius:15px;
    transition:.18s;
    background:#fff
}

.dashboard-action:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(22,50,79,.08);
    color:#123b5d
}

.dashboard-action .action-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:#eaf2f8;
    color:#123b5d;
    display:grid;
    place-items:center;
    font-size:20px;
    margin-bottom:12px
}

.dashboard-action strong{
    display:block
}

.dashboard-action small{
    color:#7b8794
}

.activity-row{
    display:flex;
    gap:12px;
    padding:13px 0;
    border-bottom:1px solid #eef2f5
}

.activity-row:last-child{
    border-bottom:0
}

.activity-icon{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:11px;
    background:#eef6fb;
    color:#1d6b8f;
    display:grid;
    place-items:center
}

.activity-title{
    font-weight:650;
    font-size:.92rem
}

.activity-meta{
    font-size:.78rem;
    color:#7b8794
}

.status-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:999px;
    padding:5px 9px;
    font-size:.72rem;
    font-weight:650;
    background:#eef2f5;
    color:#596774
}

.status-pill.wait{
    background:#fff6df;
    color:#956b00
}

.status-pill.ok{
    background:#eaf8f0;
    color:#247548
}

.status-pill.no{
    background:#fdecec;
    color:#a33d3d
}

.progress-thin{
    height:7px;
    border-radius:99px;
    background:#edf1f4;
    overflow:hidden
}

.progress-thin>span{
    display:block;
    height:100%;
    border-radius:99px;
    background:#1d6b8f
}

.vehicle-mini{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid #eef2f5
}

.vehicle-mini:last-child{
    border-bottom:0
}

.vehicle-mini-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    background:#eaf2f8;
    color:#123b5d;
    display:grid;
    place-items:center
}

@media(max-width:767px){

    .dashboard-hero{
        padding:19px
    }

    .dashboard-stat{
        min-height:118px
    }
}