/* Dispatch — shared styles for all three apps. Help U Property / Sonatt AI. */
:root{
  --ink:#0F1B2D; --ink-2:#1B2436; --coral:#C4522F; --coral-dk:#A94728;
  --green:#118669; --green-dk:#0E7158; --green-lt:#4FD1A5;
  --amber:#B4780F; --red:#B3261E;
  --cream:#F7F4EF; --paper:#FFFFFF; --line:#E4E7EC;
  --muted:#5B6779; --muted-2:#8891A0;
  --ff-head:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:14px; --r-lg:20px;
  --sh:0 2px 10px rgba(15,27,45,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--ink-2);font-family:var(--ff);line-height:1.55;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--coral)}
h1,h2,h3{font-family:var(--ff-head);color:var(--ink);letter-spacing:-.02em;margin:0}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}

.ebar{background:var(--coral);color:#fff}
.ebar a{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;text-decoration:none;padding:10px 16px;font-size:13.5px;font-weight:600}
.ebar .tel{font-family:var(--ff-head);font-weight:800;font-size:16px}
.pd{width:8px;height:8px;border-radius:50%;background:#fff;position:relative;flex:none}
.pd::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:#fff;opacity:.5;animation:pulse 1.8s infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2.4);opacity:0}}

.top{background:var(--ink);color:#fff}
.top .in{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-head);font-weight:800;font-size:18px;color:#fff;text-decoration:none}
.brand .mark{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.brand em{font-style:normal;color:var(--coral)}
.appname{font-family:var(--ff-head);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);padding:5px 11px;border-radius:100px;white-space:nowrap}
.appname.office{background:var(--green)}
.appname.trades{background:var(--coral)}
.top .sp{flex:1}
.whoami{font-size:13px;color:rgba(255,255,255,.7);text-align:right;line-height:1.35}
.whoami b{color:#fff;display:block;font-weight:600}

.wrap{max-width:1180px;margin:0 auto;padding:22px 20px 80px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh)}
.card+.card{margin-top:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.stat .n{font-family:var(--ff-head);font-weight:800;font-size:30px;color:var(--ink);line-height:1}
.stat .k{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:6px}
.stat.hot{border-color:rgba(196,82,47,.4);background:rgba(196,82,47,.05)}
.stat.hot .n{color:var(--coral)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:100px;
  padding:12px 22px;font-weight:700;font-size:14.5px;text-decoration:none;transition:.18s;min-height:44px}
.btn-p{background:var(--coral);color:#fff}
.btn-p:hover{background:var(--coral-dk)}
.btn-d{background:var(--ink);color:#fff}
.btn-g{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-g:hover{border-color:var(--ink)}
.btn-ok{background:var(--green);color:#fff}
.btn-ok:hover{background:var(--green-dk)}
.btn-sm{padding:8px 15px;font-size:13px;min-height:38px}
.btn-big{padding:16px 22px;font-size:16px;min-height:56px;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 6px}
.fld{margin-bottom:14px}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink-2)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:var(--coral)}
.fld textarea{min-height:92px;resize:vertical}
.hint{font-size:12px;color:var(--muted-2);margin-top:5px}

.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 22px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.tabs button{background:transparent;border:1px solid var(--line);color:var(--muted);padding:9px 16px;border-radius:100px;font-size:14px;font-weight:600;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:100px;white-space:nowrap}
.p-emergency{background:rgba(196,82,47,.14);color:var(--coral-dk)}
.p-urgent{background:rgba(180,120,15,.16);color:var(--amber)}
.p-routine{background:rgba(136,145,160,.16);color:var(--muted)}
.p-logged{background:rgba(136,145,160,.16);color:var(--muted)}
.p-assigned{background:rgba(180,120,15,.16);color:var(--amber)}
.p-on_site{background:rgba(196,82,47,.14);color:var(--coral-dk)}
.p-awaiting_parts{background:rgba(136,145,160,.2);color:var(--ink-2)}
.p-completed{background:rgba(17,134,105,.15);color:var(--green-dk)}
.p-cancelled{background:rgba(136,145,160,.14);color:var(--muted-2)}

.job{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:10px}
.job.u-emergency{border-left-color:var(--coral)}
.job.u-urgent{border-left-color:var(--amber)}
.job.u-routine{border-left-color:var(--muted-2)}
.job .hd{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.job .ttl{font-family:var(--ff-head);font-weight:700;font-size:15.5px;color:var(--ink);flex:1;min-width:150px}
.job .ref{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted-2)}
.job .meta{font-size:13px;color:var(--muted);margin-top:6px}
.job .desc{font-size:13.5px;color:var(--ink-2);margin-top:8px}
.job .acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.job .acts select{padding:7px 10px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:var(--paper)}
.job.big .ttl{font-size:19px}
.job.big .acts{gap:10px;margin-top:16px}
.job.big .acts .btn{flex:1 1 46%;min-width:140px}

.trail{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.trail .u{font-size:12.5px;color:var(--muted);padding:3px 0}
.trail .u b{color:var(--ink-2);font-weight:600}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line)}
th{font-family:var(--ff-head);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.tw{overflow-x:auto}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty h3{color:var(--ink);margin-bottom:8px}

.msg{border-radius:var(--r);padding:13px 16px;font-size:14px;margin-bottom:14px}
.msg-e{background:rgba(179,38,30,.08);color:#7d1a15;border:1px solid rgba(179,38,30,.25)}
.msg-ok{background:rgba(17,134,105,.09);color:var(--green-dk);border:1px solid rgba(17,134,105,.25)}
.msg-i{background:rgba(196,82,47,.07);color:var(--coral-dk);border:1px solid rgba(196,82,47,.22)}

.gate{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:26px 18px}
.gate .box{width:100%;max-width:430px}
.gate h1{font-size:26px;margin-bottom:8px}
.gate p.sub{color:var(--muted);font-size:14.5px;margin:0 0 22px}
.swap{text-align:center;margin-top:16px;font-size:13.5px;color:var(--muted)}
.swap button{background:none;border:0;color:var(--coral);font-weight:700;padding:0;text-decoration:underline}

.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.center{text-align:center}

footer.ft{border-top:1px solid var(--line);margin-top:40px;padding:22px 20px;text-align:center;font-size:13px;color:var(--muted)}
footer.ft a{color:var(--muted)}

@media(max-width:640px){
  .wrap{padding:16px 14px 70px}
  .card{padding:17px;border-radius:var(--r)}
  .ebar .lbl{display:none}
  .top .in{padding:12px 14px;gap:10px}
  .brand{font-size:15px}
  .appname{font-size:10.5px;padding:4px 9px}
  .whoami{font-size:12px}
  .stat .n{font-size:25px}
  h1{font-size:22px}
  .job.big .acts .btn{flex:1 1 100%}
}