@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --ink:#17202b; --muted:#7f8997; --line:#e8ebef; --paper:#f7f8fa; --white:#fff; --blue:#3367e8; --blue-soft:#edf3ff; --green:#1dbb83; --orange:#f49b48; --red:#e76b65; --purple:#8c77e8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; font-size:14px; }
button, input, select { font:inherit; } button { border:0; cursor:pointer; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; padding:28px 18px 18px; width:250px; flex-shrink:0; }
.brand { align-items:center; display:flex; gap:11px; padding:0 12px 36px; }.brand-mark { align-items:center; background:#1c2f55; border-radius:11px; color:#fff; display:flex; font-family:'Manrope'; font-size:20px; height:38px; justify-content:center; width:38px; }.brand strong { display:block; font-family:'Manrope'; font-size:16px; letter-spacing:-.3px; }.brand span { color:#a2a9b4; display:block; font-size:10px; margin-top:2px; }
.workspace-label, .eyebrow { color:#9ba3ae; font-size:10px; font-weight:700; letter-spacing:1.2px; }.workspace-label { padding:0 12px 11px; }
.main-nav { display:grid; gap:5px; }.nav-item { align-items:center; background:transparent; border-radius:9px; color:#7b8490; display:flex; font-size:13px; gap:13px; padding:12px; text-align:left; width:100%; }.nav-item:hover,.nav-item.active { background:#f0f4ff; color:var(--blue); font-weight:600; }.nav-icon { font-size:19px; line-height:12px; width:17px; }
.sidebar-bottom { margin-top:auto; }.shift-note { align-items:center; background:#f5fbf8; border:1px solid #e2f3eb; border-radius:10px; display:flex; gap:9px; margin:0 2px 17px; padding:11px; }.shift-note strong,.shift-note span { display:block; font-size:11px; }.shift-note span { color:#84918a; font-size:10px; margin-top:2px; }.pulse-dot,.status-dot { background:var(--green); border-radius:50%; display:inline-block; height:8px; width:8px; }.pulse-dot { box-shadow:0 0 0 4px #dff5ec; margin:0 4px; }.profile-button { align-items:center; background:transparent; border-top:1px solid var(--line); display:flex; gap:9px; padding:17px 7px 0; text-align:left; width:100%; }.avatar,.mini-avatar { align-items:center; background:#f5d4cb; border-radius:50%; color:#9a574c; display:inline-flex; font-size:10px; font-weight:700; height:30px; justify-content:center; width:30px; }.profile-copy { flex:1; }.profile-copy strong,.profile-copy small { display:block; }.profile-copy strong { font-size:11px; }.profile-copy small { color:var(--muted); font-size:10px; margin-top:2px; }.chevron { color:#aeb4bc; }
.main-content { flex:1; min-width:0; padding:29px 39px 42px; }.topbar { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:29px; }.topbar h1 { font-family:'Manrope'; font-size:25px; letter-spacing:-.8px; margin:8px 0 0; }.topbar h1 span { color:#f6b449; font-size:19px; }.eyebrow { margin:0; }.topbar-actions { align-items:center; display:flex; gap:11px; padding-top:10px; }.icon-button,.outline-button,.primary-button,.ghost-button { border-radius:8px; font-size:12px; font-weight:600; }.icon-button { background:#fff; border:1px solid var(--line); color:#7c8695; font-size:19px; height:38px; position:relative; width:39px; }.icon-button.enabled { border-color:#8acfb1; color:#1ca672; }.notification-dot { background:#e86d64; border:2px solid #fff; border-radius:50%; height:7px; position:absolute; right:8px; top:7px; width:7px; }.icon-button.enabled .notification-dot { background:#1ca672; }.outline-button { background:#fff; border:1px solid #dfe3e8; color:#5f6978; padding:11px 13px; }.outline-button span,.ghost-button span { color:#9fa7b2; margin-left:8px; }.primary-button { background:var(--blue); color:#fff; padding:11px 16px; box-shadow:0 5px 12px #3367e82b; }.primary-button:hover { background:#2756cc; }.view-container { animation:fade .2s ease; } @keyframes fade { from { opacity:.5; transform:translateY(3px); } to { opacity:1; transform:none; } }.hidden { display:none !important; }
.metric-grid { display:grid; gap:15px; grid-template-columns:repeat(4,1fr); margin-bottom:16px; }.metric-card { background:#fff; border:1px solid var(--line); border-radius:11px; padding:18px 19px 17px; position:relative; }.metric-card:before { border-radius:11px 0 0 11px; content:''; height:100%; left:-1px; position:absolute; top:-1px; width:3px; }.accent-blue:before { background:var(--blue); }.accent-green:before { background:var(--green); }.accent-orange:before { background:var(--orange); }.accent-purple:before { background:var(--purple); }.metric-top { align-items:center; display:flex; justify-content:space-between; }.metric-label { color:#929ba7; font-size:10px; font-weight:700; letter-spacing:.85px; }.metric-icon { color:#a4aeba; font-size:18px; }.metric-value { font-family:'Manrope'; font-size:29px; letter-spacing:-1px; margin:16px 0 8px; }.metric-value > span:first-child { color:#aab1ba; font-size:16px; font-weight:600; letter-spacing:0; }.metric-unit { color:#9fa7b1; font-family:'DM Sans'; font-size:12px; letter-spacing:0; }.metric-foot { color:#9da5af; font-size:10px; }.metric-foot .status-dot { margin-right:5px; }.trend-up { color:var(--green); font-weight:600; }.trend-up span { color:#9da5af; font-weight:400; margin-left:4px; }.status-dot.orange { background:var(--orange); }.warning-foot { color:#c17b35; }
.content-grid { display:grid; gap:16px; grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr); margin-bottom:16px; }.panel { background:#fff; border:1px solid var(--line); border-radius:11px; min-width:0; }.panel-heading { align-items:center; display:flex; justify-content:space-between; padding:20px 21px 17px; }.panel-heading h2 { font-family:'Manrope'; font-size:14px; letter-spacing:-.2px; margin:0 0 4px; }.panel-heading p { color:#a0a8b2; font-size:10px; margin:0; }.ghost-button { background:transparent; color:#6d7785; padding:6px 0; }.map-canvas { background:#edf0ed; border-radius:0 0 11px 11px; height:313px; overflow:hidden; position:relative; }.map-canvas:before { background-image:linear-gradient(28deg,transparent 46%,#dfe4df 47%,#dfe4df 48%,transparent 49%),linear-gradient(90deg,transparent 47%,#dfe4df 48%,#dfe4df 49%,transparent 50%); background-size:155px 127px,127px 155px; content:''; inset:-20%; opacity:.7; position:absolute; transform:rotate(-12deg); }.road { background:#fff; box-shadow:0 0 0 1px #dbe0dc; height:20px; opacity:.9; position:absolute; transform:rotate(-18deg); width:110%; }.road-one { left:-10%; top:75px; }.road-two { left:-8%; top:202px; transform:rotate(13deg); }.road-three { left:10%; top:125px; transform:rotate(68deg); width:80%; }.road-four { left:30%; top:196px; transform:rotate(-67deg); width:80%; }.route-line { inset:0; position:absolute; width:100%; }.route-line path { fill:none; stroke:#386ce6; stroke-dasharray:5 5; stroke-linecap:round; stroke-width:3; }.map-label { color:#adb5ae; font-size:9px; position:absolute; transform:rotate(-12deg); z-index:1; }.avenue-a { left:19%; top:22%; }.avenue-b { left:49%; top:65%; transform:rotate(23deg); }.avenue-c { right:12%; top:21%; transform:rotate(-4deg); }.map-pin { align-items:center; background:#3165e4; border:3px solid #fff; border-radius:50% 50% 50% 0; box-shadow:0 2px 5px #416bd75c; color:#fff; display:flex; height:18px; justify-content:center; position:absolute; transform:rotate(-45deg); width:18px; z-index:2; }.map-pin span { background:#283f74; border-radius:3px; font-size:8px; padding:3px 5px; position:absolute; transform:rotate(45deg); white-space:nowrap; top:-20px; }.pin-1 { left:16%; top:70%; }.pin-2 { left:39%; top:33%; }.pin-3 { left:67%; top:65%; background:#26b985; }.pin-4 { left:78%; top:25%; background:#3165e4; }.map-zoom { bottom:15px; display:grid; left:16px; position:absolute; z-index:3; }.map-zoom button { background:#fff; color:#788491; font-size:17px; height:26px; width:27px; }.map-zoom button+button { border-top:1px solid var(--line); }.map-legend { align-items:center; background:#fff; border:1px solid #e6e9e6; border-radius:6px; bottom:13px; color:#7e8885; display:flex; font-size:9px; gap:13px; padding:8px 9px; position:absolute; right:15px; }.legend-dot { border-radius:50%; display:inline-block; height:6px; margin-right:4px; width:6px; }.legend-dot.blue { background:#3165e4; }.legend-dot.green { background:#26b985; }
.alert-count { align-items:center; background:#fff1ef; border-radius:50%; color:#dd6259; display:flex; font-size:10px; font-weight:700; height:22px; justify-content:center; width:22px; }.alert-list { padding:0 20px; }.alert-item { align-items:flex-start; border-bottom:1px solid #f0f1f3; display:flex; gap:10px; padding:17px 0; }.alert-item:last-child { border-bottom:0; }.alert-symbol { align-items:center; border-radius:50%; display:flex; flex-shrink:0; font-weight:700; height:25px; justify-content:center; width:25px; }.critical .alert-symbol { background:#fff0ee; color:#de625a; }.info .alert-symbol { background:#edf4ff; color:#4677e7; }.alert-body { flex:1; min-width:0; }.alert-body strong,.alert-body span,.alert-body small { display:block; }.alert-body strong { font-size:11px; margin-bottom:3px; }.alert-body span { color:#7e8995; font-size:10px; }.alert-body small { color:#b3bac2; font-size:9px; margin-top:6px; }.more-button { background:transparent; color:#aeb6c0; font-size:13px; letter-spacing:1px; }.full-link { background:transparent; border-top:1px solid #f0f1f3; color:#5279db; font-size:11px; margin:2px 20px 0; padding:16px 0 18px; text-align:left; width:calc(100% - 40px); }.full-link span { float:right; }
.lower-grid { grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr); }.tasks-panel { overflow:hidden; }.task-table-wrap { overflow:auto; padding:0 21px 8px; }table { border-collapse:collapse; min-width:600px; width:100%; }th { color:#a0a8b2; font-size:9px; font-weight:700; letter-spacing:.6px; padding:6px 12px 11px 0; text-align:left; }td { border-top:1px solid #f0f1f3; color:#65707e; font-size:10px; padding:12px 12px 12px 0; vertical-align:middle; }td:first-child { color:var(--ink); font-weight:600; }.task-name { align-items:center; display:flex; gap:7px; }.task-name small { color:#adb5bf; font-size:9px; font-weight:400; margin-left:16px; margin-top:2px; position:absolute; }.task-marker { border:2px solid #cbd2dc; border-radius:50%; display:inline-block; height:10px; width:10px; }.task-marker.done { background:var(--green); border-color:var(--green); }.task-marker.progress { border-color:var(--blue); }.task-marker.pending { border-color:#f0ad61; }.task-marker.late { border-color:var(--red); }.person { align-items:center; display:flex; gap:6px; }.mini-avatar { flex-shrink:0; height:24px; width:24px; }.mini-avatar.blue { background:#d9e5ff; color:#3c68cc; }.mini-avatar.purple { background:#e6defc; color:#745ec1; }.mini-avatar.gold { background:#fcedcf; color:#a67521; }.pill,.worker-status { border-radius:10px; font-size:9px; font-weight:600; padding:5px 8px; white-space:nowrap; }.completed { background:#e8f8f1; color:#1ca672; }.underway { background:#edf3ff; color:#4470d3; }.pending-pill { background:#fff5e7; color:#c78636; }.late-pill { background:#fff0ee; color:#d4675d; }.workers-panel { padding-bottom:6px; }.worker-list { padding:0 20px; }.worker-row { align-items:center; border-top:1px solid #f0f1f3; display:flex; gap:9px; padding:10px 0; }.worker-row > div { flex:1; }.worker-row strong,.worker-row span { display:block; }.worker-row strong { font-size:10px; }.worker-row div span { color:#9ea8b3; font-size:9px; margin-top:3px; }.worker-status { background:#e8f8f1; color:#1ca672; }.worker-status.delayed { background:#fff0ee; color:#d4675d; }
.fleet-admin { min-height:480px; overflow:hidden; }.worker-admin-list { padding:0 21px 18px; }.worker-admin-row { align-items:center; border-top:1px solid #f0f1f3; display:flex; gap:12px; padding:14px 0; }.worker-admin-row > div { flex:1; min-width:0; }.worker-admin-row strong,.worker-admin-row small { display:block; }.worker-admin-row strong { font-size:12px; }.worker-admin-row small { color:#8d98a4; font-size:10px; margin-top:4px; }.worker-admin-row .worker-status { margin-left:auto; }.worker-id { color:#b0b8c2; font-size:9px; margin-top:5px; }.worker-empty { color:#9da7b2; font-size:11px; padding:24px 0; text-align:center; }
.empty-view { align-items:center; background:#fff; border:1px solid var(--line); border-radius:11px; display:flex; flex-direction:column; justify-content:center; min-height:480px; text-align:center; }.empty-icon { align-items:center; background:#edf3ff; border-radius:50%; color:var(--blue); display:flex; font-size:28px; height:64px; justify-content:center; margin-bottom:20px; width:64px; }.empty-view h2 { font-family:'Manrope'; font-size:20px; margin:0 0 8px; }.empty-view p { color:var(--muted); margin:0 0 20px; }
.modal-backdrop,.driver-backdrop { align-items:center; background:#15203380; display:flex; inset:0; justify-content:center; position:fixed; z-index:10; }.modal { background:#fff; border-radius:14px; box-shadow:0 20px 50px #10234430; padding:26px; width:min(470px,calc(100% - 32px)); }.modal-head { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:23px; }.modal h2 { font-family:'Manrope'; font-size:20px; margin:8px 0 0; }.close-button { background:transparent; color:#9ba4af; font-size:24px; line-height:1; }.modal form { display:grid; gap:15px; }.modal label { color:#5d6876; display:grid; font-size:11px; font-weight:600; gap:7px; }.modal input,.modal select { background:#fff; border:1px solid #dfe4ea; border-radius:7px; color:#283343; padding:11px; width:100%; }.form-row { display:grid; gap:13px; grid-template-columns:1.4fr 1fr; }.task-location-row { grid-template-columns:1fr 1fr .8fr; }.private-note { background:#f3f7ff; border-radius:7px; color:#6380b5; font-size:10px; margin:0; padding:10px; }.modal-actions { display:flex; gap:9px; justify-content:flex-end; margin-top:6px; }.driver-backdrop { align-items:stretch; justify-content:flex-end; }.driver-sheet { align-items:center; background:#f7f8fa; display:flex; justify-content:center; min-width:410px; padding:30px; position:relative; }.driver-close { position:absolute; right:25px; top:20px; }.phone-frame { background:#1e2735; border:7px solid #1e2735; border-radius:33px; box-shadow:0 18px 50px #18253630; height:680px; overflow:hidden; padding:0; width:340px; }.phone-notch { background:#1e2735; border-radius:0 0 13px 13px; height:21px; left:50%; position:absolute; transform:translateX(-50%); width:105px; z-index:2; }.driver-screen { background:#f8fafc; display:flex; flex-direction:column; height:100%; padding:38px 22px 17px; }.driver-brand { align-items:center; color:#293b60; display:flex; font-family:'Manrope'; font-size:14px; gap:8px; }.driver-brand .brand-mark { border-radius:8px; font-size:14px; height:29px; width:29px; }.driver-greeting { margin:48px 0 24px; }.driver-greeting span { color:#a0a8b4; font-size:9px; font-weight:700; letter-spacing:1px; }.driver-greeting h2 { font-family:'Manrope'; font-size:25px; letter-spacing:-.7px; margin:8px 0 7px; }.driver-greeting p { color:#8995a3; font-size:11px; line-height:1.5; margin:0; }.driver-status-card { background:#fff; border:1px solid #e5eaf0; border-radius:14px; box-shadow:0 5px 14px #24365208; padding:18px; }.status-heading { align-items:center; color:#64707f; display:flex; font-size:11px; gap:7px; }.driver-clock { color:#1e2b41; font-family:'Manrope'; font-size:35px; margin:22px 0 17px; }.driver-clock span { color:#a3acb8; font-family:'DM Sans'; font-size:10px; font-weight:400; }.start-shift { background:#2c63df; border-radius:9px; box-shadow:0 6px 12px #2c63df35; color:#fff; font-size:12px; font-weight:600; padding:13px; text-align:left; width:100%; }.start-shift span { float:right; font-size:17px; line-height:11px; }.driver-status-card small { color:#a4acb6; display:block; font-size:9px; line-height:1.5; margin-top:12px; }.driver-help { align-items:center; background:#edf4ff; border-radius:10px; color:#5277cc; display:flex; gap:9px; margin-top:16px; padding:12px; }.driver-help > span:first-child { align-items:center; border:1px solid #9cb7f0; border-radius:50%; display:flex; height:20px; justify-content:center; width:20px; }.driver-help div { flex:1; }.driver-help strong { display:block; font-size:10px; }.driver-help p { color:#7f99cb; font-size:9px; margin:3px 0 0; }.driver-help > span:last-child { font-size:15px; }.driver-footer { color:#b0b8c2; font-size:9px; margin-top:auto; text-align:center; }
@media (max-width:1100px) { .main-content { padding:25px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.content-grid,.lower-grid { grid-template-columns:1fr; } }.@media (max-width:700px) { .sidebar { display:none; }.main-content { padding:20px 15px 30px; }.topbar { display:block; }.topbar-actions { flex-wrap:wrap; margin-top:20px; }.topbar-actions .outline-button { margin-left:auto; }.metric-grid { gap:10px; }.metric-card { padding:14px; }.metric-value { font-size:25px; }.map-canvas { height:280px; }.driver-sheet { min-width:100%; padding:20px; }.phone-frame { height:650px; max-width:340px; width:100%; } }
.map-pin.stale { background:#aeb7c1; }.map-pin.stale span { background:#687482; }
.map-canvas:before { display:none; }.map-canvas.leaflet-container { background:#dce8f4; z-index:0; }.rutapro-map-marker { background:transparent; border:0; }.rutapro-map-marker span { background:#2f63df; border:2px solid #fff; border-radius:12px; box-shadow:0 3px 8px #1d376855; color:#fff; display:block; font-size:9px; font-weight:700; padding:5px 7px; transform:translate(-50%,-50%); white-space:nowrap; }.rutapro-map-marker.stale span { background:#8793a1; }.leaflet-control-attribution { font-size:8px !important; }
.rutapro-fallback-map { background:#dce8f4; overflow:hidden; position:relative; }.fallback-map-grid { background-image:linear-gradient(25deg,transparent 46%,#c4d1dc 47%,#c4d1dc 48%,transparent 49%),linear-gradient(115deg,transparent 46%,#c9d5df 47%,#c9d5df 48%,transparent 49%),linear-gradient(90deg,#ffffff55 1px,transparent 1px),linear-gradient(#ffffff55 1px,transparent 1px); background-size:180px 125px,220px 170px,42px 42px,42px 42px; inset:-25%; opacity:.9; position:absolute; transform:rotate(-8deg); }.fallback-map-title { background:#ffffffdd; border:1px solid #dce4ea; border-radius:6px; color:#647381; font-size:10px; left:14px; padding:7px 9px; position:absolute; top:13px; z-index:2; }.fallback-map-empty { color:#738391; font-size:12px; left:50%; position:absolute; text-align:center; top:50%; transform:translate(-50%,-50%); z-index:2; }.fallback-map-marker { align-items:center; display:flex; flex-direction:column; position:absolute; transform:translate(-50%,-50%); z-index:3; }.fallback-map-marker:before { background:#2f63df; border:3px solid #fff; border-radius:50% 50% 50% 0; box-shadow:0 3px 8px #1d376855; content:''; height:19px; transform:rotate(-45deg); width:19px; }.fallback-map-marker span { background:#2f63df; border:1px solid #fff; border-radius:11px; box-shadow:0 2px 5px #1d376855; color:#fff; font-size:9px; font-weight:700; margin-top:-4px; padding:4px 7px; white-space:nowrap; }.fallback-map-marker small { background:#ffffffdd; border-radius:4px; color:#52616e; font-size:9px; margin-top:4px; padding:3px 5px; white-space:nowrap; }.fallback-map-marker.stale:before,.fallback-map-marker.stale span { background:#8793a1; }.fallback-map-attribution { bottom:8px; color:#738391; font-size:9px; position:absolute; right:10px; z-index:2; }
.empty-alerts { color:#98a2ae; font-size:11px; padding:26px 0; text-align:center; }
.task-picker-heading { align-items:center; display:flex; justify-content:space-between; gap:12px; }
.task-picker-heading strong,.task-picker-heading span { display:block; }
.task-picker-heading strong { color:#5d6876; font-size:11px; }
.task-picker-heading span { color:#9aa4af; font-size:10px; margin-top:4px; }
.task-picker-heading .outline-button { font-size:10px; padding:8px 10px; white-space:nowrap; }
.task-picker-map { background:#dce8f4; border:1px solid #dfe4ea; border-radius:8px; height:210px; overflow:hidden; width:100%; }
.task-picker-map .leaflet-control-attribution { font-size:8px !important; }
.task-location-status { background:#f6f8fa; border-radius:6px; color:#73808d; font-size:10px; margin:0; padding:8px 10px; }
.modal-backdrop { align-items:flex-start; overflow-y:auto; padding:20px; }
.modal-backdrop .modal { margin:auto; max-height:calc(100vh - 40px); overflow-y:auto; width:min(560px,100%); }
.address-field { position:relative; }
.address-input-wrap { position:relative; }
.address-input-wrap input { padding-right:36px !important; }
.address-search-icon { color:#7e8a98; font-size:18px; pointer-events:none; position:absolute; right:11px; top:8px; }
.address-field small { color:#9aa4af; font-size:10px; font-weight:400; }
.address-suggestions { background:#fff; border:1px solid #dfe4ea; border-radius:7px; box-shadow:0 10px 24px #1825361c; left:0; max-height:190px; overflow:auto; position:absolute; right:0; top:79px; z-index:20; }
.address-suggestion { background:#fff; border-bottom:1px solid #f0f1f3; display:block; padding:9px 11px; text-align:left; width:100%; }
.address-suggestion:last-child { border-bottom:0; }
.address-suggestion:hover { background:#f3f7ff; }
.address-suggestion strong,.address-suggestion small { display:block; }
.address-suggestion strong { color:#2c3b50; font-size:11px; }
.address-suggestion small { color:#7f8b99; font-size:10px; font-weight:400; line-height:1.3; margin-top:3px; }
.address-no-results { color:#7f8b99; font-size:10px; padding:11px; }
.reports-panel { margin-bottom:16px; overflow:hidden; }.report-actions { align-items:flex-end; display:flex; gap:10px; }.report-date-label { align-items:flex-end; color:#7b8793; display:flex; font-size:10px; gap:8px; }.report-date-label input { border:1px solid #dfe4ea; border-radius:7px; color:#344153; padding:8px 9px; }.report-metrics { display:grid; gap:10px; grid-template-columns:repeat(7,minmax(0,1fr)); padding:0 21px 20px; }.report-metric { background:#f7f9fc; border:1px solid #edf0f4; border-radius:9px; padding:13px; }.report-metric-total { background:#eef5ff; border-color:#d7e5ff; }.report-metric strong,.report-metric span { display:block; }.report-metric strong { color:#24344e; font-family:'Manrope'; font-size:18px; }.report-metric-total strong { color:#2759c9; }.report-metric span { color:#8d98a5; font-size:10px; margin-top:4px; }.report-table-wrap { overflow:auto; padding:0 21px 18px; }.report-table-wrap table { min-width:980px; }.report-table-wrap td strong,.report-table-wrap td small { display:block; }.report-table-wrap td strong { color:#283445; font-size:11px; }.report-table-wrap td small { color:#a0a9b4; font-size:9px; margin-top:4px; }.report-note { padding-bottom:18px; }.report-note-grid { display:grid; gap:10px 16px; grid-template-columns:repeat(2,1fr); padding:0 21px; }.report-note-grid span { color:#718090; font-size:11px; }.settings-panel { max-width:760px; min-height:480px; }.settings-form { display:grid; gap:15px; padding:0 21px 25px; }.settings-form label { color:#5d6876; display:grid; font-size:11px; font-weight:600; gap:7px; }.settings-form input,.settings-form select { background:#fff; border:1px solid #dfe4ea; border-radius:7px; color:#283343; padding:11px; width:100%; }.settings-switch { align-items:flex-start; background:#f4f8ff; border:1px solid #e5edff; border-radius:9px; display:flex !important; gap:10px; grid-template-columns:auto 1fr; padding:13px; }.settings-switch input { margin-top:2px; width:auto; }.settings-switch strong,.settings-switch small { display:block; }.settings-switch small { color:#8a97a6; font-size:10px; font-weight:400; margin-top:4px; }.settings-badge { background:#edf3ff; border-radius:12px; color:#3e6bd2; font-size:10px; font-weight:600; padding:6px 9px; }.settings-saved { color:#1ba372; font-size:11px; font-weight:600; padding:11px 0; }
.report-map { background:#dce8f4; border:1px solid #e4eaf0; border-radius:9px; height:260px; margin:0 21px 20px; overflow:hidden; }.report-map.leaflet-container { z-index:0; }.report-map-empty { align-items:center; color:#738391; display:flex; font-size:11px; height:100%; justify-content:center; }
@media (max-width:700px) { .modal-backdrop { padding:10px; }.modal-backdrop .modal { max-height:calc(100vh - 20px); }.task-picker-map { height:180px; }.task-location-row,.form-row { grid-template-columns:1fr; }.address-suggestions { top:79px; } }
@media (max-width:1100px) { .report-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:700px) { .report-metrics { grid-template-columns:repeat(2,1fr); padding:0 15px 15px; }.report-note-grid { grid-template-columns:1fr; }.report-date-label { margin-top:10px; }.settings-form { padding:0 15px 20px; } }
.sos-alarm-banner { align-items:center; animation:sos-banner-flash .8s steps(2,end) infinite; background:#b42318; border:3px solid #ffb4ab; border-radius:12px; box-shadow:0 12px 32px #7f1d1d66; color:#fff; display:flex; gap:12px; left:50%; max-width:560px; padding:13px 15px; position:fixed; top:16px; transform:translateX(-50%); width:calc(100% - 32px); z-index:100; }.sos-alarm-icon { align-items:center; background:#fff; border-radius:50%; color:#b42318; display:flex; flex:0 0 28px; font-weight:800; height:28px; justify-content:center; }.sos-alarm-copy { flex:1; min-width:0; }.sos-alarm-copy strong,.sos-alarm-copy span { display:block; }.sos-alarm-copy strong { font-size:13px; }.sos-alarm-copy span { font-size:10px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sos-alarm-stop { background:#fff; border:0; border-radius:7px; color:#9d2118; cursor:pointer; font-size:10px; font-weight:700; padding:9px 11px; white-space:nowrap; }.alert-item.sos-alert { animation:sos-row-flash 1s steps(2,end) infinite; background:#fff6f5; border-radius:7px; margin:4px -8px; padding-left:8px; padding-right:8px; }.alert-item.sos-alert .alert-symbol { background:#d92d20; color:#fff; }.sos-alarm-active .alerts-panel { box-shadow:0 0 0 3px #ef444466; }.sos-alarm-active .alerts-panel h2 { color:#b42318; }
@keyframes sos-banner-flash { 0%,49% { background:#b42318; border-color:#ffb4ab; } 50%,100% { background:#ef4444; border-color:#fff; } }
@keyframes sos-row-flash { 0%,49% { background:#fff6f5; } 50%,100% { background:#ffe1df; } }

.sos-alarm-actions { display:flex; gap:6px; }.sos-alarm-share,.sos-alarm-stop { background:#fff; border:0; border-radius:7px; color:#9d2118; cursor:pointer; font-size:10px; font-weight:700; padding:9px 11px; white-space:nowrap; }.sos-alarm-share { background:#25d366; color:#075e2b; }.alert-actions { align-items:center; display:flex; gap:5px; margin-left:auto; }.share-alert-whatsapp { background:#25d366; border:0; border-radius:6px; color:#075e2b; cursor:pointer; font-size:8px; font-weight:800; padding:5px 6px; }.rutapro-map-marker.sos span,.fallback-map-marker.sos:before,.fallback-map-marker.sos span { animation:ruta-sos-marker .7s steps(2,end) infinite; }.rutapro-map-marker.sos span { background:#d92d20; box-shadow:0 0 0 5px #ffb4ab99,0 0 18px #ef4444cc; }.fallback-map-marker.sos:before,.fallback-map-marker.sos span { background:#d92d20; box-shadow:0 0 0 5px #ffb4ab99,0 0 18px #ef4444cc; }.fallback-map-marker.sos small { border:2px solid #ef4444; }.sos-alarm-active .rutapro-map-marker.sos span { animation-duration:.45s; }@keyframes ruta-sos-marker { 0%,49% { opacity:1; transform:translate(-50%,-50%) scale(1); } 50%,100% { opacity:.35; transform:translate(-50%,-50%) scale(1.2); } }

.worker-row { cursor:pointer; position:relative; transition:background .15s ease, box-shadow .15s ease; }
.worker-row:hover,.worker-row:focus-visible { background:#f6f8fd; border-radius:8px; box-shadow:0 0 0 2px #e5edff; outline:none; }
.worker-row-main { min-width:0; }
.worker-row .worker-row-telemetry { align-items:center; display:flex; flex-wrap:wrap; gap:8px; margin-top:5px; }
.worker-row-telemetry small { color:#8793a0; display:inline !important; font-size:8px !important; margin:0 !important; }
.worker-row-arrow { color:#b1bac5; font-size:18px; line-height:1; }
.worker-admin-actions { align-items:center; display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; margin-left:auto; }
.worker-admin-actions .danger { color:#c5574e; }
.worker-detail-modal { max-width:560px; }
.worker-detail-status { align-items:center; color:#8b96a2; display:flex; font-size:10px; gap:10px; justify-content:space-between; margin:-8px 0 18px; }
.worker-detail-grid { display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
.worker-detail-grid > div { background:#f7f9fc; border:1px solid #edf0f4; border-radius:9px; padding:13px; }
.worker-detail-grid span,.worker-detail-grid strong { display:block; }
.worker-detail-grid span { color:#8c98a5; font-size:9px; }
.worker-detail-grid strong { color:#26364e; font-family:'Manrope'; font-size:14px; margin-top:5px; }
.worker-detail-location { background:#f3f7ff; border-radius:9px; color:#637da9; display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:12px; padding:13px; }
.worker-detail-location strong { color:#425c87; font-size:10px; width:100%; }
.worker-detail-map-link { color:#3367e8; font-size:10px; font-weight:600; text-decoration:none; }
.worker-detail-muted { color:#8b98a8; font-size:10px; }
.worker-detail-note { color:#9aa5b0; font-size:10px; line-height:1.5; margin:14px 0 0; }
@media (max-width:520px) { .worker-detail-grid { grid-template-columns:1fr; }.worker-detail-status { align-items:flex-start; flex-direction:column; gap:7px; } }

.help-panel { max-width:900px; min-height:480px; overflow:hidden; }
.help-grid { display:grid; gap:14px; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); padding:0 21px 20px; }
.help-card { align-items:flex-start; background:#f7f9fc; border:1px solid #edf0f4; border-radius:11px; display:flex; gap:14px; padding:18px; }
.help-card h3 { color:#28364a; font-family:'Manrope'; font-size:14px; margin:0 0 8px; }
.help-card p,.help-card li { color:#748191; font-size:11px; line-height:1.55; }
.help-card p { margin:0 0 16px; }
.help-icon { align-items:center; background:#e8f0ff; border-radius:50%; color:#3769d5; display:flex; flex:0 0 32px; font-size:16px; font-weight:700; height:32px; justify-content:center; }
.help-mail-button { display:inline-flex; font-size:11px; gap:12px; padding:10px 13px; text-decoration:none; }
.help-mail-button span { font-size:15px; line-height:10px; }
.support-form { display:grid; gap:11px; }
.support-form label { color:#5d6876; display:grid; font-size:10px; font-weight:600; gap:6px; }
.support-form input,.support-form textarea { background:#fff; border:1px solid #dfe4ea; border-radius:7px; color:#283343; font:inherit; font-size:11px; padding:10px; resize:vertical; width:100%; }
.support-form input:focus,.support-form textarea:focus { border-color:#7fa2ed; box-shadow:0 0 0 3px #e8f0ff; outline:0; }
.support-actions { align-items:center; display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.support-status { color:#1b9c6c; font-size:10px; }
.support-status.error { color:#c5524c; }
.help-card-muted { display:block; }
.help-card ul { margin:0; padding-left:18px; }
.help-card li + li { margin-top:7px; }
.help-contact { align-items:center; background:#edf4ff; border-radius:9px; color:#6380b5; display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 21px 22px; padding:14px 16px; }
.help-contact strong { color:#425c87; font-size:11px; }
.help-contact a { color:#3367e8; font-size:11px; font-weight:700; text-decoration:none; }
.help-contact span { color:#7f99cb; font-size:10px; width:100%; }.legal-links { border-top:1px solid #dbe7f6; display:grid; gap:4px; margin-top:4px; padding-top:11px; width:100%; }.legal-links a { color:#3367e8; font-size:11px; font-weight:700; text-decoration:none; }.legal-links small { color:#7f99cb; font-size:10px; }
@media (max-width:700px) { .help-grid { grid-template-columns:1fr; padding:0 15px 15px; }.help-contact { margin-left:15px; margin-right:15px; } }
.report-actions { flex-wrap: wrap; }
.report-actions button:disabled { cursor: wait; opacity: .65; }
.report-email-status { color: #1b9c6c; font-size: 10px; max-width: 180px; }
.report-email-status.error { color: #c5524c; }

.map-panel-actions { align-items:center; display:flex; gap:10px; }
.map-close-button { align-items:center; background:#17202b; border-radius:50%; color:#fff; display:none; font-size:25px; height:38px; justify-content:center; line-height:1; width:38px; }
.map-panel-fullscreen { border-radius:0; inset:0; position:fixed; z-index:120; }
.map-panel-fullscreen .panel-heading { background:#fff; padding-top:calc(16px + env(safe-area-inset-top)); position:relative; z-index:2; }
.map-panel-fullscreen .map-close-button { display:flex; }
.map-panel-fullscreen .map-canvas { border-radius:0; height:calc(100vh - 82px); }
body.map-is-fullscreen { overflow:hidden; }

@media (max-width:700px) {
  .main-content { padding:14px 12px 28px; }
  .topbar { margin-bottom:18px; }
  .topbar h1 { font-size:22px; line-height:1.2; margin-top:6px; }
  .topbar-actions { display:grid; gap:8px; grid-template-columns:44px minmax(0,1fr); margin-top:15px; padding-top:0; }
  .topbar-actions .icon-button { grid-column:1; }
  .topbar-actions .outline-button { grid-column:2; margin:0; min-width:0; padding:10px 8px; width:100%; }
  .topbar-actions .primary-button { grid-column:1 / -1; width:100%; }
  .metric-grid { gap:9px; margin-bottom:12px; }
  .metric-card { min-height:108px; padding:12px 13px; }
  .metric-label { font-size:8px; letter-spacing:.55px; }
  .metric-icon { font-size:15px; }
  .metric-value { font-size:23px; margin:13px 0 7px; }
  .metric-foot { font-size:9px; line-height:1.3; }
  .content-grid,.lower-grid { gap:12px; margin-bottom:12px; }
  .panel-heading { padding:15px 14px 12px; }
  .panel-heading h2 { font-size:13px; }
  .panel-heading p { font-size:9px; line-height:1.35; }
  .map-canvas { height:275px; }
  .map-panel-actions { gap:6px; }
  .map-panel .ghost-button { font-size:10px; padding:5px 0; }
  .alert-list,.worker-list { padding-left:14px; padding-right:14px; }
  .alert-item { padding:13px 0; }
  .full-link { margin-left:14px; margin-right:14px; width:calc(100% - 28px); }
  .task-table-wrap { padding-left:14px; padding-right:14px; }
  .worker-row { gap:7px; padding:11px 0; }
  .worker-row strong { font-size:10px; }
  .worker-row div span { font-size:8px; }
  .worker-status { font-size:8px; padding:4px 6px; }
  .map-panel-fullscreen .panel-heading { padding-left:14px; padding-right:14px; }
  .map-panel-fullscreen .map-canvas { height:calc(100vh - 76px); }
}

/* Mobile operations layout: keep navigation available and prevent horizontal overflow. */
@media (max-width:700px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .app-shell { display:block; min-width:0; width:100%; }
  .sidebar { background:#fff; border-bottom:1px solid var(--line); border-right:0; display:block; padding:11px 12px 9px; width:100%; }
  .brand { gap:8px; padding:0 2px 10px; }
  .brand-mark { border-radius:8px; font-size:16px; height:32px; width:32px; }
  .brand strong { font-size:14px; }
  .brand span { font-size:9px; }
  .workspace-label, .sidebar-bottom { display:none; }
  .main-nav { display:flex; gap:5px; margin:0 -2px; overflow-x:auto; padding:0 2px 2px; scrollbar-width:none; }
  .main-nav::-webkit-scrollbar { display:none; }
  .nav-item { flex:0 0 auto; font-size:10px; gap:5px; padding:8px 9px; white-space:nowrap; width:auto; }
  .nav-icon { font-size:14px; width:auto; }
  .main-content { min-width:0; padding:13px 12px 28px; width:100%; }
  .topbar { margin-bottom:15px; }
  .topbar h1 { font-size:20px; max-width:100%; overflow-wrap:anywhere; }
  .topbar-actions { grid-template-columns:42px minmax(0,1fr); }
  .topbar-actions .outline-button { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { min-width:0; }
  .metric-label, .metric-foot { overflow-wrap:anywhere; }
  .content-grid, .lower-grid { min-width:0; }
  .map-panel .panel-heading { align-items:flex-start; display:grid; gap:7px 8px; grid-template-columns:minmax(0,1fr) auto; }
  .map-panel .panel-heading > div:first-child { min-width:0; }
  .map-panel-actions { align-self:start; flex-shrink:0; }
  .map-panel .ghost-button { max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .panel-heading h2, .panel-heading p { overflow-wrap:anywhere; }
  .panel-heading > div:first-child { min-width:0; }
}

@media (max-width:380px) {
  .metric-grid { grid-template-columns:1fr; }
  .metric-card { min-height:0; padding:13px 14px; }
  .metric-value { margin:9px 0 5px; }
  .map-panel .panel-heading { display:block; }
  .map-panel-actions { justify-content:space-between; margin-top:8px; }
  .map-panel .ghost-button { max-width:none; }
  .nav-item { padding-left:8px; padding-right:8px; }
}