:root {
  --accent: #2453D6;
  --ground: #F3F4F6;
  --card: #FFFFFF;
  --line: #E2E5EA;
  --line-soft: #EDEFF2;
  --ink: #15171C;
  --ink-2: #2A2E36;
  --muted: #4A505C;
  --field: #D5D9E0;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { font-size: 13px; color: var(--muted); }
.wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 640px) { .wrap { padding-left: 16px; padding-right: 16px; } }

/* Top bar */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-inner { padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; }
.logo { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 17px; letter-spacing: -0.01em; }
.brand-text span { font-size: 12px; color: var(--muted); }
.datenav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ibtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--field); background: var(--card); border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.ibtn:hover { background: #F6F7F9; }
.ibtn.sq { width: 44px; padding: 0; justify-content: center; }
.ibtn.date { min-width: 210px; }
.ibtn:disabled { opacity: 0.55; cursor: default; background: var(--card); }
.date-wrap { position: relative; }
.date-input { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Week strip */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 700px; }
.day { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; text-align: left; min-height: 44px; }
.day:hover { border-color: #C3C8D0; }
.day.is-sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #F4F7FF; }
.day.is-closed { background: #F7F8FA; }
.day-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.day-name { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.day-num { font-size: 18px; font-weight: 600; }
.today-tag { margin-left: auto; font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 4px; padding: 1px 6px; }
.rpt-when .today-tag { margin-left: 6px; vertical-align: 1px; }
.day-open { font-size: 12px; color: var(--ink-2); }
.mini.wide { width: 100%; }

/* Main tabs and signed-in user */
.sched-tools { display: contents; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--ground); }
.tabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.me { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; margin-left: auto; text-decoration: none; color: var(--ink); }
.gcell { display: flex; flex-direction: column; }
.me-text { display: flex; flex-direction: column; line-height: 1.2; }
.me-text strong { font-size: 13px; }
.me-text span { font-size: 12px; color: var(--muted); }
@media (max-width: 1240px) { .me-text { display: none; } }

/* Avatars, roles, account status */
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; }
.avatar.big { width: 44px; height: 44px; font-size: 15px; }
.av-blue { background: #DCE5FF; color: #1E3A8A; }
.av-orange { background: #FCE3D0; color: #7C2D12; }
.av-green { background: #D5F0E0; color: #14532D; }
.av-purple { background: #E9DFFA; color: #4C1D95; }
.av-gray { background: #E6E8EC; color: #2A2E36; }
.ucell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.you { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--ground); font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: 1px; }
.role { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.role-admin { background: var(--ink); color: #fff; }
.role-manager { background: #DCE5FF; color: #1E3A8A; }
.role-advisor { background: #D3EEEC; color: #0F4C47; }
.role-tech { background: #E6E8EC; color: #2A2E36; }
.role-viewer { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px #C3C8D0; }
.role-system { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px #C3C8D0; border: 1px dashed transparent; }
.ustatus { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ustatus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.us-active::before { background: #1F8A4C; }
.us-invited::before { background: #D98A00; }
.us-disabled { color: var(--muted); }
.us-disabled::before { background: #9AA1AD; }
tr.is-disabled .rowbtn, tr.is-disabled .cust span { color: var(--muted); }
tr.is-system td { background: #FAFAFB; }
.small { font-size: 12px; }
.dim { color: var(--muted); }

/* Admin layout */
.admin { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding-top: 24px; padding-bottom: 40px; }
.admin-nav { flex: 1 1 200px; max-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-title { padding: 0 12px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.admin-nav a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.admin-nav a:hover { background: #E9EBEF; }
.admin-nav a[aria-current] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 999px) { .admin-nav { max-width: none; flex-direction: row; flex-wrap: wrap; } .admin-nav-title { display: none; } }
@media (max-width: 640px) { .admin-nav { flex-wrap: nowrap; } .admin-nav a { flex: none; } } /* a phone: one row that scrolls sideways (it fades where there is more) */
.admin-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
#admin-users { display: flex; flex-direction: column; gap: 20px; }
#admin-users[hidden] { display: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page-head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.page-head p { margin: 0; max-width: 620px; font-size: 14px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.toolbar .searchbox { margin-left: 0; flex: 1 1 260px; max-width: 360px; }
.toolbar .search { padding-right: 12px; }
.inp.auto { width: auto; }
.inline-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.inline-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.list-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.perms td, .perms th { text-align: left; }
.perms .c { text-align: center; }
.perms .yes { color: #1F8A4C; display: inline-flex; }
.perms .no { color: #9AA1AD; }
/* Admin sections */
.admin-section { display: flex; flex-direction: column; gap: 20px; }
.card.pad { padding: 20px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.card-h { margin: 0; font-size: 16px; font-weight: 600; }
.card.pad .card-h + .fields { margin-top: 14px; }
.card.pad .fields + .card-h { margin-top: 24px; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
.save-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flabel.big { font-size: 14px; color: var(--ink); }
.rcards.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.inline > .inp { flex: 1 1 200px; }
.inline > .field { flex: 1 1 220px; max-width: 340px; }
.kv + .note { margin-top: 14px; }
.inline > span { padding-bottom: 12px; }
.inp.narrow { flex: 0 0 96px; width: 96px; }
.fields.three { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fields.three .field.wide { grid-column: 1 / -1; }
.cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 14px 0 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.issues li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-radius: 10px; background: #FFF4E5; color: #5C3400; font-size: 14px; }
.ok-line { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.inline-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; }
a.ibtn { text-decoration: none; }
.danger-bg, .primary.danger-bg { background: #B42318; border-color: #B42318; }
#d-timezone { min-width: 20em; max-width: 100%; }
.days7 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.days7 .inp { padding: 0 8px; }
.card.list-col { align-self: flex-start; }
th.num, td.num { text-align: right; }

/* Shop hours table */
.hours-table th[scope="row"] { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); background: none; border-bottom: 1px solid var(--line-soft); }
.hours-table td { padding: 8px 8px; }
.inp.tsel { appearance: none; -webkit-appearance: none; height: 40px; width: 76px; padding: 0 20px 0 9px; font-size: 13px; cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234A505C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center; }
.pair { display: flex; align-items: center; gap: 4px; }
.pair span { color: var(--muted); }
.hours-table tr.has-err td, .hours-table tr.has-err th { border-bottom: 0; background: #FEF3F2; }
.err-row td { padding-top: 0; background: #FEF3F2; }
/* Scrolled sideways (a phone, an upright tablet): the day names stay at the left. */
.scroll-x .hours-table th[scope="row"], .scroll-x .hours-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: inset -1px 0 0 var(--line-soft); }
.scroll-x .hours-table tr.has-err th[scope="row"] { background: #FEF3F2; }

/* Switch (styled checkbox) */
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 40px !important; height: 24px !important; margin: 0; border-radius: 999px; background: #C3C8D0; cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(16px); }
.switch-row { align-items: center; }

/* Schedule: frozen state and low-hours warning */
fieldset.bare { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
fieldset.bare:disabled .chip, fieldset.bare:disabled .inp { opacity: 0.6; cursor: not-allowed; }
.banner.frozen { background: #EEF2FF; border-color: #C7D2FE; color: #1E2A78; }
.banner.dayload { background: #F6F7F9; border-color: var(--line); color: var(--ink-2); }
.banner.frozen .banner-btn { border-color: #C7D2FE; }
.cap-warn { font-size: 12px; font-weight: 600; color: #fff; background: #C2410C; border-radius: 4px; padding: 1px 6px; }
.capacity.is-low .cap-open { color: #C2410C; }
.capacity.is-low .meter-fill { background: #C2410C; }
.day.is-low .day-open { color: #C2410C; font-weight: 600; }
.day.is-low .mini span { background: #C2410C; }

/* User panel */
.p-head h2 .you { font-size: 11px; }
fieldset.p-group { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.p-group legend { padding: 0; margin-bottom: 8px; }
.rcards { display: flex; flex-direction: column; gap: 6px; }
.rcard { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--field); border-radius: 10px; cursor: pointer; }
.rcard:hover { background: #F7F8FA; }
.rcard.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #F4F7FF; }
.rcard input, .check input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.rcard > span, .check > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.rcard > span > span, .check > span > span { font-size: 12.5px; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; cursor: pointer; }
.section { padding-top: 16px; border-top: 1px solid var(--line-soft); gap: 14px; }
.skill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--field); border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; }
.skill input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.skill.on { background: #F4F7FF; border-color: var(--accent); }
.help { font-size: 12px; color: var(--muted); }
.err { font-size: 12.5px; font-weight: 500; color: #B42318; }
.inp[aria-invalid="true"] { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; }
.order { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.order .muted { margin-right: auto; }
.ibtn.sm { height: 36px; font-size: 13px; }
.ibtn:disabled { opacity: 0.5; cursor: default; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 10px; background: var(--ground); align-self: flex-start; }
.seg label { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--muted); }
.seg label.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.note { margin: 0; font-size: 14px; line-height: 1.45; }
.note.lic-lock { margin-bottom: 12px; } /* an add-on that's off (auth.js addonLock): apart from the card below */
body:has(#p-discard) .toast { bottom: 170px; } /* above the question, not over its buttons */
#p-discard { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; width: min(440px, calc(100vw - 32px)); box-shadow: 0 12px 32px rgba(15,18,25,0.22); }
.needs-tag.new { color: #1D4ED8; }
.confirm { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 10px; background: #FFF4E5; border: 1px solid #F3C98B; color: #5C3400; font-size: 14px; }
.confirm .row-btns { margin-top: 6px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 10; }
.ibtn svg { flex: none; }
.kbd { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); border: 1px solid var(--field); border-radius: 4px; padding: 1px 5px; background: #F6F7F9; }
.capacity { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.cap-line { display: flex; align-items: baseline; gap: 8px; }
.cap-open { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.meter { height: 6px; border-radius: 999px; background: #E6E8EC; overflow: hidden; }
.meter-fill { height: 6px; border-radius: 999px; background: var(--accent); transition: width .2s; }
.searchbox { flex: 1 1 260px; max-width: 380px; position: relative; margin-left: auto; }
.search-icon { position: absolute; left: 12px; top: 13px; color: var(--muted); }
.search { height: 44px; border: 1px solid var(--field); border-radius: 10px; padding: 0 44px 0 38px; background: var(--card); font-size: 14px; width: 100%; }
.search-kbd { position: absolute; right: 10px; top: 12px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.primary { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.primary:hover { filter: brightness(1.08); }
.primary:disabled { opacity: 0.45; cursor: default; filter: none; }
.inp:disabled { background: #F1F3F6; color: var(--muted); cursor: not-allowed; }
.rcard:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.rcard.on:has(input:disabled) { box-shadow: none; background: var(--card); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search:focus, .inp:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* Layout */
.main { padding-top: 20px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-title { display: flex; align-items: baseline; gap: 12px; }
.card-title h2 { margin: 0; font-size: 16px; font-weight: 600; }
.scroll-x { overflow-x: auto; }
.scroll-x.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.lower { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.list { flex: 999 1 560px; min-width: 0; }
.panel { flex: 1 1 360px; max-width: 100%; }
/* Below 1000 px (tablets held upright, phones), and on a touch tablet held sideways, the details panel is a sheet over
   the list (app.js openSheet, SHEET_MQ: the same query): it would otherwise land under the whole list, or under the grid
   that fills a sideways tablet. Desktops keep it beside the list. A tap on a job or a customer slides it in; Close, Esc or the scrim put it away. */
.sheet-bar, .sheet-scrim { display: none; }
@media (max-width: 999px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  /* Only the panels app.js opens as sheets: the skill and text panels (also .panel) stay in the page. */
  #panel, #cu-panel, #u-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(480px, 100%); max-width: none; margin: 0; border-radius: 0; border-width: 0 0 0 1px; overflow-y: auto; overscroll-behavior: contain; padding-top: 60px; transform: translateX(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s 0.2s; }
  :is(#panel, #cu-panel, #u-panel).sheet-open { transform: none; visibility: visible; transition: transform 0.2s ease; box-shadow: -12px 0 32px rgba(15,18,25,0.18); }
  .sheet-bar:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; top: 0; right: 0; z-index: 41; width: min(480px, 100%); height: 60px; padding: 0 12px 0 20px; background: var(--card); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
  .sheet-bar strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(15,18,25,0.32); }
  .toast { z-index: 50; }
}
@media (prefers-reduced-motion: reduce) { #panel, #cu-panel, #u-panel { transition: none; } }

/* Banner */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; border-radius: 12px; background: #E3F3F8; border: 1px solid #A9D7E5; color: #0A4252; }
.banner-text { flex: 1 1 320px; font-size: 14px; line-height: 1.4; }
.banner-btn { border-color: #A9D7E5; }

/* Status colours */
.st-appt { background: #FCE8A8; color: #4F3A00; }
.st-online { background: #FFD8BA; color: #5E2800; }
.st-shop { background: #F9C6C2; color: #6E140F; }
.st-wait { background: #E4D5FA; color: #401B70; }
.st-valid { background: #C3E8D2; color: #0B4425; }
.st-done { background: #E6E8EC; color: #3F4550; }
.st-off { background: #FFFFFF; color: var(--muted); box-shadow: inset 0 0 0 1px #C3C8D0; }
.is-conf { box-shadow: inset 0 0 0 2px #0E7490; background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(14,116,144,0.22) 7px 10px); }
.conf-text { color: #0A4252; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px; }
.legend { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Shop grid */
.grid-inner { min-width: 980px; }
.grid-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.grid-header { border-bottom: 1px solid var(--line); background: #FAFAFB; }
.th-cell { padding: 10px 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.hours { position: relative; height: 44px; }
.hour { position: absolute; top: 6px; padding-left: 6px; font-size: 12px; font-weight: 500; color: #3F4550; }
.now-label { position: absolute; bottom: 3px; transform: translateX(-50%); padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--accent); z-index: 3; }
.tlabel { height: 60px; border-bottom: 1px solid #E7E9ED; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 16px; }
@media (max-width: 999px) {
  .grid-inner { min-width: 1160px; }
  .grid-row { grid-template-columns: 170px minmax(0, 1fr); }
  .tlabel, .grid-header .th-cell { position: sticky; left: 0; z-index: 5; background: var(--card); }
  .grid-header .th-cell { background: #FAFAFB; }
  .tlabel { gap: 8px; padding: 0 10px; }
  .tlabel .tid { display: none; }
}
.tid { flex: none; width: 34px; height: 28px; border-radius: 6px; background: #F1F2F5; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #3F4550; }
.tname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tname strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tname span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topen { flex: none; width: 56px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.mini { width: 56px; height: 4px; border-radius: 999px; background: #E6E8EC; overflow: hidden; }
.mini { display: block; }
.mini span { display: block; height: 4px; background: #6B7280; }
.closed-band { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #ECEEF2 0 8px, #E2E5EA 8px 16px); }
.closed-day { padding: 48px 20px; text-align: center; font-size: 14px; color: var(--muted); }
.track { position: relative; height: 60px; border-bottom: 1px solid #E7E9ED; background-image: repeating-linear-gradient(to right, #DDE1E7 0 1px, transparent 1px var(--hour, 11.1111%)), repeating-linear-gradient(to right, #EEF0F3 0 1px, transparent 1px var(--quarter, 2.7778%)); }
.brk { position: absolute; top: 0; bottom: 0; background: #ECEEF2; }
.now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 2; }
.blk { position: absolute; top: 8px; bottom: 8px; margin-left: 1px; border: 0; border-radius: 8px; padding: 4px 8px; text-align: left; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; z-index: 1; }
.blk:hover { filter: brightness(0.97); }
.blk.is-sel { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 4; }
.blk .t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk .s { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk.lane { padding-top: 0; padding-bottom: 0; }
.blk.lane .s { display: none; }
.blk.lane .t { font-size: 11.5px; }
.offband { position: absolute; top: 8px; bottom: 8px; left: 4px; right: 4px; border: 0; border-radius: 8px; background: repeating-linear-gradient(135deg, #F1F2F5 0 8px, #E6E8EC 8px 16px); display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 13px; font-weight: 500; color: #3F4550; cursor: pointer; text-align: left; }
.offband:hover, .offblk:hover { box-shadow: inset 0 0 0 1px #9AA1AD; }
.offblk { position: absolute; top: 4px; bottom: 4px; margin-left: 1px; border: 1px dashed #9AA1AD; border-radius: 8px; padding: 0 8px; background: repeating-linear-gradient(135deg, #F4F5F7 0 7px, #E6E8EC 7px 14px); display: flex; align-items: center; overflow: hidden; font-size: 11.5px; font-weight: 600; color: #3F4550; cursor: pointer; }
.offblk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track { cursor: copy; }
.track > .brk, .track > .closed-band { cursor: default; }

/* Booking checks */
.checks { display: flex; flex-direction: column; gap: 8px; }
.checks[hidden] { display: none; }
.chk { padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.chk strong { display: block; margin-bottom: 2px; font-size: 13px; }
.chk ul { margin: 0; padding-left: 18px; }
.chk-err { background: #FEF3F2; border: 1px solid #F3B4AE; color: #7A1A12; }
.chk-warn { background: #FFF6E6; border: 1px solid #F1CE8F; color: #5C3400; }
.field .err[hidden] { display: none; }
.needs-tag { margin-left: 6px; font-size: 12px; font-weight: 600; color: #B42318; }
.nshow-tag { margin-left: 8px; font-family: var(--sans); }
.rowbtn.noname { color: var(--muted); font-style: italic; }
.rowbtn.shellname { color: var(--muted); font-weight: 400; }
.blk .t .shellname { font-weight: 400; opacity: 0.85; }
.blk.cont { justify-content: center; }
.blk.cont .t { font-size: 11px; font-weight: 500; opacity: 0.85; }

/* Empty-slot and status menu */
.slot-menu { position: fixed; z-index: 20; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(15,18,25,0.16); }
.slot-menu[hidden] { display: none; }
.slot-title { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.slot-menu button { min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; cursor: pointer; }
.slot-menu button:hover, .slot-menu button:focus-visible { background: #EDF2FF; outline: none; }
.slot-menu button[role=menuitemradio] { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.slot-menu button[aria-checked=true] { font-weight: 600; }
.slot-menu button[aria-checked=true]::after { content: "✓"; margin-left: auto; color: var(--accent); }
.sdot { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.slot-menu .hint { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.slot-menu button[aria-checked=true] .hint { margin-left: 8px; }

/* Grid mouse actions (grid.js) */
#grid-rows .track { user-select: none; -webkit-user-select: none; }
#grid-rows .blk:not(.cont) { cursor: grab; }
.rsz { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.rsz::after { content: ""; position: absolute; top: 50%; right: 2px; width: 2px; height: 14px; transform: translateY(-50%); border-radius: 1px; background: currentColor; opacity: 0; transition: opacity .1s; }
.blk:hover .rsz::after, .blk.is-sel .rsz::after { opacity: 0.45; }
.blk.is-moving { opacity: 0.4; }
.ghost { position: absolute; top: 6px; bottom: 6px; margin-left: 1px; border: 2px dashed var(--accent); border-radius: 8px; background: rgba(36, 83, 214, 0.1); pointer-events: none; z-index: 6; }
.ghost.is-warn { border-color: #B25E00; background: rgba(241, 160, 30, 0.16); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
body.drag-resize, body.drag-resize * { cursor: ew-resize !important; }
body.drag-create, body.drag-create * { cursor: copy !important; }
.drag-tip { position: fixed; z-index: 30; display: flex; flex-direction: column; gap: 1px; max-width: 280px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.35; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.drag-tip[hidden] { display: none; }
.drag-tip .mono { white-space: nowrap; }
.drag-tip .w { color: #FFC978; }
.toast:has(.toast-undo) { display: flex; align-items: center; gap: 14px; }
.toast:has(.toast-undo) .toast-undo { margin-left: 0; } /* the message wraps beside Undo, not under it */
.toast-undo { flex: none; white-space: nowrap; margin-left: 14px; padding: 4px 10px; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; background: none; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.toast-undo:hover { background: rgba(255,255,255,0.12); }

/* Dialog */
.dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 0 24px 64px rgba(15,18,25,0.25); }
.dialog::backdrop { background: rgba(15,18,25,0.45); }
.dlg { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0 0 2px; font-size: 20px; }
.dlg-body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.dlg-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.to-date { max-width: 320px; }
#to-dlg { margin: 24px auto auto; } /* held at the top: it grows downwards instead of moving as its content changes */
.to-view { align-self: stretch; max-width: 520px; }
.to-view label { flex: 1 1 0; justify-content: center; min-height: 36px; height: auto; padding: 4px 12px; text-align: center; line-height: 1.25; }
.tr-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.tr-fields .field { flex: 1 1 160px; max-width: 240px; }
.tr-what, .tr-sum { display: flex; flex-direction: column; gap: 10px; }
.tr-sum { gap: 6px; font-size: 14px; }
.tr-wd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tr-wd:empty { display: none; }
.tr-wd .seg { flex-wrap: wrap; }
.tr-wd .seg label { padding: 0 12px; }
.tr-wd .seg label:not(.on) { text-decoration: line-through; } /* a day of the week left out reads as such, focused or not */
.tr-sum .tr-whole { align-self: flex-start; text-align: left; }
.to-main { display: contents; }
.to-tech { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.to-tech.has-err { border-color: #F3B4AE; background: #FEF8F7; }
.to-tech legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 14px; font-weight: 600; }
.to-tech .seg { flex: none; }
@media (max-width: 640px) { .to-tech .seg { flex: 1 1 100%; } .to-tech .seg label, .tr-what .seg label { flex: 1 1 0; justify-content: center; padding: 0 8px; text-align: center; } .tr-what .seg { align-self: stretch; } }
.to-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.to-row .inp { width: 160px; }
.to-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.to-period .inp:not(.tsel) { width: 150px; }
.to-tech .err { width: 100%; }
.to-jobs { margin: 4px 0 0; padding-left: 18px; font-size: 13px; max-height: 168px; overflow: auto; } /* every job, scrolling past about eight */
.dlg-foot .to-esc { flex: 1 1 100%; }

/* Table */
table { border-collapse: collapse; width: 100%; }
th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #FAFAFB; white-space: nowrap; }
td { font-size: 13.5px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; }
tbody tr:hover td { background: #F7F8FA; }
tr.is-sel td, tr.is-sel:hover td { background: #EDF2FF; }
td.dim { color: var(--muted); }
td.concern { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
td.remark { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.cust { display: flex; flex-direction: column; }
.cust span { font-size: 12px; color: var(--muted); }
#rows tr[data-row] { cursor: pointer; }
.rowbtn { border: 0; background: none; padding: 6px 0; cursor: pointer; font-weight: 600; text-align: left; color: var(--ink); }
.rowbtn:hover { text-decoration: underline; }
.overlap-tag { margin-left: 6px; font-size: 12px; font-weight: 600; color: #0A4252; }
.empty { padding: 32px 20px; text-align: center; font-size: 14px; color: var(--muted); }

/* Detail panel */
.p-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.p-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.p-tags .web-tag, .p-tags .move-tag { white-space: nowrap; flex: none; }
.p-head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.p-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.p-group { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--field); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chip:not(.on) { background: var(--card); color: var(--ink-2); }
.chip:not(.on):not(.rm-on):hover { background: #F6F7F9; }
.chip.rm-on:hover { background: #2B3442; }
.chip.on { border: 2px solid currentColor; font-weight: 600; }
.chip.rm-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: span 2; }
.field label, .flabel { font-size: 12px; font-weight: 600; color: #3F4550; }
.inp { height: 44px; border: 1px solid var(--field); border-radius: 8px; padding: 0 10px; background: var(--card); font-size: 14px; width: 100%; min-width: 0; }
textarea.inp { height: 88px; padding: 10px; resize: vertical; line-height: 1.45; }
.readout { height: 44px; border-radius: 8px; background: var(--ground); display: flex; align-items: center; padding: 0 10px; font-size: 14px; color: var(--ink-2); }
.p-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.danger { color: #9B1C14; }
.saved { margin-left: auto; font-size: 12px; color: var(--muted); }
@media (max-width: 420px) { .fields { grid-template-columns: minmax(0, 1fr); } .field.wide { grid-column: auto; } }

/* Reports (reports.js): dialog, paper preview, print */
.dialog.wide { width: min(1200px, calc(100% - 32px)); }
.rpt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.rpt-nav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rpt-when { min-width: 210px; text-align: center; font-size: 14px; }
@media (max-width: 640px) { .rpt-when { min-width: 0; flex: 1 1 140px; } .rpt-print { margin-left: 0; } }
.rpt-print { margin-left: auto; }
.rpt-stage { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px; background: var(--ground); } /* the schedule behind doesn't scroll on */
.paper { width: 1056px; margin: 0 auto; padding: 32px 36px 40px; background: #fff; color: var(--ink); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(15,18,25,0.08); font-size: 12px; }
.pp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.pp-org { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.pp-org strong { font-size: 13px; color: var(--ink); }
.pp-title { text-align: center; }
.pp-title h1 { margin: 0 0 2px; font-size: 20px; }
.pp-title span { font-size: 13px; color: var(--muted); }
.pp-meta { text-align: right; font-size: 11px; color: var(--muted); }
.pp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding: 10px 0; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.pp-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.pp-empty { padding: 48px 0; text-align: center; font-size: 14px; color: var(--muted); }
.pp-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11.5px; }
.pp-table th { padding: 6px; border-bottom: 1px solid #C3C8D0; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pp-table th { background: none; }
.pp-table td { padding: 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 11.5px; white-space: normal; }
.pp-table td.mono, .pp-table td.pp-nw, .pp-table .pp-sub.mono { white-space: nowrap; }
.pp-table td.pp-nw:nth-child(3) { white-space: normal; min-width: 90px; } /* the vehicle may wrap */
.pp-table tbody tr:hover td { background: none; }
.pp-table tbody tr:hover td.pp-total { background: #F6F7F9; }
.pp-table .num { text-align: right; }
.pp-sub { display: block; font-size: 10.5px; color: var(--muted); }
.pp-concern { width: 30%; white-space: pre-line; } /* the lines typed in the concern */
.pp-concern, .pp-table td:nth-child(2), .pp-table td.pp-nw:nth-child(3) { overflow-wrap: anywhere; } /* a long unbroken word wraps instead of pushing the table off the sheet */
.pp-st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pp-st .sdot { width: 10px; height: 10px; border-radius: 3px; }
.pp-off td { color: var(--muted); background: #F4F5F7; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* a no-show or cancellation reads apart from the live jobs, on paper too */
.pp-off .pp-st { font-weight: 600; color: var(--ink-2); } /* Cancel / No-Show reads at a glance */
.pp-table .pp-sub.pp-warn, .pp-sum .pp-warn { font-weight: 600; color: #B42318; }
.pp-group th { padding: 14px 6px 6px; background: #F6F7F9; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pp-group th span { margin-left: 12px; font-weight: 400; color: var(--muted); }
.pp-skills th[scope=row] { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom-color: var(--line-soft); }
.pp-cell { min-width: 100px; }
.pm { display: block; height: 4px; margin: 4px 0 2px; border-radius: 999px; background: #E6E8EC; overflow: hidden; }
.pm span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.pp-pct { display: block; font-size: 10.5px; color: var(--muted); }
.pp-pct.pp-nobody { font-weight: 600; color: #B54708; }
.pp-table td.pp-nojobs { color: var(--muted); }
.pp-cell.is-over .pm span { background: #B42318; }
.pp-cell.is-over .pp-pct { font-weight: 600; color: #B42318; }
.pp-none { color: #9AA1AD; }
.pp-table .pp-total { background: #F6F7F9; }
.pp-table th.pp-today { color: var(--accent); }
.pp-nosk th, .pp-nosk td { color: var(--muted); }
.pp-legend { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.pp-jobs { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 1), auto); gap: 3px 16px; margin-top: 10px; font-size: 11px; color: var(--ink-2); } /* who is in each block: short blocks cut the name */
.pp-jobs span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-grid { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pp-grid .track { cursor: default; }
.pp-grid .blk .t, .pp-grid .blk .s { text-overflow: clip; } /* a short job keeps its # on paper instead of "#…" */
#rpt-dlg { margin-top: 24px; } /* anchored at the top: a shorter page (closed or empty day) doesn't move the arrows */
#print-root { display: none; }
@page { size: landscape; margin: 10mm 10mm 12mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt "IBM Plex Sans", "Segoe UI", sans-serif; color: #4A505C; } }
@media print {
  body.printing { background: #fff; }
  body.printing > :not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  #print-root .paper { width: auto; padding: 0; border-radius: 0; box-shadow: none; }
  #print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pp-table thead { display: table-header-group; }
  .pp-table tr, .pp-grid .grid-row { break-inside: avoid; }
}

/* Search across days (search.js) */
.search-pop { position: absolute; top: calc(100% + 6px); z-index: 25; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 120px)); border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 12px 32px rgba(15,18,25,0.16); overflow: hidden; }
.sr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.sr-head .muted { font-weight: 400; }
.sr-win .inp { height: 36px; width: auto; padding: 0 10px; font-size: 13px; }
.sr-list { margin: 0; padding: 4px 6px 6px; list-style: none; overflow-y: auto; }
.sr-group { padding: 10px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sr-item { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px; border-radius: 8px; cursor: pointer; }
.sr-item:hover { background: #F4F6FA; }
.sr-item.is-active { background: #EDF2FF; box-shadow: inset 3px 0 0 var(--accent); }
.sr-date { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12.5px; font-weight: 600; }
.sr-date .today-tag { margin-left: 0; font-family: var(--sans); }
.sr-time { flex-basis: 100%; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.sr-main { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.sr-main strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-main .mono { font-size: 12px; color: var(--muted); }
.sr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sr-side .badge { height: 20px; font-size: 11px; }
.search-pop mark { background: #FFE58A; color: inherit; border-radius: 2px; padding: 0 1px; }
.sr-empty { margin: 0; padding: 18px 14px; font-size: 13.5px; color: var(--muted); }
.sr-more, .sr-keys { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; }
.sr-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) { .sr-item { grid-template-columns: 96px minmax(0, 1fr); } .sr-side { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }

/* Phone numbers (phones.js) */
.phones { display: flex; flex-direction: column; gap: 12px; }
.ph-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "type num num" "ext main del" "msg msg msg"; align-items: center; gap: 6px; }
.ph-msg { grid-area: msg; }
.ph-row + .ph-row { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ph-row .inp { min-width: 0; }
.ph-type { grid-area: type; }
.ph-num { grid-area: num; }
.ph-ext { grid-area: ext; }
.ph-row .ph-main, .ph-row [data-action=phone-main] { grid-area: main; justify-self: start; }
.ph-row [data-action=phone-remove] { grid-area: del; }
.ph-main { padding: 2px 8px; border-radius: 999px; background: #EDF2FF; color: var(--accent); font-size: 12px; font-weight: 600; }
.ph-add { align-self: flex-start; margin-top: 8px; }
.more-ph { margin-left: 4px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--accent); }

/* First-run setup (setup.js) */
.setup { padding-top: 24px; padding-bottom: 48px; }
.su-wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.su-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.su-top h1 { margin: 0 0 4px; font-size: 26px; }
.su-top p { margin: 0; }
.su-steps { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.su-steps li { display: inline-flex; align-items: center; gap: 8px; }
.su-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--field); background: var(--card); font-size: 12px; font-weight: 600; }
.su-steps li.done .su-n { border-color: var(--accent); color: var(--accent); position: relative; }
.su-steps li.done:not(.cur) .su-n::after { content: "✓"; position: absolute; right: -5px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 9px; line-height: 14px; text-align: center; } /* done: not by colour alone */
.su-steps li.cur { color: var(--ink); font-weight: 600; }
.su-steps li.cur .su-n { border-color: var(--accent); background: var(--accent); color: #fff; }
.su-card .card-foot { justify-content: space-between; }
.su-body { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; }
.su-body > p { margin: 0; }
.su-body > .ibtn, .su-body > .help { align-self: flex-start; }
.su-h { margin: 0; font-size: 20px; }
.su-h:focus { outline: none; }
.su-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #F6F7F9; }
.su-box p { margin: 0; }
.su-name { display: flex; align-items: center; gap: 12px; }
.su-name .mono { font-size: 22px; font-weight: 600; letter-spacing: 0.04em; }
.su-inline { display: flex; gap: 8px; }
.su-inline .inp { flex: 1 1 auto; min-width: 0; }
.status-line.ok { color: #0B5B30; font-weight: 600; }
.status-line.bad { color: #8A2C0D; }
.su-techs { display: flex; flex-direction: column; gap: 10px; }
.su-tech { display: grid; grid-template-columns: 110px minmax(0, 1fr) 200px 44px; align-items: start; gap: 10px; }
.su-tech > .ibtn { margin-top: 22px; }
.su-body .rcards { gap: 8px; }
.su-body .rcard.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #F4F7FF; }
.check.has-err { color: #7A1A12; }
.admin-nav-setup { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px !important; }
@media (max-width: 999px) { .admin-nav-setup { margin-top: 0; border-top: 0; padding-top: 0 !important; } } /* in the row of sections: level with them */
.su-warn { margin: 0; padding: 12px 14px; border-radius: 10px; background: #FFF4E5; border: 1px solid #F3C98B; color: #5C3400; font-size: 14px; }
.su-nw { white-space: nowrap; }
@media (hover: none) and (pointer: coarse) { .su-body .kv .linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; } } /* Review's Change links: a finger's size */
@media (max-width: 640px) { .su-tech + .su-tech { padding-top: 10px; border-top: 1px solid var(--line-soft); } .su-tech { grid-template-columns: 90px minmax(0, 1fr) 44px; } .su-tech > .field:nth-child(3) { grid-column: 1 / 3; grid-row: 2; } .su-body { padding: 18px 16px; } }

/* Save status (store.js) */
.top-me { display: flex; align-items: center; margin-left: auto; }
.save-state { font-size: 12.5px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.save-state:empty { display: none; }
.save-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9AA1AD; }
.save-state.ss-saved::before { background: #1F8A4C; }
.save-state.ss-saving::before { background: var(--accent); }
.save-state.ss-conflict::before { background: #B25E00; }
.save-state.ss-offline { color: #8A2C0D; font-weight: 600; }
.save-state.ss-offline::before { background: #B42318; }
.save-state.ss-slow { color: #8A4B00; font-weight: 600; }
.save-state.ss-slow::before { background: #B25E00; }
.boot-note { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 60; text-align: center; }
.boot-note:empty { display: none; }
.save-state + .me-wrap { margin-left: 16px; }
@media (max-width: 900px) { .save-state:not(.ss-offline):not(.ss-slow) { font-size: 0; gap: 0; } }
/* Phones and narrow windows: the header in short full-width rows (the tabs with the save note and the account, the day,
   the open hours, the search, the buttons) instead of everything wrapping onto rows of its own. */
@media (max-width: 760px) {
  .topbar-inner { padding-top: 10px; padding-bottom: 10px; gap: 10px 12px; }
  .brand { margin-right: 0; }
  .topbar .brand-text { display: none; } /* the header's; the sign-in card keeps its own */
  .tabs { order: 1; }
  .top-me { order: 2; }
  .datenav { order: 4; flex: 1 1 100%; flex-wrap: nowrap; }
  .date-wrap { flex: 1 1 auto; min-width: 0; }
  .ibtn.date { min-width: 0; width: 100%; }
  #date-label { overflow: hidden; text-overflow: ellipsis; }
  .capacity { order: 5; flex: 1 1 100%; min-width: 0; }
  .searchbox { order: 6; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .actions { order: 7; flex: 1 1 100%; }
}
@media (max-width: 480px) { .topbar .brand { display: none; } .tabs a { padding: 0 10px; } }

/* Sign-in and account (auth.js) */
.me-wrap { position: relative; }
button.me { margin-left: 0; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; cursor: pointer; }
button.me:hover { background: var(--ground); }
.me-menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 240px; }
.me-menu .slot-title { line-height: 1.4; }
.dialog.narrow { width: min(440px, calc(100% - 32px)); }
.topbar [aria-disabled="true"], button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Until start-up is done (app.js sets data-ready="1", the sign-in page "signin"), the empty app isn't shown: a loading line instead */
html:not([data-ready]) body:not(.auth-mode) > * { visibility: hidden; }
html:not([data-ready]) body:not(.auth-mode)::before { content: "Loading ShopTrack…"; position: fixed; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--muted); }
body.auth-mode .topbar, body.auth-mode #view-schedule, body.auth-mode #view-admin, body.auth-mode #view-setup, body.auth-mode #view-customers { display: none !important; }
.auth { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 48px; }
.auth-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 24px; }
.auth-brand { margin: 0 0 4px; }
.auth-card h1 { margin: 0; font-size: 24px; }
.auth-card > p { margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .primary { justify-content: center; }
.auth-form p { margin: 0; }
.auth-form .err { margin: 0; padding: 10px 12px; border-radius: 8px; background: #FEF3F2; color: #7A1A12; font-size: 13.5px; }
.auth-demo { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; background: #F6F7F9; font-size: 13.5px; }
.auth-demo ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.linkbox { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: #F6F7F9; }
.linkbox .row { display: flex; gap: 8px; }
.linkbox .inp { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }

/* Customers (customers.js) */
.customers { padding-top: 24px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.cu-list { flex: 999 1 520px; min-width: 0; }
.cu-panel { flex: 1 1 480px; }
.cu-more { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); }
.cu-none { margin: 0; }
.cu-vehs { display: flex; flex-direction: column; gap: 10px; }
.cu-veh { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.cu-veh .field.wide { grid-column: 1 / -1; }
.cu-veh-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 520px) { .cu-veh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cu-veh .field:first-child { grid-column: 1 / -1; } }
.cu-veh .help:empty, .cu-panel .help:empty { display: none; }
.cu-veh .help:not(:empty), #cu-e-email:not(:empty), .ph-msg:not(:empty) { color: #8A4B00; }
.cu-hist td.concern { max-width: 240px; min-width: 140px; white-space: normal; }
#cu-rows td:first-child, #cu-rows td:nth-child(3) { white-space: normal; min-width: 140px; } /* names, emails and vehicle lists wrap so the list fits its card */
#u-rows td:first-child, #u-rows td:nth-child(4) { white-space: normal; min-width: 150px; } /* the user list too: the Online booking row's note held it 544 px wide */
#u-rows td:first-child .cust span { overflow-wrap: anywhere; }
.cu-sub th { background: var(--card); padding-top: 14px; color: var(--ink-2); }
.nowrap { white-space: nowrap; }
@media (max-width: 999px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  /* Narrow: the customer list, the visits and the user list scroll sideways, so the name and the date stay put (opaque, a line beside them). */
  .cu-list tr > :first-child, .cu-hist tr > :first-child:not([colspan]), #u-rows td:first-child, table:has(#u-rows) th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
  .cu-list td:first-child, .cu-hist td:first-child, #u-rows td:first-child { background: var(--card); }
  .cu-list tbody tr:hover td:first-child, .cu-hist tbody tr:hover td:first-child, #u-rows tr:hover td:first-child { background: #F7F8FA; }
  .cu-list tr.is-sel td:first-child, #u-rows tr.is-sel td:first-child { background: #EDF2FF; }
  /* Admin's logs (emails, texts, activity): cells wrap, so the status and what happened stay on screen. */
  .mail-log td, .mail-log th { white-space: normal; overflow-wrap: anywhere; }
  .mail-log td.concern { max-width: none; min-width: 140px; }
}
.cu-hist .rowbtn { padding: 2px 0; font-family: var(--mono); font-weight: 600; }
.ph-row [data-cu=ph-main] { grid-area: main; justify-self: start; }
.ph-row [data-cu=ph-remove] { grid-area: del; }
.customers mark { background: #FFE58A; color: inherit; border-radius: 2px; padding: 0 1px; }

.dup-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #FFF1E0; color: #8A4B00; font-size: 11px; font-weight: 600; }
.cu-dupes { padding: 10px 12px; border-radius: 10px; background: #FFF6E6; border: 1px solid #F1CE8F; color: #5C3400; font-size: 13px; }
.cu-dupes ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cu-dupes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.cu-dupes a { font-weight: 600; color: inherit; }
.cu-byphone { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.cu-panel .confirm p { margin: 4px 0 8px; font-size: 13px; }
/* The erase box (H5.29): what goes and stays as two lines, then what to look at first, each on its own white line. */
.cu-er-list { margin: 0 0 8px; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.cu-panel .confirm.cu-erase .su-warn { background: #fff; padding: 8px 10px; }
.cu-panel .confirm.cu-erase .linkbtn { font-size: 13px; }
.cu-panel .confirm.cu-erase .ibtn.danger-bg { color: #fff; } /* "Erase their data" once the name matches (customers.js) */
.cu-panel .confirm.cu-erase .ibtn.danger-bg:hover { background: #912018; }
.mg-row { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mg-row legend { padding: 0; margin-bottom: 6px; }
.mg-row .inline-check { min-height: 36px; gap: 10px; }
.mg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mg-keep { display: flex; align-items: flex-start; gap: 10px; }
.mg-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-list { margin: 0; padding-left: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.mg-notes { white-space: pre-line; font-size: 13.5px; }
.mg-after { margin: 4px 0 0; }
.pp-hist { font-style: italic; }
.pp-hist.is-warn { color: #8A2C0D; font-weight: 600; font-style: normal; }

/* Email (mail.js) */
.card-h-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail-log td.concern { max-width: 360px; }
.mail-log tbody tr:hover td { background: none; } /* rows aren't clickable */
.sms-log tbody tr.sms-in:hover td { background: #F4F7FF; }
.mail-q { max-width: 360px; }
.help.warn-note { color: #8A4B00; }
.clash-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #FFF4E5; border: 1px solid #F3C98B; color: #5C3400; font-size: 14px; }
.ob-rules { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
#u-panel .p-head h2, #u-panel .p-head .muted, #u-panel .linkbox .help, #u-panel .confirm { overflow-wrap: anywhere; }
.sp-form { padding: 14px; border-radius: 10px; background: #F6F7F9; }
.sp-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 14px; }
.sp-row label { display: inline-flex; gap: 6px; align-items: center; }
.sp-list td { vertical-align: middle; }
.outside-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.confirm-jobs { margin: 2px 0 0; padding-left: 18px; }
.auth-forgot { align-self: flex-start; font-size: 14px; }
.auth-card > .primary { justify-content: center; }
@media (hover: none) and (pointer: coarse) { .auth-demo ul { gap: 0; } .auth-demo .linkbtn, .auth-forgot { display: inline-flex; align-items: center; min-height: 44px; } } /* a finger's size */

/* Online booking (online.js) */
.web-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #FFE9D6; color: #6B2B00; font-size: 12px; font-weight: 600; }
.ob-link .row { display: flex; gap: 8px; margin-top: 6px; }
.ob-link .inp { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.ob-link a.ibtn { text-decoration: none; }
.ob-stats { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-2); }
.ob-h { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.ob-svcs { display: flex; flex-direction: column; gap: 10px; }
.ob-svc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(150px, 1.2fr) 96px 36px; gap: 8px; align-items: end; }
.ob-svc .ob-del { margin-bottom: 4px; grid-column: -2 / -1; }
@media (max-width: 640px) { .ob-svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ob-svc .field:nth-child(-n+2) { grid-column: 1 / -1; } .ob-svc .ob-del { grid-column: auto; } }

/* The customer under the appointment's name: suggestions and the linked record */
.cust-combo { position: relative; }
.cust-pop { position: absolute; top: calc(100% + 4px); left: 0; right: auto; width: 100%; max-width: calc(100vw - 32px); z-index: 20; margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 12px 32px rgba(15,18,25,0.16); }
.cp-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.cp-item:hover { background: #F4F6FA; }
.cp-item.is-active { background: #EDF2FF; box-shadow: inset 3px 0 0 var(--accent); }
.cp-main { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.cp-main strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-main .mono, .cp-side { font-size: 12px; color: var(--muted); }
.cp-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; max-width: 55%; overflow-wrap: anywhere; } /* the panel can be narrow: the details wrap, not clip */
.cust-pop mark { background: #FFE58A; color: inherit; border-radius: 2px; padding: 0 1px; }
.cust-card:empty { display: none; }
.cust-card { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cc-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cc-line svg { flex: none; color: var(--muted); }
.cc-name { font-weight: 600; color: var(--accent); }
.cc-line .linkbtn { margin-left: auto; font-size: 12.5px; }
.cc-match strong { font-weight: 600; }
.cc-warn { margin: 0; padding: 6px 10px; border-radius: 8px; background: #FFF6E6; border: 1px solid #F1CE8F; color: #5C3400; font-weight: 500; }
.cc-diff { margin: 0; padding: 8px 10px; border-radius: 8px; background: #EEF3FF; border: 1px solid #C9D6F8; color: #1E3A8A; display: flex; flex-direction: column; gap: 6px; }
.cc-diff .row-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-tag { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #E6F4EC; color: #17633A; }
.cc-tag.off { background: #F1F2F4; color: var(--muted); }
.cu-sms-stop { color: #8A4B00; }
.sms-log tr.sms-in td { background: #F4F7FF; }
.cc-note { margin: 0; padding: 6px 10px; border-radius: 8px; background: #F6F7F9; color: var(--ink-2); }
.cc-hist summary { cursor: pointer; font-weight: 600; color: var(--ink-2); min-height: 28px; display: flex; align-items: center; gap: 6px; }
.cc-hist summary::before { content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; }
.cc-hist[open] summary::before { transform: rotate(90deg); }
.cc-hist ul { margin: 4px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cc-visit { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 4px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; font-size: 12.5px; }
.cc-visit:hover { background: #F4F6FA; }
.cc-visit .badge { height: 20px; font-size: 11px; }
.cc-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-all { font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* Rescheduling (resched.js): the bar while a job is being moved, and the tags on moved jobs. */
.banner.movebar { background: #FFF6E5; border-color: #F2CF8B; color: #5C3A00; }
.movebar .banner-btn { border-color: #F2CF8B; }
#movebar-text:focus { outline: none; }
.movebar .primary { height: 40px; }
.movebar .primary:disabled { opacity: 0.5; cursor: default; filter: none; }
.move-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: #FFF6E5; color: #5C3A00; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.move-tag:hover { background: #FCE9C2; }
.moved-tag { margin-left: 6px; font-size: 12px; font-weight: 600; color: #5C3A00; white-space: nowrap; }

/* Importing customers (import.js). */
.imp-steps { margin-top: 10px; }
.imp-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 20px; border: 2px dashed var(--field); border-radius: 12px; text-align: center; cursor: pointer; color: var(--ink); }
.imp-drop:hover, .imp-drop.is-over { border-color: var(--accent); background: #F4F7FF; }
.imp-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-drop svg { color: var(--accent); }
.imp-file { margin: 0; font-size: 14px; }
.imp-grp { margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.imp-grp legend { padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.imp-grp legend + * { clear: both; }
.imp-grp .fields { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.imp-ph .row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px; }
.imp-prev { width: 100%; border-collapse: collapse; font-size: 13px; }
.imp-prev th, .imp-prev td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.imp-prev th { font-weight: 600; color: var(--muted); }
.imp-probs { max-height: 240px; overflow: auto; }
.imp-bad { color: #B42318; font-weight: 500; }
.imp-stats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.imp-stats li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--muted); }
.imp-stats strong { font-size: 22px; color: var(--ink); }
.imp-ok { margin: 0; padding: 12px 14px; border-radius: 10px; background: #E9F6EE; border: 1px solid #A8D8BB; color: #14532D; font-size: 14px; }

/* Customers page views and the unlinked appointments review (unlinked.js). */
.cu-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.cu-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cu-tab:hover { color: var(--ink); }
.cu-tab[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.cu-tab-n { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); font-size: 12px; text-align: center; }
.cu-tab-n:empty { display: none; }
#cu-sms-n { background: var(--accent); color: #fff; font-weight: 600; } /* replies to read: not just a count like Unlinked's */
@media (max-width: 640px) { .cu-tab { padding: 0 10px; } .cu-tab-long { display: none; } } /* a phone: the three views on one line */
.cu-main { display: flex; flex-direction: column; gap: 16px; }
.cu-review { display: flex; flex-direction: column; gap: 12px; padding-bottom: 72px; } /* the last rows scroll clear of the toast */
/* Customers › Texts (texts.js) */
.tx-lower { align-items: start; }
.tx-col { padding: 0; overflow: hidden; flex: 1 1 340px; min-width: 0; max-width: 440px; } /* a long last message is cut, not widening the list */
.tx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tx-head .card-h { margin: 0; }
.tx-list { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow-y: auto; }
.tx-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.tx-row:hover { background: var(--line-soft); }
.tx-row.is-sel { background: var(--ground); box-shadow: inset 3px 0 0 var(--accent); }
.tx-who { display: flex; align-items: center; gap: 8px; }
.tx-who strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }
.tx-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.tx-num { font-size: 12px; }
.tx-wait { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: #FFF4E5; border: 1px solid #F3C98B; color: #5C3400; font-size: 12px; font-weight: 600; }
.tx-next { font-size: 13px; color: var(--ink-2); }
.p-head > .linkbtn { align-self: flex-start; } /* the header is a column: a link button would answer clicks across its whole width */
.tx-head .ibtn { margin-left: auto; }
.tx-new-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tx-new-list .linkbtn { min-height: 32px; font-weight: 600; }
.tx-msgs { list-style: none; margin: 0; padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; }
.tx-msg { max-width: 85%; }
.tx-in { align-self: flex-start; }
.tx-out { align-self: flex-end; text-align: right; }
.tx-body { display: inline-block; padding: 8px 12px; border-radius: 14px; background: var(--line-soft); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.tx-out .tx-body { background: var(--accent); color: #fff; }
.tx-failed .tx-body { background: var(--card); color: var(--ink); border: 1px dashed currentColor; }
.tx-meta { font-size: 12px; margin-top: 2px; }
.tx-form { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding: 12px 20px 16px; }
.tx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tx-back { display: none; }
/* A phone (texts.js TXT_ONE, the same query): the list, or one conversation with a way back; never one under the other. */
@media (max-width: 767px) {
  .tx-col, .tx-panel { flex-basis: 100%; max-width: none; }
  .tx-lower.has-sel .tx-col, .tx-lower:not(.has-sel) .tx-panel { display: none; }
  .tx-back { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: -12px 0 -6px; font-weight: 600; }
  .tx-who-on a { display: inline-flex; align-items: center; min-height: 44px; }
}
.cu-sms-talk { display: inline-block; margin-bottom: 6px; }
#cu-panel[data-note]:not([data-note=""])::before, #u-panel[data-note]:not([data-note=""])::before { content: attr(data-note); display: block; padding: 8px 20px; background: #FFF6E5; color: #5C3A00; font-size: 13px; border-bottom: 1px solid #F3C98B; }
.cu-hist .rowbtn { text-decoration: underline; text-underline-offset: 2px; }
.unl-ask { flex: 1 1 100%; }
.unl-sum { margin: 0; font-size: 14px; max-width: 820px; }
.unl-help { margin: 0; font-size: 13px; }
.unl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.unl-bar .seg { flex-wrap: wrap; }
.unl-bar .seg-opt { gap: 8px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.unl-bar .seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.unl-bar .seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.unl-table { table-layout: fixed; min-width: 760px; }
.unl-table th:nth-child(1) { width: 22%; }
.unl-table th:nth-child(2) { width: 22%; }
.unl-table th:nth-child(3) { width: 14%; }
.unl-table td { vertical-align: top; white-space: normal; }
.unl-table th { white-space: normal; } /* "Name on the appointments" wraps in its column instead of running into the next */
@media (hover: none) and (pointer: coarse) { .unl-acts .ibtn.sm, .unl-more .ibtn.sm { height: 44px; } .unl-cands .inline-check { min-height: 44px; } }
/* A phone: one card per person (the name, then its appointments, vehicles and customers with the buttons), no sideways scroll. */
@media (max-width: 640px) {
  .unl-table { min-width: 0; }
  .unl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .unl-table tbody, .unl-table tr, .unl-table td { display: block; width: auto; }
  .unl-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .unl-table td { padding: 3px 0; border: 0; }
  .unl-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
}
.unl-acts { margin-top: 8px; }
.unl-ph { display: block; font-size: 12.5px; }
.unl-cands { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.unl-cands .inline-check { min-height: 32px; align-items: flex-start; padding-top: 6px; }
.unl-cand a { font-weight: 600; color: var(--ink); }
.unl-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.unl-clear { padding: 28px; }

/* Carrying a started job over (resched.js). */
.confirm.carry { margin-top: 4px; }
.confirm.carry .fields { margin: 8px 0 4px; }
.confirm.carry .help { display: block; margin: 0 0 8px; }

/* Security and support (admin-sections.js): TSi's own lines in the activity log, and the account button while
   signed in as TSi support. */
.sec-log tr.sec-tsi td { background: #FFF6E0; }
.is-support { outline: 2px solid #C77700; outline-offset: 2px; border-radius: 10px; }

/* Touch screens (last, so it wins): no keyboard hints, 16 px text in fields (iOS zooms into smaller ones on focus),
   taller menu items and switches. */
@media (hover: none) and (pointer: coarse) {
  .kbd { display: none; }
  .inp, .inp.tsel, .search, .sr-win .inp, .linkbox .inp, .ob-link .inp { font-size: 16px; }
  .inp.tsel { width: 88px; }
  .slot-menu button, .slot-menu button[role=menuitemradio] { min-height: 44px; }
  .seg label { height: 44px; }
}