/* FleetSync Pro - Logistics Demo Styles */
:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-sidebar: #1e293b;
    --bg-sidebar-hover: #334155;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #f8fafc;
    --border-color: #e2e8f0;
    --accent-primary: #3b82f6;
    --accent-blue: #3b82f6;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-purple: #8b5cf6;
    --accent-orange: #f97316;
    --accent-teal: #14b8a6;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --sidebar-width: 260px;
    --topbar-height: 64px;
    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}
[data-theme="dark"] {
    --bg-primary: #18181b;
    --bg-secondary: #27272a;
    --bg-tertiary: #3f3f46;
    --bg-sidebar: #09090b;
    --bg-sidebar-hover: #18181b;
    --text-primary: #fafafa;
    --text-secondary: #d4d4d8;
    --text-muted: #71717a;
    --text-inverse: #18181b;
    --border-color: #3f3f46;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; overflow-x: hidden; }
.app-container { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: var(--bg-sidebar); display: flex; flex-direction: column; z-index: 100; transition: transform 0.3s; }
.sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-teal)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-icon svg { width: 22px; height: 22px; color: white; stroke: white; fill: none; stroke-width: 2; }
.logo-text { display: flex; flex-direction: column; }
.logo-name { font-size: 18px; font-weight: 700; color: var(--text-inverse); }
.logo-tag { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.nav-section { margin-bottom: 24px; }
.nav-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 12px; margin-bottom: 8px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-md); transition: all 0.2s; margin-bottom: 4px; cursor: pointer; }
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.nav-item span { font-size: 14px; font-weight: 500; }
.nav-item:hover { background: var(--bg-sidebar-hover); color: var(--text-inverse); }
.nav-item.active { background: var(--accent-blue); color: white; }
.sidebar-footer { padding: 16px 12px; border-top: 1px solid rgba(255,255,255,0.1); }
.back-btn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-md); transition: all 0.2s; }
.back-btn svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.back-btn span { font-size: 14px; }
.back-btn:hover { background: var(--bg-sidebar-hover); color: var(--text-inverse); }

/* Main Content */
.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-height); background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 24px; gap: 20px; position: sticky; top: 0; z-index: 50; }
.menu-toggle { display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-md); color: var(--text-secondary); align-items: center; justify-content: center; }
.menu-toggle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }
.search-bar { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); max-width: 480px; }
.search-bar svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 2; flex-shrink: 0; }
.search-bar input { flex: 1; border: none; background: transparent; font-size: 14px; color: var(--text-primary); outline: none; }
.topbar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.icon-btn { width: 40px; height: 40px; border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.2s; }
.icon-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.icon-sun { display: block; } .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: block; }
.alert-indicator { position: relative; }
.alert-badge { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; background: var(--accent-red); color: white; font-size: 11px; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.user-menu { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-teal)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 600; }

/* Pages */
.page { display: none; flex: 1; padding: 24px; overflow-x: hidden; }
.page.active { display: block; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-title h1 { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.page-title p { font-size: 14px; color: var(--text-secondary); }
.demo-badge { display: inline-flex; padding: 6px 12px; background: rgba(59,130,246,0.1); color: var(--accent-blue); font-size: 12px; font-weight: 600; border-radius: 50px; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--accent-blue); color: white; font-size: 14px; font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
.btn-primary svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-primary:hover { background: #2563eb; }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
.btn-secondary:hover { background: var(--bg-secondary); border-color: var(--accent-blue); }

/* Dashboard */
.dashboard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; display: flex; align-items: center; gap: 16px; }
.stat-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }
.stat-icon.green { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.stat-icon.blue { background: rgba(59,130,246,0.1); color: var(--accent-blue); }
.stat-icon.purple { background: rgba(139,92,246,0.1); color: var(--accent-purple); }
.stat-icon.orange { background: rgba(245,158,11,0.1); color: var(--accent-orange); }
.stat-content { flex: 1; min-width: 0; }
.stat-value { display: block; font-size: 28px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); line-height: 1.2; }
.stat-label { font-size: 13px; color: var(--text-secondary); }
.stat-change { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 50px; }
.stat-change.up { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.stat-change.down { background: rgba(239,68,68,0.1); color: var(--accent-red); }

.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.section-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header h2 { font-size: 16px; font-weight: 600; }

/* Map */
.map-section { grid-column: 1 / 2; grid-row: 1 / 3; }
.map-legend { display: flex; gap: 16px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.green { background: var(--accent-green); }
.legend-dot.yellow { background: var(--accent-orange); }
.legend-dot.red { background: var(--accent-red); }
.map-container { height: 400px; background: var(--bg-tertiary); border-radius: var(--radius-md); overflow: hidden; position: relative; }
.map-placeholder { width: 100%; height: 100%; position: relative; }
.map-grid { position: absolute; inset: 0; background-image: 
    linear-gradient(var(--border-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
    background-size: 40px 40px; opacity: 0.5; }
.vehicle-markers { position: absolute; inset: 0; }
.vehicle-marker { position: absolute; width: 32px; height: 32px; background: var(--accent-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: var(--shadow-md); animation: pulse 2s infinite; }
.vehicle-marker:hover { transform: scale(1.2); }
.vehicle-marker.delayed { background: var(--accent-orange); }
.vehicle-marker.issue { background: var(--accent-red); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 50% { box-shadow: 0 0 0 10px rgba(59,130,246,0); } }

/* Activity */
.activity-list { display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow-y: auto; }
.activity-item { display: flex; gap: 12px; padding: 12px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.activity-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.activity-icon.delivered { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.activity-icon.pickup { background: rgba(59,130,246,0.1); color: var(--accent-blue); }
.activity-icon.alert { background: rgba(239,68,68,0.1); color: var(--accent-red); }
.activity-content { flex: 1; min-width: 0; }
.activity-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.activity-time { font-size: 12px; color: var(--text-muted); }

/* Performance Chart */
.performance-chart { padding: 20px 0; }
.perf-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 160px; gap: 8px; }
.perf-bar-group { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.perf-label { font-size: 12px; color: var(--text-muted); order: 3; }
.perf-bar { width: 100%; max-width: 40px; height: var(--height); background: linear-gradient(to top, var(--accent-blue), var(--accent-teal)); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: height 0.5s ease; }
.perf-value { font-size: 11px; font-weight: 600; color: var(--text-primary); }

/* Alerts */
.alerts-section { grid-column: 2; }
.alert-count { padding: 4px 10px; background: var(--accent-red); color: white; font-size: 12px; font-weight: 600; border-radius: 50px; }
.alerts-list { display: flex; flex-direction: column; gap: 12px; }
.alert-item { display: flex; gap: 12px; padding: 12px; background: var(--bg-tertiary); border-radius: var(--radius-md); border-left: 3px solid var(--accent-red); }
.alert-item.warning { border-left-color: var(--accent-orange); }
.alert-info { flex: 1; }
.alert-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.alert-desc { font-size: 12px; color: var(--text-muted); }

/* Tracking */
.tracking-search { margin-bottom: 24px; }
.track-input-wrap { display: flex; gap: 12px; padding: 8px 8px 8px 20px; background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: var(--radius-lg); align-items: center; max-width: 600px; }
.track-input-wrap svg { width: 20px; height: 20px; stroke: var(--text-muted); fill: none; stroke-width: 2; flex-shrink: 0; }
.track-input-wrap input { flex: 1; border: none; background: transparent; font-size: 16px; color: var(--text-primary); outline: none; }
.btn-track { padding: 12px 24px; background: var(--accent-blue); color: white; border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-track:hover { background: #2563eb; }

.shipment-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.shipment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.shipment-id .label { font-size: 12px; color: var(--text-muted); display: block; }
.shipment-id .value { font-size: 20px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.shipment-status { padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 600; }
.shipment-status.in-transit { background: rgba(59,130,246,0.1); color: var(--accent-blue); }
.shipment-status.delivered { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.shipment-status.pending { background: rgba(245,158,11,0.1); color: var(--accent-orange); }
.shipment-status.delayed { background: rgba(239,68,68,0.1); color: var(--accent-red); }

.shipment-route { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; padding: 20px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.route-point { text-align: center; flex-shrink: 0; }
.route-point .point-label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.route-point .point-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.route-line { flex: 1; height: 4px; background: var(--border-color); border-radius: 2px; position: relative; min-width: 100px; }
.route-progress { height: 100%; background: linear-gradient(90deg, var(--accent-green), var(--accent-blue)); border-radius: 2px; width: 65%; transition: width 0.5s; }
.truck-icon { position: absolute; top: 50%; transform: translateY(-50%); left: 65%; margin-left: -14px; width: 28px; height: 28px; background: var(--accent-blue); border-radius: 50%; padding: 6px; stroke: white; fill: none; stroke-width: 1.5; }

.shipment-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.detail-item { padding: 12px; background: var(--bg-tertiary); border-radius: var(--radius-md); text-align: center; }
.detail-label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.detail-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.tracking-timeline { padding-top: 20px; border-top: 1px solid var(--border-color); }
.timeline-item { display: flex; gap: 16px; padding-bottom: 20px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border-color); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.timeline-dot.completed { background: var(--accent-green); color: white; }
.timeline-dot.current { background: var(--accent-blue); color: white; animation: pulse 2s infinite; }
.timeline-dot.pending { background: var(--bg-tertiary); border: 2px solid var(--border-color); }
.timeline-dot svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; }
.timeline-content { flex: 1; }
.timeline-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.timeline-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.timeline-time { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }

/* Shipments Table */
.shipments-table-wrap { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.table-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.table-header h3 { font-size: 16px; font-weight: 600; }
.table-filters select { padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 13px; color: var(--text-primary); cursor: pointer; }
.shipments-table { width: 100%; border-collapse: collapse; }
.shipments-table th, .shipments-table td { padding: 14px 20px; text-align: left; }
.shipments-table th { background: var(--bg-tertiary); font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.shipments-table td { font-size: 14px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.shipments-table tr:last-child td { border-bottom: none; }
.shipments-table tr:hover td { background: var(--bg-tertiary); }

/* Fleet */
.fleet-stats { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.fleet-stat { padding: 20px 32px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); text-align: center; }
.fs-value { display: block; font-size: 32px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.fs-label { font-size: 13px; color: var(--text-muted); }
.fleet-stat.active { border-color: var(--accent-green); }
.fleet-stat.active .fs-value { color: var(--accent-green); }
.fleet-stat.maintenance { border-color: var(--accent-orange); }
.fleet-stat.maintenance .fs-value { color: var(--accent-orange); }
.fleet-stat.idle { border-color: var(--text-muted); }

.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.vehicle-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; transition: all 0.2s; }
.vehicle-card:hover { border-color: var(--accent-blue); box-shadow: var(--shadow-md); }
.vehicle-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.vehicle-id { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.vehicle-status { padding: 4px 10px; border-radius: 50px; font-size: 12px; font-weight: 600; }
.vehicle-status.active { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.vehicle-status.maintenance { background: rgba(245,158,11,0.1); color: var(--accent-orange); }
.vehicle-status.idle { background: var(--bg-tertiary); color: var(--text-muted); }
.vehicle-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.vi-item { display: flex; flex-direction: column; }
.vi-label { font-size: 11px; color: var(--text-muted); }
.vi-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.vehicle-progress { height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
.vehicle-progress-bar { height: 100%; background: var(--accent-blue); border-radius: 3px; }

/* Route Optimizer */
.route-optimizer { display: grid; grid-template-columns: 400px 1fr; gap: 24px; }
.optimizer-form { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; }
.optimizer-form h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input, .form-group select { width: 100%; padding: 10px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 14px; color: var(--text-primary); outline: none; }
.form-group input:focus { border-color: var(--accent-blue); }
.stops-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.stop-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.stop-num { width: 24px; height: 24px; background: var(--accent-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.stop-item input { flex: 1; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); outline: none; }
.remove-stop { width: 24px; height: 24px; background: transparent; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s; }
.remove-stop:hover { background: var(--accent-red); color: white; }
.btn-add-stop { width: 100%; padding: 10px; background: transparent; border: 2px dashed var(--border-color); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; margin-bottom: 16px; transition: all 0.2s; }
.btn-add-stop:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.btn-optimize { width: 100%; margin-top: 8px; }

.optimizer-result { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; min-height: 400px; display: flex; flex-direction: column; }
.result-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); text-align: center; gap: 16px; }
.result-placeholder svg { opacity: 0.5; }
.optimized-route { flex: 1; }
.route-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
.rs-item { text-align: center; }
.rs-value { font-size: 24px; font-weight: 700; color: var(--accent-blue); font-family: var(--font-mono); }
.rs-label { font-size: 12px; color: var(--text-muted); }
.optimized-stops { display: flex; flex-direction: column; gap: 12px; }
.opt-stop { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.opt-num { width: 28px; height: 28px; background: var(--accent-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.opt-stop.start .opt-num { background: var(--accent-green); }
.opt-stop.end .opt-num { background: var(--accent-purple); }
.opt-info { flex: 1; }
.opt-location { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.opt-time { font-size: 12px; color: var(--text-muted); }

/* Inventory */
.inventory-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.inv-stat { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
.inv-value { display: block; font-size: 28px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.inv-label { font-size: 13px; color: var(--text-muted); }
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.inv-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; }
.inv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.inv-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.inv-sku { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.inv-stock { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.inv-qty { font-size: 24px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.inv-status { padding: 4px 10px; border-radius: 50px; font-size: 11px; font-weight: 600; }
.inv-status.in-stock { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.inv-status.low-stock { background: rgba(245,158,11,0.1); color: var(--accent-orange); }
.inv-status.out-of-stock { background: rgba(239,68,68,0.1); color: var(--accent-red); }
.inv-bar { height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
.inv-bar-fill { height: 100%; border-radius: 3px; }
.inv-bar-fill.green { background: var(--accent-green); }
.inv-bar-fill.yellow { background: var(--accent-orange); }
.inv-bar-fill.red { background: var(--accent-red); }

/* Calculator */
.calculator-container { display: grid; grid-template-columns: 400px 1fr; gap: 24px; margin-bottom: 32px; }
.calc-form-section { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; }
.calc-form-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.form-group.full { grid-column: 1 / -1; }
.calc-results { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.shipping-options { display: flex; flex-direction: column; gap: 16px; }
.shipping-option { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-tertiary); border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
.shipping-option:hover { border-color: var(--accent-blue); }
.shipping-option.recommended { border-color: var(--accent-green); }
.so-icon { width: 48px; height: 48px; background: var(--bg-secondary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.so-icon svg { width: 24px; height: 24px; stroke: var(--accent-blue); fill: none; stroke-width: 2; }
.so-info { flex: 1; }
.so-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.so-time { font-size: 12px; color: var(--text-muted); }
.so-price { font-size: 20px; font-weight: 700; color: var(--accent-blue); font-family: var(--font-mono); }
.so-tag { padding: 4px 8px; background: var(--accent-green); color: white; font-size: 10px; font-weight: 600; border-radius: 50px; }

.distance-calculator, .fuel-calculator { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.distance-calculator h3, .fuel-calculator h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.distance-form, .fuel-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.distance-form .form-group, .fuel-form .form-group { margin-bottom: 0; flex: 1; min-width: 150px; }
.distance-result, .fuel-result { margin-top: 16px; padding: 16px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.dist-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.dist-stat { text-align: center; }
.dist-value { font-size: 24px; font-weight: 700; color: var(--accent-blue); font-family: var(--font-mono); }
.dist-label { font-size: 12px; color: var(--text-muted); }

/* Analytics */
.analytics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.analytics-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; }
.analytics-card.full { grid-column: 1 / -1; }
.analytics-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.chart-area { height: 200px; position: relative; }
.line-chart { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; padding-bottom: 20px; }
.chart-line { flex: 1; display: flex; align-items: flex-end; gap: 2px; }
.chart-bar { flex: 1; background: linear-gradient(to top, var(--accent-blue), var(--accent-teal)); border-radius: 2px 2px 0 0; min-height: 10px; }
.donut-chart { width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(var(--accent-green) 0% 94.2%, var(--accent-orange) 94.2% 98.5%, var(--accent-red) 98.5% 100%); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.donut-center { width: 100px; height: 100px; background: var(--bg-secondary); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-value { font-size: 24px; font-weight: 700; color: var(--accent-green); }
.donut-label { font-size: 11px; color: var(--text-muted); }
.chart-legend { display: flex; flex-direction: column; gap: 8px; }
.chart-legend .legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.chart-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.chart-legend .dot.green { background: var(--accent-green); }
.chart-legend .dot.yellow { background: var(--accent-orange); }
.chart-legend .dot.red { background: var(--accent-red); }

.routes-list { display: flex; flex-direction: column; gap: 12px; }
.route-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.route-rank { width: 28px; height: 28px; background: var(--accent-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.route-info { flex: 1; }
.route-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.route-count { font-size: 12px; color: var(--text-muted); }
.route-percent { font-size: 14px; font-weight: 600; color: var(--accent-green); }

.utilization-bars { display: flex; flex-direction: column; gap: 16px; }
.util-item { display: flex; flex-direction: column; gap: 6px; }
.util-header { display: flex; justify-content: space-between; font-size: 13px; }
.util-name { color: var(--text-primary); font-weight: 500; }
.util-pct { color: var(--text-muted); }
.util-bar { height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
.util-fill { height: 100%; border-radius: 4px; background: var(--accent-blue); }

.cost-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cost-item { padding: 16px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.cost-label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.cost-value { font-size: 20px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.cost-change { font-size: 12px; font-weight: 600; margin-left: 8px; }
.cost-change.up { color: var(--accent-red); }
.cost-change.down { color: var(--accent-green); }

.date-range select { padding: 8px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 14px; color: var(--text-primary); cursor: pointer; }

/* Toast */
.toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 1000; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: toastIn 0.3s ease; max-width: 360px; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast.success { border-left: 4px solid var(--accent-green); }
.toast.error { border-left: 4px solid var(--accent-red); }
.toast.warning { border-left: 4px solid var(--accent-orange); }
.toast-message { flex: 1; font-size: 14px; color: var(--text-primary); }

/* Responsive */
@media (max-width: 1200px) { .dashboard-stats { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } .route-optimizer { grid-template-columns: 1fr; } .analytics-grid { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; } .menu-toggle { display: flex; }
    .calculator-container { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .page { padding: 16px; } .topbar { padding: 0 16px; }
    .search-bar { display: none; } .dashboard-stats { grid-template-columns: 1fr; }
    .shipment-details { grid-template-columns: 1fr 1fr; }
    .inventory-stats { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .fleet-stats { flex-direction: column; }
}
@media (max-width: 480px) { .shipment-route { flex-direction: column; } .fleet-grid { grid-template-columns: 1fr; } }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; }
.sidebar-overlay.show { display: block; }