* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", Calibri, Arial, sans-serif; font-size: 13px; background: #f3f4f6; color: #1f2937; }
:root { --green: #217346; --green-d: #1a5c38; --green-l: #e6f0ea; --border: #d4d4d4; --hdr: #f7f7f7; }
header { background: var(--green); color: #fff; padding: 8px 16px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
header .tabs { display: flex; gap: 6px; margin-left: auto; align-items: center; max-width: 76%; flex-wrap: wrap; justify-content: flex-end; }
header .tabs button { background: transparent; color: #fff; border: none; padding: 6px 10px; cursor: pointer; border-radius: 4px 4px 0 0; font-size: 12px; min-width: 74px; white-space: nowrap; }
header .tabs button.active { background: #fff; color: var(--green); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.03); }
header .tabs button:hover { background: rgba(255,255,255,.12); }
header .tabs button.active:hover { background: #fff; }

/* Grouped nav dropdowns (Contacts/Finance) - plain CSS+JS, same pattern as
   the existing .autocomplete/.client-typeahead custom dropdowns. */
header .tabs .nav-dropdown { position: relative; }
header .tabs .nav-dropdown-toggle.active-group { background: rgba(255,255,255,.22); }
.nav-badge { display: inline-block; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 6px; margin-left: 2px; vertical-align: middle; }
header .tabs button.nav-locked, header .tabs .nav-dropdown-menu button.nav-locked { opacity: .6; }
.doc-followup-badge { display: inline-block; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-size: 10px; font-weight: 700; border-radius: 3px; padding: 1px 6px; margin-left: 6px; }
header .tabs .nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 150px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); flex-direction: column; padding: 4px; z-index: 60;
}
header .tabs .nav-dropdown.open .nav-dropdown-menu { display: flex; }
header .tabs .nav-dropdown-menu button {
  color: #1f2937; background: transparent; text-align: left; min-width: 0; width: 100%;
  border-radius: 4px; padding: 7px 10px;
}
header .tabs .nav-dropdown-menu button:hover { background: var(--green-l); }
header .tabs .nav-dropdown-menu button.active { background: var(--green-l); color: var(--green); font-weight: 600; }
header .tabs .nav-settings-btn { margin-left: 10px; }

/* Make tabs compact on small screens */
@media (max-width: 900px) {
  header .tabs { max-width: 60%; }
  header .tabs button { padding: 6px 8px; font-size: 12px; min-width: 64px; }
}
.layout { display: flex; height: calc(100vh - 44px); position: relative; }
.sidebar { width: 260px; background: #fff; border-right: 1px solid var(--border); overflow-y: auto; padding: 8px; flex-shrink: 0; }
/* Hamburger toggle + off-canvas backdrop - both inert/hidden above the
   mobile breakpoint, where the sidebar is always visible inline as before. */
.sidebar-toggle-btn { display: none; background: transparent; border: none; color: #fff; font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; border-radius: 4px; }
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.15); }
.sidebar-backdrop { display: none; }
/* Negative margin cancels the sidebar's own 8px padding so the logo spans
   the pane's full width edge-to-edge, without changing that padding for
   every other sidebar section (folder/client/supplier/employee trees),
   which still rely on it for their own inset. */
.sidebar-logo { margin: -8px -8px 8px; padding: 14px 12px; text-align: center; font-size: 16px; font-weight: 700; color: var(--green-d); border-bottom: 1px solid var(--border); box-sizing: border-box; }
.sidebar-logo img { width: 100%; height: auto; display: block; }
.sidebar h3 { font-size: 12px; text-transform: uppercase; color: #6b7280; padding: 8px 8px 4px; }
.sidebar-section { margin-bottom: 4px; }
.sidebar-section-header { font-size: 12px; text-transform: uppercase; color: #6b7280; padding: 8px 8px 4px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; }
.sidebar-section-header:hover { color: var(--green); }
.sidebar-tree { margin-bottom: 8px; }
.tree-node { padding: 4px 8px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; gap: 4px; font-size: 13px; }
.tree-node:hover { background: var(--green-l); }
.tree-node.active { background: var(--green-l); font-weight: 600; }
.tree-node .caret { width: 14px; font-size: 10px; }
.tree-node span:last-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tree-download { margin-left: auto; border: none; background: transparent; color: #6b7280; cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 3px; flex-shrink: 0; }
.tree-download:hover { background: #fff; color: var(--green); }
.tree-children { margin-left: 14px; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.toolbar { background: #fff; border-bottom: 1px solid var(--border); padding: 6px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar button, .toolbar select, .toolbar input { font-size: 13px; padding: 5px 10px; border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer; }
.toolbar button { background: var(--green); color: #fff; border-color: var(--green-d); }
.toolbar button:hover { background: var(--green-d); }
.toolbar button.secondary { background: #fff; color: var(--green); }
.toolbar button.secondary:hover { background: var(--green-l); }
.toolbar button.danger { background: #dc2626; border-color: #b91c1c; }
.toolbar button.report-subtab.active { background: var(--green); color: #fff; border-color: var(--green-d); font-weight: 600; }
.toolbar button:disabled, .toolbar button:disabled:hover { cursor: not-allowed; opacity: 0.45; background: #fff; color: #9ca3af; border-color: var(--border); }
.toolbar .spacer { flex: 1; }
.content { flex: 1; overflow: auto; background: #fff; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { border: 1px solid var(--border); padding: 2px 4px; height: 22px; }
table.grid th { background: var(--hdr); font-weight: 600; position: sticky; top: 0; z-index: 2; }
table.grid td { background: #fff; }
table.grid td.editing { padding: 0; }
table.grid input, table.grid select { width: 100%; height: 22px; border: none; padding: 0 4px; font-size: 13px; font-family: inherit; background: #fff; }
table.grid input:focus, table.grid select:focus { outline: 2px solid var(--green); background: #fffbe6; }
table.grid tr.selected td { background: #e6f0ea; }
.row-num { width: 36px; text-align: center; background: var(--hdr) !important; color: #6b7280; font-size: 11px; }
.col-desc { min-width: 280px; }
.col-num { width: 90px; text-align: right; }
.col-unit { width: 70px; }
.col-qty { width: 70px; }
.col-sku { width: 120px; }
.col-total { width: 110px; text-align: right; }
.col-action { width: 40px; text-align: center; }
.qt-grid .col-num { width: 100px; }
.qt-grid .col-qty { width: 70px; }
.qt-grid .col-total { width: 120px; }
.qt-grid .col-action { width: 40px; text-align: center; }
/* Drag-and-drop row reordering (Line Items/Labour/Consumables/Time Entries) */
.row-drag-handle { width: 22px; text-align: center; cursor: grab; color: #9ca3af; user-select: none; }
.row-drag-handle:active { cursor: grabbing; }
.doc-items-body tr.dragging-row { opacity: 0.4; }
.doc-items-body tr.drop-above { box-shadow: inset 0 2px 0 0 var(--green); }
.doc-items-body tr.drop-below { box-shadow: inset 0 -2px 0 0 var(--green); }
.totals { width: 320px; margin-left: auto; padding: 12px; }
.totals table { width: 100%; }
.totals td { padding: 4px 8px; }
.totals .grand { font-size: 16px; font-weight: 700; border-top: 2px solid var(--green); }
.doc-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; gap: 24px; flex-wrap: wrap; }
.doc-header .field { display: flex; flex-direction: column; gap: 2px; }
.doc-header label { font-size: 11px; text-transform: uppercase; color: #6b7280; }
.doc-header input, .doc-header select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; min-width: 200px; }
.doc-header .doc-num { font-size: 20px; font-weight: 700; color: var(--green); }
.dropzone { border: 2px dashed var(--border); border-radius: 8px; padding: 32px; text-align: center; color: #6b7280; margin: 16px; transition: all .2s; cursor: pointer; }
.dropzone.dragover { border-color: var(--green); background: var(--green-l); color: var(--green); }
.dropzone .icon { font-size: 36px; margin-bottom: 8px; }
.panel { padding: 16px; }
.panel h2 { font-size: 16px; margin-bottom: 12px; color: var(--green); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
table.data th { background: var(--hdr); }
table.data tr:hover td { background: var(--green-l); }
table.data tr.row-outstanding td { background: #fef2f2; }
table.data tr.row-outstanding:hover td { background: #fee2e2; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.draft { background: #e5e7eb; color: #374151; }
.badge.sent { background: #dbeafe; color: #1e40af; }
.badge.accepted { background: #d1fae5; color: #065f46; }
.badge.paid { background: #a7f3d0; color: #064e3b; }
.badge.archived { background: #f3e8ff; color: #6b21a8; }
.badge.rejected { background: #fee2e2; color: #991b1b; }
.badge.partially_paid { background: #fef3c7; color: #92400e; }
.badge.deposit_paid { background: #fef3c7; color: #92400e; }
.doc-status-select { border: none; cursor: pointer; font-family: inherit; }
.doc-status-select:focus { outline: 2px solid var(--green); }
.no-contact-warn { color: #b91c1c; font-weight: 600; font-size: 11px; }
.stale-warn { color: #b45309; font-weight: 600; font-size: 11px; }
tr.price-stale-row .item-desc { border-left: 3px solid #f59e0b; }

/* ===== Schedule (shared org-wide day planner) ===== */
.schedule-layout { display: flex; gap: 16px; align-items: flex-start; padding: 0 16px 16px; }
.schedule-calendar-col { flex: 1; min-width: 0; margin: 0; }
.schedule-side-panel { width: 340px; flex-shrink: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 16px; position: sticky; top: 16px; }
.schedule-stat-grid.stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 0; }
.schedule-task-list { max-height: 480px; overflow-y: auto; }
.schedule-task-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.schedule-task-row:last-child { border-bottom: none; }
.schedule-task-row.dragging-row { opacity: 0.4; }
.schedule-task-row.drop-above { box-shadow: inset 0 2px 0 0 var(--green); }
.schedule-task-row.drop-below { box-shadow: inset 0 -2px 0 0 var(--green); }
.schedule-task-body { flex: 1; min-width: 0; }
.schedule-task-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-task-meta { font-size: 11px; color: #6b7280; }
.schedule-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.schedule-dow { background: var(--hdr); padding: 6px; text-align: center; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; }
.schedule-cell { background: #fff; min-height: 90px; padding: 4px; cursor: pointer; }
.schedule-cell:hover { background: var(--green-l); }
.schedule-cell-empty { background: #fafafa; cursor: default; }
.schedule-cell-empty:hover { background: #fafafa; }
.schedule-today { box-shadow: inset 0 0 0 2px var(--green); }
.schedule-daynum { font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 2px; }
.schedule-entry { font-size: 11px; background: var(--green-l); color: var(--green-d); border-radius: 3px; padding: 1px 4px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-entry .schedule-emp { color: #6b7280; }
.schedule-more { font-size: 10px; color: #9ca3af; }
/* Overdue (still open, past its date) = red; done = green - on both the
   calendar's mini entry chips and the day modal's full entry cards. Done
   wins over overdue (a completed task isn't "overdue" anymore). */
.schedule-entry.overdue { background: #fee2e2; color: #991b1b; }
.schedule-entry.overdue .schedule-emp { color: #991b1b; }
.schedule-entry.completed { background: #d1fae5; color: #065f46; }
.schedule-entry.completed .schedule-emp { color: #065f46; }

.schedule-modal-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9ca3af; margin: 0 0 8px; }
.schedule-day-item { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.schedule-day-item.overdue { border-left-color: #dc2626; background: #fef2f2; }
.schedule-day-item.completed { border-left-color: #16a34a; background: #f0fdf4; }
.schedule-day-item-row { display: flex; gap: 10px; align-items: flex-start; }
.schedule-day-item-time { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--green-d); background: var(--green-l); border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.schedule-day-item-body { flex: 1; min-width: 0; }
.schedule-day-item-title { font-weight: 600; font-size: 13px; }
.schedule-day-item-title .badge { margin-left: 6px; vertical-align: 1px; }
.schedule-day-item-emp { font-size: 12px; color: #6b7280; margin-top: 2px; }
.schedule-day-item-notes { font-size: 12px; color: #6b7280; margin-top: 4px; font-style: italic; }
.schedule-day-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #f3f4f6; flex-wrap: wrap; }
.schedule-day-item-buttons { display: flex; gap: 6px; }
.schedule-day-item-buttons button { padding: 4px 10px; font-size: 12px; }
.buy-from-btn { display: block; width: 100%; text-align: left; background: none; border: 1px dashed var(--border); border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 12px; }
.buy-from-btn:hover { background: var(--green-l); }
.buy-from-btn.selected { border: 1px solid var(--green); background: var(--green-l); font-weight: 600; }
.buy-from-btn b { display: block; }
/* Member role: financial views and delete actions are owner/admin-only
   (enforced server-side too, in every api/*.php file - this is just UX). */
body.role-member .danger:not(.remove-item),
body.role-member button[data-view="bookkeeping"],
body.role-member button[data-view="payroll"],
body.role-member button[data-view="reports"],
body.role-member button[data-view="settings"] { display: none !important; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 100; }
.modal-bg.show { display: flex; }
.modal { background: #fff; border-radius: 8px; padding: 20px; min-width: 400px; max-width: 90vw; max-height: 90vh; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.modal h2 { margin-bottom: 12px; color: var(--green); }
.modal .form-row { margin-bottom: 10px; }
.modal .form-row label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 2px; }
.modal .form-row input, .modal .form-row select, .modal .form-row textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* Every modal button was falling back to the bare, unstyled browser
   default (no color/radius/hover) - this was the single biggest reason
   any modal with more than one or two buttons read as dated/cluttered. */
.modal button { font-size: 13px; padding: 6px 14px; border: 1px solid var(--green-d); border-radius: 4px; cursor: pointer; background: var(--green); color: #fff; }
.modal button:hover { background: var(--green-d); }
.modal button.secondary { background: #fff; color: var(--green); border-color: var(--border); }
.modal button.secondary:hover { background: var(--green-l); }
.modal button.danger { background: #dc2626; border-color: #b91c1c; color: #fff; }
.modal button.danger:hover { background: #b91c1c; }
.markup-preview { background: var(--green-l); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin-top: 4px; }
.markup-preview b { color: var(--green-d); }
.toast { position: fixed; bottom: 20px; right: 20px; background: #1f2937; color: #fff; padding: 10px 16px; border-radius: 6px; z-index: 200; opacity: 0; transition: opacity .3s; }
.toast.show { opacity: 1; }
.toast.error { background: #dc2626; }
.toast.success { background: var(--green); }
.fs-widget { position: fixed; bottom: 16px; left: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 90; }
.fs-btn { background: #fff; color: var(--green-d); border: 1px solid var(--border); border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); position: relative; }
.fs-btn:hover { background: var(--green-l); }
.fs-btn .nav-badge { position: absolute; top: -6px; right: -6px; margin-left: 0; }
.import-progress { min-width: 440px; max-width: 560px; }
.import-progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12px; color: #6b7280; }
.import-progress-bar { position: relative; height: 14px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin: 10px 0 8px; }
.import-progress-bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), #34d399); border-radius: inherit; transition: width .2s ease; }
.import-progress-text { font-size: 12px; color: #374151; margin-bottom: 10px; }
.import-progress-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.import-progress-stat { background: #f9fafb; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; min-width: 120px; }
.import-progress-stat strong { display: block; font-size: 18px; color: var(--green); }
.import-progress-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.autocomplete { position: absolute; background: #fff; border: 1px solid var(--border); max-height: 200px; overflow-y: auto; z-index: 50; box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.autocomplete div { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.autocomplete div:hover, .autocomplete div.active { background: var(--green-l); }
.client-typeahead { position: absolute; background: #fff; border: 1px solid var(--border); max-height: 300px; overflow-y: auto; z-index: 2000; box-shadow: 0 8px 24px rgba(0,0,0,.15); border-radius: 8px; }
.client-typeahead .ct-opt { padding: 10px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
.client-typeahead .ct-opt.ct-new { font-weight: 700; color: #064e3b; background: #f0fdf4; }
.client-typeahead .ct-opt:hover, .client-typeahead .ct-opt.active { background: #ecfdf5; }

/* Prominent primary button */
.primary { background: linear-gradient(180deg,#2563eb,#1d4ed8); color: #fff; border: none; padding: 12px 18px; border-radius: 10px; font-size: 15px; font-weight: 800; box-shadow: 0 8px 24px rgba(37,99,235,0.18); cursor: pointer; }
.primary:hover { background: linear-gradient(180deg,#1d4ed8,#1e40af); }
.hidden { display: none !important; }
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.view-toggle button { border: none; background: #fff; color: #374151; padding: 5px 12px; cursor: pointer; font-size: 12px; }
.view-toggle button:hover { background: var(--green-l); }
.view-toggle button.active { background: var(--green); color: #fff; }

/* Quote Template - matches Smart Steel Solutions xlsx format */
.quote-template { padding: 20px 150px; max-width: 100%; margin: 0 auto; }
.qt-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 12px; border-bottom: 2px solid var(--green); margin-bottom: 16px; }
.qt-company-info { display: flex; flex-direction: column; gap: 4px; }
.qt-logo { font-size: 22px; font-weight: 700; color: var(--green); }
.qt-logo img { max-height: 60px; max-width: 260px; display: block; }
header h1 img#appLogoImg { max-height: 32px; max-width: 200px; display: block; }
.branding-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.branding-preview { max-height: 48px; max-width: 180px; border: 1px solid var(--border); border-radius: 4px; padding: 2px; background: #fff; }
.branding-upload input[type="color"] { width: 40px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; vertical-align: middle; }
.brand-swatch { width: 36px; height: 28px; border: 1px solid var(--border); border-radius: 4px; margin: 0 auto 2px; }
#paymentTermsPreview { background: #f3f4f6; border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 12px; color: #374151; margin-top: 6px; }
.qt-company-details { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #6b7280; }
.qt-company-details span { background: #f3f4f6; padding: 2px 8px; border-radius: 3px; }
.qt-title { font-size: 28px; font-weight: 700; color: var(--green); letter-spacing: 2px; }
.qt-info-row { display: flex; gap: 40px; margin-bottom: 16px; }
.qt-left { flex: 1; background: #f9fafb; border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
.qt-right { flex: 1; background: #f9fafb; border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
.qt-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; letter-spacing: 0.5px; }
.qt-left > div, .qt-right > div { margin-bottom: 6px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.qt-left > div:last-child, .qt-right > div:last-child { margin-bottom: 0; }
.qt-left > div > span:first-child, .qt-right > div > span:first-child { white-space: nowrap; margin-right: 8px; }
.qt-val { font-weight: 600; color: #1f2937; }
.qt-val.qt-num { color: var(--green); font-size: 16px; }
.qt-input { border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 13px; font-family: inherit; background: #fff; transition: border-color .2s; }
.qt-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(33,115,70,.1); }
.qt-grid { margin-bottom: 12px; }
.qt-grid th { background: var(--green) !important; color: #fff !important; font-size: 12px; text-transform: uppercase; }
.qt-grid .col-desc { min-width: 350px; }
.qt-grid .col-num { width: 100px; }
.qt-grid .col-qty { width: 70px; }
.qt-grid .col-supplier { width: 100px; font-size: 10px; color: #6b7280; text-align: left; }
.qt-grid .col-total { width: 110px; text-align: right; }
.qt-totals { width: 340px; margin-left: auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; }
.qt-totals table { width: 100%; border-collapse: collapse; }
.qt-totals td { padding: 4px 8px; font-size: 13px; border: none; }
.qt-totals .grand { font-size: 18px; font-weight: 700; border-top: 2px solid var(--green); padding-top: 6px; }
.qt-footer { display: flex; gap: 40px; margin-top: 20px; }
.qt-banking { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
.qt-terms { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
.qt-validity { margin-top: 12px; padding: 8px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px; font-size: 12px; color: #92400e; }

/* ===== Document Sections (Line Items / Labor / Consumables) ===== */
.doc-section { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 6px; overflow: visible; position: relative; }
/* The section containing a focused input must rise above sections below it so the autocomplete dropdown is visible */
.doc-section:focus-within { z-index: 1000; }
.doc-section-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--green-l); border-bottom: 1px solid var(--border); }
.doc-section-title { font-weight: 700; font-size: 13px; color: var(--green-d); text-transform: uppercase; letter-spacing: 0.5px; }
.doc-section-subtotal { font-weight: 600; font-size: 13px; color: var(--green-d); }
.doc-section.labour .doc-section-header { background: #dbeafe; border-bottom-color: #bfdbfe; }
.doc-section.labour .doc-section-title, .doc-section.labour .doc-section-subtotal { color: #1e40af; }
.doc-section.consumables .doc-section-header { background: #fef3c7; border-bottom-color: #fde68a; }
.doc-section.consumables .doc-section-title, .doc-section.consumables .doc-section-subtotal { color: #92400e; }
.doc-section-footer { padding: 8px 12px; border-top: 1px solid var(--border); }
.doc-section .qt-grid { margin-bottom: 0; }
.doc-section .qt-grid th { position: relative !important; z-index: 1 !important; }
.doc-section .qt-grid td { position: relative; }
.doc-section .qt-grid .autocomplete { z-index: 99999 !important; position: absolute !important; }
.doc-section .qt-grid .col-desc { position: relative; overflow: visible; }
.doc-section .qt-grid .col-desc .autocomplete { top: 100%; left: 0; min-width: 380px; }

/* ===== Autocomplete dropdown (material line items) ===== */
.doc-section .qt-grid .col-desc .autocomplete { max-height: 280px; }
.ac-opt { padding: 7px 10px; font-size: 12px; cursor: pointer; line-height: 1.3; border-bottom: 1px solid #f3f4f6; text-align: left; }
.ac-opt:last-child { border-bottom: none; }
.ac-opt:hover { background: var(--green-l); }
.ac-opt .ac-sku { color: #6b7280; font-size: 10px; }
.ac-opt .ac-price { color: var(--green); font-weight: 700; float: right; }
/* Fixed two-column layout - cheapest always left, most expensive always
   right, same position every time regardless of which (if either) side has
   data, so the two are easy to scan/compare at a glance while still typing. */
.ac-opt .ac-supplier-prices { padding: 0; margin-top: 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-price-col { min-width: 0; }
.ac-price-col-label { font-size: 9px; color: #9ca3af; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.ac-price-tag { display: block; width: 100%; padding: 3px 6px; border-radius: 4px; font-size: 11px; border: 1px dashed var(--border); cursor: pointer; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-price-tag:hover { background: var(--green-l); }
.ac-price-tag b { display: block; font-size: 12px; }
.ac-price-tag.ac-cheapest { border-color: var(--green); color: var(--green); }
.ac-price-tag.ac-most-expensive { border-color: #b45309; color: #b45309; }
.ac-price-tag-empty { display: block; color: #bbb; font-size: 11px; padding: 3px 6px; }

/* ===== Bank Balances ===== */
.bank-accounts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.bank-account-card { margin: 0; }
.bank-account-card.bank-account-main { border: 1px solid #6366f1; }
.bank-account-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bank-account-balance { font-size: 26px; font-weight: 700; }
.badge-main { font-size: 10px; font-weight: 700; color: #fff; background: #6366f1; border-radius: 4px; padding: 2px 6px; vertical-align: middle; }

/* ===== Supplier comparison columns (material line items) ===== */
.qt-grid th.col-supplier { font-size: 10px; }
.col-supplier { font-size: 11px; text-align: left; }
.cheap-sup, .exp-sup { font-size: 11px; text-align: left; line-height: 1.35; white-space: normal; min-width: 110px; }
.cheap-sup b, .exp-sup b { display: block; font-weight: 700; font-size: 12px; }
.cheap-sup { color: #047857; }
.cheap-sup b { color: #059669; }
.exp-sup { color: #b91c1c; }
.exp-sup b { color: #dc2626; }

/* ===== Compare Mode (side-by-side quote options) ===== */
.compare-diff-banner { padding: 8px 16px; background: var(--green-l); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--green-d); }
.compare-wrap { display: flex; gap: 16px; padding: 16px; align-items: flex-start; }
.compare-pane { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.compare-pane-header { padding: 8px 12px; background: var(--green-l); border-bottom: 1px solid var(--border); font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.compare-pane-toolbar { padding: 8px 12px; display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.compare-pane-toolbar button { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer; }
.compare-pane-toolbar button.secondary { color: var(--green); }
.compare-pane-toolbar button.danger { background: #dc2626; color: #fff; border-color: #b91c1c; }
.compare-pane-toolbar button:not(.secondary):not(.danger) { background: var(--green); color: #fff; border-color: var(--green-d); }
.compare-pane .qt-grid { margin: 0 12px 12px; width: calc(100% - 24px); }
.compare-pane .qt-grid td, .compare-pane .qt-grid th { padding: 4px 6px; font-size: 12px; }
.compare-pane .qt-grid td { position: relative; }
.compare-pane .qt-grid .col-desc { position: relative; overflow: visible; min-width: 0; }
.compare-pane .qt-grid .col-desc .autocomplete { top: 100%; left: 0; min-width: 300px; max-height: 240px; z-index: 999; position: absolute; }
.compare-pane .qt-grid tr.selected td { background: var(--green-l); }
.compare-totals { margin: 0 12px 12px; width: auto; }
.compare-totals .num { text-align: right; }

/* ===== Payments Tab ===== */
.pay-summary { display: flex; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.pay-card { flex: 1; min-width: 180px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; }
.pay-card-label { font-size: 11px; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
.pay-card-value { font-size: 20px; font-weight: 700; color: #1f2937; }
.pay-overdue td { background: #fef2f2 !important; }
.pay-overdue:hover td { background: #fee2e2 !important; }
.pay-actions { white-space: nowrap; }
.pay-actions button { margin: 2px 2px; padding: 3px 8px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.pay-actions .pay-view, .pay-actions .pay-history { background: #fff; color: var(--green); border-color: var(--green); }
.pay-actions .pay-view:hover, .pay-actions .pay-history:hover { background: var(--green-l); }
.pay-actions .pay-partial { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.pay-actions .pay-partial:hover { background: #1d4ed8; }
.pay-actions .pay-full { background: #059669; color: #fff; border-color: #047857; }
.pay-actions .pay-full:hover { background: #047857; }
.pay-balance-display { font-size: 18px; font-weight: 700; color: #dc2626; padding: 6px 8px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px; }
.pay-modal-info .form-row input, .pay-modal-info .form-row select, .pay-modal-info .form-row textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.pay-preview { margin-top: 8px; }
.pay-history-list table { width: 100%; }
.pay-history-list tfoot td { border-top: 2px solid var(--green); padding: 8px; }

/* ===== Client Debt Banner & Outstanding Badges ===== */
.client-debt-banner {
  background: #fef2f2;
  border: 2px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  padding: 10px 16px;
  margin: 8px 16px 0;
  color: #7f1d1d;
  font-size: 13px;
  font-weight: 500;
  animation: pulse 2s infinite;
}
.client-debt-banner b { color: #dc2626; }
.client-debt-banner button { background: #fff; color: var(--green); border-color: var(--green); }
.client-debt-banner button:hover { background: var(--green-l); }
@keyframes pulse { 0%, 100% { border-color: #fecaca; } 50% { border-color: #fca5a5; } }

.pay-badge-owed {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Prominent Payments tab badge */
header .tabs button[data-view="payments"].has-outstanding {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #b91c1c !important;
  animation: tab-pulse 1.5s infinite;
}
header .tabs button[data-view="payments"].has-outstanding:hover {
  background: #b91c1c !important;
}
@keyframes tab-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }

/* ===== Settings Tab ===== */
.settings-wrap { max-width: 800px; margin: 0 auto; padding: 20px; }
.settings-section { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.settings-section-header { background: var(--green-l); padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--green-d); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.settings-section-body { padding: 16px; }
.settings-section-body .form-row { margin-bottom: 12px; }
.settings-section-body .form-row label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; font-weight: 600; }
.settings-section-body .form-row input,
.settings-section-body .form-row select,
.settings-section-body .form-row textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
.settings-section-body .form-row input:focus,
.settings-section-body .form-row select:focus,
.settings-section-body .form-row textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(33,115,70,.12); }
.settings-section-body .form-row textarea { min-height: 60px; resize: vertical; }
.settings-save-bar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: 12px 16px; display: flex; justify-content: flex-end; gap: 8px; }
.settings-save-bar button { background: var(--green); color: #fff; border: 1px solid var(--green-d); border-radius: 4px; padding: 8px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s; }
.settings-save-bar button:hover { background: var(--green-d); }
.settings-layout { display: flex; gap: 20px; align-items: flex-start; padding: 20px; }
.settings-layout .settings-wrap { flex: 1 1 480px; max-width: 800px; margin: 0; padding: 0; min-width: 0; }
.settings-preview-pane { flex: 1 1 420px; min-width: 340px; position: sticky; top: 12px; }
.settings-preview-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; }
.settings-preview-card-header { background: var(--green-l); padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.settings-preview-card-header h3 { flex: 1; font-size: 13px; margin: 0; color: var(--green-d); }
.settings-preview-card-header select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; }
.settings-preview-body { padding: 14px; max-height: calc(100vh - 170px); overflow: auto; background: #f3f4f6; }
.settings-preview-body .quote-template { padding: 14px; max-width: 100%; font-size: 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.settings-preview-body .qt-title { font-size: 20px; }
.settings-preview-body .qt-logo { font-size: 16px; }
.settings-preview-body .qt-grid th, .settings-preview-body .qt-grid td { font-size: 11px; padding: 4px 6px; }
.settings-preview-doc-image { width: 100%; display: block; margin-bottom: 10px; border-radius: 4px; }
.settings-preview-doc-image-placeholder { padding: 10px; text-align: center; color: #9ca3af; font-size: 11px; border: 1px dashed var(--border); border-radius: 4px; margin-bottom: 10px; background: #fff; }
@media (max-width: 1100px) {
  .settings-layout { flex-direction: column; }
  .settings-preview-pane { position: static; width: 100%; }
}
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-grid .form-row { margin-bottom: 0; }
.checkbox-label { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; color: #1f2937 !important; cursor: pointer; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; }
@media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } }

/* ===== Payroll ===== */
.payroll-employee-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.payroll-entry-source { font-size: 11px; color: #6b7280; }
.payroll-entry-source.document { color: #059669; }
.payroll-entry-source.custom { color: #2563eb; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 12px 16px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; }
.stat-label { font-size: 11px; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
.stat-value { font-size: 20px; font-weight: 700; color: #1f2937; }
.stat-value.red, .emp-bal.red, .emp-status.red, .bank-account-balance.red { color: #dc2626; }
.stat-value.green, .emp-bal.green, .emp-status.green, .bank-account-balance.green { color: #059669; }

.cycle-toggle { display: inline-flex; gap: 4px; }
.cycle-toggle button.active { background: var(--green); color: #fff; border-color: var(--green-d); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 0 16px 16px; }
.pricing-card { display: flex; flex-direction: column; }
.pricing-card.pricing-current { border: 2px solid var(--green); }
.pricing-price { font-size: 26px; font-weight: 700; margin: 4px 0 12px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; font-size: 13px; color: #374151; }
.pricing-features li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.pricing-features li:last-child { border-bottom: none; }
.dash-alert { margin: 0 16px 16px; padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 6px; cursor: pointer; font-weight: 600; }
.dash-alert:hover { background: #fee2e2; }
.dash-client-row { cursor: pointer; }
.dash-client-row:hover td { background: var(--green-l); }
.dash-chart-row { display: flex; gap: 16px; padding: 4px 16px 16px; flex-wrap: wrap; }
.dash-chart-col { flex: 2 1 320px; min-width: 280px; }
.dash-chart-col-small { flex: 1 1 220px; max-width: 320px; }
.dash-panel-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.dash-panel-arrow { font-size: 11px; color: #6b7280; display: inline-block; transition: transform .15s; }
.dash-panel-toggle.collapsed .dash-panel-arrow { transform: rotate(-90deg); }
.dash-panel-toggle.collapsed { margin-bottom: 0; }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 4px; }
.emp-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: #fff; }
.emp-name { font-weight: 700; font-size: 14px; }
.emp-bal { font-size: 18px; font-weight: 700; margin: 6px 0 2px; }
.emp-status { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; }
.emp-meta { font-size: 11px; color: #6b7280; margin: 6px 0; }
.emp-actions button { font-size: 11px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; margin: 2px 2px 0 0; }
.payroll-source { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.payroll-source.document { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.payroll-source.custom { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.payroll-source.advance { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.payroll-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.payroll-status.paid { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.payroll-status.partial { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.payroll-status.outstanding { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.payroll-red-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 9px; font-weight: 800; background: #dc2626; color: #fff; vertical-align: middle; }
.pay-partial, .pay-full { font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid; cursor: pointer; margin: 2px; }
.pay-partial { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.pay-partial:hover { background: #1d4ed8; }
.pay-full { background: #059669; color: #fff; border-color: #047857; }
.pay-full:hover { background: #047857; }
.pay-history-row td { background: #f9fafb; }


/* ===== Loader ===== */
.app-loader { position: fixed; inset: 0; background: rgba(255,255,255,.85); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 16px; z-index: 10000; }
.app-loader.show { display: flex; }
.app-loader-spinner { width: 48px; height: 48px; border: 4px solid var(--green-l); border-top-color: var(--green); border-radius: 50%; animation: app-spin 0.8s linear infinite; }
.app-loader-msg { font-size: 14px; color: var(--green-d); font-weight: 600; }
@keyframes app-spin { to { transform: rotate(360deg); } }

/* ===== Payments Filters ===== */
.pay-filters { display: flex; gap: 8px; padding: 8px 16px; flex-wrap: wrap; align-items: center; background: #fff; border-bottom: 1px solid var(--border); }
.pay-filters label { font-size: 11px; color: #6b7280; font-weight: 600; }
.pay-filters select, .pay-filters input { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.pay-filters .pay-date-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.pay-filters .pay-date-presets button { font-size: 11px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--green); cursor: pointer; }
.pay-filters .pay-date-presets button.active { background: var(--green); color: #fff; border-color: var(--green-d); }
.pay-filters .pay-date-presets button:hover { background: var(--green-l); }
.pay-filters .pay-date-presets button.active:hover { background: var(--green-d); }

/* ===== Mobile Responsive Shell =====
   Everything below is additive - it only activates under the breakpoint
   and never changes the desktop (>860px) appearance of anything above. */
@media (max-width: 860px) {
  .sidebar-toggle-btn { display: inline-block; }
  header .tabs { max-width: 100%; }

  /* Sidebar becomes an off-canvas panel, hidden by default and slid in
     over the content (not pushed alongside it) so .main can use the full
     viewport width without any layout jump when toggled. */
  .layout { height: calc(100vh - 44px); overflow: hidden; }
  .sidebar {
    position: fixed; top: 44px; left: 0; bottom: 0; z-index: 80;
    width: 82vw; max-width: 300px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
  }
  .layout.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: block; position: fixed; top: 44px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.4); z-index: 70;
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .layout.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .main { width: 100%; }

  /* Tables: scroll sideways inside their own panel instead of forcing the
     whole page to scroll, which would otherwise break the fixed header/
     sidebar layout above. Covers every table-producing view (documents
     list, contacts, payments, payroll, prices, the quote/invoice line-item
     grid, etc.) without needing to touch each app.js render function. */
  .content .panel, .content > table.data, .doc-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .content .panel table.data, .content .panel table.grid { min-width: 640px; }
  .doc-section .qt-grid { min-width: 560px; }

  /* Comfortable tap targets - only bumped where the desktop sizing (built
     for a mouse) would otherwise be too small/cramped to tap reliably. */
  .toolbar button, .toolbar select, .toolbar input,
  .pay-actions button, .emp-actions button, .schedule-day-item-buttons button,
  .view-toggle button, .cycle-toggle button { min-height: 36px; }
  .row-drag-handle, .col-action, td.col-action { min-width: 30px; }

  /* iOS Safari zooms the page on focusing any input under 16px - this
     keeps the visual size the same elsewhere while avoiding that. */
  input, select, textarea { font-size: 16px; }
  table.grid input, table.grid select { font-size: 13px; } /* dense grids stay compact; not prone to the zoom issue since they're not the primary mobile entry point yet */

  /* Modal: max-width already prevents overflow, but min-width alone could
     still exceed a narrow phone's viewport - cap it relative to the
     viewport instead of a fixed pixel floor. */
  .modal { min-width: min(400px, 92vw); width: 92vw; padding: 16px; }
  .modal .actions { flex-wrap: wrap; }

  /* Nav dropdown menus positioned absolutely can otherwise run off the
     right edge of a narrow screen. */
  header .tabs .nav-dropdown-menu { max-width: 90vw; }

  .quote-template { padding: 16px; }
  .qt-info-row, .qt-footer { flex-direction: column; gap: 12px; }
  .totals, .qt-totals { width: 100%; }
}