.template-lanes-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.template-lanes-title{font-size:18px;font-weight:700;color:var(--text-color)}
.template-lane{margin:16px 0}
.template-lane-title{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.attachments-row{padding:10px 12px;border-top:1px solid var(--border-color);background:var(--bg-tertiary)}
.attachments-row-title{font-size:12px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.attachments-list{display:flex;flex-wrap:wrap;gap:8px}
.attachment-hint{font-size:12px;color:var(--text-secondary);font-style:italic}
.attachment-preview-row{padding:10px 12px;border-top:1px solid var(--border-color);background:var(--bg-tertiary);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.attachment-preview-row-title{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.attachment-preview-empty{font-size:12px;color:var(--text-secondary);font-style:italic}
/* ============================================
   SHARED THEME - Metalwork Enquiries CRM
   Used by admin dashboard (index.html)
   Webform maintains its own styling
   ============================================ */

:root {
    /* Page Colors — Forge: cold brushed graphite */
    --background-color: #1b1c1e;
    --text-color: #f4f4f2;
    --font-family: 'Funnel Display', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Accent — molten copper -> amber (the "heat"; spend it sparingly) */
    --accent-rgb: 255, 138, 61;
    --accent-gradient: linear-gradient(135deg, #ff8a3d 0%, #ffb066 100%);
    --glow-accent: 0 0 0 1px rgba(255, 138, 61, 0.55), 0 6px 22px rgba(255, 138, 61, 0.30);
    --glow-soft: 0 0 18px rgba(255, 138, 61, 0.22);
    
    /* Button Colors */
    --button-color: #ff8a3d;
    --button-text: #1b1c1e;
    --button-hover-color: #ffb066;
    --button-active-color: #e07a2f;
    
    /* Card Colors */
    --card-background: #26282b;
    --card-border: #3a3c40;
    
    /* Input Colors */
    --input-border: #43464b;
    --input-background: #2f3236;
    --input-text: #f4f4f2;
    --input-focus-border: #ff8a3d;
    --input-focus-shadow: rgba(255, 138, 61, 0.35);
    
    /* Border Radius — one corner language. sm: chips/thumbnails,
       button/input: controls, md: rows/inner panels, card: card shells,
       pill: fully-rounded badges and toggles. */
    --input-radius: 8px;
    --button-radius: 8px;
    --card-radius: 12px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-pill: 999px;

    /* Motion — one shared vocabulary for every animation/transition.
       The global prefers-reduced-motion block at the bottom of this file
       zeroes all durations, so new motion is automatically accessible. */
    --dur-fast: 120ms;
    --dur-base: 190ms;
    --dur-slow: 280ms;
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Shadows — machined edge (inset top highlight) + deeper drop */
    --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 30px rgba(0, 0, 0, 0.45);
    --button-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
    
    /* Spacing scale — use these for new padding/margin/gap values so
       vertical rhythm stays consistent. Existing off-scale values (14px
       etc.) are left as-is deliberately. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --container-padding: var(--space-5);
    --card-spacing: var(--space-4);

    /* Toast Colors */
    --toast-success: #7d9c66;
    --toast-error: #c9795f;
    --toast-info: #7d97b7;

    /* Tab Bar */
    --tab-bar-background: #141517;
    --tab-bar-border: #3a3c40;
    --tab-inactive: #7a7d83;
    --tab-active: #ff8a3d;

    /* Machined hairline edge */
    --hairline: #3a3c40;

    /* PDF document brand DEFAULTS — deliberately separate from the app chrome
       above so the Forge retheme never changes customer-facing
       invoice/quote/contract colours. getAppThemeColors() reads these; the
       owner's saved pdfColors (settings/business) still override. */
    --pdf-default-accent: #ff8a3d;
    --pdf-default-dark: #1a1a18;

    /* Semantic Aliases — used by template editor, PDF theme, settings */
    --accent-primary: var(--button-color);
    --accent-secondary: var(--button-hover-color);
    --text-primary: var(--text-color);
    --text-secondary: #a6a8ad;
    --text-tertiary: #6c6e73;
    --bg-primary: var(--card-background);
    --bg-secondary: var(--card-background);
    --bg-tertiary: var(--input-background);
    --border-primary: var(--card-border);
    --border-color: var(--card-border);
    --card-bg: var(--card-background);
    --accent: var(--button-color);
    --error: var(--toast-error);

    /* Safe area shorthand. The CSS env() values are overridden by the
       native Swift wrapper (WebViewCoordinator.swift) which injects the
       real UIWindow safe area insets after page load. The fallbacks here
       cover desktop browsers where env() works natively. */
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 8px);
}

/* ============================================
   RESET & BASE
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* App-style scroll model: lock the document so nothing scrolls at the
   <html>/<body> level. The .dashboard becomes the only scroll container
   (see below). This guarantees the fixed bottom tab bar can't be
   affected by page-level scrolling — a problem in WKWebView where
   different tabs were scrolling differently and dragging the tab bar
   with them on Jobs/Clients/Financials. */
body.dashboard-mode html,
body.dashboard-mode {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* When ANY full-screen overlay is open (modal, popup, PDF viewer,
   signature pad, etc.) the .dashboard scroll container is locked so
   only the modal can scroll. Uses :has() (supported in iOS Safari
   15.4+ / WKWebView). */
body:has(
    .modal-overlay,
    .lead-popup-overlay,
    .client-popup-overlay,
    .doc-popup-overlay,
    .pipeline-popup-overlay,
    .pdf-viewer-overlay,
    .file-viewer-overlay,
    .signature-overlay,
    .toast-confirm-overlay
) .dashboard {
    overflow: hidden;
    touch-action: none;
}

html {
    /* iOS inflates text when it decides the layout is wider than the screen in
       landscape, and can leave it inflated after rotating back to portrait,
       which reads as "the whole app is zoomed 2x". Pin text to its CSS size in
       every orientation. (Rotation zoom is also reset natively — see
       WebViewCoordinator.startRotationZoomGuard — and the viewport meta is
       re-applied after each rotation in index.html.) */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.5;
    /* Disable BOTH double-tap zoom AND pinch-zoom on the main app shell.
       The app is a fixed mobile-first layout — pinch-zoom on dashboards just
       breaks alignment and persists across orientation changes. Pan / vertical
       scroll still work normally.
       Photo viewer (.gallery-image-frame) sets touch-action: none and runs its
       own custom JS pinch-zoom — unaffected by this rule. PDFs render in native
       Quick Look (not WebView) so this rule doesn't reach them either. */
    touch-action: pan-x pan-y;
}

/* ============================================
   LOGIN SCREEN
   ============================================ */

.login-container {
    /* Hidden by default — auth state listener reveals it after splash.
       Pinned to the viewport because <html>/<body> are now locked. */
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: var(--container-padding);
    overflow-y: auto;
}

.login-container.is-visible {
    display: flex;
}

/* App splash — visible on first paint, hidden once auth state resolves.
   Covers the screen so neither loginScreen nor dashboard ever flashes
   while Firebase is restoring its session from IndexedDB. */
.app-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--background-color, #1a1a1a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transition: opacity 0.2s ease;
}

.app-splash.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.app-splash-mark {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1px;
    /* Molten wordmark: gradient fill + heat glow — the first-impression forge moment. */
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(255, 138, 61, 0.40));
    user-select: none;
}

.app-splash-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 138, 61, 0.25);
    border-top-color: var(--button-color, #ff8a3d);
    border-radius: 50%;
    animation: app-splash-spin 0.7s linear infinite;
}

@keyframes app-splash-spin {
    to { transform: rotate(360deg); }
}

.login-box {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 32px;
    max-width: 400px;
    width: 100%;
    box-shadow: var(--card-shadow);
}

.login-box h1 {
    font-size: 24px;
    margin-bottom: 24px;
    text-align: center;
}

/* ============================================
   FORMS
   ============================================ */

.form-group {
    margin-bottom: 16px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

/* Required-field marker — the molten accent doubles as the "heat" cue */
.required-mark {
    color: var(--accent);
    font-weight: 700;
}

input[type="email"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-background);
    color: var(--input-text);
    font-family: var(--font-family);
    /* font-size MUST be >= 16px or iOS Safari auto-zooms on focus */
    font-size: 16px;
    border-radius: var(--input-radius);
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

textarea {
    min-height: 80px;
    resize: vertical;
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--button-color) 50%), linear-gradient(135deg, var(--button-color) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* ============================================
   BUTTONS
   ============================================ */

button {
    width: 100%;
    padding: 12px;
    border: none;
    background: var(--button-color);
    color: var(--button-text);
    font-size: 16px;
    font-family: var(--font-family);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--button-radius);
    box-shadow: var(--button-shadow);
    transition: background-color 0.2s, filter 0.2s, box-shadow 0.2s, transform 0.1s;
}

@media (hover: hover) {
    button:hover {
        background: var(--button-hover-color);
    }
}

button:active {
    background: var(--button-active-color);
    transform: translateY(1px);
}

/* Primary CTAs are class-less <button>s — give them the molten "hot key" look:
   a copper->amber gradient that emits a soft glow, intensifying on hover.
   Scoped to :not([class]) so cold variants (.btn-secondary, .btn-small, icon
   buttons, etc.) never pick up the heat — boldness spent in one place. */
button:not([class]) {
    background: var(--accent-gradient);
    box-shadow: var(--button-shadow), var(--glow-soft);
}

@media (hover: hover) {
    button:not([class]):hover {
        background: var(--accent-gradient);
        filter: brightness(1.06);
        box-shadow: var(--button-shadow), var(--glow-accent);
    }
}

button:not([class]):active {
    background: var(--accent-gradient);
    filter: brightness(0.95);
    transform: translateY(1px);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--card-background);
    border: 1px solid var(--input-border);
    color: var(--button-color);
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
}

@media (hover: hover) {
    .btn-secondary:hover {
        background: #444441;
    }
}

.error-message {
    color: #ff4444;
    font-size: 14px;
    margin-top: 8px;
    text-align: center;
}

/* ============================================
   DASHBOARD LAYOUT
   ============================================ */

.dashboard {
    /* The dashboard is the ONLY scroll container in the app shell.
       Body/html are locked (see html, body rule above), and the tab
       bar is fixed to the viewport. This means the tab bar can never
       move when content scrolls — which is the bug we kept hitting on
       Jobs/Clients/Financials. */
    display: none;
    position: fixed;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--container-padding);
    /* The sticky .dashboard-header owns the status-bar safe area now —
       it pads itself with var(--safe-top) so the frosted bar sits under
       the iOS clock while content scrolls beneath it. */
    padding-top: 0;
    /* Clear the bottom tab bar (50px touch row + 18px home-indicator
       breathing room — see .tab-bar comment above). */
    padding-bottom: 80px;
    /* Keep focused inputs above the iOS keyboard — reserve generous
       room at the bottom when scrollIntoView fires. */
    scroll-padding-bottom: 120px;
}

.dashboard.show {
    display: block;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    /* Pinned frosted bar — stays under the status bar while the page
       scrolls beneath. Negative margins + matching padding stretch the
       blur edge-to-edge past the dashboard's own padding. Keep z-index
       below overlays (1000+) and the fixed tab bar. */
    position: sticky;
    top: 0;
    z-index: 60;
    margin: 0 calc(-1 * var(--container-padding)) 16px;
    padding: calc(var(--safe-top) + 10px) var(--container-padding) 10px;
    /* The icon cluster overlays the bar's right edge (fixed .header-actions
       — 2×36px buttons + gap) — keep the title clear of it. */
    padding-right: calc(var(--container-padding) + 92px);
    min-height: calc(var(--safe-top) + 56px);
    background: color-mix(in srgb, var(--background-color) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(58, 60, 64, 0.6);
}

.dashboard-header h1 {
    font-size: 24px;
}

/* Fixed top-right icon cluster (scan + settings gear). Lives OUTSIDE
   .dashboard in the markup (direct sibling after #tabBar) because the
   dashboard's fixed scroll container is a Chrome stacking context — a
   z-index inside it can never paint above the tab bar (z 900), which is
   exactly what hid these icons under the desktop top nav. Hidden until
   the tab bar is (i.e. the user is logged in). */
.header-actions {
    display: none;
    position: fixed;
    top: calc(var(--safe-top) + 10px);
    right: var(--container-padding);
    z-index: 901; /* above the tab bar (900), below overlays (1000+) */
    gap: 12px;
}

#tabBar.is-visible + .header-actions {
    display: flex;
}

.search-bar {
    margin-bottom: 24px;
}

.search-bar input {
    width: 100%;
    max-width: none;
}

.archived-leads-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: -12px 0 18px;
}

.archived-leads-toolbar .btn-secondary {
    width: auto;
}

/* Archived leads card layout */
.archived-lead-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    padding: 12px 14px;
}

.archived-lead-info {
    flex: 1;
    min-width: 0;
}

.archived-lead-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.archived-lead-details {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archived-lead-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.archived-lead-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

@media (hover: hover) {
    .archived-lead-delete:hover {
        color: var(--toast-error);
    }
}

/* ============================================
   LEAD CARDS
   ============================================ */

.leads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--card-spacing);
}

.lead-card {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-5);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s, transform var(--dur-fast) ease, background var(--dur-fast) ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .lead-card:hover {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    }
}

.lead-card.lead-card-archived {
    background: color-mix(in srgb, var(--card-background) 86%, #8f8f8f 14%);
    border-color: color-mix(in srgb, var(--card-border) 75%, #8f8f8f 25%);
    box-shadow: none;
}

@media (hover: hover) {
    .lead-card.lead-card-archived:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
    }
}

.lead-card.lead-card-archived .card-title,
.lead-card.lead-card-archived .card-field strong,
.lead-card.lead-card-archived .card-meta .distance {
    color: color-mix(in srgb, var(--button-color) 55%, #b8b8b8 45%);
}

.lead-card.lead-card-archived .card-date,
.lead-card.lead-card-archived .card-field,
.lead-card.lead-card-archived .card-description,
.lead-card.lead-card-archived .file-link {
    color: color-mix(in srgb, var(--text-color) 72%, #a3a3a3 28%);
}

.lead-card.lead-card-archived .card-description {
    background: color-mix(in srgb, var(--input-background) 82%, #9a9a9a 18%);
}

.lead-card.lead-card-archived-view .card-actions {
    flex-wrap: wrap;
}

/* Selected state for lead cards in select mode */
.lead-card.lead-card-selected {
    border: 1px solid rgba(183, 28, 28, 0.5);
    background: rgba(183, 28, 28, 0.06);
}

.lead-card-delete-btn {
    color: var(--toast-error) !important;
    border-color: color-mix(in srgb, var(--toast-error) 45%, var(--input-border) 55%);
}

@media (hover: hover) {
    .lead-card-delete-btn:hover {
        background: color-mix(in srgb, var(--toast-error) 16%, transparent 84%);
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--input-border);
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--button-color);
}

.card-date {
    font-size: 12px;
    color: #999;
}

.card-body {
    margin-bottom: 12px;
}

.card-field {
    margin-bottom: 8px;
    font-size: 14px;
}

.card-field strong {
    color: var(--button-color);
}

.card-description {
    margin-top: 12px;
    padding: 12px;
    background: var(--input-background);
    border-radius: var(--input-radius);
    font-size: 14px;
    line-height: 1.4;
}

.card-meta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}

.card-meta .distance {
    color: var(--button-color);
}

.card-meta .archive-countdown {
    color: #ff9800;
}

/* ============================================
   FILE GALLERY
   ============================================ */

.card-files {
    margin-top: 12px;
}

.file-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.file-thumbnail {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--input-radius);
    cursor: pointer;
    border: 1px solid var(--input-border);
}

.file-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    background: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--button-color);
    text-decoration: none;
    font-size: 12px;
    text-align: center;
    padding: 8px;
    transition: background 0.2s;
}

@media (hover: hover) {
    .file-link:hover {
        background: #444441;
    }
}

/* ============================================
   CARD ACTIONS & EDIT MODE
   ============================================ */

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.card-actions button {
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
}

.edit-mode {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--input-border);
}

.edit-mode .form-group {
    margin-bottom: 12px;
}

.edit-mode label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   LOADING & EMPTY STATES
   ============================================ */

.loading {
    text-align: center;
    padding: 40px;
    font-size: 18px;
    color: var(--button-color);
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.empty-state h2 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.empty-state p {
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.6;
}

.empty-state-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.empty-state-actions button {
    width: auto;
    min-width: 148px;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    /* Above all overlays (.pdf-viewer-overlay 10000, .gallery-overlay 10001,
       .signature-overlay/.file-viewer-overlay 10100). Toasts are notifications
       and must always be visible. */
    z-index: 10200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-color);
    pointer-events: auto;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast-message {
    flex: 1;
    min-width: 0;
}

.toast.show {
    transform: translateX(0);
}

.toast.toast-success {
    border-left: 4px solid var(--toast-success);
}

.toast.toast-error {
    border-left: 4px solid var(--toast-error);
}

.toast.toast-info {
    border-left: 4px solid var(--toast-info);
}

.toast-close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 18px;
    padding: 0 0 0 8px;
    width: auto;
    box-shadow: none;
    line-height: 1;
}

@media (hover: hover) {
    .toast-close:hover {
        color: var(--text-color);
        background: none;
    }
}

.toast-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* ============================================
   CONFIRM DIALOG (replaces browser confirm())
   ============================================ */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Above all overlays — confirm dialogs replace native confirm() and must
       interrupt whatever modal is open. */
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirm-box {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.confirm-box p {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.confirm-actions button {
    width: auto;
    padding: 8px 20px;
    font-size: 14px;
}

/* ============================================
   BOTTOM TAB BAR
   ============================================ */

.tab-bar {
    /* Pinned to the very bottom of the viewport. Because <html>/<body>
       are non-scrolling and .dashboard is its own scroll container, no
       ancestor can ever drag this off-screen. */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--tab-bar-background);
    border-top: 1px solid var(--tab-bar-border);
    display: none;
    justify-content: space-around;
    align-items: center;
    /* Tight iOS-style bar. The native iOS wrapper draws the WebView
       edge-to-edge (.ignoresSafeArea + scrollView contentInset .never)
       so we manage spacing here ourselves. A small fixed bottom
       padding lifts the labels just above the iPhone home-indicator
       pill without leaving the huge ~34px gap that env() would. */
    min-height: 50px;
    padding: 4px 0 18px;
    /* Subtle lift: a hairline top highlight + soft upward shadow so the bar
       reads as a raised surface rather than a flat strip. */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 -8px 24px rgba(0, 0, 0, 0.28);
    z-index: 900;
}

.tab-bar.is-visible {
    display: flex;
}

.tab-bar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--tab-inactive);
    background: none;
    border: none;
    box-shadow: none;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 400;
    width: auto;
    transition: color 0.2s;
}

@media (hover: hover) {
    .tab-bar-item:hover {
        color: var(--tab-active);
        background: none;
    }
}

.tab-bar-item:active {
    transform: none;
    background: none;
}

/* Premium active state — a soft bronze pill + glow blooms behind the icon,
   the icon lifts a touch, and the label goes bold. The pill is a pseudo
   element so no markup changes are needed. */
.tab-bar-item::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    width: 44px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: rgba(255, 138, 61, 0.14);
    box-shadow: 0 0 18px rgba(255, 138, 61, 0.22);
    opacity: 0;
    transform: translateX(-50%) scale(0.55);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 0;
}

/* Keep the labels above the pill. Labels are flex items, so z-index applies
   without position — and we must NOT set position here, or it would override
   the absolutely-positioned .tab-badge and break the notification badge. */
.tab-bar-item span {
    z-index: 1;
}

.tab-bar-item.active {
    color: var(--tab-active);
    font-weight: 600;
}

.tab-bar-item.active::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.tab-bar-item.active svg {
    transform: translateY(-1px) scale(1.08);
}

.tab-bar-item svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    position: relative;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tab-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--button-color);
    color: var(--button-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--tab-bar-background);
}

/* ============================================
   SUB-TABS (underlined text tabs)
   ============================================ */

.sub-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0;
}

.sub-tab {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--tab-inactive);
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 400;
    padding: 8px 4px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    width: auto;
    transition: color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
    .sub-tab:hover {
        color: var(--text-color);
        background: none;
    }
}

.sub-tab:active {
    transform: none;
    background: none;
}

.sub-tab.active {
    color: var(--text-color);
    border-bottom-color: var(--tab-active);
}

/* ============================================
   TAB PAGE CONTAINERS
   ============================================ */

.tab-page {
    display: none;
}

.tab-page.active {
    display: block;
    /* Re-adding .active restarts this, so every tab switch fades the
       incoming content in — visual only, does not affect scroll math. */
    animation: tab-page-in var(--dur-base) var(--ease-out-soft);
}

@keyframes tab-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================
   CLIENTS LIST VIEW
   ============================================ */

.clients-list {
    width: 100%;
}

.clients-list-header,
.clients-list-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.7fr 1fr;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
    font-size: 14px;
}

.clients-list-header {
    color: var(--button-color);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--card-border);
}

.clients-list-row {
    border-bottom: 1px solid var(--input-border);
    cursor: pointer;
    transition: background 0.15s, transform var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .clients-list-row:hover {
        background: var(--input-background);
    }
}

/* ============================================
   CLIENT POPUP CARD
   ============================================ */

.client-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 12px);
}

.client-popup {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-6);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.lead-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 12px);
    animation: fadeIn 0.15s ease;
}

.lead-popup {
    position: relative;
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    animation: popupSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    /* Fill the available overlay height (which already respects safe areas)
       so the popup never overflows the viewport. Use flex-column so the
       header is always visible at top, body scrolls, and actions stick
       at the bottom — just like the job card popup. */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Premium top accent edge — matches the job popup. */
.lead-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--button-color), transparent);
    opacity: 0.85;
    z-index: 2;
}

/* Header: always pinned at the top */
.lead-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px 12px;
    background: linear-gradient(180deg, rgba(255, 138, 61, 0.06), transparent);
    border-bottom: 1px solid var(--input-border);
    flex-shrink: 0;
}

.lead-popup-header h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--button-color);
    margin: 0;
}

/* Scrollable body: fills remaining space */
.lead-popup-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Footer (actions row): always pinned at the bottom */
.lead-popup-footer {
    flex-shrink: 0;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--input-border);
}

.lead-popup-close {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 24px;
    padding: 0 4px;
    width: auto;
    line-height: 1;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .lead-popup-close:hover {
        color: var(--text-primary);
        background: none;
    }
}

.lead-popup .card-field {
    margin-bottom: 10px;
}

/* Greys the field labels (Email:/Phone:/…) so the values read as primary. */
.lead-popup .card-field strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.lead-popup .card-meta {
    margin-bottom: 10px;
}

.lead-popup-description {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    background: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    border-left: 3px solid rgba(255, 138, 61, 0.45);
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

.lead-popup .card-actions {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--input-border);
}

.client-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--input-border);
}

.client-popup-header h2 {
    font-size: 20px;
    color: var(--button-color);
}

.modal-header-close,
.client-popup-close,
.modal-close,
.settings-modal-close,
.doc-popup-close,
.add-client-modal-close,
.fin-detail-close,
.payment-modal-close {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 24px;
    padding: 0 4px;
    width: auto;
    line-height: 1;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .modal-header-close:hover,
    .client-popup-close:hover,
    .modal-close:hover,
    .settings-modal-close:hover,
    .doc-popup-close:hover,
    .add-client-modal-close:hover,
    .fin-detail-close:hover,
    .payment-modal-close:hover {
        color: var(--text-primary);
        background: none;
    }
}

.client-popup .card-field {
    margin-bottom: 10px;
}

/* Editable card fields — display-only by default, inputs appear in edit mode */
.client-popup .card-field-editable {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}

.client-popup .card-field-editable .field-content {
    flex: 1;
    min-width: 0;
}

/* Universal Edit button in popup header */
.client-popup-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.client-popup .client-edit-btn {
    background: transparent;
    border: 1px solid var(--button-color);
    color: var(--button-color);
    font-family: var(--font-family);
    font-size: 13px;
    padding: 5px 14px;
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

@media (hover: hover) {
    .client-popup .client-edit-btn:hover {
        background: var(--button-color);
        color: #fff;
    }
}

/* Save / Cancel action bar — shown in edit mode */
.client-edit-actions {
    display: flex;
    gap: 10px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 12px;
}

.client-edit-actions .client-save-btn {
    flex: 1;
    padding: 8px 0;
    background: var(--button-color);
    color: #fff;
    border: none;
    border-radius: var(--button-radius);
    font-family: var(--font-family);
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .client-edit-actions .client-save-btn:hover {
        opacity: 0.85;
    }
}

.client-edit-actions .client-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.client-edit-actions .client-cancel-btn {
    flex: 1;
    padding: 8px 0;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--card-border);
    border-radius: var(--button-radius);
    font-family: var(--font-family);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

@media (hover: hover) {
    .client-edit-actions .client-cancel-btn:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

/* Inline edit input that replaces field value */
.client-popup .field-edit-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--button-color);
    background: var(--input-background);
    color: var(--input-text);
    font-family: var(--font-family);
    font-size: 14px;
    border-radius: var(--input-radius);
    box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.15);
    margin-top: 4px;
}

.client-popup .field-edit-input:focus {
    outline: none;
    border-color: var(--button-color);
    box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.25);
}

.client-popup textarea.field-edit-input {
    resize: vertical;
    min-height: 60px;
}

/* Delete client button */
.client-delete-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: transparent;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    border-radius: var(--button-radius);
    font-size: 14px;
    font-family: var(--font-family);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

@media (hover: hover) {
    .client-delete-btn:hover {
        background: #e74c3c;
        color: #fff;
    }
}

/* ============================================
   QUOTE / INVOICE BUILDER
   ============================================ */

.quote-builder-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(360px, 2fr);
    gap: 20px;
}

.quote-builder-card {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 22px;
    box-shadow: var(--card-shadow);
}

.quote-builder-card h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--button-color);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.quote-mode-row {
    display: flex;
    gap: 20px;
    margin-bottom: 14px;
}

.quote-mode-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 0;
}

.quote-section-block {
    margin-top: 6px;
}

.quote-line-items-header,
.quote-line-item {
    display: grid;
    grid-template-columns: 2.2fr 0.7fr 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}

.quote-line-items-header {
    padding: 0 0 6px 0;
    color: var(--button-color);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quote-line-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.quote-line-item {
    background: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: 8px;
}

.quote-line-item input {
    margin: 0;
}

.quote-line-total {
    font-size: 14px;
    color: var(--text-color);
    text-align: right;
    padding-right: 4px;
}

.quote-remove-line {
    width: auto;
    min-width: 32px;
    padding: 6px 10px;
    text-transform: uppercase;
}

.quote-totals {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--input-border);
}

.quote-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.quote-total-final {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid var(--button-color);
    font-size: 17px;
    color: var(--button-color);
    font-weight: 700;
}

.gst-inclusive-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.gst-inclusive-toggle input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.quote-footer-fields {
    margin-top: 18px;
}

.quote-builder-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.quote-builder-actions button {
    width: auto;
    padding: 11px 22px;
    font-weight: 600;
}

/* ============================================
   MODAL (settings, forms)
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Always add breathing room above and beyond the safe area so the
       modal never hugs the status bar. */
    padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 12px);
}

.modal {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-6);
    max-width: 500px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    /* Cap to the visible viewport minus the overlay's own padding so
       the close button is always reachable on tall content. dvh
       (dynamic viewport height) accounts for browser/keyboard chrome. */
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--input-border);
}

.modal-header h2 {
    font-size: 20px;
    color: var(--button-color);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.modal-actions button {
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
}

/* ============================================
   HEADER ICON BUTTONS (gear, scan, etc.)
   Small icon-only buttons in the dashboard header
   ============================================ */

.header-icon-btn {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--tab-inactive);
    cursor: pointer;
    padding: 6px;
    width: 36px;
    height: 36px;
    border-radius: var(--button-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.15s;
    position: relative;
}

@media (hover: hover) {
    .header-icon-btn:hover {
        color: var(--button-color);
        background: var(--input-background);
    }
}

.header-icon-btn:active {
    transform: none;
    background: var(--input-background);
}

.header-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Scan button — slightly larger than other header icons */
#globalScanBtn {
    width: 42px;
    height: 42px;
}

#globalScanBtn svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .leads-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-header {
        margin-bottom: 16px;
    }

    .header-actions {
        flex-direction: row;
        gap: 4px;
    }

    .clients-list-header,
    .clients-list-row {
        grid-template-columns: 1fr 1fr;
        font-size: 13px;
    }

    /* Hide less important columns on mobile */
    .clients-list-header > :nth-child(3),
    .clients-list-header > :nth-child(4),
    .clients-list-row > :nth-child(3),
    .clients-list-row > :nth-child(4) {
        display: none;
    }

    .toast-container {
        top: auto;
        /* Sit just above the bottom tab bar plus the iOS home indicator */
        bottom: calc(72px + var(--safe-bottom));
        right: 8px;
        left: 8px;
    }

    .toast {
        max-width: 100%;
    }

    .quote-builder-grid {
        grid-template-columns: 1fr;
    }

    .quote-line-items-header {
        display: none;
    }

    .quote-line-item {
        grid-template-columns: 1fr 1fr;
    }

    .quote-line-description {
        grid-column: 1 / -1;
    }

    .quote-line-total {
        text-align: left;
        font-weight: 600;
    }

    .quote-remove-line {
        justify-self: end;
    }
}

/* ============================================
   SETTINGS MODAL (full-screen, scrollable)
   ============================================ */

.settings-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0;
}

.settings-modal {
    background: var(--card-bg);
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

@media (min-width: 641px) {
    .settings-modal-overlay {
        justify-content: flex-start;
        padding: 40px 16px;
        overflow-y: auto;
    }
    .settings-modal {
        max-height: none;
        border-radius: var(--card-radius);
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        margin: 0 auto;
    }
}

.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 1;
}

.settings-modal-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
}

.settings-modal-body {
    padding: 0 24px 32px;
    flex: 1;
}

.settings-section {
    margin-top: 28px;
}

.settings-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.settings-section .form-group {
    margin-bottom: 14px;
}

.settings-section .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 5px;
    display: block;
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .settings-row {
        grid-template-columns: 1fr;
    }
}

.settings-field-group {
    margin-bottom: 14px;
}

.settings-gst-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
}

.settings-gst-row label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-gst-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.settings-gst-rate-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.settings-gst-rate-group input[type="number"] {
    width: 80px;
}

.settings-gst-rate-group span {
    font-size: 14px;
    color: var(--text-secondary);
}

.branding-upload-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}

@media (max-width: 480px) {
    .branding-upload-row {
        grid-template-columns: 1fr;
    }
}

.branding-upload-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.branding-upload-item label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.branding-upload-note {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.branding-preview {
    width: 100%;
    height: 80px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #1a1a2e);
    overflow: hidden;
}

.branding-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.branding-preview-placeholder {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    padding: 8px;
}

.settings-save-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    position: sticky;
    bottom: 0;
    background: var(--card-bg);
}

.settings-save-row .settings-right-btns {
    display: flex;
    gap: 12px;
}

.settings-save-row button {
    width: auto;
    padding: 10px 24px;
}

/* ---- Signature Drawing Pad ---- */
.sig-pad-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sig-pad-modal {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    width: 100%;
    max-width: 640px;
    overflow: hidden;
}
.sig-pad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}
.sig-pad-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}
.sig-pad-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.sig-pad-canvas-wrap {
    padding: 20px;
    background: #fff;
    margin: 16px;
    border-radius: var(--button-radius);
    height: 200px;
    position: relative;
}
.sig-pad-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}
.sig-pad-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 20px 20px;
    gap: 12px;
}

/* Lock background scroll while signing in Settings — also prevents iOS
   rubber-band when the finger drags off the canvas. */
body.sig-pad-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* On mobile, make the Settings signature pad fullscreen so there's room
   to draw and the canvas doesn't compete with on-screen keyboards. */
@media (max-width: 768px) {
    .sig-pad-overlay {
        padding: 0;
    }
    .sig-pad-modal {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .sig-pad-canvas-wrap {
        flex: 1;
        height: auto;
        min-height: 200px;
        margin: 12px;
    }
}

.contract-stage-summary {
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    padding: 12px 14px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.02);
}

.contract-stage-summary.valid {
    border-color: rgba(76, 175, 80, 0.5);
}

.contract-stage-summary.invalid {
    border-color: rgba(231, 76, 60, 0.55);
}

.contract-stage-summary-total {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.contract-stage-summary-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.contract-stage-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contract-stage-row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(120px, 0.8fr) auto;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    background: rgba(255, 255, 255, 0.015);
    align-items: end;
}

.contract-stage-row-fixed {
    background: rgba(255, 138, 61, 0.08);
    border-color: rgba(255, 138, 61, 0.35);
}

.contract-stage-label-group,
.contract-stage-percent-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.contract-stage-label-group label,
.contract-stage-percent-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.contract-stage-percent-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contract-stage-percent-input-wrap input {
    flex: 1;
}

.contract-stage-percent-input-wrap span {
    font-size: 13px;
    color: var(--text-secondary);
}

.contract-stage-fixed-badge {
    align-self: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-primary);
    white-space: nowrap;
}

.contract-stage-remove-btn {
    width: auto;
    padding: 10px 14px;
}

.contract-stage-remove-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.contract-stage-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.contract-stage-note {
    margin: 10px 0 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .contract-stage-row {
        grid-template-columns: 1fr;
    }

    .contract-stage-fixed-badge {
        justify-self: start;
    }

    .contract-stage-remove-btn {
        justify-self: start;
    }
}

.settings-logout-btn {
    background: transparent;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

@media (hover: hover) {
    .settings-logout-btn:hover {
        background: #e74c3c;
        color: #fff;
    }
}

/* ============================================
   INVOICE SUB-TAB CONTAINERS
   ============================================ */

.invoice-subtab {
    display: none;
}

.invoice-subtab.active {
    display: block;
}

/* ============================================
   QUOTES & INVOICES LIST VIEWS
   ============================================ */

.invoices-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invoice-card {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 16px;
    box-shadow: var(--card-shadow);
}

.invoice-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.invoice-card-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.invoice-card-header .invoice-date {
    font-size: 13px;
    color: var(--tab-inactive);
}

.invoice-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 14px;
    margin-bottom: 12px;
}

.invoice-card-body span {
    white-space: nowrap;
}

.invoice-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.invoice-card-actions button {
    width: auto;
    padding: 6px 14px;
    font-size: 13px;
}

/* Status badges for invoices/quotes */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--card-radius);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-draft { background: #6a6257; color: #f4eadb; }
.status-sent { background: #1565C0; color: #fff; }
.status-viewed { background: #6A1B9A; color: #fff; }
.status-accepted { background: #2E7D32; color: #fff; }
.status-paid { background: #4CAF50; color: #fff; }
.status-overdue { background: #E65100; color: #fff; }
.status-cancelled { background: #B71C1C; color: #fff; }
.status-converted { background: #00695C; color: #fff; cursor: pointer; }

/* ============================================
   COMPACT DOCUMENT ROWS (View Sent Quotes/Invoices)
   Minimal rows that open a detail popup on click.
   ============================================ */
.doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s, transform var(--dur-fast) ease, background var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .doc-row:hover {
        border-color: var(--accent-primary);
    }
}

.doc-row-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.doc-row-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.doc-row-number {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.doc-row-client {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-row-date {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.doc-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.doc-row-amount {
    font-weight: 600;
    font-size: 14px;
    color: var(--accent-primary);
}

.doc-rows-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.draft-row-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.draft-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.draft-row-actions button {
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
}

/* ============================================
   DOCUMENT DETAIL POPUP MODAL
   Reusable popup for quote/invoice full details.
   ============================================ */
.doc-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 12px);
    animation: fadeIn 0.15s ease;
}

.doc-popup {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--card-radius);
    width: 100%;
    max-width: 500px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: popupSlideUp 0.2s ease;
    overflow: hidden;
}

.doc-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border-primary);
    gap: 10px;
}

.doc-popup-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.doc-popup-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.doc-popup-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.doc-popup-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.doc-popup-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary);
}

.doc-popup-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-popup-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.doc-popup-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.doc-popup-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 14px;
    gap: 12px;
}

.doc-popup-label {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.doc-popup-value {
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

.doc-popup-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 4px 0;
}

/* Line items table inside the popup */
.doc-popup-items {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.doc-popup-items th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-primary);
}

.doc-popup-items th:last-child,
.doc-popup-items td:last-child {
    text-align: right;
}

.doc-popup-items td {
    padding: 8px 8px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: top;
}

.doc-popup-items .item-desc {
    max-width: 200px;
    word-break: break-word;
}

.doc-popup-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    padding: 8px 0;
}

.doc-popup-total-row {
    display: flex;
    gap: 16px;
    font-size: 14px;
}

.doc-popup-total-row.grand-total {
    font-weight: 700;
    font-size: 16px;
    color: var(--accent-primary);
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-primary);
}

.doc-popup-notes {
    background: rgba(255,255,255,0.04);
    border-radius: var(--button-radius);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.doc-popup-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.doc-popup-footer button {
    padding: 8px 16px;
    font-size: 13px;
    width: auto;
}

/* ============================================
    IN-APP FILE VIEWER MODAL
    Full-screen overlay for PDFs and receipt images.
    ============================================ */
.pdf-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-top) + 16px) 20px calc(var(--safe-bottom) + 16px);
    animation: fadeIn 0.15s ease;
    overflow: hidden;
    /* Use dynamic viewport height so iOS Safari URL bar collapse doesn't
       chop off the close button at the top of the header. */
    height: 100dvh;
}

.pdf-viewer-shell {
    width: min(1180px, 100%);
    height: min(92vh, 920px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.pdf-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* On iOS the shell goes edge-to-edge (100dvh) on mobile, so the header
       sits flush with the top of the screen — under the status bar. Adding
       safe-area-top to the padding pushes the close X clear of the clock /
       battery indicator on notched iPhones. */
    padding: max(10px, calc(var(--safe-top) + 4px)) 16px 10px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    /* Stay pinned to the top of the shell so the close button is always
       reachable, even if the iframe takes focus or scrolls oddly. */
    position: sticky;
    top: 0;
    z-index: 2;
}

.pdf-viewer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-viewer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pdf-viewer-btn {
    background: none;
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}

@media (hover: hover) {
    .pdf-viewer-btn:hover {
        background: rgba(255,255,255,0.08);
        border-color: var(--accent-primary);
    }
}

.pdf-viewer-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.pdf-viewer-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

@media (hover: hover) {
    .pdf-viewer-close:hover {
        color: var(--text-primary);
    }
}

.pdf-viewer-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 20px;
    min-height: 0;
    background: #151513;
}

.pdf-viewer-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

.pdf-viewer-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Lock background scroll while viewing a PDF — prevents iOS rubber-band
   and stops the underlying page being draggable behind the iframe. */
body.pdf-viewer-open,
body.app-scroll-locked {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* On mobile, give the viewer the entire screen so the PDF page width
   fits the viewport and there's room to read without pinch-zooming. */
@media (max-width: 768px) {
    .pdf-viewer-overlay {
        padding: 0;
        height: 100dvh;
    }
    .pdf-viewer-shell {
        width: 100vw;
        width: 100dvw;
        /* dvh only — vh on iOS WKWebView is the LARGER viewport which
           includes the area behind the home indicator, causing the modal
           to overflow past the bottom safe area. */
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border: none;
    }
    .pdf-viewer-body {
        padding: 0;
    }
    /* Bigger tap target for the close X so portrait mobile users don't
       have to rotate the device just to dismiss the viewer. */
    .pdf-viewer-close {
        min-width: 44px;
        min-height: 44px;
        font-size: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pdf-viewer-btn {
        min-height: 40px;
    }
}

.pdf-viewer-loading {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pdf-viewer-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #444);
    border-top-color: var(--primary-color, #4a9eff);
    border-radius: 50%;
    animation: pdfSpin 0.8s linear infinite;
}

@keyframes pdfSpin {
    to { transform: rotate(360deg); }
}

/* ============================================
   JOBS LIST VIEW
   ============================================ */

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.job-card {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 16px;
    box-shadow: var(--card-shadow);
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.job-card-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.job-card-body {
    font-size: 14px;
    margin-bottom: 12px;
}

.job-card-body .job-detail {
    margin-bottom: 4px;
}

.job-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.job-card-actions button {
    width: auto;
    padding: 6px 14px;
    font-size: 13px;
}

/* ============================================
   MARK AS PAID MODAL
   ============================================ */

/* Receipt scans still being read by the server — rows above the Expenses
   list (renderReceiptScanRows). Quiet by default, red edge on failure. */
.fin-row.fin-row-pending {
    cursor: default;
    opacity: 0.85;
    border-left: 3px solid var(--accent-primary);
}
.fin-row.fin-row-pending-failed {
    opacity: 1;
    border-left-color: var(--toast-error);
}
.fin-row-pending-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.fin-row-pending-right .toast-spinner {
    margin: 0;
}

.payment-modal-overlay,
.job-address-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-top) + 16px) 20px calc(var(--safe-bottom) + 16px);
}

.payment-modal {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
}

.payment-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
}

.payment-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.payment-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.payment-modal-actions button {
    width: auto;
    padding: 8px 18px;
}

.btn-success {
    background: #4CAF50;
    color: #fff;
}

@media (hover: hover) {
    .btn-success:hover {
        background: #43A047;
    }
}

/* ============================================
   SEGMENTED PILL TOGGLE (Simple / Itemised)
   ============================================ */
.segmented-pill {
    display: inline-flex;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 18px;
}

.pill-option {
    padding: 9px 24px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: var(--font-family);
    box-shadow: none;
    width: auto;
    letter-spacing: 0.02em;
}

@media (hover: hover) {
    .pill-option:hover {
        color: var(--text-primary);
        background: none;
        transform: none;
    }
}

.pill-option:active {
    transform: none;
}

.pill-option.active {
    background: var(--accent-primary);
    color: #fff;
}

/* ============================================
   VIEW TOGGLE HEADER (Builder ↔ History)
   ============================================ */
.tab-view-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.view-toggle-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.03);
    font-size: 14px;
    color: var(--accent-primary);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

@media (hover: hover) {
    .view-toggle-link:hover {
        text-decoration: none;
        background: var(--bg-tertiary);
        border-color: var(--accent-primary);
        color: var(--text-primary);
    }
}

.view-toggle-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

/* ============================================
   SIMPLE MODE (description + price builder)
   ============================================ */
.simple-mode-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--button-radius);
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 14px;
    resize: vertical;
}

.simple-mode-textarea::placeholder {
    color: var(--text-secondary);
}

.simple-mode-price {
    width: 100%;
    max-width: 200px;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--button-radius);
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 16px;
}

/* ============================================
   PIPELINE (Jobs tab)
   ============================================ */
.pipeline-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.pipeline-toolbar .sub-tabs {
    margin-bottom: 0;
    flex-shrink: 0;
}

.jobs-drafts-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 138, 61, 0.18);
    color: var(--button-color);
    font-size: 11px;
    font-weight: 700;
}

.pipeline-filter-pill {
    margin-bottom: 0;
    align-self: flex-start;
}

.pipeline-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--button-radius);
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 14px;
    margin-bottom: 0;
}

.pipeline-search::placeholder {
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    .pipeline-toolbar {
        flex-direction: row;
        align-items: center;
    }

    .pipeline-search {
        flex: 1;
    }
}

.pipeline-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pipeline-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 0 transparent;
    transition: border-color 0.2s, box-shadow 0.2s, transform var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
    /* Cursor: pointer + scoped hover. Without cursor: pointer, iOS WKWebView
       treats the first tap as "show :hover" and the second as the click —
       making cards feel double-tappy. The (hover: hover) media query scopes
       the hover style to actual mouse devices so phones bypass it entirely. */
    cursor: pointer;
}

@media (hover: hover) {
    .pipeline-card:hover {
        border-color: var(--accent-primary);
    }
}

.pipeline-card.pipeline-quote_pending {
    box-shadow: inset 3px 0 0 #1565C0;
}

.pipeline-card.pipeline-deposit_due,
.pipeline-card.pipeline-job_setup_pending,
.pipeline-card.pipeline-invoice_sent {
    box-shadow: inset 3px 0 0 #E65100;
}

.pipeline-card.pipeline-in_progress {
    box-shadow: inset 3px 0 0 #2E7D32;
}

.pipeline-card.pipeline-completed {
    box-shadow: inset 3px 0 0 var(--toast-success);
}

.pipeline-card.pipeline-completed {
    opacity: 0.6;
}

.pipeline-card.pipeline-cancelled {
    box-shadow: inset 3px 0 0 #B71C1C;
    opacity: 0.55;
}

/* ── Select Mode (reusable for pipeline + leads) ── */

.select-mode-trigger {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.select-mode-enter-btn {
    background: none;
    border: 1px solid var(--border-color);
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
    .select-mode-enter-btn:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-primary);
    }
}

.select-mode-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: var(--card-radius);
    background: rgba(183, 28, 28, 0.08);
    border: 1px solid rgba(183, 28, 28, 0.24);
    color: var(--text-secondary);
    font-size: 14px;
}
.select-mode-done-btn {
    background: none;
    border: 1px solid var(--border-color);
    box-shadow: none;
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.select-mode-count {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}
.select-mode-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.select-mode-all-btn {
    background: none;
    border: 1px solid var(--border-color);
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.select-mode-delete-btn {
    background: rgba(183, 28, 28, 0.15);
    border: 1px solid rgba(183, 28, 28, 0.4);
    box-shadow: none;
    color: var(--toast-error);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.select-mode-delete-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Checkmark circle shown on cards in select mode */
.select-mode-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    font-size: 14px;
    color: transparent;
    margin-right: 6px;
    transition: all 0.15s;
}
.select-mode-check.selected {
    background: var(--toast-error);
    border-color: var(--toast-error);
    color: #fff;
}

.pipeline-card.pipeline-selected {
    border: 1px solid rgba(183, 28, 28, 0.5);
    background: rgba(183, 28, 28, 0.06);
}

.pipeline-card-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
}

/* Top row: client name + ref on left, amount + status on right */
.pipeline-compact-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.pipeline-card {
    cursor: pointer;
}

/* Left side: client name, doc number, suburb */
.pipeline-compact-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}

/* Right side: amount, status badge, timer */
.pipeline-compact-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Bottom details row: description, phone, progress */
.pipeline-compact-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pipeline-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--accent-primary);
    text-decoration: none;
    width: fit-content;
}

@media (hover: hover) {
    .pipeline-phone:hover {
        color: var(--text-primary);
    }
}

/* Pipeline card quick-action contact buttons (call, SMS, maps, email) */
.pipeline-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.pipeline-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--button-radius);
    border: 1px solid var(--card-border);
    background: var(--input-background);
    color: var(--accent-primary);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .pipeline-contact-btn:hover {
        background: var(--button-color);
        border-color: var(--button-color);
        color: var(--button-text);
    }
}

.pipeline-contact-btn:active {
    transform: translateY(1px);
}

.pipeline-contact-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

@media (max-width: 480px) {
    .pipeline-contact-actions {
        gap: 6px;
    }
}

.pipeline-next-stage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: fit-content;
    padding: 5px 8px;
    border: 1px solid rgba(255, 138, 61, 0.25);
    border-radius: var(--button-radius);
    background: rgba(255, 138, 61, 0.08);
    font-size: 12px;
    line-height: 1.35;
}

.pipeline-next-stage-label {
    color: var(--text-secondary);
    font-weight: 600;
}

.pipeline-next-stage-name {
    color: var(--text-primary);
    font-weight: 600;
}

.pipeline-next-stage-amount {
    color: var(--accent-primary);
    font-weight: 600;
}

.pipeline-contract-warning {
    width: 100%;
}

.pipeline-contract-warning-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 5px 9px;
    border: 1px solid rgba(255, 193, 7, 0.28);
    border-radius: var(--radius-pill);
    background: rgba(255, 193, 7, 0.08);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Financial progress bar */
.pipeline-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.pipeline-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.pipeline-progress-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pipeline-progress-text {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.pipeline-client {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-ref {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.pipeline-amount {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 14px;
}

.pipeline-timer {
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.08);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.pipeline-timer.pipeline-expired,
.pipeline-timer.pipeline-overdue {
    color: var(--toast-error);
    background: rgba(244, 67, 54, 0.15);
}

.pipeline-timer.pipeline-paused {
    color: #ff9800;
    background: rgba(255, 152, 0, 0.15);
}

.pipeline-timer-controls {
    margin-top: 8px;
}

.pipeline-timer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    width: auto;
}

/* Suburb tag shown in collapsed row */
.pipeline-suburb {
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    padding: 1px 8px;
    border-radius: var(--button-radius);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Hidden detail panel — shown when card has .expanded class */
.pipeline-card-detail {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid var(--card-border);
}

.pipeline-card.expanded .pipeline-card-detail {
    display: block;
}

/* ---- Contact detail list (popup) ---- */
/* Spelled-out rows: Phone / Address / Email each on their own row, with
   the value on a second line and large tappable action buttons on the
   right. Designed for thumb-friendly mobile use. */
.contact-detail-list {
    display: flex;
    flex-direction: column;
    margin: 14px 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.contact-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.contact-detail-row:last-child {
    border-bottom: none;
}

.contact-detail-info {
    flex: 1;
    min-width: 0; /* allow value text to truncate cleanly */
}

.contact-detail-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.contact-detail-value {
    font-size: 15px;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.3;
}

.contact-detail-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.contact-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--card-radius);
    background: var(--accent-primary);
    color: var(--bg-primary);
    text-decoration: none;
    transition: transform 0.12s ease, filter 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (hover: hover) {
    .contact-action-btn:hover {
        filter: brightness(1.08);
        color: var(--bg-primary);
    }
}

.contact-action-btn:active {
    transform: scale(0.94);
}

.contact-action-btn svg {
    display: block;
}

/* On very narrow screens, stack the action buttons under the value so
   each gets its full width, but keep buttons big and tappable. */
@media (max-width: 360px) {
    .contact-detail-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .contact-detail-actions {
        justify-content: flex-end;
    }
}

/* ---- Contact links section (phone, email, address) ---- */
.pipeline-contact-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--button-radius);
}

.pipeline-contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--accent-primary);
    text-decoration: none;
    padding: 4px 0;
    word-break: break-word;
    transition: color 0.15s;
}

@media (hover: hover) {
    .pipeline-contact-link:hover {
        color: var(--text-primary);
    }
}

.pipeline-contact-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.pipeline-address-link {
    color: var(--text-secondary);
}

@media (hover: hover) {
    .pipeline-address-link:hover {
        color: var(--accent-primary);
    }
}

/* On small screens, hide contact text labels — show icons only.
   Users can long-press/hover to see the title attribute tooltip. */
@media (max-width: 480px) {
    .pipeline-contact-section {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .pipeline-contact-link {
        padding: 8px;
        border-radius: var(--radius-sm);
        background: rgba(255,255,255,0.05);
    }
    .pipeline-contact-label {
        display: none;
    }
}

.pipeline-detail-row {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.pipeline-detail-row strong {
    color: var(--text-primary);
}

.pipeline-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pipeline-actions button {
    padding: 6px 14px;
    font-size: 13px;
    width: auto;
}

.pipeline-drive-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 13px;
    width: auto;
    text-decoration: none;
}

/* ============================================
   PIPELINE POPUP MODAL
   ============================================ */
.pipeline-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 12px);
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pipeline-popup {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--card-radius);
    width: 100%;
    max-width: 540px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    animation: popupSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* Premium top accent edge — a bronze gradient hairline across the top. */
.pipeline-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--button-color), transparent);
    opacity: 0.85;
    z-index: 2;
}

@keyframes popupSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.pipeline-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 16px 12px;
    background: linear-gradient(180deg, rgba(255, 138, 61, 0.06), transparent);
    border-bottom: 1px solid var(--border-primary);
    gap: 10px;
}

.pipeline-popup-header-main {
    flex: 1;
    min-width: 0;
}

.pipeline-popup-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: var(--button-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
    .pipeline-popup-close:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-primary);
    }
}

.pipeline-popup-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    word-break: break-word;
}

.pipeline-popup-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.pipeline-popup-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── HUB HERO STAT ROW ──
   Three stat tiles at the top of the popup giving an at-a-glance
   summary: total amount, status, time remaining (or % paid). */
.pipeline-hub-hero {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.hub-stat {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 70px;
}
.hub-stat-primary {
    background: linear-gradient(135deg, rgba(255, 138, 61, 0.12), rgba(255, 138, 61, 0.04));
    border-color: rgba(255, 138, 61, 0.3);
}
.hub-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    word-break: break-word;
}
.hub-stat-primary .hub-stat-value {
    color: var(--accent-primary, #ff8a3d);
    font-size: 22px;
}
.hub-stat-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 2px;
}
.hub-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
}
.hub-stat-badge {
    font-size: 12px;
}
.hub-stat-paused { color: var(--accent-primary, #ff8a3d); }
.hub-stat-expired { color: var(--toast-error, #e57373); }
.hub-stat-overdue { color: var(--toast-error, #e57373); }
.hub-stat-success { color: var(--toast-success, #81c784); }

/* ── HUB CARDS ──
   Each section in the popup body (Contact, Description, Financials,
   etc.) is wrapped in a card so the popup feels like a structured hub
   instead of a flat list of details. */
.pipeline-hub-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pipeline-hub-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
}
.pipeline-hub-card-body {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
}
/* When inside a hub card, the contact/financial chunks should not
   add their own background — the card already provides one. */
.pipeline-hub-card .pipeline-contact-section,
.pipeline-hub-card .pipeline-financial-summary {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.pipeline-popup-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pipeline-popup-footer-sticky {
    background: var(--bg-secondary);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
}

.pipeline-popup-footer button,
.pipeline-popup-footer a {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    width: auto;
}

/* On mobile the action buttons stack and fill the row so the
   primary action is always thumb-reachable. */
@media (max-width: 480px) {
    .pipeline-hub-hero {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .hub-stat {
        padding: 10px 4px;
        min-height: 64px;
    }
    .hub-stat-value { font-size: 17px; }
    .hub-stat-primary .hub-stat-value { font-size: 18px; }
    .hub-stat-label { font-size: 9px; }

    .pipeline-popup-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .pipeline-popup-footer button,
    .pipeline-popup-footer a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .pipeline-popup-footer .pipeline-actions-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
}

/* ============================================
   OVERDUE COUNTDOWN TIMELINE (final invoices)
   ============================================ */
.countdown-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-radius: var(--button-radius);
    border: 1px solid var(--border-primary);
}

.countdown-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
}

.countdown-stage svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.countdown-stage.countdown-done {
    color: var(--toast-success);
}

.countdown-stage.countdown-done svg {
    opacity: 1;
}

.countdown-stage.countdown-due {
    color: var(--toast-error);
    font-weight: 600;
}

.countdown-stage.countdown-due svg {
    opacity: 1;
}

.countdown-stage.countdown-paused {
    color: var(--accent-primary);
    font-style: italic;
}

/* ============================================
   LINKED DOCUMENTS (clickable doc trail on job cards)
   ============================================ */
.pipeline-linked-docs {
    padding: 10px 12px;
    background: var(--bg-primary);
    border-radius: var(--button-radius);
    border: 1px solid var(--border-primary);
}

.pipeline-linked-docs-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.pipeline-linked-docs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pipeline-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--accent-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
    .pipeline-doc-link:hover {
        background: var(--accent-primary);
        color: var(--bg-primary);
    }
}

.pipeline-doc-link svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.contract-stage-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contract-stage-timeline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.contract-stage-timeline-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contract-stage-timeline-main {
    min-width: 0;
    flex: 1;
}

.contract-stage-timeline-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.contract-stage-timeline-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.contract-stage-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.contract-stage-status-pending {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.contract-stage-status-ready_to_invoice {
    background: rgba(255, 138, 61, 0.16);
    color: var(--accent-primary);
}

.contract-stage-status-sent {
    background: rgba(21, 101, 192, 0.18);
    color: #90caf9;
}

.contract-stage-status-paid {
    background: rgba(76, 175, 80, 0.18);
    color: #81c784;
}

@media (max-width: 520px) {
    .contract-stage-timeline-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   HIGHLIGHT CARD (flash animation for viewDocument)
   ============================================ */
@keyframes highlightFlash {
    0% { box-shadow: 0 0 0 2px var(--accent-primary); }
    50% { box-shadow: 0 0 12px 2px var(--accent-primary); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.highlight-card {
    animation: highlightFlash 1s ease-out 2;
}

/* ============================================
   5-TAB BAR — slightly smaller padding on mobile
   ============================================ */
@media (max-width: 420px) {
    .tab-bar-item {
        padding: 6px 6px;
        font-size: 10px;
    }

    .tab-bar-item svg {
        width: 22px;
        height: 22px;
    }
}

/* ============================================
   SETTINGS TABS (General | Templates)
   ============================================ */
.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
    background: var(--card-bg);
}

.settings-tab {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    width: auto;
}

@media (hover: hover) {
    .settings-tab:hover {
        color: var(--text-primary);
        background: none;
    }
}

.settings-tab.active {
    color: var(--accent, #ff8a3d);
    border-bottom-color: var(--accent, #ff8a3d);
}

/* ============================================
   TEMPLATE EDITOR — Card Grid + Editor Modal
   Professional template editor with Insert Variable dropdown
   ============================================ */

/* ============================================
   GOOGLE PLACES DROPDOWN (.pac-container is appended to <body> by Google)
   Google's own stylesheet gives it z-index 1000, which sat UNDER the
   Add Client modal and the client popup (both 1100) — the suggestions
   were painted behind the overlay on those screens, on every device.
   Keep it above every overlay that can hold an address box (max 1100)
   and below toasts / confirm dialogs (10200). Items are enlarged for
   fingers: Google's defaults are 11px text in 30px rows.
   ============================================ */
.pac-container {
    z-index: 10150 !important;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    font-family: var(--font-family);
}

.pac-item {
    padding: 10px 12px;
    line-height: 1.35;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

.pac-item-query {
    font-size: 15px;
}

/* --- Template Card Grid --- */
.template-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 520px) {
    .template-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.template-card {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--card-radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

@media (hover: hover) {
    .template-card:hover {
        border-color: rgba(255, 138, 61, 0.3);
        box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(255, 138, 61, 0.1);
    }
}

/* Top row: icon + meta info */
.template-card-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Category icon circle */
.template-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-icon-quote {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
}

.template-icon-invoice {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
}

.template-icon-recovery {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.template-icon-contract {
    background: rgba(168, 85, 247, 0.1);
    color: #c084fc;
}

.template-icon-courtesy {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.template-card-meta {
    flex: 1;
    min-width: 0;
}

.template-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.template-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.template-card-customised {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--accent, #ff8a3d);
    background: rgba(255, 138, 61, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* "Default" = still the standard wording (muted, so Customised stands out) */
.template-card-default {
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.04);
}

/* Automatic / You send it tag (bottom-left of each card) */
.template-card-mode-auto {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.25);
    background: rgba(34, 197, 94, 0.08);
}

.template-card-mode-manual {
    color: var(--accent, #ff8a3d);
    border-color: rgba(255, 138, 61, 0.25);
    background: rgba(255, 138, 61, 0.08);
}

.template-card-desc {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    opacity: 0.8;
}

/* Bottom row: tab indicators + edit button */
.template-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}

.template-card-tabs {
    display: flex;
    gap: 6px;
}

.template-card-tab-indicator {
    font-size: 10px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1;
    font-weight: 500;
}

/* Arrow indicator on clickable template cards */
.template-card-arrow {
    flex-shrink: 0;
    color: var(--text-tertiary);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.template-card:hover .template-card-arrow {
    opacity: 1;
    color: var(--accent, #ff8a3d);
}

/* --- Template Editor Modal (full-screen overlay) --- */
.template-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 0;
}

.template-editor-modal {
    background: var(--card-bg);
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .template-editor-overlay {
        padding: 20px 16px;
    }
    .template-editor-modal {
        min-height: auto;
        max-width: 800px;
        max-height: 94vh;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }
}

/* Editor header with badge + title */
.template-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.template-editor-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.template-editor-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 5px;
    line-height: 1;
}

/* Reuse the category badge colours from cards */
.template-badge-quote {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}
.template-badge-invoice {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}
.template-badge-recovery {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}
.template-badge-contract {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
}
.template-badge-courtesy {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.template-editor-header h2,
.template-editor-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    text-align: center;
}

/* Back arrow button (left side of header) */
.template-editor-back {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--button-radius);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
@media (hover: hover) {
    .template-editor-back:hover {
        color: var(--text-primary);
        background: rgba(255,255,255,0.06);
    }
}

/* Save button (right side of header) */
.template-editor-save-btn {
    background: var(--accent-primary);
    color: var(--button-text);
    border: none;
    border-radius: var(--button-radius);
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
    box-shadow: none;
    width: auto;
}
@media (hover: hover) {
    .template-editor-save-btn:hover {
        background: var(--accent-secondary);
    }
}
.template-editor-save-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.template-editor-close {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 26px;
    cursor: pointer;
    padding: 4px 8px;
    width: auto;
    line-height: 1;
    border-radius: var(--button-radius);
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
    .template-editor-close:hover {
        color: var(--text-primary);
        background: rgba(255,255,255,0.06);
    }
}

/* --- Editor tab bar (Email Body | PDF Body) --- */
.template-editor-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 22px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.12);
}

.template-editor-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 11px 20px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    width: auto;
}

@media (hover: hover) {
    .template-editor-tab:hover {
        color: var(--text-primary);
        background: none;
    }
}

.template-editor-tab.active {
    color: var(--accent, #ff8a3d);
    border-bottom-color: var(--accent, #ff8a3d);
}

/* --- Subject input row --- */
.template-editor-subject-row {
    padding: 16px 22px 0;
    flex-shrink: 0;
}

.template-editor-subject-row label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 6px;
    opacity: 0.7;
}

.template-editor-subject-row input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--button-radius);
    background: rgba(0,0,0,0.2);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.template-editor-subject-row input:focus {
    outline: none;
    border-color: var(--accent, #ff8a3d);
    box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.1);
}

/* --- Insert Variable Dropdown --- */
.iv-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    background: rgba(0,0,0,0.08);
}

.iv-bar-wrapper {
    position: relative;
}

.iv-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #ff8a3d);
    background: rgba(255, 138, 61, 0.06);
    border: 1px solid rgba(255, 138, 61, 0.2);
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: all 0.15s;
    width: auto;
    box-shadow: none;
    white-space: nowrap;
}

@media (hover: hover) {
    .iv-trigger-btn:hover {
        background: rgba(255, 138, 61, 0.12);
        border-color: rgba(255, 138, 61, 0.35);
    }
}

.iv-trigger-btn.iv-open {
    background: rgba(255, 138, 61, 0.15);
    border-color: var(--accent, #ff8a3d);
}

.iv-chevron {
    transition: transform 0.2s;
}

.iv-trigger-btn.iv-open .iv-chevron {
    transform: rotate(180deg);
}

.iv-bar-hint {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.5;
}

@media (max-width: 480px) {
    .iv-bar-hint {
        display: none;
    }
}

/* The floating dropdown panel */
.iv-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 300px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--card-bg, #16213e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--card-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 100;
    padding: 6px 0;
}

.iv-dropdown.hidden {
    display: none;
}

/* Category header inside the dropdown */
.iv-dropdown-category {
    padding: 0;
}

.iv-dropdown-category + .iv-dropdown-category {
    border-top: 1px solid rgba(255,255,255,0.06);
}

.iv-dropdown-category-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    padding: 10px 16px 4px;
    pointer-events: none;
    opacity: 0.6;
}

/* Individual variable item */
.iv-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 16px;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
}

@media (hover: hover) {
    .iv-dropdown-item:hover {
        background: rgba(255, 138, 61, 0.08);
    }
}

.iv-dropdown-item-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.iv-dropdown-item-tag {
    font-size: 10px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--accent, #ff8a3d);
    opacity: 0.5;
    white-space: nowrap;
}

/* Scrollbar styling for the dropdown */
.iv-dropdown::-webkit-scrollbar {
    width: 4px;
}

.iv-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.iv-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

/* --- Quill editor container --- */
.template-editor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 280px;
}

/* Placeholder pill chips — atomic inline embeds in the Quill editor */
.ql-placeholder {
    display: inline;
    background: rgba(255, 138, 61, 0.12);
    color: var(--accent, #ff8a3d);
    border: 1px solid rgba(255, 138, 61, 0.25);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
    user-select: all;
    vertical-align: baseline;
}

@media (hover: hover) {
    .ql-placeholder:hover {
        background: rgba(255, 138, 61, 0.2);
        border-color: rgba(255, 138, 61, 0.4);
    }
}


/* Quill dark-theme overrides */
.template-editor-body .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
}

.template-editor-body .ql-container.ql-snow {
    border: none;
    flex: 1;
    overflow-y: auto;
    font-size: 14px;
}

.template-editor-body .ql-editor {
    background: rgba(0,0,0,0.2);
    color: var(--text-primary);
    padding: 22px 24px;
    min-height: 220px;
    line-height: 1.8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.template-editor-body .ql-editor.ql-blank::before {
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.5;
}

/* Quill toolbar icon colours for dark theme */
.template-editor-body .ql-snow .ql-stroke {
    stroke: var(--text-secondary);
}

.template-editor-body .ql-snow .ql-fill {
    fill: var(--text-secondary);
}

.template-editor-body .ql-snow .ql-picker-label {
    color: var(--text-secondary);
}

.template-editor-body .ql-snow button:hover .ql-stroke,
.template-editor-body .ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: var(--text-primary);
}

.template-editor-body .ql-snow button:hover .ql-fill,
.template-editor-body .ql-snow .ql-picker-label:hover .ql-fill {
    fill: var(--text-primary);
}

.template-editor-body .ql-snow button.ql-active .ql-stroke {
    stroke: var(--accent, #ff8a3d);
}

.template-editor-body .ql-snow button.ql-active .ql-fill {
    fill: var(--accent, #ff8a3d);
}

.template-editor-body .ql-snow .ql-picker-options {
    background: var(--card-bg, #16213e);
    border-color: rgba(255,255,255,0.1);
}

.template-editor-body .ql-snow .ql-picker-item {
    color: var(--text-secondary);
}

@media (hover: hover) {
    .template-editor-body .ql-snow .ql-picker-item:hover {
        color: var(--text-primary);
    }
}

/* --- Editor footer (Reset + Preview + Save) --- */
.template-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    gap: 12px;
    background: rgba(0,0,0,0.08);
}

.template-editor-footer-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.template-editor-footer button {
    width: auto;
    padding: 9px 20px;
    font-size: 13px;
    border-radius: var(--button-radius);
}

.template-editor-reset-btn {
    font-size: 12px !important;
    padding: 7px 14px !important;
    color: var(--text-secondary) !important;
    border-color: rgba(255,255,255,0.08) !important;
    background: transparent !important;
}

@media (hover: hover) {
    .template-editor-reset-btn:hover {
        color: var(--error, #e74c3c) !important;
        border-color: var(--error, #e74c3c) !important;
        background: rgba(231, 76, 60, 0.08) !important;
    }
}

/* --- Editor strip: when it goes out + what is attached --- */
.template-editor-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.template-editor-strip-text {
    flex: 1;
    min-width: 0;
}

.template-editor-strip-tag {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
}

.template-editor-strip-tag-auto {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}

.template-editor-strip-tag-manual {
    color: var(--accent, #ff8a3d);
    background: rgba(255, 138, 61, 0.12);
}

/* --- Edit | Preview pill (narrow screens; hidden on desktop where both panes show) --- */
.template-editor-view-pill {
    margin: 12px 22px 0;
    align-self: flex-start;
    flex-shrink: 0;
}

.template-editor-view-pill .pill-option {
    padding: 7px 20px;
}

/* --- Workspace: editor pane + live preview pane --- */
.template-editor-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.template-editor-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.template-editor-pane-edit {
    flex: 1;
}

.template-editor-pane-preview {
    flex: 1;
    background: #f3f0eb; /* same paper tone as the send preview's render pane */
    border-top: 1px solid var(--border-color);
}

.template-editor-workspace[data-view="edit"] .template-editor-pane-preview,
.template-editor-workspace[data-view="preview"] .template-editor-pane-edit {
    display: none;
}

.template-editor-preview-title {
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5f5a52;
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.template-editor-preview-subject {
    padding: 10px 16px;
    font-size: 13px;
    color: #1a1a1a;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    word-break: break-word;
}

.template-editor-preview-subject strong {
    color: #5f5a52;
    font-weight: 600;
    margin-right: 4px;
}

.template-editor-preview-frame-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.template-editor-preview-frame {
    display: block;
    width: 100%;
    border: 0;
    background: #ffffff;
    min-height: 360px;
}

.template-editor-preview-hint {
    padding: 8px 16px 10px;
    font-size: 11px;
    color: #7a746b;
}

/* Desktop: editor and preview side by side, no switch */
@media (min-width: 1024px) {
    .template-editor-modal {
        max-width: 1180px;
    }

    .template-editor-view-pill {
        display: none;
    }

    .template-editor-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .template-editor-workspace[data-view="edit"] .template-editor-pane-preview,
    .template-editor-workspace[data-view="preview"] .template-editor-pane-edit {
        display: flex;
    }

    .template-editor-pane-preview {
        border-top: 0;
        border-left: 1px solid var(--border-color);
    }

    .template-editor-preview-frame {
        height: 100%;
        min-height: 0;
    }
}

/* --- Template preview overlay (shows rendered result) --- */
.template-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 0;
}

.template-preview-modal {
    background: #ffffff;
    width: 100%;
    max-width: 620px;
    /* dvh, NOT vh — on iOS WKWebView, 100vh = the LARGER viewport (full
       screen including the area behind the home indicator), so a modal
       sized to 100vh inside a 100dvh-padded overlay overflows past the
       bottom safe area. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Mobile: full-screen PDF preview */
@media (max-width: 640px) {
    .template-preview-overlay {
        padding: calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + 8px) 0;
        height: 100dvh;
    }
    .template-preview-modal {
        width: 100vw;
        width: 100dvw;
        height: 100%;
        min-height: 0; /* let the height: 100% rule own sizing inside the padded overlay */
        max-height: none;
        border-radius: 0;
        border: none;
    }
    .pdf-style-preview-canvas {
        overflow: auto;
    }
}

@media (min-width: 641px) {
    .template-preview-overlay {
        padding: 32px 16px;
    }
    .template-preview-modal {
        min-height: auto;
        max-height: 88vh;
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }
}

.template-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Full-screen modal on mobile — top padding absorbs the status bar */
    padding: calc(var(--safe-top) + 14px) 20px 16px;
    border-bottom: 1px solid #e5e5e5;
    background: #f8f8f8;
    flex-shrink: 0;
}

.template-preview-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.template-preview-close {
    background: none;
    border: none;
    box-shadow: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    width: auto;
    line-height: 1;
    border-radius: var(--radius-sm);
}

@media (hover: hover) {
    .template-preview-close:hover {
        color: #333;
        background: rgba(0,0,0,0.05);
    }
}

/* --- PDF preview (simulates A4 page on grey canvas) --- */
.template-preview-pdf-mode {
    background: #e0e0e0;
    max-width: 700px;
    /* Mobile: force full viewport height so iframe fills the screen */
    height: 100dvh;
    min-height: 100dvh;
}

/* On desktop, allow slight padding but still fill almost all available space */
@media (min-width: 641px) {
    .template-preview-pdf-mode {
        height: 92vh;
        min-height: auto;
        max-height: 92vh;
    }
}

.template-preview-pdf-mode .template-preview-header {
    background: #333;
    border-bottom: none;
}

.template-preview-pdf-mode .template-preview-header h3 {
    color: #fff;
    font-size: 14px;
}

.template-preview-pdf-mode .template-preview-close {
    color: #aaa;
}

@media (hover: hover) {
    .template-preview-pdf-mode .template-preview-close:hover {
        color: #fff;
        background: rgba(255,255,255,0.1);
    }
}

.template-preview-pdf-canvas {
    flex: 1;
    overflow-y: auto;
    background: #d0d0d0;
    padding: 24px 16px;
    position: relative;
}

/* Real PDF preview rendered in an iframe (1:1 match with server output) */
.template-preview-pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* Loading text while pdfmake generates the blob */
.template-preview-pdf-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* When showing an iframe instead of a page div, remove padding so iframe fills canvas */
.template-preview-pdf-canvas:has(.template-preview-pdf-iframe) {
    padding: 0;
    background: #525659;
}

/* The A4 page itself */
.template-preview-pdf-page {
    background: #ffffff;
    max-width: 595px;
    margin: 0 auto;
    padding: 48px 40px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
    border-radius: 2px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #2d2d2d;
    min-height: 600px;
}

/* PDF page typography */
.template-preview-pdf-page h2 {
    font-size: 22px;
    font-weight: 700;
    color: #ff8a3d;
    margin: 0 0 6px 0;
    letter-spacing: 0.5px;
}

.template-preview-pdf-page h3 {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 24px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e5e5;
}

.template-preview-pdf-page p {
    margin: 0 0 10px 0;
}

.template-preview-pdf-page strong {
    color: #1a1a2e;
}

.template-preview-pdf-page em {
    color: #888;
    font-style: italic;
}

/* PDF page table styling (matches pdfmake output) */
.template-preview-pdf-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 12px;
}

.template-preview-pdf-page thead th {
    background: #1a1a2e;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 8px 10px;
    text-align: left;
    border: none;
}

.template-preview-pdf-page thead th:nth-child(2) { text-align: center; }
.template-preview-pdf-page thead th:nth-child(3),
.template-preview-pdf-page thead th:nth-child(4) { text-align: right; }

.template-preview-pdf-page tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 10px;
    color: #2d2d2d;
}

.template-preview-pdf-page tbody tr:nth-child(even) td {
    background: #f9f9f9;
}

.template-preview-pdf-page tbody td:nth-child(2) { text-align: center; }
.template-preview-pdf-page tbody td:nth-child(3),
.template-preview-pdf-page tbody td:nth-child(4) { text-align: right; }

/* Totals sub-table (right-aligned, below line items) */
.template-preview-pdf-page table + table {
    margin-top: 0;
}

.template-preview-pdf-page table + table td {
    border: none;
    padding: 3px 10px;
    font-size: 10px;
}

.template-preview-pdf-page table + table tr:last-child td {
    border-top: 2px solid #ff8a3d;
    font-weight: 700;
    font-size: 13px;
    padding-top: 6px;
    color: #ff8a3d;
}

/* HR styling for document sections */
.template-preview-pdf-page hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 20px 0;
}

@media (max-width: 640px) {
    .template-editor-header {
        padding: calc(var(--safe-top) + 16px) 16px 14px;
        gap: 12px;
    }

    .template-editor-strip {
        padding: 10px 16px;
    }

    .template-editor-view-pill {
        display: flex;
        margin: 12px 16px 0;
    }

    .template-editor-view-pill .pill-option {
        flex: 1;
    }

    .template-editor-header-left {
        min-width: 0;
        gap: 8px;
    }

    .template-editor-header h2,
    .template-editor-header h3 {
        font-size: 16px;
        text-align: left;
    }

    .template-editor-subject-row {
        padding: 14px 16px 0;
    }

    .iv-bar {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
        padding: 10px 16px;
    }

    .iv-bar-wrapper {
        width: 100%;
    }

    .iv-trigger-btn {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    .iv-dropdown {
        left: 0;
        right: 0;
        width: min(100vw - 32px, 360px);
        max-height: 50vh;
    }

    .template-editor-body .ql-toolbar.ql-snow {
        padding: 8px 10px;
    }

    .template-editor-body .ql-toolbar.ql-snow .ql-formats {
        margin-right: 6px;
        margin-bottom: 4px;
    }

    .template-editor-body .ql-editor {
        padding: 18px 16px 24px;
        font-size: 16px;
        line-height: 1.7;
    }

    .template-editor-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px calc(14px + var(--safe-bottom));
    }

    .template-editor-footer-right {
        width: 100%;
        justify-content: stretch;
    }

    .template-editor-footer button,
    .template-editor-footer-right button {
        width: 100%;
        min-height: 44px;
    }

    .template-preview-header {
        padding: 14px 16px;
    }

    .template-preview-pdf-canvas {
        padding: 12px 8px;
    }

    .template-preview-pdf-page {
        max-width: none;
        width: 100%;
        padding: 24px 18px;
        min-height: auto;
        box-sizing: border-box;
    }

}

/* ============================================
   EMAIL PREVIEW MODAL (before send)
   Editable subject + HTML body + drag-drop attachments
   ============================================ */
.email-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 0;
}

.email-preview-modal {
    background: var(--card-bg);
    width: 100%;
    max-width: 900px;
    /* dvh, NOT vh — vh on iOS includes the home-indicator area which makes
       the modal taller than the visible viewport. See template-preview-modal
       for the same pattern. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .email-preview-overlay {
        padding: 40px 16px;
    }
    .email-preview-modal {
        min-height: auto;
        border-radius: var(--card-radius);
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        max-height: 90vh;
    }
}

.email-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Full-screen modal on mobile — top padding absorbs the status bar */
    padding: calc(var(--safe-top) + 16px) 20px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.email-preview-header h3 {
    margin: 0;
    font-size: 17px;
    color: var(--text-primary);
}

.email-preview-close {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    width: auto;
}

@media (hover: hover) {
    .email-preview-close:hover {
        color: var(--text-primary);
        background: none;
    }
}

.email-preview-meta {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    flex-shrink: 0;
}

.email-preview-meta-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.email-preview-meta-row:last-child {
    margin-bottom: 0;
}

.email-preview-meta-label {
    color: var(--text-secondary);
    font-weight: 600;
    min-width: 60px;
    flex-shrink: 0;
    padding-top: 6px;
}

.email-preview-meta-value {
    color: var(--text-primary);
    word-break: break-all;
    padding-top: 6px;
}

/* Editable subject input */
.email-preview-subject-row {
    align-items: flex-start;
}

.email-preview-subject-input {
    flex: 1;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    padding: 6px 10px;
    font-family: inherit;
}

.email-preview-subject-input:focus {
    outline: none;
    border-color: var(--accent-color, #ff8a3d);
}

/* Editable body area — light background to simulate email appearance */
.email-preview-body-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 120px;
}

.email-preview-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 480px;
}

.email-preview-editor-pane,
.email-preview-render-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.email-preview-render-pane {
    border-left: 1px solid var(--border-color);
    background: #f3f0eb;
}

.email-preview-pane-title {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.email-preview-body-editable {
    background: #f8f8f8;
    color: #1a1a1a;
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    outline: none;
    cursor: text;
}

.email-preview-render-frame-wrap {
    flex: 1;
    min-height: 0;
}

.email-preview-render-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

@media (max-width: 900px) {
    .email-preview-content-grid {
        grid-template-columns: 1fr;
    }

    .email-preview-render-pane {
        border-left: 0;
        border-top: 1px solid var(--border-color);
        min-height: 280px;
    }
}

/* On mobile, hide the render preview pane — editor-only view */
@media (max-width: 640px) {
    .email-preview-content-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .email-preview-render-pane {
        display: none;
    }

    .email-preview-editor-pane {
        min-height: 300px;
    }
}

.email-preview-body-editable:focus {
    box-shadow: inset 0 0 0 2px rgba(255, 138, 61, 0.3);
}

/* Style links inside the editable body */
.email-preview-body-editable a {
    color: #2563eb;
    text-decoration: underline;
}

/* Attachments section */
.email-preview-attachments-section {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.email-preview-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

@media (hover: hover) {
    .email-preview-attachment:hover {
        border-color: var(--accent-color, #ff8a3d);
        background: rgba(255, 138, 61, 0.08);
    }
}

.email-preview-attachment svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.email-preview-attachment-badge {
    background: var(--accent-color, #ff8a3d);
    color: #000;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Spinner shown while we generate the PDF on demand for preview. */
.email-preview-attachment-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-color, #ff8a3d);
    border-radius: 50%;
    margin-left: 6px;
    animation: email-preview-spin 0.8s linear infinite;
    display: inline-block;
}
@keyframes email-preview-spin {
    to { transform: rotate(360deg); }
}

/* Drag and drop zone */
.email-preview-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--border-color);
    border-radius: var(--button-radius);
    padding: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    transition: border-color 0.2s, background 0.2s;
    margin-top: 4px;
}

.email-preview-drop-zone.drag-over {
    border-color: var(--accent-color, #ff8a3d);
    background: rgba(255, 138, 61, 0.08);
}

.email-preview-browse-btn {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--accent-color, #ff8a3d);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    width: auto;
}

@media (hover: hover) {
    .email-preview-browse-btn:hover {
        background: none;
        color: var(--text-primary);
    }
}

/* Extra file list */
.email-preview-file-list {
    margin-top: 6px;
}

.email-preview-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.email-preview-file-item.clickable {
    cursor: pointer;
    border-radius: 4px;
    padding: 5px 6px;
    margin: 0 -6px;
    transition: background 0.15s;
}
@media (hover: hover) {
    .email-preview-file-item.clickable:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}

.email-preview-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.email-preview-file-size {
    color: var(--text-secondary);
    white-space: nowrap;
}

.email-preview-file-remove {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    width: auto;
    line-height: 1;
}

@media (hover: hover) {
    .email-preview-file-remove:hover {
        color: #ef4444;
        background: none;
    }
}

/* Size indicator bar */
.email-preview-size-bar {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.email-preview-size-bar.size-warn {
    color: #f59e0b;
}

.email-preview-size-bar.size-over {
    color: #ef4444;
    font-weight: 600;
}

.email-preview-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.email-preview-footer button {
    width: auto;
    padding: 10px 24px;
}

/* ============================================
   CLIENT AUTOCOMPLETE DROPDOWN
   Shows matching saved clients as the user types
   in the Name field of the Quote/Invoice builder.
   ============================================ */

.client-name-wrapper {
    position: relative;
}

.client-autocomplete-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 100;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-top: none;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.client-autocomplete-dropdown.open {
    display: block;
}

.client-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.client-autocomplete-item:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .client-autocomplete-item:hover,
    .client-autocomplete-item.active {
        background: var(--input-background);
    }
}

.client-ac-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 14px;
}

.client-ac-detail {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 1px;
}

.client-update-banner {
    margin-top: -4px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 138, 61, 0.28);
    border-radius: var(--card-radius);
    background: rgba(255, 138, 61, 0.08);
}

.client-update-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.client-update-label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--button-color);
}

/* ============================================
   ADD CLIENT BUTTON (Clients sub-tab header)
   ============================================ */

.clients-tab-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

.add-client-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent-primary);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}

@media (hover: hover) {
    .add-client-btn:hover {
        background: var(--accent-primary-hover, var(--accent-primary));
        transform: scale(1.1);
    }
}

/* Add-Client modal form */
.add-client-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px);
}

.add-client-modal {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
}

.add-client-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.add-client-modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: var(--text-color);
}

.add-client-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-client-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.add-client-modal-footer button {
    width: auto;
    padding: 10px 24px;
}

/* ============================================
   PDF Style Gallery (Settings > Templates)
   ============================================ */

/* ============================================================
   PDF Theme Editor — Layout Gallery + Colour Palette
   ============================================================ */

/* Section titles inside the theme editor */
.pdf-theme-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.pdf-theme-section-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

/* Layout thumbnail gallery — 2 columns on mobile, 3 on desktop */
.pdf-theme-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.pdf-theme-thumb-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s ease;
    overflow: hidden;
    position: relative;
}

@media (hover: hover) {
    .pdf-theme-thumb-card:hover {
        border-color: var(--accent-secondary);
        box-shadow: 0 2px 12px rgba(255, 138, 61, 0.15);
    }
}

.pdf-theme-thumb-card.selected {
    border-color: var(--accent-primary);
}

/* Named layout card body (replaces the old mini-PDF thumbnail; the real
   document is shown by the "Preview" button instead). */
.pdf-theme-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    min-height: 92px;
    padding: 18px 12px;
}

.pdf-theme-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.pdf-theme-card-desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

/* Footer with select indicator */
.pdf-theme-thumb-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

/* Selection indicator (checkmark circle) */
.pdf-theme-select-indicator {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
    flex-shrink: 0;
    pointer-events: none;
}
.pdf-theme-select-indicator svg {
    color: transparent;
    transition: color 0.2s;
}
.pdf-theme-select-indicator.active {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
}
.pdf-theme-select-indicator.active svg {
    color: var(--button-text);
}

.pdf-theme-thumb-canvas {
    width: 100%;
    aspect-ratio: 210 / 280;
    background: #ffffff;
    overflow: hidden;
    position: relative;
}

/* Canvas element rendered by pdf.js fills the thumbnail container */
.pdf-theme-thumb-canvas canvas,
.pdf-theme-thumb-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Preview button in editor header (next to Save) */
.template-editor-preview-btn {
    padding: 6px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
@media (hover: hover) {
    .template-editor-preview-btn:hover {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
    }
}

.pdf-theme-thumb-loading,
.pdf-theme-thumb-error {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    padding: 20px;
}

/* Colour preset chips */
.pdf-theme-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.pdf-theme-preset-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

@media (hover: hover) {
    .pdf-theme-preset-chip:hover {
        border-color: var(--accent-secondary);
        background: rgba(255, 138, 61, 0.08);
    }
}

.pdf-theme-preset-chip.active {
    border-color: var(--accent-primary);
    background: rgba(255, 138, 61, 0.15);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.preset-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.1);
}

.preset-name {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 4px;
    white-space: nowrap;
}

/* Colour picker rows */
.pdf-theme-pickers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdf-theme-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.picker-label {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 100px;
}

.picker-input {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    background: var(--bg-secondary);
    cursor: pointer;
}

.picker-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.picker-input::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.picker-hex {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-tertiary);
    min-width: 60px;
}

/* Preview overlay navigation for style preview */
.pdf-style-preview-modal {
    display: flex;
    flex-direction: column;
}

.pdf-doc-type-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px 4px;
    flex-shrink: 0;
}

.pdf-doc-type-tab {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

@media (hover: hover) {
    .pdf-doc-type-tab:hover {
        background: rgba(255,255,255,0.06);
        color: var(--text-primary);
    }
}

.pdf-doc-type-tab.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.pdf-style-preview-nav {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.pdf-style-nav-btn {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    border-radius: 0;
}

.pdf-style-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.pdf-style-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.pdf-style-preview-canvas {
    flex: 1;
    min-height: 0;
}

.pdf-style-preview-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 6px;
}

.pdf-style-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.2s, transform 0.2s;
}

.pdf-style-dot.active {
    background: var(--accent-primary);
    transform: scale(1.3);
}

.pdf-style-preview-actions {
    padding: 10px 16px 16px;
    text-align: center;
}

.pdf-style-select-btn {
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--button-radius);
}

/* Desktop: 3-column gallery */
@media (min-width: 601px) {
    .pdf-theme-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* ============================================
   FINANCIALS TAB — Professional single-page layout
   Universal period filter at top, summary, BAS,
   Income list, Expense cards.
   ============================================ */

/* ---- TOP BAR: Period buttons ---- */
.fin-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.fin-period-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Search bar below period filter */
.fin-search-wrap {
    margin-bottom: 14px;
}

.fin-search-wrap input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text);
    padding: 9px 14px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.fin-search-wrap input[type="search"]:focus {
    border-color: var(--button-color);
}

.fin-search-wrap input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-size: contain;
    cursor: pointer;
}

/* Custom date inputs row (shown when "Custom" period selected) */
.fin-custom-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.fin-custom-dates input[type="date"] {
    background: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text);
    padding: 6px 10px;
    font-size: 13px;
    font-family: var(--font-family);
    max-width: 150px;
}

.fin-custom-dates input[type="date"]:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

.fin-date-sep {
    color: var(--text-secondary);
    font-size: 13px;
}

/* ---- Small buttons (shared by financials + other areas) ---- */
.btn-small {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--input-border);
    border-radius: var(--button-radius);
    background: var(--input-background);
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-family);
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-small:hover {
        background: var(--card-background);
        border-color: var(--button-color);
    }
}

.btn-small.btn-secondary {
    opacity: 0.7;
}

.btn-small.btn-accent {
    background: var(--button-color);
    color: var(--button-text);
    border-color: var(--button-color);
}

@media (hover: hover) {
    .btn-small.btn-accent:hover {
        background: var(--button-hover-color);
        border-color: var(--button-hover-color);
    }
}

/* Active period button */
.fin-period-btn.active {
    background: var(--button-color);
    color: var(--button-text);
    border-color: var(--button-color);
    opacity: 1;
}

/* ---- SUMMARY STRIP (compact clickable row of Income / Expenses / Profit) ---- */
.fin-summary-strip {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.fin-strip-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 10px 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .fin-strip-item:hover {
        background: var(--input-background);
        border-color: var(--button-color);
    }
}

.fin-strip-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}

.fin-strip-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
}

.fin-strip-income  { border-top: 3px solid var(--toast-success); }
.fin-strip-expense { border-top: 3px solid var(--toast-error); }
.fin-strip-profit  { border-top: 3px solid var(--button-color); }
.fin-strip-positive .fin-strip-value { color: var(--toast-success); }
.fin-strip-negative .fin-strip-value { color: var(--toast-error); }

.fin-positive { color: var(--toast-success) !important; }
.fin-negative { color: var(--toast-error) !important; }

/* ---- SECTION LAYOUT ---- */
.fin-section {
    margin-bottom: 20px;
}

.fin-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 2px;
}

.fin-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--button-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fin-section-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
    opacity: 0.75;
}

.fin-section-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ---- TAPPABLE ROWS (used for both income and expenses) ---- */
.fin-rows-container {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--card-border);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.fin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--card-background);
    cursor: pointer;
    transition: background 0.15s, transform var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .fin-row:hover {
        background: var(--input-background);
    }
}

.fin-row-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.fin-row-desc {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Tags on an income row: JOB-#### (tap = filter to that job) and the payment kind */
.fin-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.fin-tag-job {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.28);
    cursor: pointer;
}

@media (hover: hover) {
    .fin-tag-job:hover {
        background: rgba(var(--accent-rgb), 0.2);
    }
}

.fin-tag-kind {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
}

.fin-row-meta-ref {
    color: var(--text-tertiary);
}

.fin-row-amount {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 12px;
}

/* ---- BAS SECTION (collapsible) ---- */
.fin-bas-section {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.fin-bas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fin-bas-toggle {
    color: var(--text-secondary);
    font-size: 12px;
    transition: transform 0.2s;
}

.fin-bas-section.expanded .fin-bas-toggle {
    transform: rotate(180deg);
}

.fin-bas-body {
    display: none;
    padding: 0 16px 14px;
}

.fin-bas-section.expanded .fin-bas-body {
    display: block;
}

.fin-bas-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
    color: var(--text-color);
}

.fin-bas-net {
    border-top: 1px solid var(--card-border);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
    font-size: 16px;
}

/* ---- EXPORT ACTIONS (accountant CSV + BAS PDF) ---- */
.fin-export-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.fin-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fin-export-btn svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* ---- GST SUB-STRIP (shown below summary strip when GST registered) ---- */
.fin-gst-strip {
    display: flex;
    gap: 1px;
    margin-top: -8px;
    margin-bottom: 12px;
    background: var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.fin-gst-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    background: var(--card-background);
    gap: 2px;
}

.fin-gst-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.fin-gst-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

/* ---- FINANCIAL DETAIL MODAL (centered popup — matches sitewide pattern) ---- */
.fin-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fin-detail-modal {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.fin-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--card-border);
}

.fin-detail-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.fin-detail-body {
    padding: 14px 20px;
}

.fin-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 7px 0;
    font-size: 14px;
}

.fin-detail-label {
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-right: 12px;
}

.fin-detail-value {
    color: var(--text-color);
    text-align: right;
    word-break: break-word;
    font-weight: 500;
}

.fin-detail-total {
    border-top: 1px solid var(--card-border);
    margin-top: 4px;
    padding-top: 10px;
}

.fin-detail-total .fin-detail-label,
.fin-detail-total .fin-detail-value {
    font-size: 16px;
    font-weight: 700;
}

.fin-detail-divider {
    height: 1px;
    background: var(--card-border);
    margin: 6px 0;
}

.fin-detail-link {
    color: var(--button-color);
    text-decoration: none;
    font-weight: 600;
}

@media (hover: hover) {
    .fin-detail-link:hover {
        text-decoration: underline;
    }
}

.fin-detail-actions {
    display: flex;
    gap: 8px;
    padding: 12px 20px 20px;
    border-top: 1px solid var(--card-border);
}

/* ---- MOBILE RESPONSIVE ---- */
@media (max-width: 600px) {
    .fin-topbar {
        gap: 8px;
    }

    .fin-period-btns {
        width: 100%;
        gap: 4px;
    }

    .fin-period-btn {
        flex: 1;
        text-align: center;
        padding: 7px 4px;
        font-size: 12px;
    }

    .fin-summary-strip {
        gap: 6px;
    }

    .fin-strip-value {
        font-size: 15px;
    }
}

/* ---- EXPENSE MODAL ---- */
#expenseModal .modal-content {
    max-width: 480px;
}

#expenseModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--card-border);
}

/* ---- OCR SPINNER (used in receipt progress toasts) ---- */
.ocr-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-secondary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ocrSpin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes ocrSpin {
    to { transform: rotate(360deg); }
}

/* ============================================
   PIPELINE — Financial Summary on Job Cards
   Shows quote amount, paid so far, remaining
   ============================================ */
.pipeline-financial-summary {
    background: var(--bg-secondary);
    border-radius: var(--button-radius);
    padding: 10px 12px;
    margin: 8px 0 10px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pipeline-fin-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
}

.pipeline-fin-row span:last-child {
    font-weight: 500;
    color: var(--text-primary);
}

.pipeline-fin-remaining {
    font-weight: 600;
    color: var(--accent-primary);
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
    margin-top: 2px;
}

.pipeline-fin-remaining span:last-child {
    color: var(--accent-primary);
}

/* ============================================
   PIPELINE — Actions Grid for In-Progress Jobs
   Wraps buttons in a tidy grid layout
   ============================================ */
.pipeline-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.pipeline-actions-grid button {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: var(--button-radius);
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.2s, transform 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-actions-grid button:active {
    transform: translateY(1px);
}

@media (hover: hover) {
    .pipeline-actions-grid button:hover {
        opacity: 0.85;
    }
}

/* Full-width cancel button spanning both columns */
.pipeline-actions-grid .btn-cancel-job {
    grid-column: 1 / -1;
}

/* Mobile (<500px): stack actions vertically for thumb-friendly full-width
   tap targets. iOS HIG-compliant 44px+ height. */
@media (max-width: 500px) {
    .pipeline-actions-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pipeline-actions-grid button {
        min-height: 46px;
        font-size: 14px;
    }
}

/* ============================================
   BUILDER — Context Bar
   Shows context info when opening builder from
   a job card (e.g. "Progress Invoice for JOB-1001")
   ============================================ */
.builder-context-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}

.builder-context-bar strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--accent-primary);
}

.builder-context-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text-secondary);
}

.builder-context-details span {
    display: flex;
    justify-content: space-between;
}

.builder-context-details span:last-child {
    font-weight: 600;
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
    margin-top: 2px;
}

/* Live-updating variation context: style the balance-due line differently */
.builder-context-details .variation-balance-due {
    font-weight: 600;
    color: var(--accent-primary);
}

/* ============================================
   PROGRESS INVOICE POPUP
   Quick popup on Jobs tab — no tab switch needed.
   ============================================ */
.progress-invoice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.progress-invoice-popup {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 24px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
}

.progress-invoice-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
}

.progress-invoice-popup .popup-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.progress-invoice-popup .popup-header .popup-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Financial summary rows inside popup */
.progress-fin-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}

.progress-fin-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    color: var(--text-secondary);
}

.progress-fin-row:last-child {
    font-weight: 600;
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
    padding-top: 5px;
    margin-top: 3px;
}

/* Amount mode pill toggle (% / $) */
.progress-mode-pill {
    display: inline-flex;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-mode-pill .pill-option {
    padding: 7px 20px;
    font-size: 13px;
}

/* Amount input row with preview */
.progress-amount-row {
    margin-bottom: 12px;
}

.progress-amount-row input {
    width: 100%;
    margin-bottom: 6px;
}

.progress-amount-preview {
    font-size: 13px;
    color: var(--text-secondary);
    min-height: 18px;
}

/* Validation and info notices */
.progress-validation-msg {
    font-size: 13px;
    min-height: 20px;
    margin-bottom: 8px;
}

.progress-validation-msg.error {
    color: var(--toast-error);
}

.progress-validation-msg.info {
    color: var(--accent-primary);
}

/* Final invoice popup — remaining balance highlight + fixed amount display */
.final-remaining span:last-child {
    color: var(--accent-primary);
    font-weight: 600;
}

.final-amount-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--accent-primary);
    border-radius: var(--button-radius);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.final-amount-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.final-amount-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Popup action buttons */
.progress-invoice-popup .popup-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.progress-invoice-popup .popup-actions button {
    width: auto;
    padding: 8px 18px;
}

/* ============================================
   DESKTOP LAYOUT — min-width: 769px
   Moves tab bar to top horizontal nav, centres
   content at 1200px, and widens modals.
   Mobile layout (≤768px) is completely unchanged.
   ============================================ */
@media (min-width: 641px) {

    /* ---- Main content column ---- */
    .dashboard {
        max-width: 1200px;
        margin: 0 auto;
        /* Push content below the fixed top tab bar (52px) + breathing room */
        padding-top: calc(52px + 28px);
        padding-bottom: 40px;
        padding-left: 40px;
        padding-right: 40px;
    }

    /* ---- Header: hidden on desktop — the top nav shows the active tab,
       and the icon cluster (.header-actions, a #tabBar sibling) floats
       over the nav's right edge on its own. ---- */
    .dashboard-header {
        display: none;
    }

    /* Centre the 36px icon buttons in the 52px nav row, aligned with the
       content column's right edge. */
    .header-actions {
        top: 8px;
        right: max(40px, calc((100vw - 1200px) / 2 + 40px));
        gap: 8px;
    }

    /* ---- Tab bar → fixed top horizontal nav ---- */
    .tab-bar {
        /* Move from bottom to top */
        top: 0;
        bottom: auto;
        height: 52px;

        /* Horizontal layout */
        justify-content: flex-start;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;

        /* Align tab items with the 1200px content column at all viewport widths */
        padding-left: max(40px, calc((100vw - 1200px) / 2 + 40px));
        padding-right: max(40px, calc((100vw - 1200px) / 2 + 40px));

        /* Replace mobile bottom border with a top-nav bottom border */
        border-top: none;
        border-bottom: 1px solid var(--tab-bar-border);
    }

    .tab-bar.is-visible {
        display: flex;
    }

    /* ---- Tab bar items: horizontal row ---- */
    .tab-bar-item {
        flex-direction: row;
        gap: 8px;
        height: 52px;
        padding: 0 18px;
        font-size: 14px;
        width: auto;

        /* Active indicator moves from bottom border to a bottom underline */
        border-bottom: 2px solid transparent;
        border-top: none;
    }

    .tab-bar-item.active {
        border-bottom-color: var(--tab-active);
        text-shadow: 0 0 12px rgba(255, 138, 61, 0.25);
    }

    /* On desktop the active state is the underline, so suppress the mobile
       pill + icon lift and let the bronze underline (with a soft glow) read. */
    .tab-bar-item::before { display: none; }
    .tab-bar-item.active svg { transform: none; }

    /* Slightly smaller icons in horizontal layout */
    .tab-bar-item svg {
        width: 18px;
        height: 18px;
    }

    /* ---- Modals — wider on desktop ---- */
    .modal {
        max-width: 760px;
    }

    /* Settings modal already converts from bottom-sheet to centred at 641px;
       just widen it further here */
    .settings-modal {
        max-width: 820px;
    }

    .draft-row-actions {
        flex-wrap: nowrap;
    }

    /* Widen invoice popups on desktop so fields aren't cramped */
    .progress-invoice-popup {
        max-width: 560px;
    }
}

/* ============================================
   IMAGE GALLERY MODAL
   Full-screen overlay for scrolling through
   multiple images with swipe/arrow navigation.
   ============================================ */

.gallery-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-top) + 20px) 20px calc(var(--safe-bottom) + 20px);
    animation: fadeIn 0.15s ease;
    overflow: hidden;
}

.gallery-panel {
    width: min(1220px, 100%);
    height: min(92vh, 920px);
    background: linear-gradient(180deg, rgba(28, 28, 28, 0.97), rgba(11, 11, 11, 0.98));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    /* On mobile the overlay padding collapses to 0 (see media query below) so
       the panel sits flush with the screen edge. Header itself adds safe-area
       padding so the title clears the iOS status bar. */
    padding-top: max(14px, calc(var(--safe-top) + 4px));
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    backdrop-filter: blur(16px);
}

.gallery-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gallery-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.gallery-counter {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gallery-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gallery-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    width: auto;
    box-shadow: none;
}

@media (hover: hover) {
    .gallery-btn:hover {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.5);
        box-shadow: 0 10px 24px rgba(0,0,0,0.2);
    }
}

.gallery-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.gallery-close {
    background: none;
    border: none;
    box-shadow: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.15s, background 0.15s;
    border-radius: var(--radius-pill);
}

@media (hover: hover) {
    .gallery-close:hover {
        opacity: 1;
        background: rgba(255,255,255,0.08);
    }
}

.gallery-body {
    display: flex;
    width: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: radial-gradient(circle at top, rgba(255,255,255,0.05), rgba(255,255,255,0) 58%);
}

.gallery-scroll {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
}
.gallery-scroll::-webkit-scrollbar {
    display: none;
}

.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 24px 84px;
    background: radial-gradient(circle at center, rgba(255,255,255,0.05), rgba(255,255,255,0) 65%);
}

.gallery-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    transition: transform 0.18s ease;
    will-change: transform;
    touch-action: none;
}

.gallery-image-frame-zoomed {
    transition: none;
}

.gallery-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--card-radius);
    user-select: none;
    -webkit-user-drag: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: none;
    color: #fff;
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 2;
    padding: 0;
    line-height: 1;
}

@media (hover: hover) {
    .gallery-nav:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.34);
        box-shadow: 0 12px 24px rgba(0,0,0,0.24);
    }
}

.gallery-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gallery-nav-prev {
    left: 18px;
}

.gallery-nav-next {
    right: 18px;
}

.input-locked {
    opacity: 0.72;
    cursor: not-allowed;
}

.button-locked {
    background: #6f6f69 !important;
    color: #f0eee8 !important;
}

.quote-total-final strong.over-limit {
    color: var(--toast-error);
}

/* Hide arrows on small screens — native scroll handles swipe */
@media (max-width: 640px) {
    .pdf-viewer-overlay,
    .gallery-overlay {
        padding: 0;
    }

    .pdf-viewer-shell,
    .gallery-panel {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
    }

    .pdf-viewer-body {
        padding: 12px;
    }

    .gallery-nav {
        display: none;
    }
    .gallery-slide {
        padding: 12px;
    }
    /* The viewer runs its own swipe / pinch / double-tap in JS on phones.
       Native panning stayed enabled on the strip, so a two-finger pinch that
       started on the dark padding beside the photo was ALSO a native
       horizontal pan: the photo zoomed while the strip slid to the next
       slide ("zooms into the next photo"). Hand every touch to the JS. */
    .gallery-scroll,
    .gallery-slide {
        touch-action: none;
    }
    .gallery-title {
        font-size: 14px;
    }
    .lead-popup-overlay {
        padding: var(--safe-top) 0 var(--safe-bottom);
    }
    .lead-popup {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* ============================================
   HEADER BADGE (notification count)
   ============================================ */

.header-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--error);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: var(--button-radius);
    pointer-events: none;
}

/* ============================================
   FAILED OPERATIONS ITEMS
   ============================================ */

.failed-op-item {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 12px;
    margin-bottom: 10px;
}

.failed-op-item.resolved {
    opacity: 0.55;
}

.failed-op-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.failed-op-type {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 13px;
    color: var(--error);
}

.failed-op-item.resolved .failed-op-type {
    color: var(--text-secondary);
}

.failed-op-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.failed-op-message {
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 6px;
    line-height: 1.4;
}

.failed-op-context {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.failed-op-context span {
    margin-right: 6px;
}

.failed-op-error-details {
    margin-bottom: 8px;
}

.failed-op-error-details summary {
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.failed-op-error-details pre {
    font-size: 11px;
    color: var(--error);
    background: var(--input-background);
    padding: 8px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 6px 0 0;
    max-height: 120px;
}

.failed-op-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.failed-op-resolved-badge {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Button variants for failed ops */
.btn-outline {
    background: transparent;
    border-color: var(--button-color);
    color: var(--button-color);
}

@media (hover: hover) {
    .btn-outline:hover {
        background: rgba(255, 138, 61, 0.1);
    }
}

.btn-danger {
    background: var(--toast-error, #e53935);
    border-color: var(--toast-error, #e53935);
    color: #fff;
}

@media (hover: hover) {
    .btn-danger:hover {
        opacity: 0.85;
    }
}

.btn-danger-outline {
    background: transparent;
    border-color: var(--error);
    color: var(--error);
}

@media (hover: hover) {
    .btn-danger-outline:hover {
        background: rgba(255, 71, 87, 0.1);
    }
}

@media (orientation: landscape) {
  .signature-modal {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }
  .signature-pad-canvas {
    width: 100vw !important;
    height: 70vh !important; /* Leaves room for buttons */
    max-width: 100vw !important;
    max-height: 70vh !important;
  }
  .signature-modal-buttons {
    position: absolute !important;
    bottom: 2vh !important;
    left: 0 !important;
    width: 100vw !important;
    display: flex !important;
    justify-content: center !important;
    gap: 2vw !important;
    z-index: 10 !important;
  }
}

/* ============================================
   FORGE POLISH — money readout + reduced motion
   ============================================ */

/* Money figures: a machined-gauge readout — mono with aligned tabular digits.
   Applied to the prominent figures only (dense list rows keep the UI face for
   density). */
.fin-strip-value,
.fin-section-total,
.fin-gst-value,
.fin-detail-total .fin-detail-value,
.pipeline-amount,
.pipeline-next-stage-amount,
.doc-popup-amount,
.quote-total-final,
.contract-stage-summary-total {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ============================================
   SKELETON LOADING + ERROR STATES
   Shimmering placeholder shapes while Firestore data loads (markup from
   buildSkeletonHtml in index.html) and the designed load-failure card
   (buildErrorStateHtml). Dashboard-only classes — accept.html unaffected.
   ============================================ */

.loading--skeleton {
    padding: 0;
    text-align: left;
}

.loading--skeleton > * + * {
    margin-top: var(--card-spacing);
}

.skeleton-block {
    position: relative;
    overflow: hidden;
    background: var(--input-background);
    border-radius: var(--radius-sm);
}

.skeleton-block::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: skeleton-shimmer 1.4s linear infinite;
}

@keyframes skeleton-shimmer {
    to { transform: translateX(100%); }
}

/* Shells mirror the real cards/rows so the content swap doesn't jump. */
.skeleton-card {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.skeleton-row .skeleton-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Load-failure card with a Retry action — replaces bare red text. */
.error-state {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--toast-error);
    border-radius: var(--card-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.error-state p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

/* ============================================
   OVERLAY MOTION SYSTEM
   One vocabulary for how every popup enters and leaves.
   Entry: overlays that predate the motion system get the same fade +
   card-rise the lead/pipeline/doc popups always had. Exit: JS's
   closeOverlayAnimated() adds .overlay-closing, waits a fixed 260ms
   (covers the iOS ghost-click window even under reduced motion — the
   overlay stays in the DOM swallowing phantom taps), then removes.
   Placed late in the file ON PURPOSE so .overlay-closing outranks each
   overlay's own entry animation. Dashboard-only classes — accept.html
   shares this stylesheet but uses none of these selectors.
   ============================================ */

.modal-overlay,
.client-popup-overlay,
.payment-modal-overlay,
.job-address-overlay,
.template-editor-overlay,
.template-preview-overlay,
.email-preview-overlay,
.add-client-modal-overlay,
.fin-detail-overlay,
.progress-invoice-overlay,
.settings-modal-overlay {
    animation: fadeIn var(--dur-base) ease;
}

.modal-overlay > :first-child,
.client-popup-overlay > :first-child,
.payment-modal-overlay > :first-child,
.job-address-overlay > :first-child,
.template-editor-overlay > :first-child,
.template-preview-overlay > :first-child,
.email-preview-overlay > :first-child,
.add-client-modal-overlay > :first-child,
.fin-detail-overlay > :first-child,
.progress-invoice-overlay > :first-child {
    animation: popupSlideUp var(--dur-slow) var(--ease-out-soft);
}

/* The settings sheet is bottom-anchored — rise like an iOS sheet. */
.settings-modal-overlay > :first-child {
    animation: sheet-rise var(--dur-slow) var(--ease-out-soft);
}

@keyframes sheet-rise {
    from { transform: translateY(24px); opacity: 0.6; }
    to   { transform: none; opacity: 1; }
}

/* Pressed feedback on the primary tappable rows/cards — the subtle
   compress that makes a tap feel acknowledged before anything loads. */
.lead-card:active,
.pipeline-card:active,
.doc-row:active,
.fin-row:active,
.clients-list-row:active {
    transform: scale(0.985);
    background: var(--input-background);
}

/* Exit — applies to EVERY overlay closed via closeOverlayAnimated(). */
.overlay-closing {
    animation: overlay-fade-out var(--dur-fast) ease forwards;
}

.overlay-closing > :first-child {
    animation: popup-sink var(--dur-fast) ease forwards;
}

@keyframes overlay-fade-out {
    to { opacity: 0; }
}

@keyframes popup-sink {
    to { transform: translateY(10px); opacity: 0; }
}

/* Respect users who ask for less motion — calm the glow / transition work. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}