*{box-sizing:border-box}body{margin:0;font:14px/1.4 system-ui,Segoe UI,Arial,sans-serif;background:#f3f4f6;color:#1f2937}
header{display:flex;gap:24px;align-items:center;background:#1e3a8a;color:#fff;padding:10px 20px;position:sticky;top:0;z-index:1000}
header nav{display:flex;gap:4px;flex:1}header nav a{color:#bfdbfe;text-decoration:none;padding:6px 12px;border-radius:6px}
header nav a.active,header nav a:hover{background:#1e40af;color:#fff}header .link{color:#bfdbfe}
main{padding:16px;max-width:1500px;margin:auto}.view{display:none}.view.on{display:block}
.card{background:#fff;border-radius:10px;padding:14px;box-shadow:0 1px 3px #0002;margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:#fff;border-radius:10px;padding:14px;box-shadow:0 1px 3px #0002}.kpi b{display:block;font-size:26px;color:#1e3a8a}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px}.grid2 .card{margin:0}.wide{grid-column:1/-1}
h3{margin:0 0 8px}table{border-collapse:collapse;width:100%}td,th{padding:5px 8px;border-bottom:1px solid #e5e7eb;text-align:left;white-space:nowrap}
table.data th{background:#f9fafb;position:sticky;top:0;cursor:pointer;user-select:none}table.data th.asc:after{content:" ▲"}table.data th.desc:after{content:" ▼"}
table.data tbody tr{cursor:pointer}table.data tbody tr:hover{background:#eff6ff}.scroll{overflow:auto;max-height:70vh}
.filters{display:flex;flex-wrap:wrap;gap:8px}.filters input,.filters select{padding:6px;border:1px solid #d1d5db;border-radius:6px}.filters input[name=q]{min-width:260px}.filters input[type=number]{width:100px}
button{padding:6px 12px;border:1px solid #1e3a8a;background:#1e3a8a;color:#fff;border-radius:6px;cursor:pointer}button:disabled{opacity:.4}
button.link{background:none;border:none;color:#1e3a8a;text-decoration:underline;padding:0 4px}
.tbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.muted{color:#6b7280}
.badge{padding:2px 8px;border-radius:10px;font-size:12px;background:#e5e7eb}.s-New{background:#dbeafe}.s-Contacted{background:#fef3c7}.s-Appointment{background:#ede9fe}
.s-Quoted{background:#fde68a}.s-Won{background:#bbf7d0}.s-Lost{background:#fee2e2}.s-Do{background:#374151;color:#fff}
#mapdiv{height:72vh;border-radius:8px}dialog{border:none;border-radius:12px;width:min(640px,95vw);box-shadow:0 10px 40px #0005}
dialog label{display:block;margin:10px 0}dialog select,dialog input,dialog textarea{width:100%;padding:6px;border:1px solid #d1d5db;border-radius:6px;font:inherit}
dialog label input[type=date]{width:auto}.info{display:grid;grid-template-columns:130px 1fr;gap:3px 10px;font-size:13px}.info span:nth-child(odd){color:#6b7280}
.row{display:flex;gap:8px;justify-content:flex-end}.err{color:#dc2626}
body.login{display:grid;place-items:center;min-height:100vh}.login-card{width:320px}.login-card input{width:100%;padding:8px;margin:6px 0 12px}

.grid2>*{min-width:0}.grid2 .card{overflow-x:auto}.card td a{white-space:normal}

/* light professional theme */
body{background:#f5f8fc;color:#1e293b}header{background:#fff;color:#0f3b6e;border-bottom:3px solid #4a90d9;box-shadow:0 1px 4px #0001}header nav a{color:#475569;font-weight:500}header nav a.active,header nav a:hover{background:#e8f1fb;color:#1f6fc5}header .link{color:#1f6fc5}.card,.kpi{border:1px solid #e3eaf3;box-shadow:0 1px 2px #0f172a0d}.kpi b{color:#1f6fc5}button{background:#3b82d6;border-color:#3b82d6}button:hover{background:#2f6fbf}button.link{color:#1f6fc5;background:none}a{color:#1f6fc5}table.data th{background:#f1f6fc;color:#334155}table.data tbody tr:hover{background:#f0f7ff}

a.kpi{display:block;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}a.kpi:hover{border-color:#4a90d9;box-shadow:0 2px 8px #1f6fc533}

/* modern selects & inputs */
select,input:not([type=checkbox]):not([type=radio]){font:inherit;font-size:13px;color:#1e293b;background-color:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:7px 10px;outline:none;transition:border-color .15s,box-shadow .15s}select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}select:hover,input:hover{border-color:#94a3b8}select:focus,input:focus{border-color:#3b82d6;box-shadow:0 0 0 3px #3b82d633}#v-map .tbar label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.03em}#v-map .tbar{background:#f8fafc;border:1px solid #e3eaf3;border-radius:10px;padding:10px 12px;gap:16px!important}#mcount{margin-left:auto;font-weight:600;color:#1f6fc5}#mlegend{width:100%;font-size:12px}

.roofbox{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}
.roofbox img{width:260px;height:260px;object-fit:cover;border-radius:8px;border:1px solid #cbd5e1;background:#f1f5f9}
#solarOut{margin-top:8px;line-height:1.6}

/* ---- mobile view + route planner ---- */
.ftoggle,.cards,.mpager{display:none}
.lcard{border:1px solid #e3eaf3;border-radius:10px;padding:12px;margin-bottom:8px;background:#fff;cursor:pointer;line-height:1.5}
.lc-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.lc-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:#475569}.lc-storm{font-size:12px;color:#b45309}
.sbtns{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 10px}.sbtns button{background:#fff;color:#334155;border-color:#cbd5e1}.sbtns button.on{background:#1f6fc5;color:#fff;border-color:#1f6fc5}
.row.qa{justify-content:flex-start;margin:6px 0 4px}a.btn{display:inline-block;padding:6px 12px;border-radius:6px;background:#16a34a;color:#fff;text-decoration:none;margin:2px 4px 2px 0}
.mapwrap{display:flex;gap:12px;align-items:flex-start}.mapwrap #mapdiv{flex:1;min-width:0}
.rpanel{width:340px;flex:none;max-height:72vh;overflow:auto;border:1px solid #e3eaf3;border-radius:10px;padding:12px;background:#fff}
.rpanel[hidden]{display:none}.rpanel h3{margin:0 0 8px}.rpanel label{display:block;font-size:12px;font-weight:600;color:#475569}.rpanel label input{width:100%;margin-top:4px}
.rrow{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.rrow input,.rrow select{flex:1;min-width:0}#rmax{max-width:70px;flex:none}
button.sec{background:#fff;color:#1f6fc5;border-color:#cbd5e1}button.sec:hover{background:#e8f1fb}button.on,button.sec.on{background:#0f3b6e;color:#fff}
#rlist{padding-left:24px;margin:8px 0}#rlist li{padding:5px 0;border-bottom:1px solid #eef2f7;cursor:pointer}#rlist li button{float:right;font-size:12px}
.rnum{background:#1f6fc5;color:#fff;border:2px solid #fff;border-radius:50%;text-align:center;line-height:20px;font-weight:700;font-size:11px;box-shadow:0 1px 3px #0007}.rnum.rstart{background:#16a34a}
@media (max-width:700px){
  header{flex-wrap:wrap;gap:8px;padding:8px 12px}header strong{flex:1}
  header nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e3eaf3;box-shadow:0 -1px 6px #0002;justify-content:space-around;gap:2px;padding:4px 4px calc(4px + env(safe-area-inset-bottom));z-index:1001}
  header nav a{flex:1;text-align:center;padding:12px 2px;font-size:13px}
  main{padding:10px 8px 84px}.card{padding:10px}
  .grid2{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}
  .ftoggle{display:block;width:100%;margin-bottom:10px;padding:12px;font-size:15px}
  #filters{display:none}#filters.open{display:flex}
  #filters input,#filters select{flex:1 1 45%;min-width:0!important;width:auto!important;font-size:16px;padding:10px}#filters input[name=q]{flex-basis:100%}#filters select{padding-right:30px}#filters button{flex:1 1 30%;padding:12px 6px}
  #v-leads .scroll{display:none}.cards{display:block}.mpager{display:flex;margin:10px 0 0}.mpager button{padding:12px 20px}
  dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
  dialog select,dialog input,dialog textarea{font-size:16px;padding:10px}
  .info{grid-template-columns:96px 1fr}.info span{overflow-wrap:anywhere}.roofbox{flex-direction:column}.roofbox img{width:100%;height:auto;aspect-ratio:1}
  .sbtns button{flex:1 1 30%;padding:12px 4px;font-size:14px}
  .row.qa>*{flex:1;text-align:center;padding:14px 8px;font-size:15px;margin:0}
  dialog .row button{padding:12px 20px;font-size:15px}
  .mapnote{display:none}#v-map .tbar{gap:8px!important;padding:8px}#v-map .tbar label{flex:1 1 45%;font-size:11px}#v-map .tbar select{flex:1;min-width:0}#rplan{flex:1 1 100%;padding:12px}
  .mapwrap{flex-direction:column;gap:8px}#mapdiv{height:calc(100dvh - 250px);min-height:320px;width:100%}body.rmode #mapdiv{height:55dvh}
  .rpanel{width:100%;max-height:none}.rpanel button{padding:11px 10px}.rpanel input,.rpanel select{font-size:16px}
}
@media print{header,nav{display:none}}

@media (max-width:700px){body.rmode .mapwrap{flex-direction:column-reverse}body.rmode #mapdiv{height:45dvh}.rpanel{scroll-margin-top:70px}}