/* JustLodged dashboard. Same tokens as the public site; built for a phone in a ute first, a desk second. */
:root {
  --paper:#eef1ee; --sheet:#ffffff; --ink:#13241f; --muted:#56635e; --line:#d3dad5; --mark:#f5c518; --link:#0d5c4a; --soft:#e2e8e4; --bad:#a3261b;
  --s-new:#2563a8; --s-letterboxed:#0d7a5f; --s-enquiry:#b86e00; --s-quoted:#7b3fa0; --s-won:#1f8a2e; --s-lost:#8a8f8c; --s-skip:#b9c0bc;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --top:112px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#0f1a17; --sheet:#16241f; --ink:#e6ece8; --muted:#9aa9a2; --line:#2a3a34; --mark:#e8b90f; --link:#6fd1b4; --soft:#1c2c27; --bad:#ff8a80; --s-skip:#4a5752; color-scheme:dark } }
:root[data-theme="dark"] { --paper:#0f1a17; --sheet:#16241f; --ink:#e6ece8; --muted:#9aa9a2; --line:#2a3a34; --mark:#e8b90f; --link:#6fd1b4; --soft:#1c2c27; --bad:#ff8a80; --s-skip:#4a5752; color-scheme:dark }
* { box-sizing:border-box }
html, body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 var(--body) }
[hidden] { display:none !important }
a { color:var(--link) }
h1, h2, h3 { font-family:var(--display); margin:0; line-height:1.05; text-wrap:balance }
h1 { font-size:clamp(36px,8vw,56px); font-weight:800 }
h2 { font-size:clamp(28px,5vw,36px); font-weight:700 }
h3 { font-size:22px; font-weight:700; margin-top:20px }
.note { font-size:13px; color:var(--muted); margin:0 }
.sel { user-select:all; font-family:var(--mono); font-size:14px }
button, input, select, textarea { font:inherit; color:inherit }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; font:700 15px/1.1 var(--body); padding:10px 16px; border:2px solid var(--ink); background:transparent; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap }
.btn.primary { background:var(--ink); color:var(--paper) }
.btn.small { min-height:40px; padding:8px 12px; font-size:14px }
.btn.mark { background:var(--mark); border-color:var(--mark); color:#13241f }
.btn[disabled] { opacity:.45; cursor:not-allowed }
.linkbtn { background:none; border:0; padding:10px 4px; color:var(--link); text-decoration:underline; cursor:pointer; min-height:44px }
:focus-visible { outline:3px solid var(--mark); outline-offset:2px }
input, select, textarea { min-height:44px; padding:8px 10px; border:1.5px solid var(--line); background:var(--sheet); border-radius:0; width:100%; font-size:16px }
textarea { min-height:90px; resize:vertical }
label { display:block; font:600 13px/1.4 var(--body); margin-bottom:4px }
.card { background:var(--sheet); border:1px solid var(--line); padding:18px; display:grid; gap:12px; align-content:start; min-width:0 }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.row > input[type=search] { flex:1 1 220px; width:auto }
.row > select { flex:1 1 150px; width:auto }
.logo { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink) }
.logo b { display:grid; place-items:center; width:30px; height:30px; background:var(--mark); color:#13241f; font:800 17px/1 var(--display); border-radius:5px }
.logo span { font:800 18px/1 var(--display); letter-spacing:.08em; text-transform:uppercase }

.demo-banner { background:var(--mark); color:#13241f; font:600 14px/1.4 var(--body); padding:9px 16px; text-align:center }
.demo-banner a { color:#13241f; font-weight:700 }

/* sign in */
.signin { max-width:440px; margin:0 auto; padding:32px 16px 64px; display:grid; gap:18px }
.signin .card button.btn { width:100% }
.msg { min-height:1.5em; margin:0; font-weight:600 }
.msg.bad { color:var(--bad) }

/* shell */
.top { position:sticky; top:0; z-index:500; background:var(--paper); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:8px 16px }
.top .logo span { display:none }
.tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0 }
.tabs::-webkit-scrollbar { display:none }
.tabs button { background:none; border:0; border-bottom:3px solid transparent; padding:12px 10px; min-height:48px; font:700 15px/1 var(--body); color:var(--muted); cursor:pointer; white-space:nowrap }
.tabs button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--mark) }
.badge { display:inline-block; min-width:20px; padding:2px 6px; margin-left:3px; border-radius:10px; background:var(--ink); color:var(--paper); font:600 11px/1.3 var(--mono); text-align:center }
.badge:empty { display:none }
#alert-count:not(:empty), #due-count:not(:empty) { background:var(--mark); color:#13241f }
main { max-width:1400px; margin:0 auto; padding:12px 16px 80px }
.view { display:grid; gap:14px }
.head { display:grid; gap:6px }
.head.row { display:flex; justify-content:space-between }

/* filters */
.filters { display:grid; gap:8px; background:var(--sheet); border:1px solid var(--line); padding:10px }
.chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px }
.chip { flex:0 0 auto; min-height:40px; padding:8px 12px; border:1.5px solid var(--line); background:var(--paper); cursor:pointer; font:600 14px/1 var(--body); white-space:nowrap }
.chip b { font:600 12px var(--mono); color:var(--muted); margin-left:4px }
.chip.on { background:var(--ink); border-color:var(--ink); color:var(--paper) }
.chip.on b { color:var(--mark) }
.summary { font-size:14px; color:var(--muted); margin:0 }
.summary b { color:var(--ink) }

/* list and map */
.split { display:grid; grid-template-columns:minmax(0,1fr); gap:10px }
.seg { display:flex; border:2px solid var(--ink); width:max-content }
.seg button { background:none; border:0; min-height:40px; padding:8px 20px; font:700 14px var(--body); cursor:pointer }
.seg button[aria-selected=true] { background:var(--ink); color:var(--paper) }
.list { display:grid; gap:8px; align-content:start }
.mapwrap { position:relative; min-height:300px }
#map, .minimap { height:calc(100dvh - var(--top) - 150px); min-height:380px; border:1px solid var(--line); background:var(--soft); z-index:1 }
.minimap { height:340px; min-height:0 }
@media (max-width:959px) {
  .split[data-pane=list] .mapwrap { display:none }
  .split[data-pane=map] .list, .split[data-pane=map] .more { display:none }
  #map { height:calc(100dvh - 250px) }
}
@media (min-width:960px) {
  .split { grid-template-columns:minmax(380px,5fr) 7fr; align-items:start }
  .seg { display:none }
  .list { max-height:calc(100dvh - var(--top) - 150px); overflow:auto; padding-right:4px }
  .mapwrap { position:sticky; top:calc(var(--top) - 40px) }
}

.job { background:var(--sheet); border:1px solid var(--line); border-left:5px solid var(--s-new); padding:12px 12px 10px; display:grid; gap:6px; min-width:0 }
.job.st-letterboxed { border-left-color:var(--s-letterboxed) } .job.st-enquiry { border-left-color:var(--s-enquiry) }
.job.st-quoted { border-left-color:var(--s-quoted) } .job.st-won { border-left-color:var(--s-won) }
.job.st-lost { border-left-color:var(--s-lost) } .job.st-skip { border-left-color:var(--s-skip); opacity:.7 }
.job.hl { outline:3px solid var(--mark) }
.job .addr { font:700 17px/1.25 var(--body); background:none; border:0; padding:0; text-align:left; cursor:pointer; color:var(--ink) }
.job .addr small { display:block; font:500 14px/1.3 var(--body); color:var(--muted) }
.job .work { margin:0; font-size:14px }
.meta { display:flex; flex-wrap:wrap; gap:4px 10px; font:12px/1.4 var(--mono); color:var(--muted) }
.meta .stage { color:var(--ink); font-weight:600 }
.tags { display:flex; flex-wrap:wrap; gap:4px }
.tag { font:600 12px/1.3 var(--body); padding:2px 6px; background:var(--soft); border-bottom:2px solid var(--mark) }
.acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px }
.acts .btn { min-height:40px; padding:6px 10px; font-size:13px; border-width:1.5px }
.acts .btn.on { background:var(--ink); color:var(--paper) }
.st { display:inline-block; font:600 11px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.05em; padding:2px 6px; color:#fff; background:var(--s-new) }
.st.letterboxed { background:var(--s-letterboxed) } .st.enquiry { background:var(--s-enquiry) } .st.quoted { background:var(--s-quoted) }
.st.won { background:var(--s-won) } .st.lost { background:var(--s-lost) } .st.skip { background:var(--s-skip); color:var(--ink) }
.more { justify-self:center }
.empty { padding:28px 18px; text-align:center; background:var(--sheet); border:1px dashed var(--line); color:var(--muted); display:grid; gap:10px; justify-items:center }
.empty b { color:var(--ink); font-size:17px }

/* leaflet popups in our type */
.leaflet-popup-content { font:14px/1.4 var(--body); margin:12px 14px }
.leaflet-popup-content b { display:block; font-size:15px }
.leaflet-popup-content .btn { min-height:36px; padding:6px 10px; font-size:13px; margin:8px 6px 0 0; border-width:1.5px }
.leaflet-container a.btn { color:var(--ink) } .leaflet-container a.btn.primary { color:var(--paper) }
.base-pin { width:18px; height:18px; background:var(--mark); border:3px solid #13241f; transform:rotate(45deg) }
.maphint { position:absolute; z-index:600; left:50%; top:10px; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:8px 12px; font:600 14px var(--body) }
.legend { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--muted); margin-top:6px }
.legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:-1px }

/* run */
.runbar { display:flex; flex-wrap:wrap; gap:8px }
.runlist { list-style:none; margin:0; padding:0; display:grid; gap:6px; counter-reset:r }
.runlist li { counter-increment:r; display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; background:var(--sheet); border:1px solid var(--line); padding:10px 12px }
.runlist li::before { content:counter(r); font:800 26px/1 var(--display); text-align:center }
.runlist li b { display:block } .runlist li span { font-size:13px; color:var(--muted) }
.runlist .x { background:none; border:0; font-size:22px; line-height:1; cursor:pointer; min-width:44px; min-height:44px; color:var(--muted) }
.legs { display:grid; gap:6px }
.legs a { font-weight:600 }

/* alerts */
.alert { background:var(--sheet); border:1px solid var(--line); border-left:5px solid var(--mark); padding:14px; display:grid; gap:6px }
.alert .from { font:12px/1.4 var(--mono); color:var(--muted) }
.alert .from b { color:var(--ink) }

/* results */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line) }
.stats div { background:var(--sheet); padding:14px }
.stats b { display:block; font:800 34px/1 var(--display); font-variant-numeric:tabular-nums }
.stats span { font-size:13px; color:var(--muted) }
.roi .big { font:800 clamp(40px,9vw,64px)/1 var(--display); font-variant-numeric:tabular-nums }
.roi .big mark { background:var(--mark); color:#13241f; padding:0 .1em }
.bars { display:grid; gap:8px }
.bar { display:grid; grid-template-columns:minmax(0,12rem) 1fr 5.5rem; gap:10px; align-items:center; font-size:14px }
.bar .track { display:flex; height:14px; background:var(--soft) }
.bar .track i { display:block; height:100% }
.bar b { font:600 13px var(--mono); text-align:right; font-variant-numeric:tabular-nums }
@media (max-width:560px) { .bar { grid-template-columns:minmax(0,7.5rem) 1fr 4.5rem } }

/* crm */
.locked { border:2px solid var(--ink); box-shadow:8px 8px 0 var(--mark); gap:16px }
.locked .price { font:800 44px/1 var(--display) } .locked .price small { display:block; margin-top:6px; font:500 15px/1.4 var(--body); color:var(--muted) }
.locked ul { margin:0; padding-left:18px; display:grid; gap:6px }
.peek { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:8px; overflow-x:auto; pointer-events:none; user-select:none }
.peek div { background:var(--paper); border:1px solid var(--line); padding:8px; font-size:12px; display:grid; gap:6px; align-content:start }
.peek div b { font:700 12px var(--mono); text-transform:uppercase }
.peek p { margin:0; background:var(--sheet); border:1px solid var(--line); padding:6px }
.due { display:grid; gap:6px }
.due .item { display:flex; justify-content:space-between; gap:10px; align-items:center; background:var(--sheet); border:1px solid var(--line); border-left:5px solid var(--mark); padding:10px 12px }
.due .item.late { border-left-color:var(--bad) }
.due .item button { background:none; border:0; text-align:left; cursor:pointer; padding:0; font:600 15px var(--body); color:var(--ink) }
.due .item span { font-size:13px; color:var(--muted) }
.board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:10px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory }
.col { background:var(--soft); padding:8px; display:grid; gap:8px; align-content:start; min-height:160px; scroll-snap-align:start }
.col h4 { margin:0; font:700 13px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.06em; display:flex; justify-content:space-between }
.col h4 span { color:var(--muted) }
.ccard { background:var(--sheet); border:1px solid var(--line); padding:10px; display:grid; gap:4px; cursor:pointer; text-align:left; font-size:14px; width:100% }
.ccard b { font-size:15px } .ccard span { color:var(--muted); font-size:13px }
.ccard .v { font:600 13px var(--mono); color:var(--ink) }
.ccard.example { border-style:dashed }
.col.drop { outline:3px dashed var(--mark) }

/* drawer */
.drawer { border:0; padding:0; width:min(560px,100vw); max-width:100vw; max-height:100dvh; height:100dvh; margin:0 0 0 auto; background:var(--paper); color:var(--ink) }
.drawer::backdrop { background:rgba(10,20,17,.5) }
.drawer form { display:grid; gap:14px; padding:16px 16px 40px }
.drawer .dhead { display:flex; justify-content:space-between; gap:10px; align-items:start; position:sticky; top:0; background:var(--paper); padding:6px 0 10px; border-bottom:1px solid var(--line); z-index:2 }
.drawer .close { background:none; border:0; font-size:30px; line-height:1; cursor:pointer; min-width:44px; min-height:44px }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (max-width:420px) { .grid2 { grid-template-columns:1fr } }
.facts { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:14px; margin:0 }
.facts dt { color:var(--muted) } .facts dd { margin:0 }
.statusbtns { display:flex; flex-wrap:wrap; gap:6px }
.statusbtns button { min-height:40px; padding:6px 10px; border:1.5px solid var(--line); background:var(--sheet); cursor:pointer; font:600 13px var(--body) }
.statusbtns button[aria-pressed=true] { background:var(--ink); color:var(--paper); border-color:var(--ink) }
.log { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.log li { background:var(--sheet); border:1px solid var(--line); padding:8px 10px; font-size:14px }
.log li span { display:block; font:11px var(--mono); color:var(--muted); text-transform:uppercase }

.toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:12px 18px; font-weight:600; z-index:2000; max-width:calc(100vw - 32px); box-shadow:4px 4px 0 var(--mark) }
.toast button { background:none; border:0; color:var(--mark); font-weight:700; text-decoration:underline; cursor:pointer; margin-left:10px }

@media print {
  body * { visibility:hidden }
  #v-run, #v-run * { visibility:visible }
  #v-run { position:absolute; inset:0 }
  .runbar, .runlist .x, .demo-banner, .top, #run-links { display:none !important }
  .runlist li { break-inside:avoid; border:1px solid #999; grid-template-columns:40px 1fr 140px }
  .runlist li::after { content:"Done  /  No junk mail"; font-size:11px; color:#555 }
}
.btn.on { background:var(--ink); color:var(--paper) }

/* phones: thumb reach. Tabs sit at the bottom, secondary filters fold away. */
.mob { display:none }
@media (max-width:759px) {
  .mob { display:inline-flex }
  .filters:not(.open) .mob-hide { display:none }
  .top { padding:6px 16px }
  .tabs { position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--sheet); border-top:1px solid var(--line); justify-content:space-around; gap:0; padding-bottom:env(safe-area-inset-bottom); overflow:visible }
  .tabs button { flex:1 1 0; min-width:0; padding:8px 2px 10px; font-size:12px; border-bottom:0; border-top:3px solid transparent; position:relative }
  .tabs button[aria-selected=true] { border-top-color:var(--mark) }
  .tabs .badge { position:absolute; top:2px; right:4px; margin:0 }
  main { padding-bottom:96px }
  .toast { bottom:84px }
  .top .logo span { display:inline }
  #map { height:calc(100dvh - 230px) }
}
.view > *, #crm-open > *, main { min-width:0 }
#crm-open { display:grid; gap:14px; min-width:0 }