:root{--color-bg: #0f172a;--color-bg-card: #1e293b;--color-bg-hover: #334155;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-border: #334155;--color-primary: #3b82f6;--color-success: #22c55e;--color-warning: #f59e0b;--color-danger: #ef4444;--color-info: #06b6d4;--color-bg-elevated: #1e293b;--color-bg-overlay: rgba(15, 23, 42, .8);--color-bg-sidebar: #0d1117;--color-bg-sidebar-hover: #161b22;--color-bg-sidebar-active: rgba(59, 130, 246, .15);--color-hover: rgba(255, 255, 255, .05);--color-active: rgba(59, 130, 246, .15);--color-focus-ring: rgba(59, 130, 246, .5);--severity-highest: #dc2626;--severity-high: #f97316;--severity-medium: #eab308;--severity-low: #22c55e;--severity-unknown: #6b7280;--chart-1: #3b82f6;--chart-2: #06b6d4;--chart-3: #8b5cf6;--chart-4: #f59e0b;--chart-5: #ec4899;--chart-6: #10b981;--sidebar-width: 240px;--sidebar-width-collapsed: 64px;--header-height: 56px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease}*{box-sizing:border-box;margin:0;padding:0}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5}body{background-color:var(--color-bg);color:var(--color-text);min-height:100vh;overflow-x:hidden}:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.app-layout{display:flex;min-height:100vh}.app-sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background-color:var(--color-bg-sidebar);border-right:1px solid var(--color-border);display:flex;flex-direction:column;z-index:100;transition:width var(--transition-normal),transform var(--transition-normal)}.app-sidebar.collapsed{width:var(--sidebar-width-collapsed)}.app-main{flex:1;margin-left:var(--sidebar-width);min-width:0;transition:margin-left var(--transition-normal)}.app-sidebar.collapsed+.app-main{margin-left:var(--sidebar-width-collapsed)}@media (max-width: 768px){.app-sidebar{transform:translate(-100%);width:280px}.app-sidebar.open{transform:translate(0)}.app-main{margin-left:0}.sidebar-backdrop{position:fixed;inset:0;background-color:var(--color-bg-overlay);backdrop-filter:blur(4px);z-index:99;opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.sidebar-backdrop.visible{opacity:1;pointer-events:auto}}.sidebar-header{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid var(--color-border);min-height:var(--header-height)}.sidebar-logo{width:32px;height:32px;background:linear-gradient(135deg,var(--color-primary),var(--chart-3));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0}.sidebar-title{font-size:1.125rem;font-weight:600;white-space:nowrap;overflow:hidden}.collapsed .sidebar-title{display:none}.sidebar-toggle{margin-left:auto;padding:.5rem;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:6px;transition:color var(--transition-fast),background-color var(--transition-fast)}.sidebar-toggle:hover{color:var(--color-text);background-color:var(--color-bg-sidebar-hover)}.collapsed .sidebar-toggle{margin:0 auto}.sidebar-nav{flex:1;overflow-y:auto;padding:.75rem 0}.sidebar-section{margin-bottom:.5rem}.sidebar-section-title{padding:.5rem 1rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);white-space:nowrap;overflow:hidden}.collapsed .sidebar-section-title{text-align:center;padding:.5rem}.sidebar-nav-item{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;color:var(--color-text-muted);text-decoration:none;font-size:.875rem;transition:color var(--transition-fast),background-color var(--transition-fast);position:relative;cursor:pointer;border:none;background:transparent;width:100%;text-align:left}.sidebar-nav-item:hover{color:var(--color-text);background-color:var(--color-bg-sidebar-hover)}.sidebar-nav-item.active{color:var(--color-text);background-color:var(--color-bg-sidebar-active)}.sidebar-nav-item.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--color-primary);border-radius:0 2px 2px 0}.sidebar-nav-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.sidebar-nav-label{white-space:nowrap;overflow:hidden}.collapsed .sidebar-nav-label{display:none}.collapsed .sidebar-nav-item{justify-content:center;padding:.75rem}.sidebar-footer{display:flex;flex-direction:column;align-items:center;padding:.75rem 1rem;border-top:1px solid var(--color-border);gap:.5rem}.sidebar-footer-info{display:flex;gap:.5rem;width:100%;font-size:.75rem;color:var(--color-text-muted)}.sidebar-footer-sub{opacity:.7;margin-top:.25rem}.social-link{display:inline-flex;align-items:center;justify-content:center;flex:1;height:32px;color:var(--color-text-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;text-decoration:none;transition:color .15s,border-color .15s,background .15s}.social-link:hover{color:var(--color-text);border-color:var(--color-text-muted);background:var(--color-surface)}.lang-toggle{display:inline-flex;align-items:center;width:100%;gap:.125rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;padding:3px;text-decoration:none;transition:border-color .15s,background .15s}.lang-toggle:hover{border-color:var(--color-text-muted);background:var(--color-surface)}.lang-option{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.25rem .5rem;font-size:.7rem;font-weight:600;color:var(--color-text-muted);border-radius:4px;transition:all .15s}.lang-option.active{background:var(--color-primary);color:#fff;box-shadow:0 1px 3px #00000040}.sidebar-made-by{font-size:.65rem;color:var(--color-text-muted);text-align:center;opacity:.6}.sidebar-made-by a{color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-fast)}.sidebar-made-by a:hover{color:var(--color-text)}.content-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--color-bg);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:50;min-height:var(--header-height);gap:1rem;flex-wrap:wrap}.content-header-left{display:flex;align-items:center;gap:1rem}.mobile-menu-btn{display:none;padding:.5rem;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:6px}.mobile-menu-btn:hover{color:var(--color-text);background-color:var(--color-hover)}@media (max-width: 768px){.mobile-menu-btn{display:flex}}.page-title{font-size:1.25rem;font-weight:600}.content-header-right{display:flex;align-items:center;gap:1rem}.connection-status{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted);padding:.375rem .75rem;background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:9999px}.connection-status .dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-danger);transition:background-color var(--transition-fast)}.connection-status.connected .dot{background-color:var(--color-success);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.dashboard{padding:1.5rem;max-width:1600px;margin:0 auto;width:100%}@media (max-width: 768px){.dashboard{padding:1rem}}.grid{display:grid;gap:1rem;width:100%}.grid.mb{margin-bottom:1.5rem}.grid>*{min-width:0}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width: 1200px){.grid-cols-4,.grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 768px){.grid-cols-4,.grid-cols-3,.grid-cols-2{grid-template-columns:minmax(0,1fr)}.grid{gap:.75rem}}.card{background-color:var(--color-bg-card);border-radius:.75rem;padding:1.25rem;border:1px solid var(--color-border);min-width:0;overflow:hidden;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:box-shadow var(--transition-normal),border-color var(--transition-normal)}.card:hover{border-color:#3b82f64d;box-shadow:0 4px 6px #00000026,0 1px 3px #0000004d}@media (max-width: 768px){.card{padding:1rem}}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.card-title{font-size:.75rem;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.025em}.card-actions{display:flex;gap:.25rem}.card-action-btn{padding:.25rem;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:4px;transition:color var(--transition-fast),background-color var(--transition-fast)}.card-action-btn:hover{color:var(--color-text);background-color:var(--color-hover)}.card-value{font-size:2rem;font-weight:700;line-height:1.2;word-break:break-word}.card-subtitle{font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem}@media (max-width: 768px){.card-value{font-size:1.5rem}}.summary-card{position:relative}.summary-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.summary-card-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.125rem}.summary-card.active .summary-card-icon{background-color:#3b82f626}.summary-card.severe .summary-card-icon{background-color:#ef444426}.summary-card.today .summary-card-icon{background-color:#22c55e26}.summary-card.duration .summary-card-icon{background-color:#f59e0b26}.summary-card-trend{display:flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;padding:.125rem .5rem;border-radius:9999px}.summary-card-trend.positive{color:var(--color-success);background-color:#22c55e26}.summary-card-trend.negative{color:var(--color-danger);background-color:#ef444426}.summary-card-trend.neutral{color:var(--color-text-muted);background-color:var(--color-hover)}.summary-card.active .card-value{color:var(--color-primary)}.summary-card.severe .card-value{color:var(--color-danger)}.summary-card.today .card-value{color:var(--color-success)}.summary-card.duration .card-value{color:var(--color-warning)}.summary-card.peak-hour .summary-card-icon{background-color:#a855f726}.summary-card.peak-hour .card-value{color:#a855f7}.sparkline-container{height:32px;margin-top:.75rem}.chart-card{height:350px;min-height:280px}.chart-container{height:calc(100% - 2rem);position:relative;width:100%}@media (max-width: 768px){.chart-card{height:300px}}.table-card{overflow:hidden}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}.table-filter-input{padding:.375rem .75rem;border-radius:6px;border:1px solid var(--color-border);background-color:var(--color-bg);color:var(--color-text);font-size:.75rem;transition:border-color var(--transition-fast)}.table-filter-input:focus{border-color:var(--color-primary);outline:none}.table-filter-input::placeholder{color:var(--color-text-muted)}.table-container{overflow-x:auto;overflow-y:auto;max-height:400px;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:400px}thead{position:sticky;top:0;background-color:var(--color-bg-card);z-index:1}th{text-align:left;padding:.75rem .5rem;font-weight:500;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);white-space:nowrap;font-size:.75rem;text-transform:uppercase;letter-spacing:.025em}th.sortable{cursor:pointer;user-select:none;transition:color var(--transition-fast)}th.sortable:hover{color:var(--color-text)}td{padding:.75rem .5rem;border-bottom:1px solid var(--color-border)}@media (max-width: 768px){table{font-size:.75rem;min-width:350px}th,td{padding:.5rem .35rem}}tr:hover td{background-color:var(--color-bg-hover)}.severity-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500;text-transform:capitalize}.severity-badge.highest{background-color:#dc262633;color:var(--severity-highest)}.severity-badge.high{background-color:#f9731633;color:var(--severity-high)}.severity-badge.medium{background-color:#eab30833;color:var(--severity-medium)}.severity-badge.low{background-color:#22c55e33;color:var(--severity-low)}.severity-badge.unknown{background-color:#6b728033;color:var(--severity-unknown)}.livemap-card{height:70vh;min-height:450px}.livemap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}.livemap-container{height:calc(100% - 3.5rem);border-radius:.5rem;overflow:hidden;position:relative;z-index:0}.map-controls{display:flex;gap:.5rem;flex-wrap:wrap}.map-filter-btn{display:flex;align-items:center;gap:.375rem;padding:.375rem .625rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;cursor:pointer;transition:all var(--transition-fast)}.map-filter-btn:hover{color:var(--color-text);border-color:var(--color-text-muted)}.map-filter-btn.active{color:var(--color-text);background-color:var(--color-primary);border-color:var(--color-primary)}.map-filter-dot{width:8px;height:8px;border-radius:50%}.live-indicator{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted)}.live-indicator .dot{width:6px;height:6px;border-radius:50%;background-color:var(--color-danger)}.live-indicator.connected .dot{background-color:var(--color-success);animation:pulse 2s infinite}.emoji-marker{background:transparent!important;border:none!important}.heatmap-card{height:500px}.heatmap-container{height:calc(100% - 2rem);border-radius:.5rem;overflow:hidden;position:relative;z-index:0}@media (max-width: 768px){.livemap-card{height:60vh;min-height:350px}.heatmap-card{height:350px}}.section-title{font-size:.875rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;margin-top:1.5rem;display:flex;align-items:center;gap:.75rem}.section-title:after{content:"";flex:1;height:1px;background-color:var(--color-border)}.skeleton{background:linear-gradient(90deg,var(--color-bg-card) 25%,var(--color-bg-hover) 50%,var(--color-bg-card) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1rem}.skeleton-title{height:.75rem;width:40%}.skeleton-value{height:2rem;width:60%;margin:.5rem 0}.skeleton-chart{height:100%;border-radius:8px}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;color:var(--color-text-muted);gap:1rem}.loading-spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{color:var(--color-danger);text-align:center;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.error-icon{font-size:2rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1.5rem;text-align:center;color:var(--color-text-muted)}.empty-state-icon{font-size:2.5rem;margin-bottom:1rem;opacity:.5}.empty-state-title{font-size:1rem;font-weight:500;color:var(--color-text);margin-bottom:.25rem}.empty-state-description{font-size:.875rem}.active-filters{display:flex;align-items:center;gap:.5rem;padding:.75rem 0;flex-wrap:wrap}.active-filters-label{font-size:.75rem;color:var(--color-text-muted);font-weight:500}.filter-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .5rem .25rem .75rem;font-size:.75rem;color:var(--color-text);background-color:var(--color-primary);border-radius:9999px}.filter-chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;background:#fff3;border:none;border-radius:50%;color:inherit;cursor:pointer;font-size:.625rem;transition:background-color var(--transition-fast)}.filter-chip-remove:hover{background:#ffffff4d}.clear-filters-btn{padding:.25rem .5rem;font-size:.75rem;color:var(--color-text-muted);background:transparent;border:none;cursor:pointer;text-decoration:underline;transition:color var(--transition-fast)}.clear-filters-btn:hover{color:var(--color-text)}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-4px);padding:.375rem .625rem;font-size:.75rem;white-space:nowrap;color:var(--color-text);background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:6px;opacity:0;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast);z-index:1000}[data-tooltip]:hover:after{opacity:1;transform:translate(-50%) translateY(-8px)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}*{scrollbar-width:thin;scrollbar-color:var(--color-border) var(--color-bg)}.summary-card.impact .summary-card-icon{background-color:#6366f126}.summary-card.impact .card-value{color:#6366f1}.summary-card.province .summary-card-icon{background-color:#ec489926}.summary-card.province .card-value{color:#ec4899}.summary-card.road .summary-card-icon{background-color:#0ea5e926}.summary-card.road .card-value{color:#0ea5e9}.summary-card.weather .summary-card-icon{background-color:#22c55e26}.summary-card.weather .card-value{color:#22c55e}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:.75rem .5rem;text-align:left;border-bottom:1px solid var(--color-border)}.data-table th{font-size:.75rem;font-weight:500;color:var(--color-text-muted);text-transform:uppercase}.data-table .rank{color:var(--color-text-muted);font-size:.75rem;width:2rem}.data-table .road{display:flex;flex-direction:column;gap:.125rem}.data-table .road-number{font-weight:600;color:var(--color-text)}.data-table .road-name{font-size:.75rem;color:var(--color-text-muted)}.data-table .count{font-weight:600}.data-table .km{color:var(--color-text-muted);font-size:.875rem}.data-table .causes{display:flex;gap:.25rem;flex-wrap:wrap}.cause-tag{font-size:.625rem;padding:.125rem .375rem;background-color:var(--color-bg);border-radius:4px;color:var(--color-text-muted);text-transform:capitalize}.severity-badge.severity-highest{background-color:#dc262633;color:var(--severity-highest)}.severity-badge.severity-high{background-color:#f9731633;color:var(--severity-high)}.severity-badge.severity-medium{background-color:#eab30833;color:var(--severity-medium)}.severity-badge.severity-low{background-color:#22c55e33;color:var(--severity-low)}.rush-hour-summary{display:flex;gap:.75rem;margin-bottom:1rem}.rush-hour-card{flex:1;display:flex;flex-direction:column;align-items:center;padding:.75rem;background-color:var(--color-bg);border-radius:8px;text-align:center}.rush-hour-icon{font-size:1.25rem;margin-bottom:.25rem}.rush-hour-label{font-size:.625rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.025em}.rush-hour-count{font-size:1.5rem;font-weight:700;color:var(--color-text)}.rush-hour-meta{font-size:.625rem;color:var(--color-text-muted)}.hotspots-map-container{background-color:var(--color-bg)}.hotspot-marker{background:transparent!important;border:none!important}.hotspot-popup{padding:.5rem}.hotspot-popup-title{font-weight:600;margin-bottom:.5rem}.hotspot-popup-stats{display:flex;flex-direction:column;gap:.25rem;font-size:.875rem}.hotspots-legend{display:flex;justify-content:center;gap:1rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--color-border)}.legend-item{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--color-text-muted)}.legend-dot{width:10px;height:10px;border-radius:50%}.anomalies-panel{background-color:var(--color-bg-card)}.anomalies-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.anomalies-status{font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:9999px}.anomalies-status.normal{background-color:#22c55e26;color:var(--color-success)}.anomalies-status.warning{background-color:#f59e0b26;color:var(--color-warning)}.anomalies-status.alert{background-color:#ef444426;color:var(--color-danger)}.anomalies-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem;color:var(--color-text-muted);text-align:center}.anomalies-empty-icon{font-size:2rem}.anomalies-summary{display:flex;gap:.5rem;margin:.75rem 0}.anomaly-count{font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:4px}.anomaly-count.high{background-color:#ef444426;color:var(--color-danger)}.anomaly-count.medium{background-color:#f59e0b26;color:var(--color-warning)}.anomaly-count.low{background-color:#eab30826;color:#eab308}.anomalies-list{display:flex;flex-direction:column;gap:.5rem}.anomaly-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background-color:var(--color-bg);border-radius:8px;border-left:3px solid transparent}.anomaly-item.anomaly-high{border-left-color:var(--color-danger)}.anomaly-item.anomaly-medium{border-left-color:var(--color-warning)}.anomaly-item.anomaly-low{border-left-color:#eab308}.anomaly-icon{font-size:1rem}.anomaly-content{flex:1;min-width:0}.anomaly-title{display:flex;align-items:center;gap:.375rem;font-weight:500;margin-bottom:.25rem}.dimension-icon,.anomaly-value{font-size:.875rem}.anomaly-stats{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--color-text-muted)}.anomaly-vs{opacity:.5}.anomaly-deviation{font-size:.875rem;font-weight:600;padding:.25rem .5rem;border-radius:4px;white-space:nowrap}.anomaly-deviation.up{background-color:#ef444426;color:var(--color-danger)}.anomaly-deviation.down{background-color:#22c55e26;color:var(--color-success)}.anomalies-more{text-align:center;font-size:.75rem;color:var(--color-text-muted);padding-top:.5rem}.chart-empty,.table-empty,.map-empty{display:flex;align-items:center;justify-content:center;height:200px;color:var(--color-text-muted);font-size:.875rem}