/* Shared UI components (components.js). Colors and sizes come only from tokens.css. */
.ui-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); min-width: 0; box-shadow: var(--shadow); }
.ui-kpi.is-link { cursor: pointer; }
.ui-kpi.is-link:hover { border-color: var(--primary-line); }
.ui-kpi-label { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.ui-kpi-value { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; margin: var(--space-2) 0; color: var(--text); font-variant-numeric: tabular-nums; }
.ui-kpi-delta { font-size: var(--text-xs); font-weight: 600; }
.ui-kpi-delta.up { color: var(--success-text); } .ui-kpi-delta.down { color: var(--danger-text); } .ui-kpi-delta.flat { color: var(--muted); }
.ui-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }

.ui-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: 999px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.ui-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-badge.success { background: var(--success-soft); color: var(--success-strong); }
.ui-badge.warning { background: var(--warning-soft); color: var(--warning-strong); }
.ui-badge.danger { background: var(--danger-soft); color: var(--danger-strong); }
.ui-badge.info { background: var(--info-soft); color: var(--primary-strong); }
.ui-badge.neutral { background: var(--neutral-soft); color: var(--muted); }

.ui-table-wrap { overflow: auto; max-height: 70vh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ui-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-2); font-size: var(--text-xs); font-weight: 600; text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; }
.ui-table td { padding: var(--space-3); border-bottom: 1px solid var(--surface-3); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.ui-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.ui-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-empty-value { color: var(--subtle); }
.ui-skeleton { display: block; height: 14px; border-radius: var(--radius-control); background: linear-gradient(90deg, var(--surface-3), var(--border), var(--surface-3)); background-size: 200% 100%; animation: ui-shimmer 1.2s infinite linear; }
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.ui-empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--muted); }
.ui-empty p { margin-bottom: var(--space-3); }

.ui-filterbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-3); }
.ui-filterbar label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--muted); }

.ui-help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 700; cursor: help; position: relative; }
.ui-help:hover::after, .ui-help:focus::after { content: attr(data-hint); position: absolute; left: 50%; top: 120%; transform: translateX(-50%); width: max-content; max-width: 260px; padding: var(--space-2) var(--space-3); background: var(--nav-bg); color: var(--on-accent); font-size: var(--text-xs); font-weight: 400; border-radius: var(--radius-control); z-index: 50; white-space: normal; text-align: left; }

.ui-toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: 1000; }
.ui-toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--nav-bg); color: var(--on-accent); font-size: var(--text-sm); box-shadow: var(--shadow); border-left: 4px solid var(--info); max-width: 360px; }
.ui-toast.success { border-left-color: var(--success); } .ui-toast.error { border-left-color: var(--danger); }

.ui-modal-backdrop { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 900; padding: var(--space-4); }
.ui-modal { background: var(--surface); color: var(--text); border-radius: var(--radius-card); padding: var(--space-5); width: min(480px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--shadow); }
.ui-modal h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.ui-modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }
.ui-table a, .ui-empty a { color: var(--primary-text); text-decoration: none; }
.ui-table a:hover { text-decoration: underline; }

.ui-modal.wide { width: min(1040px, 100%); }
.ui-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.ui-chart-grid:empty { display: none; }
.ui-chart-grid > .card { margin-bottom: 0; }
.ui-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-2); }
.ui-chart-title { font-size: var(--text-md); font-weight: 600; color: var(--text); }
.ui-chart-headline { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }
.ui-chart-box { width: 100%; min-width: 0; }
.ui-chart-switch { margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--muted); }
.ui-chart-switch label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.ui-subtitle { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); color: var(--text); }
.ui-map { height: 380px; border-radius: var(--radius-card); border: 1px solid var(--border); }
.ui-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-2); }
.ui-legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.ui-legend-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
@media (max-width: 700px) { .ui-chart-grid { grid-template-columns: 1fr; } }

/* onboarding (stage 5) */
.onb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow)}
.onb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-3)}
.onb-title{font-size:var(--text-md);font-weight:700;color:var(--text)}.onb-count{font-size:var(--text-sm);color:var(--muted)}
.onb-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--border)}
.onb-mark{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;background:var(--surface-3);color:var(--text-2)}
.onb-item.is-done .onb-mark{background:var(--success);color:var(--on-accent)}
.onb-text{flex:1;min-width:0}.onb-label{font-size:var(--text-sm);font-weight:600;color:var(--text)}.onb-state{font-weight:400;color:var(--muted)}
.onb-hint{font-size:var(--text-xs);color:var(--muted)}.onb-item.is-done .onb-hint{display:none}
.onb-hint-banner{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;background:var(--primary-soft);color:var(--text);border:1px solid var(--primary-line);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);font-size:var(--text-sm)}
.onb-menu{position:fixed;z-index:2000;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow);padding:var(--space-1);display:flex;flex-direction:column;min-width:200px}
.onb-menu button{background:none;border:none;text-align:left;padding:var(--space-2) var(--space-3);color:var(--text);font-size:var(--text-sm);cursor:pointer;border-radius:var(--radius-control)}
.onb-menu button:hover{background:var(--surface-3)}
.driver-popover{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.driver-popover .driver-popover-title{color:var(--text)}.driver-popover .driver-popover-description,.driver-popover .driver-popover-progress-text{color:var(--text-2)}
.driver-popover .driver-popover-arrow-side-bottom{border-bottom-color:var(--surface)}.driver-popover .driver-popover-arrow-side-top{border-top-color:var(--surface)}
.driver-popover-footer button{background:var(--primary);color:var(--on-accent);border:none;border-radius:var(--radius-control);text-shadow:none}
.onb-tour-actions{display:flex;gap:var(--space-3);width:100%;margin-top:var(--space-2)}
.driver-popover-footer .onb-tour-actions button{background:none;border:none;color:var(--primary-text);padding:0;font-size:var(--text-xs);cursor:pointer}
.empty-action{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);color:var(--muted);font-size:var(--text-sm);padding:var(--space-3) 0}
.demo-banner{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:flex;gap:var(--space-3);align-items:center;justify-content:center;background:var(--warning-soft);color:var(--warning-strong);border-top:1px solid var(--warning-line);padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}
body.has-demo{padding-bottom:52px}
.driver-popover-footer{flex-wrap:wrap;gap:var(--space-2)}.driver-popover-progress-text{white-space:nowrap}
.driver-popover-footer .onb-tour-actions{flex-basis:100%;justify-content:space-between;margin-top:var(--space-1)}
.driver-popover-navigation-btns{gap:var(--space-2)}
.driver-popover-footer button.driver-popover-prev-btn:disabled{display:none}
input[role="switch"]{appearance:none;-webkit-appearance:none;position:relative;width:44px!important;height:24px!important;border-radius:999px;background:var(--border-strong);cursor:pointer;transition:background .15s;flex:none;margin:0}
input[role="switch"]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--on-accent);transition:transform .15s}
input[role="switch"]:checked{background:var(--primary)}input[role="switch"]:checked::after{transform:translateX(20px)}
input[role="switch"]:focus-visible{outline:2px solid var(--primary-line);outline-offset:2px}
.onb-menu[hidden]{display:none}
.leaflet-container{isolation:isolate}   /* leaflet panes use z-index up to 1000: keep them under the top bar and menus */

/* reports toolbar: one card, filters apply by themselves, tools are menus */
.rpt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow)}
.rpt-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end}
.rpt-filters{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border)}
.rpt-field{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-xs);font-weight:600;color:var(--muted);min-width:0}
.rpt-field select,.rpt-field input{height:36px;box-sizing:border-box;min-width:130px;max-width:240px;font-size:var(--text-sm);font-weight:400}
.rpt-field input[type=date]{min-width:140px}
.rpt-grow{flex:1 1 220px}.rpt-grow input{max-width:none;width:100%}
.rpt-link{background:none;border:none;color:var(--primary-text);font-size:var(--text-sm);cursor:pointer;padding:6px 4px;margin-left:auto}
.rpt-link:hover{text-decoration:underline}
.rpt-bar{display:flex;gap:var(--space-4);justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border)}
.rpt-hint{flex:1 1 320px;font-size:var(--text-xs);color:var(--muted);line-height:1.4}
.rpt-tools{display:flex;gap:var(--space-2)}
.ui-dd{position:relative}
.ui-dd-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:260px;max-width:360px;width:max-content;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:0 8px 24px rgba(0,0,0,.18);padding:var(--space-2)}
.ui-dd-panel[hidden]{display:none}
.ui-dd-title{font-size:var(--text-xs);font-weight:700;color:var(--muted);padding:var(--space-2) var(--space-3)}
.ui-dd-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);cursor:pointer}
.ui-dd-item:hover{background:var(--surface-3)}
.ui-dd-list{max-height:220px;overflow:auto}.ui-dd-empty{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--muted)}
.ui-dd-foot{border-top:1px solid var(--border);margin-top:var(--space-2);padding-top:var(--space-2)}
.ui-dd-foot .rpt-link{margin:0;padding:var(--space-2) var(--space-3)}
.rpt-cols{max-height:320px;overflow:auto}
.rpt-col{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:2px var(--space-3);border-radius:var(--radius-control)}
.rpt-col:hover{background:var(--surface-3)}
.rpt-col label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text);cursor:pointer;flex:1;padding:6px 0}
.rpt-col-move{display:flex;gap:2px}
.rpt-col-move button{width:24px;height:24px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:var(--radius-control);cursor:pointer;line-height:1;padding:0}
.rpt-col-move button:hover:not(:disabled){background:var(--surface-3)}.rpt-col-move button:disabled{opacity:.35;cursor:default}
@media (max-width:768px){.rpt-field select,.rpt-field input{max-width:none;width:100%}.rpt-field{flex:1 1 140px}.ui-dd-panel{right:auto;left:0}}

/* segmented switch (routes: sales reps / couriers) */
.seg{display:inline-flex;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-control);padding:2px;gap:2px}
.seg button{background:none;border:none;padding:6px 14px;border-radius:calc(var(--radius-control) - 2px);color:var(--text-2);font-size:var(--text-sm);font-weight:600;cursor:pointer}
.seg button.active{background:var(--primary);color:var(--on-accent)}
.seg button:not(.active):hover{background:var(--surface-2)}
.ui-table tr.is-clickable { cursor: pointer; }
.ui-table tr.is-clickable:hover td { background: var(--neutral-soft); }