[x-cloak] { display: none !important; }
* { font-family: 'Outfit', system-ui, -apple-system, sans-serif; }
.leaflet-container { font-family: inherit; }
#optimize-map, #session-map { z-index: 1; }
/* Toast */
.toast-enter { animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Chip/tag input */
.skill-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; background: #DBEAFE; color: #006EF2; border: 1px solid #BFDBFE; }
.skill-chip button { cursor: pointer; font-size: 10px; opacity: 0.5; margin-left: 2px; }
.skill-chip button:hover { opacity: 1; }
/* Collapsible card transition */
.card-body { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; }
.card-body.collapsed { max-height: 0; opacity: 0; padding: 0 !important; }
.card-body.expanded { max-height: 800px; opacity: 1; }
/* Timeline */
.timeline-bar { height: 28px; display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; position: relative; }
.timeline-segment { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 500; color: white; min-width: 2px; overflow: hidden; white-space: nowrap; }
.timeline-travel { background: #CBD5E1; }
/* Timeline tooltip */
.tl-tip { position: relative; cursor: pointer; }
.tl-tip .tl-tip-text { visibility: hidden; position: absolute; z-index: 60; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #001C3E; color: white; padding: 8px 12px; border-radius: 10px; font-size: 11px; white-space: pre-line; line-height: 1.5; min-width: 160px; text-align: left; pointer-events: none; opacity: 0; transition: opacity 0.15s; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.tl-tip:hover .tl-tip-text { visibility: visible; opacity: 1; }
.tl-tip .tl-tip-text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #001C3E; }
.timeline-wait { background: #FCD34D; }
.timeline-service { background: var(--route-color); }
/* Unassigned blink */
@keyframes blink-border { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.5); } }
.blink-unassigned { animation: blink-border 1.2s infinite; }
/* Legend */
.map-legend { background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-radius: 10px; padding: 10px 14px; font-size: 11px; line-height: 1.7; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.06); }
.map-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.map-legend-line { width: 16px; height: 3px; display: inline-block; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
/* Tooltip icon */
.tt { position: relative; cursor: help; }
.tt .tt-text { visibility: hidden; position: absolute; z-index: 50; bottom: 125%; left: 50%; transform: translateX(-50%); background: #001C3E; color: white; padding: 5px 10px; border-radius: 8px; font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.tt:hover .tt-text { visibility: visible; opacity: 1; }
/* Smart paste modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-card { background: white; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); width: 90%; max-width: 900px; max-height: 85vh; display: flex; flex-direction: column; }
.parsed-ok { background: #F0FDF4; border-left: 3px solid #22C55E; }
.parsed-warn { background: #FFFBEB; border-left: 3px solid #F59E0B; }
/* P2 Zen form inputs */
.zen-input { border: 1px solid #EFEFEF; border-radius: 12px; padding: 10px 14px; font-size: 14px; background: white; outline: none; transition: all 0.15s; color: #1E2432; }
.zen-input:focus { border-color: #006EF2; box-shadow: 0 0 0 3px rgba(0,110,242,0.1); }
.zen-input::placeholder { color: #ABABAB; }
.zen-input-sm { border: 1px solid #EFEFEF; border-radius: 10px; padding: 8px 12px; font-size: 13px; background: white; outline: none; transition: all 0.15s; color: #1E2432; }
.zen-input-sm:focus { border-color: #006EF2; box-shadow: 0 0 0 3px rgba(0,110,242,0.1); }
/* P2 Zen section labels */
.zen-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #8A8A8A; }
/* P2 Zen buttons */
.zen-btn-primary { background: #006EF2; color: white; border-radius: 10px; font-size: 14px; font-weight: 600; padding: 10px 20px; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,110,242,0.3); }
.zen-btn-primary:hover { background: #0058C4; box-shadow: 0 4px 12px rgba(0,110,242,0.3); }
.zen-btn-primary:disabled { background: #80B8F9; box-shadow: none; cursor: not-allowed; }
.zen-btn-secondary { background: #F5F4F2; color: #1E2432; border-radius: 10px; font-size: 13px; font-weight: 500; padding: 8px 16px; transition: all 0.15s; border: 1px solid #EFEFEF; }
.zen-btn-secondary:hover { background: #EFEFEF; color: #1E2432; }
.zen-btn-danger { background: #EF4444; color: white; border-radius: 10px; font-size: 14px; font-weight: 600; padding: 10px 20px; transition: all 0.15s; box-shadow: 0 1px 3px rgba(239,68,68,0.3); }
.zen-btn-danger:hover { background: #DC2626; box-shadow: 0 4px 12px rgba(239,68,68,0.3); }
/* Sortable table header */
.sort-header { cursor: pointer; user-select: none; white-space: nowrap; }
.sort-header:hover { color: #006EF2; }
/* P2 Zen card */
.zen-card { background: white; border: 1px solid #EFEFEF; border-radius: 16px; }
/* P2 Zen status badges */
.zen-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.zen-badge-green { background: #DCFCE7; color: #166534; }
.zen-badge-amber { background: #FEF3C7; color: #92400E; }
.zen-badge-red { background: #FEE2E2; color: #991B1B; }
.zen-badge-blue { background: #DBEAFE; color: #1E40AF; }
/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ABABAB; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #8A8A8A; }
/* Panel collapse animation */
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.map-overlay-card { animation: fadeSlideIn 0.3s ease-out; }
/* Skeleton loading */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, #EFEFEF 25%, #F5F4F2 50%, #EFEFEF 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.dark .skeleton { background: linear-gradient(90deg, #374151 25%, #4B5563 50%, #374151 75%); background-size: 200% 100%; }
/* ==================== Dark mode ==================== */
/* Base surfaces */
.dark body,
.dark .bg-\[\#FCFBF9\] { background-color: #111827 !important; }
.dark .zen-card,
.dark .bg-white { background-color: #1F2937 !important; border-color: #374151 !important; }
.dark .modal-card { background: #1F2937 !important; }
.dark .map-legend { background: rgba(31,41,55,0.95) !important; color: #F3F4F6 !important; border-color: #374151 !important; }

/* Headers and section backgrounds */
.dark header,
.dark .bg-\[\#F5F4F2\]\/50,
.dark .bg-\[\#F5F4F2\] { background-color: #1a2332 !important; }
.dark .bg-\[\#F5F4F2\/50\] { background-color: #1a2332 !important; }

/* Text colors */
.dark .text-\[\#1E2432\] { color: #F3F4F6 !important; }
.dark .text-\[\#8A8A8A\],
.dark .text-\[\#ABABAB\] { color: #9CA3AF !important; }
.dark .text-\[\#6B8AB5\] { color: #8AABC8 !important; }

/* Borders */
.dark .border-\[\#F5F4F2\],
.dark .border-\[\#EFEFEF\] { border-color: #374151 !important; }
.dark .border-b { border-color: #374151 !important; }

/* Form inputs */
.dark .zen-input,
.dark .zen-input-sm { background: #1F2937 !important; border-color: #374151 !important; color: #F3F4F6 !important; }
.dark .zen-input::placeholder,
.dark .zen-input-sm::placeholder { color: #6B7280 !important; }
.dark .zen-input:focus,
.dark .zen-input-sm:focus { border-color: #006EF2 !important; }

/* Buttons */
.dark .zen-btn-secondary { background: #374151 !important; color: #F3F4F6 !important; border-color: #4B5563 !important; }
.dark .zen-btn-secondary:hover { background: #4B5563 !important; }

/* Tables */
.dark table thead tr { background-color: #1a2332 !important; }
.dark table tbody tr { border-color: #374151 !important; }
.dark table tbody tr:hover { background-color: rgba(0,110,242,0.08) !important; }
.dark td { color: #D1D5DB !important; }

/* Badges in dark mode */
.dark .zen-badge-green { background: #064e3b !important; color: #6ee7b7 !important; }
.dark .zen-badge-amber { background: #78350f !important; color: #fcd34d !important; }
.dark .zen-badge-red { background: #7f1d1d !important; color: #fca5a5 !important; }
.dark .zen-badge-blue { background: #1e3a5f !important; color: #93c5fd !important; }

/* Cards and surfaces */
.dark .parsed-ok { background: #064e3b !important; border-color: #059669 !important; }
.dark .parsed-warn { background: #78350f !important; border-color: #d97706 !important; }
.dark .skill-chip { background: #1e3a5f !important; color: #93c5fd !important; border-color: #2563eb !important; }

/* Tooltip */
.dark .tt .tt-text { background: #F3F4F6 !important; color: #111827 !important; }

/* Scrollbar */
.dark ::-webkit-scrollbar-thumb { background: #4B5563 !important; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6B7280 !important; }

/* Select/dropdown */
.dark select { background: #1F2937 !important; border-color: #374151 !important; color: #F3F4F6 !important; }

/* Stat card icon circles — Tailwind color-50 classes to dark equivalents */
.dark .bg-blue-50 { background: #1e3a5f !important; }
.dark .bg-amber-50, .dark .bg-orange-50 { background: #78350f !important; }
.dark .bg-emerald-50, .dark .bg-green-50 { background: #064e3b !important; }
.dark .bg-red-50 { background: #7f1d1d !important; }
.dark .bg-purple-50, .dark .bg-violet-50 { background: #3b1f7e !important; }
.dark .bg-cyan-50 { background: #164e63 !important; }
/* Hex-based bg overrides */
.dark .bg-\[\#E8F4FD\] { background: #1e3a5f !important; }
.dark .bg-\[\#E6F9ED\] { background: #064e3b !important; }
.dark .bg-\[\#FFF3E0\] { background: #78350f !important; }
.dark .bg-\[\#FDECEB\] { background: #7f1d1d !important; }
.dark .bg-\[\#EDE9FE\] { background: #3b1f7e !important; }
.dark .bg-\[\#FEF3C7\] { background: #78350f !important; }
.dark .bg-\[\#DBEAFE\] { background: #1e3a5f !important; }
.dark .bg-\[\#F0FDF4\] { background: #064e3b !important; }
.dark .bg-\[\#DCFCE7\] { background: #064e3b !important; }
.dark .bg-\[\#F3F4F6\] { background: #374151 !important; }
/* Distribution status pill light bg */
.dark .bg-\[\#F0FDF4\] { background: #064e3b !important; }

/* Stat card numbers and labels */
.dark .text-\[\#1E2432\],
.dark .text-\[\#374151\] { color: #F3F4F6 !important; }

/* Chart.js — override canvas text/grid via JS; darken surrounding labels */
.dark canvas { filter: none; }
.dark .text-\[\#374151\] { color: #9CA3AF !important; }

/* Sort headers */
.dark .sort-header { color: #9CA3AF !important; }
.dark .sort-header:hover { color: #60a5fa !important; }

/* Login screen dark mode */
.dark .bg-\[\#FCFBF9\] { background-color: #111827 !important; }
.dark .zen-card { background-color: #1F2937 !important; border-color: #374151 !important; }

/* Leaflet map tiles — invert for dark mode approximation */
.dark .leaflet-tile-pane { filter: brightness(0.7) contrast(1.1) saturate(0.8); }
.dark .leaflet-popup-content-wrapper { background: #1F2937 !important; color: #F3F4F6 !important; }
.dark .leaflet-popup-tip { background: #1F2937 !important; }
/* Skip to content (a11y) */
.skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: #006EF2; color: white; padding: 8px 20px; border-radius: 0 0 8px 8px; z-index: 999; font-weight: 600; font-size: 14px; }
.skip-link:focus { top: 0; }