/* dcmONE additions on top of sap-theme.css (the shared theme file stays untouched). */

a.navbtn { text-decoration: none; }
a { color: var(--link); }

.toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.toolbar .spacer { flex: 1; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }
.form-grid .f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.form-grid .f.wide { grid-column: 1 / -1; }
.form-grid .f.check { flex-direction: row; align-items: center; gap: 6px; padding-top: 16px; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
.form-grid .f.check input { width: auto; }
label .req { color: var(--red); }
.field-err { font-size: 11px; color: var(--red); }
.has-err input, .has-err select, .has-err textarea { border-color: var(--red); background: var(--bad-bg); }
.form-actions { display: flex; gap: 6px; margin-top: 10px; }

tr.clickable { cursor: pointer; }
tr.inactive td { color: var(--muted); }
.pager { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pager .page-size { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.pager .page-size select { padding: 1px 4px; font-size: 11px; }
.pager.top { margin: 0 0 8px; }
.pager .pages { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.pager .pg { min-width: 26px; padding: 2px 6px; font-size: 12px; border: 1px solid #b7c1cd; border-radius: 3px; background: #fff; color: var(--head); cursor: pointer; font-variant-numeric: tabular-nums; }
.pager .pg:hover, .pager .pg:focus-visible { border-color: var(--accent); color: var(--accent); }
.pager .pg.cur { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; cursor: default; text-align: center; }
.pager .gap { padding: 0 4px; color: var(--muted); }

.status-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 2px; color: #fff; }
.status-tag.active { background: var(--green); }
.status-tag.prospect { background: var(--accent); }
.status-tag.inactive { background: #8a96a3; }
.status-tag.blocked { background: var(--red); }

.sap-statusbar.ok { background: linear-gradient(180deg, #eef8ee, #d3ead3); }
.sap-statusbar.err { background: linear-gradient(180deg, #fdf0f0, #f1d3d3); color: var(--red); font-weight: 700; }

.empty { padding: 14px; color: var(--muted); text-align: center; }

/* Login and user bar */
#userbar { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 11px; }
#userbar a { color: #fff; }
.login-box { max-width: 360px; margin: 40px auto; }
.login-box .f { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.login-box input { width: 100%; }
[hidden] { display: none !important; }

/* Meter readings */
.flag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 2px; margin: 0 2px 2px 0; background: #e9eef4; color: var(--head); }
.flag.warn { background: var(--bad-bg); color: var(--red); }
.status-tag.approved { background: var(--green); }
.status-tag.needs_review { background: #d9822b; }
.status-tag.rejected { background: var(--red); }
.status-tag.missing { background: #8a96a3; }
.reading-panel .big { font-size: 22px; padding: 8px; font-variant-numeric: tabular-nums; }
.reading-panel .facts { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.reading-panel .facts div { min-width: 120px; }
.reading-panel img { max-width: 100%; max-height: 320px; border: 1px solid var(--line); }
.reading-panel .reading-photos { display: flex; gap: 12px; flex-wrap: wrap; }
.reading-panel .reading-photos figure { margin: 0; }
.reading-panel .page-check { border: 1px solid var(--line); border-left-width: 4px; padding: 6px 10px; margin: 8px 0; background: #fff; }
.reading-panel .page-check.ok { border-left-color: #2b8a3e; }
.reading-panel .page-check.bad { border-left-color: #c92a2a; }
.reading-panel .page-check ul { margin: 4px 0 0 18px; padding: 0; }

@media (max-width: 640px) {
  .kpi { gap: 6px; }
  .kpi .box { min-width: 40%; padding: 6px 10px; }
  .kpi .val { font-size: 16px; }
  #userbar > span, #userbar .ub-full { display: none; } /* phones: first name only (with the photo); the Feedback count stays */
  #userbar .ub-first { display: inline; }
  .reading-panel .big { font-size: 26px; }
}

/* Roles that may look but not add or change (body classes set from the role's ticks in app.js) */
.no-customers-edit #customerForm .form-actions, .no-customers-edit #addBilling, .no-customers-edit #addSite, .no-customers-edit #addContact,
.no-customers-edit a[href="#/customers/new"],
.no-machines-edit #machineForm .form-actions, .no-machines-edit a[href="#/machines/new"],
.no-work-orders-edit a[href^="#/work-orders/new"], .no-tickets-edit a[href^="#/tickets/new"] { display: none !important; }
.no-customers-edit #customerForm, .no-machines-edit #machineForm { pointer-events: none; }
.no-customers-edit tr[data-site], .no-customers-edit tr[data-contact], .no-customers-edit tr[data-billing] { pointer-events: none; }

/* Service */
.bar-cell { position: relative; min-width: 90px; }
.bar-cell i { position: absolute; left: 0; top: 3px; bottom: 3px; background: var(--hover); z-index: 0; }
.bar-cell span { position: relative; z-index: 1; }
.pct-bad { color: var(--red); font-weight: 700; }
.pct-ok { color: var(--green); font-weight: 700; }
.subnav { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

/* Column filters in table headers */
.filter-count { margin: 4px 0 0; }
/* One search box above a table (app.js addTableTools) */
.table-search { display: block; width: 100%; max-width: 420px; box-sizing: border-box; margin: 0 0 6px; padding: 6px 10px; font-size: 13px;
  border: 1px solid #b7c1cd; border-radius: 4px; }

/* Sortable column headings */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: linear-gradient(180deg, #e3eefb, #bcd3ef); }
th.sortable::after { content: " \2195"; color: #9db6d4; font-weight: 400; }
th.sortable[data-sort="asc"]::after { content: " \25B2"; color: var(--head); }
th.sortable[data-sort="desc"]::after { content: " \25BC"; color: var(--head); }

/* Month-end steps: tick and title together on the left */
.step-card h3 { justify-content: flex-start; gap: 8px; }

/* My work - phone-first job cards */
.job { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 8px 10px; margin-bottom: 8px; }
.job.late { border-left-color: var(--red); }
.job.hold { border-left-color: #d9822b; }
.job .top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.job .what { font-weight: 700; margin: 3px 0; }
.job .where { color: var(--muted); }
.job .actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.job a.btn { text-decoration: none; }

/* Phones: the page is pinned to the visible screen so it can never slide up under the clock (iPhones let a page that is
   taller than the visible area - or even one sized to it - be dragged up by the height of the browser bars, hiding the title
   bar and menu and leaving a gap at the bottom). Only the content area (.sap-main) scrolls. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100%; height: auto; }

/* The dcmONE logo: "dcm" black, O red, N blue, E dark grey - all bold */
.brand { font-weight: 800; letter-spacing: 0.2px; white-space: nowrap; }
.brand .b-dcm { color: #000; }
.brand .b-o { color: #ff0016; }
.brand .b-n { color: #0a8cff; }
.brand .b-e { color: #4d4d4d; }
/* A faint glow behind each letter in its own colour */
.brand .b-o { text-shadow: 0 0 4px rgba(255, 0, 22, 0.25); }
.brand .b-n { text-shadow: 0 0 4px rgba(10, 140, 255, 0.25); }
/* On the blue title bar: a thin light edge so the dark letters stay readable, and the faint colour glow */
.sap-titlebar .brand { font-size: 14px; line-height: 18px; }
.sap-titlebar .brand .b-dcm, .sap-titlebar .brand .b-e { text-shadow: 0 0 2px rgba(255, 255, 255, 0.7); }
.sap-titlebar .brand .b-o { text-shadow: 0 0 2px rgba(255, 255, 255, 0.7), 0 0 4px rgba(255, 0, 22, 0.35); }
.sap-titlebar .brand .b-n { text-shadow: 0 0 2px rgba(255, 255, 255, 0.7), 0 0 4px rgba(10, 140, 255, 0.35); }
.login-brand { font-size: 34px; text-align: center; margin: 4px 0 10px; }

/* Settings */
.settings-table { width: 100%; border-collapse: collapse; }
.settings-table td { padding: 6px 8px; border-bottom: 1px solid #e3e9f0; vertical-align: top; }
.settings-table .s-label { width: 48%; }
.settings-table .s-input { width: 27%; white-space: nowrap; }
.settings-table tr.changed .s-label b { color: var(--accent); }
.settings-table .field-err { color: var(--red); font-size: 11px; }
@media (max-width: 640px) {
  .settings-table td { display: block; width: auto !important; border: 0; padding: 2px 4px; }
  .settings-table tr { display: block; border-bottom: 1px solid #e3e9f0; padding: 6px 0; }
}

/* Key-value detail tables (stores) */
table.kv { border-collapse: collapse; }
table.kv th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 14px 3px 0; vertical-align: top; white-space: nowrap; }
table.kv td { padding: 3px 0; }
.card h4 { margin: 10px 0 4px; font-size: 12px; }

/* Records open read-only ("viewing"); Edit unlocks the form */
.view-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
form.viewing input:not([type=checkbox]), form.viewing select, form.viewing textarea {
  border-color: transparent; background: transparent; box-shadow: none; color: var(--ink); -webkit-text-fill-color: var(--ink);
  opacity: 1; cursor: default; appearance: none; -webkit-appearance: none; padding-left: 2px; resize: none; }
form.viewing input[type=file] { display: none; }
form.viewing input:not([type=checkbox]) { text-overflow: ellipsis; }
form.viewing .f label .req { display: none; }
form.viewing .f { border-bottom: 1px dotted #d6dee8; }

/* My work */
.mw-updated { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.card.mw-attention { border-left: 4px solid #d9822b; }
.mw-list { margin: 4px 0; padding-left: 18px; }
.mw-list li { margin: 4px 0; }
.mw-list ul { margin: 4px 0; padding-left: 18px; }
.mw-city { margin: 10px 0 6px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.mw-done { margin: 6px 0; }
[data-unfold] { margin-top: 6px; }

/* Roles and access grid */
.perm-grid th:not(:first-child), .perm-grid td.tick { text-align: center; width: 110px; }
.perm-grid td.tick input { width: 18px; height: 18px; }
.perm-grid td.na { color: var(--muted); }
.perm-grid td.blocked { background: #f3f3f3; }
tr.selected td { background: #eef5fb; }

/* Machines dashboard */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.ftile { display: block; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 4px;
  padding: 8px 10px; text-align: center; color: inherit; text-decoration: none; }
a.ftile:hover { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.ftile .lbl { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile .val { font-size: 26px; font-weight: 700; color: var(--head); line-height: 1.2; }
.ftile.c0 { border-top-color: #2f7fd1; } .ftile.c1 { border-top-color: #e5534b; } .ftile.c2 { border-top-color: #f2b705; }
.ftile.c3 { border-top-color: #2fb67c; } .ftile.c4 { border-top-color: #9b59b6; } .ftile.c5 { border-top-color: #e67e22; }
.ftile.gauge-tile { grid-row: span 2; }
.gauge { width: 100%; max-width: 220px; }
.gauge .g-val { font-size: 18px; font-weight: 700; fill: var(--head); } .gauge .g-ax { font-size: 10px; fill: var(--muted); }
.fchart { width: 100%; height: auto; max-height: 260px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.fchart .c-num { font-size: 11px; fill: #333; } .fchart .c-ax { font-size: 11px; fill: var(--muted); }
.key { display: inline-block; width: 18px; height: 4px; vertical-align: middle; margin: 0 4px 0 10px; }
.key.dashed { background: repeating-linear-gradient(90deg, #9aa5b1 0 5px, transparent 5px 9px); }
.hbars { display: grid; gap: 4px; }
.hbar { display: grid; grid-template-columns: minmax(120px, 260px) 1fr 50px; gap: 8px; align-items: center; color: inherit; text-decoration: none; font-size: 13px; }
.hbar:hover .hb-name { text-decoration: underline; }
.hb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-bar { background: #eef1f4; height: 14px; border-radius: 2px; } .hb-bar span { display: block; height: 100%; background: #e5534b; border-radius: 2px; }
.hbar b { text-align: right; }
.fhead { margin: 4px 0; }
.fleet-from { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftile .val { font-size: 20px; } .hbar { grid-template-columns: 110px 1fr 40px; } }
.ffilters > summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.ffilters[open] > summary { margin-bottom: 4px; }
/* Tick boxes on lists: act on several rows at once */
th.tick, td.tick { width: 22px; text-align: center; cursor: default; }
.bulkbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 8px; margin: 6px 0; border: 1px solid var(--accent);
  background: #eef4fb; position: sticky; top: 0; z-index: 2; }
.bulkbar .bulk-form { flex-basis: 100%; }
.bulkbar .bulk-form .form-grid { margin: 4px 0; }

/* Customers > Map */
.sites-map { height: calc(100dvh - 260px); min-height: 360px; border: 1px solid var(--line); margin: 6px 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin: 4px 0; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.leaflet-popup-content { font-size: 12px; line-height: 1.5; }
.office-pin { background: #fff; border: 2px solid #2e69a6; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.office-pin img { width: 100%; height: 100%; display: block; padding: 3px; box-sizing: border-box; }
.map-legend .legend-office { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.tech-pin { background: #fff; border: 2px solid #f08c00; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.tech-pin svg { width: 100%; height: 100%; display: block; padding: 2px; box-sizing: border-box; }
.map-legend .legend-tech { display: inline-block; width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; border: 1px solid #f08c00; border-radius: 50%; background: #fff; }
.map-legend .legend-tech svg { width: 100%; height: 100%; display: block; }
.map-legend .legend-homes { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* Phones: filter boxes never wider than the screen (a long customer name made the dropdown run off the edge) */
@media (max-width: 640px) { .filterbar .f select, .filterbar .f input { max-width: 100%; box-sizing: border-box; } .filterbar .f { min-width: 0; max-width: 100%; } }

/* Feedback */
.fb-kinds { display: flex; flex-direction: column; gap: 4px; }
.fb-kinds label { font-weight: normal; display: flex; gap: 6px; align-items: center; }
.fb-kinds input { width: auto; }
.fb-status { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 700; background: #e3e8ef; color: #34495e; vertical-align: middle; }
.fb-new { background: #ffe9a8; color: #6b4e00; } .fb-planned, .fb-in_progress { background: #d6e8fb; color: #1d4f85; }
.fb-done { background: #d7f0dc; color: #1e6b33; } .fb-not_doing { background: #eee; color: #777; }
.flag.fb-updated { background: #0a8cff; color: #fff; }
.fb-entry { border-left: 3px solid var(--line); padding: 4px 8px; margin: 6px 0; }
.fb-entry.fb-mine { border-left-color: #0a8cff; } .fb-entry.fb-internal { border-left-color: #f0b75f; background: #fff8e6; }
.fb-body { white-space: pre-wrap; }
.fb-photo { max-width: 100%; max-height: 360px; border: 1px solid var(--line); }
.fb-detail .facts { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.fb-badge { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 3px; border-radius: 8px; background: #ff0016; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: middle; }
.fb-notice { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; background: #e6f2ff;
  border-bottom: 1px solid #0a8cff; }
.fb-notice[hidden] { display: none; }
.fb-notice a { color: #1d4f85; }
.fb-inbox tr.fb-unread td { font-weight: 700; }
.fb-inbox tr.fb-unread .fb-preview, .fb-inbox tr.fb-unread .small-muted { font-weight: 400; }
.fb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #0a8cff; }
.fb-dotcell { width: 14px; }
.fb-preview { color: var(--muted); font-size: 11px; margin-top: 2px; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-sitelist { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.fb-sitelist .btn { text-align: left; white-space: normal; }

/* Printed meter reading forms (Meter readings > Print forms): one A4 page per site; on screen a preview */
.mr-forms { display: flex; flex-direction: column; gap: 16px; }
.mr-form { background: #fff; color: #1d2329; border: 1px solid var(--line); padding: 9mm; width: 210mm; max-width: 100%; font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9.5pt; line-height: 1.3; display: flex; flex-direction: column; }
.mr-form h2 { margin: 0 0 1.5mm; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .6px; color: #5b6670; }
.mr-form table, .mr-form tr, .mr-form th, .mr-form td { background: transparent; box-shadow: none; }
.mr-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 3mm; border-bottom: 1.2mm solid #0a8cff; }
.mr-brand { display: flex; align-items: center; gap: 3mm; }
.mr-one { width: 12mm; height: 12mm; }
.mr-word { font-size: 20pt; font-weight: 800; letter-spacing: -.3px; line-height: 1; color: #000; }
.mr-word .o { color: #ff0016; } .mr-word .n { color: #0a8cff; } .mr-word .e { color: #4d4d4d; }
.mr-co { font-size: 7.5pt; color: #5b6670; margin-top: 1mm; }
.mr-headright { display: flex; align-items: center; gap: 4mm; }
.mr-title { text-align: right; }
.mr-title h1 { margin: 0; font-size: 15pt; letter-spacing: .5px; white-space: nowrap; color: #1d2329; }
.mr-month { font-size: 12pt; font-weight: 700; color: #0a8cff; }
.mr-fid { font-size: 7.5pt; color: #5b6670; white-space: nowrap; }
.mr-qr { width: 20mm; height: 20mm; }
.mr-qr svg { width: 100%; height: 100%; display: block; }
.mr-blocks { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4mm; margin: 4mm 0; }
.mr-block { border: .3mm solid #c5ced6; border-radius: 1.5mm; padding: 2.5mm 3mm; }
.mr-cust { font-size: 11.5pt; font-weight: 700; }
.mr-site { font-size: 10pt; font-weight: 600; margin-bottom: 1mm; }
.mr-kv { display: grid; grid-template-columns: 22mm 1fr; row-gap: .8mm; }
.mr-kv b { font-weight: 600; color: #5b6670; }
.mr-write { display: inline-block; border-bottom: .3mm solid #1d2329; min-width: 40mm; height: 4.5mm; vertical-align: bottom; font-style: normal; }
.mr-write.mr-short { min-width: 22mm; }
.mr-dept { display: grid; grid-template-columns: 34mm 1fr 44mm; gap: 3mm; margin: 0 0 3mm; }
.mr-dept > div { border: .5mm solid #1d2329; border-radius: 1.5mm; padding: 2mm 3mm; }
.mr-dept b { display: block; font-size: 13pt; line-height: 1.2; }
.mr-dept-acc b { font-size: 16pt; } .mr-dept-acc span { font-size: 7.5pt; color: #5b6670; }
.mr-dept-code b { font-size: 15pt; letter-spacing: .5px; }
.mr-machine { font-size: 11pt; margin: 0 0 1.5mm; }
.mr-muted-inline { color: #5b6670; font-size: 8.5pt; margin-left: 2mm; }
.mr-form table.mr-machines { width: 100%; border-collapse: collapse; }
.mr-machines th { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .4px; color: #fff !important; background: #1d2329 !important; padding: 1.8mm 2mm; text-align: left; }
.mr-machines td { border-bottom: .3mm solid #c5ced6; padding: 2mm; vertical-align: middle; color: #1d2329; background: #fff !important; }
.mr-machines .mr-mcol { width: 60mm; }
.mr-machines tr.mr-first td { border-top: .6mm solid #1d2329; }
.mr-machines tbody tr { break-inside: avoid; page-break-inside: avoid; }
.mr-acc { width: 20mm; } .mr-acc b { display: block; font-size: 12pt; } .mr-acc span { font-size: 7.5pt; color: #5b6670; }
.mr-muted { display: block; color: #5b6670; font-size: 7.5pt; font-weight: 400; }
.mr-paper { width: 11mm; text-align: center !important; font-weight: 800; font-size: 11pt; }
.mr-prev { width: 27mm; text-align: right !important; font-weight: 700; font-size: 11pt; white-space: nowrap; }
.mr-boxes { display: flex; gap: .8mm; }
.mr-boxes span { width: 6mm; height: 8.5mm; border: .35mm solid #1d2329; border-radius: .6mm; background: #fff; }
.mr-note { font-size: 7pt; color: #5b6670; margin: 1mm 0 0; }
.mr-remarks { margin-top: 3mm; }
.mr-remarks div { border-bottom: .3mm solid #9aa5b0; height: 7mm; }
.mr-signoff { display: grid; grid-template-columns: 1fr; gap: 4mm; margin-top: auto; padding-top: 4mm; break-inside: avoid; page-break-inside: avoid; }
.mr-signoff p { margin: 3mm 0 0; }
.mr-confirm { font-size: 7.5pt; color: #3b454f; margin: 0 0 1mm !important; }
.mr-cfields { display: flex; gap: 4mm; align-items: flex-start; }
.mr-cfields > div:first-child { flex: 1; }
.mr-cfields .mr-write { min-width: 30mm; }
.mr-stamp { border: .3mm dashed #9aa5b0; border-radius: 1.5mm; height: 32mm; width: 60mm; color: #9aa5b0; font-size: 7.5pt; display: flex; align-items: center; justify-content: center; }
.mr-foot { display: flex; justify-content: space-between; gap: 4mm; font-size: 7pt; color: #5b6670; border-top: .3mm solid #c5ced6; margin-top: 3mm; padding-top: 1.5mm; }

/* Machine movement form (installation / replacement / removal) - printed from a work order; same look as the meter reading form */
.mv-sec { border: .5mm solid #1d2329; border-radius: 1.5mm; padding: 2.5mm 3mm; margin: 0 0 3mm; }
.mv-out { border-color: #c0392b; } .mv-out > h2 { color: #c0392b; } .mv-in > h2 { color: #0a8cff; }
.mv-ticks { display: flex; flex-wrap: wrap; gap: 1.5mm 5mm; margin-top: 2.5mm; font-size: 8.5pt; align-items: center; }
.mv-ticks b { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .4px; color: #5b6670; }
.mv-tick { display: inline-flex; align-items: center; gap: 1.5mm; }
.mv-tick i { width: 3.6mm; height: 3.6mm; border: .35mm solid #1d2329; border-radius: .5mm; display: inline-block; }
.mv-signoff { display: grid; grid-template-columns: 1fr 52mm; gap: 4mm; margin-top: auto; padding-top: 4mm; break-inside: avoid; page-break-inside: avoid; }
.mv-signoff p { margin: 3mm 0 0; }
.mv-tech { font-weight: 700; font-size: 10.5pt; }
.mv-form .mr-stamp { height: 28mm; width: 52mm; }
.mv-form { min-height: 277mm; }

/* Contract page: copies a machine made while installed (warning when the counters and the billed readings disagree) */
.inst-bad { color: #a52714; background: #fdecea; padding: 1px 5px; border-radius: 3px; }

@media print {
  @page { size: A4; margin: 9mm; }
  html, body { height: auto !important; overflow: visible !important; }
  body { position: static !important; background: #fff !important; }
  .sap-titlebar, .sap-progtitle, .sap-nav, .sap-statusbar, .fb-notice, .no-print { display: none !important; }
  .sap-main, .wrap, #view { overflow: visible !important; background: #fff !important; padding: 0 !important; }
  .mr-forms { display: block; }
  .mr-form { border: none; padding: 0; width: auto; min-height: 277mm; page-break-after: always; break-after: page;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mr-form:last-child { page-break-after: auto; break-after: auto; }
}

/* Statement (invoice summary) for the customer, A4 landscape (Rahil, 1 Nov 2026) */
.st-scroll { overflow-x: auto; }
.st-doc { position: relative; background: #fff; color: #1d2329; border: 1px solid var(--line); padding: 8mm; width: 297mm; box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 8pt; line-height: 1.35; }
.st-doc h2 { margin: 0 0 1mm; font-size: 7pt; text-transform: uppercase; letter-spacing: .6px; color: #5b6670; }
.st-head { display: flex; justify-content: space-between; gap: 8mm; padding-bottom: 3mm; border-bottom: 1mm solid #0a8cff; }
.st-co { display: flex; gap: 4mm; align-items: flex-start; color: #5b6670; }
.st-logo { max-height: 18mm; max-width: 60mm; }
.st-coname { font-size: 13pt; font-weight: 800; color: #1d2329; margin-bottom: 1mm; }
.st-title { text-align: right; }
.st-title h1 { margin: 0; font-size: 16pt; letter-spacing: 1px; color: #1d2329; }
.st-month { font-size: 11pt; font-weight: 700; color: #0a8cff; margin-bottom: 1.5mm; }
.st-doc table.st-kv { margin-left: auto; border-collapse: collapse; }
.st-kv th { text-align: left; font-weight: normal; color: #5b6670; padding: 0 3mm 0 0; background: none; }
.st-kv td { text-align: right; font-weight: 700; padding: 0; }
.st-billto { margin: 3mm 0; }
.st-cust { font-size: 11pt; font-weight: 800; }
.st-doc table.st-table { width: 100%; border-collapse: collapse; font-size: 7.5pt; }
.st-table th { background: #1d2329; color: #fff; font-weight: 600; text-align: left; padding: 1.2mm 1.2mm; white-space: nowrap; }
.st-table td { border-bottom: .2mm solid #c5ced6; padding: 1mm 1.2mm; vertical-align: top; background: #fff; }
.st-table th.num, .st-table td.num { text-align: right; white-space: nowrap; }
.st-table td.st-site { min-width: 40mm; }
.st-table td.st-mch { white-space: nowrap; }
.st-table tfoot td { font-weight: 800; border-top: .5mm solid #1d2329; border-bottom: none; }
.st-table tr { break-inside: avoid; page-break-inside: avoid; }
.st-sub { font-size: 6.5pt; color: #5b6670; }
.st-words { margin: 3mm 0; }
.st-end { display: grid; grid-template-columns: 1fr 70mm; gap: 8mm; margin-top: 4mm; break-inside: avoid; page-break-inside: avoid; }
.st-footer { white-space: pre-line; color: #5b6670; margin: 2mm 0 0; }
.st-sign { text-align: center; padding-top: 12mm; }
.st-line { border-top: .3mm solid #1d2329; margin-bottom: 1mm; }
.st-draft::before { content: "DRAFT"; position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 90pt; font-weight: 800;
  color: rgba(192, 57, 43, .10); transform: rotate(-20deg); pointer-events: none; }
@media print {
  @page statement { size: A4 landscape; margin: 8mm; }
  .st-scroll { overflow: visible; }
  .st-doc { page: statement; border: none; padding: 0; width: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .st-table thead { display: table-header-group; }
  .st-table tfoot { display: table-row-group; }
}

/* My profile: photo or initials, the header card, and the name on the top bar */
.avatar { display: inline-block; border-radius: 50%; object-fit: cover; vertical-align: middle; flex: 0 0 auto; background: #dfe6ee; }
.avatar-text { display: inline-flex; align-items: center; justify-content: center; color: #1f4f80; font-weight: 700; background: #dbe8f6; }
.ub-me { display: inline-flex; align-items: center; gap: 6px; }
.ub-first { display: none; }
.prof-head { display: flex; align-items: center; gap: 16px; }
.prof-name { font-size: 18px; font-weight: 700; }
.prof-photo { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.prof-photo label.btn { cursor: pointer; }
@media (min-width: 901px) { .sap-nav .nav-phone { display: none; } }

.wh-tag { display: inline-block; margin-left: 6px; font-size: 11px; color: #1f4f80; background: #e6f0fb; border-radius: 3px; padding: 0 6px; }
.wo-steps { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }

/* Sites map: territory areas */
.legend-area { display: inline-block; width: 14px; height: 10px; border: 2px dashed #0a8cff; background: rgba(10, 140, 255, .08); margin-right: 5px; vertical-align: -1px; }
.leaflet-tooltip.area-label { background: rgba(255, 255, 255, .85); border: 1px solid #c5ced6; box-shadow: none; font-weight: 700; font-size: 11px; color: #1d2329; padding: 0 4px; }

/* New contract: the customer's usual terms */
.usual-row { display: flex; gap: 10px; align-items: center; padding: 4px 0; border-top: 1px solid #eef1f5; }
.usual-row:first-of-type { border-top: none; }

/* Welcome message at the top of My work after logging in */
.welcome { position: relative; background: #fff; border: 1px solid var(--line); border-left: 4px solid #0a8cff; border-radius: 0; padding: 10px 40px 10px 14px; margin-bottom: 10px; }
.welcome-title { font-size: 17px; font-weight: 700; color: #1d2329; }
.welcome-sub { font-size: 12px; color: #6b7a89; margin-top: 1px; }
.welcome ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.welcome code { font: 600 11px Menlo, Consolas, monospace; background: #eef1f4; border-radius: 3px; padding: 0 4px; color: #1d2329; }
.welcome-ur { text-align: right; margin-top: 4px; color: #52514e; }
.welcome-x { position: absolute; top: 4px; right: 6px; border: none; background: none; font-size: 22px; line-height: 1; color: #6b7a89; cursor: pointer; padding: 4px 8px; }
.welcome-x:hover { color: #1d2329; }

/* My work: the technician's home location (Urdu line under the English) */
.mw-ur { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", Tahoma, sans-serif; font-size: 1.08em; line-height: 1.9; }

/* Analytics: SVG column charts, hover tooltip, % bars in tables */
.viz { position: relative; }
.viz-scroll { overflow-x: auto; }
.viz svg { display: block; max-width: none; }
.viz-col.on rect { fill: rgba(42, 120, 214, .06); }
.viz-tip { position: absolute; top: 0; right: 0; background: #fff; border: 1px solid var(--line); padding: 4px 8px; font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); pointer-events: none; max-width: 90%; }
.viz-legend { display: flex; gap: 14px; font-size: 12px; color: #52514e; margin-bottom: 4px; }
.viz-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.viz-filter { display: inline-flex; gap: 6px; align-items: center; margin-right: 12px; font-size: 12px; }
.pct-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pct-track { display: inline-block; width: 70px; height: 8px; background: #eceae4; border-radius: 4px; overflow: hidden; }
.pct-track span { display: block; height: 100%; background: #2a78d6; border-radius: 4px; }
.viz-split { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.score { font-size: 16px; }
.score-help { margin: 4px 0 0 18px; padding: 0; line-height: 1.6; }
/* Technician score grades: letter + label, never colour alone */
.grade { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 4px; font-weight: 700; text-align: center; }
.grade-A { background: #d7f0de; color: #145c2a; }
.grade-B { background: #e3f1fb; color: #1d4f86; }
.grade-C { background: #fdf3d0; color: #6b5200; }
.grade-D { background: #fde4cf; color: #8a3d00; }
.grade-E { background: #fbdada; color: #8f1d1d; }
.grade-scale { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 12px; font-size: 13px; }
.grade-scale > span { display: inline-flex; align-items: center; gap: 6px; }
.grade-count { color: var(--muted, #6a6d70); font-size: 12px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-weight: normal; }
.form-grid .check-inline input { width: auto; flex: 0 0 auto; } /* radios in a form: not squeezed to a thin column on phones */
/* My work: the location setting tip as a slim bar that opens on tap */
.loc-tip-bar { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent, #0a6ed1); margin: 0 0 10px; }
.loc-tip-bar > summary { cursor: pointer; padding: 6px 10px; font-size: 13px; color: var(--head); list-style: none; }
.loc-tip-bar > summary::-webkit-details-marker { display: none; }
.loc-tip-bar > summary::after { content: " ▾"; color: var(--muted, #6a6d70); }
.loc-tip-bar[open] > summary::after { content: " ▴"; }
.loc-tip-bar > summary [lang="ur"] { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", Tahoma, sans-serif; }
.loc-tip-bar .loc-tip-cols { display: flex; gap: 24px; flex-wrap: wrap; padding: 0 12px 8px; }
.loc-tip-bar .loc-tip-cols > div { flex: 1 1 300px; min-width: 0; }
.loc-tip-bar ol { margin: 4px 0 8px; padding-inline-start: 22px; }
.loc-tip-bar [lang="ur"] { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", Tahoma, sans-serif; line-height: 1.9; }
/* Page-title bar: the page name on the left, city · weather · time on the right */
.sap-progtitle { display: flex; align-items: center; gap: 12px; }
.ambient { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ambient-sep { margin: 0 6px; color: var(--muted, #6a6d70); }
/* Search all of dcmONE: a button on the title bar opens the Search page (app.js searchPage) */
#progtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 400; color: var(--ink);
  background: #fff; border: 1px solid #a9b6c4; border-radius: 14px; cursor: pointer; }
.gsearch-btn:hover { background: #eef3f9; }
.gsearch-btn[hidden] { display: none; }
.help-btn { font-weight: 700; padding: 4px 10px; }
/* Territory page map */
.territory-map { height: 380px; }
@media (max-width: 640px) { .territory-map { height: 300px; } }

/* One column: the box and the result cards share the same left and right edges */
.search-big { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px; font-size: 16px; background: #fff;
  border: 1px solid var(--line); border-radius: 0; }
.search-page > .small-muted { margin: 6px 0 12px; }
.search-group { margin: 0 0 12px; }
.search-group h3 .small-muted { font-weight: 400; }
.gs-more { display: block; padding: 6px 8px 2px; font-size: 12px; }
.gs-hit { display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none; color: var(--ink); }
.gs-hit:hover, .gs-hit:focus { background: #eaf1fa; outline: none; }
.gs-hit b { display: block; font-size: 13px; color: #1f4f80; font-weight: 600; }
.gs-hit span { display: block; font-size: 11px; color: #6b7a89; }
/* Shortcut codes (SAP-style) on the Search page */
.tc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 12px; }
.tc-hit { display: flex; align-items: baseline; gap: 10px; }
.tc-hit code { flex: 0 0 62px; font: 600 12px/1.4 Menlo, Consolas, monospace; color: #1d2329; background: #eef1f4; border-radius: 3px; padding: 1px 5px; text-align: center; }
.tc-hit b { display: inline; }
@media (max-width: 640px) { .gsearch-label { display: none; } .gsearch-btn { padding: 4px 9px; } }
@media (max-width: 480px) { .ambient { font-size: 11px; } .ambient-sep { margin: 0 3px; } }

/* Audit: Sales / Purchases / Inventory as tabs on top, each check as a button underneath */
.audit-tabs { display: flex; gap: 2px; border-bottom: 2px solid #2e69a6; margin: 6px 0 8px; flex-wrap: wrap; }
.audit-tab { padding: 6px 18px; border: 1px solid var(--line); border-bottom: none; background: #f2f5f8; color: inherit; text-decoration: none; font-weight: bold; }
.audit-tab.active { background: #2e69a6; color: #fff; border-color: #2e69a6; }

/* Top bar: a module button drops down its pages (MODULES in app.js); admin pages' title reads "Admin > page". */
.crumb { color: #6b7a89; font-weight: 400; }
.nav-drop { position: relative; display: flex; }
button.navbtn { font: inherit; font-size: 12px; }
.nav-drop-caret { font-size: 9px; margin-left: 3px; }
.drop-menu { position: absolute; top: calc(100% + 4px); left: 0; width: 290px; max-height: calc(100vh - 140px); overflow-y: auto; background: #fff; border: 1px solid #a9b6c4; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(20, 40, 70, 0.18); padding: 6px; z-index: 50; }
.drop-menu.to-left { left: auto; right: 0; }
/* Maps (Leaflet) draw their layers up to z-index 1000: keep each map in its own layer so the menus open above it. */
.leaflet-container { isolation: isolate; }
.drop-menu[hidden] { display: none; }
.drop-menu a { display: flex; gap: 10px; align-items: flex-start; padding: 7px 12px; border-radius: 4px; text-decoration: none; color: var(--ink); }
.drop-menu a:hover, .drop-menu a.active { background: #eaf1fa; }
.drop-menu b { display: block; font-size: 13px; color: #1f4f80; }
.drop-menu .t { font-size: 11px; color: #6b7a89; }
/* Long internet addresses (IPv6) wrap instead of running off a phone screen. */
td.ip { overflow-wrap: anywhere; }

/* Phones and upright tablets (iPad portrait): the module buttons fold into one "Menu" bar naming the current module; tap it for the list. */
.nav-menu { display: none; }
@media (max-width: 900px) {
  .sap-nav { flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 4px 8px; }
  .sap-nav .navbtn { display: none; }
  .sap-nav.open .navbtn:not([hidden]) { display: block; padding: 10px 14px; font-size: 14px; }
  .nav-menu { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; font-size: 15px; font-weight: 700;
    color: var(--ink); background: linear-gradient(180deg, #fbfcfd, #e6ecf3); border: 1px solid #a9b6c4; border-radius: 3px; cursor: pointer; text-align: left; }
  .nav-menu-icon { font-size: 18px; line-height: 1; }
  .nav-menu-caret { margin-left: auto; transition: transform 0.15s; }
  .sap-nav.open .nav-menu-caret { transform: rotate(180deg); }
  /* In the Menu list, Admin opens its pages in place, indented under it. */
  .nav-drop { flex-direction: column; }
  .sap-nav:not(.open) .nav-drop { display: none; }
  .sap-nav.open .nav-drop button.navbtn:not([hidden]) { text-align: left; width: 100%; }
  .drop-menu { position: static; width: auto; max-height: none; box-shadow: none; border: 0; margin: 2px 0 2px 18px; padding: 0; background: none; }
  .drop-menu a { padding: 8px 10px; }
  /* An open Menu fills the screen below the title and scrolls by itself (the page is pinned, so a long list - say with
     Admin's pages open - was cut off and could not be scrolled). The page underneath keeps its place for when it closes. */
  .sap-nav.open { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sap-nav.open ~ .sap-main { flex: 0 0 0; }
}

/* System status: how much of a Cloudflare limit is used */
.usage-bar { width: 160px; max-width: 100%; height: 10px; background: #e9edf1; border: 1px solid #c9d2db; border-radius: 3px; overflow: hidden; }
.usage-bar span { display: block; height: 100%; background: #2e9e44; }
.usage-watch span { background: #f08c00; }
.usage-act span { background: #d0021b; }

/* Lists on phones (phoneLayout in app.js; sap-theme.css stacks every .mstack row into a tall card first). */
@media (max-width: 640px) {
  /* A short list stays a table. */
  .mstack.phone-fit { display: table; width: 100%; }
  .mstack.phone-fit thead { display: table-header-group; }
  .mstack.phone-fit tbody { display: table-row-group; }
  .mstack.phone-fit tr { display: table-row; border: 0; margin: 0; background: none; }
  .mstack.phone-fit td, .mstack.phone-fit td:empty { display: table-cell; border-bottom: 1px solid #eef1f5; padding: 7px 8px; }
  .mstack.phone-fit td[data-label]::before { content: none; }
  .mstack.phone-fit td.num { text-align: right; }
  .tbl-wrap:has(> .phone-fit) { overflow-x: auto; }
  /* A wider list: compact cards, the first column as the title and the rest two to a line, label above value. */
  .mstack.phone-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 6px 10px 8px; }
  .mstack.phone-cards tbody tr td { display: block; border: 0; padding: 3px 0; min-width: 0; overflow-wrap: anywhere; background: transparent; }
  .mstack.phone-cards tbody tr:nth-child(even) { background: var(--zebra); }
  .mstack.phone-cards td[data-label]::before { display: block; flex: none; margin-bottom: 1px; font-size: 10px; }
  .mstack.phone-cards tbody tr td:first-child { grid-column: 1 / -1; font-size: 14px; font-weight: 700; padding-bottom: 5px;
    border-bottom: 1px solid #e3e8ee; margin-bottom: 2px; }
  .mstack.phone-cards td:first-child::before { content: none; }
  .mstack.phone-cards tbody tr td.wide { grid-column: 1 / -1; }
  .mstack.phone-cards tbody tr td.blank { display: none; }
}