:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-soft: #f9fafb;
  --text: #172033;
  --muted: #687386;
  --line: #e6e9ef;
  --brand: #d51f2a;
  --brand-dark: #a9111b;
  --brand-soft: #fff0f1;
  --sidebar: #1b0d10;
  --sidebar-hover: #351419;
  --danger: #c93636;
  --danger-soft: #fff0f0;
  --success: #18794e;
  --success-soft: #ebf8f1;
  --warning: #9a6500;
  --warning-soft: #fff7df;
  --purple: #6b4eff;
  --shadow: 0 10px 30px rgba(83, 18, 25, .08);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); font-size: 14px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { background: var(--sidebar); color: white; padding: 18px 14px; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; overflow-y: auto; z-index: 50; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: white; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--brand); color: white; font-weight: 900; letter-spacing: -.03em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; }
.brand small { color: #9da8ba; font-size: 11px; margin-top: 1px; }
.workspace-card { background: #1a2535; border: 1px solid #2a384c; border-radius: 12px; padding: 12px; margin: 4px 2px 14px; }
.workspace-card strong, .workspace-card small, .workspace-card span { display: block; }
.workspace-card strong { margin: 3px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-card small { color: #9da8ba; }
.workspace-label { color: #7890ff; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.admin-card { background: linear-gradient(135deg, #202d4e, #1a2535); }
.nav-list { display: flex; flex-direction: column; gap: 3px; }
.nav-heading { color: #7e8a9f; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; padding: 18px 12px 6px; }
.nav-link { color: #cbd3df; display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 9px 11px; border-radius: 9px; font-weight: 600; }
.nav-link:hover { color: white; background: var(--sidebar-hover); }
.nav-link.active { color: white; background: #27365a; box-shadow: inset 3px 0 0 #6f8cff; }
.nav-icon { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; color: #9aa8bb; }
.nav-link.active .nav-icon { color: #8ea5ff; }
.nav-more { margin-top: 3px; }
.nav-more > summary { list-style: none; cursor: pointer; user-select: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more-summary .nav-chevron { margin-left: auto; color: #8f9caf; transition: transform .16s ease; }
.nav-more[open] .nav-chevron { transform: rotate(180deg); }
.nav-more-items { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; padding-left: 14px; }
.nav-sub-link { min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
.nav-sub-link .nav-icon { width: 18px; height: 18px; flex-basis: 18px; }
.sidebar-footer { margin-top: auto; padding-top: 18px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 10px; color: white; }
.user-card:hover { background: var(--sidebar-hover); }
.user-card strong, .user-card small { display: block; max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card small { color: #98a2b3; margin-top: 2px; }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; background: #dfe6ff; color: #2546b8; font-weight: 800; }
.logout-btn { width: 100%; border: 0; color: #aeb8c7; background: transparent; text-align: left; padding: 8px 10px; cursor: pointer; }
.logout-btn:hover { color: white; }
.app-version-tag { padding: 2px 10px 0; font-size: 11px; color: #5f6b81; }
.main { min-width: 0; }
.topbar { height: 68px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px; padding: 0 28px; position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); }
.topbar-title strong, .topbar-title small { display: block; }
.topbar-title small { color: var(--muted); margin-top: 2px; }
.global-search { height: 42px; flex: 1; max-width: 680px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-soft); }
.global-search span { color: var(--muted); font-size: 18px; }
.global-search input { border: 0; outline: 0; padding: 0; background: transparent; width: 100%; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.quick-add { background: var(--brand); color: white; padding: 10px 14px; border-radius: 9px; font-weight: 750; }
.quick-add:hover { background: var(--brand-dark); }
.topbar-user { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; }
.small-avatar { width: 32px; height: 32px; flex-basis: 32px; }
.icon-btn { border: 0; background: transparent; cursor: pointer; font-size: 22px; color: inherit; }
.menu-btn, .sidebar-close { display: none; }
.content { padding: 28px; max-width: 1560px; margin: 0 auto; }
.admin-workspace-banner { margin: -6px 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #202d4e; color: white; border-radius: 11px; padding: 11px 14px; }
.page-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.page-header h1 { margin: 0; font-size: 29px; letter-spacing: -.03em; }
.page-header p, .page-header .muted { margin-top: 6px; }
.eyebrow { color: var(--brand); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 20px; margin-bottom: 18px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.card-head h2, .card h2, .card h3 { margin: 0; }
.card h2 { font-size: 18px; }
.card h3 { font-size: 15px; }
.card-subtitle { color: var(--muted); margin: 4px 0 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Pielāgotie lauki (settings/custom-fields): "Jauns lauks" and "Esošie lauki" side by side in
   .grid-2 squeezed the existing-fields table (6 columns) into half the page width on laptop-size
   screens (fine on ultra-wide desktops, cramped with a horizontal scrollbar on ~1440px laptops).
   Stack them full-width instead -- DOM order already puts "Jauns lauks" first, so this alone puts
   it on top with "Esošie lauki" below, at every viewport width. Scoped to this page's grid only,
   the shared .grid-2 utility elsewhere is unaffected. */
.settings-top-grid { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stat-label { color: var(--muted); font-weight: 650; }
.stat-value { font-size: 29px; line-height: 1; font-weight: 850; letter-spacing: -.04em; margin: 9px 0 5px; }
.stat-note { font-size: 12px; color: var(--muted); }
.stat-icon { position: absolute; right: 15px; top: 15px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 900; }
.ui-icon { width: 19px; height: 19px; display: block; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-icon .ui-icon { width: 18px; height: 18px; }
.quick-actions { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.quick-action { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 13px; padding: 14px; display: flex; align-items: center; gap: 11px; color: var(--text); box-shadow: 0 3px 12px rgba(20,31,56,.04); }
.quick-action:hover { border-color: #b7c5ff; transform: translateY(-1px); }
.quick-action-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.quick-action-icon .ui-icon { width: 20px; height: 20px; }
.quick-action-copy { min-width: 0; display: block; }
.quick-action-copy strong, .quick-action-copy small { display: block; }
.quick-action-copy strong { color: var(--text); font-weight: 800; line-height: 1.25; }
.quick-action-copy small { color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: 3px; }
.dashboard-shortcuts .quick-action:first-child { border-color: #efc2c6; background: #fffafb; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); background: #fafbfc; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcff; }
.row-title { color: var(--text); font-weight: 750; }
/* Work-order positions table: give short columns (product code/unit/discount/VAT) less room so
   the description column and the Labot/Dzēst actions column both get more breathing space. */
.positions-table th.col-narrow, .positions-table td.col-narrow { width: 72px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.positions-table .col-actions { white-space: nowrap; }
.positions-table .col-actions .actions { flex-wrap: nowrap; }
/* The general .btn safety rule (further below) intentionally allows buttons to wrap/break in
   cramped mobile contexts -- but "Labot"/"Dzēst" here are short, fixed labels in a table cell
   that now has the room to fit them on one line, and mid-word breaking reads as broken, not
   responsive. Scope a stricter override to just this column so nothing else is affected. */
.positions-table .col-actions .btn { white-space: nowrap; overflow-wrap: normal; min-width: max-content; }
.amount { text-align: right; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: var(--brand-soft); color: #3152bf; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: #eef0f4; color: #596274; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; font-weight: 750; color: var(--text); background: white; }
.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { border-color: #d8dce5; color: #364153; }
.btn-secondary:hover { background: #f7f8fa; }
.btn-dark { background: white; color: #172033; min-height: 34px; }
.btn-danger { background: var(--danger-soft); border-color: #ffd0d0; color: var(--danger); }
.btn-success { background: var(--success-soft); border-color: #b8e7cf; color: var(--success); }
.btn-sm { min-height: 33px; padding: 6px 10px; font-size: 12px; }
form.inline { display: inline-flex; align-items: center; gap: 7px; }
.inline-edit-input { width: 100%; min-width: 140px; padding: 7px 9px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.inline-edit-input:focus { outline: none; border-color: var(--accent, #9f1239); }
/* Phase 2, item 4 -- WordPress embed snippet (settings.html "Iegult mājaslapā"). */
.embed-snippet-textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8f9fb; color: #172033; resize: vertical; }
.embed-snippet-textarea:focus { outline: none; border-color: var(--accent, #9f1239); }
.custom-field-value textarea { min-height: 60px; }
.form-card { max-width: 920px; }
.form-section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.form-section:last-child { border: 0; margin-bottom: 0; }
.form-section-title { margin-bottom: 14px; }
.form-section-title h2 { margin: 0; font-size: 17px; }
.form-section-title p { margin: 4px 0 0; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: 12px; font-weight: 750; margin-bottom: 6px; color: #3d4758; }
input, select, textarea { width: 100%; min-height: 41px; padding: 9px 11px; border: 1px solid #d6dae3; border-radius: 9px; background: white; color: var(--text); outline: 0; }
input:focus, select:focus, textarea:focus { border-color: #8ea5ff; box-shadow: 0 0 0 3px rgba(41,86,232,.10); }
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"] { width: auto; min-height: auto; }
.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.field-help { color: var(--muted); font-size: 11px; margin-top: 5px; }
/* Search-as-you-type picker replacing a plain <select> for customer/vehicle fields -- a text
   input the user can type into, a hidden input holding the actual id that gets submitted, and a
   floating results panel positioned under the input. */
.autocomplete { position: relative; }
.autocomplete-input.is-invalid { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.autocomplete-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; max-height: 260px; overflow-y: auto; background: white; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 28px rgba(24,35,55,.14); padding: 4px; }
.autocomplete-option { display: block; width: 100%; text-align: left; min-height: auto; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.autocomplete-option:hover, .autocomplete-option.is-active { background: var(--brand-soft); color: var(--brand-dark); }
.autocomplete-empty { padding: 9px 10px; font-size: 12px; color: var(--muted); }
.settings-subheading { margin: 18px 0 4px; font-size: 14px; }
.invoice-number-preview-row { margin-top: 10px; font-size: 13px; }
.invoice-number-preview-row strong { color: var(--text); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.placeholder-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.placeholder-picker-label { color: var(--muted); font-size: 12px; font-weight: 700; margin-right: 2px; }
.search-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; padding: 12px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.search-row input { min-width: 250px; flex: 1; }
.search-row select { width: auto; min-width: 170px; }
.tabs { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 16px; }
.tab { color: var(--muted); padding: 8px 12px; border-radius: 8px; white-space: nowrap; font-weight: 700; }
.tab:hover { background: white; }
.tab.active { color: var(--brand); background: var(--brand-soft); }
.empty-state { text-align: center; padding: 34px 20px; color: var(--muted); }
.empty-state strong { color: var(--text); display: block; margin-bottom: 5px; }

/* v7.0 -- customer saved-address list (Settings/customer detail). */
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plain-list-item:last-child { border-bottom: none; }
.row-active { background: rgba(159, 18, 57, 0.06); }
.flash { display: flex; gap: 9px; align-items: center; padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; background: var(--success-soft); color: #126441; border: 1px solid #b8e7cf; }
.flash > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #cdf0dd; font-weight: 900; }
.flash.error { background: var(--danger-soft); color: #9f2d2d; border-color: #ffd0d0; }
.flash.error > span { background: #ffd7d7; }
.detail-list { display: grid; grid-template-columns: 180px 1fr; gap: 10px 14px; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 600; }
.timeline { display: flex; flex-direction: column; }
.timeline-row { display: grid; grid-template-columns: 70px 10px 1fr auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.timeline-row:last-child { border: 0; }
.timeline-time { font-weight: 800; }
.timeline-line { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-top: 5px; box-shadow: 0 0 0 4px var(--brand-soft); }
.timeline-main strong, .timeline-main small { display: block; }
.timeline-main small { color: var(--muted); margin-top: 3px; }
/* Task history feed (Phase 3, item 6): system-generated activity entries (status changes,
   attachments, work-order links) are visually de-emphasised next to user-typed comments. */
.timeline-row.is-activity .timeline-line { background: var(--muted); box-shadow: 0 0 0 4px var(--line); }
.timeline-row.is-activity .timeline-main strong { color: var(--muted); font-weight: 600; }
.timeline-row.is-activity .timeline-main p { color: var(--muted); font-style: italic; margin: 2px 0 0; }
.workflow-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.workflow-column { background: #f4f6fa; border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 170px; }
.workflow-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; font-weight: 800; font-size: 12px; }
.count-pill { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: white; color: var(--muted); }
.job-card { display: block; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 11px; margin-bottom: 8px; color: var(--text); box-shadow: 0 2px 7px rgba(20,31,56,.04); }
.job-card:hover { border-color: #aebeff; }
.job-card strong { display: block; }
.job-card small { display: block; color: var(--muted); margin-top: 3px; }
.job-card .job-total { margin-top: 9px; color: var(--text); font-weight: 800; }
/* Uzdevumi Kanban board: 8 fixed status columns, HTML5 drag-and-drop cards (see the
   [data-kanban-board] script in app.js). Deliberately reuses .workflow-board/.count-pill's
   layout conventions rather than inventing a second board pattern. */
.kanban-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.kanban-column { background: #f4f6fa; border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 170px; }
.kanban-column-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; font-weight: 800; font-size: 12px; }
.kanban-column-body { min-height: 60px; border-radius: 8px; transition: background-color .12s ease; }
.kanban-column-body.is-drop-target { background: #e8edff; }
.kanban-card { display: block; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 11px; margin-bottom: 8px; color: var(--text); box-shadow: 0 2px 7px rgba(20,31,56,.04); cursor: grab; }
.kanban-card:hover { border-color: #aebeff; }
.kanban-card.is-dragging { opacity: .4; }
.kanban-card strong { display: block; }
.kanban-card small { display: block; color: var(--muted); margin-top: 3px; }
.kanban-card.is-overdue small { color: var(--danger, #c0392b); font-weight: 700; }
.kanban-empty { padding: 10px 3px; }
@media (max-width: 720px) {
  .kanban-board { grid-auto-columns: minmax(200px, 85vw); }
}
.alert-list { display: flex; flex-direction: column; }
.alert-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.alert-row:last-child { border: 0; }
.service-card-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.service-card { background: white; border: 1px solid var(--line); border-radius: 13px; padding: 17px; box-shadow: var(--shadow); color: var(--text); }
.service-card:hover { border-color: #b7c5ff; }
.service-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.service-card h3 { margin: 0; font-size: 16px; }
.service-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.service-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.service-metric { background: var(--panel-soft); border-radius: 9px; padding: 9px; }
.service-metric strong, .service-metric small { display: block; }
.service-metric small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 18px; align-items: start; }
.sticky-card { position: sticky; top: 88px; }
.accordion { border: 1px solid var(--line); border-radius: 11px; margin-bottom: 9px; background: white; overflow: hidden; }
.accordion summary { cursor: pointer; list-style: none; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 750; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion-body { padding: 0 15px 15px; border-top: 1px solid var(--line); padding-top: 15px; }
/* Smaller nested toggle for optional per-item tāme fields (unit/product code/group/stock note/
   footnote) -- reuses the accordion look but scaled down so it doesn't compete visually with the
   main accordion it's nested inside (the "＋ Pievienot pozīciju" form, or the per-row cost form). */
.accordion-nested { grid-column: 1 / -1; border-radius: 8px; margin: 4px 0 0; }
.accordion-nested summary { padding: 7px 10px; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.accordion-nested .accordion-body { padding: 8px 10px 10px; }
/* Inside the compact per-row cost form there are no <label>s, so lay the extra fields out as a
   plain wrapping row of inputs instead of the labelled .form-grid used in the full add-item form. */
.inline-cost-form .accordion-nested .accordion-body { display: flex; flex-wrap: wrap; gap: 6px; }
.inline-cost-form .accordion-nested .accordion-body input { min-width: 0; padding: 7px 8px; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, 520px) 1fr; background: white; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 42px; }
.login-card { width: 100%; max-width: 390px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 42px; }
.login-card h1 { font-size: 32px; letter-spacing: -.04em; margin: 0 0 8px; }
.login-card > p { margin: 0 0 25px; }
.login-visual { background: linear-gradient(145deg, #111a2e, #233e94); color: white; display: flex; align-items: center; justify-content: center; padding: 60px; }
.login-visual-content { max-width: 620px; }
.login-visual h2 { font-size: 42px; line-height: 1.12; letter-spacing: -.04em; margin: 0 0 18px; }
.login-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 35px; }
.login-feature { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 15px; }
.public-page { max-width: 980px; margin: 30px auto; padding: 0 18px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.photo-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: white; }
.photo-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.photo-card .body { padding: 10px; }
.print-only { display: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.mobile-overlay { display: none; }
@media (max-width: 1200px) {
  .quick-actions { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .service-card-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split-layout { grid-template-columns: 1fr; }
  .sticky-card { position: static; }
}
@media (max-width: 940px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: 270px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(0,0,0,.2); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .mobile-overlay { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(5,10,20,.5); }
  .menu-btn, .sidebar-close { display: inline-grid; place-items: center; }
  .topbar { padding: 0 18px; }
  .global-search { max-width: none; }
  .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quick-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
}
@media (max-width: 680px) {
  .content { padding: 18px 14px; }
  .topbar { height: 62px; gap: 10px; }
  .global-search { display: none; }
  .topbar-title small, .desktop-only { display: none; }
  .quick-add { padding: 9px 10px; font-size: 12px; }
  .page-header { flex-direction: column; }
  .page-header h1 { font-size: 25px; }
  .grid-2, .grid-3, .grid-4, .grid-5, .form-grid, .form-grid.grid-3 { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .service-card-list { grid-template-columns: 1fr; }
  .search-row { align-items: stretch; }
  .search-row input, .search-row select { width: 100%; min-width: 0; }
  .detail-list { grid-template-columns: 1fr; }
  .timeline-row { grid-template-columns: 55px 8px 1fr; }
  .timeline-row > :last-child { grid-column: 3; }
  .admin-workspace-banner { align-items: flex-start; flex-direction: column; }
  .login-panel { padding: 25px; }
}
@media print {
  .sidebar, .topbar, .no-print, .flash { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 0; }
  .print-only { display: block; }
}
.status-steps { display: grid; grid-template-columns: repeat(6, minmax(120px,1fr)); gap: 7px; overflow-x: auto; margin-bottom: 18px; }
.status-step { min-width: 120px; position: relative; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.status-step.done { background: var(--success-soft); color: var(--success); border-color: #b8e7cf; }
.status-step.current { background: var(--brand); color: white; border-color: var(--brand); }
.order-summary { background: #172033; color: white; border-radius: 13px; padding: 18px; }
.order-summary .summary-line { display:flex; justify-content:space-between; gap:12px; padding:7px 0; color:#c7cfdd; }
.order-summary .summary-total { display:flex; justify-content:space-between; gap:12px; padding-top:13px; margin-top:9px; border-top:1px solid #344056; font-size:20px; font-weight:850; color:white; }
.section-nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.section-nav a { color:var(--muted); background:white; border:1px solid var(--line); padding:7px 10px; border-radius:8px; font-weight:700; }
.order-meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.order-meta-item { background:var(--panel-soft); border-radius:10px; padding:11px; }
.order-meta-item small,.order-meta-item strong { display:block; }
.order-meta-item small { color:var(--muted); margin-bottom:4px; }
@media (max-width:900px){.order-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.order-meta-grid{grid-template-columns:1fr;}}

/* Simplified mechanic workspace */
.mechanic-body { margin: 0; min-height: 100vh; background: #f3f5f8; color: #172033; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.mechanic-topbar { min-height: 72px; padding: 0 28px; background: #172033; color: white; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mechanic-brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; }
.mechanic-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: white; color: #172033; font-weight: 900; }
.mechanic-brand strong, .mechanic-brand small { display: block; }
.mechanic-brand small { opacity: .65; margin-top: 2px; font-size: 11px; }
.mechanic-user { display: flex; align-items: center; gap: 16px; font-weight: 700; }
.mechanic-exit-link { color: white; text-decoration: none; font-weight: 750; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 9px 14px; white-space: nowrap; }
.mechanic-exit-link:hover { background: rgba(255,255,255,.08); }
.mechanic-logout { border: 1px solid rgba(255,255,255,.25); background: transparent; color: white; border-radius: 10px; padding: 9px 14px; cursor: pointer; font-weight: 750; }
.mechanic-main { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 54px; }
.mechanic-flash { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: #dcf7e8; color: #16633d; font-weight: 750; }
.mechanic-flash.error { background: #ffe6e6; color: #9d2929; }
.mechanic-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.mechanic-heading h1 { margin: 3px 0 5px; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.04em; }
.mechanic-heading p { margin: 0; color: #697386; }
.mechanic-date { color: #697386; font-size: 13px; font-weight: 800; }
.mechanic-count { min-width: 112px; background: white; border: 1px solid #e0e4eb; border-radius: 16px; padding: 16px; text-align: center; font-size: 30px; font-weight: 900; box-shadow: 0 6px 22px rgba(23,32,51,.06); }
.mechanic-count small { display: block; color: #697386; font-size: 11px; margin-top: 3px; }
.mechanic-job-list { display: flex; flex-direction: column; gap: 14px; }
.mechanic-job-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 21px; background: white; border: 1px solid #dfe4ec; border-radius: 17px; color: #172033; text-decoration: none; box-shadow: 0 5px 18px rgba(23,32,51,.05); }
.mechanic-job-card:hover { border-color: #8097ef; transform: translateY(-1px); }
.mechanic-job-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mechanic-plate { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; min-height: 48px; padding: 5px 13px; border: 3px solid #172033; border-radius: 8px; background: white; font-size: 20px; font-weight: 950; letter-spacing: .06em; white-space: nowrap; }
.mechanic-plate.large { font-size: 25px; min-width: 144px; min-height: 56px; }
.mechanic-job-card h2 { margin: 0 0 5px; font-size: 20px; }
.mechanic-job-card p { margin: 0; color: #697386; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mechanic-job-side { display: flex; min-width: 155px; flex-direction: column; align-items: flex-end; gap: 7px; }
.mechanic-job-side small { color: #697386; }
.mechanic-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 11px; background: #eef1f5; font-size: 12px; font-weight: 850; }
.status-in_progress { background: #e4ebff; color: #294ca8; }
.status-waiting_parts { background: #fff2d3; color: #8b5a00; }
.status-diagnostics { background: #eee8ff; color: #5e3bad; }
.status-ready { background: #daf6e6; color: #14643d; }
.large-status { padding: 10px 15px; font-size: 14px; }
.mechanic-empty { padding: 70px 24px; background: white; border: 1px solid #dfe4ec; border-radius: 18px; text-align: center; }
.mechanic-empty > div { width: 60px; height: 60px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; background: #daf6e6; color: #14643d; font-size: 28px; }
.mechanic-empty h2 { margin: 0 0 7px; }
.mechanic-empty p { margin: 0; color: #697386; }
.mechanic-ready-section { margin-top: 30px; }
.mechanic-ready-section h2 { font-size: 17px; }
.mechanic-ready-row { display: flex; justify-content: space-between; gap: 15px; padding: 13px 15px; margin-top: 8px; background: rgba(255,255,255,.7); border-radius: 11px; color: #697386; }
.mechanic-back { display: inline-block; margin-bottom: 20px; color: #40547c; text-decoration: none; font-weight: 800; }
.mechanic-job-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.mechanic-job-header > div { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mechanic-job-header h1 { margin: 0; font-size: 28px; }
.mechanic-job-header p { width: 100%; margin: -8px 0 0 162px; color: #697386; }
.mechanic-simple-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; }
.mechanic-panel { background: white; border: 1px solid #dfe4ec; border-radius: 18px; padding: 24px; box-shadow: 0 6px 22px rgba(23,32,51,.05); }
.mechanic-panel-label { margin-bottom: 14px; color: #697386; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.mechanic-problem { font-size: 22px; line-height: 1.45; font-weight: 750; }
.mechanic-deadline { margin-top: 24px; padding-top: 17px; border-top: 1px solid #e5e8ee; color: #697386; }
.mechanic-note-label { display: block; margin-bottom: 9px; font-size: 17px; font-weight: 850; }
.mechanic-note { width: 100%; min-height: 150px; resize: vertical; border: 2px solid #dce2eb; border-radius: 13px; padding: 14px; font: inherit; box-sizing: border-box; }
.mechanic-note:focus { outline: none; border-color: #4968d8; box-shadow: 0 0 0 4px rgba(73,104,216,.11); }
.mechanic-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.mechanic-action { min-height: 54px; border: 0; border-radius: 13px; padding: 13px 16px; cursor: pointer; font-size: 15px; font-weight: 900; }
.mechanic-action:disabled { opacity: .65; cursor: wait; }
.mechanic-action.secondary { background: #edf0f5; color: #27334b; }
.mechanic-action.start { background: #294ca8; color: white; }
.mechanic-action.parts { background: #f3c85a; color: #4b3600; }
.mechanic-action.ready { background: #198754; color: white; }
.mechanic-photo-panel { margin-top: 18px; padding: 18px 24px; }
.mechanic-photo-panel summary { cursor: pointer; font-weight: 850; }
.mechanic-photo-panel form { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.mechanic-photo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mechanic-photo-list a { padding: 8px 11px; border-radius: 9px; background: #edf0f5; color: #27334b; text-decoration: none; font-weight: 700; }
@media (max-width: 760px) {
  .mechanic-topbar { padding: 0 16px; }
  .mechanic-user > span { display: none; }
  .mechanic-main { width: min(100% - 24px, 1040px); padding-top: 22px; }
  .mechanic-heading { align-items: flex-start; }
  .mechanic-count { min-width: 86px; padding: 12px; }
  .mechanic-job-card { align-items: flex-start; flex-direction: column; }
  .mechanic-job-main { align-items: flex-start; flex-direction: column; }
  .mechanic-job-side { min-width: 0; width: 100%; align-items: flex-start; }
  .mechanic-simple-grid { grid-template-columns: 1fr; }
  .mechanic-job-header { align-items: flex-start; flex-direction: column; }
  .mechanic-job-header p { margin: 4px 0 0; }
  .mechanic-actions { grid-template-columns: 1fr; }
  .mechanic-action { min-height: 60px; }
  .mechanic-photo-panel form { align-items: stretch; flex-direction: column; }
}

/* V4 customer portal, TA reminders and platform billing */
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.copy-row input { min-width: 0; }
.btn-disabled { background: #eef0f4; color: #8992a2; cursor: not-allowed; }
.danger-banner { background: #7e2828; }
.quick-action { position: relative; }
.quick-badge { margin-left: auto; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: #fff0cf; color: #835600; font-size: 11px; }
.public-message-card { text-align: center; max-width: 560px; }
.public-message-card .btn { margin-top: 10px; }
.small-logo { width: 34px; height: 34px; font-size: 12px; }

.client-portal-body { background: #f3f5f8; color: #172033; }
.client-portal-wrap { width: min(1040px, calc(100% - 28px)); margin: 0 auto; }
.client-portal-header { background: #172033; color: white; padding: 15px 0; }
.client-portal-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.client-portal-head-inner > div:first-child { display: flex; align-items: center; gap: 10px; }
.client-contact { display: flex; gap: 14px; flex-wrap: wrap; }
.client-contact a { color: white; opacity: .85; }
.client-welcome { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 38px 0 22px; }
.client-welcome h1 { margin: 3px 0 7px; font-size: clamp(28px, 5vw, 42px); }
.client-welcome p { margin: 0; color: #697386; }
.client-today { background: white; border: 1px solid #dfe4ec; padding: 12px 16px; border-radius: 12px; font-weight: 800; }
.client-section { margin-bottom: 24px; }
.client-section > h2 { font-size: 19px; margin: 0 0 12px; }
.client-order-list { display: grid; gap: 14px; }
.client-order-card { background: white; border: 1px solid #dfe4ec; border-radius: 18px; padding: 22px; box-shadow: 0 5px 18px rgba(23,32,51,.05); }
.client-order-card.is-active { border-left: 5px solid #2956e8; }
.client-order-top { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.client-order-top > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.client-order-top h3 { margin: 0; }
.client-order-top small { width: 100%; color: #697386; margin-left: 105px; }
.client-plate { display: inline-flex; align-items: center; justify-content: center; min-width: 94px; min-height: 42px; border: 3px solid #172033; border-radius: 7px; background: white; font-size: 17px; font-weight: 950; letter-spacing: .05em; }
.client-progress { display: grid; grid-template-columns: repeat(7, minmax(80px,1fr)); overflow-x: auto; gap: 4px; margin: 22px 0; }
.client-progress-step { min-width: 80px; text-align: center; color: #98a2b3; font-size: 10px; font-weight: 800; }
.client-progress-step span { display: block; height: 5px; border-radius: 999px; background: #e4e7ec; margin-bottom: 7px; }
.client-progress-step.done { color: #3152bf; }
.client-progress-step.done span { background: #5f7cf0; }
.client-order-info { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.client-order-info > div { background: #f8f9fb; border-radius: 11px; padding: 13px; }
.client-order-info strong { display: block; margin-bottom: 5px; }
.client-order-info p { margin: 0; color: #5f697a; line-height: 1.45; }
.client-success-note { display: inline-flex; padding: 9px 12px; border-radius: 9px; background: #ebf8f1; color: #18794e; font-weight: 800; }
.client-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.client-two-column .client-section { background: white; border: 1px solid #dfe4ec; border-radius: 16px; padding: 20px; }
.client-list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #e8ebf0; }
.client-list-row:last-child { border-bottom: 0; }
.client-list-row strong, .client-list-row small { display: block; }
.client-list-row small { margin-top: 4px; color: #697386; }
.client-invoice-amount { text-align: right; }
.client-invoice-amount .badge { margin-top: 5px; }
.client-empty { background: white; border: 1px solid #dfe4ec; border-radius: 18px; padding: 50px 22px; text-align: center; margin-bottom: 24px; }
.client-empty > div { width: 56px; height: 56px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: #daf6e6; color: #14643d; font-size: 25px; }
.client-footer { padding: 24px; text-align: center; color: #7c8697; font-size: 12px; }

.ta-card { padding: 0; overflow: hidden; }
.ta-card-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px; }
.ta-vehicle { display: flex; align-items: center; gap: 15px; }
.ta-vehicle h2, .ta-vehicle p { margin: 0; }
.ta-vehicle p { margin-top: 4px; color: #687386; }
.ta-due { min-width: 150px; text-align: right; }
.ta-due small, .ta-due strong, .ta-due span { display: block; }
.ta-due strong { font-size: 20px; margin: 3px 0; }
.ta-due span { color: #9a6500; font-weight: 750; }
.ta-due.overdue span { color: #c93636; }
.ta-message-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; background: #f7f9fc; border-top: 1px solid #e6e9ef; border-bottom: 1px solid #e6e9ef; }
.ta-message-box p { margin: 5px 0 0; line-height: 1.5; color: #596274; }
.ta-actions-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; padding: 20px; }
.ta-actions-grid > form + form { border-left: 1px solid #e6e9ef; padding-left: 22px; }
.ta-dismiss-form { padding: 0 20px 16px; text-align: right; }
.link-button { border: 0; background: none; color: #7d8797; cursor: pointer; text-decoration: underline; }
.small-stat { font-size: 20px; }

/* Expanded mechanic screen */
.mechanic-primary-task { margin-bottom: 18px; }
.compact-note { min-height: 90px; }
.mechanic-input { width: 100%; min-height: 48px; border: 2px solid #dce2eb; border-radius: 12px; padding: 10px 13px; }
.mechanic-status-panel, .mechanic-billing-panel { margin-top: 18px; }
.expanded-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.mechanic-action.diagnostic { background: #eee8ff; color: #5e3bad; }
.mechanic-action.approval { background: #fff0cf; color: #805300; }
.mechanic-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.mechanic-section-head h2 { margin: 0; }
.mechanic-total { text-align: right; }
.mechanic-total small, .mechanic-total strong { display: block; }
.mechanic-total small { color: #697386; }
.mechanic-total strong { font-size: 24px; }
.mechanic-items-list { border: 1px solid #e1e5ec; border-radius: 13px; overflow: hidden; }
.mechanic-item-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; border-bottom: 1px solid #e6e9ef; }
.mechanic-item-row:last-of-type { border-bottom: 0; }
.mechanic-item-row small { display: block; margin-top: 4px; color: #697386; }
.mechanic-item-row > div:last-child { display: flex; align-items: center; gap: 8px; }
.mechanic-delete { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #ffe7e7; color: #a82d2d; cursor: pointer; }
.mechanic-item-actions { display: flex; align-items: center; gap: 8px; }
.mechanic-item-edit-toggle { min-height: 28px; padding: 0 10px; font-size: 13px; }
.mechanic-item-edit-row { padding: 16px 15px; border-bottom: 1px solid #e6e9ef; background: #f8fafc; }
.mechanic-item-edit-row:last-of-type { border-bottom: 0; }
.mechanic-item-edit-row .mechanic-item-form-v58 { grid-column: 1 / -1; }
.mechanic-item-edit-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; grid-column: 1 / -1; }
.mechanic-empty-small { padding: 18px; border-radius: 12px; background: #f7f8fa; color: #697386; }
.mechanic-details { margin-top: 14px; }
.mechanic-details summary { cursor: pointer; font-weight: 850; }
.mechanic-item-form { display: grid; grid-template-columns: 120px minmax(180px,1fr) 90px 130px 90px auto; gap: 8px; margin-top: 12px; }
.mechanic-item-form input, .mechanic-item-form select, .mechanic-invoice-form input { min-height: 48px; border: 1px solid #dce2eb; border-radius: 10px; padding: 9px 11px; min-width: 0; }
.mechanic-item-form .mechanic-action { min-height: 48px; }
.mechanic-invoice-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 17px; border-radius: 14px; background: #172033; color: white; }
.mechanic-invoice-box strong, .mechanic-invoice-box small { display: block; }
.mechanic-invoice-box small { margin-top: 4px; color: #b8c0ce; }
.mechanic-invoice-form { display: flex; align-items: center; gap: 8px; }
.mechanic-invoice-form label { font-size: 12px; white-space: nowrap; color: #cbd2de; }
.mechanic-invoice-form label input { width: 68px; min-height: 42px; margin-left: 4px; }
.mechanic-invoice-form > input { min-height: 42px; }
.invoice-action { display: inline-flex; align-items: center; justify-content: center; background: white; color: #172033; text-decoration: none; white-space: nowrap; }
.mechanic-invoice-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.mechanic-invoice-header h1 { margin: 2px 0; }
.mechanic-invoice-header p { margin: 0 0 18px; color: #697386; }
.mechanic-invoice-sheet { background: white; border: 1px solid #dfe4ec; border-radius: 18px; padding: 30px; }
.mechanic-invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mechanic-invoice-parties small, .mechanic-invoice-parties strong { display: block; }
.mechanic-invoice-parties strong { margin: 5px 0; font-size: 18px; }
.mechanic-invoice-parties p { color: #697386; line-height: 1.5; }
.mechanic-invoice-meta { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 0; margin: 14px 0; border-top: 1px solid #e6e9ef; border-bottom: 1px solid #e6e9ef; }
.mechanic-invoice-totals { margin-left: auto; width: min(330px,100%); padding-top: 18px; }
.mechanic-invoice-totals span { display: flex; justify-content: space-between; padding: 7px 0; }
.mechanic-invoice-totals .grand-total { border-top: 2px solid #172033; margin-top: 6px; padding-top: 12px; font-size: 19px; }

@media (max-width: 900px) {
  .client-order-info, .client-two-column, .ta-actions-grid { grid-template-columns: 1fr; }
  .ta-actions-grid > form + form { border-left: 0; border-top: 1px solid #e6e9ef; padding: 18px 0 0; }
  .mechanic-item-form { grid-template-columns: 1fr 1fr; }
  .mechanic-item-form input[name="description"] { grid-column: 1 / -1; }
  .mechanic-invoice-box, .mechanic-invoice-form { align-items: stretch; flex-direction: column; }
  .mechanic-invoice-form > * { width: 100%; }
}
@media (max-width: 650px) {
  .client-portal-head-inner, .client-welcome, .client-order-top, .ta-card-top, .ta-message-box { align-items: flex-start; flex-direction: column; }
  .client-contact { display: none; }
  .client-order-top small { margin-left: 0; }
  .ta-due { text-align: left; }
  .expanded-actions, .mechanic-invoice-parties { grid-template-columns: 1fr; }
  .copy-row { grid-template-columns: 1fr; }
}
@media print {
  .mechanic-topbar, .mechanic-back, .mechanic-invoice-header .mechanic-action { display: none !important; }
  .mechanic-main { width: 100%; padding: 0; }
  .mechanic-invoice-sheet { border: 0; box-shadow: none; }
}
.portal-inline-box { margin-top: 13px; padding: 12px; border-radius: 10px; background: #f7f9fc; border: 1px solid #e3e7ee; }
.mechanic-status-control { display: grid; grid-template-columns: auto minmax(220px,1fr) auto; gap: 10px; align-items: stretch; }
.mechanic-status-control select { min-height: 54px; border: 2px solid #dce2eb; border-radius: 13px; padding: 10px 13px; background: white; font-weight: 750; }
@media (max-width: 700px) { .mechanic-status-control { grid-template-columns: 1fr; } }

/* V4.1 - single-repair public progress page */
.progress-page-body{margin:0;background:#f3f5f8;color:#172033;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
.progress-page-shell{width:min(760px,calc(100% - 28px));margin:0 auto;padding:24px 0 40px}
/* Phase 2, item 4 -- WordPress iframe embed (?embed=1): no outer page chrome or background,
   since the parent site's own page already provides that around the iframe. The iframe is
   sized to fit exactly (see app.js's postMessage height reporting), so min-height isn't needed. */
.progress-page-embed{background:transparent;min-height:0}
.progress-page-embed .progress-page-shell{width:100%;padding:4px 4px 12px}
.progress-service-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:4px 2px}
.progress-brand-mark{width:46px;height:46px;border-radius:14px;background:#172033;color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:.04em}
.progress-service-header strong{font-size:17px}.progress-service-contacts{display:flex;gap:12px;margin-top:3px;font-size:13px}.progress-service-contacts a{color:#5d6678;text-decoration:none}
.progress-hero-card,.progress-info-card,.progress-help-card{background:#fff;border:1px solid #e4e8ef;box-shadow:0 10px 34px rgba(24,35,55,.06)}
.progress-hero-card{border-radius:24px;padding:28px}.progress-kicker{font-size:12px;font-weight:800;letter-spacing:.14em;color:#667085;margin-bottom:18px}
.progress-vehicle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.progress-plate{display:inline-block;padding:7px 12px;border:2px solid #172033;border-radius:8px;background:#fff;font-size:21px;font-weight:900;letter-spacing:.08em}.progress-vehicle-row h1{margin:12px 0 3px;font-size:28px}.progress-vehicle-row p{margin:0;color:#737d90}.progress-percent{font-size:34px;font-weight:900;color:#1864d9}
.progress-main-status{margin-top:26px;font-size:20px;font-weight:800}.progress-track{height:13px;border-radius:999px;background:#e8edf4;overflow:hidden;margin-top:10px}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1864d9,#4f8df7);transition:width .3s ease}
.progress-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:20px}.progress-timeline-step{text-align:center;color:#9aa3b2;position:relative}.progress-timeline-step span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin:0 auto 7px;background:#edf0f4;color:#8b94a3;font-weight:800;font-size:13px}.progress-timeline-step small{font-size:11px;font-weight:700}.progress-timeline-step.is-done{color:#1864d9}.progress-timeline-step.is-done span{background:#e8f1ff;color:#1864d9}
.progress-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.progress-info-card{border-radius:18px;padding:20px;min-height:112px}.progress-info-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7c8698;margin-bottom:9px}.progress-info-card p{margin:0;line-height:1.55;white-space:pre-wrap}.progress-message-card{grid-column:1/-1;border-left:4px solid #1864d9}.progress-important{font-weight:750}.progress-muted{color:#7c8698}
.progress-help-card{margin-top:14px;border-radius:18px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.progress-help-card p{margin:5px 0 0;color:#697386}.progress-call-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;background:#172033;color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}.progress-footer{text-align:center;color:#8a93a3;font-size:12px;line-height:1.6;padding:24px 10px 0}
@media(max-width:620px){.progress-page-shell{width:min(100% - 20px,760px);padding-top:14px}.progress-hero-card{padding:22px 18px;border-radius:20px}.progress-vehicle-row h1{font-size:23px}.progress-percent{font-size:27px}.progress-info-grid{grid-template-columns:1fr}.progress-message-card{grid-column:auto}.progress-timeline-step small{font-size:9px}.progress-timeline-step span{width:27px;height:27px}.progress-help-card{align-items:stretch;flex-direction:column}.progress-call-button{width:100%}.progress-service-contacts{flex-direction:column;gap:2px}}
.mechanic-link-row{display:flex;gap:10px;align-items:center}.mechanic-link-row .mechanic-input{flex:1}.mechanic-hint{display:block;margin-top:9px;color:#778195;line-height:1.4}
@media(max-width:620px){.mechanic-link-row{align-items:stretch;flex-direction:column}}


/* V5 red visual system, logos, calendar and safer status controls */
.brand-with-logo { width: 100%; }
.brand-logo-shell { width: 100%; min-height: 43px; display: flex; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.16); overflow: hidden; }
.brand-logo { display: block; width: 100%; height: 27px; object-fit: contain; object-position: left center; }
.platform-wordmark-link { width: 100%; text-decoration: none; }
.platform-wordmark-shell { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.16); overflow: hidden; }
.platform-wordmark { display: block; color: #0a2748; font-size: 24px; line-height: 1; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }

.mechanic-logo-shell { width: 150px; height: 43px; display: flex; align-items: center; padding: 7px 10px; background: #fff; border-radius: 11px; }
.mechanic-logo { width: 100%; height: 24px; object-fit: contain; }
.login-logo-shell { width: 220px; max-width: 100%; display: flex; align-items: center; }
.login-logo { width: 100%; height: auto; display: block; }
.login-brand { align-items: flex-start; flex-direction: column; gap: 8px; }
.workspace-label { color: #ff8c94; }
.nav-link.active { background: linear-gradient(90deg, #6e151e, #42131a); box-shadow: inset 3px 0 0 #ff616b; }
.nav-link.active .nav-icon { color: #ff8c94; }
.admin-card { background: linear-gradient(135deg, #4b151c, #251015); }
.avatar { background: #ffe0e3; color: #a9111b; }
.quick-action:hover, .service-card:hover, .job-card:hover { border-color: #ef9da4; }
input:focus, select:focus, textarea:focus { border-color: #e36670; box-shadow: 0 0 0 3px rgba(213,31,42,.11); }
.mechanic-body { background: radial-gradient(circle at top right, #fff0f1 0, #f5f6f8 38%, #f3f4f7 100%); }
.mechanic-topbar { background: linear-gradient(100deg, #1c0d10, #5d141d); box-shadow: 0 4px 18px rgba(67,12,19,.2); }
.mechanic-job-card:hover { border-color: #e27c85; box-shadow: 0 10px 25px rgba(104,19,28,.1); }
.mechanic-note:focus { border-color: #d51f2a; box-shadow: 0 0 0 4px rgba(213,31,42,.1); }
.mechanic-action.start { background: #d51f2a; }
.mechanic-action.start:hover { background: #a9111b; }
.mechanic-back { color: #a9111b; }
.mechanic-invoice-box { background: linear-gradient(110deg, #1b0d10, #5a141c); }
.status-in_progress { background: #ffe5e7; color: #a9111b; }
.status-diagnostics { background: #f7e8eb; color: #81202a; }
.client-order-card.is-active { border-left-color: #d51f2a; }
.client-portal-header { background: linear-gradient(100deg, #1b0d10, #5f151e); }
.progress-percent, .progress-timeline-step.is-done { color: #d51f2a; }
.progress-page-body .progress-track span { background: linear-gradient(90deg, #a9111b, #ed4d58); }
.progress-timeline-step.is-done span { background: #ffe8ea; color: #d51f2a; }
.progress-message-card { border-left-color: #d51f2a; }

.btn-undo { background: #fff7e1; border-color: #f0cf75; color: #7a5000; }
.btn-undo:hover { background: #ffefbf; }
.status-undo-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 14px; padding: 12px 14px; border: 1px solid #f0cf75; border-radius: 13px; background: #fff9e8; color: #704c00; font-weight: 750; }
.undo-action { min-height: 42px; background: #fff; color: #704c00; border: 1px solid #e4c264; white-space: nowrap; }
.ready-row-actions { display: flex; align-items: center; gap: 10px; }
.mechanic-undo-small { border: 1px solid #e4c264; border-radius: 8px; background: #fff9e8; color: #704c00; padding: 6px 9px; cursor: pointer; font-weight: 800; }

.mechanic-total-grid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mechanic-total-grid span { min-width: 112px; padding: 9px 12px; border-radius: 11px; background: #f6f7f9; text-align: right; }
.mechanic-total-grid small, .mechanic-total-grid strong { display: block; }
.mechanic-total-grid small { color: #697386; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.mechanic-total-grid strong { margin-top: 3px; font-size: 17px; }
.mechanic-total-grid .gross { color: #fff; background: #d51f2a; }
.mechanic-total-grid .gross small { color: #ffd8dc; }
.vat-calculator-form { grid-template-columns: 110px minmax(190px,1fr) 90px 130px 90px minmax(280px,1.2fr) auto; }
.vat-live-result { display: grid; grid-template-columns: repeat(3,minmax(86px,1fr)); gap: 6px; align-items: stretch; }
.vat-live-result span { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 6px 9px; border-radius: 10px; background: #f6f7f9; color: #687386; font-size: 10px; font-weight: 800; }
.vat-live-result strong { color: #172033; font-size: 13px; margin-top: 2px; }
.vat-live-result .vat-gross { background: #fff0f1; color: #a9111b; }
.vat-live-result .vat-gross strong { color: #a9111b; font-size: 15px; }
.full-width-vat { margin-top: 12px; max-width: 570px; }

.service-logo-preview { min-height: 160px; display: grid; place-items: center; margin-bottom: 16px; border: 1px dashed #d6dae3; border-radius: 14px; background: #fafbfc; overflow: hidden; }
.service-logo-preview.has-logo { background: #fff; border-style: solid; }
.service-logo-preview img { width: min(360px, 86%); max-height: 125px; object-fit: contain; }
.service-logo-placeholder { text-align: center; color: #8a93a3; }
.service-logo-placeholder strong, .service-logo-placeholder span { display: block; }
.service-logo-placeholder strong { color: #3c4657; font-size: 20px; margin-bottom: 5px; }
.invoice-service-logo { display: block; width: min(280px, 80%); max-height: 100px; object-fit: contain; object-position: left center; margin-bottom: 12px; }
.mechanic-invoice-logo { display: block; max-width: 240px; max-height: 90px; object-fit: contain; object-position: left center; margin: 8px 0 10px; }
.invoice-seller-heading h1 { margin-bottom: 8px; }
/* Fix: `.invoice-logo-frame`/`.mechanic-invoice-logo-frame` were already referenced in
   mechanic_invoice.html's markup but had no CSS at all -- the logo had no actual box
   around it, just floated in the text. This gives both the admin invoice view and the
   mechanic invoice view the same bordered logo box used on the booking/status pages. */
.invoice-logo-frame { display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 46px; padding: 6px 10px; background: #fff; border: 1px solid #e4e8ef; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.invoice-logo-frame .invoice-service-logo, .invoice-logo-frame .mechanic-invoice-logo { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; object-position: center; }
.mechanic-invoice-seller-brand { display: flex; align-items: center; gap: 12px; }

.calendar-card { overflow: hidden; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; }
.calendar-toolbar h2 { font-size: 24px; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 12px; margin-bottom: 13px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.appointment-dot { background: #d51f2a; }
.work-dot { background: #172033; }
/* Per-status colors for appointment events on the calendar (matches APPOINTMENT_STATUSES keys):
   planned = new/unconfirmed, confirmed = customer confirmed, arrived = in progress at the shop,
   completed = done, cancelled = inactive, no_show = missed. Legend dots reuse the same colors. */
.appointment-dot--planned { background: #2f6fed; }
.appointment-dot--confirmed { background: #1f9d55; }
.appointment-dot--arrived { background: #e08a1e; }
.appointment-dot--completed { background: #0d9488; }
.appointment-dot--cancelled { background: #94a3b8; }
.appointment-dot--no_show { background: #d5313a; }
.month-calendar { display: grid; grid-template-columns: repeat(7, minmax(120px,1fr)); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; background: var(--line); gap: 1px; }
.calendar-weekday { min-width: 120px; padding: 9px 10px; background: #f6f7f9; color: #697386; text-align: center; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.calendar-day { min-width: 120px; min-height: 142px; padding: 9px; background: #fff; }
.calendar-day.outside-month { background: #fafafa; color: #a8afbb; }
.calendar-day.today { box-shadow: inset 0 0 0 2px #d51f2a; }
.calendar-day-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-weight: 850; margin-bottom: 6px; border: 0; background: transparent; color: inherit; font-size: 13px; cursor: pointer; font-family: inherit; }
.calendar-day-number:hover { background: #f0f2f6; }
.calendar-day.today .calendar-day-number { background: #d51f2a; color: #fff; }
.calendar-day.today .calendar-day-number:hover { background: #b81a24; }
.calendar-events { display: flex; flex-direction: column; gap: 4px; }
.calendar-event { display: block; padding: 5px 6px; border-radius: 7px; color: #172033; font-size: 10px; overflow: hidden; }
.calendar-event strong, .calendar-event span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-event span { opacity: .75; margin-top: 1px; }
.appointment-event { background: #ffe8ea; border-left: 3px solid #d51f2a; }
.appointment-event--planned { background: #e8f0ff; border-left-color: #2f6fed; }
.appointment-event--confirmed { background: #e6f7ec; border-left-color: #1f9d55; }
.appointment-event--arrived { background: #fff3e0; border-left-color: #e08a1e; }
.appointment-event--completed { background: #e3f6f3; border-left-color: #0d9488; }
.appointment-event--cancelled { background: #f1f3f6; border-left-color: #94a3b8; color: #697386; text-decoration: line-through; }
.appointment-event--no_show { background: #fdeaec; border-left-color: #d5313a; }
.work-event { background: #edf0f4; border-left: 3px solid #172033; }
.calendar-more { color: #697386; padding: 2px 4px; border: 0; background: transparent; font-size: 10px; cursor: pointer; text-decoration: underline; font-family: inherit; }
.day-detail-modal .modal-body { max-height: 60vh; overflow-y: auto; }
.day-detail-modal .calendar-event { font-size: 12px; padding: 8px 9px; }
.waiting-appointment-label { display: inline-flex; margin-top: 7px; padding: 5px 8px; border-radius: 999px; background: #fff0f1; color: #a9111b; font-size: 11px; font-weight: 850; }
.appointment-actions { min-width: 240px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.appointment-actions form.inline { display: grid; grid-template-columns: 1fr auto; }
.appointment-workflow-column { background: #fff7f8; border-color: #f0c5ca; }
.appointment-job-card { border-left: 3px solid #d51f2a; }
.workflow-board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); }

.client-service-brand { display: flex; align-items: center; gap: 12px; }
.client-service-logo { width: 120px; height: 42px; object-fit: contain; object-position: left center; padding: 4px 8px; border-radius: 8px; background: #fff; }
.client-platform-logo { width: 145px; height: 34px; object-fit: contain; padding: 5px 8px; border-radius: 8px; background: #fff; }
.client-completed-invoice { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 14px; border: 1px solid #f0c5ca; border-radius: 13px; background: #fff7f8; }
.client-completed-invoice small, .client-completed-invoice strong { display: block; }
.client-completed-invoice small { color: #7b6470; margin-bottom: 3px; }
.progress-brand-mark { width: 150px; height: 46px; padding: 7px 10px; background: #fff; display: flex; align-items: center; justify-content: center; }
.progress-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.progress-service-logo { width: 150px; height: 52px; display: flex; align-items: center; justify-content: center; padding: 6px 10px; background: #fff; border: 1px solid #e4e8ef; border-radius: 12px; }
.progress-service-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Fix: these were `display:grid;place-items:center`, which on a single implicit
   auto-sized grid track resolves the img's `width/height:100%` against an
   indefinite track size in this browser, so the image kept its intrinsic aspect
   ratio and overflowed the fixed-size box instead of filling it. Flex with a
   definite container size doesn't have that ambiguity. */
.progress-invoice-card { margin-top: 14px; padding: 22px; border: 1px solid #efc8cc; border-radius: 20px; background: linear-gradient(135deg,#fff,#fff5f6); box-shadow: 0 10px 34px rgba(104,19,28,.07); }
.progress-invoice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.progress-invoice-head h2 { margin: 2px 0 3px; }
.progress-invoice-head p { margin: 0; color: #697386; }
.progress-invoice-total { text-align: right; }
.progress-invoice-total small, .progress-invoice-total strong { display: block; }
.progress-invoice-total small { color: #7c8698; }
.progress-invoice-total strong { margin-top: 4px; color: #a9111b; font-size: 28px; }
.progress-invoice-breakdown { display: flex; gap: 10px; margin-top: 16px; }
.progress-invoice-breakdown span { flex: 1; display: flex; justify-content: space-between; padding: 10px 12px; background: #fff; border: 1px solid #ece0e2; border-radius: 10px; }
.progress-invoice-lines { margin-top: 12px; }
.progress-invoice-lines summary { cursor: pointer; color: #a9111b; font-weight: 800; }
.progress-invoice-lines div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid #eee3e5; }
.progress-invoice-lines div:last-child { border-bottom: 0; }

/* The tāme (estimate) approval card lives on the same public status page as the progress
   tracker -- one link for everything the client needs -- so it gets its own blue "action
   needed" palette to stand apart from the red invoice-owed card above. */
.progress-estimate-card { margin-bottom: 14px; padding: 22px; border: 1px solid #c9dcf5; border-radius: 20px; background: linear-gradient(135deg,#fff,#f2f7ff); box-shadow: 0 10px 34px rgba(24,35,55,.07); }
.progress-estimate-card p { margin: 6px 0 0; color: #46536b; }
.progress-estimate-card form { margin-top: 4px; }
.progress-estimate-card textarea { width: 100%; margin-top: 6px; }
.progress-estimate-card .table-wrap { margin-top: 14px; }
.progress-estimate-decided { background: #fff; }

@media (max-width: 1100px) {
  .vat-calculator-form { grid-template-columns: 1fr 1fr; }
  .vat-calculator-form input[name="description"], .vat-calculator-form .vat-live-result { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .mechanic-logo-shell { width: 118px; }
  .mechanic-brand > span:last-child small { max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status-undo-banner, .calendar-toolbar, .client-completed-invoice, .progress-invoice-head { align-items: stretch; flex-direction: column; }
  .status-undo-banner .undo-action { width: 100%; }
  .mechanic-total-grid { justify-content: stretch; }
  .mechanic-total-grid span { flex: 1; min-width: 92px; text-align: left; }
  .appointment-actions { min-width: 0; width: 100%; grid-column: 3; }
  .progress-invoice-total { text-align: left; }
}
@media (max-width: 620px) {
  .vat-live-result { grid-template-columns: 1fr; }
  .client-service-brand strong { display: none; }
  .client-platform-logo, .client-service-logo { width: 125px; }
  .progress-invoice-breakdown { flex-direction: column; }
}
@media print {
  .invoice-document { border: 0; box-shadow: none; }
  .invoice-service-logo, .mechanic-invoice-logo { max-height: 75px; }
}
.login-visual { background: linear-gradient(145deg, #1b0d10, #781c27); }
.login-visual .eyebrow { color: #ffadb3 !important; }
.badge { color: #a9111b; }
.client-progress-step.done { color: #d51f2a; }
.client-progress-step.done span { background: #d51f2a; }
.admin-workspace-banner { background: linear-gradient(100deg, #2b1014, #691822); }

/* V5.1: inline customer/vehicle creation and safer button sizing. */
button, .btn, .quick-add, .quick-action {
  max-width: 100%;
}
.btn {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}
.card, .form-section, .form-grid > *, .page-header > *, .card-head > *, .actions > *, form.inline > * {
  min-width: 0;
}
form.inline {
  max-width: 100%;
  flex-wrap: wrap;
}
form.inline input, form.inline select, form.inline textarea {
  min-width: 0;
  max-width: 100%;
}
.actions {
  max-width: 100%;
}
.actions form {
  max-width: 100%;
}

.inline-add-button {
  margin-top: 13px;
}
.inline-create-panel {
  border: 1px solid #edc7cb;
  border-radius: 14px;
  background: #fffafb;
  overflow: hidden;
}
.inline-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 17px;
  border-bottom: 1px solid #f0dadd;
  background: linear-gradient(135deg, #fff2f3, #fff);
}
.inline-create-head > div,
.inline-subsection-title > div {
  min-width: 0;
}
.inline-create-head strong,
.inline-create-head span {
  display: block;
}
.inline-create-head strong {
  font-size: 16px;
}
.inline-create-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.inline-subsection {
  padding: 17px;
  border-bottom: 1px solid #f0dadd;
}
.inline-subsection:last-child {
  border-bottom: 0;
}
.inline-subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.inline-subsection-title > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inline-subsection-title strong,
.inline-subsection-title small {
  display: block;
}
.inline-subsection-title small {
  margin-top: 2px;
  color: var(--muted);
}
.inline-step {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
}
.segmented-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 100%;
}
.segmented-control .btn {
  border-color: #e0c8cb;
  background: #fff;
  color: #5c4448;
}
.segmented-control .btn.is-selected {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.form-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .inline-create-head,
  .inline-subsection-title {
    align-items: stretch;
    flex-direction: column;
  }
  .inline-create-head > .btn,
  .segmented-control,
  .segmented-control .btn {
    width: 100%;
  }
  .segmented-control {
    justify-content: stretch;
  }
  .form-actions {
    width: 100%;
  }
  .form-actions > .btn,
  .form-actions > button,
  .form-actions > form {
    width: 100%;
  }
  .form-actions > form .btn,
  .form-actions > form button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .card {
    padding: 16px;
  }
  .inline-subsection,
  .inline-create-head {
    padding: 14px;
  }
  .actions > .btn,
  .actions > button {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* V5.2 - role-focused screens, profitability and fixed VAT */
.month-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  white-space: nowrap;
}
.readonly-setting {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #f8f4f5;
}
.readonly-setting small { color: var(--muted); line-height: 1.25; }
.readonly-setting.compact { min-height: 42px; }

/* Settings page redesign (followup spec v7.3, sections 6-13): a compact "Dokumentu
   noformējums" card -- logos on the left, template/branding fields on the right -- instead of
   the old page-width logo cards. Collapses to one column on mobile, same breakpoint as the
   generic .grid-2 utility. */
.doc-design-grid { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 20px; align-items: start; }
.doc-design-logos { display: flex; flex-direction: column; gap: 14px; }
.doc-design-logo-block { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.doc-design-logo-block > label { margin-bottom: 8px; }
.doc-design-logo-block .service-logo-preview { min-height: 90px; margin-bottom: 10px; }
.doc-design-logo-block .service-logo-preview img { width: min(200px, 90%); max-height: 66px; }
.doc-design-logo-block .service-logo-placeholder strong { font-size: 14px; margin-bottom: 3px; }
.doc-design-logo-block .service-logo-placeholder span { font-size: 12px; }
.doc-design-logo-block form { margin-top: 8px; }
.doc-design-logo-block .btn-sm-upload { font-size: 12px; padding: 8px 10px; min-height: auto; }
@media (max-width: 760px) { .doc-design-grid { grid-template-columns: 1fr; } }
input[type="color"] { max-width: 90px; padding: 4px; cursor: pointer; }

/* Settings save UX followup: one floating "unsaved changes" bar replaces the old bottom save
   button that used to look like it belonged to just the "Rēķinu numerācija" card. Hidden by
   default via the `hidden` attribute -- static/app.js toggles it, never `style.display`. The
   message text (not just color) communicates the unsaved state. */
.settings-save-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 18px;
  border-radius: 14px;
  background: #172033;
  color: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .3);
  max-width: min(560px, calc(100% - 32px));
}
.settings-save-bar[hidden] { display: none; }
.settings-save-bar-message { font-weight: 700; font-size: 13px; }
.settings-save-bar .btn { white-space: nowrap; flex-shrink: 0; }
.settings-save-bar-spacer { height: 76px; }

/* Quick advance-invoice flow followup: brief highlight on the billing form's own submit button
   after jumping there from the "Izveidot avansa rēķinu" shortcut in the Tāme card, so it's clear
   which action to finish with -- not the only way the state is conveyed (the button's own label
   and position already say that), just a transient visual pointer. */
.btn.is-highlighted { box-shadow: 0 0 0 4px var(--brand-soft, rgba(41,86,232,.25)); transition: box-shadow .25s ease; }
@media (max-width: 680px) {
  .settings-save-bar { left: 16px; right: 16px; bottom: 14px; transform: none; max-width: none; justify-content: space-between; }
}
.owner-profit-card { margin-bottom: 18px; }
.owner-profit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.owner-profit-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.owner-profit-grid small { display: block; color: var(--muted); margin-bottom: 5px; }
.owner-profit-grid strong { display: block; font-size: 1.25rem; overflow-wrap: anywhere; }
.owner-profit-grid .positive { border-color: #b9ddc8; background: #f1fbf5; }
.owner-profit-grid .negative { border-color: #efb8bd; background: #fff2f3; }
.profit-positive { border-color: #b9ddc8; }
.profit-negative { border-color: #efb8bd; }
.recall-note {
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #efb8bd;
  border-radius: 10px;
  background: #fff2f3;
  color: #7a222a;
}
.mechanic-heading-actions,
.mechanic-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.mechanic-header-actions form { margin: 0; }
.danger-action { background: #9d2028 !important; color: #fff !important; }
.wide-action { width: 100%; margin-top: 12px; }
.mechanic-new-job-form { max-width: 100%; }
.mechanic-inline-panel { margin: 14px 0; }
.mechanic-segmented { margin: 12px 0; justify-content: flex-start; }
.mechanic-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.mechanic-form-grid .full { grid-column: 1 / -1; }
.mechanic-vat-fixed {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  font-weight: 800;
  white-space: nowrap;
}

/* Keep every action inside its card/frame. */
.btn,
.quick-add,
.mechanic-action,
.nav-link,
button,
a {
  max-width: 100%;
}
.btn,
.quick-add,
.mechanic-action,
button {
  overflow-wrap: anywhere;
  white-space: normal;
}
.actions,
.form-actions,
.topbar-actions,
.card-head,
.mechanic-invoice-box,
.mechanic-status-control {
  min-width: 0;
  flex-wrap: wrap;
}
.actions > *,
.form-actions > *,
.card-head > *,
.mechanic-invoice-box > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .owner-profit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .mechanic-heading-actions { width: 100%; justify-content: stretch; }
  .mechanic-heading-actions > * { width: 100%; }
  .mechanic-form-grid { grid-template-columns: 1fr; }
  .mechanic-form-grid .full { grid-column: auto; }
  .owner-profit-grid { grid-template-columns: 1fr; }
  .month-pill { width: 100%; }
}

/* V5.4 - recurring subscription billing and repaired autoservice invoice layout */
.account-subscription-card {
  position: static;
  top: auto;
}

.subscription-info-card {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #e7c7ca;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #fff4f5);
  box-shadow: var(--shadow);
}
.subscription-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.subscription-info-head h2 { margin: 3px 0 5px; }
.subscription-info-head p { margin: 0; color: var(--muted); }
.subscription-kicker {
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}
.subscription-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.subscription-info-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #ece4e5;
  border-radius: 12px;
  background: #fff;
}
.subscription-info-grid > div.attention {
  border-color: #e7aeb3;
  background: #fff3f4;
}
.subscription-info-grid small,
.subscription-info-grid strong,
.subscription-info-grid span { display: block; }
.subscription-info-grid small { color: var(--muted); margin-bottom: 5px; }
.subscription-info-grid strong { font-size: 17px; overflow-wrap: anywhere; }
.subscription-info-grid span { margin-top: 4px; color: var(--muted); font-size: 12px; }

.platform-invoice-page-head { align-items: center; }
.platform-invoice-sheet {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid #dfe3e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(48, 20, 24, .08);
  overflow: hidden;
}
.platform-invoice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid #251316;
}
.platform-invoice-seller { min-width: 0; }
.platform-invoice-brand {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
}
.platform-invoice-seller h2 { margin: 0 0 10px; font-size: 25px; }
.platform-invoice-contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #5f6878;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.platform-invoice-identity {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  text-align: right;
}
.platform-invoice-identity > span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
}
.platform-invoice-identity > strong {
  max-width: 100%;
  color: var(--brand-dark);
  font-size: clamp(22px, 3vw, 32px);
  overflow-wrap: anywhere;
}
.platform-invoice-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 32px;
  padding: 26px 0;
}
.platform-invoice-party small,
.platform-invoice-party strong,
.platform-invoice-party span { display: block; }
.platform-invoice-party small {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}
.platform-invoice-party strong { margin-bottom: 7px; font-size: 19px; }
.platform-invoice-party span { color: #5f6878; line-height: 1.5; overflow-wrap: anywhere; }
.platform-invoice-dates {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
}
.platform-invoice-dates dt { color: var(--muted); }
.platform-invoice-dates dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.platform-invoice-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e3e6eb;
  border-radius: 12px;
}
.platform-invoice-lines {
  width: 100%;
  min-width: 650px;
  margin: 0;
  border-collapse: collapse;
}
.platform-invoice-lines th,
.platform-invoice-lines td {
  padding: 13px 14px;
  border-bottom: 1px solid #e8eaee;
  text-align: left;
  vertical-align: top;
}
.platform-invoice-lines th {
  background: #f7f4f5;
  color: #4e596b;
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.platform-invoice-lines tbody tr:last-child td { border-bottom: 0; }
.platform-invoice-lines .amount { text-align: right; white-space: nowrap; }
.platform-invoice-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: 32px;
  padding-top: 26px;
}
.platform-invoice-notes small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}
.platform-invoice-notes p { color: #596274; line-height: 1.55; }
.platform-payment-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  padding: 13px;
  border-radius: 10px;
  background: #f7f4f5;
  color: #596274;
  line-height: 1.45;
}
.platform-invoice-totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 18px;
  margin: 0;
  align-content: start;
}
.platform-invoice-totals dt { color: var(--muted); }
.platform-invoice-totals dd { margin: 0; text-align: right; white-space: nowrap; }
.platform-invoice-totals .grand-total {
  margin-top: 7px;
  padding-top: 13px;
  border-top: 2px solid #251316;
  color: #251316;
  font-size: 18px;
  font-weight: 900;
}
.platform-invoice-actions { width: min(100%, 960px); margin: 18px auto 0; }

@media (max-width: 850px) {
  .subscription-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-invoice-header,
  .platform-invoice-meta-grid,
  .platform-invoice-footer { grid-template-columns: 1fr; }
  .platform-invoice-header { flex-direction: column; }
  .platform-invoice-identity { min-width: 0; align-items: flex-start; text-align: left; }
  .platform-invoice-meta-grid,
  .platform-invoice-footer { gap: 22px; }
}
@media (max-width: 560px) {
  .subscription-info-card { padding: 16px; }
  .subscription-info-head { flex-direction: column; }
  .subscription-info-grid { grid-template-columns: 1fr; }
  .platform-invoice-sheet { padding: 18px; border-radius: 12px; }
  .platform-invoice-dates { grid-template-columns: 1fr; gap: 3px; }
  .platform-invoice-dates dd { margin-bottom: 8px; text-align: left; }
  .platform-invoice-totals { grid-template-columns: minmax(0, 1fr) auto; }
}
@media print {
  .platform-invoice-sheet {
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .platform-invoice-table-wrap { overflow: visible; }
  .platform-invoice-lines { min-width: 0; }
  .platform-invoice-actions { display: none !important; }
}

/* V5.5 strategy alignment: onboarding, activation, imports and retention reminders */
.filter-pills,
.reminder-page-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.reminder-page-switch { margin-bottom: 0; justify-content: flex-end; }
.onboarding-card { margin-bottom: 18px; overflow: hidden; }
.onboarding-progress {
  height: 9px;
  margin: 4px 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0e5e7;
}
.onboarding-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #e73542);
}
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.onboarding-steps.compact { grid-template-columns: 1fr; }
.onboarding-step {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border: 1px solid #eadde0;
  border-radius: 12px;
  background: #fffafa;
  color: var(--text);
  text-decoration: none;
}
.onboarding-step > span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #f1e4e6;
  color: var(--primary);
  font-weight: 900;
}
.onboarding-step strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.onboarding-step.done { border-color: #cfe7d5; background: #f5fbf6; }
.onboarding-step.done > span { background: #dff2e4; color: #24713a; }
.onboarding-note { margin: 14px 0 0; }
.activation-admin-card { margin-bottom: 18px; }
.activation-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.activation-metrics > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #ece5e6;
  border-radius: 12px;
  background: #faf8f8;
}
.activation-metrics small { display: block; margin-bottom: 5px; color: var(--muted); }
.activation-metrics strong { overflow-wrap: anywhere; }
.import-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.import-callout > div { min-width: 0; }
.import-callout h2 { margin: 3px 0 6px; }
.import-callout p { margin: 0; }
.import-rules { margin-top: 18px; }
.import-rules code {
  display: inline-block;
  margin: 8px 6px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f4eeee;
  color: #6f2028;
  overflow-wrap: anywhere;
}
.ta-due .badge { margin-top: 8px; }

/* Import wizard: column mapping + preview */
.mapping-table td { vertical-align: middle; }
.mapping-select { width: 100%; min-width: 220px; padding: 7px 9px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.import-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.import-summary .badge { font-size: 13px; padding: 6px 12px; }
.import-batches-table td.muted { font-size: 12px; }

@media (max-width: 980px) {
  .onboarding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activation-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .onboarding-steps,
  .activation-metrics { grid-template-columns: 1fr; }
  .import-callout { align-items: stretch; flex-direction: column; }
  .import-callout .btn { width: 100%; }
  .reminder-page-switch { justify-content: stretch; }
  .reminder-page-switch .btn,
  .filter-pills .btn { flex: 1 1 150px; }
}

/* V5.8 - clearer mechanic invoice preparation and visible add-position action. */
.mechanic-add-item-card {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #dfe4ec;
  border-radius: 16px;
  background: #f8fafc;
}
.mechanic-add-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.mechanic-add-item-head h3 {
  margin: 0;
  font-size: 19px;
}
.mechanic-add-item-head p {
  margin: 6px 0 0;
  max-width: 690px;
  color: #697386;
  line-height: 1.5;
}
.mechanic-item-form.mechanic-item-form-v58 {
  display: grid;
  grid-template-columns: 150px minmax(260px, 1fr) 120px 160px;
  gap: 14px;
  align-items: end;
  margin-top: 0;
}
.mechanic-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}
.mechanic-field > span:first-child,
.mechanic-invoice-field > span:first-child {
  color: #4f5b70;
  font-size: 12px;
  font-weight: 850;
}
.mechanic-item-form-v58 .mechanic-field input,
.mechanic-item-form-v58 .mechanic-field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: white;
  font: inherit;
}
.mechanic-price-input {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid #dce2eb;
  border-radius: 10px;
  background: white;
}
.mechanic-price-input input {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.mechanic-price-input > span:last-child {
  flex: 0 0 auto;
  padding: 0 12px;
  color: #697386;
  font-weight: 850;
}
.mechanic-vat-summary {
  display: grid;
  grid-column: 1 / 4;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e1e5ec;
  border-radius: 12px;
  background: white;
}
.mechanic-vat-summary > span {
  min-width: 0;
  padding: 3px 10px;
  border-right: 1px solid #e7eaf0;
}
.mechanic-vat-summary > span:last-child { border-right: 0; }
.mechanic-vat-summary small,
.mechanic-vat-summary strong { display: block; }
.mechanic-vat-summary small {
  margin-bottom: 4px;
  color: #697386;
  font-size: 11px;
  font-weight: 800;
}
.mechanic-vat-summary strong {
  overflow-wrap: anywhere;
  font-size: 17px;
}
.mechanic-vat-summary .gross strong { color: #a9111b; }
.mechanic-add-item-button {
  grid-column: 4;
  min-width: 0;
  width: 100%;
  min-height: 66px !important;
  white-space: normal;
  line-height: 1.25;
}
.mechanic-add-item-button > span {
  margin-right: 5px;
  font-size: 18px;
}
.mechanic-invoice-box.mechanic-invoice-create-box {
  display: block;
  padding: 20px;
}
.mechanic-invoice-copy {
  margin-bottom: 16px;
}
.mechanic-invoice-copy strong { font-size: 18px; }
.mechanic-invoice-form.mechanic-invoice-form-v58 {
  display: grid;
  grid-template-columns: 190px minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  width: 100%;
}
.mechanic-invoice-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  color: inherit;
}
.mechanic-invoice-field > span:first-child { color: #cbd2de; }
.mechanic-invoice-form-v58 input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: white;
  color: #172033;
  font: inherit;
}
.mechanic-due-input {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  overflow: hidden;
  border-radius: 10px;
  background: white;
}
.mechanic-due-input input {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.mechanic-due-input small {
  flex: 0 0 auto;
  padding: 0 12px;
  color: #697386 !important;
}
.mechanic-create-invoice-button {
  min-width: 165px;
  min-height: 48px !important;
}
.mechanic-create-invoice-button:disabled {
  background: #d7dce5;
  color: #6c7587;
}
.mechanic-invoice-warning {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff0cf;
  color: #704b00;
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 900px) {
  .mechanic-item-form.mechanic-item-form-v58 {
    grid-template-columns: 1fr 1fr;
  }
  .mechanic-item-form-v58 .mechanic-field-description {
    grid-column: 1 / -1;
  }
  .mechanic-vat-summary,
  .mechanic-add-item-button {
    grid-column: 1 / -1;
  }
  .mechanic-add-item-button { min-height: 54px !important; }
  .mechanic-invoice-form.mechanic-invoice-form-v58 {
    grid-template-columns: 1fr 1fr;
  }
  .mechanic-invoice-notes { grid-column: 2; }
  .mechanic-create-invoice-button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 600px) {
  .mechanic-add-item-card,
  .mechanic-invoice-box.mechanic-invoice-create-box { padding: 16px; }
  .mechanic-item-form.mechanic-item-form-v58,
  .mechanic-invoice-form.mechanic-invoice-form-v58 {
    grid-template-columns: 1fr;
  }
  .mechanic-item-form-v58 .mechanic-field-description,
  .mechanic-invoice-notes,
  .mechanic-create-invoice-button {
    grid-column: 1;
  }
  .mechanic-vat-summary {
    grid-column: 1;
    grid-template-columns: 1fr;
  }
  .mechanic-vat-summary > span {
    border-right: 0;
    border-bottom: 1px solid #e7eaf0;
    padding: 7px 4px;
  }
  .mechanic-vat-summary > span:last-child { border-bottom: 0; }
  .mechanic-add-item-button { grid-column: 1; }
}

/* Override legacy compact invoice input widths inside the V5.8 grid. */
.mechanic-invoice-form.mechanic-invoice-form-v58 label input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-left: 0;
}
.mechanic-invoice-form.mechanic-invoice-form-v58 .mechanic-due-input input {
  flex: 1 1 auto;
  width: 1%;
}


/* V5.9 - client invoice downloads, password reset, and internal cost workflow. */
.progress-download-button, .client-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 14px;
  padding: 9px 14px;
  border: 1px solid #d51f2a;
  border-radius: 10px;
  background: #d51f2a;
  color: #fff;
  font-weight: 850;
  text-decoration: none;
}
.client-download-link { min-height: 34px; margin-top: 7px; padding: 6px 10px; font-size: 12px; }
.client-invoice-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.temporary-password-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #efc56e; border-radius: 14px; background: #fff8e7; }
.temporary-password-banner strong, .temporary-password-banner span { display: block; }
.temporary-password-banner span { margin-top: 4px; color: #6b5a32; font-size: 13px; }
.temporary-password-copy { display: flex; align-items: center; gap: 9px; }
.temporary-password-copy code { padding: 9px 12px; border: 1px solid #e7cf95; border-radius: 9px; background: #fff; color: #172033; font-size: 15px; font-weight: 850; }
.password-reset-form { margin-top: 10px; }
.login-password-help { margin: 14px 0 0; color: #697386; font-size: 12px; line-height: 1.5; text-align: center; }
.inline-cost-form { display: grid; grid-template-columns: minmax(86px, 1fr) auto; gap: 6px; align-items: center; min-width: 170px; }
.inline-cost-form input { min-width: 0; padding: 8px 9px; }
.mechanic-field-cost small { color: #697386; font-size: 10px; line-height: 1.35; }
.mechanic-cost-missing { color: #9a6500; font-weight: 850; }
.mechanic-item-form.mechanic-item-form-v58 { grid-template-columns: 140px minmax(220px, 1fr) 105px 145px 165px; }
.mechanic-vat-summary { grid-column: 1 / 5; }
.mechanic-add-item-button { grid-column: 5; }
@media (max-width: 900px) {
  .mechanic-item-form.mechanic-item-form-v58 { grid-template-columns: 1fr 1fr; }
  .mechanic-item-form-v58 .mechanic-field-description, .mechanic-field-cost, .mechanic-vat-summary, .mechanic-add-item-button { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .temporary-password-banner, .client-completed-invoice { align-items: stretch; flex-direction: column; }
  .temporary-password-copy { align-items: stretch; flex-direction: column; }
  .client-invoice-actions { align-items: stretch; }
  .client-download-link { width: 100%; }
  .inline-cost-form { grid-template-columns: 1fr; min-width: 120px; }
}


/* V5.10 - self-service password reset. */
.login-secondary-actions { display: flex; justify-content: center; margin-top: 12px; }
.login-secondary-actions .btn { width: 100%; }
.password-reset-preview { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-soft); }
.password-reset-preview p { margin: 7px 0 14px; }
.password-reset-preview .btn { width: 100%; }

/* V5.11 language selector */
.language-switcher{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--border,#dfe4ec);border-radius:10px;background:var(--surface,#fff);flex:0 0 auto}
.language-switcher a{display:flex;align-items:center;justify-content:center;min-width:31px;height:28px;padding:0 7px;border-radius:7px;color:#111827;text-decoration:none;font-size:12px;font-weight:700;line-height:1}
.language-switcher a:visited{color:#111827}
.language-switcher a:hover{background:#f1f3f6;color:#111827}
.language-switcher a.active,.language-switcher a.active:visited,.language-switcher a.active:hover{background:#a9111b;color:#fff}
.login-language-row,.public-language-row{display:flex;justify-content:flex-end;margin-bottom:12px}
.mechanic-user .language-switcher{margin-right:6px}
.client-portal-header>.public-language-row{padding-top:10px;padding-bottom:0}
@media(max-width:720px){.topbar-actions .language-switcher{order:-1}.language-switcher a{min-width:29px;padding:0 5px}.mechanic-user{gap:6px;flex-wrap:wrap;justify-content:flex-end}}


/* V5.19 wordmark branding */
.brand-with-wordmark{display:flex;align-items:center;}
.brand-wordmark-shell{display:flex;align-items:center;justify-content:flex-start;min-height:42px;}
.brand-wordmark{display:block;width:170px;max-width:100%;height:auto;max-height:42px;object-fit:contain;}
.mechanic-wordmark{display:block;width:156px;max-width:100%;height:auto;max-height:34px;object-fit:contain;}
@media (max-width: 768px){.brand-wordmark{width:150px;max-height:38px;}.mechanic-wordmark{width:142px;max-height:30px;}}

/* V5.20 per-service panel configuration */
.panel-config-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.panel-config-note{display:flex;flex-direction:column;gap:5px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft,#f8fafc)}.panel-config-note span{color:var(--muted);font-size:.92rem}.panel-config-list{display:grid;gap:14px}.panel-config-item{margin:0}.panel-config-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.panel-config-title{display:flex;align-items:center;gap:12px;min-width:0}.panel-config-title div{display:flex;flex-direction:column;min-width:0}.panel-config-title small{color:var(--muted);overflow-wrap:anywhere}.panel-config-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft,#fff0f1);font-size:1.15rem}.panel-config-fields{align-items:end}.panel-role-access{min-width:0}.role-checks{display:flex;flex-wrap:wrap;gap:10px 16px;min-height:44px;align-items:center}.panel-save-bar{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding:14px 0;background:var(--background,#fff)}
@media(max-width:760px){.panel-config-intro{grid-template-columns:1fr}.panel-config-head{align-items:flex-start;flex-direction:column}.panel-save-bar{position:static}.role-checks{flex-direction:column;align-items:flex-start}}

/* V6.1 universal CRM extensions */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.metric-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;min-width:0}
.metric-card span{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.metric-card strong{font-size:22px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.metric-card small{font-size:11px;color:var(--muted)}
.compact-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}
.integration-status{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.communication-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.communication-actions .btn{max-width:100%;white-space:normal}
.compact-card{padding:14px 18px}
.compact-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.text-danger{color:#a9111b}
@media (max-width:1000px){.compact-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-actions{grid-template-columns:1fr}}
@media (max-width:620px){.compact-metrics{grid-template-columns:1fr}.communication-actions{align-items:stretch}.communication-actions .btn{width:100%}}

/* V6.4 self-service online booking settings */
.weekday-picker{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
.weekday-picker label{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border,var(--line));border-radius:10px;background:var(--surface-soft,#f8fafc)}
.weekday-picker input{margin:0}

/* V6.4 public online booking page */
.booking-slot-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.booking-day-tab,.booking-slot-btn{position:relative;overflow:hidden;border:1px solid var(--border,#dfe4ec);background:#fff;border-radius:12px;padding:10px 14px 8px;font:inherit;cursor:pointer;text-align:center;line-height:1.3;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .15s,background .15s,box-shadow .15s,transform .1s}
.booking-day-tab.is-active,.booking-slot-btn.is-active{border-color:#172033;background:#f3f5f9;font-weight:700;box-shadow:0 0 0 2px rgba(23,32,51,.12)}
.booking-day-tab:hover:not(:disabled),.booking-slot-btn:hover:not(:disabled){border-color:#172033;transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.09)}
.booking-slot-btn:disabled{cursor:not-allowed;opacity:.5;background:#f8f8fa;text-decoration:line-through;box-shadow:none;transform:none}
/* The [hidden] attribute is how the day/slot picker toggles which day's times show -- the
   flex rule above has higher weight than the browser's built-in "[hidden]{display:none}"
   default, so without this override every day's slots rendered stacked at once instead of
   only the selected day's. */
.booking-slot-group[hidden]{display:none}
.booking-day-full-note{margin:0 0 10px;color:#a03a3a;font-size:13px;font-style:italic}

/* V6.5: day picker as a real calendar grid (one week per row) instead of a flex row that
   wrapped days arbitrarily based on container width, which looked messy once more than a
   week of days were offered. Column count matches the company's open weekdays. */
.booking-calendar{display:grid;gap:8px;margin-top:8px}
.booking-calendar-head,.booking-calendar-row{display:grid;grid-template-columns:repeat(var(--booking-cols,5),1fr);gap:8px}
.booking-calendar-head span{text-align:center;font-size:11px;font-weight:800;text-transform:uppercase;color:var(--muted,#5f697a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.booking-calendar .booking-day-tab{width:100%}
.booking-day-tab-empty{visibility:hidden}
@media (max-width:620px){
  .booking-calendar-head span{font-size:9px}
}
@media (max-width:480px){
  .booking-calendar-head span{font-size:8px}
  .booking-calendar .booking-day-tab{padding:8px 4px;font-size:13px}
}

/* V6.6: availability colour system, ready for a future capacity>1 middle "orange" state at the
   slot level too -- today a slot is binary (green/red) since only one booking fits per slot,
   but a day already spans green/orange/red based on how much of it is still free. A thin
   coloured strip along the top of each button carries the status so it reads at a glance
   without fighting the selected/hover states, which use a separate neutral colour. */
.booking-day-tab::before,.booking-slot-btn::before{content:"";position:absolute;top:0;left:8px;right:8px;height:3px;border-radius:0 0 3px 3px;background:#d7dbe3}
.booking-day-tab--green::before,.booking-slot-btn--green::before{background:#1f9d55}
.booking-day-tab--orange::before,.booking-slot-btn--orange::before{background:#e08a1e}
.booking-day-tab--red::before,.booking-slot-btn--red::before{background:#d5313a}
.booking-slot-btn:disabled::before{opacity:.55}
.booking-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.booking-legend{display:flex;gap:14px;flex-wrap:wrap}
.booking-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,#5f697a)}
.booking-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.booking-dot--green{background:#1f9d55}
.booking-dot--orange{background:#e08a1e}
.booking-dot--red{background:#d5313a}
@media (max-width:620px){.booking-legend{gap:10px}.booking-legend-item{font-size:11px}}

/* V6.6: validation/collision errors on the booking form show as a dismissible popup instead of
   navigating to a full error page, so the customer's already-filled-in details survive. */
.booking-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000}
.booking-modal-backdrop[hidden]{display:none}
.booking-modal{background:#fff;border-radius:18px;max-width:400px;width:100%;padding:30px 26px 26px;text-align:center;box-shadow:0 24px 60px rgba(15,23,42,.28);animation:booking-modal-in .18s ease-out}
.booking-modal-icon{width:44px;height:44px;border-radius:50%;background:#fdeceb;color:#d5313a;display:grid;place-items:center;font-size:22px;font-weight:800;margin:0 auto 14px}
.booking-modal h2{margin:0 0 8px;font-size:18px}
.booking-modal p{margin:0 0 20px;color:var(--muted,#5f697a);font-size:14px;line-height:1.5}
@keyframes booking-modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* V6.3 support ticket conversation thread */
.support-thread{display:flex;flex-direction:column;gap:8px}
.support-message{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel)}
.support-message p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.support-message-platform{background:var(--accent-soft,#fff0f1);border-color:var(--accent,#c0392b)}

/* V6.4 notification bell */
.notif-bell{position:relative}
.notif-bell>summary{list-style:none;cursor:pointer;user-select:none;position:relative;display:flex;align-items:center}
.notif-bell>summary::-webkit-details-marker{display:none}
.notif-bell-toggle{position:relative}
.notif-badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#c0392b;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.notif-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:320px;max-width:90vw;max-height:420px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:40;padding:10px}
.notif-dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 6px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.notif-mark-read{border:0;background:transparent;color:var(--brand,#c0392b);font-size:12px;font-weight:700;cursor:pointer;padding:0}
.notif-due-section{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.notif-due-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:var(--accent-soft,#fff0f1);color:inherit;text-decoration:none;font-size:13px}
.notif-due-row .ui-icon{width:16px;height:16px;flex:0 0 auto}
.notif-list{display:flex;flex-direction:column;gap:2px}
.notif-item{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:10px;color:inherit;text-decoration:none}
.notif-item:hover{background:var(--surface-soft,#f8fafc)}
.notif-item small{color:var(--muted)}
.notif-empty{padding:14px 8px;text-align:center}
@media(max-width:520px){.notif-dropdown{position:fixed;right:10px;left:10px;width:auto}}

/* V6.4 popup compose modal (reminder cards send SMS/email without leaving the page) */
dialog.compose-modal{border:none;border-radius:16px;padding:0;max-width:460px;width:92vw;box-shadow:var(--shadow);color:inherit;background:var(--panel)}
dialog.compose-modal::backdrop{background:rgba(15,23,42,.5)}
dialog.compose-modal .modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
dialog.compose-modal .modal-body{padding:16px;display:flex;flex-direction:column;gap:12px}
dialog.compose-modal .modal-body label{display:block;margin-bottom:4px}
dialog.compose-modal .modal-body input[type="text"],dialog.compose-modal .modal-body input:not([type]),dialog.compose-modal .modal-body textarea{width:100%}
dialog.compose-modal .modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid var(--line)}

/* Staging/test environment indicator - driven by DEPLOY_LABEL env var, empty on production. */
.env-banner{background:#f59e0b;color:#1f1a1c;font-weight:700;font-size:13px;letter-spacing:.02em;text-align:center;padding:7px 12px}
.brand-wordmark-shell,.mechanic-wordmark-shell{position:relative;display:inline-block}
.env-badge{position:absolute;top:-6px;right:-10px;background:#f59e0b;color:#1f1a1c;font-size:9px;font-weight:800;letter-spacing:.03em;padding:1px 5px;border-radius:6px;line-height:1.5;box-shadow:0 0 0 2px #fff}

/* Team workload view - per-person load bars, and the small monthly stat/trend/chart blocks on the dashboard. */
.workload-list{display:flex;flex-direction:column;gap:16px}
.workload-row{display:grid;grid-template-columns:180px 1fr auto;gap:16px;align-items:center}
.workload-name{display:flex;flex-direction:column}
.workload-name small{color:var(--muted);text-transform:capitalize}
.workload-bar-wrap{display:flex;flex-direction:column;gap:6px}
.workload-counts{display:flex;gap:14px;font-size:12px;color:var(--muted);font-weight:700}
.progress-track span.over-capacity{background:linear-gradient(90deg,#a9111b,#ed4d58)}
.capacity-form{display:flex;align-items:center;gap:6px;white-space:nowrap}
.capacity-form label{font-size:11px;color:var(--muted);font-weight:700}
.capacity-form input[type="number"]{width:56px}
@media (max-width: 720px){.workload-row{grid-template-columns:1fr}.capacity-form{justify-content:flex-start}}

.revenue-chart{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:10px}
.revenue-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.revenue-chart-bar-wrap{flex:1;display:flex;align-items:flex-end;width:100%}
.revenue-chart-bar{width:100%;min-height:3px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#4f8df7,#1864d9)}
.revenue-chart-label{margin-top:8px;font-size:11px;font-weight:700;color:var(--muted)}
.activity-feed{display:flex;flex-direction:column;gap:2px}
.activity-row{display:flex;align-items:center;gap:12px;padding:10px 6px;border-radius:10px;text-decoration:none;color:inherit}
.activity-row:hover{background:var(--brand-soft)}
.activity-icon{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#eef0f4;font-size:15px}
.activity-body{display:flex;flex-direction:column;min-width:0}
.activity-body strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-body small{color:var(--muted)}


/* Quarter-hour date/time picker.
   Flexbox with wrapping, not a grid with hard minmax floors: a grid track can't shrink
   below its content's min size, so when this sits in a narrow column (a 3- or 4-up
   form-grid cell) the old fixed-minmax version simply overflowed into the next field
   instead of dropping to a second line. Flex-wrap lets it degrade gracefully in any
   container, without every template that embeds it needing its own width override. */
.quarter-hour-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.quarter-hour-picker > * {
  min-width: 0;
}

.quarter-hour-date {
  flex: 1 1 150px;
}

.quarter-hour-time {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 160px;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.quarter-hour-time > * {
  min-width: 0;
}

.quarter-hour-hour,
.quarter-hour-minute {
  flex: 1 1 66px;
  min-width: 60px;
}

.quarter-hour-separator {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.mechanic-body .quarter-hour-date,
.mechanic-body .quarter-hour-hour,
.mechanic-body .quarter-hour-minute {
  min-height: 48px;
  border: 2px solid #dce2eb;
  border-radius: 12px;
  padding: 10px 13px;
  background: #fff;
}

/* Automatic overdue-payment lock -- notice + grace-period controls on the platform admin's
   per-company page (routers/platform.py, templates/platform_service_detail.html). */
.payment-lock-notice { margin: -2px 0 16px; padding: 13px 15px; border-radius: 12px; background: var(--danger-soft); border: 1px solid #ffd0d0; color: #9f2d2d; }
.payment-lock-notice p { margin: 5px 0 0; }
.payment-lock-notice-grace { background: var(--warning-soft); border-color: #f0cf75; color: #7a5000; }
.payment-grace-form { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.payment-grace-form label { margin: 0; font-size: 12px; color: inherit; font-weight: 700; }
.payment-grace-form select { width: auto; min-height: 36px; }

/* Resource Scheduler (routers/scheduler.py, templates/scheduler.html, _scheduler_macros.html). */
.icon-btn-sm { border: 0; background: transparent; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 6px; color: var(--muted); }
.icon-btn-sm:hover { background: rgba(0,0,0,.06); color: var(--text); }

.scheduler-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; }
.scheduler-view-tabs { display: flex; }
.scheduler-nav { display: flex; align-items: center; gap: 10px; }
.scheduler-period-label { min-width: 120px; text-align: center; }
.scheduler-staff-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.scheduler-staff-filter select { min-height: 38px; width: auto; }

/* Staff filter: a <details> dropdown (checkbox multi-select) instead of a single <select>, so
   several specific people -- or a whole role, e.g. "just mechanics" -- can be filtered at once. */
.staff-filter { position: relative; }
.staff-filter summary { list-style: none; }
.staff-filter summary::-webkit-details-marker { display: none; }
.staff-filter[open] summary { border-color: var(--brand); }
.staff-filter-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.staff-filter-quick { padding: 6px 8px; border-radius: 6px; font-weight: 650; font-size: 13px; text-decoration: none; color: inherit; }
.staff-filter-quick:hover { background: rgba(0,0,0,.05); }
.staff-filter-quick.active { background: var(--brand); color: white; }
.staff-filter-menu hr { border: none; border-top: 1px solid var(--line); margin: 4px 0; }
.staff-filter-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.staff-filter-option:hover { background: rgba(0,0,0,.05); }
.staff-filter-option input { margin: 0; }
.staff-filter-apply { margin-top: 6px; width: 100%; }

.scheduler-grid-card { overflow-x: auto; }

/* Day view: one time-positioned column per staff member, plus a shared hour axis on the left. */
.scheduler-day-grid { display: flex; gap: 10px; align-items: flex-start; }
.scheduler-hour-axis { position: relative; flex: 0 0 52px; }
.scheduler-hour-mark { position: absolute; left: 0; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-weight: 700; }
.scheduler-day-col-wrap { flex: 1 1 180px; min-width: 160px; }
.scheduler-col-head { font-weight: 800; font-size: 12px; padding: 0 0 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scheduler-column { position: relative; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd; cursor: pointer; transition: background-color .12s ease; }
.scheduler-column.is-drop-target { background: #e8edff; }
.scheduler-column.is-absent { background: repeating-linear-gradient(135deg, #f3f4f7, #f3f4f7 10px, #ececef 10px, #ececef 20px); cursor: not-allowed; }
.scheduler-hour-line { position: absolute; left: 0; right: 0; border-top: 1px dashed #e6e9f0; }
.scheduler-absence-overlay { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 800; color: #9aa1ae; text-transform: uppercase; letter-spacing: .06em; z-index: 1; pointer-events: none; }
.scheduler-absence-overlay--compact { font-size: 9px; top: 4px; }
.scheduler-empty-hint { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-size: 11px; color: #c3c9d4; pointer-events: none; }

.scheduler-block { position: absolute; left: 4px; right: 4px; border-radius: 8px; border-left: 3px solid #94a3b8; background: #eef1f6; padding: 4px 22px 4px 6px; overflow: hidden; cursor: grab; box-shadow: 0 1px 3px rgba(20,31,56,.08); }
.scheduler-block.is-dragging { opacity: .4; }
.scheduler-block--planned { background: #e8f0ff; border-left-color: #2f6fed; }
.scheduler-block--confirmed { background: #e6f7ec; border-left-color: #1f9d55; }
.scheduler-block--arrived { background: #fff3e0; border-left-color: #e08a1e; }
.scheduler-block--completed { background: #e3f6f3; border-left-color: #0d9488; }
.scheduler-block--cancelled { background: #f1f3f6; border-left-color: #94a3b8; }
.scheduler-block--no_show { background: #fdeaec; border-left-color: #d5313a; }
.scheduler-block-body { display: block; color: inherit; font-size: 10px; line-height: 1.35; }
.scheduler-block-body strong, .scheduler-block-body span, .scheduler-block-body small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scheduler-block-body span { opacity: .8; }
.scheduler-block-body small { opacity: .65; }
.scheduler-block-actions { position: absolute; top: 2px; right: 2px; display: flex; flex-direction: column; }
.scheduler-block-action-form { display: contents; }
.scheduler-resize-handle { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.scheduler-resize-handle::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 24px; height: 2px; border-radius: 2px; background: rgba(0,0,0,.18); transform: translateX(-50%); }

/* Week view: staff rows, 7 mini day-columns per row (same positioning math, smaller px/hour). */
.scheduler-week-grid { display: grid; grid-template-columns: 130px repeat(7, minmax(90px, 1fr)); gap: 6px; }
.scheduler-week-header, .scheduler-week-row { display: contents; }
.scheduler-week-staff-head { display: flex; align-items: center; font-weight: 800; font-size: 12px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scheduler-week-day-head { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); padding: 0 0 6px; }
.scheduler-week-day-head.today { color: var(--brand); }
.scheduler-week-cell .scheduler-block { font-size: 9px; padding: 2px 16px 2px 4px; }
.scheduler-week-cell .scheduler-block-actions { transform: scale(.85); transform-origin: top right; }

/* Month view reuses .month-calendar/.calendar-day/.calendar-event from the appointments page. */
.scheduler-daycell { display: flex; flex-direction: column; gap: 3px; }
.scheduler-chip { position: relative; padding-right: 30px; cursor: grab; }
.scheduler-chip.is-dragging { opacity: .4; }
.scheduler-chip-link { display: block; }
.scheduler-chip-actions { position: absolute; top: 2px; right: 2px; display: flex; }
.scheduler-chip-action-form { display: contents; }
.scheduler-month-absent { font-size: 9px; color: #b45309; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scheduler-add-btn { border: 1px dashed #cbd2e0; background: transparent; color: var(--muted); font-size: 10px; padding: 3px 5px; border-radius: 6px; cursor: pointer; text-align: left; font-family: inherit; }
.scheduler-add-btn:hover { border-color: var(--brand); color: var(--brand); }
.day-detail-row + .day-detail-row { margin-top: 6px; }

@media (max-width: 900px) {
  .scheduler-day-grid { flex-direction: column; }
  .scheduler-week-grid { grid-template-columns: 90px repeat(7, minmax(70px, 1fr)); font-size: 11px; }
}
.service-card .badge.lock-badge { margin-left: 6px; }