/* ============================================================================
   routeStack.css — shared static styles for the Route Stack surfaces:
     • Service Route Planner   (app/routePlanner  — .srp-root)
     • Territory & Route Mgr   (app/territoryManager — .trm-root)
     • Visit Forecast          (app/visitForecast — .vf-root)
   Ported verbatim from the three .dc.html design heads (Jul-22 export).
   Tokens (light/dark) are applied per-module as CSS vars on the root element;
   the 16px base scale comes from signal-base.css (roots registered there).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.srp-root *, .trm-root *, .vf-root * { box-sizing: border-box; }

/* scrollbars (design: 10px thumb, pill) */
.srp-root ::-webkit-scrollbar, .trm-root ::-webkit-scrollbar, .vf-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.srp-root ::-webkit-scrollbar-thumb, .trm-root ::-webkit-scrollbar-thumb, .vf-root ::-webkit-scrollbar-thumb {
    background: #cfd4e4; border-radius: 99px; border: 2px solid transparent; background-clip: content-box;
}

/* Leaflet chrome inside the Route Planner + Territory map picker */
.srp-tiles-dark .leaflet-tile, .trm-tiles-dark .leaflet-tile {
    filter: brightness(.7) invert(1) contrast(2.8) hue-rotate(195deg) saturate(.35) brightness(.75);
}
.srp-root .leaflet-popup-content-wrapper, .trm-root .leaflet-popup-content-wrapper {
    background: var(--surface); color: var(--text); border-radius: 12px; box-shadow: var(--e2);
}
.srp-root .leaflet-popup-content, .trm-root .leaflet-popup-content { margin: 12px 14px; line-height: 1.35; }
.srp-root .leaflet-popup-tip, .trm-root .leaflet-popup-tip { background: var(--surface); }

/* animations */
@keyframes srp-fade { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes srp-pop { 0% { transform: translateY(6px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes srp-flash { 0% { background: var(--brand-50) } 100% { background: transparent } }
@keyframes trm-fade { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes trm-slide { 0% { transform: translateX(30px); opacity: .4 } 100% { transform: translateX(0); opacity: 1 } }
@keyframes trm-pop { 0% { transform: scale(.96); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes vf-fade { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes vf-slide { 0% { transform: translateX(30px); opacity: .4 } 100% { transform: translateX(0); opacity: 1 } }