/* Contractor Portal — same palette as SSInv / MyStuff */
:root { --bg:#f7f5f0; --card:#fff; --ink:#1f2421; --muted:#6b706c; --line:#e4e1d8; --brand:#1d6b45; --brand-2:#14532d; --soft:#eef4ef;
  --blue:#2563eb; --blue-bg:#eff6ff; --amber:#b45309; --amber-bg:#fffbeb; --red:#b91c1c; --red-bg:#fef2f2; --teal:#0f766e; --teal-bg:#f0fdfa; --green:#15803d; --green-bg:#f0fdf4;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05); --r:14px; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--brand); }
h1 { font-size:22px; margin:0; } h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:15px; margin:0 0 8px; }
.muted { color:var(--muted); } .small { font-size:13px; } .num { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.hide { display:none !important; }

/* top bar */
.top { position:sticky; top:0; z-index:1000; background:var(--brand); color:#fff; display:flex; align-items:center; gap:18px; padding:0 18px; height:56px; }
.top .brand { display:flex; align-items:center; gap:10px; font-weight:700; color:#fff; text-decoration:none; white-space:nowrap; }
.top .brand img { width:30px; height:30px; border-radius:8px; }
.top .brand small { font-weight:500; opacity:.8; }
.top nav { display:flex; gap:4px; flex:1; }
.top nav a { color:#e7f5ec; text-decoration:none; padding:7px 12px; border-radius:999px; font-weight:600; font-size:14px; }
.top nav a.on, .top nav a:hover { background:rgba(255,255,255,.16); color:#fff; }
.top .me { font-size:13px; opacity:.92; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.top .me button { background:rgba(255,255,255,.14); border:0; color:#fff; border-radius:999px; padding:6px 12px; cursor:pointer; font:inherit; font-size:13px; }
.wrap { max-width:1240px; margin:0 auto; padding:22px 18px 60px; }
.head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.head .sp { flex:1; }

/* cards, buttons, forms */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px; }
.card + .card { margin-top:14px; }
.btn { display:inline-flex; align-items:center; gap:6px; justify-content:center; font:inherit; font-weight:600; font-size:14px; border-radius:10px; padding:8px 14px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { background:var(--brand-2); } .btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.sec { background:var(--card); color:var(--ink); border-color:var(--line); } .btn.sec:hover { border-color:var(--brand); background:var(--soft); }
.btn.danger { background:var(--card); color:var(--red); border-color:#fecaca; } .btn.danger:hover { background:var(--red-bg); }
.btn.sm { padding:5px 10px; font-size:13px; border-radius:8px; }
.btn.lg { padding:11px 18px; font-size:15px; }
label.f { display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:0 0 10px; }
label.f > input, label.f > select, label.f > textarea { margin-top:4px; }
input, select, textarea { width:100%; font:inherit; font-size:14.5px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:2px solid #bbe5cb; border-color:var(--brand); }
textarea { min-height:70px; resize:vertical; }
.row { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
.check { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; cursor:pointer; user-select:none; }
.check input { width:auto; margin:0; accent-color:var(--brand); }

/* tables */
table.t { width:100%; border-collapse:collapse; font-size:14px; }
table.t th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); }
table.t td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.t tr.click { cursor:pointer; } table.t tr.click:hover td { background:#fafaf7; }
table.t tfoot td { font-weight:700; border-bottom:0; }
table.t input, table.t select { padding:6px 8px; font-size:14px; }
.tablewrap { overflow-x:auto; }

/* status chips + progress */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.chip::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.chip.gray { background:#f1f1ee; color:#57534e; } .chip.blue { background:var(--blue-bg); color:var(--blue); } .chip.amber { background:var(--amber-bg); color:var(--amber); }
.chip.red { background:var(--red-bg); color:var(--red); } .chip.teal { background:var(--teal-bg); color:var(--teal); } .chip.green { background:var(--green-bg); color:var(--green); }
.svc { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:6px; margin:1px 2px 1px 0; background:var(--soft); color:var(--brand); }
.svc.overseed { background:#ecfeff; color:#0e7490; } .svc.fertilize { background:#fef9c3; color:#854d0e; }
.steps { display:flex; gap:4px; margin:12px 0 2px; }
.steps div { flex:1; text-align:center; font-size:11px; color:var(--muted); }
.steps div::before { content:''; display:block; height:6px; border-radius:3px; background:#e7e5df; margin-bottom:5px; }
.steps div.done::before { background:var(--brand); } .steps div.now { color:var(--ink); font-weight:700; } .steps div.now::before { background:var(--brand); box-shadow:0 0 0 3px #bbe5cb; }
.steps.bad div.now::before { background:var(--amber); box-shadow:0 0 0 3px #fde68a; }
.filters { display:flex; gap:6px; flex-wrap:wrap; }
.filters button { font:inherit; font-size:13px; font-weight:600; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:6px 12px; cursor:pointer; color:var(--muted); }
.filters button.on { background:var(--ink); color:#fff; border-color:var(--ink); }

/* stats */
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:16px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); }
.stat .l { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; } .stat .v { font-size:24px; font-weight:750; }

/* job page */
.job { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(360px, 1fr); gap:16px; align-items:start; }
.mapcard { padding:0; overflow:hidden; position:sticky; top:72px; }
.mapbox { height:calc(100vh - 230px); min-height:420px; }
.maptools { display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center; position:relative; }
.maptools .sp { flex:1; }
.search { position:relative; flex:1 1 220px; }
.search .res { position:absolute; left:0; right:0; top:100%; z-index:1200; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); margin-top:4px; overflow:hidden; }
.search .res div { padding:8px 10px; cursor:pointer; font-size:13.5px; } .search .res div:hover { background:var(--soft); }
.drawbar { position:absolute; left:10px; right:10px; bottom:10px; z-index:1100; background:rgba(20,24,22,.92); color:#fff; border-radius:12px; padding:10px 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13.5px; }
.drawbar[hidden], .search .res[hidden] { display:none; }
.drawbar .msg { flex:1 1 220px; } .drawbar b { color:#fde047; }
.drawbar .btn.sec { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25); }
.areas .a { display:grid; grid-template-columns:14px 1fr auto; gap:4px 10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:11px; margin-bottom:8px; cursor:pointer; }
.areas .a.on { border-color:var(--brand); box-shadow:0 0 0 2px #bbe5cb; }
.areas .dot { width:14px; height:14px; border-radius:4px; background:#22c55e; } .areas .a.exclude .dot { background:#ef4444; }
.areas .a input.nm { border:0; padding:2px 4px; font-weight:600; background:transparent; } .areas .a input.nm:focus { background:#fff; }
.areas .a .svcs { grid-column:2 / 4; display:flex; gap:12px; flex-wrap:wrap; }
.svcblock { border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px; }
.svcblock .h { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .svcblock .h .sp { flex:1; }
.pline { display:grid; grid-template-columns:1fr 92px 64px 30px; gap:6px; align-items:end; margin-bottom:6px; }
.pline .calc { grid-column:1 / 5; font-size:12.5px; color:var(--muted); margin:-2px 0 6px; }
.pline .calc b { color:var(--ink); }
.pline label { font-size:11px; color:var(--muted); font-weight:600; } .pline label input, .pline label select { margin-top:2px; }
.x { border:0; background:none; color:var(--muted); font-size:18px; cursor:pointer; padding:4px; line-height:1; } .x:hover { color:var(--red); }
.tot { display:grid; grid-template-columns:1fr auto; gap:4px 12px; font-size:14px; }
.tot .big { font-size:18px; font-weight:750; } .tot .sep { grid-column:1 / 3; border-top:1px solid var(--line); margin:6px 0; }
.guess { font-size:10.5px; font-weight:700; color:var(--amber); background:var(--amber-bg); border-radius:5px; padding:1px 5px; margin-left:4px; }
.note { border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:12px; }
.note.amber { background:var(--amber-bg); color:#78350f; border:1px solid #fde68a; } .note.red { background:var(--red-bg); color:#7f1d1d; border:1px solid #fecaca; }
.note.blue { background:var(--blue-bg); color:#1e3a8a; border:1px solid #bfdbfe; } .note.green { background:var(--green-bg); color:#14532d; border:1px solid #bbf7d0; }
.events { list-style:none; margin:0; padding:0; font-size:13.5px; } .events li { padding:6px 0; border-bottom:1px dashed var(--line); } .events li:last-child { border:0; }

/* modal, toast, login */
.modal-bg { position:fixed; inset:0; z-index:3000; background:rgba(20,24,22,.45); display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px; overflow:auto; }
.modal { background:var(--card); border-radius:16px; width:min(560px, 100%); padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.modal .acts { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:4000; background:#1f2421; color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; box-shadow:var(--shadow); max-width:90vw; }
.toast.err { background:var(--red); }
.login { max-width:400px; margin:12vh auto; padding:0 16px; }
.login .card { padding:26px; }
.login .logo { display:flex; align-items:center; gap:12px; margin-bottom:18px; } .login .logo img { width:46px; height:46px; border-radius:12px; }
.empty { text-align:center; padding:36px 16px; color:var(--muted); }

/* polygon editor handles (same look as the crop-plan maps) */
.draw-vertex { background:#22c55e; border:2px solid #fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:grab; }
.draw-vertex-selected { background:#4A90C4; border:3px solid #fff; box-shadow:0 0 0 3px rgba(74,144,196,.4), 0 2px 6px rgba(0,0,0,.4); z-index:1000 !important; }
.draw-vertex-snap { background:#4A90C4 !important; border:3px solid #fff !important; animation:pulse-snap .8s infinite; }
@keyframes pulse-snap { 0%, 100% { box-shadow:0 0 0 4px rgba(74,144,196,.4); } 50% { box-shadow:0 0 0 9px rgba(74,144,196,.15); } }
.draw-midpoint { background:transparent; border:none; cursor:grab; }
.draw-midpoint::before { content:''; position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px 0 0 -6px; background:rgba(232,184,75,.75); border:2px solid rgba(255,255,255,.85); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.leaflet-container { font:inherit; }

@media (max-width: 980px) {
  .job { grid-template-columns:1fr; } .mapcard { position:static; } .mapbox { height:62vh; min-height:340px; }
  .stats { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .top { gap:6px; padding:0 10px; } .top .brand small, .top .brand span, .top .me span { display:none; }
  .top nav a { padding:6px 8px; font-size:13px; } .top .me button { padding:5px 9px; font-size:12px; }
  .pline { grid-template-columns:1fr 1fr 30px; } .pline > label:first-child { grid-column:1 / 4; } .pline .calc { grid-column:1 / 4; }
  .maptools .search { flex-basis:100%; }
  .wrap { padding:16px 12px 60px; }
  table.t.stack thead { display:none; } table.t.stack tr { display:block; border-bottom:1px solid var(--line); padding:8px 0; }
  table.t.stack td { display:flex; justify-content:space-between; gap:10px; border:0; padding:3px 6px; text-align:right; }
  table.t.stack td::before { content:attr(data-l); color:var(--muted); font-size:12px; text-align:left; }
}