/* Reviews + Recent Work - dashboard styles. Mobile first. */
:root {
  --navy: #16204a; --navy-2: #23307a; --cyan: #05baf2; --violet: #7547ff;
  --ink: #232a45; --muted: #66708c; --line: #e3e7f1; --soft: #f5f7fc; --bg: #f3f5fa; --card: #fff;
  --ok: #12a150; --ok-bg: #e6f6ec; --warn: #b7791f; --warn-bg: #fff6e0; --bad: #d4382c; --bad-bg: #fdecea;
  --radius: 12px; --shadow: 0 1px 2px rgba(22,32,74,.06), 0 4px 14px rgba(22,32,74,.05);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); }
a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--navy); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
img { max-width: 100%; }
code { font-size: .88em; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .nowrap { white-space: nowrap; }
.right { text-align: right; } .center { text-align: center; }
.mt0 { margin-top: 0 } .mt1 { margin-top: .75rem } .mt2 { margin-top: 1.5rem } .mb0 { margin-bottom: 0 } .mb1 { margin-bottom: .75rem }

/* ---------- App shell ---------- */
.shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px;
  background: var(--navy); color: #fff; }
.topbar .brand { display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--head); font-weight: 700; font-size: 15px; }
.topbar .brand img { height: 40px; }
.topbar .spacer { flex: 1; }
.topbar .acct { font-size: 13px; color: #c8d0f0; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-btn { background: none; border: 0; color: #fff; padding: 8px; margin-left: -6px; cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; }
.sidenav { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: 264px; background: var(--navy); color: #c8d0f0;
  transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto; padding: 14px 10px 30px; }
.sidenav.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
.sidenav .logo { display: block; padding: 6px 10px 16px; }
.sidenav .logo img { height: 62px; max-width: 100%; object-fit: contain; }
.sidenav .client-name { padding: 0 10px 12px; color: #fff; font-weight: 600; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 10px; }
.sidenav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: #c8d0f0; font-size: 14.5px; font-weight: 500; }
.sidenav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.sidenav a.active { background: linear-gradient(90deg, rgba(117,71,255,.55), rgba(5,186,242,.35)); color: #fff; }
.sidenav a svg { width: 19px; height: 19px; flex-shrink: 0; opacity: .9; }
.sidenav .sec { padding: 14px 12px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7f89b3; }
.scrim { position: fixed; inset: 0; z-index: 35; background: rgba(10,14,35,.45); display: none; }
.scrim.show { display: block; }
.main { padding: 16px 14px 60px; max-width: 1180px; margin: 0 auto; }
.acting-bar { background: #fff3c4; color: #6b5200; font-size: 13px; padding: 7px 14px; text-align: center; }
.acting-bar a { color: #6b5200; font-weight: 700; text-decoration: underline; }

@media (min-width: 960px) {
  .menu-btn { display: none; }
  .topbar { display: none; }
  .sidenav { transform: none; width: 240px; }
  .scrim { display: none !important; }
  .with-nav { margin-left: 240px; }
  .main { padding: 28px 32px 70px; }
}

/* ---------- Page header ---------- */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.back-link:hover { color: var(--text, inherit); }
.back-link svg { width: 16px; height: 16px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Cards / grid ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-head h2, .card-head h3 { margin: 0; }
.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; }   /* wide tables scroll inside their card instead of stretching the page */
.g-2-1, .g2 { align-items: start; }   /* side-by-side cards keep their own heights (no empty stretched cards) */
/* Row actions with 1-2 choices: small text links side by side */
.row-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 16px; font-size: 13px; line-height: 1.3; }
.row-acts > * { margin: 0; white-space: nowrap; }
.row-acts a, .row-acts .linkbtn { color: var(--violet); font-weight: 600; font-size: 13px; cursor: pointer; }
.row-acts .linkbtn.danger, .row-acts a.danger { color: var(--bad); }
.row-acts a:hover, .row-acts .linkbtn:hover { text-decoration: underline; }
/* Row actions with 3+ choices: one small "Actions" button that opens a menu */
td:has(> .acts) { width: 1%; white-space: nowrap; }
/* Schedule: Actions button with the crew picker stacked under it, same width */
td.sched-side { width: 160px; min-width: 160px; }
td.sched-side .acts { display: block; width: 100%; }
td.sched-side .acts > summary { display: flex; width: 100%; justify-content: space-between; height: 30px; padding: 3px 12px 3px 10px; }
td.sched-side .acts > summary::after { margin: -4px 0 0 0; }
.sched-crew { margin-top: 6px; }
.sched-crew select { width: 100%; min-height: 30px; height: 30px; padding: 3px 26px 3px 10px; font: 600 13px var(--font); color: var(--navy); border-radius: 9px; border-color: var(--line); background-color: #fff; }
.sched-crew .small { display: block; text-align: right; }
@media (max-width: 639px) { td.sched-side { width: auto; min-width: 0; } td.sched-side .acts, td.sched-side .acts > summary { display: inline-flex; width: auto; } .sched-crew { margin-top: 8px; } .sched-crew select { width: auto; } }
.acts { display: inline-block; position: relative; text-align: left; }
.acts > summary { list-style: none; }
.acts > summary.sm { min-height: 30px; padding: 3px 10px 3px 12px; font-size: 13px; }
.acts > summary::-webkit-details-marker { display: none; }
.acts > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -3px 0 0 2px; opacity: .7; }
.acts[open] > summary { background: var(--soft); border-color: #c9cfe0; }
.acts .menu { position: fixed; z-index: 60; min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(22,32,74,.16); padding: 5px; white-space: normal; }
.acts .menu form { margin: 0; }
.acts .mi { display: block; width: 100%; text-align: left; padding: 8px 11px; border: 0; border-radius: 7px; background: none; font: 500 14px var(--font); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; min-height: 0; }
.acts .mi:hover { background: var(--soft); text-decoration: none; }
.acts .mi.danger { color: var(--bad); } .acts .mi.danger:hover { background: var(--bad-bg); }
.acts .sep { height: 1px; background: var(--line); margin: 5px 6px; }
.acts .sub > summary { list-style: none; } .acts .sub > summary::-webkit-details-marker { display: none; }
.acts .sub[open] > summary { background: var(--soft); }
.acts .subform { padding: 8px 10px 6px; width: 230px; }
@media (max-width: 639px) { .tbl.stack td:has(> .acts) { display: block; padding-top: 6px; width: auto; } .tbl.stack td:has(> .acts)::before { display: none; } }
.pinbox[open] summary { margin-left: auto; }
.g4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 639px) { .stat .value { font-size: 1.45rem; } .stat { padding: 12px 13px; } }
@media (min-width: 640px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .g-2-1 { grid-template-columns: 2fr 1fr; } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.stat .label { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-family: var(--head); font-size: 1.7rem; font-weight: 800; color: var(--navy); line-height: 1.2; margin-top: 2px; }
.stat .hint { font-size: 12.5px; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 15px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; color: var(--navy); font: 600 14px var(--font); cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.btn:hover { border-color: #c9cfe0; background: var(--soft); }
input[type=file] { font: inherit; font-size: 14px; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 15px; margin-right: 12px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--soft); border-color: #c9cfe0; }
.btn.primary { background: linear-gradient(90deg, var(--violet), #5b5cff); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.danger { color: var(--bad); border-color: #f1c4c0; }
.btn.danger:hover { background: var(--bad-bg); }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn.block { width: 100%; }
.btn svg { width: 17px; height: 17px; }
.linkbtn { background: none; border: 0; padding: 0; min-height: 0; color: var(--violet); font: inherit; cursor: pointer; }
.linkbtn.danger { color: var(--bad); }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label, .lbl { display: block; font-weight: 600; font-size: 13.5px; color: var(--navy); margin-bottom: 5px; }
.field .help { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.card > .help { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.rem-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.rem-grid .field { margin: 0; display: flex; align-items: center; gap: 12px; }
.rem-grid .field label { margin: 0; width: 100px; flex: 0 0 100px; }
.rem-in { display: flex; align-items: center; gap: 8px; }
.rem-in input { width: 72px; flex: 0 0 72px; }
.rem-in span { white-space: nowrap; font-size: 13.5px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=time], input[type=month], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #d5dae7; border-radius: 9px; background: #fff; color: var(--ink);
  font: 15px var(--font); }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(117,71,255,.15); }
input[type=color] { width: 54px; height: 40px; padding: 2px; border: 1px solid #d5dae7; border-radius: 8px; background: #fff; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; margin-bottom: 10px; cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--violet); flex-shrink: 0; }
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: var(--violet); }
.tbl input[type=checkbox] { width: 17px; height: 17px; margin: 0; vertical-align: middle; cursor: pointer; }
.field label.check { display: flex; font-weight: 400; font-size: 14.5px; color: var(--ink); margin-bottom: 10px; }
.row { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .row.r2 { grid-template-columns: 1fr 1fr; } .row.r3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 640px) { .row.r3.addr-row { grid-template-columns: 2fr 0.8fr 1.1fr; } }   /* City / State / Zip */
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.save-row { margin: 22px 0 26px; display: flex; gap: 10px; flex-wrap: wrap; }   /* page-level Save button below the sections */
.counter { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.counter.warn { color: var(--warn); font-weight: 600; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl 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); white-space: nowrap; }
.tbl th.right { text-align: right; } .tbl th.center { text-align: center; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl.form-rows td { vertical-align: middle; }   /* rows of inputs: checkboxes line up with the boxes */
.tbl tr:last-child td { border-bottom: 0; }
.tbl.compact td, .tbl.compact th { padding: 6px 8px; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--soft); }
/* mobile: stack table rows as cards */
@media (max-width: 639px) {
  .tbl.stack thead { display: none; }
  .tbl.stack tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .tbl.stack td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
  .tbl.stack td::before { content: attr(data-l); font-weight: 600; color: var(--muted); font-size: 12.5px; text-align: left; }
  .tbl.stack td.full { display: block; text-align: left; } .tbl.stack td.full::before { display: none; }
}

/* ---------- Pills / alerts ---------- */
.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--soft); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); } .pill.info { background: #eaf6fe; color: #0789b3; }
.pill.violet { background: #efeaff; color: var(--violet); }
.alert { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; border: 1px solid; }
.alert.ok { background: var(--ok-bg); border-color: #bfe6cd; color: #0d6e37; }
.alert.err { background: var(--bad-bg); border-color: #f4c7c3; color: #9f2a21; }
.alert.warn { background: var(--warn-bg); border-color: #f2dda6; color: #7a5212; }
.alert.info { background: #eef4ff; border-color: #cfdcff; color: #2c3f87; }
.empty { text-align: center; padding: 30px 16px; color: var(--muted); }
.empty h3 { color: var(--navy); }

/* ---------- Copy box / misc ---------- */
.copy { display: flex; gap: 8px; align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; margin: 8px 0 12px; }
.copy code { flex: 1; border: 0; background: none; padding: 0; font-size: 13px; }
pre.snippet { background: var(--navy); color: #d9e0ff; padding: 14px; border-radius: 10px; overflow-x: auto; font-size: 13px; white-space: pre-wrap; word-break: break-all; }
.steps-list { padding-left: 20px; } .steps-list li { margin-bottom: 8px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a { padding: 9px 14px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--navy); border-color: var(--violet); text-decoration: none; }
.fleet-tabs { gap: 6px; padding: 6px; margin-bottom: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.fleet-tabs a { font-size: 15px; padding: 10px 18px; border: 0; border-radius: 8px; color: var(--navy); }
.fleet-tabs a:hover { background: #f1eefc; text-decoration: none; }
.fleet-tabs a.active { background: var(--navy); color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters a { padding: 5px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--muted); font-weight: 600; }
.filters a.active { background: var(--navy); color: #fff; border-color: var(--navy); text-decoration: none; }
.stars { color: #f5b300; letter-spacing: 1px; white-space: nowrap; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }

/* ---------- Projects ---------- */
.proj-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .proj-grid { grid-template-columns: repeat(3, 1fr); } }
.proj { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; color: inherit; }
.proj:hover { text-decoration: none; border-color: #cdd3e6; }
.proj .ph { aspect-ratio: 16/10; background: var(--soft) center/cover no-repeat; position: relative; }
.proj .ph .count { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 10px; }
.proj .ph .badge { position: absolute; left: 8px; top: 8px; }
.proj .body { padding: 12px 14px; }
.proj h3 { font-size: 15px; margin: 0 0 3px; }
.proj .meta { font-size: 12.5px; color: var(--muted); }
.photo-row { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-row .ph { position: relative; width: 120px; height: 90px; border-radius: 8px; background: var(--soft) center/cover; border: 1px solid var(--line); }
.photo-row .ph form { position: absolute; top: 4px; right: 4px; }
.photo-row .ph button { background: rgba(0,0,0,.65); color: #fff; border: 0; border-radius: 6px; font-size: 12px; padding: 2px 7px; cursor: pointer; }
.upload-drop { display: block; border: 2px dashed #cfd5e6; border-radius: 12px; padding: 22px; text-align: center; background: #fafbfe; cursor: pointer; }
.upload-drop:hover { border-color: var(--violet); }
.upload-drop input { display: none; }
.upload-drop .big { font-weight: 700; color: var(--navy); display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 4px; }
.upload-drop .big svg { width: 34px; height: 34px; color: var(--violet); }
.previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.previews img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ---------- Sequence steps ---------- */
.seq-step { display: grid; gap: 10px; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #fff; }
@media (min-width: 760px) { .seq-step { grid-template-columns: 40px 110px minmax(200px, 360px) 1fr; align-items: end; } }
.seq-step.new { border-style: dashed; background: transparent; }
.seq-step .seq-opts { display: flex; gap: 16px; align-items: center; justify-content: flex-end; min-height: 40px; }
.seq-step .seq-opts .check { margin: 0; }
.seq-step .num { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--violet), var(--cyan)); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.seq-step .field { margin: 0; }

/* ---------- Public / auth pages ---------- */
.pub { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(160deg, #16204a 0%, #23307a 55%, #3b2a8f 100%); }
.pub-head { padding: 18px 20px; } .pub-head img { height: 54px; }
.pub-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 10px 14px 50px; }
@media (min-width: 640px) { .pub-main { align-items: center; } }
.pub-card { width: 100%; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.pub-card.wide { max-width: 760px; }
.pub-card h1 { font-size: 1.45rem; }
.pub-foot { text-align: center; color: #9ea8d4; font-size: 12.5px; padding: 16px; }
.pub-foot a { color: #c8d0f0; }
.hero-pub { color: #fff; text-align: center; max-width: 760px; margin: 10px auto 26px; }
.hero-pub h1 { color: #fff; font-size: 2rem; } .hero-pub p { color: #d0d7f5; font-size: 1.05rem; }
.hero-pub h1 span { color: #5fd8ff; }

/* ---------- Tech portal ---------- */
.tech .main { max-width: 640px; }
.job-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); color: inherit; }
.job-card:hover { text-decoration: none; border-color: var(--violet); }
.job-card .t { font-weight: 700; color: var(--navy); } .job-card .s { font-size: 13px; color: var(--muted); }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 20; border-radius: 30px; padding: 14px 20px; box-shadow: 0 8px 24px rgba(117,71,255,.4); }

/* ---------- Help: floating button, slide-out panel, help center, articles ---------- */
.help-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 6px;
  background: var(--navy); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px 10px 12px; font: 600 14px/1 var(--font);
  box-shadow: 0 6px 20px rgba(22,32,74,.28); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.help-fab:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(22,32,74,.34); }
.help-fab:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.help-fab svg { width: 20px; height: 20px; }
@media (max-width: 639px) { .help-fab span { display: none; } .help-fab { padding: 12px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); } }
@media print { .help-fab, .help-panel, .help-scrim { display: none !important; } }
.help-scrim { position: fixed; inset: 0; background: rgba(15,20,40,.35); z-index: 70; opacity: 0; transition: opacity .2s; }
.help-scrim.open { opacity: 1; }
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 80; background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(15,20,40,.18); transform: translateX(100%); transition: transform .2s ease; }
.help-panel.open { transform: none; }
body.help-lock { overflow: hidden; }
.help-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.help-panel-head b { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 17px; }
.help-panel-head svg { width: 20px; height: 20px; color: var(--violet); }
.help-x { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--muted); border-radius: 8px; }
.help-x:hover { background: var(--soft); } .help-x svg { width: 20px; height: 20px; display: block; }
.help-panel-search { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--soft); }
.help-panel-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 28px; }
.help-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; -webkit-overflow-scrolling: touch; }
.help-panel-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 14px; }
.help-searchbar { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.help-searchbar:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(117,71,255,.15); }
.help-searchbar svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.help-searchbar input { border: 0 !important; box-shadow: none !important; outline: none; background: transparent; flex: 1; min-width: 0; padding: 10px 0; font-size: 15px; }
.help-search-card .help-searchbar input { font-size: 16px; padding: 12px 0; }
.help-crumb { text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 11.5px; margin-bottom: 4px; }
.help-art-title { margin: 0 0 4px; font-size: 20px; }
.help-result { display: block; padding: 10px 12px; margin: 0 -12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.help-result:hover { background: var(--soft); }
.help-result b { display: block; color: var(--ink); } .help-result .pill { margin-left: 6px; vertical-align: 1px; }
.help-result .small { display: block; margin-top: 2px; }
.help-result.tight { padding: 6px 12px; }
.help-linkbtn { background: none; border: 0; color: var(--violet); padding: 0; margin: 0 0 10px; cursor: pointer; font: 600 13px var(--font); }
.help-ai-cta { display: block; width: 100%; text-align: left; background: rgba(117,71,255,.07); border: 1px dashed rgba(117,71,255,.45); color: var(--ink);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; font: 14px var(--font); }
.help-ai-cta b { color: var(--violet); }
.help-ai-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); margin-top: 10px; }
.help-ai-q { font-weight: 600; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.help-thinking { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 4px; }
.help-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); display: inline-block; animation: helpdot 1s infinite ease-in-out; }
.help-thinking span:nth-child(2) { animation-delay: .15s; } .help-thinking span:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes helpdot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .help-panel, .help-scrim, .help-fab { transition: none; } .help-thinking span { animation: none; } }
.help-article { font-size: 15px; line-height: 1.6; }
.help-article h2 { font-size: 17px; margin: 20px 0 6px; } .help-article h3 { font-size: 15px; margin: 16px 0 4px; }
.help-article p { margin: 0 0 10px; } .help-article ul, .help-article ol { margin: 0 0 12px; padding-left: 22px; }
.help-article li { margin: 3px 0; } .help-article li.sub { list-style: circle; margin-left: 18px; }
.help-article .lead { font-size: 16px; }
.help-callout { border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 14px; background: #eef9ff; border: 1px solid #c6ebfb; }
.help-callout.note { background: #fff8e6; border-color: #f6dfa0; }
article.help-article h1 { font-size: 26px; }

/* Shared pager (views/partials/pager.php) */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pager .btn.sm { min-width: 34px; padding: 4px 9px; }
.pager .btn.current { background: var(--navy); border-color: var(--navy); color: #fff; cursor: default; }
.pager .btn.disabled { opacity: .45; cursor: default; pointer-events: none; }
.pager-gap { padding: 0 2px; color: var(--muted); }
@media (max-width: 480px) { .pager { justify-content: center; } .pager-info { width: 100%; text-align: center; } .pager .btn.far { display: none; } }
.card > .pager:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Inventory ---------- */
.bad-text { color: var(--bad); }
.inv-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.14); max-height: 320px; overflow-y: auto; margin-top: 4px; }
.inv-result { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 12px; cursor: pointer; font: inherit; color: inherit; }
.inv-result:last-child { border-bottom: 0; }
.inv-result:hover, .inv-result:focus { background: var(--soft); }
.restock-row { display: grid; grid-template-columns: 1fr 70px 70px 90px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.restock-row input { min-height: 36px; padding: 6px 8px; }
@media (max-width: 480px) { .restock-row { grid-template-columns: 1fr 52px 52px 70px; font-size: 14px; } }

/* ---------- Crew day schedule ---------- */
.day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.next-card { border: 2px solid var(--violet); }
.visit-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.visit-btns .btn { flex: 1 1 auto; justify-content: center; }
.visit-list { display: grid; gap: 8px; margin-bottom: 8px; }
.visit { display: grid; grid-template-columns: 92px 1fr; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: inherit; text-decoration: none; }
.visit:hover { text-decoration: none; border-color: var(--violet); }
.visit.is-next { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet) inset; }
.visit.done { opacity: .6; }
.visit .vt { font-size: 14px; line-height: 1.3; }
.visit .vn { font-weight: 700; }
.visit .stop { display: block; font-size: 11px; font-weight: 700; color: var(--violet); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.late-btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.late-btns .btn { justify-content: center; padding-left: 4px; padding-right: 4px; }
@media (max-width: 380px) { .visit { grid-template-columns: 76px 1fr; } .late-btns { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Office pages: darker page, navy section headers, clearer tables ---------- */
body.office { background: #c3ccdc; }
.office .grid { gap: 18px; }
.office .card { border-color: #c4ccdb; box-shadow: 0 1px 2px rgba(22,32,74,.10), 0 6px 18px rgba(22,32,74,.10); margin-bottom: 18px; }
.office .grid > .card { margin-bottom: 0; }
.office .grid:not(:last-child) { margin-bottom: 18px; }   /* a row of side-by-side sections keeps its gap to whatever comes next */
/* section title as a navy band (also when the card is a form that starts with hidden inputs) */
.office .card:not(.empty) > :is(h2, h3, .card-head):first-child,
.office .card:not(.empty) > input[type=hidden]:first-child + :is(h2, h3, .card-head),
.office .card:not(.empty) > input[type=hidden]:first-child + input[type=hidden] + :is(h2, h3, .card-head),
.office .card:not(.empty) > input[type=hidden]:first-child + input[type=hidden] + input[type=hidden] + :is(h2, h3, .card-head) {
  margin: -17px -17px 16px; padding: 12px 17px; background: var(--navy); border-top: 0; border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; font-size: 1.02rem; color: #e8ecf8; font-weight: 600; letter-spacing: .01em; }
.office .card > .card-head :is(h2, h3) { font-size: 1.02rem; color: #e8ecf8; font-weight: 600; }
.card-head select { min-height: 32px; padding: 4px 30px 4px 10px; font-size: 14px; }
.office .card > .card-head .pill { background: rgba(255,255,255,.14); color: #fff; }
.office .card > .card-head a:not(.btn), .office .card > :is(h2, h3) a { color: #b9c6ff; }
.office .card > .card-head .muted, .office .card > .card-head .small { color: #c9d1ea; }
/* headings further down inside a card: a small section label with a rule */
.office .card > :is(h2, h3):not(:first-child) { font-size: .95rem; padding-top: 14px; margin-top: 18px; border-top: 1px dashed #c4ccdb; }
.office .card > .card-head + :is(h2, h3) { border-top: 0; padding-top: 0; margin-top: 0; }   /* first label right under the navy band: no rule */
/* tables */
.office .tbl th { background: #e3e8f2; color: #4b5573; border-bottom-color: #c4ccdb; }
.office .tbl tbody tr:nth-child(even) td { background: #f8f9fc; }
.office .tbl tbody tr:hover td { background: #eef2fb; }
/* text that sits right on the darker page background (not inside a white section): darker so it reads */
.office .page-head .sub, .office .back-link { color: #2f3a58; }
.office .back-link:hover { color: var(--navy); }
.office .main :is(.muted, .help, .small):not(.card *):not(.btn):not(.pill) { color: #2f3a58; }
.office .main > :is(p, h2, h3) a:not(.btn), .office .main :is(.muted, .small):not(.card *) a:not(.btn) { color: #3b2bb8; }
.office .main code:not(.card *) { background: #e3e8f2; border-color: #b7c1d3; }

/* dashboard usage */
.usage-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .usage-grid { grid-template-columns: 1fr 1fr; } }
.usage-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.usage-bar { height: 10px; background: #e3e8f2; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.usage-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), #5b5cff); border-radius: 6px; }
.usage-bar span.over { background: var(--bad); }

/* ---------- Schedule calendar ---------- */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--navy); }
.cal-arrow:hover { background: var(--soft); border-color: #c9cfe0; text-decoration: none; }
.cal-arrow svg { width: 18px; height: 18px; }
.cal-range { font: 700 1.1rem var(--head); color: var(--navy); margin: 0 6px; }
.seg { display: inline-flex; background: #eef1f8; border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg a { padding: 6px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg a:hover { text-decoration: none; color: var(--navy); }
.seg a.on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(22,32,74,.15); }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 18px; }
.day-tile { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.day-tile:hover { text-decoration: none; border-color: #b9b0f5; background: #faf9ff; }
.day-tile .dow, .wk-head .dow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.day-tile .dnum, .wk-head .dnum { font: 700 1.45rem/1.15 var(--head); color: var(--navy); }
.day-tile .dcount { font-size: 12px; font-weight: 600; color: var(--violet); min-height: 18px; }
.day-tile .dcount.late { color: var(--bad); }
.day-tile.past:not(.sel) { background: #f7f8fb; }
.day-tile.past:not(.sel) .dnum { color: #7d869f; }
.day-tile.today { border-color: var(--violet); }
.day-tile.today .dow { color: var(--violet); }
.day-tile.sel { background: var(--violet); border-color: var(--violet); box-shadow: 0 4px 12px rgba(117,71,255,.3); }
.day-tile.sel .dow, .day-tile.sel .dnum, .day-tile.sel .dcount { color: #fff; }
.day-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--navy); }
.office .card > .day-head h3, .day-head h3 { margin: 0; font-size: 1.15rem; padding: 0; border: 0; }
.day-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 10px 30px; color: var(--muted); }
.day-empty svg { width: 40px; height: 40px; color: #b8c0d6; margin-bottom: 4px; }
.visits { display: flex; flex-direction: column; gap: 10px; }
.visit { display: grid; grid-template-columns: 112px 1fr 170px; gap: 14px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-left: 5px solid var(--tc, var(--violet)); border-radius: 10px; background: #fff; scroll-margin-top: 80px; }
.visit:target { box-shadow: 0 0 0 3px rgba(117,71,255,.25); }
.visit .v-time b { display: block; font: 700 1.15rem/1.2 var(--head); color: var(--navy); }
.visit .v-time span { display: block; font-size: 14px; color: var(--ink); }
.visit .v-time small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.visit .v-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 1.02rem; margin-bottom: 2px; }
.visit .v-body > div + div { margin-top: 2px; }
.visit .v-side { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.visit .v-side .acts, .visit .v-side .acts > summary { display: flex; width: 100%; justify-content: space-between; }
.visit .v-side .sched-crew { margin-top: 0; }
.visit .v-side > .small { text-align: right; }
.visit.late { background: var(--bad-bg); border-color: #f4c7c3; border-left-color: var(--bad); }
.visit.done { background: #f6fbf8; }
.visit.cancelled { background: #f7f8fb; border-left-color: #cfd5e3; color: var(--muted); }
.visit.cancelled .v-time b, .visit.cancelled .v-name b { color: var(--muted); text-decoration: line-through; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); gap: 1px; }
.wk-col { background: #fff; display: flex; flex-direction: column; min-height: 260px; }
.wk-col.past { background: #f9fafc; }
.wk-head { display: flex; flex-direction: column; align-items: center; padding: 8px 4px 7px; background: var(--soft); border-bottom: 1px solid var(--line); color: var(--ink); }
.wk-head:hover { text-decoration: none; background: #eeeafe; }
.wk-col.today .wk-head { background: var(--violet); }
.wk-col.today .wk-head .dow, .wk-col.today .wk-head .dnum { color: #fff; }
.wk-list { display: flex; flex-direction: column; gap: 6px; padding: 7px 6px 10px; }
.wk-visit { display: flex; flex-direction: column; padding: 6px 7px; border-radius: 7px; background: color-mix(in srgb, var(--tc) 11%, #fff); border-left: 4px solid var(--tc); color: var(--ink); font-size: 12.5px; line-height: 1.3; }
.wk-visit:hover { text-decoration: none; background: color-mix(in srgb, var(--tc) 20%, #fff); }
.wk-visit .t { font-weight: 700; color: var(--navy); font-size: 12px; }
.wk-visit b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-visit .svc, .wk-visit .who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-visit.late { background: var(--bad-bg); border-left-color: var(--bad); }
.wk-visit.late .who { color: var(--bad); font-weight: 600; }
.wk-visit.done { opacity: .7; }
.wk-visit.done .who { color: var(--ok); font-weight: 600; }
.wk-none { color: #b0b7c9; font-size: 12px; text-align: center; padding-top: 10px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
@media (max-width: 860px) {
  .visit { grid-template-columns: 96px 1fr; }
  .visit .v-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .visit .v-side .acts, .visit .v-side .acts > summary { width: auto; }
  .week-grid { grid-template-columns: 1fr; }
  .wk-col { min-height: 0; flex-direction: row; }
  .wk-head { width: 74px; flex: none; justify-content: center; border-bottom: 0; border-right: 1px solid var(--line); }
  .wk-list { flex: 1; min-width: 0; }
  .wk-none { text-align: left; padding: 6px 2px; }
}
@media (max-width: 639px) {
  .week-strip { gap: 4px; }
  .day-tile { padding: 7px 2px 6px; border-radius: 10px; }
  .day-tile .dnum { font-size: 1.2rem; }
  .day-tile .dcount .w { display: none; }
  .cal-range { font-size: 1rem; }
  .visit { grid-template-columns: 1fr; gap: 8px; }
  .visit .v-time { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .visit .v-time b, .visit .v-time span { display: inline; }
}
.wk-more { display: block; text-align: center; padding: 5px; border-radius: 7px; background: var(--soft); border: 1px dashed #c9cfe0; font-size: 12.5px; font-weight: 700; color: var(--violet); }
.wk-more:hover { text-decoration: none; background: #eeeafe; }
.cal-legend b { color: var(--ink); }
.cal-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-crew select { min-height: 38px; height: 38px; padding: 4px 30px 4px 12px; font: 600 14px var(--font); color: var(--navy); border-radius: 10px; min-width: 150px; }

/* ---------- Saving by section ---------- */
.save-status { margin-left: auto; padding-left: 12px; font: 600 13px var(--font); letter-spacing: 0; white-space: nowrap; transition: opacity .6s; }
.save-status:empty { display: none; }
.save-status.busy { color: var(--muted); }
.save-status.ok { color: var(--ok); }
.save-status.ok::before { content: ""; display: inline-block; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 7px 1px 0; }
.save-status.ok.fade { opacity: 0; }
.save-status.bad { color: var(--bad); }
.save-status.todo { color: var(--warn); }
.office .card > :is(h2, h3) .save-status.busy { color: #c9d1ea; }
.office .card > :is(h2, h3) .save-status.ok { color: #7fe0a7; }
.office .card > :is(h2, h3) .save-status.bad { color: #ffb3ab; }
.office .card > :is(h2, h3) .save-status.todo { color: #ffd77a; }
.office .card > :is(h2, h3):has(.save-status) { display: flex; align-items: center; }
.save-err { margin: 0 0 14px; }
.group-save { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.group-save .save-status { margin-left: 0; padding-left: 0; }
.btn.primary:disabled { opacity: .4; cursor: default; filter: none; }
.save-note { font-size: 13px; color: var(--muted); margin: -6px 0 14px; }
.svc-table td.row-status { width: 1%; white-space: nowrap; padding-left: 0; }
.svc-table td.row-status .save-status { padding-left: 4px; }
.svc-table td.row-status .save-status.bad { white-space: normal; display: block; min-width: 160px; font-size: 12px; }
.svc-add { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #c4ccdb; }
.svc-add h3 { font-size: .95rem; margin-bottom: 8px; }
.svc-add-row { display: grid; grid-template-columns: 2fr 1fr 2fr 1fr auto; gap: 10px; align-items: end; }
.svc-add-row .field { margin-bottom: 0; }
@media (max-width: 860px) { .svc-add-row { grid-template-columns: 1fr 1fr; } }

/* Schedule: Add a booking + Next open times */
.fd-below { grid-template-columns: 1fr; }
@media (min-width: 960px) { .fd-below { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.open-times { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: start; }
.ot-day { font-weight: 600; font-size: 14px; white-space: nowrap; padding-top: 4px; }
.ot-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.ot-slot { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #eef1fb; color: var(--navy, #16204a); white-space: nowrap; }

/* Pop-up box (dialog) */
dialog.modal { border: 0; border-radius: 14px; padding: 22px; width: min(480px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(15,20,40,.3); }
dialog.modal::backdrop { background: rgba(15,20,40,.45); }
dialog.modal h3 { margin-top: 0; }
dialog.modal .check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 6px 0 12px; }
dialog.modal .check input { margin-top: 3px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.ot-for { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ot-for label { font-weight: 600; font-size: 14px; }
.ot-for select { width: auto; max-width: 100%; }

/* Default shift pattern cells */
.pattern { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.pat-cell { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.pat-cell select { min-height: 0; padding: 6px 26px 6px 8px; font-size: 13px; }

/* Crew schedule: 2-week roster */
.roster { font-size: 13px; }
.roster th { text-align: center; font-size: 12px; white-space: nowrap; padding: 6px 4px; }
.roster th span { font-weight: 400; color: var(--muted, #667085); }
.roster th.today { background: #efeaff; color: var(--violet); }
.roster th.wkend, .roster td.cell.wkend { background: #fafbfe; }
.roster td.who { white-space: nowrap; font-weight: 600; min-width: 120px; }
.roster td.cell { text-align: center; padding: 4px 2px; min-width: 58px; vertical-align: middle; }
.roster th, .roster td { border-left: 1px solid var(--line); }
.roster td.who, .roster th:first-child { border-left: 0; }
.roster td.cell .hrs { display: block; font-size: 11.5px; white-space: nowrap; }
.roster td.not-working .hrs, .roster td.not-working select { color: #98a2b3; }
.roster td.changed select { font-weight: 700; border-color: var(--violet); }
.roster td.is-off { background: var(--bad-bg); }
.roster .off-tag { display: block; font-size: 11px; font-weight: 700; color: var(--bad); }
.roster select.shift-pick { min-height: 0; padding: 3px 16px 3px 4px; font-size: 12px; width: 100%; min-width: 76px; background-position: right 2px center; }

.wk-visit.moving { background: var(--warn-bg); border-left-color: var(--warn); }
.wk-visit.moving .who { color: var(--warn); font-weight: 600; }

/* Mark someone out: cover their visits */
.cover-list { display: grid; gap: 12px; }
.cover { display: grid; grid-template-columns: 260px 1fr; gap: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.cover-visit b { display: block; margin-bottom: 4px; }
.cover-opts { display: grid; gap: 6px; }
.cover .opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.cover .opt:has(input:checked) { border-color: var(--violet); background: #f6f3ff; }
.cover .opt:has(input:disabled) { opacity: .55; cursor: default; }
.cover .opt input { margin-top: 3px; }
.cover .opt small { display: block; color: var(--muted, #667085); font-size: 12.5px; }
.cover .opt.none { color: var(--bad); font-size: 13px; border-style: dashed; cursor: default; }
@media (max-width: 760px) { .cover { grid-template-columns: 1fr; } }

.hol-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hol-pick select { width: auto; min-height: 0; padding: 6px 28px 6px 10px; }
.hol-pick input[type=time] { width: 130px; max-width: 130px; display: inline-block; }
.roster .hol-tag { display: block; font-size: 11px; font-weight: 700; color: var(--warn); }

.hol-booked a { font-weight: 600; font-size: 12px; color: var(--muted, #667085); }
.hol-table tr.hol-clash td { background: var(--bad-bg); }
.hol-table tr.hol-clash .hol-booked a { color: var(--bad); }

.wk-visit.emergency { border-left-color: var(--bad); }
.wk-visit.emergency .who { color: var(--bad); font-weight: 700; }

/* Fleet */
.truck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; }
.truck-card { display: block; color: inherit; text-decoration: none; margin: 0; }
.truck-card:hover { border-color: var(--violet); }
.tc-head { font-size: 17px; margin-bottom: 2px; }
.tc-rows { display: grid; gap: 4px; }
.tc-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; border-top: 1px solid var(--line); }
.tc-row .pill { white-space: nowrap; }
.att-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.doc-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-sec { scroll-margin-top: 80px; }

.maint-row { border-top: 1px solid var(--line); padding: 8px 0; }
.maint-row details { display: inline-block; margin-right: 10px; }
.mini-form { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfe; }
fieldset.warr { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 0 0 12px; }
fieldset.warr legend { font-weight: 600; font-size: 14px; padding: 0 4px; }

.truck-tag { display: inline-block; background: var(--navy); color: #fff; font-family: var(--head); font-weight: 800; font-size: 22px; padding: 6px 16px; border-radius: 10px; margin: 0 0 12px; letter-spacing: .3px; }
.truck-tag.big { font-size: 28px; padding: 8px 18px; margin: 4px 0 12px; }

.miles-tbl td { vertical-align: top; }
.miles-tbl .truck-name { font-weight: 800; font-size: 17px; color: var(--navy); }
.miles-tbl tr.has-err td { background: var(--bad-bg); }

.truck-tag .num { font-size: 1.25em; }
.truck-tag .nm { font-family: var(--body, inherit); font-weight: 600; font-size: .62em; opacity: .85; margin-left: 10px; }
.tc-num { display: inline-block; background: var(--navy); color: #fff; font-weight: 800; border-radius: 7px; padding: 1px 9px; font-size: 15px; }

.miles-tbl .mi-l { display: block; font-size: 12px; font-weight: 600; color: var(--muted, #667085); margin: 0 0 3px; }
.miles-tbl .mi-l + .mi-in, .miles-tbl .mi-in { width: 100%; max-width: 220px; }
.miles-tbl input[type=date].mi-in { margin-bottom: 2px; }
.miles-tbl td:first-child { width: 45%; }
.miles-tbl .bad-text + .mi-l, .miles-tbl input.mi-in + .mi-l, .miles-tbl .check + .mi-l { margin-top: 8px; }

.st-list { display: grid; gap: 6px; }
.st-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.st-row .st-last { display: none; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 8px; }
.st-row.on { border-color: var(--violet); background: #faf8ff; }
.st-row.on .st-last { display: flex; }
.st-last label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--muted, #667085); gap: 3px; }
.st-last input { min-height: 0; padding: 6px 8px; max-width: 160px; }
dialog.modal-wide { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
dialog.modal .linkbtn { color: var(--violet) !important; }
/* Fleet dashboard */
.fleet-stats .stat { text-align: left; font: inherit; cursor: pointer; border-top: 4px solid var(--line); }
.fleet-stats .stat.bad { border-top-color: var(--bad); } .fleet-stats .stat.warn { border-top-color: var(--warn); } .fleet-stats .stat.ok { border-top-color: var(--ok); }
.fleet-stats .stat.on { outline: 2px solid var(--violet); outline-offset: -2px; }
.fleet-stats .stat.bad .value { color: var(--bad); } .fleet-stats .stat.warn .value { color: var(--warn); } .fleet-stats .stat.ok .value { color: var(--ok); }
.att-box summary { cursor: pointer; }
.fb-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.fb-bar input { max-width: 320px; }
.fb-tbl td { padding: 7px 10px; vertical-align: middle; }
.fb-tbl th { vertical-align: bottom; }
.fb-tbl th .fb-every { font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.fb-tbl td.center, .fb-tbl th.center { text-align: center; }
.fb-tbl .nowrap { white-space: nowrap; }
.fb-row { cursor: pointer; }
.fb-row:hover td { background: #f7f5ff; }
.fb-row td:first-child { border-left: 4px solid transparent; }
.fb-row.lv-overdue td:first-child { border-left-color: var(--bad); }
.fb-row.lv-soon td:first-child, .fb-row.lv-unknown td:first-child { border-left-color: var(--warn); }
.fb-row.lv-ok td:first-child { border-left-color: var(--ok); }
.fb-truck { white-space: nowrap; }
.fb-truck a { color: var(--navy); font-weight: 600; text-decoration: none; }
.fb-stale { color: var(--bad); }
.fb-tbl tr[hidden] { display: none; }
.fb-tbl td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
.fb-tbl th:first-child { position: sticky; left: 0; z-index: 1; }
/* Maintenance schedules list */
.sched-card .sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.sched-card h2 { margin: 0; }
.sc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-tbl td { padding: 4px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.sc-tbl td:first-child { padding-left: 0; white-space: nowrap; }
.sc-tbl td:first-child a { color: var(--navy); font-weight: 600; text-decoration: none; }
.sc-tbl td.right { text-align: right; padding-right: 0; }
.sc-tbl .nowrap { white-space: nowrap; }
dialog.modal-wide .modal-btns { position: sticky; bottom: -22px; background: #fff; padding: 12px 0; margin-bottom: -10px; border-top: 1px solid var(--line); }
.fb-tbl th.sortable { cursor: pointer; user-select: none; }
.fb-tbl th.sortable:hover { color: var(--violet); }
.fb-tbl th.asc, .fb-tbl th.desc { color: var(--violet); }
.fb-tbl th.asc::after { content: " \25B2"; font-size: 10px; } .fb-tbl th.desc::after { content: " \25BC"; font-size: 10px; }
.fb-tbl th.center.asc::after, .fb-tbl th.center.desc::after { display: block; }
/* Fleet dashboard cards */
.fb-bar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; }
.fb-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); }
.fb-sort select { width: auto; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 10px; }
.fb-card { display: block; margin: 0; padding: 12px 14px; color: inherit; text-decoration: none; border-top: 4px solid var(--line); }
.fb-card:hover { border-color: var(--violet); text-decoration: none; }
.fb-card.lv-overdue { border-top-color: var(--bad); } .fb-card.lv-soon, .fb-card.lv-unknown { border-top-color: var(--warn); } .fb-card.lv-ok { border-top-color: var(--ok); }
.fb-card[hidden] { display: none; }
.fbc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fbc-name { font-size: 15px; color: var(--navy); }
.fbc-miles { text-align: right; font-size: 13px; white-space: nowrap; }
.fbc-sub { margin-top: 2px; }
.fbc-rows { margin-top: 8px; }
.fbc-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--line); }
.fbc-row.sorted { background: #f4f1ff; margin: 0 -6px; padding: 4px 6px; border-radius: 6px; font-weight: 600; }
/* Truck page */
.ft-hero { padding: 0; overflow: hidden; }
.ft-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; }
.ft-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ft-num { background: var(--navy); color: #fff; font-family: var(--head); font-weight: 800; font-size: 26px; line-height: 1; padding: 12px 16px; border-radius: 12px; letter-spacing: .3px; white-space: nowrap; }
.ft-id h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.ft-meta { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.ft-meta .dot { margin: 0 7px; opacity: .6; }
.ft-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: #f8f9fc; }
.ft-stat { padding: 14px 20px; border-left: 1px solid var(--line); min-width: 0; }
.ft-stat:first-child { border-left: 0; }
.ft-stat .lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ft-stat .val { font-family: var(--head); font-size: 1.35rem; font-weight: 800; color: var(--navy); margin-top: 2px; line-height: 1.25; }
.ft-stat .val.bad { color: var(--bad); } .ft-stat .val.warn { color: var(--warn); } .ft-stat .val.ok { color: var(--ok); }
.ft-stat .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ft-stat .sub.bad { color: var(--bad); }
.ft-stat .sub .linkbtn { font-size: 12.5px; }
.ft-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ft-layout .card { margin-bottom: 18px; }
.ft-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.card-head + .ft-item { border-top: 0; padding-top: 4px; }
.ft-item-title { font-weight: 700; color: var(--navy); }
.ft-item-acts { display: flex; align-items: center; gap: 10px; }
.ft-item-acts form { margin: 0; }
.ft-problem { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.ft-problem form { margin: 0; }
.ft-hist td { vertical-align: top; }
.ft-hist .right, .ft-miles .right { text-align: right; }
.ft-hist .nowrap, .ft-miles .nowrap { white-space: nowrap; }
.ft-costs { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 12px; padding: 10px 12px; background: #f8f9fc; border-radius: 10px; font-size: 14px; }
.ft-costs .lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ft-doc { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.card-head + .ft-doc { border-top: 0; padding-top: 2px; }
.ft-miles { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ft-miles td { padding: 6px 4px; border-top: 1px solid var(--line); }
.ft-miles tr:first-child td { border-top: 0; }
.ft-dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; font-size: 14px; }
.ft-dl dt { color: var(--muted); font-size: 13px; }
.ft-dl dd { margin: 0; text-align: right; font-weight: 600; color: var(--navy); word-break: break-all; }
.ft-modal-truck { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ft-modal-truck .truck-tag { margin: 0; }
@media (max-width: 900px) {
  .ft-layout { grid-template-columns: 1fr; }
  .ft-stats { grid-template-columns: repeat(2, 1fr); }
  .ft-stat:nth-child(3) { border-left: 0; }
  .ft-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .ft-item { grid-template-columns: 1fr auto; }
  .ft-item-acts { grid-column: 1 / -1; }
  .ft-actions { width: 100%; } .ft-actions .btn { flex: 1; }
}
/* Sign-in */
.pin-input { letter-spacing: 8px; font-size: 22px; }
.signin-who { margin: 0 0 12px; font-size: 17px; } .signin-who a { font-size: 14px; margin-left: 6px; }
.signin-help { margin-top: 16px; text-align: center; display: grid; gap: 8px; }
.signin-help p { margin: 0; }
.signin-help summary { cursor: pointer; color: var(--violet); font-weight: 600; }
.forgot-pin { text-align: left; margin-top: 8px; display: grid; gap: 8px; }
.forgot-pin p { margin: 0; }
/* Switch between the office and the crew app */
.sidenav a.crew-switch, .topbar .crew-switch { background: linear-gradient(90deg, #7547ff, #05baf2); color: #fff; font-weight: 700; justify-content: center; }
.sidenav a.crew-switch { margin: 0 4px 12px; box-shadow: 0 4px 14px rgba(117,71,255,.35); }
.sidenav a.crew-switch:hover { filter: brightness(1.08); color: #fff; }
.topbar .crew-switch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; font-size: 13px; text-decoration: none; }
.topbar .crew-switch svg { width: 16px; height: 16px; }
.office-switch { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(90deg, #7547ff, #05baf2); color: #fff; font-weight: 700; font-size: 13.5px; padding: 7px 12px; border-radius: 9px; margin-right: 10px; text-decoration: none; white-space: nowrap; }
.office-switch:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }
.office-switch svg { width: 15px; height: 15px; }
.a2hs { display: grid; gap: 4px; padding: 12px 14px; border-left: 4px solid var(--violet); }
.a2hs[hidden] { display: none; }
.a2hs .linkbtn { justify-self: start; }
/* Team member page */
.tp-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.tp-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #7547ff, #05baf2); color: #fff; font-family: var(--head); font-weight: 800; font-size: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-who h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.tp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 5px 0 3px; }
.tp-contact { color: var(--muted); font-size: 13.5px; }
.tp-contact .dot { margin: 0 7px; opacity: .6; }
.tp-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tp-single .tp-side { column-count: 2; column-gap: 18px; }
.tp-single .tp-side > * { break-inside: avoid; display: block; }
.tp-single .tp-side > dialog { display: none; } .tp-single .tp-side > dialog[open] { display: block; }
.tp-layout .card, .tp-single .card { margin-bottom: 18px; }
.tp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
@media (max-width: 900px) { .tp-layout { grid-template-columns: 1fr; } .tp-single .tp-side { column-count: 1; } }
/* Settings home: one tile per section */
.set-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.set-tile { display: flex; align-items: center; gap: 14px; margin: 0 !important; padding: 18px; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.set-tile:hover { border-color: var(--violet) !important; text-decoration: none; transform: translateY(-1px); }
.set-ic { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #7547ff, #05baf2); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.set-ic svg { width: 22px; height: 22px; }
.set-txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.set-txt b { color: var(--navy); font-size: 16px; }
.set-txt span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.set-go { color: var(--muted); flex-shrink: 0; } .set-go svg { width: 18px; height: 18px; transform: rotate(180deg); }
@media (max-width: 560px) { .set-tiles { grid-template-columns: 1fr; } }
/* Crew app on phones: fits the screen, no zooming, feels like an app */
body.tech { overflow-x: hidden; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
.tech .topbar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.tech .topbar .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech .main { overflow-x: hidden; }
.tech input, .tech select, .tech textarea { font-size: 16px; }   /* iPhone zooms in on smaller text boxes */
.crew-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 14px 0; }
.crew-actions .btn { min-width: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .crew-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech .office-switch { padding: 7px 10px; font-size: 13px; margin-right: 8px; }
  .tech .topbar .brand { font-size: 14px; }
}
/* Crew app: job details + customer contact */
.job-open { display: block; color: inherit; text-decoration: none; }
.job-open:hover { text-decoration: none; }
.job-more { color: var(--violet); font-weight: 600; }
.crew-contact .cc-name { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.cc-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); color: var(--ink, #1c2440); text-decoration: none; }
.cc-row:hover { text-decoration: none; background: #f7f5ff; }
.cc-row svg { width: 20px; height: 20px; color: var(--violet); flex-shrink: 0; }
.cc-row span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.cc-row small { color: var(--violet); font-weight: 600; font-size: 12.5px; }

/* Crew app: map app chooser */
.nav-sheet { border: 0; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); width: 100%; max-width: 480px; margin: auto auto 0; box-shadow: 0 -8px 30px rgba(20,25,60,.25); }
.nav-sheet::backdrop { background: rgba(15,20,45,.45); }
.ns-head { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.ns-x { border: 0; background: none; font-size: 26px; line-height: 1; padding: 0 4px; color: #667; cursor: pointer; }
.ns-dest { margin: 2px 0 10px; overflow-wrap: anywhere; }
.ns-list { display: grid; gap: 8px; }
.ns-app { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; font-size: 16px; color: var(--ink, #1c2440); text-decoration: none; }
.ns-app:hover, .ns-app:active { background: #f7f5ff; text-decoration: none; }
.ns-app[hidden] { display: none; }
.ns-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; }
.ns-keep { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; color: #556; }
.ns-change { margin-top: 18px; text-align: center; }
.crew-back { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-decoration: none; padding: 7px 12px 7px 8px; border-radius: 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); white-space: nowrap; }
.crew-back:hover, .crew-back:active { background: rgba(255,255,255,.24); text-decoration: none; color: #fff; }
.crew-back svg { width: 20px; height: 20px; }
.crew-logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; padding: 4px 8px; min-width: 0; flex: 0 1 auto; }
/* Keep the logo's own shape: scale down to fit (never stretch), whatever its size or proportions. */
.crew-logo img { display: block; width: auto; height: auto; max-height: 34px; max-width: min(48vw, 220px); object-fit: contain; }
.rv-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
body.tech .rv-btns .btn { flex: 1 1 auto; justify-content: center; }
body.tech .rv-card .grid.g2 { grid-template-columns: 1fr; }

/* Job page: parts & labor, notes (crew + office) */
.jw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.jw-total { font-size: 20px; font-weight: 800; color: var(--navy); }
.jw-list { margin: 4px 0 12px; }
.jw-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.jw-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px; background: #eef1fb; color: #3a4a8a; }
.jw-kind.k-labor { background: #fff4e0; color: #8a5a00; }
.jw-kind.k-other { background: #f1eefc; color: #5b3fd6; }
.jw-main { min-width: 0; overflow-wrap: anywhere; }
.jw-amt { font-weight: 700; white-space: nowrap; }
.jw-edit { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--violet); cursor: pointer; }
.jw-add { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jw-add .btn { justify-content: center; }
.jw-bill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.jw-bill form { margin: 0; }
.jw-line-total { text-align: right; margin: -4px 0 6px; color: #556; }
.jw-note-form { display: grid; gap: 8px; margin-bottom: 8px; }
.jw-note-form .btn { justify-self: end; }
.jw-note { padding: 10px 0; border-top: 1px solid var(--line); }
.jw-note-body { margin-top: 3px; overflow-wrap: anywhere; }
.job-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .job-layout { grid-template-columns: 1fr; } }
body.tech .jw-nums { grid-template-columns: 1fr 1fr; }

/* Language links (English · Español · Português) */
.lang-switch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: 13px; }
.lang-switch b { font-weight: 700; }
.sidenav .lang-switch { justify-content: flex-start; padding: 10px 12px 4px; color: #7f89b3; }
.sidenav .lang-switch a { display: inline; padding: 0; border-radius: 0; font-size: 13px; color: #c8d0f0; }
.sidenav .lang-switch a:hover { background: none; text-decoration: underline; }
.sidenav .lang-switch b { color: #fff; }
.pub-foot .lang-switch { margin-bottom: 6px; }
.crew-lang { margin: 22px 0 6px; color: var(--muted, #6b7393); }
.crew-lang a { font-weight: 600; }

/* company name: desktop only (office and crew) */
@media (max-width: 959px) { .desk-only { display: none !important; } }

/* inventory photos */
.inv-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.inv-photo { display: grid; gap: 4px; justify-items: center; }
.inv-photo img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.inv-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); float: left; margin: 0 10px 0 0; }

.crew-signout { color: #c8d0f0; display: inline-flex; align-items: center; padding: 6px; }
.crew-signout svg { width: 22px; height: 22px; }
.crew-signout:hover { color: #fff; }
.crew-pin { color: #c8d0f0; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; margin-right: 6px; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; }

/* photo viewer (data-gallery) */
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(8,10,20,.92); display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.lb button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; border-radius: 50%; width: 46px; height: 46px; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lb button:hover { background: rgba(255,255,255,.25); }
.lb button[hidden] { display: none; }
.lb-x { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-n { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #c8d0f0; font-size: 14px; }

/* crew parts: bigger SKU, price on its own line */
.crew-sku { font-size: 15px; font-weight: 600; color: var(--ink, #1c2340); margin-top: 3px; letter-spacing: .2px; }
.crew-price { font-size: 19px; font-weight: 800; color: #0b8a4a; margin-top: 4px; }
.jw-kind.k-discount { background: #e6f6ec; color: #0b7a3e; }

/* crew job-done checklist */
.ck-item { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.ck-item:last-child { border-bottom: 0; }
.ck-q { font-weight: 600; font-size: 16px; }
.ck-item.done .ck-q { color: var(--muted); }
.ck-btns { display: flex; gap: 8px; }
.ck-opt { flex: 1; }
.ck-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ck-opt span { display: block; text-align: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; cursor: pointer; background: #fff; }
.ck-opt.ok input:checked + span { background: #0b8a4a; border-color: #0b8a4a; color: #fff; }
.ck-opt.skip input:checked + span { background: #fff4e0; border-color: #d99a2b; color: #8a5a00; }

/* project photos: one grid (tap to view, x to remove, + tile to add), new ones marked until saved */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.pt { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); }
.pt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt.new { border: 2px dashed var(--violet); }
.pt-x { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pt-x:hover { background: #b42318; }
.pt-tag { position: absolute; left: 5px; bottom: 5px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.pt-tag.new { background: var(--violet); }
.pt-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed #cfd5e6; background: #fafbfe; cursor: pointer; color: var(--navy); font-weight: 700; font-size: 13px; text-align: center; }
.pt-add:hover { border-color: var(--violet); }
.pt-add svg { width: 30px; height: 30px; color: var(--violet); }
.pstage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 10px 12px; background: #f3efff; border-radius: 10px; font-weight: 600; color: #4b2bbf; }
.save-row.sticky { position: sticky; bottom: 12px; z-index: 20; margin: 16px 0 24px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 18px rgba(22,32,74,.12); justify-content: flex-end; align-items: center; gap: 10px; }
.pstage[hidden] { display: none; }
.card-foot { display: flex; justify-content: flex-end; gap: 10px; margin: 16px -16px -16px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fafbfe; border-radius: 0 0 12px 12px; }
.pgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* ---------- Reports ---------- */
.rp .seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: #e9ecf5; border-radius: 10px; padding: 3px; }
.rp .seg a, .rp .seg button { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.rp .seg a:hover, .rp .seg button:hover { color: var(--navy); text-decoration: none; }
.rp .seg .on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(22,32,74,.12); }
.rp .seg.sm a, .rp .seg.sm button { font-size: 12.5px; padding: 4px 10px; }
.rp-vs { color: var(--muted); }
.rp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.rp-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-custom[hidden] { display: none; }
.rp-custom label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; margin: 0; }
.rp-custom input { width: auto; padding: 6px 8px; }
.rk { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 960px) { .rk { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.rk-tile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 12px; min-width: 0; color: inherit; overflow: hidden; }
a.rk-tile:hover { text-decoration: none; border-color: #cfd4ea; }
.rk-tile.hero { background: linear-gradient(135deg, #16204a 0%, #2b2a7a 60%, #4b2fb8 100%); border-color: transparent; color: #fff; }
.rk-tile.hero .rk-l, .rk-tile.hero .rk-h span { color: #c6ccef; }
.rk-tile.hero .rk-v { color: #fff; }
.rk-l { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.rk-v { font-family: var(--head); font-size: 1.75rem; font-weight: 800; color: var(--navy); line-height: 1.15; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.rk-v.warn { color: #b4570e; }
.rk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.rk-spark { height: 34px; margin: 8px -4px -2px; }
.rk-tile.hero .rk-spark svg path[stroke] { stroke: #b9a8ff; }
.rk-tile.hero .rk-spark svg circle { fill: #fff; }
.rk-tile.hero .rk-spark stop { stop-color: #b9a8ff; }
@media (max-width: 639px) { .rk-v { font-size: 1.4rem; } .rk-tile { padding: 12px 13px 10px; } }
.rdelta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12px; padding: 1px 7px 1px 6px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.rdelta svg { width: 9px; height: 9px; fill: currentColor; }
.rdelta.up { background: var(--ok-bg); color: var(--ok); }
.rdelta.down { background: var(--bad-bg); color: var(--bad); }
.rdelta.flat, .rdelta.new { background: var(--soft); color: var(--muted); }
.rk-tile.hero .rdelta.up { background: rgba(18,161,80,.25); color: #8ff0b6; }
.rk-tile.hero .rdelta.down { background: rgba(212,56,44,.28); color: #ffb3ad; }
.rk-tile.hero .rdelta.flat, .rk-tile.hero .rdelta.new { background: rgba(255,255,255,.12); color: #dfe3fb; }
.rp-hl { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-start; background: linear-gradient(90deg, #f6f3ff, #effaff); border-color: #e2dcfb; }
.rp-hl-t { display: flex; align-items: center; gap: 7px; font-family: var(--head); font-weight: 800; color: var(--navy); font-size: 14px; padding-top: 2px; white-space: nowrap; }
.rp-hl-t svg { width: 18px; height: 18px; color: var(--violet); }
.rp-hl ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 240px; display: grid; gap: 4px; }
.rp-hl li { position: relative; padding-left: 18px; font-size: 14px; }
.rp-hl li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.rp-hl li.hl-up::before { background: var(--ok); } .rp-hl li.hl-down::before, .rp-hl li.hl-warn::before { background: #e08a00; }
.rp-main .card-head { align-items: flex-start; }
.rlegend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.rlegend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; flex-shrink: 0; }
.sw.cur { width: 10px; height: 10px; border-radius: 3px; background: #7547ff; }
.sw.prev { width: 16px; height: 0; border-top: 2px dashed #9aa3bd; }
.rchart-wrap { width: 100%; min-height: 220px; position: relative; }
.rchart { display: block; overflow: visible; touch-action: pan-y; }
.rchart .rax { font-size: 11px; fill: #8a93ad; font-variant-numeric: tabular-nums; }
.rchart .rempty { font-size: 13px; fill: #8a93ad; }
.rchart .rbar { transition: fill .12s; }
.rtip { position: fixed; z-index: 90; display: none; pointer-events: none; background: #16204a; color: #fff; font-size: 12.5px; line-height: 1.45; padding: 8px 11px; border-radius: 9px; box-shadow: 0 8px 24px rgba(10,14,35,.25); max-width: 260px; }
.rtip b { font-weight: 700; }
.rtip-t { font-weight: 700; margin-bottom: 4px; color: #fff; }
.rtip-r { display: flex; align-items: center; gap: 7px; color: #c8d0f0; }
.rtip-r b { margin-left: auto; padding-left: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.rtip .sw.prev { border-top-color: #c8d0f0; }
.rtip .sw.cur { background: #9d85ff; }
.rp-table { margin-top: 10px; }
.rp-table summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600; }
.rp-empty { color: var(--muted); font-size: 14px; background: var(--soft); border: 1px dashed var(--line); border-radius: 10px; padding: 18px 16px; text-align: center; }
.rbig { font-family: var(--head); font-size: 1.6rem; font-weight: 800; color: var(--navy); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.rbig .small { font-family: var(--font); font-weight: 500; }
.rstack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--soft); }
.rstack.tall { height: 22px; }
.rstack span { min-width: 3px; cursor: default; transition: opacity .12s; }
.rstack:hover span { opacity: .55; } .rstack span:hover { opacity: 1; }
.rkeys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 12px 0 4px; }
.rkeys > div { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.rkeys i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rkeys i.hollow { border: 2px solid #9aa3bd; }
.rkeys span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkeys em { font-style: normal; color: #a0a8c0; font-size: 12px; }
.rkeys b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.rsub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; }
.rsub .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rsub.mt0 { margin-top: 0; }
.rrow { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; border-radius: 6px; }
.rrow:hover { background: var(--soft); }
.rrow-l { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow-l a { overflow: hidden; text-overflow: ellipsis; }
.rrow-t { height: 10px; background: #f0f2f8; border-radius: 0 4px 4px 0; }
.rrow-t span { display: block; height: 100%; background: #7547ff; border-radius: 0 4px 4px 0; }
.rrow-v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 52px; }
.rav { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #efeaff; color: var(--violet); font-weight: 800; font-size: 11.5px; flex-shrink: 0; }
.rlist { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.rlist-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.rlist a { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--line); color: inherit; font-size: 13.5px; }
.rlist a:last-child { border-bottom: 0; }
.rlist a:hover { background: var(--soft); text-decoration: none; }
.rlist a > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlist-v { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.rprofit { display: flex; gap: 18px; align-items: center; }
.rprofit > div:last-child { flex: 1; min-width: 0; }
.rp-gauge { --p: 0; flex-shrink: 0; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, #fff 76%, transparent 77%), conic-gradient(#12a150 calc(var(--p) * 1%), #edf0f6 0); }
.rp-gauge b { font-family: var(--head); font-size: 1.35rem; color: var(--navy); line-height: 1; }
.rp-gauge span { font-size: 11.5px; color: var(--muted); }
.rpl { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rpl span { color: var(--muted); }
.rpl.tot { border-bottom: 0; font-size: 15px; }
.rpl.tot span { color: var(--ink); font-weight: 700; }
.rheat { display: grid; gap: 3px; align-items: center; }
.rh-h { font-size: 10.5px; color: var(--muted); text-align: left; white-space: nowrap; overflow: visible; height: 14px; width: 0; }
.rh-d { font-size: 12px; color: var(--muted); font-weight: 600; padding-right: 6px; }
.rh-c { aspect-ratio: 1; min-height: 12px; border-radius: 3px; background: #f1f3f8; }
.rh-c:hover { outline: 2px solid #16204a; outline-offset: 1px; }
.rh-scale { display: flex; align-items: center; gap: 3px; justify-content: flex-end; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.rh-scale i { width: 14px; height: 10px; border-radius: 2px; }
.rh-scale span { margin: 0 4px; }
.rfunnel { display: grid; gap: 4px; }
.rfunnel > div { width: var(--w); min-width: 120px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 0 6px 6px 0;
  background: #e8e1ff; color: var(--navy); font-size: 13.5px; }
.rfunnel > div:nth-child(2) { background: #cfc1ff; } .rfunnel > div:nth-child(3) { background: #7547ff; color: #fff; }
.rrev { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 960px) { .rrev { grid-template-columns: repeat(4, 1fr); } }
.rmeter { height: 6px; background: #f0f2f8; border-radius: 4px; overflow: hidden; max-width: 160px; }
.rmeter span { display: block; height: 100%; background: #12a150; border-radius: 4px; }
.rp-foot { margin-top: 18px; }
@media print {
  .sidenav, .topbar, .rp-noprint, .help-btn, .scrim { display: none !important; }
  .with-nav { margin-left: 0 !important; }
  .main { padding: 0 !important; max-width: none; }
  body { background: #fff; }
  .card, .rk-tile { box-shadow: none; break-inside: avoid; }
  .rk-tile.hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Dispatch board (schedule, day view) ---- */
.dplan { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.dplan.made { background: #f4f1ff; border-color: #ddd3ff; }
.dplan.sent { background: var(--ok-bg); border-color: #c4e9d2; }
.dplan-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--violet); box-shadow: var(--shadow); }
.dplan-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.dplan-body { flex: 1; min-width: 0; }
.dplan-body > b { margin-right: 6px; }
.dplan-save { color: var(--ok); font-weight: 600; }
.dplan-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dplan-btns form { margin: 0; }
.db-scroll { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; background: #fff; }
.db { --who: 215px; background: #fff; user-select: none; }
.db-who, .db-who-h { position: sticky; left: 0; z-index: 5; background: #fff; }
.db-who-h { background: var(--soft); }
.db-row.over .db-who { background: #f1edff; }
.db-head { display: grid; grid-template-columns: var(--who) 1fr; background: var(--soft); border-bottom: 1px solid var(--line); }
.db-who-h { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-right: 1px solid var(--line); }
.db-axis { position: relative; height: 34px; margin: 0 14px; }
.db-axis span { position: absolute; top: 9px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.db-axis span:first-child { transform: none; } .db-axis span:last-child { transform: translateX(-100%); }
.db-row { display: grid; grid-template-columns: var(--who) 1fr; border-bottom: 1px solid var(--line); transition: background .12s; }
.db-row:last-child { border-bottom: 0; }
.db-row.over { background: #f1edff; }
.db-who { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-right: 1px solid var(--line); min-width: 0; }
.db-who > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.db-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-who .small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--tc, var(--violet)); }
.db-av.open { background: #fff; color: var(--muted); border: 2px dashed #b8c0d6; }
.db-track { position: relative; margin: 6px 14px; min-height: 52px; }
.db-grid { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 1px dashed #eceff6; }
.db-off { position: absolute; top: -6px; bottom: -6px; background: repeating-linear-gradient(135deg, #f4f5f9 0 6px, #eceef4 6px 12px); }
.db-off.full { display: grid; place-items: center; border-radius: 8px; top: 2px; bottom: 2px; background: #6b7186; }
.db-off.full span { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.db-now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--bad); z-index: 3; }
.db-drive { position: absolute; height: 0; border-top: 2px dotted #9aa3bd; z-index: 1; }
.db-job { position: absolute; height: 48px; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 2px 7px; text-align: left; overflow: hidden; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.2; color: var(--ink); border: 1px solid color-mix(in srgb, var(--tc) 35%, #fff); border-left: 4px solid var(--tc); border-radius: 7px; background: color-mix(in srgb, var(--tc) 12%, #fff); }
.db-job:hover { background: color-mix(in srgb, var(--tc) 22%, #fff); z-index: 4; min-width: 150px; }
.db-job b, .db-job .jt, .db-job .js { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.db-job .jt { font-size: 11px; font-weight: 600; color: var(--muted); }
.db-job .jt svg, .dbm-b svg, .jd-lock svg { width: 11px; height: 11px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.db-job .js { color: var(--muted); font-size: 11px; }
.db-job.open { border-style: dashed; border-left-style: solid; background: #f7f8fb; }
.db-job.unplanned { border-style: dashed; border-left-style: solid; }
.db-job.st-done { background: #f1f3f7; border-color: #dfe3ec; border-left-color: #aab2c5; color: var(--muted); }
.db-job.st-done b { text-decoration: line-through; text-decoration-color: #aab2c5; }
.db-job.em { border-left-color: var(--bad); background: var(--bad-bg); }
.db-job.warnj { box-shadow: 0 0 0 2px var(--warn); }
.db-job.dragging { opacity: .45; }
.db-job.saving { opacity: .6; pointer-events: none; }
.db-job[draggable] { cursor: grab; }
.db-hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #a3abc0; }
.db-foot { margin: 8px 2px 0; }
.dbm { display: none; }
dialog.jd { width: min(560px, calc(100vw - 24px)); padding: 0; }
.jd #jobBody { padding: 18px 20px 20px; }
.jd-head { display: flex; gap: 10px; align-items: flex-start; border-left: 5px solid var(--tc); padding-left: 12px; margin-bottom: 12px; }
.jd-head > div { flex: 1; }
.jd-head h3 { margin: 0 0 4px; } .jd-head h3 a { color: inherit; }
.jd-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.jd-x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.jd-dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0 0 14px; font-size: 14px; }
.jd-dl dt { color: var(--muted); } .jd-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.jd-crew { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; }
.jd-crew label { font-weight: 600; font-size: 14px; white-space: nowrap; } .jd-crew select { flex: 1; }
.jd-lock { margin: 2px 0 12px; }
.jd-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.jd-acts form { margin: 0; }
.btn.danger { color: var(--bad); }
@media (max-width: 760px) {
  .db-scroll, .db-foot { display: none; }
  .dbm { display: flex; flex-direction: column; gap: 14px; }
  .dbm-p { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .dbm-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--soft); border-bottom: 1px solid var(--line); }
  .dbm-h b { flex: 1; }
  .dbm-h .db-av { width: 30px; height: 30px; font-size: 11.5px; }
  .dbm-j { display: grid; grid-template-columns: 84px 1fr; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 0; border-top: 1px solid var(--line); border-left: 4px solid var(--tc); cursor: pointer; }
  .dbm-h + .dbm-j { border-top: 0; }
  .dbm-j.st-done { color: var(--muted); border-left-color: #aab2c5; }
  .dbm-j.warnj { background: var(--warn-bg); }
  .dbm-t, .dbm-b { display: flex; flex-direction: column; min-width: 0; }
  .dbm-t small { color: var(--muted); font-size: 11.5px; }
  .dbm-b small { font-size: 13px; overflow-wrap: anywhere; }
  .dplan { flex-wrap: wrap; }
  .dplan-btns { width: 100%; justify-content: stretch; } .dplan-btns form { flex: 1; } .dplan-btns .btn { width: 100%; }
  .jd-dl { grid-template-columns: 1fr; gap: 0; } .jd-dl dt { margin-top: 8px; font-size: 12.5px; }
  .jd-crew { flex-wrap: wrap; }
}

/* ---- crew check-ins (crew app buttons, board status) ---- */
.checkin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.checkin form { margin: 0; }
.db-job .ck { font-style: normal; font-weight: 700; font-size: 10px; padding: 0 5px; border-radius: 6px; margin-left: 3px; }
.db-job.ck-onsite { box-shadow: 0 0 0 2px var(--ok); }
.db-job.ck-onsite .ck { background: var(--ok-bg); color: var(--ok); }
.db-job.ck-omw .ck { background: #e8f0ff; color: #2456c9; }
.db-job.ck-nocheck { box-shadow: 0 0 0 2px var(--bad); }
.db-job.ck-nocheck .ck { background: var(--bad-bg); color: var(--bad); }
.warn-text { color: var(--warn); }

/* ---- Crew app (cw-*): today's job card, steps, day timeline, tools ---- */
body.tech { --muted: #4c5573; }
.cw-day { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.cw-day-t { flex: 1; text-align: center; min-width: 0; }
.cw-day-t h1 { margin: 0; font-size: 1.45rem; }
.cw-day-t small { display: block; color: var(--muted); font-size: 14px; font-weight: 500; }
.cw-arrow { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid #d5dbea; color: var(--navy); font-size: 26px; line-height: 1; text-decoration: none; box-shadow: var(--shadow); }
.cw-arrow:hover { text-decoration: none; border-color: var(--violet); }
.cw-prog { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.cw-prog span { white-space: nowrap; }
.cw-bar { flex: 1; height: 8px; border-radius: 99px; background: #dfe4f0; overflow: hidden; }
.cw-bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }

.cw-now { background: #fff; border: 1px solid #d5dbea; border-radius: 16px; padding: 16px; margin-bottom: 18px; box-shadow: 0 2px 4px rgba(22,32,74,.06), 0 10px 24px rgba(22,32,74,.08); border-top: 5px solid var(--violet); }
.cw-now.st-omw { border-top-color: #2563eb; }
.cw-now.st-onsite { border-top-color: var(--ok); }
.cw-now.st-done { border-top-color: var(--ok); }
.cw-now.st-off { border-top-color: #9aa3b8; }
.cw-tag { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--violet); margin-bottom: 6px; }
.st-omw > .cw-tag { color: #2456c9; } .st-onsite > .cw-tag, .st-done > .cw-tag { color: var(--ok); } .st-off > .cw-tag { color: var(--muted); }
.cw-now h1, .cw-now h2 { font-size: 1.4rem; margin: 0 0 4px; color: var(--navy); }
.cw-now-main { display: block; color: inherit; text-decoration: none; }
.cw-now-main:hover { text-decoration: none; }
.cw-svc { font-weight: 600; color: var(--ink); }
.cw-meta { color: var(--muted); font-size: 14.5px; }
.cw-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 15px; }
.cw-contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--violet); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cw-contact a svg { width: 16px; height: 16px; flex: none; }
.cw-contact .cw-none { color: var(--muted); font-size: 14px; }
.cw-more { display: inline-block; margin-top: 6px; color: var(--violet); font-weight: 700; font-size: 14px; }

.cw-flow { margin-top: 14px; }
.cw-flow form { margin: 0; }
.cw-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.cw-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; font-size: 13px; font-weight: 600; color: var(--muted); }
.cw-steps li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: #dfe4f0; z-index: 0; }
.cw-steps li:first-child::before { display: none; }
.cw-steps li.is-done::before, .cw-steps li.is-now::before { background: var(--ok); }
.cw-steps i { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; background: #fff; border: 3px solid #cfd6e6; color: var(--muted); margin-bottom: 4px; }
.cw-steps li.is-done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.cw-steps li.is-now i { border-color: var(--violet); color: var(--violet); box-shadow: 0 0 0 4px rgba(117,71,255,.15); }
.cw-steps li.is-now { color: var(--navy); }
.cw-steps li.is-done { color: var(--ink); }
.cw-steps svg, .cw-donebar svg, .cw-dot svg, .cw-alldone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cw-steps small { font-weight: 500; font-size: 12px; color: var(--muted); }
.cw-go { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border: 0; border-radius: 14px; background: var(--violet); color: #fff; font: 800 18px var(--font); letter-spacing: .01em; cursor: pointer; box-shadow: 0 6px 16px rgba(117,71,255,.3); }
.cw-go:active { transform: translateY(1px); }
.cw-go-ok { background: var(--ok); box-shadow: 0 6px 16px rgba(18,161,80,.3); }
.st-omw .cw-go:not(.cw-go-ok) { background: #2563eb; box-shadow: 0 6px 16px rgba(37,99,235,.3); }
.cw-go.is-busy { opacity: .7; }
.cw-help { margin-top: 8px; font-size: 13.5px; color: var(--muted); text-align: center; }
.cw-help form { display: inline; }
.cw-help .linkbtn { font-weight: 700; font-size: 13.5px; }
.cw-donebar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; background: var(--ok-bg); color: var(--ok); font-weight: 800; }

.cw-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cw-quick a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--soft); border: 1px solid #e0e5f0; color: var(--navy); font-size: 12.5px; font-weight: 700; text-decoration: none; text-align: center; }
.cw-quick a:hover { text-decoration: none; border-color: var(--violet); }
.cw-quick svg { width: 22px; height: 22px; fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cw-alldone { display: flex; gap: 12px; align-items: center; background: var(--ok-bg); border: 1px solid #bfe6cd; border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; color: var(--ink); }
.cw-alldone > svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--ok); color: #fff; }
.cw-alldone b { display: block; color: var(--navy); }
.cw-alldone span { font-size: 14px; }
.cw-note { background: #f4f1ff; border: 1px solid #ddd3ff; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.cw-note b { display: block; color: var(--navy); }
.cw-empty { background: #fff; border: 1px dashed #c9d0e0; border-radius: 14px; padding: 22px; text-align: center; color: var(--muted); margin-bottom: 14px; }
.cw-h { font-size: 1.05rem; margin: 20px 0 10px; }

.cw-list { list-style: none; margin: 0; padding: 0; }
.cw-item a { display: grid; grid-template-columns: 74px 26px 1fr 14px; gap: 8px; align-items: stretch; color: inherit; text-decoration: none; }
.cw-item a:hover { text-decoration: none; }
.cw-item a:hover .cw-body { border-color: var(--violet); }
.cw-time { padding-top: 13px; text-align: right; line-height: 1.2; }
.cw-time b { display: block; font-size: 14.5px; color: var(--navy); }
.cw-time small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cw-dot { position: relative; display: flex; justify-content: center; }
.cw-dot::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: #dfe4f0; }
.cw-item:first-child .cw-dot::before { top: 16px; }
.cw-item:last-child .cw-dot::before { bottom: calc(100% - 20px); }
.cw-dot i { position: relative; z-index: 1; width: 20px; height: 20px; margin-top: 12px; border-radius: 50%; background: #fff; border: 3px solid #b9c2d6; display: grid; place-items: center; color: #fff; }
.cw-dot i svg { width: 12px; height: 12px; }
.st-done .cw-dot i { background: var(--ok); border-color: var(--ok); }
.st-onsite .cw-dot i { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 4px rgba(18,161,80,.18); }
.st-omw .cw-dot i { background: #2563eb; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.18); }
.st-next .cw-dot i { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(117,71,255,.15); }
.cw-body { background: #fff; border: 1px solid #d5dbea; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; min-width: 0; }
.st-next .cw-body, .st-omw .cw-body, .st-onsite .cw-body { border-width: 2px; padding: 9px 11px; }
.st-next .cw-body { border-color: var(--violet); } .st-omw .cw-body { border-color: #2563eb; } .st-onsite .cw-body { border-color: var(--ok); }
.st-done .cw-body { background: #f7f9fc; }
.st-done .cw-name { color: var(--ink); }
.cw-name { font-weight: 700; color: var(--navy); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cw-body .cw-svc { font-size: 14px; font-weight: 500; }
.cw-body .cw-meta { font-size: 13.5px; overflow-wrap: anywhere; }
.cw-chip { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: #eef0f6; color: var(--ink); }
.st-done .cw-chip { background: var(--ok-bg); color: #0b7a3b; }
.st-onsite .cw-chip { background: var(--ok); color: #fff; }
.st-omw .cw-chip { background: #2563eb; color: #fff; }
.st-next .cw-chip { background: var(--violet); color: #fff; }
.cw-chip.st-open { background: #eef0f6; color: var(--ink); }
.cw-chip.st-late { background: var(--warn-bg); color: #8a5a10; }
.cw-chev { align-self: center; color: #9aa3b8; font-size: 24px; margin-bottom: 10px; }
.cw-foot { font-size: 13px; color: var(--muted); margin: 2px 0 0; }

.cw-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cw-tools a, .cw-tools button { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #d5dbea; color: var(--navy); font: 700 14.5px var(--font); text-decoration: none; text-align: left; cursor: pointer; width: 100%; }
.cw-tools form { margin: 0; display: contents; }
.cw-tools a:hover, .cw-tools button:hover { border-color: var(--violet); text-decoration: none; }
.cw-tools svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cw-tools a.is-main { background: var(--violet); border-color: var(--violet); color: #fff; }
.cw-tools a.is-main svg { stroke: #fff; }
.card .cw-tools a, .card .cw-tools button { background: var(--soft); }
.card .cw-tools a.is-main { background: var(--violet); }
.cw-up { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #d5dbea; border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.cw-up img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.cw-up b { display: block; color: var(--navy); }
.cw-up span { font-size: 13px; color: var(--muted); }
@media (max-width: 380px) { .cw-item a { grid-template-columns: 62px 22px 1fr 10px; gap: 6px; } .cw-tools { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cw-tools { grid-template-columns: 1fr 1fr; } }
.ns-warn { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: #7a5212; }
.ns-warn[hidden] { display: none; }
/* running behind (Schedule) */
.db-job.wontfit { border-style: dashed; border-color: var(--bad); border-left: 4px solid var(--bad); background: repeating-linear-gradient(135deg, var(--bad-bg) 0 8px, #fff 8px 14px); }
.db-job.wontfit .jt { color: var(--bad); font-weight: 700; }
.behind-box { border: 1px solid #f3c5c0; background: var(--bad-bg); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.behind-box > b { display: block; color: #8a231b; margin-bottom: 4px; }
.bh-row { padding: 8px 0; border-top: 1px solid #f3d3cf; }
.bh-row:first-of-type { border-top: 0; }
.bh-who a { color: var(--ink); }
.bh-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bh-acts form { margin: 0; }
.bh-row .linkbtn, .jd-dl .linkbtn { display: inline; }
/* crew app */
.cw-chip.wont { background: var(--bad-bg); color: var(--bad); }
.cw-wont { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bad-bg); color: #8a231b; font-size: 14px; font-weight: 600; }
/* Schedule, Map tab */
.dmap-wrap { margin-top: 4px; }
.dmap { height: min(68vh, 640px); min-height: 360px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; z-index: 0; }
.dmap-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.dmap-who { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--ink); max-width: 100%; }
.dmap-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dmap-who small { color: var(--muted); font-size: 12.5px; }
.dmap-who:not(.on) { opacity: .45; }
.dmap-who.on { border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); }
.dmap-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 4px; }
.dmap-key span { display: inline-flex; align-items: center; gap: 6px; }
.dmap-key i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid #7547ff; background: #fff; }
.dmap-key .k-done { background: #c9ced9; border-color: #aab2c5; } .dmap-key .k-onsite { background: var(--ok); border-color: var(--ok); }
.dmap-key .k-omw { background: #2563eb; border-color: #2563eb; } .dmap-key .k-late { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn); }
.dmap-key .k-wont { background: var(--bad); border-color: var(--bad); }
.dm-job, .dm-tech, .dm-shop { background: none; border: 0; }
.dm-pin { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--tc); color: #1c2440; font: 800 13px/1 system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
.dm-pin.s-done { background: #e9ecf2; border-color: #aab2c5; color: #6b7590; }
.dm-pin.s-onsite { background: var(--ok); border-color: #0b7a3b; color: #fff; }
.dm-pin.s-omw { background: #2563eb; border-color: #1747b5; color: #fff; }
.dm-pin.s-late { box-shadow: 0 0 0 3px var(--warn), 0 2px 6px rgba(0,0,0,.25); }
.dm-pin.s-wont { background: var(--bad); border-color: #8a231b; color: #fff; }
.dm-tech span { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; background: var(--tc); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.dm-tech span { color: #fff; font: 800 12px/1 system-ui, sans-serif; }
.dm-tech b { transform: rotate(45deg); }
.dm-shop span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #1c2440; color: #fff; font-size: 17px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.dm-empty { position: absolute; inset: auto 0 45% 0; text-align: center; z-index: 500; font-weight: 600; color: var(--muted); pointer-events: none; }
.prop-sig { margin: 10px 0 4px; } .prop-sig img { display: block; max-width: 260px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 4px; }
/* dashboard */
.stat-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s; } .stat-link:hover { border-color: var(--violet); text-decoration: none; }
.dash-today-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dash-today-row div { background: #f6f7fb; border-radius: 10px; padding: 10px; text-align: center; } .dash-today-row b { display: block; font-size: 1.5rem; line-height: 1.1; } .dash-today-row span { font-size: 13px; color: var(--muted); }
.dash-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .dash-flags a { text-decoration: none; }
.dash-row { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; } .dash-row:last-child { border-bottom: 0; } .dash-row:hover b { color: var(--violet); }
.dash-sec { font-size: 1rem; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 639px) { .dash-today-row { grid-template-columns: repeat(2, 1fr); } }
a.cw-go, a.cw-go:hover { text-decoration: none; color: #fff; }
.cw-help .linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 15px; font-weight: 700; }
.cust-find { position: relative; }
.cust-find .inv-res { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; color: var(--ink); }
.cust-find .inv-res:hover { background: #f6f4ff; } .cust-find .inv-res small { display: block; color: var(--muted); }
/* messages */
.msg-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.msg-row:last-child { border-bottom: 0; } .msg-row:hover { background: #f8f7ff; text-decoration: none; }
.msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .msg-top { display: flex; justify-content: space-between; gap: 8px; }
.msg-body > .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread { display: flex; flex-direction: column; gap: 8px; max-height: 65vh; overflow-y: auto; }
.bub { max-width: 78%; padding: 9px 12px; border-radius: 14px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.bub small { display: block; margin-top: 4px; font-size: 11.5px; opacity: .75; }
.bub.in { align-self: flex-start; background: #eef0f6; border-bottom-left-radius: 4px; }
.bub.out { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 4px; }
.bub.ai { align-self: flex-end; background: #e7f0ff; color: var(--ink); border-bottom-right-radius: 4px; }
/* invoice / proposal line editor */
.inv-head { display: grid; grid-template-columns: 1fr 64px 100px 32px; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
@media (max-width: 520px) {
  .inv-head, #lines .inv-line { grid-template-columns: 1fr 52px 84px 30px !important; gap: 4px !important; }
  #lines .inv-line input { min-width: 0; padding-left: 8px; padding-right: 6px; }
}

/* a hidden field or row stays hidden even though .row / .field set their own display */
.row[hidden],.field[hidden],label[hidden]{display:none!important}

/* phones and tablets: text boxes at 16px so iPhone never zooms in when one is tapped; the page never slides sideways */
@media (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=time], input[type=month], input[type=search], select, textarea,
  .help-searchbar input { font-size: 16px; }
  html, body { overflow-x: clip; }
}
/* Help panel: changes the assistant offers to make */
.help-pending { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.help-pend-item { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; padding: 4px 0; cursor: pointer; }
.help-pend-item input { margin-top: 3px; }
.help-pending .btn { margin-top: 6px; }
/* Help panel chat (after the first question) */
.help-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.help-chat[hidden] { display: none; }
.help-chat-bar { display: flex; justify-content: space-between; padding: 10px 16px 0; }
.help-chat-bar .help-linkbtn { margin: 0; }
.help-chat-log { flex: 1; overflow-y: auto; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.help-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; line-height: 1.45; font-size: 14.5px; word-wrap: break-word; }
.help-msg p { margin: 0 0 6px; } .help-msg p:last-child { margin: 0; } .help-msg ol, .help-msg ul { margin: 4px 0 6px 18px; padding: 0; }
.help-msg.u { align-self: flex-end; background: var(--navy); color: #fff; }
.help-msg.a { align-self: flex-start; background: var(--soft); color: var(--ink); }
.help-msg.n { align-self: center; background: var(--ok-bg); color: var(--muted); font-size: 13px; border-radius: 20px; }
.help-chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px; border-top: 1px solid var(--line); }
.help-chat-form textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.help-panel.chatting .help-panel-search, .help-panel.chatting .help-panel-body, .help-panel.chatting .help-panel-foot { display: none; }
.help-continue { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; cursor: pointer; font: 14px var(--font); color: var(--ink); }
.help-continue b { color: var(--violet); }

/* add booking: service + how many, more services in one visit, how long */
.svc-line { display: flex; gap: 10px; align-items: flex-end; }
.svc-line > .field:first-child { flex: 1; min-width: 0; }
.svc-line .svc-qty { width: 100px; flex: none; }
.svc-line.more { margin-bottom: 8px; }
.svc-line.more .field { margin-bottom: 0; }
.svc-line.more [data-rm] { font-size: 1.3rem; line-height: 1; padding: 0 4px 10px; }
.len-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.len-row input[type=number] { width: 72px; }
.len-row select { width: auto; min-width: 70px; }
/* booking details: change how long */
.jd-len { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.jd-len input[type=number] { width: 64px; min-height: 32px; padding: 4px 8px; }
.jd-len select { width: auto; min-height: 32px; padding: 4px 26px 4px 8px; }
/* services: how many */
.qm-extra { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qm-extra[hidden] { display: none; }
.learn-sg { margin-top: 4px; }
.learn-list { margin: 6px 0 0; padding-left: 18px; }
.learn-list li { margin: 4px 0; }

/* Admin usage page */
.usg .usg-m { margin-top: 4px; max-width: 140px; }
.usg .usg-m.near span { background: #e8930c; }
.usg .usg-m.over span { background: #d93636; }
.usg .usg-over { color: #d93636; font-weight: 600; font-size: .85em; }

/* Prices & rates: Retell model refresh bar */
.retell-sync { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f3f0ff; border: 1px solid #ddd4ff; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.retell-sync form { margin: 0; flex: none; }
.retell-sync p { flex: 1 1 280px; color: var(--muted, #5b6478); }

.voice-pick { display: flex; gap: 8px; align-items: center; }
.voice-pick select { flex: 1; min-width: 0; }
.voice-pick .btn { flex: none; }

/* Plans: Pro features shown locked on Basic */
.sidenav a.locked { opacity: .72; }
.sidenav a .pro-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(139, 92, 246, .35); color: #fff; border-radius: 6px; padding: 1px 6px; }
.pro-pitch { background: #f6f3ff; border: 1px solid #e2d9ff; border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.pro-page .lead { font-size: 1.05em; }