:root{--primary-color: #0d47a1;--secondary-color: #1976d2;--accent-color: #42a5f5;--bg-color: #f4f7fc;--surface-color: #ffffff;--text-primary: #212121;--text-secondary: #757575;--border-color: #e0e0e0;--success-color: #2e7d32;--warning-color: #ed6c02;--error-color: #d32f2f;--info-color: #0288d1;--purple-color: #6a1b9a;--green-esg-color: #00695c;--shadow: 0 4px 6px rgba(0, 0, 0, .1);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,sans-serif;background-color:var(--bg-color);color:var(--text-primary);line-height:1.6}#root{width:100%;height:100vh}.login-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--primary-color) 0%,var(--accent-color) 100%)}.login-card{width:100%;max-width:400px;padding:2.5rem;background-color:var(--surface-color);border-radius:12px;box-shadow:var(--shadow-lg);text-align:center}.login-header{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-bottom:1.5rem}.login-header h1{font-size:1.75rem;color:var(--primary-color)}.login-role-selector{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem;border:1px solid var(--border-color);border-radius:20px;padding:4px}.role-btn{flex:1;padding:.5rem 1rem;border:none;background-color:transparent;border-radius:20px;cursor:pointer;font-size:.875rem;transition:all .2s ease}.role-btn.active{background-color:var(--primary-color);color:#fff;box-shadow:var(--shadow-sm)}.login-form .form-group{text-align:left}.forgot-password{display:block;text-align:right;font-size:.875rem;color:var(--secondary-color);text-decoration:none;margin-top:-1rem;margin-bottom:1.5rem}.forgot-password:hover{text-decoration:underline}.app-container{display:flex;width:100%;height:100vh;background-color:var(--bg-color)}.sidebar{width:260px;background-color:var(--primary-color);color:#fff;display:flex;flex-direction:column;padding:1.5rem 0;transition:width .3s ease;flex-shrink:0;box-shadow:5px 0 15px #0000001a;z-index:100}.sidebar-header{display:flex;align-items:center;gap:1rem;padding:0 1.5rem 1.5rem;font-size:1.5rem;font-weight:600}.sidebar-header svg{width:32px;height:32px}.nav-menu{list-style-type:none;flex-grow:1;margin-top:0;overflow-y:auto}.nav-header{padding:1.5rem 1.5rem .5rem;font-size:.75rem;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:.5px}.nav-item{display:flex;align-items:center;gap:1rem;padding:.9rem 1.5rem;cursor:pointer;transition:background-color .2s;border-left:4px solid transparent;font-size:.95rem}.nav-item:hover{background-color:var(--secondary-color)}.nav-item.active{background-color:var(--secondary-color);border-left-color:var(--accent-color);font-weight:500}.nav-item svg{width:24px;height:24px}.sidebar-footer{padding:1.5rem}.main-content{flex-grow:1;padding:2rem;overflow-y:auto}header{margin-bottom:2rem}header h1{font-size:2rem;font-weight:600;margin-bottom:.25rem}header p{color:var(--text-secondary);font-size:1rem}.content-card{background-color:var(--surface-color);border-radius:8px;padding:1.5rem;box-shadow:var(--shadow-sm);margin-bottom:2rem}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.card-header h2{margin-bottom:0}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:2rem}.stat-card{display:flex;align-items:center;background-color:var(--surface-color);padding:1.5rem;border-radius:8px;box-shadow:var(--shadow-sm);gap:1.5rem}.stat-card-icon{min-width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.stat-card-icon svg{width:24px;height:24px}.stat-card-info h3{font-size:1.75rem;font-weight:600;line-height:1.2}.stat-card-info p{font-size:.875rem;color:var(--text-secondary)}.icon-total{background-color:var(--primary-color)}.icon-beroperasi{background-color:var(--success-color)}.icon-parkir{background-color:var(--warning-color)}.icon-servis{background-color:var(--error-color)}.icon-utilisasi{background-color:var(--info-color)}.dashboard-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}.leaflet-container{height:350px;width:100%;border-radius:8px;z-index:1}.vehicle-div-icon{display:flex;justify-content:center;align-items:center;border-radius:50%;width:32px;height:32px;border:2px solid white;box-shadow:var(--shadow)}.vehicle-div-icon svg{width:18px;height:18px;color:#fff}.icon-bg-beroperasi{background-color:var(--success-color)}.icon-bg-parkir{background-color:var(--warning-color)}.icon-bg-perbaikan{background-color:var(--error-color)}.icon-bg-default{background-color:var(--text-secondary)}.alert-item{padding:.75rem;border-left:4px solid var(--info-color);background-color:#f6fafd;margin-bottom:.5rem;list-style-type:none}.alert-item.alert-critical{border-left-color:var(--error-color);background-color:#fef6f6;font-weight:500}.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:1rem;text-align:left;border-bottom:1px solid var(--border-color);vertical-align:middle}th{font-weight:500;font-size:.875rem;color:var(--text-secondary);text-transform:uppercase}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background-color:var(--bg-color)}.clickable-row{cursor:pointer}.status-badge{padding:.25rem .75rem;border-radius:12px;font-size:.8rem;font-weight:500;display:inline-block;white-space:nowrap}.status-beroperasi,.status-valid,.status-lulus,.status-disetujui,.status-sewa-aktif,.status-potensi,.status-diterima{background-color:#e8f5e9;color:var(--success-color)}.status-parkir,.status-segera-habis,.status-perlu-tinjauan,.status-dipesan,.status-pengajuan{background-color:#fff3e0;color:var(--warning-color)}.status-perbaikan,.status-tertunda,.status-gagal,.status-tidak-valid,.status-perlu-sertifikasi,.status-premium-naik,.status-ditolak{background-color:#ffebee;color:var(--error-color)}.status-selesai,.status-berlaku{background-color:#e3f2fd;color:var(--info-color)}.status-dalam-proses,.status-terjadwal,.status-mengisi-daya,.status-investigasi{background-color:#f3e5f5;color:var(--purple-color)}.status-menunggu{background-color:#f1f3f4;color:var(--text-secondary)}.status-prediksi-kritis{background-color:var(--error-color);color:#fff}.status-premium-turun{background-color:var(--success-color);color:#fff}.score-good{color:var(--success-color);font-weight:600}.score-medium{color:var(--warning-color);font-weight:600}.score-bad{color:var(--error-color);font-weight:600}.btn{padding:.6rem 1.25rem;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn:hover{opacity:.9;transform:translateY(-1px)}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-secondary{background-color:var(--surface-color);color:var(--primary-color);border:1px solid var(--border-color)}.btn-full{width:100%}.btn-icon{padding:.5rem;background:transparent;border:none;color:var(--text-secondary)}.btn-icon:hover{color:var(--primary-color);background:var(--bg-color)}.btn-icon svg{width:18px;height:18px}.action-buttons{display:flex;gap:.25rem;align-items:center}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;font-size:.875rem}.form-control{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;font-family:Poppins,sans-serif;transition:border-color .2s}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #0d47a133}.checkbox-wrapper{display:flex;align-items:center;gap:.5rem}textarea.form-control{min-height:100px;resize:vertical}.text-secondary{color:var(--text-secondary);font-size:.875rem}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--surface-color);padding:2rem;border-radius:12px;box-shadow:var(--shadow-lg);width:90%;max-width:500px;max-height:90vh;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.modal-header h2{margin:0}.modal-header .close-btn{padding:0}.modal-body{overflow-y:auto}.driver-app-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#e0e0e0}.driver-app-layout{width:100%;max-width:420px;height:100%;max-height:800px;background-color:var(--bg-color);border-radius:20px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;position:relative}.driver-app-header{background-color:var(--surface-color);padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.driver-app-header h3{font-size:1.1rem}.driver-app-header .btn{padding:.4rem .8rem;font-size:.8rem}.driver-app-content{flex-grow:1;overflow-y:auto;padding:1rem}.driver-app-content .content-card{padding:1rem}.driver-bottom-nav{display:flex;justify-content:space-around;background-color:var(--surface-color);border-top:1px solid var(--border-color);padding:.5rem 0;flex-shrink:0}.driver-nav-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;border:none;background:none;cursor:pointer;color:var(--text-secondary);padding:.5rem;border-radius:8px;width:80px}.driver-nav-btn svg{width:24px;height:24px}.driver-nav-btn span{font-size:.75rem}.driver-nav-btn.active{color:var(--primary-color)}.task-item,.expense-item,.message-item,.dvir-item{background:var(--surface-color);border-radius:8px;padding:1rem;margin-bottom:.75rem;box-shadow:var(--shadow-sm)}.yard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;background-color:#e0e0e0;padding:1rem;border-radius:8px}.yard-zone{background-color:var(--surface-color);border-radius:8px;padding:1rem;border-top:4px solid var(--info-color)}.yard-zone h4{margin-bottom:1rem}.yard-zone-content{min-height:100px;display:flex;flex-wrap:wrap;gap:.5rem}.vehicle-in-yard{background-color:var(--bg-color);padding:.25rem .75rem;border-radius:4px;font-size:.875rem;cursor:grab}.claim-process{display:flex;justify-content:space-between;margin-bottom:1.5rem;position:relative}.claim-process:before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background-color:var(--border-color);transform:translateY(-50%);z-index:1}.step{display:flex;flex-direction:column;align-items:center;z-index:2;background:var(--bg-color);padding:0 .5rem}.step-icon{width:32px;height:32px;border-radius:50%;border:2px solid var(--border-color);background-color:var(--surface-color);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);margin-bottom:.5rem;transition:all .3s ease}.step-label{font-size:.8rem;color:var(--text-secondary)}.step.active .step-icon{border-color:var(--primary-color);background-color:var(--primary-color);color:#fff}.step.active .step-label{color:var(--text-primary);font-weight:500}.step.completed .step-icon{border-color:var(--success-color);background-color:var(--success-color);color:#fff}@media (max-width: 1200px){.dashboard-main-grid{grid-template-columns:1fr}}@media (max-width: 768px){.app-container{flex-direction:column}.sidebar{width:100%;height:auto;flex-direction:row;overflow-x:auto;padding:.5rem}.sidebar-header,.nav-header{display:none}.nav-menu{display:flex;flex-direction:row;margin-top:0}.nav-item{flex-direction:column;gap:.25rem;padding:.75rem;border-left:none;border-bottom:4px solid transparent}.nav-item span{font-size:.75rem}.main-content{padding:1rem}.report-form{flex-direction:column;align-items:stretch}}