:root{
  --navy:#0e2a47;
  --navy-deep:#0a1f35;
  --teal:#0e9f8a;
  --teal-dark:#0b7d6c;
  --bg:#faf8f4;
  --card:#ffffff;
  --ink:#1c2733;
  --muted:#64748b;
  --line:#e6e0d5;
  --danger:#d64545;
  --warn:#c77f1a;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45;
  min-height:100vh;
}
#app{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}

/* Top bar */
#topbar{
  background:var(--navy);color:#fff;padding:.8rem 1rem;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:baseline;gap:.5rem}
.brand-mark{background:var(--teal);color:#fff;font-weight:800;letter-spacing:.06em;
  padding:.2rem .5rem;border-radius:6px;font-size:1rem}
.brand-sub{font-size:.85rem;opacity:.85}
.user-chip{font-size:.8rem;background:rgba(255,255,255,.14);padding:.25rem .6rem;border-radius:999px;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Main view */
#view{flex:1;padding:1rem 1rem 5.5rem}
#view.plain{padding-top:2rem}

/* Bottom nav */
#bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:640px;background:var(--navy);
  display:flex;justify-content:space-around;padding:.55rem .5rem calc(.55rem + env(safe-area-inset-bottom));
  z-index:50;border-top:2px solid var(--teal);
}
.nav-btn{background:none;border:none;color:#cfe3dd;font-size:.75rem;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.4rem 1rem;border-radius:8px;cursor:pointer;min-width:88px;min-height:52px}
.nav-btn .nav-icon{font-size:1.35rem}
.nav-btn.active{color:#fff;background:rgba(14,159,138,.35)}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;margin-bottom:.9rem;box-shadow:0 1px 3px rgba(14,42,71,.06)}
.card h2{font-size:1.05rem;margin-bottom:.6rem}
.job-card{cursor:pointer;position:relative}
.job-card:active{background:#f4f1ea}
.job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.4rem}
.job-id{font-size:.75rem;color:var(--muted)}
.job-title{font-weight:700;font-size:1rem;margin:.15rem 0}
.job-meta{font-size:.85rem;color:var(--muted);margin:.25rem 0}
.job-meta strong{color:var(--ink)}
.job-actions-row{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}

/* Badges */
.badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:.22rem .55rem;border-radius:999px;line-height:1.2;white-space:nowrap}
.b-urgent{background:#fbe3e3;color:#a42828}
.b-high{background:#fdeeda;color:#8f5a12}
.b-normal,.b-medium{background:#e3f3f0;color:#0b6b5c}
.b-low{background:#eef1f5;color:#5b6b7f}
.b-sched{background:#e7edf5;color:#31435c}
.b-enroute{background:#fff3d6;color:#8a6111}
.b-onsite{background:#e0f2fe;color:#0b5c8a}
.b-working{background:#e3f3f0;color:#0b6b5c}
.b-completed{background:#e6f4ea;color:#1e7a34}
.b-pending{background:#f0e7f7;color:#5e3590}
.b-resched{background:#fdeeda;color:#8f5a12}
.b-paid{background:#e6f4ea;color:#1e7a34}
.b-unpaid,.b-processing{background:#fff3d6;color:#8a6111}
.b-failed{background:#fbe3e3;color:#a42828}

/* Status action buttons */
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.6rem 0}
.status-btn{
  border:2px solid var(--teal);background:#fff;color:var(--navy);
  border-radius:10px;padding:.85rem .5rem;font-size:1rem;font-weight:700;cursor:pointer;min-height:56px;
}
.status-btn:active{background:var(--teal);color:#fff}
.status-btn.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.status-btn.primary:active{background:var(--teal-dark)}
.status-btn:disabled{opacity:.45;cursor:wait}

/* Forms */
label.f{display:block;margin-bottom:.8rem;font-size:.9rem}
label.f .flabel{display:block;font-weight:600;margin-bottom:.3rem;font-size:.85rem;color:var(--navy)}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{
  width:100%;padding:.75rem;border:1.5px solid var(--line);border-radius:8px;font-size:1rem;background:#fff;color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
textarea{min-height:88px;resize:vertical}
.hint{font-size:.78rem;color:var(--muted);margin-top:.3rem}
.btn{
  display:inline-block;border:none;border-radius:10px;padding:.85rem 1.2rem;font-size:1rem;font-weight:700;
  cursor:pointer;background:var(--navy);color:#fff;min-height:52px;width:100%;
}
.btn:active{opacity:.85}
.btn.teal{background:var(--teal)}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy);width:auto}
.btn.danger{background:#fff;color:var(--danger);border:2px solid var(--danger);width:auto}
.btn-row{display:flex;gap:.6rem;margin-top:.8rem}
.btn-row .btn{width:auto;flex:1}

/* Notes thread */
.note{border-left:3px solid var(--teal);padding:.5rem .7rem;margin-bottom:.6rem;background:#fbfaf7;border-radius:0 8px 8px 0}
.note .nmeta{font-size:.75rem;color:var(--muted);margin-bottom:.2rem}

/* Timeline */
.tl{list-style:none;margin:.5rem 0}
.tl li{position:relative;padding:.4rem 0 .4rem 1.4rem;font-size:.85rem}
.tl li::before{content:"";position:absolute;left:.35rem;top:.85rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--teal)}
.tl li::after{content:"";position:absolute;left:.62rem;top:1.5rem;bottom:-.3rem;width:2px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl .tmeta{color:var(--muted);font-size:.75rem}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th{text-align:left;padding:.5rem;border-bottom:2px solid var(--line);color:var(--navy);font-size:.78rem;text-transform:uppercase}
.tbl td{padding:.55rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}

/* Totals */
.totals{display:flex;gap:.6rem;margin-bottom:.9rem}
.total{flex:1;background:var(--navy);color:#fff;border-radius:var(--radius);padding:.8rem;text-align:center}
.total .tval{font-size:1.5rem;font-weight:800;color:#fff}
.total .tlabel{font-size:.75rem;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.total.pending{background:#8a6111}
.total.paid{background:var(--teal-dark)}

/* States */
.state{padding:3rem 1rem;text-align:center;color:var(--muted)}
.state .big{font-size:2.5rem;margin-bottom:.6rem}
.state h2{color:var(--navy);margin-bottom:.4rem}
.retry{margin-top:1rem}
.spinner{width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--teal);
  border-radius:50%;margin:0 auto 1rem;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Filters */
.filterbar{display:flex;gap:.5rem;margin-bottom:.9rem;overflow-x:auto;padding-bottom:.2rem}
.chip{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:.5rem .9rem;font-size:.85rem;font-weight:600;color:var(--navy);cursor:pointer}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Detail sections */
.sec{margin-top:1.2rem}
.sec h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);margin-bottom:.5rem;
  border-bottom:2px solid var(--line);padding-bottom:.3rem}
.kv{display:flex;justify-content:space-between;gap:.8rem;padding:.45rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted);flex:0 0 42%}
.kv .v{text-align:right;word-break:break-word}

/* Modal */
#modal-root .overlay{position:fixed;inset:0;background:rgba(10,31,53,.6);z-index:100;display:flex;
  align-items:flex-end;justify-content:center}
.modal{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;padding:1.2rem}
.modal h2{margin-bottom:.8rem}
@media(min-width:480px){#modal-root .overlay{align-items:center;padding:1rem}.modal{border-radius:16px}}

/* Toast */
#toast-root{position:fixed;left:50%;transform:translateX(-50%);bottom:6rem;z-index:200;width:min(92vw,560px)}
.toast{background:var(--navy-deep);color:#fff;padding:.8rem 1rem;border-radius:10px;margin-bottom:.5rem;font-size:.9rem;
  box-shadow:0 4px 12px rgba(0,0,0,.25);border-left:4px solid var(--teal)}
.toast.error{border-left-color:var(--danger)}

.attach-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.attach{font-size:.8rem;background:#eef4f2;border:1px solid var(--line);border-radius:8px;padding:.35rem .6rem}
.hidden{display:none!important}
.center{text-align:center}
.mt{margin-top:.8rem}
.small{font-size:.82rem}