*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --bg: #1a1d21; --surface: #22262b; --raised: #2a2e34; --hover: #31363d;
    --border: #33383f; --border-light: #3b414a;
    --text: #cdd0d5; --text-sec: #8b919a; --text-dim: #5f6670;
    --accent: #5a9e78; --accent-bg: rgba(90,158,120,0.12); --accent-hover: #4d8a69;
    --blue: #5a8fbf; --blue-bg: rgba(90,143,191,0.12);
    --warm: #bf8f4a; --warm-bg: rgba(191,143,74,0.12);
    --red: #bf5a5a; --red-bg: rgba(191,90,90,0.12);
    --purple: #8a6fbf; --purple-bg: rgba(138,111,191,0.12);
    --r: 6px; --r-lg: 8px;
    --font: 'DM Sans', -apple-system, sans-serif; --mono: 'JetBrains Mono', monospace;
    --sidebar-w: 200px; --bar-h: 56px; --safe-b: env(safe-area-inset-bottom, 0px);
}
html { font-size: 13px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent); color: #fff; }

/* ─ Sidebar ─ */
.sidebar { width: var(--sidebar-w); min-height: 100vh; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top:0;left:0;bottom:0; z-index:100; }
.sidebar-brand { padding: 14px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.brand-icon { width:26px;height:26px;background:var(--accent);color:#fff;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700; }
.brand-text { font-weight:700;font-size:13px;letter-spacing:-0.3px; }
.nav-section { padding:8px 6px;flex:1;display:flex;flex-direction:column;gap:1px; }
.nav-link { display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r);color:var(--text-sec);font-size:12px;font-weight:500;transition:all 0.1s; }
.nav-link:hover { background:var(--hover);color:var(--text);text-decoration:none; }
.nav-link.active { background:var(--accent-bg);color:var(--accent); }
.nav-icon { font-size:13px;width:18px;text-align:center;flex-shrink:0; }
.sidebar-footer { padding:10px 12px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);text-align:center; }

/* ─ Bottom bar ─ */
.bottom-bar { display:none; }

/* ─ Main ─ */
.main-content { margin-left:var(--sidebar-w);padding:20px 24px;max-width:1100px; }

/* ─ Flash ─ */
.flash-messages { margin-bottom:12px; }
.flash { padding:8px 12px;border-radius:var(--r);font-size:12px;margin-bottom:6px;font-weight:500; }
.flash-success { background:var(--accent-bg);color:var(--accent); }
.flash-error { background:var(--red-bg);color:var(--red); }

/* ─ Page header ─ */
.page-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px; }
.page-title { font-size:17px;font-weight:700;letter-spacing:-0.3px; }
.page-sub { color:var(--text-dim);font-size:12px;margin-top:1px; }

/* ─ Buttons ─ */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 12px;min-height:32px;border-radius:var(--r);font-size:12px;font-weight:600;font-family:var(--font);border:1px solid var(--border);background:var(--raised);color:var(--text);cursor:pointer;transition:all 0.1s;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent; }
.btn:hover { background:var(--hover);text-decoration:none; }
.btn:active { transform:scale(0.97); }
.btn-p { background:var(--accent);color:#fff;border-color:var(--accent); }
.btn-p:hover { background:var(--accent-hover);border-color:var(--accent-hover); }
.btn-s { background:var(--accent-bg);color:var(--accent);border-color:transparent; }
.btn-d { background:var(--red-bg);color:var(--red);border-color:transparent; }
.btn-sm { padding:4px 8px;min-height:26px;font-size:11px; }
.btn-group { display:flex;gap:6px;flex-wrap:wrap; }

/* ─ Cards ─ */
.card { background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; }
.card-h { padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:6px; }
.card-h h3 { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--text-dim); }
.card-b { padding:12px 14px; }

/* ─ Grid ─ */
.g2 { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.g-map { display:grid;grid-template-columns:1fr 340px;gap:0;height:calc(100vh - 80px); }

/* ─ Map ─ */
.map-wrap { border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border); }
.map-wrap .leaflet-container { height:100%;background:var(--bg); }
.leaflet-tile-pane { filter:invert(1) hue-rotate(180deg) saturate(0.3) brightness(0.8) contrast(1.1); }
.leaflet-popup-content-wrapper { background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:var(--r)!important;box-shadow:0 4px 12px rgba(0,0,0,0.4)!important; }
.leaflet-popup-tip { background:var(--surface)!important; }
.leaflet-popup-content { font-family:var(--font)!important;font-size:12px!important;margin:8px 12px!important;line-height:1.4!important; }
.leaflet-control-zoom a { background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important; }

/* ─ Forms ─ */
.fg { margin-bottom:12px; }
.fg label { display:block;font-size:11px;font-weight:600;color:var(--text-sec);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px; }
.fc { width:100%;padding:7px 10px;min-height:34px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--font);font-size:14px;transition:border-color 0.1s;-webkit-appearance:none; }
.fc:focus { outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg); }
.fc::placeholder { color:var(--text-dim); }
select.fc { cursor:pointer; }
textarea.fc { resize:vertical;min-height:60px;font-size:13px; }
.fr { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.fhint { font-size:11px;color:var(--text-dim);margin-top:2px; }
.f-actions { display:flex;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap; }

/* ─ Badges ─ */
.badge { display:inline-flex;align-items:center;padding:2px 7px;border-radius:12px;font-size:11px;font-weight:600;line-height:1.3; }
.b-yes { background:var(--accent-bg);color:var(--accent); }
.b-no,.b-declined { background:var(--red-bg);color:var(--red); }
.b-pending,.b-maybe,.b-outreach { background:var(--warm-bg);color:var(--warm); }
.b-planning { background:var(--purple-bg);color:var(--purple); }
.b-confirmed { background:var(--blue-bg);color:var(--blue); }
.b-completed { background:var(--accent-bg);color:var(--accent); }
.b-new { background:var(--raised);color:var(--text-dim); }

/* ─ Service badge ─ */
.svc { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600; }
.svc-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }

/* ─ Field pills ─ */
.fpills { display:flex;gap:4px;flex-wrap:wrap;margin-top:4px; }
.fpill { display:inline-flex;font-size:11px;background:var(--raised);border:1px solid var(--border);border-radius:4px;overflow:hidden; }
.fpill-l { padding:1px 6px;color:var(--text-dim); }
.fpill-v { padding:1px 6px 1px 0;color:var(--text);font-weight:600; }
.fi { font-size:11px;color:var(--text-sec); }
.fi strong { color:var(--text);font-weight:600; }
.fi-sep { margin:0 3px;color:var(--border); }

/* ─ List rows ─ */
.row-link { display:flex;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background 0.08s;gap:10px;-webkit-tap-highlight-color:transparent; }
.row-link:last-child { border-bottom:none; }
.row-link:hover { background:var(--hover);text-decoration:none; }
.row-link:active { background:var(--raised); }
.row-main { flex:1;min-width:0; }
.row-name { font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.row-sub { font-size:11px;color:var(--text-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.row-note { font-size:11px;color:var(--text-dim);font-style:italic;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.row-right { flex-shrink:0;text-align:right;display:flex;align-items:center;gap:6px; }
.row-price { font-family:var(--mono);font-size:11px;color:var(--text-sec); }

/* ─ Nearby panel ─ */
.np { background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden; }
.np-head { padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0; }
.np-head h3 { font-size:13px;font-weight:600;margin-bottom:8px; }
.np-list { flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; }
.np-empty { padding:30px 16px;text-align:center;color:var(--text-dim);font-size:12px; }
.np-item { padding:10px 14px;border-bottom:1px solid var(--border);transition:background 0.08s;-webkit-tap-highlight-color:transparent; }
.np-item:hover { background:var(--hover); }
.np-item:last-child { border-bottom:none; }
.np-row { display:flex;justify-content:space-between;align-items:flex-start;gap:8px; }
.np-name { font-weight:600;font-size:12px; }
.np-name a { color:var(--text); }
.np-name a:hover { color:var(--accent); }
.np-dist { font-family:var(--mono);font-size:10px;color:var(--accent);background:var(--accent-bg);padding:1px 6px;border-radius:8px;flex-shrink:0; }
.np-addr { font-size:11px;color:var(--text-sec);margin-top:1px; }
.np-meta { display:flex;align-items:center;gap:6px;font-size:11px;flex-wrap:wrap;margin-top:3px; }
.np-actions { display:flex;gap:4px;margin-top:6px; }
#npStats { padding:8px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text-sec);flex-shrink:0; }

/* ─ Filter chips ─ */
.chips { display:flex;gap:4px;margin-top:8px;flex-wrap:wrap; }
.chip { padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--raised);color:var(--text-sec);transition:all 0.1s;-webkit-tap-highlight-color:transparent; }
.chip.on { color:#fff; }
.chip:hover { border-color:var(--border-light); }

/* ─ Radius slider ─ */
.rslider { display:flex;align-items:center;gap:8px; }
.rslider input[type="range"] { flex:1;accent-color:var(--accent);height:4px;-webkit-appearance:none;background:var(--border);border-radius:2px; }
.rslider input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer; }
.rval { font-family:var(--mono);font-size:11px;color:var(--accent);min-width:40px;text-align:right; }

/* ─ Job row ─ */
.job { display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;background:var(--surface);transition:opacity 0.15s; }
.job.done { opacity:0.4; }
.job-chk { width:22px;height:22px;min-width:22px;border:2px solid var(--border);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;margin-top:1px;-webkit-tap-highlight-color:transparent;transition:all 0.1s; }
.job-chk:active { transform:scale(0.85); }
.job.done .job-chk { background:var(--accent);border-color:var(--accent);color:#fff; }
.job-info { flex:1;min-width:0; }
.job-name { font-weight:600;font-size:12px; }
.job-name a { color:var(--text); }
.job-name a:hover { color:var(--accent);text-decoration:underline; }
.job-addr { font-size:11px;color:var(--text-sec); }
.job-note { font-size:11px;color:var(--text-dim);font-style:italic;margin-top:2px; }
.job-right { flex-shrink:0;text-align:right; }
.job-price { font-family:var(--mono);font-size:11px;color:var(--text-sec); }

/* ─ Outreach row ─ */
.or { display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px;gap:8px; }
.or:last-child { border-bottom:none; }

/* ─ Bar chart ─ */
.bars { display:flex;align-items:flex-end;gap:6px;height:120px; }
.bar-c { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end; }
.bar { width:100%;border-radius:3px 3px 0 0;min-height:3px;background:var(--accent);opacity:0.7; }
.bar-l { font-size:10px;color:var(--text-dim); }
.bar-v { font-size:10px;font-family:var(--mono);color:var(--text-sec); }

/* ─ Progress ─ */
.prog { background:var(--bg);border-radius:10px;height:5px;overflow:hidden; }
.prog-fill { background:var(--accent);height:100%;border-radius:10px;transition:width 0.3s; }

/* ─ Standard fields hint ─ */
.std-fields { background:var(--raised);border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;margin-bottom:14px;font-size:11px;color:var(--text-sec); }
.std-fields strong { color:var(--text);font-weight:600; }
.std-fields .std-list { display:flex;gap:6px;flex-wrap:wrap;margin-top:4px; }
.std-fields .std-tag { background:var(--bg);padding:2px 8px;border-radius:4px;font-size:11px;color:var(--text-dim);border:1px solid var(--border); }

/* ─ Field editor ─ */
.fe-row { display:flex;gap:6px;align-items:center;margin-bottom:6px; }
.fe-row .fc { min-height:30px;font-size:13px; }
.fe-row .btn { min-height:30px; }

/* ─ Color swatches ─ */
.swatches { display:flex;gap:6px;flex-wrap:wrap; }
.sw { width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color 0.1s; }
.sw.on,.sw:hover { border-color:var(--text); }

/* ─ Empty ─ */
.empty { text-align:center;padding:30px 16px;color:var(--text-dim);font-size:12px; }

/* ─ Modal ─ */
.modal-bg { display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:flex-end;justify-content:center; }
.modal-bg.on { display:flex; }
.modal { background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 18px;width:100%;max-width:480px;max-height:85vh;overflow-y:auto; }
.modal h3 { font-size:14px;font-weight:700;margin-bottom:12px; }
.modal-bar { width:30px;height:3px;background:var(--border);border-radius:2px;margin:0 auto 12px; }

/* ─ Table (import) ─ */
.tbl-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }
table { width:100%;border-collapse:collapse; }
th { text-align:left;padding:6px 10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--text-dim);border-bottom:1px solid var(--border);white-space:nowrap; }
td { padding:6px 10px;font-size:11px;border-bottom:1px solid var(--border);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* ═ MOBILE ═ */
@media (max-width:768px) {
    .sidebar { display:none; }
    .bottom-bar { display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(var(--bar-h) + var(--safe-b));padding-bottom:var(--safe-b);background:var(--surface);border-top:1px solid var(--border);z-index:100;justify-content:space-around;align-items:center; }
    .tab { display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 0;min-width:44px;color:var(--text-dim);text-decoration:none;-webkit-tap-highlight-color:transparent;font-size:10px; }
    .tab.on { color:var(--accent); }
    .tab:hover { text-decoration:none; }
    .tab-i { font-size:16px; }
    .tab-l { font-weight:600; }
    .main-content { margin-left:0;padding:12px 12px calc(var(--bar-h) + var(--safe-b) + 12px); }
    .page-header { flex-wrap:wrap;margin-bottom:12px; }
    .page-title { font-size:16px; }
    .g2 { grid-template-columns:1fr;gap:10px; }
    .g-map { grid-template-columns:1fr;height:auto; }
    .np { border-left:none;border-top:1px solid var(--border);border-radius:var(--r-lg);margin-top:8px; }
    .np-list { max-height:45vh; }
    .fr { grid-template-columns:1fr; }
    .modal { padding:16px 14px calc(14px + var(--safe-b));max-height:80vh; }
    .card-b { padding:10px 12px; }
    .card-h { padding:8px 12px; }
    .btn { min-height:36px;padding:8px 14px;font-size:12px; }
    .fc { min-height:38px;padding:9px 12px;font-size:16px; }
}
@media (min-width:769px) { .bottom-bar { display:none; } }
@media (min-width:769px) and (max-width:1024px) { .g-map { grid-template-columns:1fr 300px; } }