*{margin:0;padding:0;box-sizing:border-box}:root{--sidebar-width: 280px;--sidebar-collapsed: 80px;--primary-color: #6366f1;--primary-dark: #4f46e5;--secondary-color: #64748b;--success-color: #10b981;--warning-color: #f59e0b;--danger-color: #ef4444;--bg-color: #f8fafc;--surface-color: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--border-color: #e2e8f0;--shadow: 0 1px 3px rgba(0,0,0,.1);--shadow-lg: 0 10px 25px rgba(0,0,0,.1);--radius: 12px;--radius-sm: 8px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:var(--text-primary);line-height:1.6}.app{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:linear-gradient(180deg,var(--surface-color) 0%,#f8fafc 100%);border-right:1px solid var(--border-color);transition:all .3s cubic-bezier(.4,0,.2,1);height:100vh;position:fixed;left:0;top:0;overflow-y:auto;z-index:1000}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-header{padding:1.5rem;border-bottom:1px solid var(--border-color);height:80px;display:flex;align-items:center;background:var(--surface-color)}.logo{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.25rem;color:var(--primary-color);transition:opacity .3s}.sidebar.collapsed .logo span{opacity:0;width:0}.sidebar-nav ul{list-style:none;padding:1rem .5rem}.nav-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border:none;background:none;cursor:pointer;transition:all .2s ease;color:var(--text-secondary);font-size:.9rem;font-weight:500;border-radius:var(--radius-sm);margin:.25rem 0;position:relative;overflow:hidden}.nav-item:before{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(99,102,241,.1),transparent);transition:left .6s}.nav-item:hover:before{left:100%}.nav-item:hover{background:#6366f10d;color:var(--primary-color);transform:translate(4px)}.nav-item.active{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;box-shadow:var(--shadow)}.nav-icon{display:flex;align-items:center;min-width:20px}.header{background:var(--surface-color);border-bottom:1px solid var(--border-color);padding:0 2rem;height:80px;display:flex;align-items:center;justify-content:space-between;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.header-left{display:flex;align-items:center;gap:1rem}.menu-toggle{background:none;border:none;cursor:pointer;padding:.75rem;border-radius:var(--radius-sm);transition:all .2s;color:var(--text-secondary)}.menu-toggle:hover{background:var(--bg-color);color:var(--primary-color);transform:scale(1.05)}.page-title{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-right{display:flex;align-items:center;gap:1.5rem}.search-bar{position:relative;display:flex;align-items:center}.search-bar input{padding:.75rem 1rem .75rem 2.5rem;border:1px solid var(--border-color);border-radius:var(--radius);font-size:.9rem;background:var(--bg-color);transition:all .2s;width:300px}.search-bar input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.search-bar svg{position:absolute;left:1rem;color:var(--text-secondary)}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:.75rem;border-radius:var(--radius-sm);transition:all .2s;color:var(--text-secondary)}.notification-btn:hover{background:var(--bg-color);color:var(--primary-color)}.notification-badge{position:absolute;top:.5rem;right:.5rem;background:var(--danger-color);color:#fff;border-radius:50%;width:1.25rem;height:1.25rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;font-weight:600}.user-profile{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--radius);background:var(--bg-color);font-weight:500}.main-content{flex:1;margin-left:var(--sidebar-width);transition:margin-left .3s cubic-bezier(.4,0,.2,1);min-height:100vh;display:flex;flex-direction:column}.main-content.collapsed{margin-left:var(--sidebar-collapsed)}.content-wrapper{padding:2rem;flex:1}.dashboard-page{padding:0}.alert-banner{background:linear-gradient(135deg,#fef3c7,#fed7aa);border:1px solid #fdba74;border-radius:var(--radius);padding:1rem 1.5rem;margin-bottom:2rem;display:flex;align-items:center;gap:1rem}.alert-banner.critical{background:linear-gradient(135deg,#fee2e2,#fecaca);border-color:#fca5a5}.alert-count{background:var(--danger-color);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-bottom:2rem}.stat-card{background:var(--surface-color);padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border-color);transition:all .3s ease;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--primary-color),var(--primary-dark))}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-card h3{font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem;font-weight:500}.stat-number{font-size:2rem;font-weight:700;color:var(--text-primary)}.dashboard-layout{display:grid;grid-template-columns:2fr 1fr;gap:2rem;margin-top:1rem}.map-section{grid-column:1 / -1}.section-card{background:var(--surface-color);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border-color);overflow:hidden}.section-header{padding:1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.section-header h2{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.vehicle-list{padding:1rem}.vehicle-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--border-color);transition:background-color .2s}.vehicle-item:last-child{border-bottom:none}.vehicle-item:hover{background:var(--bg-color)}.vehicle-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff}.vehicle-icon.camion{background:linear-gradient(135deg,#6366f1,#4f46e5)}.vehicle-icon.voiture{background:linear-gradient(135deg,#10b981,#059669)}.vehicle-icon.utilitaire{background:linear-gradient(135deg,#f59e0b,#d97706)}.vehicle-name{font-weight:600;color:var(--text-primary)}.vehicle-details{font-size:.8rem;color:var(--text-secondary)}.vehicle-status{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.status-badge{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600}.status-badge.moving{background:#d1fae5;color:#065f46}.status-badge.stopped{background:#e0e7ff;color:#3730a3}.status-badge.inactive{background:#f3f4f6;color:#6b7280}.fuel-level{width:80px;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.fuel-level-fill{height:100%;border-radius:3px;transition:width .3s ease}.fuel-level-fill.high{background:#10b981}.fuel-level-fill.medium{background:#f59e0b}.fuel-level-fill.low{background:#ef4444}.map-placeholder{height:400px;background:linear-gradient(135deg,#e0e7ff,#c7d2fe);display:flex;align-items:center;justify-content:center;color:var(--primary-dark);font-weight:600;font-size:1.1rem}.loading-spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-left:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:2rem auto}@media(max-width:1024px){.dashboard-layout{grid-template-columns:1fr}}@media(max-width:768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.header-right{display:none}.content-wrapper{padding:1rem}.stats-grid{grid-template-columns:1fr}.search-bar input{width:200px}}.alerts-panel{background:linear-gradient(135deg,#fef3c7,#fed7aa);border:1px solid #fdba74;border-radius:var(--radius-lg);margin-bottom:var(--space-lg);overflow:hidden}.alerts-panel.critical{background:linear-gradient(135deg,#fee2e2,#fecaca);border-color:#fca5a5}.alerts-header{padding:var(--space-md);border-bottom:1px solid rgba(0,0,0,.1)}.alerts-title{display:flex;align-items:center;gap:var(--space-sm);font-weight:600;color:#92400e}.alerts-count{background:#ef4444;color:#fff;padding:2px 8px;border-radius:12px;font-size:.8rem;font-weight:600}.alerts-list{padding:var(--space-sm)}.alert-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:#ffffffb3;border-radius:var(--radius-md);margin-bottom:var(--space-sm);transition:all .2s ease}.alert-item:last-child{margin-bottom:0}.alert-item:hover{transform:translate(4px);box-shadow:var(--shadow-md)}.alert-item.critical{border-left:4px solid #ef4444}.alert-item.warning{border-left:4px solid #f59e0b}.alert-item.info{border-left:4px solid #3b82f6}.alert-icon{font-size:1.2rem;flex-shrink:0}.alert-content{flex:1}.alert-message{font-weight:500;color:var(--text-primary);margin-bottom:4px}.alert-details{display:flex;gap:var(--space-md);font-size:.8rem;color:var(--text-secondary)}.alert-actions{display:flex;gap:4px}.alert-action-btn{background:none;border:none;padding:6px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;color:var(--text-secondary)}.alert-action-btn:hover{background:#0000001a}.alert-action-btn.resolve:hover{color:#10b981}.alert-action-btn.dismiss:hover{color:#ef4444}.advanced-filters{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin-bottom:var(--space-lg);border:1px solid var(--border-light)}.filters-header{padding:var(--space-lg)}.filters-main{display:flex;gap:var(--space-lg);align-items:center}.search-box{position:relative;flex:1}.search-box input{width:100%;padding:12px 16px 12px 40px;border:1px solid var(--border-light);border-radius:var(--radius-md);font-size:.9rem;background:var(--bg-surface);transition:all .2s}.search-box input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.search-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.quick-filters{display:flex;gap:var(--space-sm);align-items:center}.filter-select{padding:10px 12px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);font-size:.9rem;cursor:pointer}.filter-toggle{display:flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:all .2s;position:relative}.filter-toggle:hover{border-color:var(--primary-color);color:var(--primary-color)}.filter-toggle.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.active-dot{position:absolute;top:-4px;right:-4px;width:8px;height:8px;background:var(--danger-color);border-radius:50%}.export-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--success-gradient);color:#fff;cursor:pointer;transition:all .2s}.active-filters{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap}.filter-tag{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--primary-gradient);color:#fff;border-radius:var(--radius-sm);font-size:.8rem}.filter-tag button{background:none;border:none;color:#fff;cursor:pointer;padding:2px;border-radius:2px}.filter-tag button:hover{background:#fff3}.clear-all{background:none;border:none;color:var(--danger-color);cursor:pointer;font-size:.8rem;margin-left:auto}.filters-expanded{padding:var(--space-lg);border-top:1px solid var(--border-light);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg)}.filter-group label{display:block;margin-bottom:var(--space-sm);font-weight:600;color:var(--text-primary)}.date-inputs,.range-inputs{display:flex;align-items:center;gap:var(--space-sm)}.date-input,.range-input{padding:8px 12px;border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:.9rem}.filter-chips{display:flex;flex-wrap:wrap;gap:8px}.filter-chip{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all .2s;font-size:.8rem}.filter-chip.active{background:var(--primary-gradient);color:#fff;border-color:var(--primary-color)}.fuel-filters{display:flex;flex-direction:column;gap:8px}.fuel-option{display:flex;align-items:center;gap:8px;cursor:pointer}.fuel-indicator{width:12px;height:12px;border-radius:2px}.fuel-indicator.low{background:var(--danger-color)}.fuel-indicator.medium{background:var(--warning-color)}.fuel-indicator.high{background:var(--success-color)}.vehicle-tracker{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin-bottom:var(--space-lg);border:1px solid var(--border-light)}.tracker-header{padding:var(--space-lg);border-bottom:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center}.tracker-controls{display:flex;gap:var(--space-sm);align-items:center}.time-select{padding:8px 12px;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-surface)}.control-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:all .2s}.control-btn:hover,.control-btn.active{background:var(--primary-color);color:#fff}.tracker-content{display:grid;grid-template-columns:300px 1fr;min-height:400px}.vehicles-list{padding:var(--space-lg);border-right:1px solid var(--border-light);background:#f8fafc}.vehicles-list h4{margin-bottom:var(--space-md);color:var(--text-primary)}.vehicle-option{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;margin-bottom:8px}.vehicle-option:hover{background:#fff;box-shadow:var(--shadow-sm)}.vehicle-option.selected{background:var(--primary-color);color:#fff}.vehicle-avatar{font-size:1.5rem}.vehicle-info{flex:1}.vehicle-name{display:block;font-weight:600}.vehicle-plate{font-size:.8rem;opacity:.8}.vehicle-stats{display:flex;flex-direction:column;gap:2px;font-size:.7rem}.tracker-map{padding:var(--space-lg)}.selected-vehicle-info{text-align:center}.route-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin:var(--space-lg) 0}.stat-card{background:#f8fafc;padding:var(--space-md);border-radius:var(--radius-md)}.route-visualization{position:relative;height:100px;background:#f1f5f9;border-radius:var(--radius-md);margin-top:var(--space-lg)}.route-line{position:absolute;top:50%;left:20px;right:20px;height:3px;background:var(--primary-color);transform:translateY(-50%)}.route-points{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 10px}.point{padding:4px 8px;background:var(--primary-color);color:#fff;border-radius:var(--radius-sm);font-size:.8rem}.no-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-secondary)}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-lg)}.header-title h1{font-size:2rem;font-weight:700;background:var(--primary-gradient);-webkit-text-fill-color:transparent;margin-bottom:4px}.header-title p{color:var(--text-secondary);margin:0}.last-update{font-size:.9rem;color:var(--text-secondary)}.filter-summary{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm);background:#f8fafc;border-radius:var(--radius-sm)}.alert-banner{background:linear-gradient(135deg,#fef3c7,#fed7aa)!important;border:1px solid #fdba74!important}.modern-table{width:100%;border-collapse:collapse;font-size:.9rem}.modern-table th{background:#f8fafc;padding:12px 16px;text-align:left;font-weight:600;color:#64748b;border-bottom:2px solid #e2e8f0}.modern-table td{padding:16px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.modern-table tr:hover{background:#f8fafc}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem;margin-bottom:2rem}.view-tabs{display:flex;background:#f1f5f9;border-radius:8px;padding:4px}.tab-btn{padding:8px 16px;border:none;background:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s;display:flex;align-items:center;gap:6px}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}.filter-summary h4{margin:0 0 1rem;color:#374151}.export-btn.small{padding:6px 12px;font-size:.8rem}@media(max-width:768px){.charts-grid{grid-template-columns:1fr}.modern-table{font-size:.8rem}.modern-table th,.modern-table td{padding:8px 12px}.summary-grid{grid-template-columns:1fr}}.real-map{border-radius:12px;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a}.custom-marker-container{background:none!important;border:none!important}.custom-marker{display:flex;align-items:center;gap:8px;background:#fff;padding:8px 12px;border-radius:20px;box-shadow:0 2px 8px #00000026;border:2px solid #e2e8f0;font-size:.8rem;font-weight:500}.custom-marker.moving{border-color:#10b981}.custom-marker.stopped{border-color:#f59e0b}.custom-marker.low-fuel{border-color:#ef4444;animation:pulse 2s infinite}@keyframes pulse{0%{border-color:#ef4444}50%{border-color:#fca5a5}to{border-color:#ef4444}}.marker-icon{font-size:1.2rem}.marker-info{display:flex;flex-direction:column}.vehicle-name{font-weight:600}.vehicle-speed{font-size:.7rem;color:#64748b}.vehicle-popup{min-width:200px}.vehicle-popup h3{margin:0 0 8px;color:#1e293b}.vehicle-popup p{margin:4px 0;font-size:.9rem}.alert-summary{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.alert-total{text-align:right}.total-count{display:block;font-size:2rem;font-weight:700;color:#6366f1}.alert-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}.stat-card{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:8px;background:#f8fafc}.stat-card.critical{border-left:4px solid #ef4444}.stat-card.warning{border-left:4px solid #f59e0b}.stat-card.info{border-left:4px solid #6366f1}.stat-icon{padding:8px;border-radius:6px;background:#fff}.stat-card.critical .stat-icon{color:#ef4444}.stat-card.warning .stat-icon{color:#f59e0b}.stat-card.info .stat-icon{color:#6366f1}.stat-content{display:flex;flex-direction:column}.stat-label{font-size:.8rem;color:#64748b}.stat-value{font-size:1.5rem;font-weight:700}.alert-by-type{margin-bottom:1.5rem}.type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.type-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#f8fafc;border-radius:6px}.type-icon{padding:4px;background:#fff;border-radius:4px}.type-count{margin-left:auto;font-weight:600;color:#6366f1}.recent-alerts .alerts-list{display:flex;flex-direction:column;gap:.5rem}.alert-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#f8fafc;border-radius:6px;border-left:4px solid #e2e8f0}.alert-item.critical{border-left-color:#ef4444}.alert-item.warning{border-left-color:#f59e0b}.alert-item.info{border-left-color:#6366f1}.alert-status{padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:600;margin-left:auto}.alert-status.active{background:#ef4444;color:#fff}.alert-status.resolved{background:#10b981;color:#fff}.fuel-consumption{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.fuel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.fuel-stats{display:flex;gap:1rem}.fuel-stat{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f1f5f9;border-radius:6px;font-size:.9rem}.chart-section,.distribution-section,.fuel-table-section{margin-bottom:2rem}.distribution-content{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center}.distribution-legend{display:flex;flex-direction:column;gap:.5rem}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-color{width:12px;height:12px;border-radius:2px}.legend-value{margin-left:auto;font-weight:600}.fuel-table{width:100%;border-collapse:collapse}.fuel-table th,.fuel-table td{padding:.75rem;text-align:left;border-bottom:1px solid #e2e8f0}.fuel-table th{background:#f8fafc;font-weight:600;color:#64748b}.consumption-value.high{color:#ef4444;font-weight:600}.consumption-value.medium{color:#f59e0b;font-weight:600}.consumption-value.low{color:#10b981;font-weight:600}.fuel-level-display{display:flex;align-items:center;gap:.5rem}.fuel-level-bar{height:6px;background:#10b981;border-radius:3px;min-width:40px}.fuel-level-bar.low{background:#ef4444}.fuel-level-bar.medium{background:#f59e0b}.overview-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}.overview-item.full-width{grid-column:1 / -1}.map-view{position:relative}.vehicle-details-panel{position:absolute;top:1rem;right:1rem;background:#fff;padding:1rem;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a;z-index:1000;min-width:250px}.view-controls{margin-bottom:1.5rem}.view-tabs{display:flex;background:#f1f5f9;border-radius:8px;padding:4px;flex-wrap:wrap}.tab-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:none;background:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s;white-space:nowrap}.tab-btn.active{background:#fff;box-shadow:0 1px 3px #0000001a;font-weight:600}@media(max-width:1024px){.overview-grid,.alert-stats-grid,.type-grid{grid-template-columns:1fr}}@media(max-width:768px){.view-tabs{flex-direction:column}.distribution-content{grid-template-columns:1fr}.fuel-stats{flex-direction:column}}.sidebar-footer{margin-top:auto;padding:1rem;border-top:1px solid var(--border-light)}.user-info{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.75rem;background:var(--bg-color);border-radius:var(--radius-sm)}.user-avatar{width:32px;height:32px;background:var(--primary-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.user-details{display:flex;flex-direction:column}.user-name{font-weight:600;font-size:.9rem}.user-role{font-size:.8rem;color:var(--text-secondary);text-transform:capitalize}.logout-btn{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem;background:none;border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--danger-color);cursor:pointer;transition:all .2s;font-size:.9rem}.logout-btn:hover{background:#fef2f2;border-color:var(--danger-color)}.user-profile{position:relative;display:flex;align-items:center;gap:.5rem;cursor:pointer}.user-profile .user-avatar{width:36px;height:36px;background:var(--primary-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.user-profile .user-avatar.large{width:48px;height:48px}.user-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:250px;z-index:1000;margin-top:.5rem}.dropdown-header{padding:1rem;background:var(--bg-color);border-radius:var(--radius-md) var(--radius-md) 0 0}.dropdown-header .user-info{display:flex;align-items:center;gap:.75rem;margin:0;padding:0;background:none}.dropdown-divider{height:1px;background:var(--border-light);margin:.5rem 0}.dropdown-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:none;border:none;cursor:pointer;font-size:.9rem;color:var(--text-primary);transition:background .2s}.dropdown-item:hover{background:var(--bg-color)}.dropdown-item.logout{color:var(--danger-color)}.dropdown-item.logout:hover{background:#fef2f2}.welcome-banner{background:var(--primary-gradient);color:#fff;padding:1.5rem;border-radius:var(--radius-lg);margin-bottom:2rem}.welcome-banner h2{margin:0 0 .5rem;font-size:1.5rem}.welcome-banner p{margin:0;opacity:.9}.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark))}.loading-content{text-align:center;color:#fff}.loading-logo{margin-bottom:2rem}.logo-spinner{width:80px;height:80px;margin:0 auto 1rem;background:#ffffff1a;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:2rem;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.loading-progress{width:200px;height:4px;background:#fff3;border-radius:2px;margin:0 auto 1rem;overflow:hidden}.progress-bar{height:100%;background:#fff;border-radius:2px;animation:progress 2s infinite}@keyframes progress{0%{transform:translate(-100%)}to{transform:translate(200%)}}@media(max-width:768px){.user-profile .user-name{display:none}.user-dropdown{right:-50px;min-width:200px}.welcome-banner{padding:1rem;margin-bottom:1rem}.welcome-banner h2{font-size:1.25rem}}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.login-hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4rem;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.login-hero:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><circle cx="50" cy="50" r="2" fill="white"/></svg>') repeat;animation:float 20s infinite linear}@keyframes float{0%{transform:translate(0)}to{transform:translate(-50px,-50px)}}.hero-content{max-width:500px;z-index:2;position:relative}.hero-logo{display:flex;align-items:center;gap:1rem;margin-bottom:3rem}.logo-icon{width:80px;height:80px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2)}.hero-logo h1{font-size:2.5rem;font-weight:700;margin:0;background:linear-gradient(135deg,#5a58d8,#6286f3)}.hero-text h2{font-size:2rem;font-weight:600;margin-bottom:1rem;line-height:1.2}.hero-text p{font-size:1.1rem;opacity:.9;line-height:1.6;margin-bottom:3rem}.hero-features{display:flex;flex-direction:column;gap:1.5rem}.feature{display:flex;align-items:center;gap:1rem}.feature-icon{width:50px;height:50px;background:#ffffff1a;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.login-form-section{background:#fff;display:flex;align-items:center;justify-content:center;padding:2rem}.form-container{max-width:400px;width:100%}.form-header{text-align:center;margin-bottom:3rem}.form-header h2{font-size:2rem;font-weight:700;color:#1a1a1a;margin:0 0 .5rem}.form-header p{color:#666;margin:0;font-size:1.1rem}.login-form{display:flex;flex-direction:column;gap:1.5rem}.error-message{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;color:#dc2626;font-size:.9rem}.error-icon{width:24px;height:24px;background:#dc2626;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}.input-group{position:relative;display:flex;align-items:center;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;transition:all .3s ease}.input-group:focus-within{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a}.input-icon{padding:0 1rem;color:#64748b;display:flex;align-items:center}.modern-input{flex:1;padding:1rem 1rem 1rem 0;border:none;background:none;font-size:1rem;color:#1a1a1a;outline:none}.modern-input::placeholder{color:#94a3b8}.modern-input:disabled{opacity:.6;cursor:not-allowed}.password-toggle{padding:0 1rem;background:none;border:none;color:#64748b;cursor:pointer;transition:color .2s}.password-toggle:hover:not(:disabled){color:#3b82f6}.password-toggle:disabled{opacity:.6;cursor:not-allowed}.form-options{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.checkbox-container{display:flex;align-items:center;gap:.75rem;cursor:pointer;color:#64748b}.checkbox-container input{display:none}.checkmark{width:18px;height:18px;border:2px solid #cbd5e1;border-radius:4px;position:relative;transition:all .2s}.checkbox-container input:checked+.checkmark{background:#3b82f6;border-color:#3b82f6}.checkbox-container input:checked+.checkmark:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.forgot-link{color:#3b82f6;text-decoration:none;transition:color .2s}.forgot-link:hover{color:#1d4ed8;text-decoration:underline}.login-button{padding:1rem 2rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.75rem;height:56px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px -5px #3b82f666}.login-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.button-spinner{width:20px;height:20px;border:2px solid transparent;border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.demo-section{display:flex;flex-direction:column;gap:1.5rem}.divider{display:flex;align-items:center;gap:1rem;color:#64748b;font-size:.9rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#e2e8f0}.demo-button{padding:.875rem 1.5rem;background:#f1f5f9;color:#475569;border:2px solid #e2e8f0;border-radius:12px;font-size:.9rem;cursor:pointer;transition:all .2s}.demo-button:hover:not(:disabled){background:#e2e8f0;border-color:#cbd5e1}.demo-button:disabled{opacity:.6;cursor:not-allowed}.form-footer{margin-top:3rem;text-align:center;color:#64748b;font-size:.9rem}.security-info{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem;color:#10b981}.copyright{opacity:.7}@media(max-width:1024px){.login-page{grid-template-columns:1fr}.login-hero{display:none}}@media(max-width:768px){.login-form-section{padding:1rem}.form-container{max-width:100%}.form-options{flex-direction:column;gap:1rem;align-items:flex-start}.hero-text h2{font-size:1.5rem}.hero-text p{font-size:1rem}}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.form-container{animation:slideIn .6s ease-out}.api-error-banner{background:#fef3f2;border:1px solid #fecdca;color:#b42318;padding:1rem;border-radius:var(--radius-md);margin-top:1rem;display:flex;align-items:center;gap:.5rem;font-size:.9rem}.api-warning{color:#b54708;font-weight:600;margin-left:.5rem}.vehicle-groupe{font-size:.8rem;color:var(--text-secondary);margin-top:2px}.status-cell{display:flex;flex-direction:column;gap:4px}.last-update{font-size:.7rem;color:var(--text-secondary)}.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.refresh-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-color);border:1px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;font-size:.9rem;transition:all .2s}.refresh-btn:hover:not(:disabled){background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.refresh-btn:disabled{opacity:.6;cursor:not-allowed}.header-actions{display:flex;align-items:center;gap:1rem}