/* Dense layout: this is a data-entry tool, so spacing is kept tight to fit more rows per screen */
:root { --bg: #e4e7eb; --card: #ffffff; --primary: #0b57d0; --primary-hover: #0842a0; --text: #111418; --muted: #343a40; --border: #aeb4bb; --line: #cfd4da; --head: #e9ecf0; --danger: #b3261e; --danger-hover: #8c1d18; }
[hidden] { display: none !important; }
body { font-family: system-ui, -apple-system, sans-serif; font-size: 13px; background: var(--bg); color: var(--text); margin: 0; padding: 8px; }
.container { max-width: 1600px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card); padding: 6px 12px; border-radius: 6px 6px 0 0; border: 1px solid var(--border); border-bottom: none; }
h1 { margin: 0; font-size: 1rem; }
select, input, button { padding: 4px 8px; font-size: 0.8rem; font-family: inherit; border: 1px solid var(--border); border-radius: 4px; }
button { background: var(--primary); color: white; border-color: transparent; cursor: pointer; font-weight: 500; white-space: nowrap; }
button:hover { background: var(--primary-hover); }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
::placeholder { color: #5c636a; }

/* Tab Navigation */
.tab-bar { display: flex; background: #d3d8de; border: 1px solid var(--border); border-bottom: none; overflow-x: auto; }
.tab-btn { flex: 1; padding: 6px 10px; background: none; border: none; border-right: 1px solid var(--border); border-radius: 0; color: #22272c; font-weight: 600; font-size: 0.8rem; cursor: pointer; }
.tab-btn:last-child { border-right: none; }
.tab-btn.active { background: var(--card); color: var(--primary); box-shadow: inset 0 -2px var(--primary); }

/* Search Bar */
.search-bar { background: var(--card); padding: 6px 10px; border: 1px solid var(--border); border-top: none; }
.search-bar input { width: 100%; box-sizing: border-box; }

/* Tab Content Panel */
.tab-content { display: none; background: var(--card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; padding: 8px 10px 10px; }
.tab-content.active { display: block; }

.card h2 { margin: 0 0 6px; font-size: 0.95rem; color: var(--primary); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.card-head h2 { margin: 0; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th, td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: var(--head); color: var(--text); font-weight: 600; white-space: nowrap; border-bottom-color: var(--border); }
th.num, td.num { text-align: right; width: 1%; white-space: nowrap; }
th.actions, td.actions { text-align: right; width: 1%; white-space: nowrap; }
td.actions button + button { margin-left: 3px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #dde8fb; }
tr.undone td { color: #5c636a; text-decoration: line-through; }
tr.undone td:last-child { text-decoration: none; }
.badge { background: #e8f0fe; color: var(--primary); padding: 1px 5px; border-radius: 3px; font-weight: bold; }

/* Buttons */
button.secondary { background: var(--muted); }
button.secondary:hover { background: #1d2125; }
button.small { padding: 1px 7px; font-size: 0.75rem; line-height: 1.5; }
button.danger { background: var(--danger); }
button.danger:hover { background: var(--danger-hover); }

/* Field grid: label above value, as many columns as fit the width.
   Used by the "Add New" form and the detail popup (view and edit). */
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 10px; }
.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field.wide { grid-column: span 2; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.field > span { padding: 2px 0; overflow-wrap: anywhere; }
.field input, .field select { width: 100%; box-sizing: border-box; }
@media (max-width: 440px) { .field.wide { grid-column: auto; } }

/* "Add New" entry form (replaces the table inside the tab) */
.entry-form { background: var(--head); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.saved-msg { margin-right: auto; color: #0d652d; font-size: 0.8rem; font-weight: 600; }

/* Detail popup */
.modal { position: fixed; inset: 0; background: rgba(32, 33, 36, .45); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; z-index: 100; }
.modal-box { background: var(--card); border-radius: 6px; width: 100%; max-width: 1100px; padding: 10px 14px 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 0.95rem; color: var(--primary); }
.modal-box h3 { font-size: 0.85rem; margin: 12px 0 4px; }
.modal-actions, #detailActions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Header user box */
.user-box { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.user-box form { margin: 0; }
.logout-btn { background: var(--muted); }
.logout-btn:hover { background: #1d2125; }
/* Header settings menu (Change password, ...) */
.settings-menu { position: relative; }
.settings-menu summary { list-style: none; cursor: pointer; color: var(--primary); font-weight: 600; padding: 3px 6px; border-radius: 4px; }
.settings-menu summary::-webkit-details-marker { display: none; }
.settings-menu summary:hover, .settings-menu[open] summary { background: var(--head); }
.settings-items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 200; min-width: 190px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px #0003; padding: 4px 0; }
.settings-items a { display: block; padding: 6px 12px; color: var(--text); text-decoration: none; white-space: nowrap; }
.settings-items a:hover { background: var(--head); }
.settings-items .view-as-pick { padding: 6px 12px 8px; border-top: 1px solid var(--border); margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.settings-items .view-as-pick label { font-size: 0.9em; white-space: nowrap; }
.button-link { display: inline-block; background: var(--muted); color: #fff; padding: 4px 12px; border-radius: 4px; font-weight: 600; font-size: 0.8rem; text-decoration: none; }
.button-link:hover { background: #1d2125; }
/* Admin > Invoice Settings: company details and logo */
.company-card { margin-bottom: 12px; }
.company-form { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 10px; }
.logo-box { display: flex; flex-direction: column; gap: 6px; width: 240px; }
.logo-preview { height: 90px; border: 1px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #fff; }
.logo-preview img { max-height: 84px; max-width: 230px; }
.small-upload { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.small-upload input { display: block; margin-top: 3px; font-size: 0.75rem; }
.company-fields { flex: 1; min-width: 300px; }
.company-fields textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* ------------------------------------------------------------------
   Accounting: tiles, aging bar, report tables
   ------------------------------------------------------------------ */
.acct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 8px 10px; }
.acct-tile { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: #fbfcfd; }
.acct-tile .label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.acct-tile .value { font-size: 1.45rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.acct-tile .sub { font-size: 0.75rem; color: var(--muted); }
.acct-tile.bad .value { color: var(--danger); }
.acct-tile.good .value { color: #1e7b34; }
.acct-aging-bar { padding: 2px 10px 8px; }
.aging-track { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--head); }
.aging-track span { display: block; height: 100%; }
.aging-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 5px; font-size: 0.78rem; }
.aging-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.age-0 { background: #8fbf9a; } .age-1 { background: #f2c94c; } .age-2 { background: #f2994a; } .age-3 { background: #e5603a; } .age-4 { background: #b3261e; }
.acct-h3 { font-size: 0.9rem; margin: 10px 10px 4px; }
.acct-table { width: 100%; }
.acct-table td.num, .acct-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-table tr.total td { font-weight: 700; background: var(--head); border-top: 2px solid var(--border); }
.acct-table td.overdue { color: var(--danger); font-weight: 600; }
.acct-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.acct-controls label { display: flex; flex-direction: column; font-size: 0.72rem; font-weight: 600; color: var(--muted); gap: 2px; }
.acct-controls select { min-width: 180px; }
.acct-controls .date-field { width: 160px; }
.acct-quick { display: inline-flex; gap: 4px; flex-wrap: wrap; }
#stDates, #dpDates, #rsDates { display: inline-flex; gap: 8px 14px; flex-wrap: wrap; align-items: flex-end; }
.acct-quick button { font-size: 0.75rem; padding: 3px 8px; }
.acct-section { padding: 4px 10px 10px; }
.acct-section h3 { font-size: 0.9rem; margin: 10px 0 4px; }
.acct-empty { padding: 16px 10px; color: var(--muted); }

/* ------------------------------------------------------------------
   Retail: kiosk (big, touch-friendly), search, customer panel
   ------------------------------------------------------------------ */
.kiosk { display: flex; gap: 10px; align-items: stretch; min-height: 520px; }
.kiosk-step { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 0.95rem; }
.kiosk-step h2 { margin: 0 0 10px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.9rem; }
.kiosk input, .kiosk select { font-size: 0.95rem; padding: 7px 8px; box-sizing: border-box; max-width: 100%; min-width: 0; }
.kiosk-pay-fields input, .kiosk-pay-fields select, .kiosk-new input, .kiosk-new select { width: 100%; }
.kiosk-search { width: 100%; box-sizing: border-box; font-size: 1.05rem !important; padding: 10px !important; }
.kiosk-pick { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; max-height: 330px; overflow-y: auto; }
.kiosk-pick button { text-align: left; background: #f3f6fb; color: var(--text); border: 1px solid var(--border); padding: 8px 10px; font-size: 0.9rem; }
.kiosk-pick button:hover { border-color: var(--primary); background: #e8f0fe; }
.kiosk-pick small { display: block; color: var(--muted); }
.kiosk-chosen { border: 2px solid var(--primary); border-radius: 8px; padding: 8px 10px; background: #eef4ff; }
.kiosk-chosen b { font-size: 1.05rem; }
.kiosk-new { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.kiosk-new label, .kiosk-pay-fields label { display: flex; flex-direction: column; font-size: 0.75rem; font-weight: 600; color: var(--muted); gap: 2px; }
.kiosk-new .wide, .kiosk-pay-fields .wide { grid-column: 1 / -1; }
.kiosk-prop-title { margin-top: 10px; }
.kiosk-props { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.kiosk-props button { text-align: left; background: #f3f6fb; color: var(--text); border: 2px solid var(--border); padding: 8px 10px; font-size: 0.88rem; border-radius: 8px; }
.kiosk-props button.on { border-color: var(--primary); background: #e8f0fe; }
.prop-card { display: flex; flex-direction: column; gap: 2px; }
.prop-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kiosk-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kiosk-add button { font-size: 0.95rem; padding: 10px 14px; border-radius: 8px; }
.kiosk-add button.other { background: var(--muted); }
.kiosk-lines { display: flex; flex-direction: column; gap: 8px; }
.kiosk-line { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: #fbfcfd; display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.kiosk-line .what { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kiosk-line .what select { max-width: 170px; }
.kiosk-line .name-preview { grid-column: 1 / -1; font-weight: 700; }
.kiosk-line .nums { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; grid-column: 1 / -1; }
.kiosk-line .nums label { display: flex; flex-direction: column; font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.kiosk-line .nums input.q { width: 60px; } .kiosk-line .nums input.p { width: 100px; text-align: right; }
.kiosk-line .nums input.b { width: 120px; }
.kiosk-line .amount { margin-left: auto; font-weight: 700; font-size: 1rem; align-self: center; }
.kiosk-empty { color: var(--muted); padding: 14px 4px; }
.kiosk-totals > div { display: flex; justify-content: space-between; padding: 2px 0; }
.kiosk-totals .grand { font-size: 1.5rem; font-weight: 800; border-top: 2px solid var(--border); margin-top: 4px; padding-top: 6px; }
.kiosk-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin: 4px 0 10px; }
.kiosk-methods button { background: #f3f6fb; color: var(--text); border: 2px solid var(--border); padding: 12px 6px; font-size: 0.95rem; border-radius: 8px; }
.kiosk-methods button.on { border-color: var(--primary); background: var(--primary); color: #fff; }
.kiosk-pay-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kiosk-complete { width: 100%; margin-top: 12px; padding: 16px; font-size: 1.25rem; font-weight: 800; border-radius: 10px; background: #1e7b34; }
.kiosk-complete:hover { background: #17612a; }
.kiosk-complete:disabled { background: #9aa3ad; cursor: not-allowed; }
.kiosk-done { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 40px 20px; max-width: 640px; margin: 20px auto; }
.kiosk-done .tick { font-size: 3.5rem; color: #1e7b34; line-height: 1; }
.kiosk-done .receipt-id { font-size: 2.2rem; font-weight: 800; letter-spacing: 2px; margin: 8px 0; font-family: Consolas, monospace; }
.kiosk-done .buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.kiosk-done .buttons a, .kiosk-done .buttons button { font-size: 1.05rem; padding: 12px 20px; border-radius: 8px; }
@media (max-width: 1100px) { .kiosk { grid-template-columns: 1fr; } }
.retail-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; }
.retail-search input[type=search] { flex: 1; min-width: 260px; font-size: 1.05rem; padding: 9px 10px; }
.retail-results { padding: 0 10px 10px; }
.retail-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.retail-card { text-align: left; background: #fbfcfd; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; }
.retail-card:hover { border-color: var(--primary); box-shadow: 0 0 0 2px #0b57d033; }
.retail-card b { font-size: 0.95rem; }
.retail-card .muted { display: block; }
.retail-hint { color: var(--muted); padding: 18px 2px; }
.rm-section h3 { font-size: 0.9rem; margin: 12px 0 4px; display: flex; justify-content: space-between; align-items: center; }
.rm-form { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin: 6px 0; background: #fbfcfd; }
.rm-form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.rm-form label { display: flex; flex-direction: column; font-size: 0.72rem; font-weight: 600; color: var(--muted); gap: 2px; }
.rm-form .wide { grid-column: 1 / -1; }
.rm-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
tr.voided td { color: var(--muted); text-decoration: line-through; }
.kiosk-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 10px; }
.kiosk-choice button { text-align: left; background: #f3f6fb; color: var(--text); border: 2px solid var(--border); padding: 9px 10px; border-radius: 8px; }
.kiosk-choice button b { display: block; font-size: 1rem; }
.kiosk-choice button small { color: var(--muted); }
.kiosk-choice button.on { border-color: var(--primary); background: #e8f0fe; }
.kiosk-delivery { margin: 4px 0 10px; }
.kiosk-delivery .kiosk-choice { margin: 0; }
.kiosk-totals .muted { font-size: 0.85rem; }
.delivery-box { max-width: 1200px; }
.delivery-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 12px; }
.dv-view { display: flex; flex-direction: column; gap: 6px; }
.dv-map { height: 460px; border-radius: 8px; overflow: hidden; background: #dfe3e8; display: flex; align-items: center; justify-content: center; }
.dv-map iframe { width: 100%; height: 100%; border: 0; }
.dv-view-links { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dv-form { display: flex; flex-direction: column; gap: 8px; }
.dv-address { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: #fbfcfd; }
.dv-options { display: flex; flex-direction: column; gap: 6px; max-height: 230px; overflow-y: auto; }
.dv-option { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; border: 2px solid var(--border); border-radius: 8px; padding: 7px 9px; cursor: pointer; font-size: 0.85rem; }
.dv-option input { grid-row: span 6; align-self: start; margin-top: 3px; }
.dv-option.on { border-color: var(--primary); background: #eef4ff; }
@media (max-width: 900px) { .delivery-body { grid-template-columns: 1fr; } .dv-map { height: 300px; } }
.rules-form { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; padding: 8px 10px 12px; }
.rules-form label { display: flex; flex-direction: column; font-size: 0.75rem; font-weight: 600; color: var(--muted); gap: 2px; }
.rules-form select { min-width: 240px; }
.vendor-table input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px; font-size: 0.85rem; }
.small-link { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.small-link:hover { text-decoration: underline; }

/* Login page */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; box-sizing: border-box; }
.login-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 30px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.login-card h1 { font-size: 1.15rem; color: var(--primary); }
.login-sub { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }
.login-card label { font-size: 0.8rem; font-weight: 600; margin-top: 6px; }
.login-card input { padding: 10px; }
.login-card button { margin-top: 14px; padding: 10px; }
.login-error { background: #fce8e6; color: #c5221f; border: 1px solid #f5c6c2; padding: 8px 10px; border-radius: 4px; font-size: 0.85rem; }

/* Users & Roles module */
.form-group { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; background: var(--head); padding: 8px; border-radius: 4px; border: 1px solid var(--border); }
.form-group input, .form-group select { flex: 1; min-width: 130px; }
.section-gap { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.muted { color: #495057; font-size: 0.75rem; font-weight: normal; }
.no-access { color: var(--muted); padding: 12px 0; margin: 0; }
.role-form { flex-direction: column; align-items: stretch; }
.role-form input[type="text"] { flex: none; width: 100%; box-sizing: border-box; }
.perm-matrix { display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; }
.perm-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.perm-module { min-width: 120px; font-weight: 600; font-size: 0.8rem; }
.perm-check { font-size: 0.8rem; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.perm-check input { flex: none; min-width: 0; width: auto; }
.role-actions { display: flex; gap: 6px; }
.perm-summary div { margin-bottom: 1px; }

/* Role colors */
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.15); }
.role-form .role-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.role-form .role-top input[type="text"] { flex: 1; width: auto; min-width: 160px; }
.color-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; }
.color-pick input[type="color"] { flex: none; min-width: 0; width: 36px; height: 26px; padding: 1px; cursor: pointer; }

/* Record journal (detail popup) */
.nowrap { white-space: nowrap; }
table.journal td:nth-child(-n+3), table.journal th:nth-child(-n+3) { width: 1%; white-space: nowrap; }

/* Rich-text editor (service call description) and its read-only view */
.rte { border: 1px solid var(--border); border-radius: 4px; background: var(--card); }
.rte:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.rte-bar { display: flex; gap: 3px; flex-wrap: wrap; padding: 3px; background: var(--head); border-bottom: 1px solid var(--border); border-radius: 4px 4px 0 0; }
.rte-body { min-height: 120px; max-height: 360px; overflow-y: auto; padding: 6px 8px; outline: none; }
.rte-body, .rte-view { font-size: 0.85rem; line-height: 1.45; overflow-wrap: anywhere; }
.rte-view { border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; background: var(--card); }
.rte-body p, .rte-view p { margin: 0 0 4px; }
.rte-body ul, .rte-body ol, .rte-view ul, .rte-view ol { margin: 4px 0; padding-left: 22px; }

/* Login: remember me */
.login-card .remember { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; font-size: 0.85rem; margin-top: 10px; cursor: pointer; }
.login-card .remember input { width: auto; padding: 0; margin: 0; }

/* Column filters (second header row) and row count */
.title-group { display: flex; align-items: baseline; gap: 8px; }
.filter-row th { padding: 2px 3px 4px; background: var(--head); }
.filter-row input { width: 100%; min-width: 50px; box-sizing: border-box; padding: 2px 5px; font-size: 0.75rem; font-weight: normal; }

/* Pagination */
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px 0 0; font-size: 0.8rem; }
.pager .muted { margin-right: auto; }
.pager label { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; }
.pager input { width: 56px; padding: 1px 4px; }
button:disabled, button:disabled:hover { background: #c4c9cf; color: #3b4148; cursor: default; }

/* Sortable column headers: arrow shows the current direction */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #dfe3e8; }
th.sortable::after { content: "\2195"; margin-left: 4px; color: #6c737a; font-size: 0.75em; }
th.sort-asc::after { content: "\25B2"; color: var(--primary); }   /* ascending points up, descending down */
th.sort-desc::after { content: "\25BC"; color: var(--primary); }

/* Multi-column sort: rank shown after the arrow when several columns are sorted */
th.sort-asc::after { content: "\25B2" attr(data-priority); }
th.sort-desc::after { content: "\25BC" attr(data-priority); }

/* Popup related lists: title with "View all" link */
.related-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.related-head h3 { margin-bottom: 4px; }

/* Footer (main and login pages) */
.site-footer { text-align: center; color: var(--muted); font-size: 0.75rem; padding: 10px 0 4px; }
.app-version { display: block; margin-top: 2px; font-size: 0.7rem; opacity: .75; }
.login-page { flex-direction: column; gap: 12px; }

/* A dropdown alone on its row (e.g. Location) doesn't need the full width */
.field.full > select { max-width: 560px; }

/* Account links: "Change password" in the header, and on the password page */
.header-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.header-link:hover { text-decoration: underline; }
.login-link { text-align: center; color: var(--primary); font-size: 0.85rem; }
.login-logout { margin: 0; }

/* A field that starts a new line in the form grid */
.field.new-row { grid-column-start: 1; }

/* Secondary line under a field value, e.g. the location's address */
.field-sub { display: block; font-size: 0.75rem; color: var(--muted); padding-top: 1px; }

/* Service history accordion (service call popup) */
.history { border: 1px solid var(--line); border-radius: 4px; }
.history-item + .history-item { border-top: 1px solid var(--line); }
.history-item summary { display: flex; align-items: center; gap: 10px; padding: 5px 8px; cursor: pointer; font-size: 0.82rem; }
.history-item summary:hover { background: #eef3fc; }
.history-item[open] summary { background: var(--head); font-weight: 600; }
.history-date { white-space: nowrap; min-width: 92px; }
.history-issue { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.history-body { padding: 6px 10px 10px; }
.history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 0.8rem; margin-bottom: 6px; }
.history-meta button { margin-left: auto; }
.status-pill { white-space: nowrap; font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: #e3e6ea; color: #343a40; }
.status-open { background: #fde7c4; color: #6b3e00; }
.status-in-progress { background: #d6e4fd; color: #0b3d91; }
.status-closed { background: #d7f0dd; color: #0d5223; }

/* Row action icons (View / Edit / Delete): outlined squares that fill on hover */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border-radius: 4px; background: var(--card); border: 1px solid currentColor; vertical-align: middle; }
.icon-btn svg { display: block; }
td.actions .icon-btn + .icon-btn { margin-left: 4px; }
.icon-view { color: var(--primary); }
.icon-edit { color: #343a40; }
.icon-delete { color: var(--danger); }
.icon-btn:hover, .icon-btn:focus-visible { color: #fff; }
.icon-view:hover, .icon-view:focus-visible { background: var(--primary); border-color: var(--primary); }
.icon-edit:hover, .icon-edit:focus-visible { background: #343a40; border-color: #343a40; }
.icon-delete:hover, .icon-delete:focus-visible { background: var(--danger); border-color: var(--danger); }

/* Short-value columns (account number, postal code, country, apt) take only the width they need */
th:is([data-col="account_number"], [data-col="postal_code"], [data-col="country"], [data-col="apt"]), td.narrow { width: 1%; white-space: nowrap; }
.filter-row input:is([data-col="account_number"], [data-col="postal_code"], [data-col="country"]) { width: 90px; }
.filter-row input[data-col="apt"] { width: 64px; }

/* Contacts (company / location popup) */
table.contacts td:first-child { min-width: 160px; }
table.contacts tr.inactive td { color: #5c636a; }
table.contacts tr.inactive td b { font-weight: 500; }
table.contacts a { color: var(--primary); text-decoration: none; }
table.contacts a:hover { text-decoration: underline; }
.contact-form { margin: 4px 0 8px; }
.icon-activate { color: #0d652d; }
.icon-deactivate { color: #8a5300; }
.icon-activate:hover, .icon-activate:focus-visible { background: #0d652d; border-color: #0d652d; }
.icon-deactivate:hover, .icon-deactivate:focus-visible { background: #8a5300; border-color: #8a5300; }
.field .check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 4px 0; cursor: pointer; }
.field .check input { width: auto; }

/* "Belongs To" picker (Account Contacts form): the choice, then its dropdowns side by side */
.parent-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.parent-pick select { width: auto; flex: 0 1 auto; min-width: 140px; max-width: 420px; }
.parent-pick select:first-child { min-width: 130px; flex: none; }

/* Phone number with a "scan to call" QR code on hover / keyboard focus */
.phone-qr { position: relative; display: inline-block; }
.qr-pop { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; background: var(--card);
          border: 1px solid var(--border); border-radius: 6px; padding: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
          text-align: center; font-size: 0.75rem; color: var(--text); white-space: normal; width: 166px; }
.qr-pop img { display: block; width: 150px; height: 150px; margin: 0 auto 4px; }
.phone-qr:hover .qr-pop, .phone-qr:focus-within .qr-pop { display: block; }

/* Category bar (Accounts | Admin ...) above each category's section bar */
.cat-bar { display: flex; gap: 2px; background: #24303f; border: 1px solid #24303f; padding: 0 6px; overflow-x: auto; }
.cat-btn { color: #dfe6ee; padding: 7px 16px; font-weight: 600; font-size: 0.85rem; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.cat-btn:hover { color: #fff; background: #2f3d50; }
.cat-btn.active { color: #fff; background: #34455b; border-bottom-color: #8ab4ff; }
.cat-btn:focus-visible { outline: 2px solid #8ab4ff; outline-offset: -2px; }
.cat-btn.board-link { margin-left: auto; }   /* full-screen boards: right end of the bar */
a.tab-btn { display: block; text-align: center; text-decoration: none; }

/* Quotes / orders / invoices: line-item editor, totals, links, payments */
.lines-editor table { font-size: 0.8rem; }
.lines-editor th, .lines-editor td { padding: 2px 4px; }
.lines-editor thead th { background: #34455b; color: #fff; border-bottom-color: #34455b; }
.lines-editor .l-kind { width: 96px; }
.lines-editor .l-apt { width: 70px; }
.lines-editor .l-qty { width: 70px; text-align: right; }
.lines-editor .l-price { width: 100px; text-align: right; }
.lines-editor .l-desc { width: 100%; min-width: 220px; box-sizing: border-box; }
.lines-editor td:first-child, .lines-editor td:nth-child(n+3) { width: 1%; white-space: nowrap; }
.lines-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.totals { min-width: 230px; font-size: 0.85rem; }
.totals > div { display: flex; justify-content: space-between; gap: 24px; padding: 1px 0; }
.totals .grand { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 3px; font-size: 0.95rem; }
.doc-totals { margin: 6px 0 0 auto; width: max-content; }
table.doc-lines td:first-child, table.doc-lines td:nth-child(n+3) { width: 1%; white-space: nowrap; }
.doc-links { margin: 10px 0 0; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.link-btn { background: none; border: none; padding: 0; color: var(--primary); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: inherit; }
.link-btn:hover { background: none; color: var(--primary-hover); }
table.payments td.num { white-space: nowrap; }
#taxTable input { width: 70px; }
#taxTable .tax-rate { text-align: right; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; align-items: start; }
.settings-grid input { width: 100%; box-sizing: border-box; }
.settings-grid td:first-child { width: 55%; }
.settings-grid .opt-days { width: 70px; text-align: right; }
.settings-grid td.num { text-align: right; }
.status-draft, .status-expired, .status-cancelled, .status-void { background: #e3e6ea; color: #343a40; }
.status-sent, .status-partially-paid { background: #d6e4fd; color: #0b3d91; }
.status-accepted, .status-approved, .status-fulfilled, .status-delivered, .status-paid { background: #d7f0dd; color: #0d5223; }
.status-searching { background: #fde7c4; color: #6b3e00; }
.status-fulfillment { background: #d6e4fd; color: #0b3d91; }
.status-declined, .status-overdue { background: #fbd9d6; color: #8c1d18; }
.status-unpaid { background: #fde7c4; color: #6b3e00; }

/* P.O. controls (documents) and the per-line P.O. column (shown for multiple P.O.s) */
.po-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-pick select { width: auto; }
.po-pick input:not([type=checkbox]) { width: 200px; }
.lines-editor:not(.po-multi) .po-col { display: none; }
/* Appliance lines: type and feature dropdowns, then a row for space / fulfilment details */
.lines-editor.no-prices .price-col { display: none; }
.lines-editor:not(.show-fulfil) .fulfil-fields { display: none; }
.lines-editor tbody.line + tbody.line tr:first-child td { border-top: 1px solid var(--border); }
.lines-editor .l-extra td { border-top: none; padding-top: 0; }
.appliance-pick { display: flex; flex-wrap: wrap; gap: 3px; }
.appliance-pick select { width: auto; max-width: 160px; }
.l-preview { display: block; font: inherit; font-size: 0.75rem; color: var(--muted); margin-top: 1px; padding: 0; border: none;
             background: none; text-align: left; cursor: default; pointer-events: none; }
.l-preview:empty { display: none; }
/* the appliance chosen: its name in place of the dropdowns; click it to change */
.l-preview.chosen { pointer-events: auto; cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--text, #1f2933);
                    padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; margin: 0; }
.l-preview.chosen::after { content: "Change"; margin-left: 8px; color: var(--primary); font-weight: 400; font-size: 0.75rem; text-decoration: underline; }
.l-preview.chosen:hover { border-color: var(--primary); background: #eef4ff; }
.line-extra { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; font-size: 0.78rem; }
.line-extra .l-inch { width: 64px; text-align: right; }
.line-extra .l-brand, .line-extra .l-model { width: 130px; }
.l-fit, .warn { color: var(--danger); font-weight: 600; }
/* Day Month Year date fields: a text box and a calendar button over a hidden date input */
.date-field { position: relative; display: flex; gap: 3px; align-items: center; }
.date-field .date-text { flex: 1; min-width: 0; }
.date-field .date-pick { flex: none; color: var(--primary); height: 28px; width: 30px; }
.date-field .date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.date-text.invalid { outline: 2px solid var(--danger); }
/* Admin > Product Catalog and the company popup's Prices */
.catalog-type { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin: 8px; }
.catalog-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 4px; }
.catalog-head .ct-name { font-weight: 700; width: 160px; }
.opt-price { width: 80px; text-align: right; }
.cf-name { width: 170px; }
.option-list { display: flex; flex-wrap: wrap; gap: 4px; }
.option-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; white-space: nowrap; }
.option-chip.new { border-style: dashed; }
.option-chip .co-value { width: 120px; }
table.catalog-features td { vertical-align: top; }
details.pricing summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
details.pricing summary h3 { display: inline; margin: 8px 0 4px; }
table.prices input { width: 100px; text-align: right; }
table.prices td.indent { padding-left: 22px; }
table.prices tr.price-type td { border-top: 1px solid var(--border); }
.lines-editor .l-name { width: 100%; min-width: 180px; box-sizing: border-box; }
.lines-editor .l-desc { min-width: 160px; }
.lines-editor .l-po { width: 110px; }
.lines-editor td:nth-child(3), .lines-editor td:nth-child(4) { width: auto; white-space: normal; }
.lines-editor tr:first-child > td:nth-child(2) { width: 1%; white-space: nowrap; }   /* the Type: narrow, the Item right beside it */
.line-po { font-weight: 600; white-space: nowrap; }
table.doc-lines td:nth-child(3), table.doc-lines td:nth-child(4) { width: auto; white-space: normal; }

/* ------------------------------------------------------------------
   Outstanding Orders board (/OutStandingOrders): 4 x 3 cards filling the screen
   ------------------------------------------------------------------ */
.board-page { margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 6px 14px; background: #24303f; color: #dfe6ee; font-size: 0.8rem; }
.board-bar h1 { margin: 0; font-size: 1.05rem; color: #fff; }
.board-summary b { color: #fff; }
.sum-overdue { color: #ffb4a8; font-weight: 600; }
.sum-tomorrow { color: #ffe27a; font-weight: 600; }
.board-legend { display: inline-flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.board-legend .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #0003; margin-left: 6px; animation: none; }
.board-pager button { padding: 0 8px; font-size: 1rem; line-height: 1.2; }
.board-clock { margin-left: auto; }
.board-back { color: #8ab4ff; font-weight: 600; text-decoration: none; }
.board-back:hover { text-decoration: underline; }

.board-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.board-card { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden; text-align: left; font: inherit; color: var(--text);
              background: #fdfdfb; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; box-shadow: 0 1px 3px #0002; }
.board-card:hover, .board-card:focus-visible { box-shadow: 0 0 0 2px var(--primary), 0 3px 10px #0003; outline: none; }
.board-card.empty { background: transparent; border: 1px dashed #c3c8ce; box-shadow: none; cursor: default; }
.board-empty { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--muted); }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid #0002; font-size: 0.95rem; font-weight: 600; }
.card-top b { font-size: 1.5rem; line-height: 1; }
.days-left { white-space: nowrap; }
.card-number { font-weight: 700; color: var(--primary); }
.card-company { font-weight: 700; font-size: 0.95rem; }
.card-location, .card-delivery { font-size: 0.8rem; }
.card-items { margin: 2px 0 0; padding: 0; list-style: none; font-size: 0.78rem; flex: 1; min-height: 0; overflow: hidden; }
.card-items li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-items .apt { font-weight: 700; }
.card-items .more { color: var(--muted); font-style: italic; }
.card-progress { height: 6px; background: #0001; border-radius: 3px; overflow: hidden; }
.card-progress span { display: block; height: 100%; background: #2e7d32; }

/* Urgency: green when ready, pale-to-deeper yellow by urgency (inline), soft flashing when due */
.level-ready { background: #e3f4e6; border-color: #9ccfa6; }
.level-nodate { background: #f1f2f4; }
.level-tomorrow { background: #fff3b8; border-color: #e0c24a; animation: board-flash-yellow 1.6s ease-in-out infinite alternate; }
.level-overdue { background: #ffe1c7; border-color: #e0995a; animation: board-flash-overdue 1.2s ease-in-out infinite alternate; }
@keyframes board-flash-yellow { from { background: #fff7d6; } to { background: #ffe57f; } }
@keyframes board-flash-overdue { from { background: #fff0e0; } to { background: #ffc4a3; } }
@media (prefers-reduced-motion: reduce) {
    .level-tomorrow, .level-overdue { animation: none; border-width: 3px; }
}

.board-modal .modal-box { max-width: 900px; }
table.board-items { width: 100%; }
table.board-items tr.not-ready td { background: #fffbe6; }
ul.board-others { margin: 0; padding-left: 18px; font-size: 0.85rem; }

@media (max-width: 900px) {
    .board-page { height: auto; overflow: auto; }
    .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 210px; }
    .board-card.empty { display: none; }
}

/* ------------------------------------------------------------------
   Delivery Schedule (/DeliverySchedule): week of half-hour slots, six-week overview,
   and a pop-up tray of sales to drag in
   ------------------------------------------------------------------ */
.sched-nav { display: inline-flex; gap: 3px; }
.sched-nav button, .sched-zoom { padding: 2px 10px; font-size: 0.8rem; }
.sched-nav button[aria-label] { font-size: 1.05rem; line-height: 1.1; }
.sched-title { color: #fff; font-size: 0.95rem; }
.ev-swatch.state-tentative { background: #eef4ff; border: 2px dashed #5b8def; }
.ev-swatch.state-confirmed { background: #2f6fde; }
.ev-swatch.state-delivered { background: #3b9b55; }
.ev-swatch.notready-swatch { background: #fff; border-left: 5px solid #f0a020; }

.sched-calendar { flex: 1; min-height: 0; padding: 8px 10px 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
.sched-calendar.slide-next { animation: sched-slide-next .28s ease-out; }
.sched-calendar.slide-prev { animation: sched-slide-prev .28s ease-out; }
.sched-calendar.zoom-out { animation: sched-zoom-out .3s ease-out; }
.sched-calendar.zoom-in { animation: sched-zoom-in .3s ease-out; }
@keyframes sched-slide-next { from { transform: translateX(60px); opacity: .3; } }
@keyframes sched-slide-prev { from { transform: translateX(-60px); opacity: .3; } }
@keyframes sched-zoom-out { from { transform: scale(1.12); opacity: .3; } }
@keyframes sched-zoom-in { from { transform: scale(.88); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sched-calendar[class*="slide-"], .sched-calendar[class*="zoom-"] { animation: none; } }

/* Week: time gutter + 6 days; each day is a column of slots with bookings on top */
.sched-week { height: 100%; display: grid; grid-template-columns: 52px repeat(6, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); column-gap: 6px; }
.sched-dayhead { background: var(--card); border: 1px solid var(--border); border-radius: 6px 6px 0 0; padding: 4px 8px; font-size: 0.85rem; display: flex; align-items: baseline; gap: 5px; }
.sched-dayhead b { font-size: 1.25rem; }
.sched-dayhead .dow { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; color: var(--muted); }
.sched-dayhead .count { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
.sched-dayhead.today { background: var(--primary); border-color: var(--primary); color: #fff; }
.sched-dayhead.today .dow, .sched-dayhead.today .count { color: #dce7ff; }
.sched-dayhead.past { background: #d9dcdf; color: #6b7178; }
.sched-gutter { display: grid; grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); position: relative; }
.sched-time { font-size: 0.7rem; color: var(--muted); text-align: right; padding-right: 4px; transform: translateY(-0.55em); white-space: nowrap; }
.sched-day { position: relative; display: grid; grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); background: var(--card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
.sched-day .slot { border-top: 1px dotted #e3e6ea; }
.sched-day .slot.hour { border-top: 1px solid #cfd4da; }
.sched-day.past { background: repeating-linear-gradient(135deg, #e3e5e8 0 8px, #dadde1 8px 16px); }
.sched-day.past .sched-event { opacity: .62; filter: saturate(.5); }
.sched-day.today { box-shadow: inset 0 0 0 2px var(--primary); }
.now-shade { position: absolute; left: 0; right: 0; top: 0; background: #0000000d; pointer-events: none; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: #d93025; pointer-events: none; z-index: 3; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #d93025; }

/* Bookings */
.sched-event { position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden; border-radius: 6px; padding: 3px 22px 3px 7px; font-size: 0.74rem; line-height: 1.25; cursor: pointer; touch-action: none;
               box-shadow: 0 1px 3px #0003; transition: box-shadow .12s, transform .12s; }
.sched-event[data-drag] { cursor: grab; }
.sched-event:hover, .sched-event:focus-visible { box-shadow: 0 0 0 2px #1a1a1a55, 0 4px 12px #0003; outline: none; transform: translateY(-1px); z-index: 4; }
.sched-event.state-tentative { background: #eef4ff; border: 2px dashed #5b8def; color: #12305f; }
.sched-event.state-confirmed { background: #2f6fde; border: 2px solid #2459b5; color: #fff; }
.sched-event.state-delivered { background: #3b9b55; border: 2px solid #2e7d43; color: #fff; }
.sched-event.notready { border-left: 6px solid #f0a020; }
.sched-event .ev-time { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-event .ev-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-event .ev-sub, .sched-event .ev-items { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.sched-event.short .ev-sub, .sched-event.short .ev-items { display: none; }
.sched-event .ev-lock { position: absolute; top: 2px; right: 2px; display: inline-flex; padding: 2px; background: #ffffffcc; color: #1f2937; border: none; border-radius: 4px; cursor: pointer; }
.sched-event.locked .ev-lock { background: #1f2937; color: #ffd166; }
.sched-event .ev-lock.static { cursor: default; background: transparent; color: #ffffffcc; }
.sched-event .ev-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; font-weight: 900; color: #ffffff; text-shadow: 0 2px 6px #0005; opacity: .85; pointer-events: none; }
.sched-event.state-delivered > :not(.ev-check):not(.ev-lock) { opacity: .55; }

/* Six weeks: Monday to Saturday cells with compact chips */
.sched-month { height: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--weeks), minmax(0, 1fr)); gap: 5px; }
.sched-month .sched-dayhead { border-radius: 6px; justify-content: center; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; color: var(--muted); }
.month-cell { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 3px 5px; overflow: hidden; cursor: zoom-in; display: flex; flex-direction: column; gap: 2px; }
.month-cell:hover { box-shadow: 0 0 0 2px var(--primary); }
.month-cell.today { box-shadow: inset 0 0 0 2px var(--primary); }
.month-cell.today .month-date { color: var(--primary); }
.month-cell.past { background: repeating-linear-gradient(135deg, #e3e5e8 0 8px, #dadde1 8px 16px); color: #6b7178; }
.month-date { font-weight: 700; font-size: 0.85rem; }
.month-chip { display: flex; align-items: center; gap: 3px; font-size: 0.7rem; border-radius: 4px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; touch-action: none; }
.month-chip.state-tentative { background: #eef4ff; border: 1px dashed #5b8def; color: #12305f; }
.month-chip.state-confirmed { background: #2f6fde; color: #fff; }
.month-chip.state-delivered { background: #3b9b55; color: #fff; }
.month-chip.notready { border-left: 4px solid #f0a020; }
.month-chip svg { flex: none; width: 11px; height: 11px; }
.chip-time { font-weight: 700; }
.chip-check { font-size: 0.9rem; line-height: 1; }
.month-more { font-size: 0.7rem; color: var(--muted); font-style: italic; }

/* Tray of sales to book: a handle that opens a row of cards */
.sched-tray { background: #24303f; color: #dfe6ee; box-shadow: 0 -3px 12px #0003; }
.tray-handle { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: inherit; padding: 6px 14px; font-size: 0.85rem; text-align: left; cursor: pointer; }
.tray-handle .muted { color: #9fb0c4; font-size: 0.75rem; }
.tray-count { background: #f0a020; color: #1f2937; font-weight: 700; border-radius: 10px; padding: 0 8px; }
.tray-body { display: none; padding: 0 14px 10px; }
.sched-tray.open .tray-body { display: block; }
.tray-filter { width: 320px; max-width: 100%; margin-bottom: 6px; }
.tray-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.tray-card { flex: 0 0 210px; background: #fdfdfb; color: var(--text); border-radius: 8px; padding: 6px 8px; font-size: 0.75rem; cursor: grab; touch-action: pan-x; border-left: 6px solid #3b9b55; }
.tray-card.notready { border-left-color: #f0a020; }
.tray-card:hover { box-shadow: 0 0 0 2px #8ab4ff; }
.tray-card:not([data-drag]) { cursor: pointer; }
.tray-top { display: flex; justify-content: space-between; align-items: center; }
.tray-company { font-weight: 700; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-sub { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-empty { padding: 10px 0; color: #9fb0c4; }
body.dragging .sched-tray { outline: 3px dashed #8ab4ff; outline-offset: -3px; }

/* Dragging */
body.dragging, body.dragging * { cursor: grabbing !important; }
.drag-source { opacity: .35; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; background: #1f2937; color: #fff; border-radius: 6px; padding: 5px 9px; font-size: 0.78rem; box-shadow: 0 8px 22px #0006; max-width: 260px; }
.drag-ghost .ghost-when { color: #ffd166; font-weight: 600; }
.slot.drop-hover { background: #cfe0ff; }
.month-cell.drop-hover { box-shadow: 0 0 0 3px var(--primary); background: #eef4ff; }
.drop-bad, .slot.drop-hover.drop-bad { background: #fbd9d6 !important; }
.sched-tray.drop-hover { outline: 3px solid #ffd166; }

.sched-pill.state-tentative { background: #eef4ff; color: #12305f; border: 1px dashed #5b8def; }
.sched-pill.state-confirmed { background: #2f6fde; color: #fff; }
.sched-pill.state-delivered { background: #3b9b55; color: #fff; }
.sched-toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 1100; background: #1f2937; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; box-shadow: 0 6px 18px #0005; }
.sched-toast.bad { background: #b3261e; }

@media (max-width: 900px) {
    .sched-page { height: 100vh; overflow: hidden; }
    .sched-week { grid-template-columns: 38px repeat(6, minmax(0, 1fr)); column-gap: 3px; }
    .sched-dayhead { padding: 3px; font-size: 0.7rem; flex-wrap: wrap; }
    .sched-dayhead b { font-size: 0.95rem; }
    .sched-dayhead .count { display: none; }
    .sched-event { padding: 2px 3px; font-size: 0.62rem; }
    .sched-event .ev-sub, .sched-event .ev-items, .sched-event .ev-lock { display: none; }
    .board-legend { display: none; }
}

/* Retail: quotes and Looking For */
.kiosk-quote { width: 100%; margin-top: 6px; padding: 10px; font-size: 0.95rem; font-weight: 700; border-radius: 10px; background: var(--card); color: var(--primary); border: 2px solid var(--primary); }
.kiosk-quote:hover { background: #eef4ff; }
.kiosk-quote:disabled { color: #9aa3ad; border-color: #9aa3ad; }
.kiosk-from-quote { background: #fff7d6; border: 1px solid #e0c24a; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 0.9rem; }
.want-form { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfcfd; padding: 10px; }
.want-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(380px, 2fr); gap: 14px; }
.want-grid h3 { margin: 0 0 6px; font-size: 0.95rem; }
.want-item .what select { max-width: 150px; }
.want-item .w-desc { flex: 1; min-width: 180px; }
.want-item label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
@media (max-width: 900px) { .want-grid { grid-template-columns: 1fr; } }
.prio { display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 1px 8px; border-radius: 10px; letter-spacing: .03em; }
.prio-vip { background: #f2c94c; color: #4a3500; }
.prio-high { background: #fde0c4; color: #7a3a00; }
.prio-normal { background: #e3e6ea; color: #343a40; }
tr.muted-row td { color: var(--muted); }
.kiosk-deposit { margin: -4px 0 10px; }
.kiosk-deposit label { display: flex; flex-direction: column; font-size: 0.75rem; font-weight: 600; color: var(--muted); gap: 2px; }
.deposit-warning { margin-top: 4px; font-size: 0.8rem; font-weight: 700; color: #b06000; }
.deposit-warning span { display: block; color: var(--text); font-weight: 600; }
.deposit-done { margin-top: 6px; font-size: 1.05rem; color: #b06000; }
.status-deposit { background: #fde7c4; color: #6b3e00; }
.cf-when { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: 0.75rem; color: var(--muted); }
.cf-when select { font-size: 0.75rem; padding: 2px 4px; }
.cf-values { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; }
.cf-rule { margin-top: 3px; font-size: 0.75rem; font-weight: 600; color: #b06000; white-space: normal; }
.acct-tile.warn-tile .value { color: #b06000; }
.ap-bulk { display: inline-flex; gap: 6px; }
button.override-btn { background: #b06000; }
button.override-btn:hover { background: #8a4b00; }

/* Inbox (header bell), approval pop-up, alert settings */
.inbox-bell { position: relative; background: none; color: var(--primary); font-weight: 600; padding: 3px 8px; }
.inbox-bell:hover { background: var(--head); }
.inbox-badge { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--muted); color: #fff; font-size: 0.7rem; line-height: 18px; text-align: center; }
.inbox-badge.urgent { background: var(--danger); }
.inbox-box { max-width: 900px; }
.inbox-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.inbox-count { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); text-decoration: none; background: var(--head); }
.inbox-count b { font-size: 1.6rem; line-height: 1; }
.inbox-count.has { border-color: var(--danger); color: var(--danger); background: #fdecea; }
.inbox-count:hover { border-color: var(--primary); }
.inbox-table .date-field { white-space: nowrap; }
.inbox-notes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; }
.inbox-note { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: start; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.inbox-note:last-child { border-bottom: none; }
.inbox-note:hover { background: var(--head); }
.inbox-note time { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.inbox-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; }
.inbox-note.unread .inbox-dot { background: var(--primary); }
.inbox-note:not(.unread) { color: var(--muted); }
.inbox-note:not(.unread) b { font-weight: 500; }
.inbox-popup { z-index: 300; align-items: center; }
.inbox-popup .modal-box { max-width: 460px; border-top: 4px solid var(--danger); }
.inbox-pop-list { margin: 6px 0 12px; padding-left: 18px; max-height: 260px; overflow-y: auto; }
.inbox-pop-list li { margin-bottom: 4px; }
.inbox-pop-actions { justify-content: flex-end; }
.alerts-box { max-width: 480px; }
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-list label { display: flex; align-items: center; gap: 8px; }
.alert-popup { border-top: 1px solid var(--line); padding-top: 8px; }
.req-pill { color: var(--danger); font-size: 0.7rem; text-transform: uppercase; }

/* Admin messages */
.inbox-msg-body { white-space: pre-wrap; margin-top: 2px; }
.inbox-note.message.unread { background: #eef3fd; }
.inbox-pop-msg { padding: 6px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.inbox-pop-msg p { white-space: pre-wrap; margin: 6px 0 0; max-height: 240px; overflow-y: auto; }
.compose-box { max-width: 720px; }
.compose-to { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.compose-to label, .compose-popup { display: flex; align-items: center; gap: 6px; }
.compose-pick { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-bottom: 8px; }
.compose-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; }
.compose-list label { display: flex; align-items: center; gap: 6px; }
.compose-list label[hidden] { display: none; }
.compose-find { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
.compose-box textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 0.8rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; resize: vertical; }
.compose-popup { margin: 8px 0 4px; }
@media (max-width: 640px) { .compose-pick { grid-template-columns: 1fr; } }

/* Invoice numbers (checked as typed) and declined payments */
.invnum-field { display: flex; flex-direction: column; gap: 2px; }
.invnum-check { font-size: 0.75rem; color: var(--muted); min-height: 1em; }
.invnum-check.ok { color: #137333; }
.invnum-check.bad { color: var(--danger); font-weight: 600; }
.invnum-check .link-btn { font-weight: 600; }
input.invnum-taken { border-color: var(--danger); background: #fdecea; }
.invnum-modal { z-index: 250; align-items: center; }
.invnum-modal .modal-box { max-width: 420px; }
.invnum-modal input { width: 100%; box-sizing: border-box; font-size: 0.95rem; }
.invnum-actions { justify-content: flex-end; margin-top: 12px; }
.declined-h { color: var(--danger); }
.declined-row td { color: var(--muted); text-decoration-line: none; }
.declined-row td:nth-child(2) { text-decoration: line-through; }

/* Invoices: as issued, locked, void & reissue */
.issued-box { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 10px 0; background: #fafbfc; }
.issued-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.issued-head h3 { margin: 0 0 6px; }
.issued-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.issued-grid .field-label { display: block; }
.issued-note { margin-top: 6px; font-size: 0.75rem; }
.lock-note { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.reissue-note { margin-bottom: 6px; padding: 4px 8px; border-radius: 4px; background: #fdecea; color: var(--danger); font-weight: 600; }
.reissue-note.ok { background: #e8f0fe; color: var(--primary); }
.reissue-banner { margin: 10px 0 0; padding: 8px 10px; border-left: 4px solid var(--danger); background: #fdecea; border-radius: 4px; }

/* Kiosk steps, a side accordion: the open step fills the width; the others are narrow
   strips beside it (done: green, click to go back; not reached yet: greyed out) */
.kiosk-step { min-width: 0; transition: flex-basis .25s ease; }
.kiosk-step.open { flex: 1 1 auto; border: 2px solid var(--primary); box-shadow: 0 2px 10px #0b57d01a; }
.kiosk-step.done, .kiosk-step.waiting { flex: 0 0 64px; padding: 12px 6px; overflow: hidden; }
.kiosk-step.done .step-body, .kiosk-step.waiting .step-body { display: none; }
.kiosk-step.done h2, .kiosk-step.waiting h2 { flex-direction: column; align-items: center; gap: 10px; margin: 0; height: 100%; }
.kiosk-step.done .step-title, .kiosk-step.waiting .step-title,
.kiosk-step.done .step-summary { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kiosk-step.done .step-summary { flex: 1 1 0; min-height: 0; max-height: 420px; font-size: 0.85rem; }
.kiosk-step.done { cursor: pointer; background: #f1f8f3; border-color: #9cc9a8; }
.kiosk-step.done:hover { border-color: #1e7b34; background: #e6f4ea; }
.kiosk-step.done .step-no { background: #1e7b34; }
.kiosk-step.waiting { cursor: not-allowed; background: #eef0f2; color: #8a9097; }
.kiosk-step.waiting .step-no { background: #aab0b6; }
.kiosk-step.open .step-summary { display: none; }
.step-summary { font-weight: 500; color: var(--muted); }
.step-title { white-space: nowrap; }
.step-next { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.step-next button { font-size: 1rem; padding: 10px 18px; border-radius: 8px; }
.step-back { margin-top: 6px; }
#kStep3.open .step-body { display: flex; flex-direction: column; gap: 4px; }
/* phone width: steps stack; strips become bars */
@media (max-width: 760px) {
    .kiosk { flex-direction: column; }
    .kiosk-step.done, .kiosk-step.waiting { flex: 0 0 auto; padding: 8px 12px; }
    .kiosk-step.done h2, .kiosk-step.waiting h2 { flex-direction: row; }
    .kiosk-step.done .step-title, .kiosk-step.waiting .step-title, .kiosk-step.done .step-summary { writing-mode: horizontal-tb; transform: none; }
    .kiosk-new { grid-template-columns: 1fr; }
}
/* Returning customer: balances owing, take a payment */
.kiosk-owing { margin-top: 10px; border: 2px solid #e0a800; background: #fff8e1; border-radius: 8px; padding: 8px 10px; }
.owing-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #ecd9a0; }
.owing-row > span:first-child { flex: 1; min-width: 0; }
.owing-amt { font-weight: 700; color: #8a5a00; white-space: nowrap; }
.owing-note { margin: 8px 0; padding: 6px 10px; border-radius: 6px; background: #e6f4ea; color: #137333; }
.pay-history summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.pay-history div { font-size: 0.8rem; white-space: nowrap; }
/* Address suggestions */
.addr-wrap { position: relative; }
.addr-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px #0002; overflow: hidden; }
.addr-suggest button { display: block; width: 100%; text-align: left; background: none; color: var(--text); border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 10px; font-weight: 400; font-size: 0.9rem; white-space: normal; }
.addr-suggest button span { color: var(--muted); }
.addr-suggest button.on, .addr-suggest button:hover { background: #e8f0fe; }
.addr-hint, .addr-none { padding: 5px 10px; font-size: 0.75rem; color: var(--muted); font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.addr-hint kbd { border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; background: var(--head); font-size: 0.7rem; }
.addr-src { opacity: .7; }

/* Record popup: tabs, condensed address, Back */
.detail-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.detail-back { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.dtabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--line); margin: 2px 0 10px; }
.dtab { background: none; color: var(--muted); border: none; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -2px; padding: 7px 12px; font-weight: 600; font-size: 0.85rem; }
.dtab:hover { background: var(--head); color: var(--text); }
.dtab.on { color: var(--primary); border-bottom-color: var(--primary); }
.dtab-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--head); color: var(--muted); font-size: 0.72rem; line-height: 17px; text-align: center; }
.dtab.on .dtab-count { background: #e8f0fe; color: var(--primary); }
.dtab-note { margin: 0 0 6px; }
.addr-block { line-height: 1.45; }

/* Record popup: details and contacts on top, compact */
.detail-top { display: grid; grid-template-columns: 1fr; gap: 10px 18px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.detail-top.with-contacts { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.field-grid.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
.field-grid.compact .field > span { padding: 0 0 2px; }
.field-grid.compact .field-label { font-size: 0.68rem; }
.detail-contacts { min-width: 0; border-left: 1px solid var(--line); padding-left: 14px; }
.contacts-head { margin: 0 0 4px; }
table.contacts.compact td { padding: 3px 6px; font-size: 0.8rem; }
/* long email addresses wrap instead of pushing the buttons past the popup's edge */
table.contacts.compact { width: 100%; }
table.contacts.compact td:not(.actions) { overflow-wrap: break-word; }
table.contacts.compact td.email { overflow-wrap: anywhere; min-width: 10em; }   /* breaks at the @ first (app.js), mid-word only if it must */
table.contacts.compact td:first-child { min-width: 0; }
table.contacts.compact .icon-btn { width: 24px; height: 24px; }
table.contacts.compact .status-pill { font-size: 0.65rem; }
@media (max-width: 900px) {
    .detail-top.with-contacts { grid-template-columns: 1fr; }
    .detail-contacts { border-left: none; padding-left: 0; }
}

/* Delivery / removal on a line */
.charge-setup { margin: 6px 0; padding: 6px 10px; border-radius: 6px; background: #fff8e1; border: 1px solid #e0c24a; font-size: 0.82rem; }
.charge-setup input { width: 80px; }
table.doc-lines tr.charge-row td { color: var(--muted); font-size: 0.82rem; padding-top: 0; border-top: none; }

/* Invoice lines: no "space available" and no model (actual size optional) */
.lines-editor.no-space .space-fields, .lines-editor.no-space .model-field { display: none !important; }

/* An apartment to check, and its line */
.lines-editor input.l-apt.apt-bad { border: 2px solid var(--danger); background: #fdecea; }
.lines-editor tbody.line.line-bad td { background: #fff3f2; }
.lines-editor tbody.line.line-bad tr:first-child td:first-child { box-shadow: inset 3px 0 var(--danger); }

/* A contact's company > location > service call, as links */
.parent-links { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.parent-links .muted { font-size: 0.75rem; }
.parent-links .sep { color: var(--muted); }

/* PDF button on quote and invoice rows */
.pdf-btn { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 6px; margin-right: 4px; border: 1px solid #b3261e; border-radius: 4px;
           color: #b3261e; font-size: 0.68rem; font-weight: 700; text-decoration: none; vertical-align: middle; }
.pdf-btn:hover { background: #fdecea; }

/* Emailing a quote / invoice: the email beside its PDF */
.email-modal { z-index: 250; padding: 12px; }
.email-modal .modal-box { max-width: 1240px; }
.email-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.email-compose { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.em-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 3px 0; }
.em-label { width: 58px; flex: none; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.em-from { font-size: 0.85rem; }
.em-row > input { flex: 1; border: none; padding: 6px 2px; font-size: 0.9rem; }
.em-row > input:focus { outline: none; }
.em-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 30px; cursor: text; }
.em-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 12px; background: #e8f0fe; color: var(--primary); font-size: 0.82rem; }
.em-chip.bad { background: #fdecea; color: var(--danger); }
.em-chip button { background: none; color: inherit; border: none; padding: 0 4px; font-size: 1rem; line-height: 1; }
.em-chip-input { flex: 1; min-width: 160px; border: none !important; padding: 4px 2px; font-size: 0.88rem; }
.em-chip-input:focus { outline: none; }
.em-contacts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 0.78rem; padding: 2px 0 4px 66px; }
.em-contact { background: #f3f6fb; color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; font-weight: 500; font-size: 0.78rem; }
.em-contact span { color: var(--muted); }
.em-contact:hover { border-color: var(--primary); background: #e8f0fe; }
#emMessage { width: 100%; box-sizing: border-box; min-height: 230px; flex: 1; font: inherit; font-size: 0.88rem; line-height: 1.45; padding: 8px; border: 1px solid var(--border); border-radius: 6px; resize: vertical; }
.em-attachment { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; font-size: 0.82rem; }
.em-attachment a { margin-left: auto; }
.em-pdf-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 40px; border-radius: 4px; background: #b3261e; color: #fff; font-size: 0.7rem; font-weight: 700; }
.email-preview { min-width: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #525659; min-height: 520px; }
.email-preview iframe { width: 100%; height: 100%; min-height: 520px; border: none; display: block; }
.email-warn, .email-history { margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; font-size: 0.82rem; }
.email-warn { background: #fff8e1; border: 1px solid #e0c24a; }
.email-history { background: #e6f4ea; color: #137333; }
.mail-btn { display: inline-flex; align-items: center; justify-content: center; height: 26px; width: 30px; padding: 0; margin-right: 4px; border: 1px solid var(--primary);
            border-radius: 4px; background: none; color: var(--primary); font-size: 0.95rem; vertical-align: middle; }
.mail-btn:hover { background: #e8f0fe; }
.emailed-yes { color: #137333; font-weight: 600; }
.emailed-no { color: var(--muted); font-size: 0.8rem; }
@media (max-width: 900px) { .email-layout { grid-template-columns: 1fr; } .email-preview, .email-preview iframe { min-height: 360px; } }
.mail-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 0 12px; }
.mail-actions span { display: flex; gap: 6px; }
.mail-state { padding: 4px 12px 10px; }

/* ✉ on a list row: dark once emailed; a grey badge counts the sends */
.mail-btn { position: relative; }
.mail-btn.sent { background: #0842a0; border-color: #0842a0; color: #fff; }
.mail-btn.sent:hover { background: #06357f; }
.mail-count { position: absolute; top: -7px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px;
              background: #6b7178; color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; border: 1px solid #fff; }

/* Delivery Schedule: delivery cards are dragged, never text-selected */
.tray-card, .sched-event, .month-chip, .drag-ghost { user-select: none; -webkit-user-select: none; }
body.dragging, body.dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing; }

/* Schedules: travel view - just the address on each stop; the driving drawn between stops */
.sched-travel { padding: 2px 10px; font-size: 0.8rem; background: #3a4048; }
.sched-travel.on { background: #f2b33d; color: #1b1f24; }
/* The technician map (Service Schedule): it takes the calendar's place */
body.map-on .sched-calendar, body.map-on .sched-tray, body.map-on .board-bar .sched-nav, body.map-on #schedTitle, body.map-on #zoomBtn,
body.map-on .board-legend, body.map-on #drivesOpt, body.map-on #travelBtn { display: none !important; }
.techmap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.techmap[hidden] { display: none; }
.techmap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.techmap-bar select, .techmap-bar input { font-size: 0.9rem; }
.techmap-day { display: inline-flex; gap: 4px; align-items: center; }
.techmap-info { color: #343a40; }
.techmap-info b { color: #111418; }
.techmap-map { flex: 1; min-height: 0; }
.tm-label { background: #fff; border: 1px solid #555; border-radius: 4px; padding: 1px 5px; font: 600 12px system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px #0004; }
.travel-view .sched-event { display: flex; align-items: center; }
.travel-view .sched-event .ev-title { font-size: 0.82rem; white-space: normal; line-height: 1.2; }
.leg-block { position: absolute; left: 10%; right: 10%; z-index: 3; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
             padding: 1px 8px; border-radius: 6px; border: 1px dashed #8a95a3; color: #2a3038; font-size: 0.68rem; line-height: 1.25; overflow: hidden;
             background: repeating-linear-gradient(135deg, #eef1f5, #eef1f5 6px, #e2e7ed 6px, #e2e7ed 12px); }
.leg-block b { font-size: 0.72rem; white-space: nowrap; }
.leg-block span { color: #4a525c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leg-block.late { border: 1px solid var(--danger); color: var(--danger); background: repeating-linear-gradient(135deg, #fdecea, #fdecea 6px, #f9d7d3 6px, #f9d7d3 12px); }
.leg-block.late span { color: var(--danger); font-weight: 600; }
.leg-block.same { opacity: 0.8; }
.leg-block.loading, .leg-block.unknown { flex-direction: row; align-items: center; gap: 6px; color: #5a626c; font-weight: 600; }
.leg-block.unknown { opacity: 0.7; }
/* always tall enough for one line; a short block shows the one-line version */
.leg-block { min-height: 17px; }
.leg-block b, .leg-block > span { flex: none; }   /* (so text that doesn't fit shows as overflow, and the block goes to one line) */
.leg-block.tight { z-index: 4; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.ev-leave { font-size: 0.66rem; font-weight: 700; color: #2a3038; background: rgba(255,255,255,.75); border-radius: 3px; padding: 0 4px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.leg-block .leg-short { display: none; font-style: normal; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leg-block.compact { padding-top: 0; padding-bottom: 0; }
.leg-block.compact b, .leg-block.compact > span { display: none; }
.leg-block.compact .leg-short { display: block; }
.spinner { width: 12px; height: 12px; border: 2px solid #b8c0ca; border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.drive-total { margin-left: 6px; font-weight: 600; }
.tray-sort { margin-right: 8px; padding: 5px 6px; border-radius: 6px; max-width: 260px; }
.tray-near { margin-top: 3px; font-size: 0.75rem; font-weight: 600; color: #0842a0; }
.tray-near.unknown { color: #8a9097; font-weight: 500; }
.ghost-drive { font-size: 0.72rem; font-weight: 600; color: #0842a0; }
.drive-rows div { margin: 2px 0; }

/* Service Schedule: account and retail visits in their own colours; grey boxes for visits
   the viewer can't see (account calls, for retail-only staff) */
.sched-event.kind-color.state-confirmed, .month-chip.kind-color.state-confirmed { background: var(--ev); border-color: color-mix(in srgb, var(--ev) 78%, black); color: #fff; }
.sched-event.kind-color.state-tentative, .month-chip.kind-color.state-tentative { background: color-mix(in srgb, var(--ev) 12%, white); border-color: var(--ev); color: #1b1f24; }
.sched-event.masked, .month-chip.masked { background: #d9dcdf; border: 2px solid #b5bac0; color: #555d66; cursor: not-allowed; }
.sched-event.masked .ev-title { font-weight: 700; }
.masked-swatch { background: #d9dcdf; border: 1px solid #b5bac0; }
.tray-kind { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.color-pick { display: inline-flex; align-items: center; gap: 6px; }
.color-pick input[type=color] { width: 44px; height: 30px; padding: 2px; }

/* Schedules: a locked booking has a solid border (no dashes), whatever its state */
.sched-event.locked, .month-chip.locked { border-style: solid !important; }

/* Schedules: where the map put a stop, and choosing the right place */
.ev-where { font-size: 0.66rem; font-weight: 500; opacity: .9; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-where.warn { font-weight: 700; color: #b3261e; background: #fff4d6; border-radius: 3px; padding: 0 4px; opacity: 1; }
.travel-view .sched-event { flex-direction: column; align-items: stretch; justify-content: center; }
.map-found { margin: 2px 0 6px; }
.map-choices { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.map-choice { text-align: left; background: #f3f6fb; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-weight: 500; }
.map-choice:hover { border-color: var(--primary); background: #e8f0fe; }

/* Admin > Import & Export */
a.button-link { display: inline-block; background: var(--primary); color: #fff; padding: 7px 14px; border-radius: 6px; font-weight: 600; text-decoration: none; }
a.button-link:hover { filter: brightness(1.08); }
.import-summary, .import-msg { margin: 10px 14px 14px; }
.import-msg { color: #188038; font-weight: 600; }
.import-msg.error { color: #b3261e; }
.import-problems { background: #fff4d6; border: 1px solid #f0d58a; border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.import-problems ul { margin: 4px 0 0 18px; padding: 0; }
.import-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.import-help { margin: 4px 14px 6px; font-size: 0.8rem; }
.board-card .no-contact { opacity: .65; font-style: italic; }

/* Exchanges */
.status-pill.exch-needed { background: #fde7c4; color: #8a4b00; font-weight: 700; }
.status-pill.exch-done { background: #d8f0dc; color: #1e6b2f; }
.status-pill.exch-cancelled { background: #eceff1; color: #5c636a; }
td.overdue-num { color: var(--danger); font-weight: 700; }
.exchange-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff4d6; border: 1px solid #f0c25a; border-left: 4px solid #e8a100;
                   border-radius: 6px; padding: 6px 10px; margin: 0 0 8px; font-size: 0.85rem; }
.exchange-banner > span:first-of-type { flex: 1; min-width: 200px; }
.exchange-banner-actions { display: flex; gap: 6px; }
button.exchange-btn { background: #e8a100; color: #1b1f24; }
.exchange-box { max-width: 560px; }
.exchange-box #exBody { padding: 4px 2px; }
.inbox-exchanges { list-style: none; margin: 0 0 10px; padding: 0; }
.inbox-exchanges li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.exch-age { font-weight: 700; color: #8a4b00; white-space: nowrap; }
.exch-age.old { color: var(--danger); }
.pre-line { white-space: pre-line; }
a.button-link.small { padding: 3px 10px; font-size: 0.8rem; }
.app-notice { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; background: #1f2933; color: #fff; padding: 10px 18px;
              border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-weight: 600; max-width: 90vw; }

/* Travel view on a wide screen: the time chart (a row per day, time left to right; visits on
   top, the driving in the strip underneath) */
.sched-timeline { height: 100%; display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto repeat(var(--days), minmax(96px, 1fr)); gap: 6px; overflow-y: auto; }
.tl-corner { }
.tl-ruler { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); position: sticky; top: 0; z-index: 6; background: var(--bg, #e9ecef); }
.tl-tick { font-size: 0.72rem; color: var(--muted); padding: 2px 0; border-left: 1px solid transparent; white-space: nowrap; overflow: visible; }
.tl-tick.hour { border-left-color: #b8c0ca; padding-left: 3px; font-weight: 600; }
.tl-day { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 2px; }
.tl-day b { font-size: 1.25rem; }
.tl-day .dow { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; color: var(--muted); }
.tl-day .count { font-size: 0.75rem; color: var(--muted); }
.tl-day .drive-total { font-size: 0.78rem; font-weight: 700; }
.tl-day.today { background: var(--primary); border-color: var(--primary); color: #fff; }
.tl-day.today .dow, .tl-day.today .count { color: #dce7ff; }
.tl-day.past { background: #d9dcdf; color: #6b7178; }
.tl-lane { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
           --track: calc(64% - 6px); }
.tl-lane .slot { border-left: 1px dotted #e3e6ea; }
.tl-lane .slot.hour { border-left: 1px solid #cfd4da; }
.tl-lane.past { background: repeating-linear-gradient(135deg, #e3e5e8 0 8px, #dadde1 8px 16px); }
.tl-lane.past .sched-event { opacity: .62; filter: saturate(.5); }
.tl-lane.today { box-shadow: inset 0 0 0 2px var(--primary); }
/* a line between the visits strip and the driving strip */
.tl-lane::after { content: ""; position: absolute; left: 0; right: 0; top: 66%; border-top: 1px dashed #d5dae0; pointer-events: none; }
.tl-lane .sched-event { top: calc(4px + var(--track) * var(--c) / var(--n)); height: calc(var(--track) / var(--n) - 2px); padding: 3px 22px 3px 7px; }
.tl-lane .sched-event .ev-time { font-size: 0.68rem; }
.tl-lane .sched-event .ev-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.tl-lane .now-shade { top: 0; bottom: 0; left: 0; right: auto; height: auto; }
.tl-lane .now-line { top: 0; bottom: 0; width: 2px; height: auto; right: auto; z-index: 5; }
.tl-lane .now-line::before { left: -4px; top: -4px; }
.tl-leg { position: absolute; top: calc(66% + 3px); bottom: 3px; z-index: 3; color: #2a3038; font-size: 0.7rem; line-height: 1.2; min-width: 6px; --row: 0; }
.tl-bar { height: 9px; border-radius: 5px; border: 1px solid #8a95a3; box-sizing: border-box;
          background: repeating-linear-gradient(135deg, #dfe4ea, #dfe4ea 4px, #c9d1da 4px, #c9d1da 8px); }
/* the words: under the bar, a line lower for each overlap; a thin line joins lowered words to their bar */
.tl-stem { position: absolute; left: var(--stem, 4px); top: 9px; width: 0; height: calc(var(--row) * 30px + 3px); border-left: 1px solid #8a95a3; }
.tl-leg:not(.lowered) .tl-stem { display: none; }
.tl-text { position: absolute; top: calc(12px + var(--row) * 30px); white-space: nowrap; padding: 1px 4px; border-radius: 4px; background: #ffffffd9; }
.tl-text > span { display: flex; flex-direction: column; }
.tl-text b { font-size: 0.72rem; }
.tl-text span span { color: #4a525c; }
.tl-leg .tl-short, .tl-leg .tl-tiny { display: none; }
.tl-leg.late .tl-bar { border-color: var(--danger); background: repeating-linear-gradient(135deg, #f6c4be, #f6c4be 4px, #ee9d94 4px, #ee9d94 8px); }
.tl-leg.late .tl-stem { border-color: var(--danger); }
.tl-leg.late, .tl-leg.late span span { color: var(--danger); }
.tl-leg.late span span { font-weight: 600; }
.tl-leg.same { opacity: 0.8; }
.tl-leg.loading .tl-text, .tl-leg.unknown .tl-text { display: flex; align-items: center; gap: 6px; color: #5a626c; font-weight: 600; }
.tl-leg.unknown { opacity: 0.7; }

/* The travel time chart shows one day: a taller row, and the day in words underneath */
.timeline-view { overflow-y: auto; }
.sched-timeline.one-day { height: auto; grid-template-rows: auto minmax(190px, 34vh); overflow: visible; }
.sched-timeline.one-day .tl-day b { font-size: 1.6rem; }
.day-plan { margin: 10px 0 0 122px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
.day-plan h3 { margin: 0 0 6px; font-size: 0.95rem; }
.plan-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.plan-table th { text-align: left; font-size: 0.75rem; color: var(--muted); border-bottom: 1px solid var(--line); padding: 4px 8px; }
.plan-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan-table tr.plan-home td { background: #f3f5f8; color: #3a4048; }
.plan-table tr.itin-stop { cursor: pointer; }
.plan-table tr.itin-stop:hover td { background: #eef4ff; }
.plan-table tr.masked td { color: #6b7178; font-style: italic; }
.plan-late { color: var(--danger); font-weight: 700; }
.plan-warn { color: #b3261e; font-size: 0.78rem; font-weight: 600; }

/* Schedules: "Show travel times" on the normal calendar */
.sched-drives { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: #e8ecf1; cursor: pointer; user-select: none; white-space: nowrap; }
.sched-drives input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.sched-drives[hidden] { display: none; }

.ev-req { font-weight: 600; font-size: 0.66rem; opacity: .85; }

/* The current time across the whole week: a dotted line on the other days, and the time in the hours column */
.now-dash { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dotted #d93025; opacity: .55; pointer-events: none; z-index: 3; }
.now-label { position: absolute; right: 2px; transform: translateY(-50%); background: #d93025; color: #fff; font-size: 0.66rem; font-weight: 700;
             padding: 1px 4px; border-radius: 4px; white-space: nowrap; z-index: 4; pointer-events: none; }
.now-dash[hidden], .now-label[hidden] { display: none; }

/* Boards: the round button (bottom right) that goes to the other boards */
.board-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.board-fab-btn { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0;
                 background: var(--primary); color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: pointer; transition: transform .15s; }
.board-fab-btn:hover { transform: scale(1.06); }
.board-fab.open .board-fab-btn { background: #1f2937; }
.board-fab-menu { background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3); padding: 6px; min-width: 220px; }
.board-fab-menu[hidden] { display: none; }
.board-fab-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: 4px 10px; }
.board-fab-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px; color: #1f2937; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.board-fab-menu a:hover, .board-fab-menu a:focus-visible { background: #e8f0fe; color: var(--primary); outline: none; }
.fab-icon { font-size: 1.2rem; width: 1.5em; text-align: center; }

/* Kiosk: a quoted delivery (the driver collects it), and printing the sold tags */
.cod-pill { display: inline-block; background: #ffe600; color: #1f2937; font-weight: 700; font-size: 0.75rem; border-radius: 4px; padding: 0 6px; margin-left: 4px; }
.print-also { font-size: 0.85rem; color: var(--muted); align-self: center; }
.dv-charge { margin-bottom: 6px; }

/* A service call's visits from the technician app */
.tech-visits { display: flex; flex-direction: column; gap: 10px; }
.tech-visit { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.tech-visit-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.9rem; }
.tech-visit-notes { margin-top: 4px; font-size: 0.88rem; }
.tech-visit-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tech-visit-photos a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.72rem; color: var(--muted); text-decoration: none; }
.tech-visit-photos img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* A service call's units */
.units-add { margin-top: 6px; width: auto; justify-self: start; align-self: flex-start; }
.units-view { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
.units-view th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.75rem; border-bottom: 1px solid var(--line); padding: 2px 6px; }
.units-view td { padding: 3px 6px; border-bottom: 1px solid var(--line); }
.more-units { color: var(--primary); font-weight: 700; font-size: 0.75rem; white-space: nowrap; }
.tech-visit-units { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tech-visit-edit { margin-top: 4px; font-size: 0.82rem; background: #fff7e0; border-radius: 6px; padding: 4px 8px; }

/* Looking For: the customer typed straight in on the left, with the budget and notes under it */
.want-left .want-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.want-left label { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.want-left input, .want-left textarea { font-size: 0.95rem; }
.want-left input[readonly] { background: #f1f4f8; }
.want-existing { font-size: 0.75rem; font-weight: 600; color: #188038; background: #e6f4ea; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.want-found { margin: 4px 0 10px; }
.want-found:empty { display: none; }
.want-left textarea { font-family: inherit; padding: 6px 8px; }

/* Kiosk: sales in progress, one tab each */
.kiosk-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 0 0 8px; }
.kiosk-tabs:empty { display: none; }
.ktab { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 150px; max-width: 260px; padding: 6px 30px 6px 12px;
        border: 2px solid var(--line); border-radius: 10px; background: #f6f8fb; cursor: pointer; line-height: 1.2; }
.ktab b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktab small { color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktab:hover { border-color: var(--primary); }
.ktab.on { background: #e8f0fe; border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); cursor: default; }
.ktab-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: none; background: transparent;
          color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ktab-x:hover { background: #fde7e9; color: var(--danger); }
.ktab-new { align-self: stretch; padding: 6px 16px; font-weight: 700; }
.ktab-hint { align-self: center; font-size: 0.8rem; color: var(--muted); }
.want-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Looking For: a new line asks what it is with small buttons, then shows that thing's dropdowns */
.want-pick .what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.want-pick .pick-label { font-weight: 700; color: var(--muted); font-size: 0.85rem; margin-right: 2px; }
.pick-btn { padding: 4px 12px; font-size: 0.85rem; border-radius: 999px; }
.pick-btn.other { background: #3a4048; }
.want-tip { font-size: 0.75rem; font-weight: 400; margin-left: 6px; }

/* Looking For: where the cursor is stands out (the line, and the button / dropdown / box in it) */
#wForm .want-item:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px #1a73e833; background: #f5f9ff; }
#wForm .want-item select:focus, #wForm .want-item input:focus, #wForm .pick-btn:focus,
#wForm .want-left input:focus, #wForm .want-left textarea:focus { outline: 3px solid #f59e0b; outline-offset: 1px; }
#wForm .pick-btn:focus { transform: scale(1.06); }

/* Looking For: greyed out until the customer's name and phone are in */
.want-items { position: relative; }
.want-lock-note { display: none; }
.want-items.want-locked > :not(.want-lock-note) { opacity: .35; filter: grayscale(1); }
.want-items.want-locked { background: #eef0f3; border-radius: 10px; }
.want-items.want-locked .want-lock-note { display: block; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-weight: 700; color: var(--muted); box-shadow: 0 2px 8px #0002; white-space: nowrap; }

/* Looking For: a request can be opened again to change it */
.want-edit-cell { cursor: pointer; }
.want-edit-cell:hover { background: #f5f9ff; }
.want-edit-hint { display: inline-block; margin-top: 2px; font-size: 0.75rem; font-weight: 700; color: var(--primary); opacity: 0; }
.want-edit-cell:hover .want-edit-hint { opacity: 1; }
.want-editing { margin-right: auto; align-self: center; font-size: 0.82rem; }

/* Retail > Issues: cases */
.case-table tr.on td { background: #e8f0fe; }
.case-view { border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; padding: 12px 14px; margin-bottom: 10px; }
.case-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.case-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.case-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.case-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.case-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; align-content: start; }
.case-facts .field.wide { grid-column: 1 / -1; }
.case-issue { color: var(--danger); font-weight: 700; }
.case-details { white-space: pre-line; }
.case-call { background: #eef4ff; border-radius: 8px; padding: 6px 8px; }
.case-log h4 { margin: 0 0 6px; }
.case-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.case-note { border-left: 3px solid var(--line); padding: 2px 0 2px 8px; font-size: 0.88rem; }
.case-note.status { border-left-color: #9aa5b1; }
.case-note.dispatch { border-left-color: var(--primary); }
.case-add { display: flex; gap: 6px; margin-top: 8px; align-items: flex-end; }
.case-add textarea { flex: 1; font-family: inherit; padding: 6px 8px; }
.case-fields { display: flex; flex-direction: column; gap: 6px; }
.case-fields label { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.case-fields input, .case-fields select, .case-fields textarea { font-size: 0.95rem; }
.case-fields textarea { font-family: inherit; padding: 6px 8px; }
#cForm input:focus, #cForm select:focus, #cForm textarea:focus { outline: 3px solid #f59e0b; outline-offset: 1px; }
@media (max-width: 900px) { .case-body { grid-template-columns: 1fr; } }

/* Outstanding Sales board (/OutstandingSales) */
.level-pickup { background: #e6f0fb; border-color: #a9c4e6; }
.level-owing { background: #fde4ec; border-color: #e7a1b6; }
.sale-way { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 9px; vertical-align: 1px; }
.way-pickup { background: #d6e6fa; color: #1c4f8f; }
.way-delivery { background: #e8e0f5; color: #5a3a8c; }
.owing-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 1px 6px; border-radius: 9px; background: #c62828; color: #fff; vertical-align: 1px; }
.owing-text { color: #c62828; }
a.button-link.secondary { background: var(--muted); }
/* Delivery Schedule: retail deliveries and pickups */
.ev-retail { color: #5a3a8c; }
.sched-event .ev-retail, .month-chip .ev-retail { background: #fff; color: #5a3a8c; padding: 0 4px; border-radius: 3px; font-size: 0.68rem; }
.status-pill.status-retail { background: #e8e0f5; color: #5a3a8c; }
.sched-pickups { background: #fff; color: #1f2937; border: none; border-radius: 6px; padding: 5px 10px; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.sched-pickups .tray-count { margin-left: 2px; }
table.pickups td { vertical-align: top; }

/* Kiosk: an item that isn't ready yet (ticked off later on Outstanding Sales) */
.kiosk-line .not-ready-check.on { color: #b45309; background: #fff4e0; border-radius: 6px; padding: 2px 6px; }

/* Kiosk: the line at the bottom asks what's next with small buttons (like Looking For) */
.kiosk-pick-line { display: block; background: #fff; border-style: dashed; }
.kiosk-pick-line .what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kiosk-pick-line .pick-label { font-weight: 700; color: var(--muted); font-size: 0.85rem; margin-right: 2px; }
#kLines .kiosk-line:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px #1a73e833; background: #f5f9ff; }
#kLines select:focus, #kLines input:focus, #kLines .pick-btn:focus { outline: 3px solid #f59e0b; outline-offset: 1px; }
#kLines .pick-btn:focus { transform: scale(1.06); }
/* Kiosk: an item on one row (its choices, then brand, model, qty, price, tax, ready, amount);
   the name it makes underneath */
#kLines .kiosk-line:not(.kiosk-pick-line) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
#kLines .kiosk-line .what { order: 1; align-self: flex-end; }
#kLines .kiosk-line .nums { order: 2; flex: 1 1 520px; flex-wrap: nowrap; }
#kLines .kiosk-line .icon-delete { order: 3; align-self: center; }
#kLines .kiosk-line .name-preview { order: 4; flex-basis: 100%; font-size: 0.9rem; }
@media (max-width: 1100px) { #kLines .kiosk-line .nums { flex-wrap: wrap; order: 4; flex-basis: 100%; } #kLines .kiosk-line .name-preview { order: 2; flex-basis: auto; flex: 1; align-self: center; } }

/* Kiosk: a line folded to one row when the cursor isn't in it */
#kLines .line-summary { display: none; }
#kLines .kiosk-line.folded { padding-top: 6px; padding-bottom: 6px; align-items: center; }
#kLines .kiosk-line.folded .what, #kLines .kiosk-line.folded .name-preview, #kLines .kiosk-line.folded .lb-edit { display: none; }
#kLines .kiosk-line.folded .line-summary { display: block; order: 1; flex: 1 1 300px; text-align: left; background: none; border: none; padding: 4px 2px;
    color: var(--text); font: inherit; font-size: 0.95rem; cursor: pointer; border-radius: 6px; }
#kLines .kiosk-line.folded .line-summary:hover { background: #eef4ff; }
#kLines .kiosk-line.folded .nums { order: 2; flex: 0 1 auto; align-items: center; }
#kLines .kiosk-line.folded .nums label:not(.check) { flex-direction: row; align-items: center; gap: 4px; }
#kLines .kiosk-line.folded .amount { margin-left: 12px; }
#kLines .line-summary .line-price { margin-left: 8px; color: var(--muted); font-size: 0.85rem; }
#kLines .line-unnamed { color: var(--danger); }

/* Kiosk: a credit card sale is always taxed */
.kiosk-card-tax { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #fff4e0; color: #8a4b00; font-size: 0.85rem; font-weight: 600; }
#kLines .tax-locked { opacity: .75; cursor: not-allowed; }

/* Schedule: booking one call for a page that sent us here (a case) */
.sched-focus { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px;
    background: #fff4e0; color: #7a4100; font-weight: 600; border-bottom: 2px solid #f0a020; }
.sched-focus.done { background: #e3f4e6; color: #1e5e2c; border-bottom-color: #3b9b55; }
.sched-focus .focus-back { background: #1f2937; color: #fff; padding: 6px 14px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.sched-focus .focus-back:hover { filter: brightness(1.2); }
.focus-pick { outline: 4px solid #f59e0b !important; outline-offset: 2px; animation: focus-pulse 1.1s ease-in-out infinite alternate; z-index: 3; }
@keyframes focus-pulse { from { box-shadow: 0 0 0 0 #f59e0b88; } to { box-shadow: 0 0 0 10px #f59e0b00; } }
@media (prefers-reduced-motion: reduce) { .focus-pick { animation: none; } }
/* Issues: the case's service call */
.case-unbooked { color: var(--danger); }
.case-call .case-book { margin-left: 8px; }

/* Looking For: matching existing customers show over the items area (greyed until the name and phone are in) */
.want-right { position: relative; min-width: 0; }
.want-found.want-found-over { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); width: min(460px, 92%); z-index: 5; margin: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px #0003; padding: 10px; }
.want-found-over .muted { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.want-right:has(#wFound:not(:empty)) .want-lock-note { display: none !important; }

/* Retail > Journal: a day as an open book */
.journal-bar { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 4px 0 12px; }
.journal-bar input[type=date] { font: inherit; padding: 5px 8px; }
.journal-book { max-width: 1400px; margin: 0 auto 16px; background: #6b4a2b; border-radius: 12px; padding: 14px 14px 18px;
    box-shadow: 0 10px 28px #0004, inset 0 0 0 3px #4e3520; }
.j-head { text-align: center; color: #fdf6e3; padding: 2px 0 10px; }
.j-date { font-family: Georgia, 'Times New Roman', serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; }
.j-today { margin-left: 10px; background: #f0a020; color: #3a2508; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 9px; vertical-align: 4px; }
.j-pages { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.j-page { background: #fffdf6; min-height: 520px; padding: 18px 22px; color: #2d2a24;
    background-image: repeating-linear-gradient(to bottom, transparent 0 27px, #e9e2cf 27px 28px); }
.j-left { border-radius: 6px 0 0 6px; box-shadow: inset -18px 0 22px -16px #0003; }
.j-right { border-radius: 0 6px 6px 0; box-shadow: inset 18px 0 22px -16px #0003; }
.j-pages::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #cbbf9f; transform: translateX(-1px); }
.j-section { margin-bottom: 16px; }
.j-section h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; margin: 0 0 6px; color: #6b4a2b; border-bottom: 2px solid #d9cba6; padding-bottom: 2px; }
.j-list, .j-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.j-entry { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; font-size: 0.9rem; }
.j-entry.j-void { opacity: .55; text-decoration: line-through; }
.j-time { color: #8a7a55; font-size: 0.8rem; padding-top: 2px; white-space: nowrap; }
.j-amount { float: right; font-weight: 700; }
.j-what { color: #3f3a30; }
.j-meta { color: #8a7a55; font-size: 0.78rem; }
.j-by::before { content: '· '; }
.j-empty { color: #a4987a; font-style: italic; margin: 0; font-size: 0.88rem; }
.j-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.j-totals div { background: #f6efdc; border: 1px solid #e3d6b4; border-radius: 8px; padding: 6px 8px; text-align: center; }
.j-totals span { display: block; font-size: 0.72rem; color: #8a7a55; text-transform: uppercase; letter-spacing: .04em; }
.j-totals b { font-size: 1.15rem; }
.j-methods { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; color: #5d5440; margin-bottom: 14px; }
.j-note { background: #fff7cf; border-left: 4px solid #e8c547; padding: 6px 10px; border-radius: 4px; font-size: 0.92rem; }
.j-note-text { white-space: pre-line; }
.j-add { display: flex; gap: 6px; margin-top: 8px; align-items: flex-end; }
.j-add textarea { flex: 1; font: inherit; padding: 6px 8px; background: #fff; }
@media (max-width: 900px) {
    .j-pages { grid-template-columns: 1fr; }
    .j-pages::after { display: none; }
    .j-left, .j-right { border-radius: 6px; box-shadow: none; }
    .j-right { margin-top: 10px; }
}
.j-count { float: right; font-weight: 700; color: #6b4a2b; }
.j-ref { color: #5d5440; }
.j-totals { margin-bottom: 14px; }
@media (max-width: 520px) { .j-totals { grid-template-columns: repeat(2, 1fr); } }

/* One sale on screen */
.sale-view { max-width: 900px; }
.sale-view .field.wide { grid-column: 1 / -1; }
.sale-view h3 { margin: 14px 0 6px; }
.sale-view h3 .muted { font-size: 0.8rem; font-weight: 400; margin-left: 6px; }
table.sale-sums { margin: 10px 0 0 auto; width: 380px !important; max-width: 100%; border-collapse: collapse; }
table.sale-sums td { padding: 3px 8px; font-size: 0.9rem; }
table.sale-sums tr.strong td { font-weight: 700; border-top: 1px solid var(--line); }
#saleModal { z-index: 1100; }
#retailModal { z-index: 1200; }

/* Issues: open cases tinted, closed ones greyed out; photos; each service call a link */
.case-table tr.case-open td { background: #fff8e8; }
.case-table tr.case-dispatched td { background: #f1f6ff; }
.case-table tr.case-closed td { background: #f3f4f6; color: #8b929b; }
.case-table tr.case-closed .status-pill, .case-table tr.case-closed b { opacity: .8; }
.case-table tr.clickable:hover td { filter: brightness(.97); }
.case-call-link { display: block; text-decoration: none; font-weight: 700; color: var(--primary); }
.case-call-link span { display: block; font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.case-call-link:hover { text-decoration: underline; }
.case-call-link.done { color: #6b7280; }
.case-cam { font-size: 0.85rem; white-space: nowrap; }
.case-nophoto { color: var(--danger); font-size: 0.78rem; font-weight: 700; }
.case-thumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.case-thumb { position: relative; display: inline-block; }
.case-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.case-thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; padding: 0; line-height: 20px;
    background: #c62828; color: #fff; border: 2px solid #fff; font-weight: 700; cursor: pointer; }
.case-add-photo { cursor: pointer; }
.case-photo-pick { display: flex; flex-direction: column; gap: 6px; }
.case-call.done { background: #f3f4f6; }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; font-size: 0.85rem; }
.pager:empty { display: none; }
label.button-link.case-add-photo, .case-fields label.case-add-photo { display: inline-flex; flex-direction: row; align-self: flex-start; align-items: center; gap: 4px;
    background: var(--primary); color: #fff; font-size: 0.82rem; font-weight: 700; padding: 6px 12px; border-radius: 6px; }
label.case-add-photo:hover { filter: brightness(1.08); }

/* One quote on screen */
.quote-state { padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 0.9rem; background: #eef4ff; color: #1c3f75; }
.quote-state.quote-expired { background: #fff4e0; color: #7a4100; }
.quote-state.quote-accepted { background: #e3f4e6; color: #1e5e2c; }
.quote-state.quote-declined { background: #f3f4f6; color: #555; }
.quote-state:empty { display: none; }
button.quote-convert { background: #1e7e34; }
button.quote-convert.big { font-size: 1.05rem; padding: 10px 22px; }
.quote-sell { display: flex; justify-content: flex-end; margin-top: 12px; }
.j-open { align-self: start; }
.j-open .button-link, .j-open button { white-space: nowrap; }
#wList tr.want-picked td { background: #fff4c2; box-shadow: inset 0 0 0 9999px #fff4c2; }
#wList tr.want-picked td:first-child { box-shadow: inset 4px 0 0 #f0a020; }

/* Retail customer: the phone number with a QR code to scan and call from a phone */
.phone-with-qr { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.phone-qr-card { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--border);
    border-radius: 8px; padding: 4px 4px 2px; }
.phone-qr-card img { width: 104px; height: 104px; display: block; }
.phone-qr-card small { font-size: 0.72rem; font-weight: 700; color: var(--muted); }

.quote-note-form { align-items: flex-end; }
.quote-note-form label { flex: 1; min-width: 280px; }
.quote-note-form textarea { width: 100%; font: inherit; padding: 6px 8px; }

/* Looking For: a line folded to one row when the cursor isn't in it */
#wForm .want-item .line-summary { display: none; }
#wForm .want-item.folded { padding-top: 5px; padding-bottom: 5px; }
#wForm .want-item.folded .line-summary { display: block; flex: 1; text-align: left; background: none; border: none; padding: 4px 2px; color: var(--text);
    font: inherit; font-size: 0.92rem; cursor: pointer; border-radius: 6px; }
#wForm .want-item.folded .line-summary:hover { background: #eef4ff; }
#wForm .want-item.folded .what > :not(label) { display: none; }
#wForm .want-item.folded .what { flex: 0 0 auto; }
#wForm .want-item.folded { display: flex; align-items: center; gap: 8px; }
#wForm .line-unnamed { color: var(--danger); }

/* Case videos: a tile with the first frame and a play mark; a note while one uploads */
.video-thumb { position: relative; display: block; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #111; border: 1px solid var(--border); }
.video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.video-thumb b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; text-shadow: 0 1px 6px #000; }
.upload-note { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 7000; background: #1f2937; color: #fff; padding: 10px 18px;
    border-radius: 10px; font-weight: 600; box-shadow: 0 6px 20px #0005; }
/* The round remove button on a photo / video: the cross drawn as two lines, so it's exactly in
   the middle whatever the font (the × character itself sits low in some fonts) */
.case-thumb button { display: block; box-sizing: border-box; font-size: 0; line-height: 0; color: transparent; }
.case-thumb button::before, .case-thumb button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px;
    background: #fff; border-radius: 1px; }
.case-thumb button::before { transform: translate(-50%, -50%) rotate(45deg); }
.case-thumb button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.case-thumb button:hover { background: #a31515; }

/* A case: what's next, and each service call's technician visits */
.case-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 14px;
    border-radius: 10px; font-size: 0.95rem; }
.case-next.done { background: #e3f4e6; color: #1e5e2c; border: 1px solid #9ccfa6; }
.case-next.again { background: #fff4e0; color: #7a4100; border: 1px solid #f0c27a; }
.case-next.book { background: #eef4ff; color: #1c3f75; border: 1px solid #b6cdf5; }
.case-next.done button { background: #1e7e34; }
.case-visits { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #c9d4e3; }
.case-visits.none { color: var(--muted); font-size: 0.82rem; }
.case-visits-head { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.case-facts { min-width: 0; }
.case-facts .case-call { display: block; min-width: 0; }
.case-call .tech-visits, .case-call .tech-visit { max-width: 100%; box-sizing: border-box; min-width: 0; }
.case-call .tech-visit-photos { flex-wrap: wrap; }
.case-note.tech { border-left-color: #1e7e34; background: #f3faf4; }
.ready-close { display: block; margin-top: 3px; font-size: 0.72rem; font-weight: 700; color: #1e7e34; }
/* Retail Service Calls */
.call-table tr.call-closed td { color: #6b7280; }
.case-facts .case-call > .field-label { display: block; margin-bottom: 3px; }

/* A case's log: newest first, the box to add a note above it */
.case-log .case-add { margin: 0 0 10px; }
.case-log-order { font-size: 0.75rem; font-weight: 400; margin-left: 6px; }

/* A case's warranty */
.warranty-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 700; margin-right: 4px; }
.warranty-pill.ok { background: #e3f4e6; color: #1e5e2c; }
.warranty-pill.ended { background: #fde4e4; color: #a12020; }
.warranty-pill.none { background: #eef0f3; color: #555; }

/* Retail Service Calls: a filter under each column heading */

/* A table heading that sorts and filters: click it for a small pop-up */
.col-head { position: relative; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 2px 4px; margin: -2px -4px;
    font: inherit; font-weight: 700; color: inherit; cursor: pointer; border-radius: 4px; white-space: nowrap; }
.col-head:hover { background: #dfe6f0; }
.col-head.filtered { color: var(--primary); }
.col-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); display: inline-block; }
.col-pop { position: fixed; z-index: 4000; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px #0003;
    padding: 10px 12px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.col-pop-title { font-weight: 700; font-size: 0.9rem; }
.col-pop-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.col-pop-filter { display: flex; flex-direction: column; gap: 6px; }
.col-pop-filter input, .col-pop-filter select { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; }
.col-pop-filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.col-pop-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* Every table's headings: click for the sort / filter pop-up (no filter boxes always on screen) */
.sortable-table .filter-row { display: none; }
th.cp-th { cursor: pointer; user-select: none; white-space: nowrap; }
th.cp-th:hover { background: #dfe3e8; }
/* the sort arrow, at the right of the heading (a button of its own) */
th.cp-th.sortable::after, th.cp-th.sort-asc::after, th.cp-th.sort-desc::after { content: none; }
th.cp-th, th.sort-th { position: relative; padding-right: 24px; }
.cp-sort { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 2px; margin: 0;
           border: none; border-radius: 4px; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
           color: #9aa3ad; font-size: 0.75rem; line-height: 1; }
.cp-sort:hover { background: #cfd6df; color: var(--primary); }
.cp-sort::before { content: "\21C5"; }
th.cp-asc .cp-sort, th.sort-asc .cp-sort, th.cp-desc .cp-sort, th.sort-desc .cp-sort { color: var(--primary); }
th.cp-asc .cp-sort::before, th.sort-asc .cp-sort::before { content: "\25B2"; }
th.cp-desc .cp-sort::before, th.sort-desc .cp-sort::before { content: "\25BC"; }
th.cp-th.cp-filtered { color: var(--primary); }
th.cp-th.cp-filtered::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-right: 5px; vertical-align: 1px; }
tr.cp-out { display: none; }

/* Kiosk: an item's own warranty (a deal) */
.kiosk-line .nums .kiosk-warranty select { max-width: 170px; font-size: 0.85rem; padding: 3px 4px; }
.kiosk-line .nums .kiosk-warranty input.w { width: 150px; margin-top: 3px; }
.kiosk-line .nums .kiosk-warranty.own select { border-color: #b06000; background: #fff7e0; font-weight: 700; }
.field-sub.own-warranty { color: #8a4b00; font-weight: 600; }

/* A retail customer's company, with their name in search results */
.cust-company { font-size: 0.8rem; font-weight: 600; color: #5a3a8c; }

/* several columns sorted: each arrow's place (1 = sorted by this first) */
.cp-sort[data-rank]:not([data-rank=""])::after { content: attr(data-rank); font-size: 0.7rem; font-weight: 700; margin-left: 1px; }
th.cp-th:has(> .cp-sort[data-rank]:not([data-rank=""])), th.sort-th:has(> .cp-sort[data-rank]:not([data-rank=""])) { padding-right: 32px; }

/* Line items as a table: a line you're not working on is plain text (click it to change it);
   the boxes and dropdowns only on the line being worked on, kept small */
.lines-editor .l-text { display: none; }
.lines-editor tbody.line.folded .l-text { display: block; color: var(--text); }
.lines-editor tbody.line.folded tr:first-child > td > :is(input, select, .item-row) { display: none; }
.lines-editor tbody.line.folded .l-extra { display: none; }
.lines-editor tbody.line.folded tr:first-child > td { cursor: pointer; padding-top: 6px; padding-bottom: 6px; vertical-align: top; }
.lines-editor tbody.line.folded:hover tr:first-child > td { background: #eef4ff; }
.lines-editor tbody.line.folded td.num .l-text { text-align: right; }
.lines-editor .l-item > .l-text { outline-offset: 2px; }
.lines-editor .l-item > .l-text small { display: block; color: var(--muted); font-size: 0.75rem; }
.lines-editor tbody.line:not(.folded) tr:first-child > td { background: #f6f9ff; }
.lines-editor tbody.line:not(.folded) .l-extra td { background: #f6f9ff; }
/* while choosing: no name under the dropdowns (it shows once they're all answered) */
.lines-editor .l-preview:not(.chosen) { display: none; }
/* smaller boxes and dropdowns on the line being worked on */
.lines-editor input:not([type=checkbox]), .lines-editor select { padding: 3px 5px; font-size: 0.8rem; min-height: 0; height: auto; }
.lines-editor .appliance-pick select { max-width: 130px; }

/* Quotes / orders / invoices: the arrows to the one before / after (+ for a new one), top right */
.doc-nav { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.modal-actions .doc-nav { margin: 0 6px 0 0; }
.nav-arrow { width: 32px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
             font-size: 0.85rem; line-height: 1; border-radius: 6px; }
.nav-arrow:disabled { background: #d5d9de; color: #8a9199; border-color: #d5d9de; cursor: not-allowed; }
.nav-arrow.nav-new { font-size: 1.15rem; font-weight: 700; background: #0d652d; border-color: #0d652d; }
/* a draft brought back, and "Draft saved" by the buttons */
.draft-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding: 7px 10px;
              background: #fff7e0; border: 1px solid #e0c36a; border-radius: 8px; font-size: 0.85rem; }
.draft-msg { color: var(--muted); font-size: 0.8rem; margin-right: 8px; }

/* A saved one opened in the editor: its fields (no fieldset frame); processed: why it can't be changed */
fieldset.entry-fields { border: none; margin: 0; padding: 0; min-width: 0; }
fieldset.entry-fields:disabled .lines-editor tbody.line.folded tr:first-child > td { cursor: default; }
fieldset.entry-fields:disabled .lines-editor tbody.line.folded:hover tr:first-child > td { background: none; }
fieldset.entry-fields:disabled .lines-foot > button, fieldset.entry-fields:disabled .icon-delete { visibility: hidden; }
fieldset.entry-fields:disabled button { opacity: 0.45; cursor: default; }
fieldset.entry-fields:disabled .invnum-check { display: none; }
.locked-note { margin-bottom: 8px; padding: 8px 12px; background: #fdecea; border: 1px solid #e6a19b; border-radius: 8px;
               color: #8c1d18; font-weight: 600; font-size: 0.9rem; }

/* Line items: a light table, every 2nd line shaded for easier reading (the line being worked on: light blue) */
.lines-editor table { background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.lines-editor tbody.line.folded:nth-of-type(even) tr:first-child > td { background: #eef2f7; }
.lines-editor tbody.line.folded:hover tr:first-child > td { background: #e3edff; }
.lines-editor .l-text .l-line { display: block; }
.lines-editor .l-text .l-line + .l-line { color: var(--muted); font-size: 0.75rem; }
.lines-editor tbody.line.no-apt .l-apt { visibility: hidden; }   /* delivery, removal / moving: no apartment */
.lines-editor .item-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; }   /* the choices, then the space available */
.lines-editor .item-row .space-fields { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; white-space: nowrap; }
.lines-editor .item-row .space-fields[hidden] { display: none; }
.lines-editor .item-row .l-inch { width: 64px; text-align: right; }
.lines-editor .item-row .fulfil-fields { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; white-space: nowrap; }
.lines-editor .item-row .l-brand, .lines-editor .item-row .l-model { width: 120px; }
.lines-editor:not(.show-fulfil) .item-row .fulfil-fields { display: none; }
/* Moving a line: its apartment is the grip */
.lines-editor tbody.line.folded > tr > td:first-child { cursor: grab; white-space: nowrap; }
.lines-editor tbody.line.folded > tr > td:first-child::before { content: "\2807\2807"; letter-spacing: -3px; margin-right: 6px; color: #9aa5b1; }
.lines-editor tbody.line.folded > tr > td:first-child > .l-text { display: inline; }
fieldset.entry-fields:disabled .lines-editor tbody.line.folded > tr > td:first-child { cursor: default; }
fieldset.entry-fields:disabled .lines-editor tbody.line.folded > tr > td:first-child::before { content: none; }
.lines-editor tbody.line.dragging { opacity: 0.45; }
.lines-editor tbody.line.dragging tr > td { background: #dce8ff !important; }
.lines-editor tbody.line.no-item .l-desc, .lines-editor tbody.line.no-item .appliance-pick > span { display: none !important; }
/* The description takes the spare width; the item column only what its content needs */
.lines-editor tbody.line > tr:first-child > td:nth-child(4) { width: 100%; white-space: normal; }
/* The line being filled in: its item boxes stay on one row (the column widens while it is needed) */
.lines-editor tbody.line:not(.folded) .item-row, .lines-editor tbody.line:not(.folded) .appliance-pick { flex-wrap: nowrap; }
.lines-editor .l-item > .l-text { white-space: nowrap; }

/* Service trips: a call's trips, the trip page and its billing */
.trips .trips-table { width: 100%; }
.trips .trips-table td { vertical-align: top; }
.trip-actions { display: flex; gap: 8px; margin: 10px 0; }
.trip-form { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #f6f9ff; margin-top: 6px; }
.trip-form h3 { margin: 0 0 8px; font-size: 1rem; }
.trip-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin-bottom: 8px; }
.trip-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; }
.trip-grid label.wide { flex: 1 1 260px; }
.trip-grid #tripHalf { width: 110px; }
.trip-apts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 10px; }
.trip-parts td { padding: 2px 4px; white-space: nowrap; }
.trip-parts .tp-qty { width: 60px; } .trip-parts .tp-price { width: 90px; }
.bill-box { max-width: 640px; }
.bill-trip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bill-trip label.check { display: flex; align-items: center; gap: 8px; flex: 1 1 300px; }
.bill-trip label.check input { margin: 0; }
.trip-from { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; }
.trip-units { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.trip-unit { display: grid; grid-template-columns: 90px minmax(120px, 220px) 1fr; gap: 8px; align-items: center; }
.trip-unit .trip-work { width: 100%; box-sizing: border-box; }
.tech-visit-work { margin: 4px 0; font-size: 0.85rem; }
.page-section { margin: 18px 0 6px; font-size: 1.05rem; border-top: 1px solid var(--line); padding-top: 12px; }
.trip-parts { width: auto; }
.trip-unit-block { padding: 4px 0 6px; border-bottom: 1px solid var(--line); }
.trip-unit-block.off .trip-unit > :not(label) { opacity: 0.45; }
.trip-unit-block.off .trip-unit-parts { display: none; }
.trip-unit-parts { margin: 4px 0 0 98px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.trip-unit-parts .trip-parts:empty, .trip-unit-parts .tp-list:empty { display: none; }
.trip-unit textarea.trip-work { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; min-height: 2.6em; }
.trip-unit { align-items: start; }
.trip-unit > label, .trip-unit > span { padding-top: 6px; }
.trip-unit.trip-call-row { grid-template-columns: 100px minmax(160px, 280px) 1fr 270px; }
.trip-unit.trip-call-row .trip-result { width: 100%; }
@media (max-width: 760px) { .trip-unit.trip-call-row { grid-template-columns: 1fr; } .trip-unit-parts { margin-left: 0; } }
.trip-call-view { padding: 2px 0; }
.bill-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.bill-go .field-label { margin: 0; }
ul.trip-calls { margin: 4px 0 8px; padding-left: 18px; }
.book-link { margin-top: 6px; align-self: flex-start; }
.warranty-ok { color: #1b7f3b; }
.warranty-off { color: var(--danger); }
/* A service trip's service sheet */
.sheet-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.sheet-sent { color: #1b7f3b; font-weight: 600; }
.sheet-photos { margin: 8px 0; }
.sheet-photo { display: inline-flex; flex-direction: column; gap: 4px; margin: 6px 10px 0 0; vertical-align: top; }
.sheet-photo img { width: 140px; height: 140px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border, #ccd); }
.sheet-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.sheet-upload { cursor: pointer; background: var(--primary); padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; font-size: 0.8rem; font-weight: 500; }   /* the same size as the Email button beside it */
.sheet-upload:hover { background: var(--primary-hover); }
.sheet-previews { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.sheet-preview { display: block; width: 320px; height: 420px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; }

/* A service call's trips: one card each, with its result, solution, parts, photos and service sheet */
.call-trips { display: flex; flex-direction: column; gap: 12px; }
.call-trip { background: #fff; border: 1px solid var(--border, #d5dbe3); border-radius: 8px; padding: 10px 14px; }
.ct-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ct-open { margin-left: auto; }
.ct-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid #eef1f5; }
.ct-label { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; gap: 2px; } }

/* A small plain notes box (it grows as it's typed in) */
textarea.note-input { width: 100%; min-height: 54px; resize: vertical; font: inherit; padding: 6px 8px; }
/* The service calls on a trip page: an accordion (the unit and the item; one open at a time) */
.trip-unit-block { padding: 0; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: #fff; }
.trip-acc-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; user-select: none; }
.trip-acc-head:hover { background: #f4f7fb; }
.trip-acc-head .check { margin: 0; }
.trip-acc-head .acc-item { color: var(--muted); }
.trip-acc-head .acc-result { margin-left: auto; }
.trip-acc-head .acc-caret { transition: transform 0.15s; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.trip-unit-block.open .acc-caret { transform: rotate(180deg); }
.trip-unit-block.open > .trip-acc-head { border-bottom: 1px solid var(--line); }
.trip-acc-body { display: none; padding: 10px 12px; }
.trip-unit-block.open > .trip-acc-body { display: block; }
.trip-unit-block.off .trip-acc-head > :not(label) { opacity: 0.55; }
.trip-unit-block.off .trip-acc-body { opacity: 0.6; }
.trip-call-info { margin-bottom: 8px; }
.trip-call-work { display: grid; grid-template-columns: 1fr 270px; gap: 12px; align-items: start; }
.trip-call-work .trip-result { width: 100%; }
.trip-call-work .rte-body { min-height: 60px; }
.trip-acc-body .trip-unit-parts { margin: 8px 0 0; }
@media (max-width: 760px) { .trip-call-work { grid-template-columns: 1fr; } }

/* A trip's call: the client's fault (charged even under warranty); billing: warranty choices */
.trip-fault-box { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 6px; font-size: .88rem; line-height: 1.3; }
.trip-fault-box input { margin-top: 2px; flex: none; }
.pill-fault { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #fdecea; color: #b3261e; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pill-fault[hidden] { display: none; }
.bill-warranty { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 0 2px 26px; font-size: .9rem; }
.bill-warranty select { width: auto; }