/* Sibco Portal: tokens from design/DESIGN.md */
:root {
	--bg: #F3F2EF;
	--chrome: #FBFAF8;
	--card: #FFFFFF;
	--border: #E6E4DF;
	--input-border: #E0DED8;
	--btn-border: #D9D7D1;
	--text: #1B1B1A;
	--muted: #6B6A66;
	--divider: #EFEDE9;
	--track: #ECEAE6;
	--accent: #2350C7;
	--accent-hover: #1A3D9A;
	--accent-tint: #E8EEFB;
	--ok-fg: #1F6B3A;  --ok-bg: #E4F2E8;
	--warn-fg: #8A4B0B; --warn-bg: #FBEFDC;
	--bad-fg: #A12A2A; --bad-bg: #FBE7E7;
	--grey-fg: #4A4945; --grey-bg: #ECEAE6;
	--radius: 16px;
	font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.row { display: flex; align-items: center; gap: 12px; }
.pill { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tone-green { background: var(--ok-bg); color: var(--ok-fg); }
.tone-amber { background: var(--warn-bg); color: var(--warn-fg); }
.tone-red { background: var(--bad-bg); color: var(--bad-fg); }
.tone-blue { background: var(--accent-tint); color: var(--accent-hover); }
.tone-grey { background: var(--grey-bg); color: var(--grey-fg); }

.btn { font-size: 13px; border: 1px solid var(--btn-border); background: var(--card); color: var(--text); border-radius: 10px; padding: 8px 14px; cursor: pointer; min-height: 36px; }
.btn:hover { background: #F6F5F2; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

/* Shell */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--chrome); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--text); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.switcher { display: flex; gap: 4px; background: var(--track); padding: 4px; border-radius: 12px; overflow-x: auto; }
.switcher button { font-size: 13px; padding: 7px 14px; border-radius: 9px; border: 0; background: transparent; color: var(--grey-fg); cursor: pointer; white-space: nowrap; }
.switcher button[aria-pressed="true"] { background: var(--card); color: var(--text); font-weight: 500; }
.search { width: 240px; font-size: 13px; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--card); }
.menu-btn { display: none; }

.body { display: flex; flex: 1; min-height: 0; }
.sidebar { width: 232px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 18px 12px; display: flex; flex-direction: column; justify-content: space-between; background: var(--chrome); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .lbl { padding: 12px 12px 6px; }
.nav button { display: flex; justify-content: space-between; align-items: center; text-align: left; border: 0; cursor: pointer; font-size: 14px; padding: 9px 12px; border-radius: 10px; background: transparent; color: var(--text); }
.nav button:hover { background: #F1F0EC; }
.nav button[aria-current="page"] { background: var(--track); font-weight: 500; }
.nav .soon { font-size: 10px; color: var(--muted); }
.me { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--border); margin-top: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-hover); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }

.main { flex: 1; min-width: 0; padding: 28px 32px 48px; overflow-x: hidden; }
.page { display: flex; flex-direction: column; gap: 18px; max-width: 1280px; }
.h1 { font-size: 30px; font-weight: 300; margin: 0; }
.h2 { font-size: 26px; font-weight: 300; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 18px; }
.stat .v { font-size: 26px; font-weight: 300; margin-top: 8px; }
.stat .s { font-size: 12px; margin-top: 4px; color: var(--muted); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { font-size: 13px; cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--input-border); background: var(--card); color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }

/* Tables */
.table { padding: 4px 20px; }
.tr { display: grid; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.tr > span { min-width: 0; overflow-wrap: anywhere; }
.tr.head { border-top: 0; padding: 12px 0; }
.tr.click { cursor: pointer; }
.tr.click:hover { background: #FAFAF8; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.jobs-grid { grid-template-columns: 130px minmax(0, 1.5fr) minmax(0, 1fr) 120px minmax(0, 1fr) 150px 90px; }
.cust-grid { grid-template-columns: minmax(0, 1.6fr) 130px minmax(0, 1.2fr) 130px 90px; }
.drv-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr) 100px 110px; }
.st-grid { grid-template-columns: minmax(0, 1.2fr) 130px minmax(0, 2fr) 150px; }
.vlog-grid { grid-template-columns: minmax(0, 1.4fr) 90px minmax(0, 1fr) minmax(0, 1fr); }
.strong { font-weight: 500; }
.sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ref { color: var(--accent); font-variant-numeric: tabular-nums; }
.empty, .error, .loading { padding: 28px 0; text-align: center; color: var(--muted); }
.error { color: var(--bad-fg); }
.show-sm { display: none; }

/* Detail drawer */
.drawer-back { position: fixed; inset: 0; background: rgba(27, 27, 26, .25); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--chrome); border-left: 1px solid var(--border); z-index: 21; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-internal { background: var(--warn-bg); border: 1px dashed #D9A55B; border-radius: 12px; padding: 12px 14px; font-size: 13px; white-space: pre-wrap; }
.note-internal .lbl { color: var(--warn-fg); margin-bottom: 6px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Coming-soon sections */
.plan { padding: 20px; }
.plan ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.plan li { font-size: 13px; padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--btn-border); }
.plan li.live::before { background: var(--ok-fg); border-color: var(--ok-fg); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.banner { background: var(--accent-tint); color: var(--accent-hover); border-radius: 12px; padding: 10px 14px; font-size: 13px; }

@media (max-width: 1100px) {
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jobs-grid { grid-template-columns: 110px minmax(0, 1.5fr) 110px 140px; }
	.cust-grid { grid-template-columns: minmax(0, 1.5fr) 120px minmax(0, 1fr); }
	.drv-grid { grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 1fr); }
	.st-grid { grid-template-columns: minmax(0, 1.2fr) 130px minmax(0, 2fr); }
	.hide-md { display: none; }
	.search { display: none; }
}

@media (max-width: 760px) {
	.topbar { padding: 12px 16px; flex-wrap: wrap; }
	.switcher { order: 3; width: 100%; }
	.menu-btn { display: inline-flex; }
	.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .12); overflow-y: auto; }
	.sidebar.open { transform: none; }
	.main { padding: 20px 16px 40px; }
	.h1 { font-size: 26px; }
	.stats, .grid2 { grid-template-columns: minmax(0, 1fr); }
	.plan ul { grid-template-columns: minmax(0, 1fr); }
	.jobs-grid { grid-template-columns: minmax(0, 1fr) auto; }
	.cust-grid, .drv-grid, .st-grid { grid-template-columns: minmax(0, 1fr) auto; }
	.vlog-grid { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); }
	.hide-sm { display: none; }
	.show-sm { display: inline; }
	.tr.head { display: none; }
	.kv { grid-template-columns: minmax(0, 1fr); }
	.kv dt { margin-top: 6px; }
}

/* Customer page */
.cust-page { max-width: 1100px; margin: 0 auto; }
.cust-h { font-size: 36px; font-weight: 300; margin: 10px 0 4px; }
.preview-banner { background: #FBF3E4; border: 1px solid #EFD9B4; border-radius: 12px; padding: 9px 16px; font-size: 13px; color: #5E3A0C; }
.tracker { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.tracker span { display: block; height: 4px; border-radius: 4px; background: var(--track); }
.tracker .done span { background: var(--accent); }
.tracker div div { font-size: 12px; margin-top: 8px; color: var(--muted); }
.tracker .done div { color: var(--text); }
.pay-box { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); }
.terms { font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.terms input { margin-top: 2px; width: 18px; height: 18px; }
.btn-big { padding: 14px 18px; font-size: 15px; min-height: 48px; }
.cust-foot { font-size: 12px; padding: 8px 0 24px; }
.banner.tone-green { background: var(--ok-bg); color: var(--ok-fg); }
.banner.tone-red { background: var(--bad-bg); color: var(--bad-fg); }
@media (max-width: 760px) { .cust-h { font-size: 28px; } }

/* Forms and modals (workspace) */
.modal-back { position: fixed; inset: 0; background: rgba(27, 27, 26, .3); z-index: 40; }
.modal { position: fixed; top: 4vh; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 24px)); max-height: 92vh; overflow-y: auto; background: var(--chrome); border: 1px solid var(--border); border-radius: 16px; z-index: 41; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.field > span { color: var(--muted); font-size: 12px; }
.field input, .field select, .field textarea { font-size: 14px; padding: 9px 11px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--card); color: var(--text); width: 100%; }
.field textarea { min-height: 70px; resize: vertical; }
.seg { display: inline-flex; gap: 4px; background: var(--track); padding: 4px; border-radius: 12px; }
.seg button { font-size: 13px; padding: 7px 12px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--card); font-weight: 500; }
.quote-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.msg-preview { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; white-space: pre-wrap; font-size: 13px; }
.suggest { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-top: 4px; max-height: 320px; overflow-y: auto; }
.suggest button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.suggest button:hover { background: #F6F5F2; }
.test-flag { background: var(--warn-bg); color: var(--warn-fg); border-radius: 999px; font-size: 11px; padding: 3px 10px; }
.timeline div { font-size: 12px; padding: 6px 0; border-top: 1px solid var(--divider); display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 760px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .modal { top: 0; max-height: 100vh; border-radius: 0; width: 100%; } }
.xin { font-size: 14px; padding: 9px 11px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--card); color: var(--text); min-width: 0; }

.job-summary { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divider); font-size: 14px; }
.job-summary ul { margin: 6px 0 0; padding-left: 18px; }
.job-summary li { margin: 2px 0; }

.email-frame { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: 12px; background: #F3F2EF; }

.fleet-grid { grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1fr) 100px minmax(0, 1.4fr); }
@media (max-width: 760px) { .fleet-grid { grid-template-columns: minmax(0, 1fr) auto; } }
/* Customer page: extras waiting for approval. */
.extra-card { border: 2px solid #0A7CFF; }
.extra-item { padding: 12px 0; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 4px; }
.extra-item .btn { min-height: 44px; }
/* Customer modal: trade rate card rows. */
.rate-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--divider); }
.rate-row .xin, .rate-row select.xin { font-size: 13px; padding: 7px 9px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--card); }
.rate-row .rc-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
/* Fleet and compliance tables. */
.veh-grid { grid-template-columns: minmax(0, 1.4fr) 120px 120px 120px 120px 120px 90px; }
.fine-grid { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) 90px 120px; }
.doc-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) 150px 90px; }
.inc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 120px; }
@media (max-width: 1100px) { .veh-grid { grid-template-columns: minmax(0, 1.4fr) 120px 120px 120px 90px; } .doc-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 150px 90px; } .inc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; } }
@media (max-width: 760px) { .veh-grid, .doc-grid { grid-template-columns: minmax(0, 1fr) auto; } .fine-grid { grid-template-columns: minmax(0, 1fr) 90px auto; } .inc-grid { grid-template-columns: minmax(0, 1fr) auto; } }
/* Reports. */
.rep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rep-bar { display: grid; grid-template-columns: 90px minmax(0, 1fr) 190px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.rep-track { height: 12px; background: var(--track); border-radius: 6px; overflow: hidden; }
.rep-track span { display: block; height: 100%; background: #0A7CFF; border-radius: 6px; }
.rep-val { text-align: right; }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
@media (max-width: 760px) { .rep-cols { grid-template-columns: minmax(0, 1fr); } .rep-cols > * { min-width: 0; overflow-x: auto; } .rep-bar { grid-template-columns: 70px minmax(0, 1fr) 120px; } }
/* Dispatch week and money list. */
.disp-wrap { overflow-x: auto; padding: 0; }
.disp-grid { min-width: 980px; }
.disp-row { display: grid; grid-template-columns: 150px repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--divider); }
.disp-head { border-top: 0; font-size: 12px; color: var(--muted); }
.disp-name { padding: 10px 12px; font-size: 13px; font-weight: 500; }
.disp-day { padding: 10px 6px; text-align: center; }
.disp-cell { padding: 6px 4px; display: flex; flex-direction: column; gap: 4px; min-height: 48px; border-left: 1px solid var(--divider); }
.is-today { background: #F4F8FF; }
.disp-job { text-align: left; border: 1px solid var(--border); border-left: 4px solid #9A988F; border-radius: 8px; background: var(--card); padding: 5px 7px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--text); line-height: 1.3; }
.disp-job:hover { background: #F6F5F2; }
.disp-job.tone-b-green { border-left-color: #1F6B3A; }
.disp-job.tone-b-blue { border-left-color: #0A7CFF; }
.disp-job.tone-b-amber { border-left-color: #C27C0E; }
.disp-job.tone-b-red { border-left-color: #A12A2A; }
.disp-job.clash { outline: 2px solid #A12A2A; }
.disp-job.cancelled { opacity: .5; text-decoration: line-through; }
.money-grid { grid-template-columns: 160px minmax(0, 1fr) 110px 100px 150px; }
.case-grid { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.4fr) 190px; align-items: center; }
@media (max-width: 760px) { .case-grid { grid-template-columns: minmax(0, 1fr) 150px; } .case-grid > span:nth-child(2) { display: none; } }
.disp-off { margin-bottom: 4px; }
.disp-cell.off-clash { background: var(--warn-bg); }
.disp-cell.drop-ok { background: #E8EEFB; outline: 2px dashed #2350C7; outline-offset: -2px; }
.disp-job[draggable="true"] { cursor: grab; }
.rcpt-grid { grid-template-columns: 110px minmax(0, 1fr) 150px 100px 90px 100px 330px; align-items: center; }
@media (max-width: 1100px) { .rcpt-grid { grid-template-columns: 90px minmax(0, 1fr) 100px; } .rcpt-grid > span:nth-child(3), .rcpt-grid > span:nth-child(4), .rcpt-grid > span:nth-child(5) { display: none; } .rcpt-grid > span:last-child { grid-column: 1 / -1; justify-content: flex-start !important; } }
.chase-grid { grid-template-columns: 150px minmax(0, 1fr) 90px 130px 170px 260px; align-items: center; }
@media (max-width: 1100px) { .chase-grid { grid-template-columns: minmax(0, 1fr) 90px 110px; } .chase-grid > span:nth-child(2), .chase-grid > span:nth-child(4) { display: none; } .chase-grid > span:last-child { grid-column: 1 / -1; justify-content: flex-start !important; } }
@media (max-width: 760px) { .money-grid { grid-template-columns: minmax(0, 1fr) 90px 110px; } .money-grid > span:nth-child(2) { display: none; } }
/* Job offers. */
.offer-list { max-height: 380px; overflow-y: auto; }
.offer-grid { grid-template-columns: minmax(0, 1fr) 90px 70px 90px; }
.offer-steps { margin: 6px 0 0; padding-left: 22px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.offer-steps li.strong { font-weight: 600; color: var(--ok-fg); }

/* Inbox: conversations list + thread, and team chat */
.ib-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 12px; align-items: start; }
.ib-list-card { padding: 0; max-height: 72vh; overflow: auto; }
.ib-row { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--divider); padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.ib-row:hover { background: var(--grey-bg); }
.ib-row.is-open { background: var(--accent-tint); }
.ib-row.is-unread .strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
.ib-badge { background: var(--accent); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 7px; font-weight: 600; }
.ib-badge.is-mention { background: var(--bad-fg); }
.ib-thread-card { padding: 0; min-height: 300px; }
.ib-thread { display: flex; flex-direction: column; }
.ib-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.ib-back { display: none; }
.ib-msgs { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; max-height: 52vh; overflow: auto; background: var(--bg); }
#job-convo-body .ib-msgs { max-height: 320px; }
.bub { max-width: 80%; padding: 8px 11px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); font-size: 14px; }
.bub.in { align-self: flex-start; border-bottom-left-radius: 4px; }
.bub.out { align-self: flex-end; background: var(--accent-tint); border-color: transparent; border-bottom-right-radius: 4px; }
.bub-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.bub-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-activity { align-self: center; font-size: 12px; color: var(--muted); }
.ib-reply { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--divider); }
.ib-reply textarea, .chat-send textarea { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 8px; resize: vertical; background: var(--card); color: var(--text); box-sizing: border-box; }
.ib-reply select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--card); color: var(--text); }
.chat-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 12px; align-items: start; }
.chat-sec { padding: 6px 0 8px; }
.chat-sec + .chat-sec { border-top: 1px solid var(--divider); }
.chat-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 6px; }
.chat-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 12px 10px; }
.chat-tools .btn { width: 100%; justify-content: center; text-align: center; padding: 8px 6px; font-size: 13px; white-space: nowrap; }
.chat-none { font-size: 12px; padding: 4px 14px; }
.chat-ago { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.chat-chans { padding: 0 0 4px; display: flex; flex-direction: column; }
.chat-chan { text-align: left; background: none; border: 0; padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer; color: inherit; display: flex; justify-content: space-between; align-items: center; }
.chat-chan[aria-current="true"] { background: var(--accent-tint); font-weight: 600; }
.chat-main { padding: 0; display: flex; flex-direction: column; }
.chat-msgs { display: flex; flex-direction: column; gap: 12px; padding: 14px; height: 55vh; overflow: auto; }
.chat-msg.is-tagged { background: var(--warn-bg); border-radius: 8px; padding: 6px 8px; }
.chat-text { font-size: 14px; margin: 2px 0 0 40px; overflow-wrap: anywhere; }
.mention { color: var(--accent-hover); font-weight: 600; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.chat-send { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--divider); align-items: flex-end; }
@media (max-width: 760px) {
	.ib-grid { grid-template-columns: minmax(0, 1fr); }
	.ib-grid.has-open .ib-list-card { display: none; }
	.ib-grid:not(.has-open) .ib-thread-card { display: none; }
	.ib-back { display: inline-flex; }
	.bub { max-width: 92%; }
	.chat-grid { grid-template-columns: minmax(0, 1fr); }
	.chat-chans { flex-direction: row; overflow-x: auto; }
	.chat-chans .lbl, .chat-chans .muted { display: none; }
	.chat-msgs { height: 50vh; }
}

/* Quotes and leads */
.lead-grid { grid-template-columns: 110px minmax(0, 1.3fr) minmax(0, 1.3fr) 130px 150px; }
.quote-grid { grid-template-columns: minmax(0, 1.5fr) 120px 110px minmax(0, 1.2fr) 110px minmax(0, 1.1fr); align-items: center; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent-hover); cursor: pointer; font: inherit; }
.btn.chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; }
@media (max-width: 1100px) { .lead-grid { grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr) 130px; } .quote-grid { grid-template-columns: minmax(0, 1.4fr) 100px 110px 110px minmax(0, 1fr); } }
@media (max-width: 760px) { .lead-grid { grid-template-columns: 80px minmax(0, 1fr) 110px; } .quote-grid { grid-template-columns: minmax(0, 1fr) 90px; } .quote-grid > span:nth-child(5) { display: none; } .quote-grid > span:last-child { grid-column: 1 / -1; justify-content: flex-start !important; } }

/* Overview */
#ov-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
.ov-main, .ov-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ov-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ov-alert { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--divider); padding: 9px 2px; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
.ov-alert:first-child { border-top: 0; }
.ov-alert > span:nth-child(2) { flex: 1; }
.ov-alert:hover { background: var(--grey-bg); }
.ov-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ov-job { display: grid; grid-template-columns: 58px minmax(0, 1fr) 150px; gap: 10px; padding: 10px 0; border-top: 1px solid var(--divider); cursor: pointer; }
.ov-job:first-child { border-top: 0; }
.ov-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-state { text-align: right; }
.ov-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--divider); font-size: 14px; }
.ov-row:first-of-type { border-top: 0; }
.ov-week-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 54px; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; cursor: pointer; }
.ov-bar { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.ov-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ov-wn { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { #ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-job { grid-template-columns: 48px minmax(0, 1fr); } .ov-state { grid-column: 2; text-align: left; } }

/* Inbox: who's who */
:root { --purple-fg: #5B3AA8; --purple-bg: #EFE8FB; }
.tone-purple { background: var(--purple-bg); color: var(--purple-fg); }
.ib-groups { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.ib-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: inherit; cursor: pointer; }
.ib-chip[aria-pressed="true"] { border-color: var(--text); font-weight: 600; }
.ib-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ib-swatch.tone-amber { background: var(--warn-fg); } .ib-swatch.tone-green { background: var(--ok-fg); } .ib-swatch.tone-blue { background: var(--accent); } .ib-swatch.tone-purple { background: var(--purple-fg); } .ib-swatch.tone-grey { background: var(--grey-fg); }
.ib-row { border-left: 4px solid transparent; }
.ib-row.g-lead { border-left-color: var(--warn-fg); }
.ib-row.g-customer { border-left-color: var(--ok-fg); }
.ib-row.g-trade { border-left-color: var(--accent); }
.ib-row.g-driver { border-left-color: var(--purple-fg); }
.ib-row.g-staff, .ib-row.g-unknown { border-left-color: var(--divider); }
.chat-head { padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.chat-chans { max-height: 72vh; overflow: auto; }
.chat-msg.from-driver .chat-text { background: var(--purple-bg); border-radius: 8px; padding: 6px 10px; display: inline-block; }

/* Driver pay */
.pay-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; }
.pay-line { grid-template-columns: 90px minmax(0, 1fr) 190px; align-items: center; }
@media (max-width: 760px) { .pay-grid { grid-template-columns: minmax(0, 1fr) auto; } .pay-grid > span:nth-child(2) { display: none; } .pay-grid > span:last-child { grid-column: 1 / -1; justify-content: flex-start !important; text-align: left !important; } .pay-line { grid-template-columns: 70px minmax(0, 1fr) 120px; } }

/* Expenses */
.exp-grid { grid-template-columns: 90px minmax(0, 1.6fr) minmax(0, 1fr) 100px 150px; align-items: start; }
@media (max-width: 1100px) { .exp-grid { grid-template-columns: 80px minmax(0, 1.6fr) 100px 140px; } }
@media (max-width: 760px) { .exp-grid { grid-template-columns: 70px minmax(0, 1fr) 90px; } .exp-grid > span:last-child { grid-column: 2 / -1; } }

.drv-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.drv-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted, #666); min-width: 140px; flex: 1 1 140px; max-width: 220px; }
.drv-f select { font-size: 14px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--divider); background: var(--card, #fff); color: inherit; }
.drv-grid.drv-open { background: var(--hover, rgba(0,0,0,.03)); }
.drv-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; cursor: default; }

/* Phone: bottom bar, full-screen forms, bigger touch targets */
.bnav { display: none; }
@media (max-width: 760px) {
	.switcher { display: none; }
	.topbar { flex-wrap: wrap; gap: 10px; }
	.topbar .search { display: block; order: 3; width: 100%; font-size: 16px; padding: 10px 12px; }
	.main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
	.bnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--chrome); border-top: 1px solid var(--border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; align-items: flex-end; }
	.bnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; font-size: 11px; color: var(--muted); padding: 4px 0; cursor: pointer; }
	.bnav button span { font-size: 20px; line-height: 1; }
	.bnav button[aria-current="page"] { color: var(--text); font-weight: 600; }
	.bnav .bnav-book { color: var(--text); font-weight: 600; }
	.bnav .bnav-book span { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--accent, #1F4FD8); color: #fff; font-size: 28px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
	.menu-back { position: fixed; inset: 0; background: rgba(27, 27, 26, .3); z-index: 29; }
	.modal { height: 100%; max-height: 100%; padding: 0 16px 0; gap: 12px; }
	.modal > .row:first-child { position: sticky; top: 0; background: var(--chrome); padding: calc(12px + env(safe-area-inset-top, 0px)) 0 10px; z-index: 2; border-bottom: 1px solid var(--border); }
	.modal .actions { position: sticky; bottom: 0; background: var(--chrome); padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); z-index: 2; }
	.modal .actions .btn { flex: 1; padding: 12px; font-size: 16px; }
	.modal input, .modal select, .modal textarea, .drawer input, .drawer select, .drawer textarea { font-size: 16px; }
	.drawer { padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
	.btn { min-height: 38px; }
}

/* Cards that hold a form or text (not tables) get inner space */
#geo-card, #shifts-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
#geo-card .row { gap: 12px !important; }
#geo-card .field > span { margin-bottom: 4px; }
#geo-card .chip { padding: 6px 14px; }
#geo-out .tr { padding: 12px 4px !important; border-top: 1px solid var(--divider); }
#geo-out .tr:first-of-type { border-top: 0; }
/* OpenStreetMap: calmer colours so pins and routes stand out */
.sb-tiles { filter: saturate(0.45) contrast(1.06) brightness(1.05); }
.sb-pin { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
/* Maps stay inside their box: never above the header, menus, bottom bar or forms */
.leaflet-container { position: relative; z-index: 0; isolation: isolate; }
/* Date and time boxes: same size as other boxes (iPhone draws them wider otherwise) */
input[type="date"].xin, input[type="time"].xin, input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-height: 40px; min-width: 150px; box-sizing: border-box; }
.row > .field { min-width: 0; }
@media (max-width: 760px) {
	#geo-card .row > .field, #shifts-card .row > .field { flex: 1 1 140px; }
	#geo-card .row > .field .xin, #shifts-card .row > .field .xin { width: 100% !important; }
	#geo-card .row > [data-geo="find"], #geo-card .row > [data-geo="dist"] { flex: 1 1 100%; }
	.bnav { z-index: 1000; }
}

.logo-img { background: none; object-fit: cover; border-radius: 50%; padding: 0; }

/* Full Sibco Transport logo in the page headers (the rhino stays the app icon) */
.brand-logo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.brand-sub { font-size: 12px; line-height: 1.3; color: var(--muted); border-left: 1px solid var(--border); padding-left: 10px; }
@media (max-width: 760px) { .brand-logo { height: 28px; } }

/* Logo = home button */
.brand-home { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; }
/* Tick boxes and radio buttons keep their own size (the full-width rule is for text boxes only) */
.field input[type="checkbox"], .field input[type="radio"], .terms input[type="checkbox"] { width: auto; flex: 0 0 auto; padding: 0; margin: 0 2px 0 0; }
.field label { min-width: 0; }
/* Nothing inside a form may be wider than the screen (iPhone draws date boxes wider) */
.modal { overflow-x: hidden; }
.form-grid > *, .field { min-width: 0; }
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; min-height: 40px; box-sizing: border-box; }
.field input, .field select, .field textarea { box-sizing: border-box; max-width: 100%; }

/* Workspace on every screen (28 Sep 2026): an app layout. The page itself never scrolls; the menu and the page area
   scroll on their own under a top bar that stays put. Safari (iPad and Mac) could leave a "sticky" top bar
   stuck part-way down the page after scrolling. */
html.ws, html.ws body { height: 100%; overflow: hidden; }
html.ws #sibco-app { height: 100%; }
html.ws .shell { height: 100vh; height: 100dvh; min-height: 0; }
html.ws .topbar { position: relative; flex-shrink: 0; }
html.ws .body { flex: 1; min-height: 0; overflow: hidden; }
html.ws .main { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.ws .sidebar { overflow-y: auto; }

/* Phone: the page area scrolls inside the screen and the bottom bar is part of the layout (not "fixed"),
   so iPhone home-screen apps can't leave it floating halfway up the page after a scroll. */
@media (max-width: 760px) {
	html.ws, html.ws body { height: 100%; overflow: hidden; } /* workspace only: the customer page, trade portal and website forms scroll normally */
	#sibco-app, .shell { height: 100%; }
	.shell { height: 100vh; height: 100dvh; min-height: 0; }
	.body { flex: 1; min-height: 0; overflow: hidden; }
	.main { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 28px; }
	.bnav { position: relative; left: auto; right: auto; bottom: auto; flex-shrink: 0; }
}

/* Driver profile */
.modal-wide { width: min(920px, calc(100% - 24px)); }
.dp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.dp-tile { background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.dp-v { font-size: 20px; font-weight: 600; margin-top: 2px; }
.dp-kv { grid-template-columns: 130px minmax(0, 1fr); }
.dp-sec { border-top: 1px solid var(--divider, #eee); padding-top: 14px; }
.dp-job { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) auto; }
.more-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-size: 13px; }
@media (max-width: 760px) { .dp-job { grid-template-columns: minmax(0, 1fr) auto; } .modal-wide { width: 100%; } }

/* Courier Exchange (practice version) */
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 980px) { .cx-grid { grid-template-columns: 1fr; } }
.cx-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.cx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ok-fg); }
.cx-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-fg); display: inline-block; animation: cxpulse 1.6s infinite; }
@keyframes cxpulse { 0% { box-shadow: 0 0 0 0 rgba(31, 107, 58, .5); } 100% { box-shadow: 0 0 0 8px rgba(31, 107, 58, 0); } }
.cx-filters { gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.cx-filters .xin { width: auto; min-width: 0; }
#cx-feed { max-height: 70vh; overflow-y: auto; }
.cx-load { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 11px 14px; border-bottom: 1px solid var(--divider); cursor: pointer; }
.cx-load:hover { background: var(--chrome); }
.cx-load.sel { background: var(--accent-tint); }
.cx-load.new { animation: cxflash 2.5s ease-out; }
@keyframes cxflash { 0% { background: var(--warn-bg); } 100% { background: transparent; } }
.cx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.cx-price { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; margin: 10px 0; }
.cx-kv dt { color: var(--muted); }
.cx-kv dd { margin: 0; }
.cx-notes { font-size: 13px; background: var(--chrome); border-radius: 10px; padding: 8px 10px; }
.cx-checks { font-size: 13px; background: var(--accent-tint); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.cx-steps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.cx-steps li { padding-left: 22px; position: relative; color: var(--muted); }
.cx-steps li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--btn-border); background: var(--card); }
.cx-steps li.done { color: var(--text); }
.cx-steps li.done::before { background: var(--ok-fg); border-color: var(--ok-fg); }
.cx-steps li.now { color: var(--text); font-weight: 600; }
.cx-steps li.now::before { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.sib-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--text); color: var(--card); padding: 10px 16px; border-radius: 12px; font-size: 13px; z-index: 2000; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); max-width: calc(100vw - 32px); }

/* Marketing */
.mk-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 10px 0; padding: 4px; background: var(--track); border-radius: 12px; scrollbar-width: none; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tabs button { flex: 0 0 auto; font-size: 13px; padding: 7px 12px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; white-space: nowrap; color: inherit; }
.mk-tabs button[aria-pressed="true"] { background: var(--card); font-weight: 500; }
.mk-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mk-two > * { min-width: 0; }
.mk-pgrid { grid-template-columns: minmax(0, 2fr) repeat(6, minmax(0, 1fr)); }
.mk-agrid { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.3fr) repeat(7, minmax(0, 0.9fr)); }
.mk-qgrid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 0.8fr)); }
.mk-sgrid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 0.8fr)); }
.mk-detail { background: var(--accent-tint); border-radius: 10px; padding: 12px 14px; margin: 4px 0 10px; font-size: 14px; }
.mk-bar { display: block; height: 8px; border-radius: 6px; background: var(--track); overflow: hidden; margin: 8px 0; }
.mk-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.mk-bar.over > span { background: var(--bad-fg); }
.mk-bar.us > span { background: var(--ok-fg); }
.mk-trend { width: 100%; height: 150px; display: block; margin: 10px 0 6px; }
.mk-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.mk-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mk-idea { padding: 14px 16px; }
.mk-idea.done { opacity: 0.65; }
.mk-chip { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--track); }
.mk-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 6px; }
.mk-day { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-day.today { border-color: var(--accent); }
.mk-day-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.mk-post { text-align: left; background: var(--bg, #fff); border: 1px solid var(--divider); border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.mk-post:hover { border-color: var(--accent); }
.mk-post-text { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mk-msg.unread .strong { color: var(--accent); }
.mk-msg.unread::before { content: ""; }
.mk-stars { color: #E8A317; letter-spacing: 1px; }
.mk-comp { display: grid; grid-template-columns: minmax(0, 1.6fr) 56px minmax(0, 1.4fr) 90px 20px; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; }
.mk-comp .mk-bar { margin: 0; }
.mk-map { height: 320px; border-radius: 10px; margin-top: 8px; position: relative; z-index: 0; isolation: isolate; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; }
@media (max-width: 1100px) {
	.mk-two { grid-template-columns: minmax(0, 1fr); }
	.mk-agrid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) repeat(5, minmax(0, 0.9fr)); }
}
@media (max-width: 760px) {
	.mk-agrid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr) repeat(4, minmax(0, 0.9fr)); font-size: 12px; }
	.mk-pgrid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
	.mk-qgrid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 0.8fr)); }
	.mk-comp { grid-template-columns: minmax(0, 1fr) 50px 70px 20px; }
	.mk-comp .mk-bar { display: none; }
}

/* Customer tracking card (booking page) */
.trk { padding: 0; overflow: hidden; }
.trk-map { height: 220px; background: var(--track); position: relative; z-index: 0; isolation: isolate; }
.trk-note { font-size: 12px; color: var(--muted); padding: 8px 20px 0; }
.trk-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.trk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trk-kick { font-size: 12px; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.trk-big { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 2px 0; }
.trk-crew { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; }
.trk-av { width: 44px; height: 44px; border-radius: 22px; background: var(--track); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.trk-cn { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.trk-call { width: 44px; height: 44px; border-radius: 22px; background: var(--accent); color: #fff !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.trk-steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.trk-steps li.done, .trk-steps li.now { color: var(--text); }
.trk-steps li.now { font-weight: 600; }
.trk-dot { width: 14px; height: 14px; border-radius: 7px; background: var(--track); flex-shrink: 0; }
.trk-steps li.done .trk-dot { background: var(--accent); }
.trk-steps li.now .trk-dot { background: transparent; border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.trk-st { flex: 1; }
.trk-t { font-size: 13px; color: var(--muted); }
.app-dark .trk-big { font-family: Sora, Manrope, sans-serif; }
.trk-dark { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.4); }
.trk-msg { display: flex; flex-direction: column; gap: 8px; }
.trk-msg textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 12px; background: var(--card); color: var(--text); }
button.trk-call { border: 0; cursor: pointer; }

/* Breathing room: a button or button row straight under a form box (e.g. Archive under "Why?").
   Only where the parent has no gap of its own (modal, drawer, grids and rows already space their children). */
:not(.modal):not(.drawer):not(.form-grid):not(.row):not(.actions):not(.stats) > :is(.field, .form-grid, .xin) + :is(.actions, .row, .btn, button) { margin-top: 12px; }

/* Pop-up windows sit above the phone bottom bar (it has z-index 1000 and was covering the Send button). */
.modal-back { z-index: 1100; }
.modal { z-index: 1101; }
.modal .pv-actions { position: static; border-top: 0; padding-top: 0; }

/* Dispatch: tap a driver's name to zoom to them and see their route. */
.geo-name { color: var(--text, #1B1B1A); text-decoration: none; cursor: pointer; }
.geo-name:hover, .geo-name.on { color: #1A56DB; text-decoration: underline; }
.geo-focus { background: #F3F6FD; border: 1px solid #C9D7F5; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }

/* Quote options (owner, 2 Oct 2026) */
.opt-card { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; margin-top: 10px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--border, #DCE3EC); background: var(--card, #fff); color: inherit; font: inherit; cursor: pointer; }
.opt-card.opt-on { border-color: #0078FF; box-shadow: 0 0 0 3px rgba(0,120,255,.15); }
.opt-top { display: flex; align-items: center; gap: 10px; }
.opt-radio { color: #0078FF; font-size: 18px; line-height: 1; }
.opt-price { margin-left: auto; font-weight: 700; font-size: 17px; white-space: nowrap; }
.opt-sub, .opt-desc { font-size: 13px; padding-left: 28px; }
.opt-desc { color: inherit; opacity: .85; }

/* WhatsApp first (owner, 2 Oct 2026) */
.btn.btn-wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn.btn-wa:hover { background: #1EB955; border-color: #1EB955; color: #fff; }
.job-talk { margin: 4px 0 10px; padding-top: 6px; border-top: 1px solid var(--divider); }
.disp-name .btn.chip { font-size: 11px; padding: 3px 8px; }
.chat-sec .chat-chan { width: 100%; }

/* Sales section */
.sl-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sl-task { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--divider); }
.sl-task:first-of-type { border-top: 0; }
.sl-task > input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.sl-task .sl-t { flex: 1; min-width: 0; }
.sl-task.is-done .sl-t > .strong { text-decoration: line-through; color: var(--muted); }
.sl-act { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--divider); }
.sl-act:first-of-type { border-top: 0; }
.sl-row { grid-template-columns: minmax(0, 1.6fr) minmax(110px, 1fr) repeat(5, 64px) 130px; align-items: center; }
.sl-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 5px; max-width: 120px; }
.sl-bar i { display: block; height: 100%; background: var(--accent, #0A5BE0); border-radius: 999px; }
.sl-table { overflow-x: auto; }
.sl-table .tr { min-width: 720px; }
@media (max-width: 900px) { .sl-grid { grid-template-columns: 1fr; } }
#sl-body { display: flex; flex-direction: column; gap: 14px; }

/* Send window: "What are you sending?" (four plain choices in place of six buttons). */
.pv-choices { display: grid; gap: 8px; }
.pv-ch { border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.pv-ch.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pv-ch-top { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--text); font-size: 15px; border-radius: 12px; }
.pv-ch-top strong { display: block; font-weight: 500; }
.pv-ch-top small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pv-dot { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--btn-border); }
.pv-ch.on .pv-dot { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--card); }
.pv-sub { padding: 0 14px 12px 42px; }
.pv-say { background: var(--accent-tint); color: var(--accent-hover); border-radius: 12px; padding: 10px 14px; font-size: 13px; }

/* Shared pieces used by both looks (14 Oct 2026): grouped buttons, the ⋯ menu, automatic messages list. */
.nav-ic { display: none; }
.nav-l { display: inline-flex; align-items: center; gap: 10px; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 10px 10px 0; }
.btn-icon { min-width: 36px; padding-left: 10px; padding-right: 10px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { background: #F1F0EC; color: var(--text); }
.ddm { position: relative; display: inline-block; }
.ddm > summary { list-style: none; display: inline-flex; align-items: center; }
.ddm > summary::-webkit-details-marker { display: none; }
.ddm-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 200px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(27, 27, 26, .12); padding: 4px; display: grid; }
.ddm-menu button { border: 0; background: none; text-align: left; font-size: 13px; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--text); white-space: nowrap; }
.ddm-menu button:hover { background: #F4F3EF; }
.ddm-menu button.bad { color: var(--bad-fg); }
.ddm-menu hr { border: 0; border-top: 1px solid var(--divider); margin: 4px 0; }
.au-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.au-status.paused { background: var(--warn-bg); border-color: #EBCB99; }
.au-switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text); }
.au-switch i { width: 40px; height: 22px; border-radius: 999px; background: var(--ok-fg); position: relative; }
.au-switch i::after { content: ""; position: absolute; top: 3px; left: 21px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.au-switch[aria-checked="false"] i { background: var(--btn-border); }
.au-switch[aria-checked="false"] i::after { left: 3px; }
.au-list { padding: 0; overflow: hidden; }
.au-day { padding: 9px 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #F7F6F3; border-top: 1px solid var(--divider); }
.au-day:first-child { border-top: 0; }
.au-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--divider); font-size: 13px; }
.au-day + .au-row { border-top: 0; }
.au-row time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
@media (max-width: 760px) { .au-row { grid-template-columns: 44px minmax(0, 1fr); } .au-row .btn { grid-column: 2; justify-self: start; } }

/* Dispatch driver rows (both looks); the calm look adds the round icons */
.geo-drv { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--divider); }
.geo-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--track); color: var(--grey-fg); }
.tb-ic { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.geo-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.geo-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }

/* Phone audit with live data at 375 and 390px (15 Oct 2026): 44px taps, tabs that fit, readable lists. */
@media (max-width: 760px) {
  html.ws .btn, html.ws .filters button, html.ws .mk-tabs button, html.ws .seg button, html.ws .ddm-menu button, html.ws .ddm > summary,
  html.ws .ib-chip, html.ws .menu-btn, html.ws input.search, html.ws .xin, html.ws .main select, html.ws .linkish, html.ws .tb, html.ws .ov-alert { min-height: 44px; box-sizing: border-box; }
  html.ws .btn-link { display: inline-flex; align-items: center; min-height: 44px; }
  html.ws .tb { min-width: 44px; }
  html.ws .brand-home { min-height: 44px; display: inline-flex; align-items: center; }
  html.ws .geo-name { display: inline-flex; align-items: center; min-height: 44px; }
  html.ws .ov-week-row { min-height: 44px; }
  /* Tab rows (Money, Inbox, Dispatch…) scroll sideways instead of running off the screen or wrapping 3 lines tall. */
  html.ws .seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  html.ws .seg::-webkit-scrollbar { display: none; }
  html.ws .seg button { flex: none; white-space: nowrap; display: inline-flex; align-items: center; }
  /* Buttons side by side keep 8px apart. */
  html.ws .row:has(> .btn), html.ws .row:has(> button), html.ws .row:has(> select), html.ws .row:has(> .tb) { gap: 8px !important; }
  /* Enquiries: the time goes on its own line, so names, numbers and emails get the width. */
  html.ws .lead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 120px); }
  html.ws .lead-grid > :first-child { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
  /* Report tables: the name column keeps 120px; the card scrolls sideways when the figures don't fit. */
  html.ws .rep-cols .tr { column-gap: 14px; }
  /* Dispatch: round WhatsApp/Call buttons and grouped buttons. */
  html.calm .geo-drv .btn.chip.tb { width: 44px; height: 44px; min-height: 44px; }
  html.ws .btn-group .btn { white-space: nowrap; }
  /* A row of tabs inside a row may shrink (it scrolls itself), so the page never goes wider than the phone. */
  html.ws .row > .seg, html.ws .main .row > .row { min-width: 0; flex: 1 1 auto; }
  html.ws .btn.chip, html.ws summary.btn.chip { min-height: 44px !important; }
  /* Page headings with buttons (Jobs: Check a load, Agent results, New booking): buttons keep one line and move under the heading. */
  html.ws .main .row:has(> h1), html.ws .main .row:has(> h2) { flex-wrap: wrap; }
  html.ws .row > .row { flex-wrap: wrap; }
  html.ws .row > .row > .btn { white-space: nowrap; }
  /* Pop-ups and the job panel: 44px fields, 8px between segment buttons. */
  html.ws .seg { gap: 8px; }
  html.ws .modal input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html.ws .drawer input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  html.ws .modal select, html.ws .drawer select, html.ws .modal textarea, html.ws .drawer textarea, html.ws .drv-f input, html.ws .drv-f select { min-height: 44px; box-sizing: border-box; }
  /* Offer to drivers: the list kept collapsing to a thin strip and the names to 13px. */
  html.ws .offer-list { flex-shrink: 0; min-height: 260px; }
  html.ws .offer-list.table { padding: 4px 12px; }
  html.ws .offer-grid { grid-template-columns: minmax(0, 1fr) 64px 44px 44px; column-gap: 6px; }
  html.ws .offer-list .tr.head span { font-size: 11px; }
  html.ws .au-switch { min-height: 44px; box-sizing: border-box; }
}

/* Phone audit 15 Oct 2026: the customer booking page and the trade portal (pages that load portal.css outside the workspace). */
@media (max-width: 760px) {
  html:not(.ws) .btn, html:not(.ws) .seg button, html:not(.ws) .t-tabs button, html:not(.ws) .brand-home, html:not(.ws) .linkish,
  html:not(.ws) .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html:not(.ws) .field select, html:not(.ws) .field textarea,
  html:not(.ws) input[type=file] { min-height: 44px; box-sizing: border-box; }
  html:not(.ws) .brand-home { display: inline-flex; align-items: center; }
  html:not(.ws) .t-tabs, html:not(.ws) .seg { gap: 8px; }
  html:not(.ws) .row:has(> .btn) { gap: 8px !important; }
}

/* 1.113.0: way back to the Owner app when a page was opened from it */
.owner-back { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); z-index: 1200; background: #16A34A; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); white-space: nowrap }
@media (min-width: 761px) { .owner-back { bottom: 20px } }
/* Sales → Commission (1.119.0) */
.cm-table { overflow-x: auto; }
.cm-ppl { grid-template-columns: minmax(0, 1.4fr) 90px 150px 130px minmax(150px, 1fr); align-items: center; min-width: 640px; }
.cm-detail { padding: 6px 14px 14px; background: var(--subtle, rgba(0,0,0,.02)); min-width: 640px; }
.cm-row { grid-template-columns: 90px minmax(0, 1.4fr) 140px 120px 120px 100px; align-items: start; }
.cm-row .full { grid-column: 1 / -1; }
.cm-hits { display: flex; flex-wrap: wrap; gap: 6px; }
.geo-toggle { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; margin:0 0 8px; cursor:pointer; } .geo-toggle input { width:auto; }

.cc-grid{display:grid;grid-template-columns:90px 110px minmax(0,1fr) 150px;gap:10px;align-items:start}
@media (max-width:760px){.cc-grid{grid-template-columns:70px minmax(0,1fr) 110px}.cc-grid>span:nth-child(2){display:none}}

/* Waste lead window (1.124.15): three steps, facts as tiles. */
.modal.wl { display: flex; flex-direction: column; gap: 12px; }
.wl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.wl-facts div { background: var(--panel-2, #f5f6f8); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.wl-facts span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); }
.wl-facts b { font-size: 14px; }
.wl-step { border: 1px solid var(--divider); border-radius: 12px; padding: 12px 14px; }
.wl-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.wl-n { width: 24px; height: 24px; border-radius: 50%; background: var(--accent, #0078FF); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.wl-chat .ib-msgs { max-height: 260px; overflow-y: auto; }
.wl-chat .ib-head { display: none; }
.wl-ph { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.wl-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; border: 1px solid var(--divider); }
.wl-go { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.wl-go .btn-wa { flex: 1; min-width: 200px; }
.wl-app { border-top: 1px solid var(--divider); margin-top: 12px; padding-top: 10px; }
.wl-q { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--divider); }
.wl-big { width: 100%; min-height: 48px; font-size: 16px; }
.wl-more summary { cursor: pointer; font-size: 14px; color: var(--muted, #6b7280); padding: 6px 0; }

/* Dispatch map: initials beside each driver (1.124.21) */
.dp-wrap { background: none; border: 0; }
.dp-dot { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(0,0,0,.08); }
.dp-lbl { position: absolute; left: 24px; top: 0; font-weight: 700; font-size: 12px; color: #111; text-shadow: 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; }
.dp-live { border: 1px solid var(--divider); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.dp-row { display: grid; grid-template-columns: auto minmax(90px, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--divider); font-size: 14px; }
.dp-row:first-of-type { border-top: 0; }
.dp-job { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .dp-row { grid-template-columns: auto 1fr; } .dp-job { grid-column: 2; } }