*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#0c0c1c 0%,#1a2a3a 100%);min-height:100vh;color:#e0f2fe}
header{background:#0a0a0a;padding:8px 0;position:sticky;top:0;z-index:100;border-bottom:1px solid #2a4a6a}
.header-content{display:flex;justify-content:space-between;align-items:center;padding:0 16px;max-width:1400px;margin:0 auto}
.logo{font-size:1.3rem;font-weight:600;color:#7dd3fc;display:flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none}
.admin-profile{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;background:#1e2a3a;border-radius:30px;border:1px solid #2a4a6a;cursor:pointer}
.admin-avatar{width:32px;height:32px;background:linear-gradient(135deg,#0a1a2a 0%,#1a3a4a 100%);border:1px solid #7dd3fc;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem}
.welcome-text{font-size:0.85rem;color:#7dd3fc}
.container{padding:16px;max-width:1400px;margin:0 auto}
.top-nav{background:#0f1a24;border:1px solid #2a5a7a;border-radius:40px;padding:8px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.nav-btn{padding:12px 20px;background:transparent;border:1px solid #2a5a7a;border-radius:30px;color:#7dd3fc;font-size:0.95rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all 0.2s;text-decoration:none}
.nav-btn:hover{background:#1a2a3a;border-color:#7dd3fc;transform:translateY(-1px)}
.nav-btn.primary{background:linear-gradient(135deg,#0a1a2a 0%,#1a3a4a 100%);border-color:#7dd3fc}
.nav-btn.danger{background:#f8717120;border-color:#f87171;color:#f87171}
.nav-btn.danger:hover{background:#f87171;color:#000}
.nav-btn.success{background:#34d39920;border-color:#34d399;color:#34d399}
.nav-btn.warning{background:#fbbf2420;border-color:#fbbf24;color:#fbbf24}
.nav-btn.active{background:#2a4a6a;border-color:#34d399;color:#34d399}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
.stat-card{background:#0f1a24;border:1px solid #1f3a4a;border-radius:20px;padding:16px;transition:all 0.2s;cursor:pointer}
.stat-card:hover{transform:translateY(-2px);border-color:#7dd3fc}
.stat-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.stat-icon{width:36px;height:36px;background:linear-gradient(135deg,#0a1a2a 0%,#1a3a4a 100%);border:1px solid #2a5a7a;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.stat-value{font-size:1.8rem;font-weight:600;color:#7dd3fc;line-height:1.2}
.stat-label{font-size:0.75rem;color:#9ab3c5;margin-top:4px}
.stat-change{font-size:0.7rem;margin-top:5px}
.stat-change.positive{color:#34d399}
.stat-change.negative{color:#f87171}
.data-table{width:100%;border-collapse:collapse;background:#0f1a24;border-radius:20px;overflow:hidden}
.data-table th,.data-table td{padding:12px;text-align:left;border-bottom:1px solid #1f3a4a}
.data-table th{background:#1a2a3a;color:#7dd3fc;font-weight:600}
.data-table tr:hover{background:#1a2a3a}
.data-table tr{cursor:pointer;transition:background 0.2s}
.status-badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:600}
.status-available{background:#34d39920;color:#34d399;border:1px solid #34d399}
.status-busy{background:#f8717120;color:#f87171;border:1px solid #f87171}
.status-pending{background:#fbbf2420;color:#fbbf24;border:1px solid #fbbf24}
.status-approved{background:#34d39920;color:#34d399;border:1px solid #34d399}
.status-active{background:#60a5fa20;color:#60a5fa;border:1px solid #60a5fa}
.status-completed{background:#64748b20;color:#94a3b8;border:1px solid #64748b}
.status-rejected{background:#f8717120;color:#f87171;border:1px solid #f87171}
.status-cancelled{background:#6b728020;color:#9ca3af;border:1px solid #6b7280}
.alert-warning{background:#fbbf2420;border:1px solid #fbbf24;border-radius:16px;padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.alert-success{background:#34d39920;border:1px solid #34d399;border-radius:16px;padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.alert-error{background:#ef444420;border:1px solid #ef4444;border-radius:16px;padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.alert-info{background:#3b82f620;border:1px solid #3b82f6;border-radius:16px;padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.alert-icon{font-size:1.5rem}
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.95);z-index:1000;padding:16px;align-items:center;justify-content:center}
.modal-content{background:#0f1a24;border:1px solid #2a5a7a;border-radius:24px;padding:24px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto}
.modal-large{max-width:700px}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-header h3{color:#7dd3fc}
.modal-close{font-size:1.8rem;color:#7dd3fc;cursor:pointer;transition:all 0.2s}
.modal-close:hover{color:#f87171;transform:scale(1.1)}
.form-group{margin-bottom:16px}
.form-label{color:#7dd3fc;display:block;margin-bottom:6px;font-size:0.9rem;font-weight:500}
.form-input,.form-select,.form-textarea{width:100%;padding:12px;background:#0a1a24;border:1px solid #1f3a4a;border-radius:12px;color:white;font-size:1rem;transition:all 0.2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#7dd3fc;box-shadow:0 0 0 2px #7dd3fc20}
.form-textarea{min-height:80px;resize:vertical}
.form-row{display:flex;gap:15px;margin-bottom:15px}
.form-row .form-group{flex:1;margin-bottom:0}
.btn-submit{width:100%;padding:12px;background:linear-gradient(135deg,#0a1a2a 0%,#1a3a4a 100%);border:1px solid #7dd3fc;border-radius:30px;color:#7dd3fc;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-submit:hover{background:linear-gradient(135deg,#1a2a3a 0%,#2a4a6a 100%);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.calendar-section{background:#0f1a24;border:1px solid #1f3a4a;border-radius:24px;padding:20px;margin-bottom:20px}
.calendar-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.calendar-header h3{color:#7dd3fc;font-size:1.1rem}
.filter-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.filter-btn{padding:8px 20px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:30px;color:#7dd3fc;text-decoration:none;transition:all .2s}
.filter-btn:hover{background:#1a2a3a;border-color:#7dd3fc}
.filter-btn.active{background:#1a3a4a;border-color:#34d399;color:#34d399}
.btn-action{padding:5px 10px;border-radius:6px;border:none;cursor:pointer;font-size:0.7rem;font-weight:500;transition:all .2s}
.btn-action:hover{transform:translateY(-1px);opacity:0.9}
.btn-assign{background:#3b82f6;color:white}
.btn-start{background:#f59e0b;color:white}
.btn-complete{background:#10b981;color:white}
.btn-reject{background:#ef4444;color:white}
.btn-cancel{background:#6b7280;color:white}
.btn-icon{padding:8px;background:#1a2a3a;border:1px solid #2a5a7a;border-radius:10px;color:#7dd3fc;cursor:pointer;transition:all .2s;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:.8rem}
.btn-icon:hover{background:#2a3a4a;border-color:#7dd3fc}
.btn-edit{background:#3b82f620;border-color:#3b82f6;color:#60a5fa}
.btn-delete{background:#ef444420;border-color:#ef4444;color:#f87171}
.btn-status{background:#f59e0b20;border-color:#f59e0b;color:#fbbf24}
.btn-odometer{background:#10b98120;border-color:#10b981;color:#34d399}
.btn-refill{background:#8b5cf620;border-color:#8b5cf6;color:#a78bfa}
.detail-row{display:flex;padding:10px 0;border-bottom:1px solid #1f3a4a}
.detail-label{width:140px;color:#9ab3c5;font-weight:500}
.detail-value{flex:1;color:#e0f2fe}
.toast{position:fixed;bottom:30px;right:30px;background:#34d399;color:#000;padding:12px 24px;border-radius:12px;z-index:10000;animation:slideInRight 0.3s ease-out}
.toast-error{background:#ef4444;color:#fff}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.fuel-warning{background:#ef444420;border:1px solid #ef4444;border-radius:8px;padding:8px;margin-top:10px;font-size:.75rem;color:#f87171;display:flex;align-items:center;gap:6px}
.gas-badge{background:#f59e0b20;color:#f59e0b;padding:2px 8px;border-radius:20px;font-size:0.7rem;display:inline-block;margin-top:4px}
.search-bar{display:flex;gap:8px;margin-bottom:20px}
.search-input{flex:1;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:30px;color:#fff}
.search-input:focus{outline:none;border-color:#7dd3fc}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.page-btn{padding:8px 12px;background:#0a1a24;border:1px solid #1f3a4a;border-radius:8px;color:#7dd3fc;cursor:pointer;transition:all 0.2s}
.page-btn:hover{background:#1a2a3a;border-color:#7dd3fc}
.page-btn.active{background:#1a3a4a;border-color:#7dd3fc;color:#fff}
.page-btn.disabled{opacity:0.5;cursor:not-allowed}
.spinner{display:inline-block;width:20px;height:20px;border:2px solid #1f3a4a;border-top-color:#7dd3fc;border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vehicle-card,.profile-card,.staff-card{background:#0a1a24;border:1px solid #1f3a4a;border-radius:20px;padding:16px;margin-bottom:16px;transition:all 0.2s}
.vehicle-card:hover,.profile-card:hover,.staff-card:hover{transform:translateY(-2px);border-color:#7dd3fc}
.vehicle-header,.profile-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.vehicle-title,.profile-title{font-size:1.2rem;color:#7dd3fc;font-weight:600}
.staff-card.available{border-left:3px solid #34d399}
.staff-card.busy{border-left:3px solid #f87171}
.staff-card.off-duty{border-left:3px solid #64748b}
.staff-name{font-size:1rem;font-weight:600;color:#7dd3fc;margin-bottom:4px}
.staff-role{font-size:0.75rem;color:#fbbf24;margin-bottom:8px}
.staff-phone{font-size:0.75rem;color:#9ab3c5;display:flex;align-items:center;gap:4px;margin-top:8px}
.staff-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0;font-size:.85rem}
.progress-bar{background:#1f3a4a;border-radius:10px;height:8px;margin:10px 0;overflow:hidden}
.progress-fill{background:linear-gradient(90deg,#34d399,#fbbf24,#f87171);height:100%;width:0%;border-radius:10px;transition:width .3s}
.fuel-bar{background:#1f3a4a;border-radius:10px;height:12px;margin:10px 0;overflow:hidden}
.fuel-fill{height:100%;border-radius:10px;transition:width .3s}
.maintenance-warning{background:#fbbf2420;border:1px solid #fbbf24;border-radius:12px;padding:10px;margin-top:10px;font-size:.75rem;display:flex;align-items:center;gap:8px}
.maintenance-critical{background:#ef444420;border-color:#ef4444;color:#f87171}
.fuel-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;margin-bottom:30px}
.fuel-card{background:linear-gradient(135deg,#0f1a24 0%,#0a1520 100%);border:1px solid #2a5a7a;border-radius:20px;padding:20px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.fuel-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.3);border-color:#34d399}
.fuel-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.fuel-card-icon{font-size:2rem}
.fuel-card-title{font-size:.85rem;color:#9ab3c5;text-transform:uppercase}
.fuel-card-value{font-size:2rem;font-weight:bold;margin:10px 0}
.fuel-card-sub{font-size:.8rem;color:#7dd3fc}
.allocation-bar{margin:15px 0}
.bar-container{background:#1a2a3a;border-radius:10px;overflow:hidden;margin:5px 0}
.bar-fill{background:linear-gradient(90deg,#34d399,#10b981);height:25px;border-radius:10px;transition:width .5s;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-size:.75rem;font-weight:bold}
.bar-fill.diesel{background:linear-gradient(90deg,#f59e0b,#d97706)}
.bar-fill.gasoline{background:linear-gradient(90deg,#10b981,#059669)}
.fuel-type-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:bold}
.diesel-badge{background:#f59e0b20;color:#f59e0b;border:1px solid #f59e0b}
.gasoline-badge{background:#10b98120;color:#10b981;border:1px solid #10b981}
.legend{display:flex;gap:20px;margin-top:10px;font-size:.75rem}
.legend-color{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:5px}
.breakdown-modal{max-width:500px}
.breakdown-item{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #1f3a4a}
.print-header{display:none;text-align:center;margin-bottom:30px}
.auto-fetch-badge{background:#8b5cf620;color:#a78bfa;padding:2px 8px;border-radius:20px;font-size:.7rem;display:inline-flex;align-items:center;gap:5px}
.text-center{text-align:center}
.text-right{text-align:right}
.text-small{font-size:0.75rem}
.text-large{font-size:1.2rem}
.text-bold{font-weight:600}
.text-muted{color:#9ab3c5}
.mt-1{margin-top:4px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mb-1{margin-bottom:4px}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.p-1{padding:4px}
.p-2{padding:8px}
.p-3{padding:12px}
.p-4{padding:16px}
.d-flex{display:flex}
.flex-column{flex-direction:column}
.gap-1{gap:4px}
.gap-2{gap:8px}
.gap-3{gap:12px}
.justify-between{justify-content:space-between}
.align-center{align-items:center}
.w-100{width:100%}
.cursor-pointer{cursor:pointer}
.logo img{height:45px;width:auto;object-fit:contain}
[data-tooltip]{position:relative;cursor:help}
[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:4px 8px;background:#1a2a3a;color:#7dd3fc;font-size:0.7rem;border-radius:4px;white-space:nowrap;display:none;z-index:1000}
[data-tooltip]:hover:before{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn 0.3s ease-out}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.pulse{animation:pulse 2s infinite}
@media (min-width:768px){
    .stats-grid{grid-template-columns:repeat(4,1fr)}
    .staff-details{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
    .form-row{flex-direction:column}
    .data-table{font-size:0.8rem;display:block;overflow-x:auto}
    .data-table th,.data-table td{padding:8px}
    .top-nav .nav-btn{flex:1;text-align:center;justify-content:center}
    .modal-content{padding:16px;margin:16px}
    .calendar-day{min-height:60px}
    .day-event{font-size:0.6rem}
    .staff-details{grid-template-columns:1fr}
}
@media (max-width:480px){
    .container{padding:12px}
    .stat-value{font-size:1.4rem}
    .stat-icon{width:28px;height:28px;font-size:1rem}
    .nav-btn{padding:8px 12px;font-size:0.85rem}
    .staff-grid{grid-template-columns:1fr}
    .vehicle-header,.profile-header{flex-direction:column;align-items:flex-start;gap:8px}
    .fuel-stats-grid{grid-template-columns:1fr}
}
@media print{
    body{background:#fff;color:#000}
    .no-print,.top-nav,header,.modal,.btn-icon,.pagination,.action-buttons,.filter-buttons{display:none!important}
    .print-header{display:block}
    .stat-card,.data-table{background:#fff;border:1px solid #ddd}
    .status-badge{print-color-adjust:exact}
    .fuel-card{break-inside:avoid;page-break-inside:avoid}
}
/* Report Summary Grid */
.report-summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:15px}
.report-stat-card{text-align:center;padding:15px;background:#0a1a24;border-radius:12px;border:1px solid #2a5a7a}
.report-stat-value{font-size:1.8rem;font-weight:700;color:#7dd3fc}
.report-stat-label{font-size:0.75rem;color:#9ab3c5;margin-top:5px}

/* Background and Border Utilities */
.bg-dark{background:#0a1a24}
.rounded{border-radius:12px}
.border-top{border-top:1px solid #1f3a4a}
.pt-4{padding-top:16px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.p-3{padding:12px}
.p-4{padding:16px}
.text-center{text-align:center}
.text-right{text-align:right}
.text-danger{color:#f87171}
.text-warning{color:#fbbf24}
.text-success{color:#34d399}

/* Overflow Utilities */
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}

/* Flex Utilities */
.d-flex{display:flex}
.gap-1{gap:4px}
.gap-2{gap:8px}
.gap-3{gap:12px}
.flex-wrap{flex-wrap:wrap}
.justify-between{justify-content:space-between}
.align-center{align-items:center}

/* Toast Styles */
.toast{position:fixed;bottom:30px;right:30px;padding:12px 24px;border-radius:12px;z-index:10000;animation:slideInRight 0.3s ease-out}
.toast-success{background:#10b981;color:#fff}
.toast-error{background:#ef4444;color:#fff}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Vehicles */
.vehicles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:20px}
        .vehicle-card{background:#0a1a24;border:1px solid #1f3a4a;border-radius:20px;padding:20px;transition:all .3s ease}
        .vehicle-card:hover{transform:translateY(-3px);border-color:#7dd3fc;box-shadow:0 8px 25px rgba(0,0,0,.3)}
        .vehicle-card.available{border-left:4px solid #34d399}
        .vehicle-card.maintenance{border-left:4px solid #fbbf24}
        .vehicle-card.busy{border-left:4px solid #f87171}
        .vehicle-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap}
        .vehicle-title{font-size:1.2rem;font-weight:600;color:#7dd3fc;display:flex;align-items:center;gap:8px}
        .status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:600}
        .status-available{background:#34d39920;color:#34d399;border:1px solid #34d399}
        .status-busy{background:#f8717120;color:#f87171;border:1px solid #f87171}
        .status-maintenance{background:#fbbf2420;color:#fbbf24;border:1px solid #fbbf24}
        .vehicle-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0;font-size:.85rem}
        .detail-label{color:#9ab3c5;display:block;margin-bottom:3px;font-size:.7rem}
        .detail-value{color:#e0f2fe;font-weight:500}
        .stats-row{display:flex;gap:15px;margin-top:15px;padding-top:15px;border-top:1px solid #1f3a4a}
        .stat-item{flex:1;text-align:center}
        .stat-number{font-size:1.2rem;font-weight:700;color:#7dd3fc}
        .stat-label{font-size:.7rem;color:#9ab3c5}
        .progress-bar{background:#1f3a4a;border-radius:10px;height:8px;margin:15px 0;overflow:hidden}
        .progress-fill{height:100%;background:linear-gradient(90deg,#34d399,#fbbf24,#f87171);width:0%;border-radius:10px;transition:width .3s}
        .fuel-bar{background:#1f3a4a;border-radius:10px;height:12px;margin:10px 0;overflow:hidden}
        .fuel-fill{height:100%;border-radius:10px;transition:width .3s}
        .maintenance-warning{background:#fbbf2420;border:1px solid #fbbf24;border-radius:12px;padding:10px;margin-top:10px;font-size:.75rem;display:flex;align-items:center;gap:8px}
        .maintenance-critical{background:#ef444420;border-color:#ef4444;color:#f87171}
        .fuel-warning{background:#ef444420;border-radius:8px;padding:8px;margin-top:8px;font-size:.7rem;color:#f87171;display:flex;align-items:center;gap:6px}
        .action-buttons{display:flex;gap:10px;margin-top:15px}
        .btn-icon{padding:8px;background:#1a2a3a;border:1px solid #2a5a7a;border-radius:10px;color:#7dd3fc;cursor:pointer;transition:all .2s;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:.8rem}
        .btn-icon:hover{background:#2a3a4a;border-color:#7dd3fc}
        .btn-edit{background:#3b82f620;border-color:#3b82f6;color:#60a5fa}
        .btn-delete{background:#ef444420;border-color:#ef4444;color:#f87171}
        .btn-status{background:#f59e0b20;border-color:#f59e0b;color:#fbbf24}
        .btn-odometer{background:#10b98120;border-color:#10b981;color:#34d399}
        .btn-refill{background:#8b5cf620;border-color:#8b5cf6;color:#a78bfa}
        .modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);z-index:1000;align-items:center;justify-content:center}
        .modal-content{background:#0f1a24;border:1px solid #2a5a7a;border-radius:24px;padding:30px;max-width:550px;width:90%}
        .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
        .modal-close{cursor:pointer;font-size:24px;color:#7dd3fc}
        .form-group{margin-bottom:20px}
        .form-group label{display:block;margin-bottom:8px;color:#7dd3fc;font-weight:500}
        .form-input,.form-select{width:100%;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:12px;color:#fff}
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
        .btn-submit{width:100%;padding:12px;background:#10b981;border:none;border-radius:30px;color:#fff;font-weight:600;cursor:pointer}
        .toast{position:fixed;bottom:30px;right:30px;padding:12px 24px;border-radius:12px;z-index:10000;animation:slideIn .3s}
        .toast-success{background:#10b981;color:#fff}
        .toast-error{background:#ef4444;color:#fff}
        .viewer-badge{background:#6b728020;padding:4px 12px;border-radius:20px;font-size:0.7rem;color:#9ab3c5;display:inline-flex;align-items:center;gap:5px}
        @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
        .search-bar{display:flex;gap:10px;margin-bottom:20px}
        .search-input{flex:1;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:30px;color:#fff}
        .alert{padding:12px 20px;border-radius:12px;margin-bottom:20px}
        .alert-success{background:#10b98120;border:1px solid #10b981;color:#10b981}
        .alert-error{background:#ef444420;border:1px solid #ef4444;color:#ef4444}
        .alert-info{background:#3b82f620;border:1px solid #3b82f6;color:#60a5fa}
        .auto-fetch-badge{background:#8b5cf620;color:#a78bfa;padding:2px 8px;border-radius:20px;font-size:.7rem;display:inline-flex;align-items:center;gap:5px}
        @media (max-width:768px){.vehicles-grid{grid-template-columns:1fr}.vehicle-details{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

        .form-card{background:#0f1a24;border:1px solid #2a5a7a;border-radius:24px;padding:32px;max-width:650px;margin:0 auto}
        .form-card h1{color:#7dd3fc;margin-bottom:24px;display:flex;align-items:center;gap:10px}
        .form-group{margin-bottom:20px}
        .form-group label{display:block;margin-bottom:8px;color:#7dd3fc;font-weight:500}
        .form-input,.form-select{width:100%;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:12px;color:#fff;font-size:1rem}
        .form-input:focus,.form-select:focus{outline:none;border-color:#7dd3fc;box-shadow:0 0 0 2px #7dd3fc20}
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:0}
        .btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,#0a1a2a,#1a3a4a);border:1px solid #7dd3fc;border-radius:30px;color:#7dd3fc;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s}
        .btn-submit:hover{background:linear-gradient(135deg,#1a2a3a,#2a4a6a);transform:translateY(-2px)}
        .btn-cancel{padding:10px 20px;background:#1a2a3a;border:1px solid #f87171;border-radius:30px;color:#f87171;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
        .action-buttons{display:flex;gap:15px;margin-top:20px}
        .alert{padding:12px 20px;border-radius:12px;margin-bottom:20px}
        .alert-success{background:#10b98120;border:1px solid #10b981;color:#10b981}
        .alert-error{background:#ef444420;border:1px solid #ef4444;color:#ef4444}
        .info-text{font-size:.75rem;color:#9ab3c5;margin-top:5px}
        .auto-fill-badge{background:#8b5cf620;color:#a78bfa;padding:2px 8px;border-radius:20px;font-size:.7rem;display:inline-flex;align-items:center;gap:5px}
        @media (max-width:600px){.form-row{grid-template-columns:1fr;gap:0}.form-card{padding:20px}}
    

/* maintenance */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}
        .stat-card{background:#0f1a24;border:1px solid #2a5a7a;border-radius:20px;padding:20px;text-align:center}
        .stat-value{font-size:2rem;font-weight:700;color:#7dd3fc}
        .stat-label{font-size:.8rem;color:#9ab3c5;margin-top:5px}
        .alert-warning{background:#fbbf2420;border:1px solid #fbbf24;border-radius:16px;padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
        .alert-critical{background:#ef444420;border-color:#ef4444}
        .alert-info{background:#3b82f620;border-color:#3b82f6}
        .maintenance-card{background:#0a1a24;border:1px solid #1f3a4a;border-radius:16px;padding:15px;margin-bottom:15px;transition:all .3s}
        .maintenance-card:hover{transform:translateX(5px);border-color:#7dd3fc}
        .maintenance-card.scheduled{border-left:4px solid #fbbf24}
        .maintenance-card.completed{border-left:4px solid #10b981}
        .maintenance-card.postponed{border-left:4px solid #f87171}
        .maintenance-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap}
        .vehicle-name{font-weight:700;color:#7dd3fc;font-size:1.1rem}
        .status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:600}
        .status-scheduled{background:#fbbf2420;color:#fbbf24;border:1px solid #fbbf24}
        .status-completed{background:#10b98120;color:#10b981;border:1px solid #10b981}
        .status-postponed{background:#f8717120;color:#f87171;border:1px solid #f87171}
        .date-badge{background:#1a2a3a;padding:4px 12px;border-radius:20px;font-size:.75rem}
        .progress-bar{background:#1f3a4a;border-radius:10px;height:8px;margin:10px 0;overflow:hidden}
        .progress-fill{height:100%;background:linear-gradient(90deg,#34d399,#fbbf24,#f87171);width:0%;border-radius:10px;transition:width .3s}
        .data-table{width:100%;background:#0f1a24;border-radius:16px;border-collapse:collapse}
        .data-table th,.data-table td{padding:12px;text-align:left;border-bottom:1px solid #1f3a4a}
        .data-table th{background:#1a2a3a;color:#7dd3fc}
        .btn-icon{padding:6px 12px;background:#1a2a3a;border:1px solid #2a5a7a;border-radius:8px;color:#7dd3fc;cursor:pointer;margin:2px}
        .btn-icon:hover{background:#2a3a4a}
        .btn-edit{background:#3b82f620;border-color:#3b82f6;color:#60a5fa}
        .btn-delete{background:#ef444420;border-color:#ef4444;color:#f87171}
        .btn-complete{background:#10b98120;border-color:#10b981;color:#34d399}
        .btn-postpone{background:#f59e0b20;border-color:#f59e0b;color:#fbbf24}
        .modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);z-index:1000;align-items:center;justify-content:center}
        .modal-content{background:#0f1a24;border:1px solid #2a5a7a;border-radius:24px;padding:30px;max-width:700px;width:90%;max-height:90vh;overflow-y:auto}
        .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
        .modal-close{cursor:pointer;font-size:28px;color:#7dd3fc}
        .form-group{margin-bottom:20px}
        .form-group label{display:block;margin-bottom:8px;color:#7dd3fc;font-weight:500}
        .form-input,.form-select,.form-textarea{width:100%;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:12px;color:#fff}
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
        .btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,#0a1a2a,#1a3a4a);border:1px solid #7dd3fc;border-radius:30px;color:#7dd3fc;font-weight:600;cursor:pointer}
        .checkbox-group{display:flex;align-items:center;gap:10px;margin-top:10px}
        .items-section{background:#0a1a24;border-radius:12px;padding:15px;margin:15px 0}
        .items-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
        .item-row{display:grid;grid-template-columns:2fr 1fr 1fr 0.5fr;gap:10px;margin-bottom:10px;align-items:center}
        .item-row .form-group{margin-bottom:0}
        .remove-item{background:#ef4444;color:white;border:none;border-radius:8px;width:32px;height:32px;cursor:pointer}
        .add-item-btn{background:#10b98120;border:1px solid #10b981;color:#10b981;padding:8px 15px;border-radius:20px;cursor:pointer;margin-top:10px}
        .toast{position:fixed;bottom:30px;right:30px;padding:12px 24px;border-radius:12px;z-index:10000;animation:slideIn .3s}
        .toast-success{background:#10b981;color:#fff}
        .toast-error{background:#ef4444;color:#fff}
        @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
        .search-bar{display:flex;gap:10px;margin-bottom:20px}
        .search-input{flex:1;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:30px;color:#fff}
        .remark-text{background:#1a2a3a;padding:8px;border-radius:8px;margin-top:8px;font-size:.75rem;color:#fbbf24}
        @media (max-width:768px){.form-row{grid-template-columns:1fr}.data-table{font-size:.75rem;display:block;overflow-x:auto}.item-row{grid-template-columns:1fr;gap:5px}}

        /* aide */
        .staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px}
        .staff-card{background:#0a1a24;border:1px solid #1f3a4a;border-radius:20px;padding:20px;transition:all .3s ease}
        .staff-card:hover{transform:translateY(-3px);border-color:#7dd3fc;box-shadow:0 8px 25px rgba(0,0,0,.3)}
        .staff-card.available{border-left:4px solid #34d399}
        .staff-card.busy{border-left:4px solid #f87171}
        .staff-card.off-duty{border-left:4px solid #64748b}
        .staff-header{display:flex;align-items:center;gap:15px;margin-bottom:15px}
        .staff-avatar{width:60px;height:60px;background:linear-gradient(135deg,#0a1a2a,#1a3a4a);border:2px solid #7dd3fc;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
        .staff-info{flex:1}
        .staff-name{font-size:1.2rem;font-weight:600;color:#7dd3fc;margin-bottom:5px}
        .status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:600}
        .status-available{background:#34d39920;color:#34d399;border:1px solid #34d399}
        .status-busy{background:#f8717120;color:#f87171;border:1px solid #f87171}
        .status-off-duty{background:#64748b20;color:#94a3b8;border:1px solid #64748b}
        .staff-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0;font-size:.85rem}
        .detail-label{color:#9ab3c5;display:block;margin-bottom:3px;font-size:.7rem}
        .detail-value{color:#e0f2fe;font-weight:500}
        .stats-row{display:flex;gap:15px;margin-top:15px;padding-top:15px;border-top:1px solid #1f3a4a}
        .stat-item{flex:1;text-align:center}
        .stat-number{font-size:1.2rem;font-weight:700;color:#7dd3fc}
        .stat-label{font-size:.7rem;color:#9ab3c5}
        .action-buttons{display:flex;gap:10px;margin-top:15px}
        .btn-icon{padding:8px;background:#1a2a3a;border:1px solid #2a5a7a;border-radius:10px;color:#7dd3fc;cursor:pointer;transition:all .2s;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:.8rem}
        .btn-icon:hover{background:#2a3a4a;border-color:#7dd3fc}
        .btn-edit{background:#3b82f620;border-color:#3b82f6;color:#60a5fa}
        .btn-delete{background:#ef444420;border-color:#ef4444;color:#f87171}
        .btn-status{background:#f59e0b20;border-color:#f59e0b;color:#fbbf24}
        .modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);z-index:1000;align-items:center;justify-content:center}
        .modal-content{background:#0f1a24;border:1px solid #2a5a7a;border-radius:24px;padding:30px;max-width:500px;width:90%}
        .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
        .modal-close{cursor:pointer;font-size:24px;color:#7dd3fc}
        .form-group{margin-bottom:20px}
        .form-group label{display:block;margin-bottom:8px;color:#7dd3fc;font-weight:500}
        .form-input,.form-select{width:100%;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:12px;color:#fff}
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
        .btn-submit{width:100%;padding:12px;background:#10b981;border:none;border-radius:30px;color:#fff;font-weight:600;cursor:pointer}
        .toast{position:fixed;bottom:30px;right:30px;padding:12px 24px;border-radius:12px;z-index:10000;animation:slideIn .3s}
        .toast-success{background:#10b981;color:#fff}
        .toast-error{background:#ef4444;color:#fff}
        @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
        .search-bar{display:flex;gap:10px;margin-bottom:20px}
        .search-input{flex:1;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:30px;color:#fff}
        .alert{padding:12px 20px;border-radius:12px;margin-bottom:20px}
        .alert-success{background:#10b98120;border:1px solid #10b981;color:#10b981}
        .alert-error{background:#ef444420;border:1px solid #ef4444;color:#ef4444}
        @media (max-width:768px){.staff-grid{grid-template-columns:1fr}.staff-details{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

        
        .form-card{background:#0f1a24;border:1px solid #2a5a7a;border-radius:24px;padding:32px;max-width:600px;margin:0 auto}
        .form-card h1{color:#7dd3fc;margin-bottom:24px;display:flex;align-items:center;gap:10px}
        .form-group{margin-bottom:20px}
        .form-group label{display:block;margin-bottom:8px;color:#7dd3fc;font-weight:500}
        .form-input,.form-select,.form-textarea{width:100%;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:12px;color:#fff;font-size:1rem}
        .form-textarea{resize:vertical;min-height:80px}
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:0}
        .btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,#0a1a2a,#1a3a4a);border:1px solid #7dd3fc;border-radius:30px;color:#7dd3fc;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s}
        .btn-submit:hover{background:linear-gradient(135deg,#1a2a3a,#2a4a6a);transform:translateY(-2px)}
        .btn-cancel{padding:10px 20px;background:#1a2a3a;border:1px solid #f87171;border-radius:30px;color:#f87171;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
        .action-buttons{display:flex;gap:15px;margin-top:20px}
        .alert{padding:12px 20px;border-radius:12px;margin-bottom:20px}
        .alert-success{background:#10b98120;border:1px solid #10b981;color:#10b981}
        .alert-error{background:#ef444420;border:1px solid #ef4444;color:#ef4444}
        @media (max-width:600px){.form-row{grid-template-columns:1fr;gap:0}.form-card{padding:20px}}
    

        /* drivers */
        .staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px}
        .staff-card{background:#0a1a24;border:1px solid #1f3a4a;border-radius:20px;padding:20px;transition:all .3s ease}
        .staff-card:hover{transform:translateY(-3px);border-color:#7dd3fc;box-shadow:0 8px 25px rgba(0,0,0,.3)}
        .staff-card.available{border-left:4px solid #34d399}
        .staff-card.busy{border-left:4px solid #f87171}
        .staff-card.off-duty{border-left:4px solid #64748b}
        .staff-header{display:flex;align-items:center;gap:15px;margin-bottom:15px}
        .staff-avatar{width:60px;height:60px;background:linear-gradient(135deg,#0a1a2a,#1a3a4a);border:2px solid #7dd3fc;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
        .staff-info{flex:1}
        .staff-name{font-size:1.2rem;font-weight:600;color:#7dd3fc;margin-bottom:5px}
        .status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:600}
        .status-available{background:#34d39920;color:#34d399;border:1px solid #34d399}
        .status-busy{background:#f8717120;color:#f87171;border:1px solid #f87171}
        .status-off-duty{background:#64748b20;color:#94a3b8;border:1px solid #64748b}
        .staff-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0;font-size:.85rem}
        .detail-label{color:#9ab3c5;display:block;margin-bottom:3px;font-size:.7rem}
        .detail-value{color:#e0f2fe;font-weight:500}
        .stats-row{display:flex;gap:15px;margin-top:15px;padding-top:15px;border-top:1px solid #1f3a4a}
        .stat-item{flex:1;text-align:center}
        .stat-number{font-size:1.2rem;font-weight:700;color:#7dd3fc}
        .stat-label{font-size:.7rem;color:#9ab3c5}
        .action-buttons{display:flex;gap:10px;margin-top:15px}
        .btn-icon{padding:8px;background:#1a2a3a;border:1px solid #2a5a7a;border-radius:10px;color:#7dd3fc;cursor:pointer;transition:all .2s;flex:1;display:flex;align-items:center;justify-content:center;gap:5px}
        .btn-icon:hover{background:#2a3a4a;border-color:#7dd3fc}
        .btn-edit{background:#3b82f620;border-color:#3b82f6;color:#60a5fa}
        .btn-delete{background:#ef444420;border-color:#ef4444;color:#f87171}
        .btn-status{background:#f59e0b20;border-color:#f59e0b;color:#fbbf24}
        .modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);z-index:1000;align-items:center;justify-content:center}
        .modal-content{background:#0f1a24;border:1px solid #2a5a7a;border-radius:24px;padding:30px;max-width:500px;width:90%}
        .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
        .modal-close{cursor:pointer;font-size:24px;color:#7dd3fc}
        .form-group{margin-bottom:20px}
        .form-input,.form-select{width:100%;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:12px;color:#fff}
        .btn-submit{width:100%;padding:12px;background:#10b981;border:none;border-radius:30px;color:#fff;font-weight:600;cursor:pointer}
        .toast{position:fixed;bottom:30px;right:30px;padding:12px 24px;border-radius:12px;z-index:10000;animation:slideIn .3s}
        .toast-success{background:#10b981;color:#fff}
        .toast-error{background:#ef4444;color:#fff}
        @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
        .search-bar{display:flex;gap:10px;margin-bottom:20px}
        .search-input{flex:1;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:30px;color:#fff}
        .alert{padding:12px 20px;border-radius:12px;margin-bottom:20px}
        .alert-success{background:#10b98120;border:1px solid #10b981;color:#10b981}
        .alert-error{background:#ef444420;border:1px solid #ef4444;color:#ef4444}
        @media (max-width:768px){.staff-grid{grid-template-columns:1fr}.staff-details{grid-template-columns:1fr}}
        
        .form-card{background:#0f1a24;border:1px solid #2a5a7a;border-radius:24px;padding:32px;max-width:600px;margin:0 auto}
        .form-card h1{color:#7dd3fc;margin-bottom:24px;display:flex;align-items:center;gap:10px}
        .form-group{margin-bottom:20px}
        .form-group label{display:block;margin-bottom:8px;color:#7dd3fc;font-weight:500}
        .form-input,.form-select,.form-textarea{width:100%;padding:12px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:12px;color:#fff;font-size:1rem}
        .form-textarea{resize:vertical;min-height:80px}
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:0}
        .btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,#0a1a2a,#1a3a4a);border:1px solid #7dd3fc;border-radius:30px;color:#7dd3fc;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s}
        .btn-submit:hover{background:linear-gradient(135deg,#1a2a3a,#2a4a6a);transform:translateY(-2px)}
        .btn-cancel{padding:10px 20px;background:#1a2a3a;border:1px solid #f87171;border-radius:30px;color:#f87171;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
        .action-buttons{display:flex;gap:15px;margin-top:20px}
        .alert{padding:12px 20px;border-radius:12px;margin-bottom:20px}
        .alert-success{background:#10b98120;border:1px solid #10b981;color:#10b981}
        .alert-error{background:#ef444420;border:1px solid #ef4444;color:#ef4444}
        @media (max-width:600px){.form-row{grid-template-columns:1fr;gap:0}.form-card{padding:20px}}

        /*dashboard */
        .dashboard-wrapper { display: flex; gap: 20px; }
        .dashboard-sidebar { width: 350px; flex-shrink: 0; }
        .dashboard-main { flex: 1; }
        .fuel-allocation-card, .budget-card {
            background: linear-gradient(135deg, #0f1a24 0%, #0a1520 100%);
            border: 1px solid #2a5a7a;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .budget-card { border-color: #34d399; }
        .fuel-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .fuel-card-icon { font-size: 1.5rem; }
        .fuel-card-title { font-size: 0.85rem; color: #9ab3c5; text-transform: uppercase; font-weight: 600; }
        .budget-amount { font-size: 1.8rem; font-weight: 700; color: #34d399; }
        .budget-label { font-size: 0.75rem; color: #9ab3c5; margin-top: 5px; }
        .budget-input-group { margin-top: 15px; display: flex; gap: 10px; }
        .budget-input { flex: 1; padding: 10px; background: #0a1a24; border: 1px solid #2a5a7a; border-radius: 12px; color: #fff; }
        .budget-btn { padding: 10px 15px; background: #10b981; border: none; border-radius: 12px; color: #fff; cursor: pointer; }
        .fuel-type-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #1f3a4a; }
        .fuel-type-row:last-child { border-bottom: none; }
        .fuel-type-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .diesel-icon { background: #f59e0b20; color: #f59e0b; }
        .gasoline-icon { background: #10b98120; color: #10b981; }
        .fuel-type-info { flex: 1; margin-left: 12px; }
        .fuel-type-name { font-weight: 600; color: #7dd3fc; }
        .fuel-stats { text-align: right; }
        .fuel-amount { font-size: 1.1rem; font-weight: 700; }
        .fuel-cost { font-size: 0.7rem; color: #9ab3c5; }
        .allocation-bar-small { background: #1a2a3a; border-radius: 8px; height: 6px; overflow: hidden; margin: 8px 0; }
        .allocation-fill { height: 100%; border-radius: 8px; transition: width 0.3s; }
        .diesel-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
        .gasoline-fill { background: linear-gradient(90deg, #10b981, #059669); }
        .stat-change { font-size: 0.7rem; margin-top: 5px; }
        .stat-change.positive { color: #34d399; }
        .stat-change.negative { color: #f87171; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); justify-content: center; align-items: center; z-index: 1000; }
        .modal-content { background: #0f1a24; border: 1px solid #2a5a7a; border-radius: 24px; padding: 30px; max-width: 800px; width: 90%; max-height: 85vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #1f3a4a; }
        .modal-close { cursor: pointer; font-size: 28px; color: #9ab3c5; transition: all 0.2s; }
        .modal-close:hover { color: #f87171; }
        .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
        .info-item { padding: 10px 0; border-bottom: 1px solid #1f3a4a; }
        .info-label { color: #9ab3c5; font-size: 0.8rem; margin-bottom: 5px; text-transform: uppercase; }
        .info-value { font-size: 1rem; font-weight: 500; word-break: break-word; }
        .btn-group { margin-top: 30px; display: flex; gap: 15px; flex-wrap: wrap; }
        .btn { padding: 12px 24px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; display: inline-flex; align-items: center; gap: 8px; }
        .btn-primary { background: #3b82f6; color: white; }
        .btn-success { background: #10b981; color: white; }
        .btn-warning { background: #f59e0b; color: white; }
        .btn-danger { background: #ef4444; color: white; }
        .btn:hover { transform: translateY(-2px); opacity: 0.9; }
        .form-group { margin-bottom: 20px; }
        .form-label { display: block; margin-bottom: 8px; color: #9ab3c5; font-weight: 500; }
        .form-input, .form-select, .form-textarea { width: 100%; padding: 12px; background: #0a1a24; border: 1px solid #2a5a7a; border-radius: 12px; color: #e0f2fe; font-size: 0.9rem; }
        .toast { position: fixed; bottom: 30px; right: 30px; padding: 12px 24px; border-radius: 12px; z-index: 10000; animation: slideInRight 0.3s ease-out; }
        .toast-success { background: #10b981; color: #fff; }
        .toast-error { background: #ef4444; color: #fff; }
        .viewer-badge { background: #6b728020; padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; color: #9ab3c5; display: inline-flex; align-items: center; gap: 5px; }
        @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @media (max-width: 1024px) { .dashboard-wrapper { flex-direction: column; } .dashboard-sidebar { width: 100%; } }
        @media (max-width: 600px) { .info-grid { grid-template-columns: 1fr; } .btn-group { flex-direction: column; } .btn { justify-content: center; } }

        /* trips */
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 1000; align-items: center; justify-content: center; }
        .modal-content { background: #0f1a24; border: 1px solid #2a5a7a; border-radius: 24px; padding: 25px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
        .modal-large { max-width: 700px; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-close { cursor: pointer; font-size: 28px; color: #7dd3fc; }
        .form-group { margin-bottom: 15px; }
        .form-input, .form-select, .form-textarea { width: 100%; padding: 10px; background: #0a1a24; border: 1px solid #2a5a7a; border-radius: 10px; color: white; }
        .form-row { display: flex; gap: 15px; margin-bottom: 15px; }
        .form-row .form-group { flex: 1; margin-bottom: 0; }
        .btn-submit { background: #10b981; color: white; padding: 12px; border: none; border-radius: 30px; cursor: pointer; width: 100%; }
        .btn-action { padding: 5px 10px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.7rem; margin: 2px; }
        .btn-assign { background: #3b82f6; color: white; }
        .btn-start { background: #f59e0b; color: white; }
        .btn-complete { background: #10b981; color: white; }
        .btn-reject { background: #ef4444; color: white; }
        .btn-cancel { background: #6b7280; color: white; }
        .btn-print { background: #8b5cf6; color: white; }
        .status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; }
        .status-pending { background: #fbbf2420; color: #fbbf24; border: 1px solid #fbbf24; }
        .status-approved { background: #34d39920; color: #34d399; border: 1px solid #34d399; }
        .status-active { background: #60a5fa20; color: #60a5fa; border: 1px solid #60a5fa; }
        .status-completed { background: #10b98120; color: #10b981; border: 1px solid #10b981; }
        .status-rejected { background: #ef444420; color: #ef4444; border: 1px solid #ef4444; }
        .toast { position: fixed; bottom: 30px; right: 30px; padding: 12px 24px; border-radius: 12px; z-index: 10000; }
        .toast-success { background: #10b981; color: white; }
        .toast-error { background: #ef4444; color: white; }
        .detail-row { display: flex; padding: 10px 0; border-bottom: 1px solid #1f3a4a; }
        .detail-label { width: 140px; color: #9ab3c5; }
        .detail-value { flex: 1; }
        .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid #1f3a4a; border-top-color: #7dd3fc; border-radius: 50%; animation: spin 0.6s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .gas-badge { background: #f59e0b20; color: #f59e0b; padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; display: inline-block; margin-top: 4px; }
        @media (max-width: 768px) { .form-row { flex-direction: column; } }
        @media print {
            header, .top-nav, .stats-grid, .calendar-header form, .filter-buttons, .btn-action, .modal, .toast {
                display: none !important;
            }
            .container { margin: 0; padding: 0; }
            .data-table { width: 100%; border-collapse: collapse; }
            .data-table th, .data-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            body, .calendar-section { background: white; color: black; }
            .status-badge { border: 1px solid #ddd; background: #f0f0f0; color: black; }
        }
    /* fuel */
        .fuel-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;margin-bottom:30px}
        .fuel-card{background:linear-gradient(135deg,#0f1a24 0%,#0a1520 100%);border:1px solid #2a5a7a;border-radius:20px;padding:20px;cursor:pointer;transition:transform .2s,box-shadow .2s}
        .fuel-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.3);border-color:#34d399}
        .fuel-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
        .fuel-card-icon{font-size:2rem}
        .fuel-card-title{font-size:.85rem;color:#9ab3c5;text-transform:uppercase}
        .fuel-card-value{font-size:2rem;font-weight:bold;margin:10px 0}
        .fuel-card-sub{font-size:.8rem;color:#7dd3fc}
        .allocation-bar{margin:15px 0}
        .bar-container{background:#1a2a3a;border-radius:10px;overflow:hidden;margin:5px 0}
        .bar-fill{background:linear-gradient(90deg,#34d399,#10b981);height:25px;border-radius:10px;transition:width .5s;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-size:.75rem;font-weight:bold}
        .bar-fill.diesel{background:linear-gradient(90deg,#f59e0b,#d97706)}
        .bar-fill.gasoline{background:linear-gradient(90deg,#10b981,#059669)}
        .legend{display:flex;gap:20px;margin-top:10px;font-size:.75rem}
        .legend-color{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:5px}
        .fuel-type-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:bold}
        .diesel-badge{background:#f59e0b20;color:#f59e0b;border:1px solid #f59e0b}
        .gasoline-badge{background:#10b98120;color:#10b981;border:1px solid #10b981}
        .progress-bar{background:#1a2a3a;border-radius:10px;overflow:hidden;margin:10px 0}
        .progress-fill{background:linear-gradient(90deg,#34d399,#10b981);height:8px;border-radius:10px;transition:width .3s}
        .fuel-bar{background:#1f3a4a;border-radius:10px;height:12px;margin:10px 0;overflow:hidden}
        .fuel-fill{height:100%;border-radius:10px;transition:width .3s}
        .breakdown-modal{max-width:500px}
        .breakdown-item{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #1f3a4a}
        .alert{padding:12px 20px;border-radius:12px;margin-bottom:20px}
        .alert-success{background:#10b98120;border:1px solid #10b981;color:#10b981}
        .alert-error{background:#ef444420;border:1px solid #ef4444;color:#ef4444}
        .alert-warning{background:#fbbf2420;border:1px solid #fbbf24;color:#fbbf24;display:flex;align-items:center;gap:12px}
        .alert-critical{background:#ef444420;border-color:#ef4444;color:#f87171}
        .budget-card{background:linear-gradient(135deg,#0f1a24 0%,#0a1520 100%);border:2px solid #34d399;border-radius:20px;padding:20px;margin-bottom:20px}
        .budget-amount{font-size:1.8rem;font-weight:700;color:#34d399}
        .budget-label{font-size:.75rem;color:#9ab3c5;margin-top:5px}
        .budget-input-group{display:flex;gap:10px;margin-top:15px}
        .budget-input{flex:1;padding:10px;background:#0a1a24;border:1px solid #2a5a7a;border-radius:12px;color:#fff}
        .budget-btn{padding:10px 15px;background:#10b981;border:none;border-radius:12px;color:#fff;cursor:pointer}
        .print-header{display:none;text-align:center;margin-bottom:30px}
        .vehicle-tank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:15px}
        .viewer-badge{background:#6b728020;padding:4px 12px;border-radius:20px;font-size:0.7rem;color:#9ab3c5;display:inline-flex;align-items:center;gap:5px}
        
        @media print {
            .no-print, .top-nav, header, .modal, .btn-group, .action-buttons, 
            .fuel-stats-grid, .calendar-section:not(.print-report-section), 
            .fuel-card, .budget-input-group, .alert, .fuel-bar, .vehicle-tank-grid,
            #fuelChart, .data-table:not(.print-table) {
                display: none !important;
            }
            
            .print-header { display: block !important; }
            .print-report-section { display: block !important; margin: 0; padding: 20px; }
            .print-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
            .print-table th, .print-table td { border: 1px solid #ddd; padding: 10px; text-align: left; }
            .print-table th { background: #f0f0f0; }
            body { background: white; color: black; padding: 20px; }
            .container { margin: 0; padding: 0; }
            .budget-summary { border: 2px solid #333; padding: 20px; margin-bottom: 30px; border-radius: 10px; }
        }