/* Codex mobile UI integration: job detail, swipe rows, and final iOS tab chrome. */

#bottom-tab-bar {
    display: none;
}

.action-summary-mobile {
    display: none;
}

/* Kebab is mobile-only — desktop keeps its 4-card .stats-bar grid. */
.jobs-overview-kebab {
    display: none;
}

/* iOS-grouped-row text lines (address / type+number / status+money) live
   inside every .jc-identity but are mobile-only — desktop has its own
   .jc-addr/.jc-city/.jc-type-pill/.jc-jobnum + .jc-meta layout. Default
   to hidden so they don't double-up the desktop card; the mobile media
   query and body.mobile-touch-ui rules below flip them back to block. */
.jc-list-address,
.jc-list-type-number,
.jc-list-status-money {
    display: none;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    #bottom-tab-bar {
        position: fixed;
        bottom: max(-4px, calc(env(safe-area-inset-bottom) - 38px));
        left: 50%;
        right: auto;
        z-index: 8000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 32px);
        max-width: 520px;
        height: clamp(68px, var(--btab-h), 74px);
        box-sizing: border-box;
        padding: 8px 10px;
        transform: translateX(-50%);
        background: rgba(255,255,255,0.60);
        border: 1px solid rgba(60,60,67,0.10);
        border-radius: 32px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        backdrop-filter: blur(40px) saturate(180%);
        -webkit-backdrop-filter: blur(40px) saturate(180%);
        transition: height 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }
    .btab {
        flex: 1;
        min-width: 44px;
        min-height: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: none;
        border-radius: 24px;
        background: transparent;
        color: #3A3A3C;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "DM Sans", sans-serif;
        padding: 6px 4px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease, opacity 0.12s ease;
    }
    .btab:active {
        opacity: 0.82;
        transform: scale(0.96);
    }
    /* Active: icon + label go system blue (the primary signal); the
       pill background carries enough alpha to read clearly even when
       the bar is in transparent/glass mode (matches Pages/Keynote
       sidebar contrast on macOS Tahoe). */
    .btab-active {
        background: rgba(0,122,255,0.14);
        color: #007AFF;
        box-shadow: none;
    }
    .btab-active .btab-icon,
    .btab-active .btab-label {
        color: #007AFF;
    }
    .btab-active .btab-label {
        font-weight: 600;
    }
    .btab-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transform-origin: center;
        transition: transform 90ms ease-out, filter 90ms ease-out;
        will-change: transform, filter;
    }
    /* iOS 18-style tap spring on the icon. Press shrinks to 0.86 and
       dims slightly while the finger is down; release runs a real
       multi-stage keyframe spring (under → overshoot 1.18 → small
       rebound → 1.0) with a synchronized brightness flash + soft
       currentColor glow at the peak so the bounce reads as a real
       "pop", not just a size change. Scale + filter only — the tab
       box and label don't move, so no layout shift. */
    .btab-icon.is-pressed {
        transform: scale(0.86);
        filter: brightness(0.92);
    }
    @keyframes btab-spring {
        0% {
            transform: scale(0.86);
            filter: brightness(0.94);
        }
        32% {
            transform: scale(1.18);
            filter: brightness(1.22) drop-shadow(0 0 8px currentColor);
        }
        58% {
            transform: scale(0.95);
            filter: brightness(1.06) drop-shadow(0 0 3px currentColor);
        }
        80% {
            transform: scale(1.04);
            filter: brightness(1.02);
        }
        100% {
            transform: scale(1);
            filter: brightness(1);
        }
    }
    .btab-icon.is-spring {
        animation: btab-spring 380ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .btab-icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.25;
    }
    .btab-label {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.05;
    }

    /* Center Create — same shape as siblings, slight color emphasis only.
       No resting pill, no 28×28 colored circle behind the icon. */
    .btab-create {
        color: rgb(var(--create-color-rgb)) !important;
        background: transparent;
        position: relative;
        box-shadow: none;
    }
    .btab-create .btab-icon {
        width: auto;
        height: auto;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        margin-top: 0;
    }
    .btab-create.has-focused-job {
        --create-color-rgb: 39, 174, 96;
    }
    .btab-create .btab-icon svg {
        width: 22px;
        height: 22px;
    }
    .btab-create .btab-label {
        margin-top: 0;
        font-weight: 700;
        color: rgb(var(--create-color-rgb));
    }

    .main-wrap {
        padding-bottom: calc(clamp(68px, var(--btab-h), 74px) + env(safe-area-inset-bottom) + 36px) !important;
    }
    .site-footer {
        padding-bottom: calc(clamp(68px, var(--btab-h), 74px) + env(safe-area-inset-bottom) + 34px) !important;
    }
    .mobile-collapse-btn {
        bottom: calc(clamp(68px, var(--btab-h), 74px) + env(safe-area-inset-bottom) + 34px) !important;
        right: auto !important;
        left: 50%;
        transform: translateX(-50%);
    }
    body.clock-active .mobile-collapse-btn {
        bottom: calc(clamp(68px, var(--btab-h), 74px) + env(safe-area-inset-bottom) + 84px) !important;
    }
    .header-hamburger,
    .mobile-menu {
        display: none !important;
    }
    body.home-active .site-header,
    body.home-active .header-sub-bar {
        display: none !important;
    }
    body.home-active .main-wrap {
        padding-top: 0 !important;
    }

    html:not([data-theme="dark"]) .site-header {
        background: rgba(255, 255, 255, 0.88);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid rgba(60, 60, 67, 0.12);
        box-shadow: none;
    }

    html:not([data-theme="dark"]) .site-header .header-brand,
    html:not([data-theme="dark"]) .site-header .header-page-title,
    html:not([data-theme="dark"]) .site-header .header-icon-btn {
        color: #1C1C1E;
    }

    html:not([data-theme="dark"]) .site-header .header-brand span {
        color: #6E6E73;
    }

    html:not([data-theme="dark"]) .site-header .header-icon-btn {
        background: rgba(120, 120, 128, 0.08);
        border-color: rgba(60, 60, 67, 0.12);
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    body:not(.home-active) {
        background: #F2F2F7;
    }

    body:not(.home-active) .main-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #stats-bar.stats-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        gap: 8px;
        align-items: stretch;
        margin: 2px 0 10px;
    }

    /* Hide the "Active Jobs" tile on mobile when the financial trio is
       present (owner/office). Crew only ever sees Active Jobs, so leave
       it visible in that case. */
    #stats-bar:has(#sort-contracted) #sort-default {
        display: none;
    }

    #stats-bar .stat-card {
        min-width: 0;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.92);
        border: 1px solid rgba(60,60,67,0.12);
        box-shadow: 0 3px 12px rgba(0,0,0,0.05);
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    #stats-bar .stat-card .stat-label {
        font-size: 10px;
        color: #6E6E73;
    }

    #stats-bar .stat-card .stat-value {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: clamp(17px, 4.1vw, 22px);
    }

    #stats-bar .jobs-overview-kebab {
        align-self: center;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 12px;
        background: rgba(255,255,255,0.80);
        border: 1px solid rgba(60,60,67,0.12);
        color: #6E6E73;
        -webkit-tap-highlight-color: transparent;
    }

    #action-panel {
        margin: 0 0 10px;
    }

    #action-panel .action-panel {
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 18px;
        background: rgba(255,255,255,0.80);
        border: 1px solid rgba(60,60,67,0.12);
        box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    }

    #action-panel .action-toggle {
        min-height: 58px;
        padding: 10px 14px;
        gap: 12px;
        flex-wrap: nowrap;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    #action-panel .action-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255,159,10,0.15);
        color: #FF9F0A;
        font-size: 18px;
        line-height: 1;
    }

    #action-panel .action-copy {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        gap: 2px;
    }

    #action-panel .action-title {
        margin: 0;
        color: #1C1C1E;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
        font-size: 16px;
        line-height: 1.18;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
    }

    #action-panel .action-summary {
        color: #6E6E73;
        display: block;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: 0;
    }

    #action-panel .action-summary-desktop {
        display: none;
    }

    #action-panel .action-chevron {
        margin-left: 0;
        color: rgba(60,60,67,0.36);
        font-size: 28px;
        line-height: 1;
        font-weight: 400;
    }

    #action-panel .action-items {
        margin: 0;
        padding: 0 14px 12px 60px;
        border-top: 1px solid rgba(60,60,67,0.12);
    }

    #action-panel .action-item {
        padding: 8px 0;
        border-bottom-color: rgba(60,60,67,0.10);
        color: #3A3A3C;
        font-size: 13px;
        line-height: 1.32;
    }

    /* ── Action Items v2 (iOS 18 minimal) ──────────────────────────────────
       Lighter container, grouped sections, single-line rows with status
       dots. Replaces the legacy .action-item flat list. */
    #action-panel .ai-toggle {
        position: relative;
    }

    #action-panel .ai-bolt {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255,159,10,0.15);
        color: #FF9F0A;
        font-size: 18px;
        line-height: 1;
    }

    #action-panel .ai-count-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 22px;
        padding: 0 8px;
        margin-left: auto;
        border-radius: 11px;
        background: rgba(118,118,128,0.16);
        color: #1C1C1E;
        font-size: 12px;
        font-weight: 600;
        font-feature-settings: "tnum";
    }

    #action-panel .ai-sections {
        padding: 4px 0 6px;
        border-top: 1px solid rgba(60,60,67,0.10);
    }

    #action-panel .ai-section {
        padding: 4px 14px 8px;
    }

    #action-panel .ai-section + .ai-section {
        border-top: 1px solid rgba(60,60,67,0.06);
        padding-top: 8px;
    }

    #action-panel .ai-section-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0 4px;
    }

    #action-panel .ai-section-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }

    #action-panel .ai-section-count {
        font-size: 11px;
        font-weight: 600;
        color: rgba(60,60,67,0.50);
        font-feature-settings: "tnum";
    }

    #action-panel .ai-section-overdue  .ai-section-label { color: #FF3B30; }
    #action-panel .ai-section-due_soon .ai-section-label { color: #FF9F0A; }
    #action-panel .ai-section-payments .ai-section-label { color: #0A84FF; }

    #action-panel .ai-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    #action-panel .ai-row + .ai-row {
        border-top: 1px solid rgba(60,60,67,0.06);
    }

    #action-panel .ai-row:active {
        background: rgba(60,60,67,0.06);
        margin: 0 -8px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 8px;
    }

    #action-panel .ai-dot {
        flex: 0 0 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #8E8E93;
    }
    #action-panel .ai-dot-red   { background: #FF3B30; }
    #action-panel .ai-dot-amber { background: #FF9F0A; }
    #action-panel .ai-dot-blue  { background: #0A84FF; }

    #action-panel .ai-text {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    #action-panel .ai-title {
        font-size: 14px;
        font-weight: 600;
        color: #1C1C1E;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #action-panel .ai-job-num {
        color: rgba(60,60,67,0.50);
        font-weight: 500;
    }

    #action-panel .ai-meta {
        font-size: 12px;
        color: #6E6E73;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #action-panel .ai-chev {
        flex: 0 0 auto;
        color: rgba(60,60,67,0.30);
        font-size: 22px;
        line-height: 1;
        font-weight: 400;
    }

    #action-panel .ai-view-all {
        display: block;
        width: 100%;
        margin-top: 6px;
        padding: 6px 0 2px;
        background: transparent;
        border: 0;
        color: #0A84FF;
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Dark-mode tweaks for v2 */
    [data-theme="dark"] #action-panel .ai-count-pill {
        background: rgba(118,118,128,0.32);
        color: #F2F2F7;
    }
    [data-theme="dark"] #action-panel .ai-sections,
    [data-theme="dark"] #action-panel .ai-section + .ai-section,
    [data-theme="dark"] #action-panel .ai-row + .ai-row {
        border-color: rgba(255,255,255,0.08);
    }
    [data-theme="dark"] #action-panel .ai-title { color: #F2F2F7; }
    [data-theme="dark"] #action-panel .ai-job-num { color: rgba(235,235,245,0.50); }
    [data-theme="dark"] #action-panel .ai-meta { color: #AEAEB2; }
    [data-theme="dark"] #action-panel .ai-section-count { color: rgba(235,235,245,0.50); }
    [data-theme="dark"] #action-panel .ai-chev { color: rgba(235,235,245,0.30); }
    [data-theme="dark"] #action-panel .ai-row:active { background: rgba(255,255,255,0.06); }

    #filter-bar {
        margin: 0 0 18px;
    }

    /* Sticky search toolbar — pins below the 52px mobile header while
       money chips, action panel, and the rest of the page scroll off. */
    #jobs-page-actions {
        position: sticky;
        top: 52px;
        z-index: 50;
        margin: 0 -12px 8px;
        padding: 8px 12px;
        background: rgba(242,242,247,0.82);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
    }

    [data-theme="dark"] #jobs-page-actions {
        background: rgba(0,0,0,0.72);
    }

    #filter-bar .filter-bar {
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    #filter-bar .filter-bar-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 50px;
        gap: 10px;
        align-items: center;
    }

    #filter-bar .filter-search-wrap {
        min-width: 0;
        height: 48px;
        border-radius: 16px;
        background: rgba(255,255,255,0.80);
        border: 1px solid rgba(60,60,67,0.12);
        box-shadow: none;
    }

    #filter-bar .filter-search-icon {
        left: 14px;
        width: 18px;
        height: 18px;
        color: rgba(60,60,67,0.50);
    }

    #filter-bar .filter-search-count {
        left: auto;
        right: 10px;
        color: #6E6E73;
        background: rgba(118,118,128,0.12);
    }

    #filter-bar .filter-search {
        height: 100%;
        padding: 0 50px 0 42px;
        border: 0;
        border-radius: 16px;
        background: transparent;
        color: #1C1C1E;
        font-size: 16px;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    #filter-bar .filter-search:focus {
        box-shadow: none;
    }

    #filter-bar .filter-toggle-btn {
        width: 50px;
        height: 48px;
        margin: 0;
        border-radius: 16px;
        background: rgba(255,255,255,0.80);
        border: 1px solid rgba(60,60,67,0.12);
        color: #6E6E73;
    }

    #filter-bar .filter-toggle-active {
        color: #007AFF;
        border-color: rgba(0,122,255,0.28);
        background: rgba(0,122,255,0.10);
    }

    #filter-bar .filter-dropdowns {
        grid-column: 1 / -1;
        margin: 0;
        gap: 8px;
    }

    #filter-bar .filter-select {
        min-height: 44px;
        border-radius: 14px;
        background-color: rgba(255,255,255,0.80);
        border-color: rgba(60,60,67,0.12);
        color: #1C1C1E;
        font-size: 14px;
    }

    #job-list .job-section-divider {
        align-items: flex-end;
        gap: 10px;
        margin: 0 2px 10px;
    }

    #job-list .job-section-divider::after {
        display: none;
    }

    #job-list .job-section-label {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        row-gap: 2px;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
        letter-spacing: 0;
        white-space: normal;
    }

    #job-list .job-section-title {
        color: #1C1C1E;
        font-size: 24px;
        line-height: 1.08;
        font-weight: 800;
        letter-spacing: 0;
    }

    #job-list .job-section-subtitle {
        grid-column: 1;
        color: #6E6E73;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 500;
    }

    #job-list .job-section-link {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #007AFF;
        font: 600 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    }

    [data-theme="dark"] body:not(.home-active) {
        background: #000000;
    }

    [data-theme="dark"] #stats-bar .stat-card,
    [data-theme="dark"] #stats-bar .jobs-overview-kebab,
    [data-theme="dark"] #action-panel .action-panel,
    [data-theme="dark"] #filter-bar .filter-search-wrap,
    [data-theme="dark"] #filter-bar .filter-toggle-btn,
    [data-theme="dark"] #filter-bar .filter-select {
        background: rgba(28,28,30,0.70);
        border-color: rgba(255,255,255,0.10);
        box-shadow: none;
    }

    [data-theme="dark"] #stats-bar .stat-card .stat-value:not(.green):not(.red),
    [data-theme="dark"] #action-panel .action-title,
    [data-theme="dark"] #filter-bar .filter-search,
    [data-theme="dark"] #filter-bar .filter-select,
    [data-theme="dark"] #job-list .job-section-title {
        color: #F2F2F7;
    }

    [data-theme="dark"] #stats-bar .stat-card .stat-label,
    [data-theme="dark"] #action-panel .action-summary,
    [data-theme="dark"] #filter-bar .filter-search-count,
    [data-theme="dark"] #job-list .job-section-subtitle {
        color: #AEAEB2;
    }

    [data-theme="dark"] #action-panel .action-items {
        border-top-color: rgba(255,255,255,0.10);
    }

    [data-theme="dark"] #action-panel .action-item {
        background: transparent;
        border-color: transparent;
        color: #D1D1D6;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    [data-theme="dark"] #action-panel .action-item:last-child {
        border-bottom: 0;
    }

    [data-theme="dark"] #filter-bar .filter-search-count {
        background: rgba(118,118,128,0.24);
    }
}

/* Runtime mobile/touch glass chrome. Kept outside media queries because iOS
   standalone PWAs can report a desktop-ish viewport while still using mobile UI. */
html.mobile-touch-ui:not([data-theme="dark"]) .site-header {
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
    box-shadow: none !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) .site-header .header-brand,
html.mobile-touch-ui:not([data-theme="dark"]) .site-header .header-page-title,
html.mobile-touch-ui:not([data-theme="dark"]) .site-header .header-icon-btn {
    color: #1C1C1E !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) .site-header .header-brand span {
    color: #6E6E73 !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) .site-header .header-icon-btn {
    background: rgba(120, 120, 128, 0.08) !important;
    border-color: rgba(60, 60, 67, 0.12) !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) #bottom-tab-bar {
    background: rgba(255,255,255,0.60) !important;
    border: 1px solid rgba(60,60,67,0.10) !important;
    border-top-color: rgba(60,60,67,0.10) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) #bottom-tab-bar .btab {
    color: #3A3A3C !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) #bottom-tab-bar .btab-active {
    background: rgba(0,122,255,0.14) !important;
    color: #007AFF !important;
    box-shadow: none !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) #bottom-tab-bar .btab-active .btab-icon,
html.mobile-touch-ui:not([data-theme="dark"]) #bottom-tab-bar .btab-active .btab-label {
    color: #007AFF !important;
}

/* Create keeps its own accent — re-assert because the runtime `.btab`
   color rule above is more specific than the in-media `.btab-create`. */
html.mobile-touch-ui:not([data-theme="dark"]) #bottom-tab-bar .btab.btab-create {
    color: rgb(var(--create-color-rgb)) !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) #bottom-tab-bar .btab-create {
    background: transparent !important;
    box-shadow: none !important;
}

html.mobile-touch-ui:not([data-theme="dark"]) #bottom-tab-bar .btab-create .btab-icon {
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .home-content,
    .settings-content {
        padding-bottom: calc(clamp(68px, var(--btab-h), 74px) + env(safe-area-inset-bottom) + 36px) !important;
    }

    body.clock-active .home-content,
    body.clock-active .settings-content {
        padding-bottom: calc(clamp(68px, var(--btab-h), 74px) + env(safe-area-inset-bottom) + 86px) !important;
    }

    /* Dark tab bar — translucent "liquid glass" capsule (iOS 18 style):
       low alpha + heavy blur+saturate so the bar reads as floating
       glass over content. Idle icons stay pure white so they remain
       crisp despite the see-through bg. */
    [data-theme="dark"] #bottom-tab-bar {
        background: rgba(20,20,24,0.55);
        border-color: rgba(255,255,255,0.08);
        border-top-color: rgba(255,255,255,0.08);
        box-shadow: 0 4px 16px rgba(0,0,0,0.42);
    }

    [data-theme="dark"] .btab {
        color: #FFFFFF;
    }

    [data-theme="dark"] .btab-active {
        background: rgba(255,255,255,0.10);
        color: #0A84FF;
        box-shadow: none;
    }

    [data-theme="dark"] .btab-active .btab-icon,
    [data-theme="dark"] .btab-active .btab-label {
        color: #0A84FF;
    }

    [data-theme="dark"] .btab-create {
        background: transparent;
        box-shadow: none;
    }

    [data-theme="dark"] .btab-create .btab-icon {
        background: transparent;
        border-radius: 0;
        width: auto;
        height: auto;
    }

    /* Dark detail-screen — drop the prior 0.58 opacity / 0.42 alpha icon
       fade. Bar stays at full contrast (matches Pages/Keynote sidebars on
       macOS Tahoe over translucent backdrops). */
    [data-theme="dark"] body.mobile-job-detail-active:not(.mobile-job-section-active):not(.mobile-job-sheet-active) #bottom-tab-bar {
        box-shadow: 0 6px 18px rgba(0,0,0,0.32);
    }
}



/* Mobile iOS job rows and swipe trays */

/* iPhone collapsed job card: content must not share the narrow thumb column.
   Keep the image/name as the top row, then let progress, numbers, and next
   action use the full card width below. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .job-card {
        max-width: none;
        overflow: hidden;
        position: relative;
    }

    .job-card .job-header {
        grid-template-columns: 112px minmax(0, 1fr) 14px;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 4px;
        min-height: 0;
        padding: 14px 12px 14px 16px;
        align-items: center;
        position: relative;
        z-index: 1;
        background: #FFFFFF !important;
        opacity: 1 !important;
        touch-action: pan-y;
        will-change: transform;
        isolation: isolate;
    }

    .job-card .job-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: #FFFFFF;
        border-radius: inherit;
        pointer-events: none;
    }

    .job-card .job-header::after {
        content: "\203A";
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
        color: rgba(60,60,67,0.42);
        font: 400 28px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        pointer-events: none;
    }

    .jc-thumb {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 112px;
        height: 112px;
        border-radius: 18px;
        align-self: center;
        pointer-events: none;
    }

    .jc-identity {
        grid-column: 2;
        grid-row: 1;
        gap: 3px;
        padding-right: 0;
    }

    .jc-name-row {
        gap: 0;
    }

    .jc-client-name {
        color: #1C1C1E;
        font: 700 17px/1.18 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    }

    .jc-list-address,
    .jc-list-type-number,
    .jc-list-status-money {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #6A6A70;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    .jc-list-address {
        font-size: 14px;
        line-height: 1.22;
    }

    .jc-list-type-number,
    .jc-list-status-money {
        font-size: 13px;
        line-height: 1.2;
    }

    .jc-list-status-money {
        margin-top: 1px;
    }

    .jc-addr,
    .jc-city,
    .jc-type-pill,
    .jc-jobnum,
    .jc-progress-row,
    .jc-fin-grid,
    .jc-divider,
    .jc-bottom-actions,
    .jc-name-row .jc-expand-mobile,
    .jc-name-row .jc-kebab {
        display: none !important;
    }

    .jc-bottom {
        grid-column: 2;
        grid-row: 2;
        display: block;
        min-width: 0;
    }

    .jc-next-line {
        display: block;
        color: #6A6A70;
        font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .jc-next-line strong {
        color: #6A6A70;
        font-weight: 600;
    }

    .job-card .job-header.mcs-animate {
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .job-card .job-header.mcs-dragging {
        transition: none;
    }

    .mcs-actions {
        position: absolute;
        inset-block: 0;
        z-index: 0;
        display: flex;
        align-items: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease;
        gap: 9px;
        padding: 0 12px;
        background: rgba(242,242,247,0.95);
    }

    .mcs-actions-left {
        left: 0;
        justify-content: flex-start;
        border-right: 1px solid rgba(60,60,67,0.18);
        border-radius: 10px 0 0 10px;
    }

    .mcs-actions-right {
        right: 0;
        justify-content: flex-end;
        border-left: 1px solid rgba(60,60,67,0.18);
        border-radius: 0 10px 10px 0;
    }

    .mcs-reveal-left > .mcs-actions-left,
    .mcs-reveal-right > .mcs-actions-right,
    .mcs-open-left > .mcs-actions-left,
    .mcs-open-right > .mcs-actions-right {
        opacity: 1;
    }

    .mcs-action {
        width: 68px;
        min-height: 64px;
        padding: 10px 8px;
        border: 0;
        border-radius: 15px;
        color: #1C1C1E;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
        font-size: 12.5px;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        transform: scale(0.95);
        transition: transform 0.14s ease, background-color 0.14s ease;
    }

    .mcs-actions-right .mcs-action {
        width: 62px;
    }

    .mcs-action span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.48);
        font-size: 20px;
        line-height: 1;
    }

    .mcs-action b {
        font: inherit;
    }

    .mcs-reveal-left > .mcs-actions-left .mcs-action,
    .mcs-reveal-right > .mcs-actions-right .mcs-action,
    .mcs-open-left > .mcs-actions-left .mcs-action,
    .mcs-open-right > .mcs-actions-right .mcs-action {
        transform: scale(1);
    }

    .mcs-action-call {
        background: rgba(52,199,89,0.15);
        color: #34C759;
    }
    .mcs-action-text {
        background: rgba(10,132,255,0.15);
        color: #0A84FF;
    }
    .mcs-action-map {
        background: rgba(255,159,10,0.15);
        color: #FF9F0A;
    }
    .mcs-action-complete {
        background: rgba(88,86,214,0.15);
        color: #5856D6;
    }
    .mcs-action-note {
        background: rgba(255,159,10,0.15);
        color: #FF9F0A;
    }

    .mcs-open-left,
    .mcs-open-right {
        box-shadow: 0 8px 20px rgba(15, 27, 45, 0.10);
    }

    .jc-thumb {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 112px;
        height: 112px;
        align-self: center;
    }

    .jc-identity {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        justify-content: flex-start;
        padding-right: 0;
    }

    .jc-name-row {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .jc-client-name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.18;
        max-height: 1.2em;
    }

    .jc-bottom {
        grid-column: 2;
        grid-row: 2;
        padding-top: 0;
        min-height: 0;
    }
}



/* Mobile job detail and section screens */

#mobile-job-detail-root { display: none; }

/* Runtime fallback for iOS/PWA containers whose CSS media queries report a
   desktop-ish viewport. JS adds this class on phone-sized/touch devices. */
body.mobile-touch-ui .job-card {
    max-width: none;
    overflow: hidden;
    position: relative;
}

body.mobile-touch-ui .job-card .job-header {
    grid-template-columns: 112px minmax(0, 1fr) 14px !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    min-height: 0 !important;
    padding: 14px 12px 14px 16px !important;
    align-items: center !important;
    position: relative;
    z-index: 1;
    background: #FFFFFF !important;
    opacity: 1 !important;
    touch-action: pan-y;
    will-change: transform;
    isolation: isolate;
}

body.mobile-touch-ui .job-card .job-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #FFFFFF;
    border-radius: inherit;
    pointer-events: none;
}

body.mobile-touch-ui .job-card .job-header::after {
    content: "\203A";
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    color: rgba(60,60,67,0.42);
    font: 400 28px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    pointer-events: none;
}

body.mobile-touch-ui .jc-thumb {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 112px !important;
    height: 112px !important;
    border-radius: 18px;
    align-self: center;
    pointer-events: none;
}

body.mobile-touch-ui .jc-identity {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    justify-content: flex-start;
    gap: 3px;
    padding-right: 0;
}

body.mobile-touch-ui .jc-name-row {
    display: flex;
    align-items: center;
    gap: 0;
}

body.mobile-touch-ui .jc-client-name {
    display: block;
    color: #1C1C1E;
    font: 700 17px/1.18 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 1.2em;
}

body.mobile-touch-ui .jc-list-address,
body.mobile-touch-ui .jc-list-type-number,
body.mobile-touch-ui .jc-list-status-money {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #6A6A70;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

body.mobile-touch-ui .jc-list-address {
    font-size: 14px;
    line-height: 1.22;
}

body.mobile-touch-ui .jc-list-type-number,
body.mobile-touch-ui .jc-list-status-money,
body.mobile-touch-ui .jc-next-line {
    font-size: 13px;
    line-height: 1.2;
}

body.mobile-touch-ui .jc-addr,
body.mobile-touch-ui .jc-city,
body.mobile-touch-ui .jc-type-pill,
body.mobile-touch-ui .jc-jobnum,
body.mobile-touch-ui .jc-progress-row,
body.mobile-touch-ui .jc-fin-grid,
body.mobile-touch-ui .jc-divider,
body.mobile-touch-ui .jc-bottom-actions,
body.mobile-touch-ui .jc-name-row .jc-expand-mobile,
body.mobile-touch-ui .jc-name-row .jc-kebab,
body.mobile-touch-ui .job-card .jc-expand {
    display: none !important;
}

body.mobile-touch-ui .jc-bottom {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block;
    min-width: 0;
    padding-top: 0;
    min-height: 0;
}

body.mobile-touch-ui .jc-next-line,
body.mobile-touch-ui .jc-next-line strong {
    display: block;
    color: #6A6A70;
    font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.mobile-touch-ui .job-card.is-expanded .job-body,
body.mobile-touch-ui .job-card.is-expanded .close-card-block {
    display: none !important;
}

body.mobile-touch-ui .job-card .job-header.mcs-animate {
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.mobile-touch-ui .job-card .job-header.mcs-dragging {
    transition: none;
}

body.mobile-touch-ui .mcs-actions {
    position: absolute;
    inset-block: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    gap: 9px;
    padding: 0 12px;
    background: rgba(242,242,247,0.95);
}

body.mobile-touch-ui .mcs-actions-left {
    left: 0;
    justify-content: flex-start;
    border-right: 1px solid rgba(60,60,67,0.18);
    border-radius: 10px 0 0 10px;
}

body.mobile-touch-ui .mcs-actions-right {
    right: 0;
    justify-content: flex-end;
    border-left: 1px solid rgba(60,60,67,0.18);
    border-radius: 0 10px 10px 0;
}

body.mobile-touch-ui .mcs-reveal-left > .mcs-actions-left,
body.mobile-touch-ui .mcs-reveal-right > .mcs-actions-right,
body.mobile-touch-ui .mcs-open-left > .mcs-actions-left,
body.mobile-touch-ui .mcs-open-right > .mcs-actions-right {
    opacity: 1;
}

body.mobile-touch-ui .mcs-action {
    width: 68px;
    min-height: 64px;
    padding: 10px 8px;
    border: 0;
    border-radius: 15px;
    color: #1C1C1E;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transform: scale(0.95);
    transition: transform 0.14s ease, background-color 0.14s ease;
}

body.mobile-touch-ui .mcs-actions-right .mcs-action {
    width: 62px;
}

body.mobile-touch-ui .mcs-action span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.48);
    font-size: 20px;
    line-height: 1;
}

body.mobile-touch-ui .mcs-action b {
    font: inherit;
}

body.mobile-touch-ui .mcs-reveal-left > .mcs-actions-left .mcs-action,
body.mobile-touch-ui .mcs-reveal-right > .mcs-actions-right .mcs-action,
body.mobile-touch-ui .mcs-open-left > .mcs-actions-left .mcs-action,
body.mobile-touch-ui .mcs-open-right > .mcs-actions-right .mcs-action {
    transform: scale(1);
}

body.mobile-touch-ui .mcs-action-call {
    background: rgba(52,199,89,0.15);
    color: #34C759;
}

body.mobile-touch-ui .mcs-action-text {
    background: rgba(10,132,255,0.15);
    color: #0A84FF;
}

body.mobile-touch-ui .mcs-action-map,
body.mobile-touch-ui .mcs-action-note {
    background: rgba(255,159,10,0.15);
    color: #FF9F0A;
}

body.mobile-touch-ui .mcs-action-complete {
    background: rgba(88,86,214,0.15);
    color: #5856D6;
}

body.mobile-touch-ui[data-theme="dark"] .job-card,
[data-theme="dark"] body.mobile-touch-ui .job-card {
    background: #1C1C1E;
    border-color: rgba(84,84,88,0.65);
}

[data-theme="dark"] body.mobile-touch-ui .job-card .job-header,
[data-theme="dark"] body.mobile-touch-ui .job-card .job-header::before {
    background: #1C1C1E !important;
}

[data-theme="dark"] body.mobile-touch-ui .jc-client-name {
    color: #F2F2F7;
}

[data-theme="dark"] body.mobile-touch-ui .jc-list-address,
[data-theme="dark"] body.mobile-touch-ui .jc-list-type-number,
[data-theme="dark"] body.mobile-touch-ui .jc-list-status-money,
[data-theme="dark"] body.mobile-touch-ui .jc-next-line,
[data-theme="dark"] body.mobile-touch-ui .jc-next-line strong {
    color: #AEAEB2;
}

[data-theme="dark"] body.mobile-touch-ui .mcs-actions {
    background: #1C1C1E;
}

[data-theme="dark"] body.mobile-touch-ui .mcs-action {
    background: #2C2C2E;
}

/* Direct runtime classes used by JS on mobile/touch PWAs. These are outside
   media queries so iOS standalone mode cannot fall back to the old mega-card. */
.job-card.jc-mobile-row {
    max-width: none !important;
    overflow: hidden !important;
    position: relative !important;
}

.job-card.jc-mobile-row .job-header {
    grid-template-columns: 112px minmax(0, 1fr) 14px !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    min-height: 0 !important;
    padding: 14px 12px 14px 16px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
    background: #FFFFFF !important;
    opacity: 1 !important;
    touch-action: pan-y !important;
    will-change: transform;
    isolation: isolate;
}

.job-card.jc-mobile-row .job-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #FFFFFF;
    border-radius: inherit;
    pointer-events: none;
}

.job-card.jc-mobile-row .job-header::after {
    content: "\203A";
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    color: rgba(60,60,67,0.42);
    font: 400 28px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    pointer-events: none;
}

.job-card.jc-mobile-row .jc-thumb {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 112px !important;
    height: 112px !important;
    border-radius: 18px !important;
    align-self: center !important;
    pointer-events: none;
}

.job-card.jc-mobile-row .jc-identity {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding-right: 0 !important;
}

.job-card.jc-mobile-row .jc-client-name {
    display: block !important;
    color: #1C1C1E !important;
    font: 700 17px/1.18 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 1.2em !important;
}

.job-card.jc-mobile-row .jc-list-address,
.job-card.jc-mobile-row .jc-list-type-number,
.job-card.jc-mobile-row .jc-list-status-money {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #6A6A70 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
}

.job-card.jc-mobile-row .jc-list-address {
    font-size: 14px !important;
    line-height: 1.22 !important;
}

.job-card.jc-mobile-row .jc-list-type-number,
.job-card.jc-mobile-row .jc-list-status-money,
.job-card.jc-mobile-row .jc-next-line {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.job-card.jc-mobile-row .jc-addr,
.job-card.jc-mobile-row .jc-city,
.job-card.jc-mobile-row .jc-type-pill,
.job-card.jc-mobile-row .jc-jobnum,
.job-card.jc-mobile-row .jc-progress-row,
.job-card.jc-mobile-row .jc-fin-grid,
.job-card.jc-mobile-row .jc-divider,
.job-card.jc-mobile-row .jc-bottom-actions,
.job-card.jc-mobile-row .jc-name-row .jc-expand-mobile,
.job-card.jc-mobile-row .jc-name-row .jc-kebab,
.job-card.jc-mobile-row .jc-expand {
    display: none !important;
}

.job-card.jc-mobile-row .jc-bottom {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
}

.job-card.jc-mobile-row .jc-next-line,
.job-card.jc-mobile-row .jc-next-line strong {
    display: block !important;
    color: #6A6A70 !important;
    font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.job-card.jc-mobile-row.is-expanded .job-body,
.job-card.jc-mobile-row.is-expanded .close-card-block {
    display: none !important;
}

/* iOS Mail/Messages-style swipe action lanes.
   Flat, full-row-height, edge-to-edge — no per-action card chrome, no
   tray padding/gap. Outer corners are clipped by the grouped-list
   container's `overflow:hidden`, so action lanes inherit clean
   rounded edges where exposed at the row ends. */
.job-card.mcs-card .mcs-actions {
    position: absolute !important;
    inset-block: 0 !important;
    z-index: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.12s ease !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.job-card.mcs-card .mcs-actions-left {
    left: 0 !important;
    justify-content: flex-start !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.job-card.mcs-card .mcs-actions-right {
    right: 0 !important;
    justify-content: flex-end !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.job-card.mcs-card.mcs-reveal-left > .mcs-actions-left,
.job-card.mcs-card.mcs-reveal-right > .mcs-actions-right,
.job-card.mcs-card.mcs-open-left > .mcs-actions-left,
.job-card.mcs-card.mcs-open-right > .mcs-actions-right {
    opacity: 1 !important;
}

.job-card.mcs-card .mcs-action {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 76px !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 6px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #FFFFFF !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    transform: none !important;
    transition: background-color 0.14s ease !important;
}

/* Override legacy fixed-width per-side rules. */
.job-card.mcs-card .mcs-actions-left .mcs-action,
.job-card.mcs-card .mcs-actions-right .mcs-action {
    width: auto !important;
    min-width: 76px !important;
}

/* Hairline separator between adjacent lanes (skip first in each tray).
   Soft tinted panels need a darker hairline than solid lanes did. */
.job-card.mcs-card .mcs-action + .mcs-action {
    border-left: 1px solid rgba(60, 60, 67, 0.08) !important;
}

/* Icon circle — the focal element. Solid action color, white SF-style
   glyph inside (SVG inherits via currentColor). 36px diameter sits
   well in a ~108px row without dominating. */
.job-card.mcs-card .mcs-action .mcs-action-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    font-size: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.job-card.mcs-card .mcs-action .mcs-action-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    display: block !important;
}

/* Label sits below the circle — system text color for readability on
   the soft tinted panel. The circle carries the color identity. */
.job-card.mcs-card .mcs-action b {
    font: inherit !important;
    color: #1C1C1E !important;
}

.job-card.mcs-card.mcs-reveal-left > .mcs-actions-left .mcs-action,
.job-card.mcs-card.mcs-reveal-right > .mcs-actions-right .mcs-action,
.job-card.mcs-card.mcs-open-left > .mcs-actions-left .mcs-action,
.job-card.mcs-card.mcs-open-right > .mcs-actions-right .mcs-action {
    transform: none !important;
}

.job-card.mcs-card .mcs-action:active {
    filter: brightness(0.94);
}

/* Per-action: panel = 15% color tint, icon circle = solid color. */
.job-card.mcs-card .mcs-action-call    { background: rgba(52, 199, 89, 0.15) !important; }
.job-card.mcs-card .mcs-action-call    .mcs-action-icon { background: #34C759 !important; }

.job-card.mcs-card .mcs-action-text    { background: rgba(0, 122, 255, 0.15) !important; }
.job-card.mcs-card .mcs-action-text    .mcs-action-icon { background: #007AFF !important; }

.job-card.mcs-card .mcs-action-map     { background: rgba(255, 149, 0, 0.15) !important; }
.job-card.mcs-card .mcs-action-map     .mcs-action-icon { background: #FF9500 !important; }

.job-card.mcs-card .mcs-action-note    { background: rgba(88, 86, 214, 0.15) !important; }
.job-card.mcs-card .mcs-action-note    .mcs-action-icon { background: #5856D6 !important; }

.job-card.mcs-card .mcs-action-complete    { background: rgba(52, 199, 89, 0.15) !important; }
.job-card.mcs-card .mcs-action-complete    .mcs-action-icon { background: #34C759 !important; }

[data-theme="dark"] .job-card.jc-mobile-row {
    background: #1C1C1E !important;
    border-color: rgba(84,84,88,0.65) !important;
}

[data-theme="dark"] .job-card.jc-mobile-row .job-header,
[data-theme="dark"] .job-card.jc-mobile-row .job-header::before {
    background: #1C1C1E !important;
}

[data-theme="dark"] .job-card.jc-mobile-row .jc-client-name {
    color: #F2F2F7 !important;
}

[data-theme="dark"] .job-card.jc-mobile-row .jc-list-address,
[data-theme="dark"] .job-card.jc-mobile-row .jc-list-type-number,
[data-theme="dark"] .job-card.jc-mobile-row .jc-list-status-money,
[data-theme="dark"] .job-card.jc-mobile-row .jc-next-line,
[data-theme="dark"] .job-card.jc-mobile-row .jc-next-line strong {
    color: #AEAEB2 !important;
}

/* Dark theme: same soft-tint pattern, but circles use Apple's dark-mode
   accent variants (#30D158, #0A84FF, #FF9F0A, #5E5CE6) so they don't
   glow against the dark page. Tray stays transparent. */
[data-theme="dark"] .job-card.mcs-card .mcs-actions {
    background: transparent !important;
}

[data-theme="dark"] .job-card.mcs-card .mcs-action + .mcs-action {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .job-card.mcs-card .mcs-action b {
    color: #F2F2F7 !important;
}

[data-theme="dark"] .job-card.mcs-card .mcs-action .mcs-action-icon {
    color: #FFFFFF !important;
}

[data-theme="dark"] .job-card.mcs-card .mcs-action-call    { background: rgba(48, 209, 88, 0.18) !important; }
[data-theme="dark"] .job-card.mcs-card .mcs-action-call    .mcs-action-icon { background: #30D158 !important; }

[data-theme="dark"] .job-card.mcs-card .mcs-action-text    { background: rgba(10, 132, 255, 0.18) !important; }
[data-theme="dark"] .job-card.mcs-card .mcs-action-text    .mcs-action-icon { background: #0A84FF !important; }

[data-theme="dark"] .job-card.mcs-card .mcs-action-map     { background: rgba(255, 159, 10, 0.14) !important; }
[data-theme="dark"] .job-card.mcs-card .mcs-action-map     .mcs-action-icon { background: #FF9F0A !important; }

[data-theme="dark"] .job-card.mcs-card .mcs-action-note    { background: rgba(94, 92, 230, 0.18) !important; }
[data-theme="dark"] .job-card.mcs-card .mcs-action-note    .mcs-action-icon { background: #5E5CE6 !important; }

[data-theme="dark"] .job-card.mcs-card .mcs-action-complete    { background: rgba(48, 209, 88, 0.18) !important; }
[data-theme="dark"] .job-card.mcs-card .mcs-action-complete    .mcs-action-icon { background: #30D158 !important; }

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    body.mobile-job-detail-active {
        /* Lock body completely so iOS rubber-band on the inner panel
           scroller can't reveal the underlying jobs list at the bottom
           of the screen. `overflow: hidden` alone is not enough on iOS
           PWAs — the inner scroller still rubber-bands and bleeds the
           layer below through. position:fixed on body + overscroll-
           behavior:contain on the panel kills the bleed. */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        background: #F2F2F7;
    }

    body.mobile-job-detail-active .mobile-fab,
    body.mobile-job-detail-active .mobile-collapse-btn {
        display: none !important;
    }

    body.mobile-job-section-active #bottom-tab-bar,
    body.mobile-job-sheet-active #bottom-tab-bar,
    body.mobile-nav-modal-active #bottom-tab-bar {
        display: none !important;
    }

    /* Detail screen no longer dims the tab bar — keep icons crisp like
       Pages/Keynote on macOS, even over the translucent glass. The detail
       view still wins z-order, but the bar reads at full contrast so a
       glance tells you which tab you're on. */
    body.mobile-job-detail-active:not(.mobile-job-section-active):not(.mobile-job-sheet-active) #bottom-tab-bar {
        z-index: 8300;
        box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    }

    .job-card .jc-expand {
        display: none !important;
    }

    .job-card.is-expanded {
        box-shadow: none;
    }

    .job-card.is-expanded .job-body,
    .job-card.is-expanded .close-card-block {
        display: none !important;
    }

    #mobile-job-detail-root {
        position: fixed;
        inset: 0;
        display: block;
        z-index: 8200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* contain the rubber-band so it doesn't propagate past the panel
           and surface the underlying job-cards layer. */
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        background: #F2F2F7;
        color: #111827;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    .mjd-screen {
        min-height: 100svh;
        padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px);
        box-sizing: border-box;
    }

    body.mobile-job-detail-active:not(.mobile-job-section-active) .mjd-screen {
        padding-bottom: calc(clamp(68px, var(--btab-h), 74px) + env(safe-area-inset-bottom, 0px) + 44px);
    }

    .mjd-section-screen {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    }

    .mjd-nav {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        margin: -8px -16px 8px;
        padding: 8px 16px;
        background: rgba(247, 247, 250, 0.94);
        border-bottom: 1px solid rgba(60,60,67,0.10);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .mjd-nav-btn,
    .mjd-icon-btn {
        min-width: 44px;
        min-height: 44px;
        border: 0;
        background: transparent;
        color: #007AFF;
        font: 600 17px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        cursor: pointer;
        padding: 0 2px;
    }

    .mjd-icon-btn {
        color: #3A3A3C;
        font-size: 22px;
        letter-spacing: 1px;
        border-radius: 50%;
    }

    .mjd-icon-btn:active,
    .mjd-nav-btn:active,
    .mjd-quick-action:active,
    .mjd-section-row:active,
    .mjd-primary-btn:active,
    .mjd-secondary-btn:active {
        opacity: 0.64;
    }

    .mjd-hero {
        padding: 4px 2px 14px;
    }

    .mjd-hero h1,
    .mjd-section-head h1 {
        margin: 0;
        color: #111827;
        font-size: 31px;
        line-height: 1.08;
        font-weight: 800;
        letter-spacing: 0;
    }

    .mjd-address {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-height: 44px;
        margin: 10px 0 2px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #007AFF;
        font: 600 16px/1.28 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        text-align: left;
        cursor: pointer;
    }

    .mjd-address span {
        color: #6B7280;
        font-weight: 500;
    }

    .mjd-meta,
    .mjd-status,
    .mjd-next,
    .mjd-section-head p {
        color: #6B7280;
        font-size: 14px;
        line-height: 1.35;
        margin-top: 6px;
    }

    .mjd-next {
        display: flex;
        gap: 7px;
        align-items: baseline;
        margin-top: 14px;
        padding: 10px 12px;
        border-radius: 13px;
        background: #FFFFFF;
        border: 1px solid rgba(60, 60, 67, 0.08);
        color: #1F2937;
        font-weight: 600;
    }

    .mjd-next span {
        flex: 0 0 auto;
        color: #8E8E93;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mjd-card,
    .mjd-group {
        margin: 12px 0;
        background: #FFFFFF;
        border-radius: 18px;
        border: 1px solid rgba(60, 60, 67, 0.12);
        box-shadow: 0 1px 2px rgba(60,60,67,0.08);
        overflow: hidden;
    }

    .mjd-card {
        padding: 14px;
    }

    .mjd-card-title,
    .mjd-subhead {
        margin: 0 0 10px;
        color: #6B7280;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.45px;
        text-transform: uppercase;
    }

    .mjd-subhead {
        margin: 18px 4px 8px;
    }

    .mjd-quick-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .mjd-quick-action {
        min-height: 82px;
        border-radius: 16px;
        background: #F4F4F8;
        color: #111827;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        -webkit-tap-highlight-color: transparent;
    }

    .mjd-quick-action[aria-disabled="true"] {
        opacity: 0.35;
        pointer-events: none;
    }

    .mjd-quick-icon {
        width: 34px;
        height: 34px;
        border-radius: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #007AFF;
        background: rgba(0, 122, 255, 0.12);
    }

    .mjd-quick-icon-message { color: #34C759; background: rgba(52, 199, 89, 0.13); }
    .mjd-quick-icon-map { color: #FF3B30; background: rgba(255, 59, 48, 0.12); }
    .mjd-quick-icon-camera { color: #5856D6; background: rgba(88, 86, 214, 0.12); }
    .mjd-quick-icon-note { color: #FF9500; background: rgba(255, 149, 0, 0.14); }
    .mjd-quick-icon-clock { color: #5E5CE6; background: rgba(94, 92, 230, 0.12); }

    .mjd-field-actions,
    .mjd-sheet-actions,
    .mjd-bottom-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mjd-bottom-actions {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        z-index: 3;
        padding: 10px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.90);
        border: 1px solid rgba(60,60,67,0.12);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .mjd-primary-btn,
    .mjd-secondary-btn,
    .mjd-row-action {
        min-height: 48px;
        border-radius: 14px;
        border: 0;
        font: 700 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mjd-primary-btn {
        background: #007AFF;
        color: #FFFFFF;
    }

    .mjd-secondary-btn {
        background: #E5E5EA;
        color: #111827;
    }

    .mjd-row-action {
        min-height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        color: #007AFF;
        background: rgba(0, 122, 255, 0.10);
        font-size: 13px;
        white-space: nowrap;
    }

    .mjd-section-row {
        width: 100%;
        min-height: 62px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 13px 10px 16px;
        border: 0;
        border-bottom: 1px solid rgba(60, 60, 67, 0.12);
        background: transparent;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mjd-section-row:last-child {
        border-bottom: 0;
    }

    .mjd-section-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .mjd-section-text strong {
        color: #111827;
        font-size: 16px;
        font-weight: 600;
    }

    .mjd-section-text em {
        color: #8E8E93;
        font-size: 13px;
        font-style: normal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mjd-chevron {
        color: #C7C7CC;
        font-size: 28px;
        line-height: 1;
    }

    .mjd-section-head {
        padding: 0 2px 14px;
    }

    .mjd-section-content {
        padding-bottom: 12px;
    }

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

    .mjd-mini-card,
    .mjd-doc-row {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 14px;
        border-radius: 16px;
        background: #FFFFFF;
        border: 1px solid rgba(60, 60, 67, 0.12);
        box-shadow: 0 1px 2px rgba(60,60,67,0.06);
        color: #111827;
        text-decoration: none;
    }

    .mjd-mini-card strong,
    .mjd-doc-row strong {
        font-size: 16px;
        font-weight: 700;
    }

    .mjd-contact-name {
        font-size: 16px;
        font-weight: 700;
        color: var(--navy, #1B3350);
        text-decoration: underline;
        align-self: flex-start;
    }
    [data-theme="dark"] .mjd-contact-name {
        color: #8BC0F5;
    }

    .mjd-mini-card span,
    .mjd-doc-row span,
    .mjd-mini-card em {
        color: #6B7280;
        font-size: 14px;
        line-height: 1.35;
        font-style: normal;
    }

    .mjd-section-scope .mjd-subhead {
        margin: 24px 8px 9px;
        color: #6E6E73;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.55px;
    }

    .mjd-section-scope .mjd-scope-preview-list + .mjd-subhead {
        margin-top: 28px;
    }

    .mjd-section-scope .mjd-narrative {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(60, 60, 67, 0.10);
        border-radius: 14px;
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.45;
        color: #1F2937;
    }
    .mjd-section-scope .mjd-narrative-item {
        margin-bottom: 8px;
    }
    .mjd-section-scope .mjd-narrative-item:last-child {
        margin-bottom: 0;
    }
    .mjd-section-scope .mjd-narrative-title {
        font-weight: 600;
        margin-bottom: 2px;
    }
    .mjd-section-scope .mjd-narrative-bullets {
        margin: 0 0 0 18px;
        padding: 0;
    }
    .mjd-section-scope .mjd-narrative-bullets li {
        margin: 2px 0;
    }
    .mjd-section-scope .mjd-narrative-text {
        font-size: 14px;
    }
    .mjd-section-scope .mjd-narrative-notes {
        font-size: 12px;
        color: #6B7280;
        margin-top: 6px;
    }

    .mjd-section-scope .mjd-list {
        gap: 8px;
    }

    .mjd-section-scope .mjd-mini-card {
        border-radius: 14px;
        border-color: rgba(60, 60, 67, 0.10);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: none;
    }

    .mjd-section-scope .mjd-scope-preview-card {
        padding: 13px 14px;
        border-color: rgba(60, 60, 67, 0.06);
        background: rgba(242, 242, 247, 0.72);
    }

    .mjd-section-scope .mjd-scope-preview-card strong {
        font-size: 15px;
        font-weight: 650;
    }

    .mjd-section-scope .mjd-scope-item-card {
        padding: 16px;
    }

    .mjd-section-scope .mjd-scope-item-card .mjd-payment-top {
        align-items: flex-start;
        gap: 10px;
    }

    .mjd-section-scope .mjd-scope-item-card .mjd-payment-top > div {
        min-width: 0;
    }

    .mjd-section-scope .mjd-scope-item-card strong {
        line-height: 1.25;
    }

    .mjd-section-scope .mjd-mini-card span,
    .mjd-section-scope .mjd-mini-card em {
        line-height: 1.45;
    }

    .mjd-scope-inline-actions {
        padding: 12px 4px 88px;
    }

    .mjd-inline-add {
        appearance: none;
        border: 0;
        background: transparent;
        color: #007AFF;
        min-height: 36px;
        padding: 0 6px;
        font: 600 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mjd-inline-add:active {
        opacity: 0.55;
    }

    .mjd-doc-row {
        position: relative;
        padding-right: 34px;
    }

    .mjd-doc-row b {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #C7C7CC;
        font-size: 26px;
        font-weight: 400;
    }

    .mjd-empty {
        min-height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        border-radius: 16px;
        color: #8E8E93;
        background: #FFFFFF;
        border: 1px dashed rgba(60, 60, 67, 0.18);
        font-size: 15px;
        text-align: center;
    }
    /* Stacked empty-state with a title, body copy, and a primary CTA —
       used when "no rows yet" is the user's first encounter with the
       section and we want them to take an action, not just see a
       placeholder. */
    .mjd-empty.mjd-empty-stack {
        flex-direction: column;
        gap: 10px;
        min-height: 160px;
        padding: 28px 22px;
    }
    .mjd-empty .mjd-empty-title {
        font-size: 17px;
        font-weight: 600;
        color: #1C1C1E;
    }
    .mjd-empty .mjd-empty-sub {
        font-size: 14px;
        line-height: 1.4;
        color: #6E6E73;
        max-width: 320px;
    }
    .mjd-empty .mjd-empty-cta {
        margin-top: 6px;
        min-width: 200px;
    }

    .mjd-empty .mjd-inline-add.mjd-empty-cta {
        min-width: 0;
        margin-top: 2px;
    }

    .mjd-timeline {
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
        display: block;
        border-radius: 16px;
        background: #FFFFFF;
        border: 1px solid rgba(60, 60, 67, 0.12);
        box-shadow: 0 1px 2px rgba(60,60,67,0.06);
        overflow: hidden;
    }

    .mjd-timeline::before {
        content: "";
        position: absolute;
        top: 36px;
        bottom: 36px;
        left: 26px;
        width: 3px;
        border-radius: 999px;
        background: #DDE3EA;
        z-index: 0;
        pointer-events: none;
    }

    .mjd-timeline li {
        position: relative;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: hidden;
        touch-action: pan-y;
    }

    .mjd-timeline li.done::after,
    .mjd-timeline li.current::after {
        content: "";
        position: absolute;
        left: 26px;
        width: 3px;
        border-radius: 999px;
        background: #1F9D55;
        box-shadow: 0 0 0 1px rgba(31, 157, 85, 0.08);
        z-index: 3;
        pointer-events: none;
    }

    .mjd-timeline li.done::after {
        top: 0;
        bottom: 0;
    }

    .mjd-timeline li.current::after {
        top: 0;
        height: 28px;
    }

    .mjd-timeline li + li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 56px;
        right: 0;
        height: 1px;
        background: rgba(60, 60, 67, 0.12);
        z-index: 4;
        pointer-events: none;
    }

    .mjd-tl-content {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 30px 1fr auto;
        gap: 10px;
        align-items: start;
        min-height: 72px;
        padding: 13px 14px;
        background: inherit;
        will-change: transform;
    }

    /* Scheduled Events list — no rail, no dot column. Just text rows that
       still get the same swipe lanes from .mjd-tl-row. */
    .mjd-timeline.mjd-timeline-events::before { display: none; }
    .mjd-timeline.mjd-timeline-events .mjd-tl-content {
        grid-template-columns: 1fr auto;
        padding: 13px 16px;
    }
    .mjd-timeline.mjd-timeline-events .mjd-timeline-dot { display: none; }

    /* Delete lane — iOS red. */
    .mjd-tl-action-delete {
        background: rgba(255, 59, 48, 0.15);
    }
    .mjd-tl-action-delete .mjd-tl-action-icon {
        background: #FF3B30 !important;
    }

    .mjd-tl-content.mjd-tl-animate {
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .mjd-tl-text {
        min-width: 0;
    }

    .mjd-tl-hint {
        align-self: center;
        color: #C7C7CC;
        font-size: 18px;
        line-height: 1;
        opacity: 0.7;
    }

    .mjd-tl-lanes {
        position: absolute;
        top: 0;
        right: -1px;
        bottom: 0;
        display: flex;
        z-index: 3;
        gap: 0;
        padding: 0;
        background: transparent;
        opacity: 0;
        transition: opacity 0.12s ease;
        pointer-events: none;
    }

    .mjd-tl-action {
        flex: 0 0 77px;
        width: 77px;
        min-width: 77px;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0;
        border-radius: 0;
        color: #1C1C1E;
        font: 600 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        cursor: pointer;
        padding: 0 6px;
        margin: 0;
        pointer-events: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.14s ease, filter 0.14s ease;
    }

    .mjd-tl-action + .mjd-tl-action {
        border-left: 0;
    }

    .mjd-tl-action-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        color: #FFFFFF !important;
        font-size: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    .mjd-tl-action-icon svg {
        width: 18px !important;
        height: 18px !important;
        fill: currentColor !important;
        display: block !important;
    }

    .mjd-tl-action b {
        font: inherit;
        color: #1C1C1E;
    }

    .mjd-tl-action:active {
        filter: brightness(0.94);
    }

    .mjd-tl-action-done {
        background: rgba(52, 199, 89, 0.15);
    }

    .mjd-tl-action-done .mjd-tl-action-icon {
        background: #34C759 !important;
    }

    .mjd-tl-action-reopen {
        background: rgba(88, 86, 214, 0.15);
    }

    .mjd-tl-action-reopen .mjd-tl-action-icon {
        background: #5856D6 !important;
    }

    .mjd-tl-action-edit {
        background: rgba(142, 142, 147, 0.15);
    }

    .mjd-tl-action-edit .mjd-tl-action-icon {
        background: #8E8E93 !important;
    }

    .mjd-tl-row.mjd-tl-open .mjd-tl-lanes,
    .mjd-tl-row.mjd-tl-revealed .mjd-tl-lanes {
        opacity: 1;
        pointer-events: auto;
    }

    .mjd-tl-row.mjd-tl-open .mjd-tl-action,
    .mjd-tl-row.mjd-tl-revealed .mjd-tl-action {
        pointer-events: auto;
    }

    .mjd-tl-row.mjd-tl-open .mjd-tl-content,
    .mjd-tl-row.mjd-tl-revealed .mjd-tl-content {
        box-shadow: none;
    }

    /* Reorder mode — adds a drag-handle column to each row, suppresses the
       swipe-action lanes, and frames the list in a tinted dashed panel so
       the mode change is immediately legible. SortableJS adds .mjd-tl-ghost
       / .mjd-tl-chosen / .mjd-tl-drag during a drag for the placeholder,
       chosen-but-still row, and lifted-off-page row respectively. */
    .mjd-timeline-reorder {
        background: rgba(124, 59, 240, 0.05);
        border: 1px dashed rgba(124, 59, 240, 0.30);
        border-radius: 14px;
        padding: 6px 0;
        margin: 4px 0 8px;
        overflow: hidden;
    }
    /* Row keeps the same internal grid but loses right-side padding so the
       handle column reaches the row's outer edge. The handle gets a tinted
       background a notch off the row's surface so it reads as a separate
       affordance, full row height, like the iOS edit-mode handle. Three
       columns (not four) because the trailing hint chevron is suppressed
       in reorder mode — leaving an `auto` column empty would push the
       handle off the right edge. */
    .mjd-timeline-reorder .mjd-tl-content {
        grid-template-columns: 30px 1fr 56px;
        padding-right: 0;
    }
    .mjd-tl-drag-handle {
        align-self: stretch;
        width: 56px;
        position: relative;
        padding: 0;
        margin: 0;
        color: #8E8E93;
        background: rgba(0, 0, 0, 0.05);
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
    }
    /* Three grip lines drawn in CSS, absolute-positioned so vertical and
       horizontal centering are guaranteed regardless of how iOS Safari
       handles flex items at small heights. ::before is the middle line;
       two box-shadows on it draw the top and bottom lines. Lines fill
       the handle width minus an 8px inset on each side. */
    .mjd-tl-drag-handle::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 8px;
        right: 8px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        transform: translateY(-50%);
        box-shadow:
            0 -8px 0 currentColor,
            0  8px 0 currentColor;
    }
    .mjd-tl-drag-handle:active {
        cursor: grabbing;
        background: rgba(0, 122, 255, 0.18);
        color: #007AFF;
    }
    .mjd-tl-reorder-hint {
        margin: 8px 12px 4px;
        font-size: 13px;
        color: #6B7280;
    }

    .mjd-tl-ghost {
        opacity: 0.35;
    }
    .mjd-tl-ghost .mjd-tl-content {
        background: rgba(124, 59, 240, 0.08);
        border: 1px dashed rgba(124, 59, 240, 0.45);
        border-radius: 12px;
    }
    .mjd-tl-chosen .mjd-tl-content {
        background: rgba(124, 59, 240, 0.04);
    }
    .mjd-tl-drag .mjd-tl-content {
        box-shadow: 0 14px 32px rgba(15, 27, 45, 0.30);
        border-radius: 12px;
        transform: scale(1.01);
    }

    [data-theme="dark"] .mjd-timeline-reorder {
        background: rgba(124, 59, 240, 0.10);
        border-color: rgba(124, 59, 240, 0.40);
    }
    [data-theme="dark"] .mjd-tl-drag-handle {
        color: #8E8E93;
        background: rgba(255, 255, 255, 0.07);
    }
    [data-theme="dark"] .mjd-tl-drag-handle:active {
        color: #0A84FF;
        background: rgba(10, 132, 255, 0.24);
    }
    [data-theme="dark"] .mjd-tl-reorder-hint { color: #98989F; }
    [data-theme="dark"] .mjd-tl-drag .mjd-tl-content {
        background: #1F2937;
    }

    .mjd-timeline-dot {
        position: relative;
        z-index: 5;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #E5E5EA;
        border: 2px solid #D1D7DF;
        color: #7A8694;
        font-weight: 800;
        font-size: 11px;
        box-sizing: border-box;
    }

    .mjd-timeline li.done .mjd-timeline-dot {
        background: #1F9D55;
        border-color: #1F9D55;
        color: #FFFFFF;
    }

    .mjd-timeline li.current .mjd-timeline-dot {
        background: #FFFFFF;
        border-color: #7C3BF0;
        box-shadow: 0 0 0 5px rgba(124, 59, 240, 0.15);
        color: #7C3BF0;
    }

    .mjd-timeline li.overdue .mjd-timeline-dot {
        background: #FFFFFF;
        border-color: #C0392B;
        color: #C0392B;
    }

    .mjd-timeline strong {
        display: block;
        color: #111827;
        font-size: 16px;
    }

    .mjd-timeline span,
    .mjd-timeline em {
        display: block;
        margin-top: 3px;
        color: #6B7280;
        font-size: 13px;
        font-style: normal;
    }

    .mjd-photo-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mjd-photo {
        aspect-ratio: 1 / 1;
        border: 0;
        border-radius: 16px;
        background: var(--gray-1, #eef1f5);
        background-size: cover;
        background-position: center;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        padding: 0;
    }

    .mjd-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mjd-photo span {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 22px 10px 10px;
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: left;
        background: linear-gradient(transparent, rgba(0,0,0,0.82));
        text-shadow: 0 1px 2px rgba(0,0,0,0.55);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .mjd-photo span:empty {
        display: none;
    }

    .mjd-photo span.mjd-photo-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        right: auto;
        bottom: auto;
        width: auto;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(15, 27, 45, 0.82);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: center;
        white-space: nowrap;
        overflow: visible;
        pointer-events: none;
        z-index: 2;
    }
    .mjd-photo span.mjd-photo-badge-cover {
        background: #1F3A5F;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.22);
    }

    /* .mjd-money-grid + variants moved out of this @media block (see
       below at the .mjd-pv2-* group) so they apply on desktop too. */

    .mjd-pay-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mjd-payment-card,
    .mjd-invoice-card {
        padding: 14px;
        border-radius: 16px;
        background: #FFFFFF;
        border: 1px solid rgba(60, 60, 67, 0.08);
    }

    .mjd-payment-card.open {
        box-shadow: inset 3px 0 0 #FF9500;
    }

    .mjd-payment-card.paid {
        box-shadow: inset 3px 0 0 #34C759;
    }

    /* Awaiting = link sent, money hasn't landed. Amber rail on the left
       so it reads as "in progress" rather than open or paid. */
    .mjd-payment-card.awaiting {
        box-shadow: inset 3px 0 0 #FF9F0A;
    }

    .mjd-chip-awaiting {
        background: rgba(255, 159, 10, 0.16);
        color: #B25E00;
        font-weight: 700;
    }
    [data-theme="dark"] .mjd-chip-awaiting {
        background: rgba(255, 159, 10, 0.22);
        color: #FFD180;
    }

    .mjd-invoice-card.voided {
        opacity: 0.68;
    }

    .mjd-payment-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .mjd-payment-top strong {
        display: block;
        color: #111827;
        font-size: 16px;
        font-weight: 800;
    }

    .mjd-payment-top span {
        display: block;
        margin-top: 3px;
        color: #6B7280;
        font-size: 13px;
        line-height: 1.35;
    }

    .mjd-payment-top > b {
        color: #111827;
        font-size: 17px;
        font-weight: 800;
        white-space: nowrap;
    }

    .mjd-payment-amounts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .mjd-payment-amounts div {
        padding: 10px;
        border-radius: 12px;
        background: #F4F4F8;
    }

    .mjd-payment-amounts span {
        display: block;
        color: #8E8E93;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.35px;
    }

    .mjd-payment-amounts b {
        display: block;
        margin-top: 3px;
        color: #111827;
        font-size: 15px;
    }

    .mjd-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .mjd-chip {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        background: #E5E5EA;
        color: #111827;
        font: 700 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        cursor: pointer;
    }

    .mjd-chip-action {
        background: rgba(0, 122, 255, 0.12);
        color: #007AFF;
    }

    .mjd-chip-danger {
        background: rgba(255, 59, 48, 0.12);
        color: #D70015;
    }

    .mjd-chip-muted {
        background: #F2F2F7;
        color: #8E8E93;
    }

    .mjd-schedule-card {
        position: relative;
        padding-right: 88px;
    }

    .mjd-schedule-card > b,
    .mjd-mini-card > b {
        color: #111827;
        font-size: 16px;
        font-weight: 800;
    }

    .mjd-schedule-card > b {
        position: absolute;
        top: 16px;
        right: 14px;
    }

    .mjd-invoice-lines {
        list-style: none;
        margin: 12px 0 0;
        padding: 10px;
        border-radius: 12px;
        background: #F4F4F8;
    }

    .mjd-invoice-lines li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border-bottom: 1px solid rgba(60, 60, 67, 0.10);
        color: #6B7280;
        font-size: 13px;
    }

    .mjd-invoice-lines li:last-child {
        border-bottom: 0;
    }

    .mjd-invoice-lines b {
        color: #111827;
        white-space: nowrap;
    }

    .mjd-pay-import {
        padding: 16px 0 calc(env(safe-area-inset-bottom, 0px) + 86px);
    }

    .mjd-pay-import .mjd-secondary-btn {
        width: 100%;
    }

    .mjd-sheet-overlay {
        position: fixed;
        inset: 0;
        z-index: 8400;
        display: flex;
        align-items: flex-end;
        background: rgba(0, 0, 0, 0.28);
    }

    .mjd-sheet {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
        border-radius: 24px 24px 0 0;
        background: #FFFFFF;
        box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.18);
    }

    .mjd-sheet-handle {
        width: 38px;
        height: 5px;
        border-radius: 999px;
        background: #D1D1D6;
        margin: 0 auto 14px;
    }

    .mjd-sheet h2 {
        margin: 0 0 16px;
        color: #111827;
        font-size: 22px;
        font-weight: 800;
    }

    .mjd-sheet-label {
        display: block;
        margin: 12px 0 6px;
        color: #6B7280;
        font-size: 13px;
        font-weight: 700;
    }

    .mjd-sheet-input {
        width: 100%;
        min-height: 50px;
        box-sizing: border-box;
        border: 1px solid rgba(60, 60, 67, 0.16);
        border-radius: 14px;
        background: #F4F4F8;
        color: #111827;
        padding: 12px 14px;
        font: 17px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        outline: none;
    }

    .mjd-sheet-textarea {
        min-height: 132px;
        resize: vertical;
    }

    /* Two-column row inside an mjd sheet — used for paired date fields
       (Planned / Actual) so each takes half the sheet width instead of
       stretching the full width and reading as a giant pill. */
    .mjd-sheet-row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 0;
    }
    .mjd-sheet-row-2 > div { min-width: 0; }
    .mjd-sheet-row-2 .mjd-sheet-label { margin-top: 14px; }

    /* Native iOS date pickers render with extra horizontal padding;
       trim it so the date text sits centered in the pill, not floating
       at the left edge of an oversized control. */
    .mjd-sheet-input-date {
        padding: 12px 10px;
        text-align: center;
        font-size: 16px;
    }

    .mjd-hours-input {
        font-size: 28px;
        font-weight: 800;
        text-align: center;
    }

    .mjd-sheet-actions {
        grid-template-columns: 1fr 1fr;
        margin-top: 18px;
    }

    [data-theme="dark"] body.mobile-job-detail-active,
    [data-theme="dark"] #mobile-job-detail-root {
        background: #0F1520;
        color: #E6EAF0;
        color-scheme: dark;
    }

    [data-theme="dark"] .mjd-nav {
        background: rgba(15, 21, 32, 0.92);
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    }

    [data-theme="dark"] .mjd-nav-btn {
        color: #6AAAF0;
    }

    [data-theme="dark"] .mjd-icon-btn {
        color: #E6EAF0;
    }

    [data-theme="dark"] .mjd-hero h1,
    [data-theme="dark"] .mjd-section-head h1,
    [data-theme="dark"] .mjd-section-text strong,
    [data-theme="dark"] .mjd-mini-card strong,
    [data-theme="dark"] .mjd-doc-row strong,
    [data-theme="dark"] .mjd-timeline strong,
    [data-theme="dark"] .mjd-money-grid strong,
    [data-theme="dark"] .mjd-payment-top strong,
    [data-theme="dark"] .mjd-payment-top > b,
    [data-theme="dark"] .mjd-payment-amounts b,
    [data-theme="dark"] .mjd-schedule-card > b,
    [data-theme="dark"] .mjd-mini-card > b,
    [data-theme="dark"] .mjd-invoice-lines b,
    [data-theme="dark"] .mjd-sheet h2 {
        color: #E6EAF0;
    }

    [data-theme="dark"] .mjd-address {
        color: #6AAAF0;
    }

    [data-theme="dark"] .mjd-address span,
    [data-theme="dark"] .mjd-meta,
    [data-theme="dark"] .mjd-status,
    [data-theme="dark"] .mjd-section-head p,
    [data-theme="dark"] .mjd-card-title,
    [data-theme="dark"] .mjd-subhead,
    [data-theme="dark"] .mjd-section-text em,
    [data-theme="dark"] .mjd-mini-card span,
    [data-theme="dark"] .mjd-doc-row span,
    [data-theme="dark"] .mjd-mini-card em,
    [data-theme="dark"] .mjd-timeline span,
    [data-theme="dark"] .mjd-timeline em,
    [data-theme="dark"] .mjd-money-grid span,
    [data-theme="dark"] .mjd-payment-top span,
    [data-theme="dark"] .mjd-payment-amounts span,
    [data-theme="dark"] .mjd-invoice-lines li,
    [data-theme="dark"] .mjd-sheet-label {
        color: #9AA6B5;
    }

    [data-theme="dark"] .mjd-next,
    [data-theme="dark"] .mjd-card,
    [data-theme="dark"] .mjd-group,
    [data-theme="dark"] .mjd-mini-card,
    [data-theme="dark"] .mjd-doc-row,
    [data-theme="dark"] .mjd-timeline li,
    [data-theme="dark"] .mjd-money-grid div,
    [data-theme="dark"] .mjd-payment-card,
    [data-theme="dark"] .mjd-invoice-card {
        background: #1A2332;
        border-color: rgba(148, 163, 184, 0.16);
    }

    [data-theme="dark"] .mjd-section-scope .mjd-mini-card {
        background: rgba(26, 35, 50, 0.82);
        border-color: rgba(148, 163, 184, 0.13);
        box-shadow: none;
    }

    [data-theme="dark"] .mjd-section-scope .mjd-scope-preview-card {
        background: rgba(26, 35, 50, 0.54);
        border-color: rgba(148, 163, 184, 0.08);
    }

    [data-theme="dark"] .mjd-section-scope .mjd-narrative {
        background: rgba(26, 35, 50, 0.82);
        border-color: rgba(148, 163, 184, 0.13);
        color: #E5E7EB;
    }
    [data-theme="dark"] .mjd-section-scope .mjd-narrative-notes {
        color: #9AA6B5;
    }

    [data-theme="dark"] .mjd-inline-add {
        color: #0A84FF;
    }

    [data-theme="dark"] .mjd-next {
        color: #E6EAF0;
    }

    [data-theme="dark"] .mjd-next span {
        color: #8896A6;
    }

    [data-theme="dark"] .mjd-quick-action,
    [data-theme="dark"] .mjd-payment-amounts div,
    [data-theme="dark"] .mjd-invoice-lines,
    [data-theme="dark"] .mjd-empty {
        background: #121C2C;
        border-color: rgba(148, 163, 184, 0.16);
        color: #E6EAF0;
    }
    [data-theme="dark"] .mjd-empty .mjd-empty-title {
        color: #F2F2F7;
    }
    [data-theme="dark"] .mjd-empty .mjd-empty-sub {
        color: #B0B7C3;
    }

    [data-theme="dark"] .mjd-section-row {
        border-bottom-color: rgba(148, 163, 184, 0.16);
        color: #E6EAF0;
    }

    [data-theme="dark"] .mjd-chevron,
    [data-theme="dark"] .mjd-doc-row b {
        color: #667386;
    }

    [data-theme="dark"] .mjd-bottom-actions {
        background: rgba(15, 21, 32, 0.9);
        border: 1px solid rgba(148, 163, 184, 0.16);
    }

    [data-theme="dark"] .mjd-secondary-btn,
    [data-theme="dark"] .mjd-chip {
        background: #2A3545;
        color: #E6EAF0;
    }

    [data-theme="dark"] .mjd-row-action,
    [data-theme="dark"] .mjd-chip-action {
        background: rgba(10, 132, 255, 0.18);
        color: #6AAAF0;
    }

    [data-theme="dark"] .mjd-chip-danger {
        background: rgba(255, 69, 58, 0.18);
        color: #FF8A80;
    }

    [data-theme="dark"] .mjd-chip-muted {
        background: #121C2C;
        color: #8896A6;
    }

    [data-theme="dark"] .mjd-timeline-dot {
        background: #1A2332;
        border-color: #3A4658;
        color: #8896A6;
    }

    [data-theme="dark"] .mjd-timeline li.done .mjd-timeline-dot {
        background: #4CD592;
        border-color: #4CD592;
        color: #0F1724;
    }

    [data-theme="dark"] .mjd-timeline li.current .mjd-timeline-dot {
        background: #2A3545;
        border-color: #A29EF1;
        color: #A29EF1;
        box-shadow: 0 0 0 5px rgba(162, 158, 241, 0.18);
    }

    [data-theme="dark"] .mjd-timeline li.overdue .mjd-timeline-dot {
        background: #1A2332;
        border-color: #E74C3C;
        color: #F5A39A;
    }

    [data-theme="dark"] .mjd-timeline {
        background: #1A2332;
        border-color: rgba(148, 163, 184, 0.16);
    }

    [data-theme="dark"] .mjd-timeline::before {
        background: #334052;
    }

    [data-theme="dark"] .mjd-timeline li {
        background: transparent;
        border-color: transparent;
    }

    [data-theme="dark"] .mjd-timeline li.done::after,
    [data-theme="dark"] .mjd-timeline li.current::after {
        background: #4CD592;
        box-shadow: 0 0 0 1px rgba(76, 213, 146, 0.10);
    }

    [data-theme="dark"] .mjd-timeline li + li::before {
        background: rgba(148, 163, 184, 0.16);
    }

    [data-theme="dark"] .mjd-tl-action b {
        color: #F2F2F7;
    }

    [data-theme="dark"] .mjd-tl-action-done {
        background: rgba(48, 209, 88, 0.18);
    }

    [data-theme="dark"] .mjd-tl-action-done .mjd-tl-action-icon {
        background: #30D158;
    }

    [data-theme="dark"] .mjd-tl-action-reopen {
        background: rgba(94, 92, 230, 0.18);
    }

    [data-theme="dark"] .mjd-tl-action-reopen .mjd-tl-action-icon {
        background: #5E5CE6;
    }

    [data-theme="dark"] .mjd-tl-action-edit {
        background: rgba(142, 142, 147, 0.22);
    }

    [data-theme="dark"] .mjd-tl-action-edit .mjd-tl-action-icon {
        background: #8E8E93;
    }

    [data-theme="dark"] .mjd-empty {
        color: #8896A6;
        border-style: dashed;
    }

    [data-theme="dark"] .mjd-sheet-overlay {
        background: rgba(0, 0, 0, 0.48);
    }

    [data-theme="dark"] .mjd-sheet {
        background: #1A2332;
        box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.42);
    }

    [data-theme="dark"] .mjd-sheet-handle {
        background: #4A5568;
    }

    [data-theme="dark"] .mjd-sheet-input {
        background: #0F1724;
        border-color: rgba(148, 163, 184, 0.22);
        color: #E6EAF0;
    }

    [data-theme="dark"] .mjd-sheet-input::placeholder {
        color: #667386;
    }

    [data-theme="dark"] .mjd-quick-icon-map {
        color: #FFB340;
        background: rgba(255, 159, 10, 0.18);
    }

    [data-theme="dark"] #job-list {
        background: #0A0A0E;
    }

    [data-theme="dark"] .job-card {
        background: #1C1C1E;
        border-color: rgba(84,84,88,0.65);
    }

    [data-theme="dark"] .job-card .job-header {
        background: #1C1C1E !important;
    }

    [data-theme="dark"] .job-card .job-header::before {
        background: #1C1C1E;
    }

    [data-theme="dark"] .job-card .job-header::after {
        color: rgba(235,235,245,0.32);
    }

    [data-theme="dark"] .jc-client-name {
        color: #F2F2F7;
    }

    [data-theme="dark"] .jc-list-address,
    [data-theme="dark"] .jc-list-type-number,
    [data-theme="dark"] .jc-list-status-money,
    [data-theme="dark"] .jc-next-line,
    [data-theme="dark"] .jc-next-line strong {
        color: #AEAEB2;
    }

    [data-theme="dark"] .mcs-actions {
        background: #1C1C1E;
    }

    [data-theme="dark"] .mcs-actions-left {
        border-right-color: rgba(84, 84, 88, 0.65);
    }

    [data-theme="dark"] .mcs-actions-right {
        border-left-color: rgba(84, 84, 88, 0.65);
    }

    [data-theme="dark"] .mcs-action {
        background: #2C2C2E;
        border-radius: 16px;
    }

    [data-theme="dark"] .mcs-action b {
        color: #E5E5EA;
    }

    [data-theme="dark"] .mcs-action span {
        background: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .mcs-action-call {
        color: #30D158;
    }

    [data-theme="dark"] .mcs-action-text {
        color: #0A84FF;
    }

    [data-theme="dark"] .mcs-action-map,
    [data-theme="dark"] .mcs-action-note {
        color: #FF9F0A;
    }

    [data-theme="dark"] .mcs-action-complete {
        color: #A29EF1;
    }

    [data-theme="dark"] .mcs-open-left,
    [data-theme="dark"] .mcs-open-right {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
    }

    [data-theme="dark"] .mcs-action:active {
        opacity: 0.85;
        transform: scale(0.96);
    }

    .mjd-co-effect {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: #6B7280;
        font-style: normal;
    }

    .mjd-segmented {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        background: #F2F2F7;
        border-radius: 10px;
        padding: 4px;
        margin-bottom: 12px;
    }

    .mjd-seg-btn {
        appearance: none;
        border: 0;
        background: transparent;
        padding: 8px 0;
        border-radius: 7px;
        font: 600 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        color: #3A3A3C;
        cursor: pointer;
    }

    .mjd-seg-btn.is-active {
        background: #FFFFFF;
        color: #007AFF;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    [data-theme="dark"] .mjd-co-effect {
        color: #98989F;
    }

    [data-theme="dark"] .mjd-segmented {
        background: #1C1C1E;
    }

    [data-theme="dark"] .mjd-seg-btn {
        color: #C7C7CC;
    }

    [data-theme="dark"] .mjd-seg-btn.is-active {
        background: #2C2C2E;
        color: #5AC8FA;
    }

    .mjd-checklist-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mjd-checklist-count {
        font-weight: 600;
        color: #6B7280;
        margin-left: 6px;
    }

    .mjd-checklist-bar {
        height: 6px;
        background: #E5E5EA;
        border-radius: 3px;
        overflow: hidden;
        margin: 0 0 12px;
    }

    .mjd-checklist-bar > div {
        height: 100%;
        transition: width 200ms ease;
    }

    .mjd-checklist-actions {
        margin: 0 0 12px;
    }

    [data-theme="dark"] .mjd-checklist-count {
        color: #98989F;
    }

    [data-theme="dark"] .mjd-checklist-bar {
        background: #1C1C1E;
    }

    .mjd-dial-panel {
        display: flex;
        gap: 14px;
        align-items: center;
        padding: 12px 14px;
        background: #FFFFFF;
        border-radius: 12px;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .mjd-dial-info {
        flex: 1;
        min-width: 0;
    }

    .mjd-dial-status {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }

    .mjd-dial-status-ontrack {
        background: rgba(0, 122, 255, 0.12);
        color: #007AFF;
    }

    .mjd-dial-status-complete {
        background: rgba(52, 199, 89, 0.14);
        color: #1F8B3C;
    }

    .mjd-dial-status-behind {
        background: rgba(255, 59, 48, 0.14);
        color: #D70015;
    }

    .mjd-dial-count {
        margin-top: 6px;
        font-size: 13px;
        color: #6B7280;
    }

    .mjd-dial-eta {
        margin-top: 2px;
        font-size: 12px;
        color: #6B7280;
    }

    .mjd-dial-pct {
        font: 700 22px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
        fill: #111827;
    }

    .mjd-dial-label {
        font: 700 9px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        letter-spacing: 0.6px;
        fill: #8E8E93;
    }

    .mjd-subject-link {
        display: block;
        color: #007AFF;
        font-weight: 700;
        font-size: 16px;
        text-decoration: none;
    }

    .mjd-subject-link:active {
        opacity: 0.7;
    }

    .mjd-doc-group {
        margin-bottom: 14px;
    }

    .mjd-doc-group-title {
        margin-top: 4px;
    }

    .mjd-docs-actions {
        margin-bottom: 12px;
    }

    [data-theme="dark"] .mjd-dial-panel {
        background: #1C1C1E;
        box-shadow: none;
    }

    [data-theme="dark"] .mjd-dial-pct {
        fill: #F2F2F7;
    }

    [data-theme="dark"] .mjd-dial-count,
    [data-theme="dark"] .mjd-dial-eta {
        color: #98989F;
    }

    [data-theme="dark"] .mjd-subject-link {
        color: #0A84FF;
    }

    .mjd-pkg-subtitle {
        margin: -8px 0 12px;
        color: #6B7280;
        font-size: 13px;
    }

    .mjd-pkg-warning {
        margin: 0 0 12px;
        padding: 10px 12px;
        background: rgba(255, 180, 0, 0.14);
        border-radius: 10px;
        font-size: 13px;
        color: #8C6A00;
    }

    .mjd-totals-warn {
        margin: 0 0 12px;
        padding: 10px 12px;
        background: rgba(255, 180, 0, 0.14);
        border-radius: 10px;
        font-size: 13px;
        color: #8C6A00;
    }

    .mjd-totals-warn strong {
        display: block;
        margin-bottom: 4px;
    }

    .mjd-totals-warn ul {
        margin: 0;
        padding-left: 18px;
    }

    [data-theme="dark"] .mjd-totals-warn {
        background: rgba(255, 180, 0, 0.18);
        color: #FFD584;
    }

    .mjd-pkg-list {
        max-height: 50vh;
        overflow-y: auto;
        margin: 0 -16px 14px;
        padding: 0 16px;
        -webkit-overflow-scrolling: touch;
    }

    .mjd-pkg-list .mjd-mini-card {
        margin-bottom: 8px;
    }

    .mjd-pkg-row-missing {
        opacity: 0.7;
    }

    .mjd-pkg-fname {
        word-break: break-all;
        font-style: normal;
        color: #6B7280;
        font-size: 12px;
    }

    .mjd-pkg-loading {
        padding: 28px 0;
        text-align: center;
        color: #6B7280;
        font-size: 14px;
    }

    .mjd-pkg-actions {
        position: sticky;
        bottom: 0;
        background: #FFFFFF;
        margin: 0 -16px;
        padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 6px);
        border-top: 1px solid #E5E5EA;
    }

    [data-theme="dark"] .mjd-pkg-warning {
        background: rgba(255, 180, 0, 0.18);
        color: #FFD584;
    }

    [data-theme="dark"] .mjd-pkg-fname,
    [data-theme="dark"] .mjd-pkg-loading,
    [data-theme="dark"] .mjd-pkg-subtitle {
        color: #98989F;
    }

    [data-theme="dark"] .mjd-pkg-actions {
        background: #1C1C1E;
        border-top-color: #2C2C2E;
    }

    .mjd-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #007AFF;
    }

    .mjd-action-sheet-overlay {
        position: fixed;
        inset: 0;
        z-index: 8500;
        /* Heavier dim + a touch of backdrop blur so page text in the
           gaps between cards reads as material, not legible content
           (was 0.4 — section labels behind the sheet were leaking
           through). */
        background: rgba(0, 0, 0, 0.55);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        opacity: 0;
        transition: opacity 180ms ease;
    }

    .mjd-action-sheet-overlay.is-open {
        opacity: 1;
    }

    .mjd-action-sheet {
        width: 100%;
        max-width: 420px;
        padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
        transform: translateY(24px);
        transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .mjd-action-sheet-overlay.is-open .mjd-action-sheet {
        transform: translateY(0);
    }

    .mjd-as-card {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 18px;
        overflow: hidden;
        margin-bottom: 0;
        box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.08);
    }

    .mjd-as-group {
        margin-bottom: 15px;
    }

    .mjd-as-group-title {
        margin: 0 18px 6px;
        color: #8E8E93;
        font: 700 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        letter-spacing: 0.55px;
        text-transform: uppercase;
    }

    .mjd-as-title {
        text-align: center;
        padding: 14px 18px 12px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 22px;
        color: #6E6E73;
        font-size: 13px;
        font-weight: 600;
    }

    .mjd-as-cancel-card {
        margin-bottom: 0;
        box-shadow: none;
    }

    .mjd-as-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 49px;
        border: 0;
        background: transparent;
        padding: 0 16px;
        color: #1C1C1E;
        font: 500 16px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        cursor: pointer;
        text-align: left;
        position: relative;
    }

    .mjd-as-row + .mjd-as-row::before {
        content: "";
        position: absolute;
        top: 0;
        left: 16px;
        right: 16px;
        height: 0.5px;
        background: rgba(60, 60, 67, 0.16);
    }

    .mjd-as-card-icons .mjd-as-row + .mjd-as-row::before {
        left: 48px;
    }

    .mjd-as-row:active {
        background: rgba(60, 60, 67, 0.08);
    }

    .mjd-as-icon {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
    }

    .mjd-as-label {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mjd-as-row-danger {
        color: #FF3B30;
    }

    .mjd-as-cancel {
        display: block;
        width: 100%;
        min-height: 56px;
        border: 0;
        background: transparent;
        color: #007AFF;
        font: 600 17px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
        cursor: pointer;
        text-align: center;
    }

    .mjd-as-cancel:active {
        background: rgba(60, 60, 67, 0.08);
    }

    [data-theme="dark"] .mjd-more-btn {
        color: #0A84FF;
    }

    [data-theme="dark"] .mjd-as-card,
    [data-theme="dark"] .mjd-as-title {
        background: rgba(28, 28, 30, 0.96);
    }

    [data-theme="dark"] .mjd-as-card {
        box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .mjd-as-cancel-card {
        box-shadow: none;
    }

    [data-theme="dark"] .mjd-as-title {
        color: #AEAEB2;
    }

    [data-theme="dark"] .mjd-as-group-title {
        color: #8E8E93;
    }

    [data-theme="dark"] .mjd-as-row {
        color: #F2F2F7;
    }

    [data-theme="dark"] .mjd-as-row + .mjd-as-row::before {
        background: rgba(255, 255, 255, 0.10);
    }

    [data-theme="dark"] .mjd-as-row:active,
    [data-theme="dark"] .mjd-as-cancel:active {
        background: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .mjd-as-row-danger {
        color: #FF453A;
    }

    [data-theme="dark"] .mjd-as-cancel {
        color: #0A84FF;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Post-launch polish (2026-04-28). Direct html.mobile-touch-ui selectors —
   no media query — so iOS standalone PWAs that report odd viewports still
   pick this up. Light/dark gated via [data-theme]. Desktop is unaffected
   because it never gets the .mobile-touch-ui class.
   ══════════════════════════════════════════════════════════════════════════ */

/* Header — slightly more translucent so content ghosts through more clearly. */
html.mobile-touch-ui:not([data-theme="dark"]) .site-header {
    background: rgba(255, 255, 255, 0.85) !important;
}

/* Bottom tab — neutral gray pill for both modes; the primary signal is
   icon + label going system blue. */
html.mobile-touch-ui[data-theme="dark"] #bottom-tab-bar .btab {
    color: rgba(235,235,245,0.72) !important;
}

html.mobile-touch-ui[data-theme="dark"] #bottom-tab-bar .btab-active {
    background: rgba(120, 120, 128, 0.24) !important;
    color: #0A84FF !important;
}

html.mobile-touch-ui[data-theme="dark"] #bottom-tab-bar .btab-active .btab-icon,
html.mobile-touch-ui[data-theme="dark"] #bottom-tab-bar .btab-active .btab-label {
    color: #0A84FF !important;
}

/* Create keeps its own accent in dark too. */
html.mobile-touch-ui[data-theme="dark"] #bottom-tab-bar .btab.btab-create {
    color: rgb(var(--create-color-rgb)) !important;
}

/* Runtime dark bar — match the higher blur + softened shadow set by
   the media-query rule, in case the @media path is bypassed in PWA. */
html.mobile-touch-ui[data-theme="dark"] #bottom-tab-bar {
    background: rgba(28, 28, 30, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
}

/* Runtime dark Create — strip pill chrome to match siblings. */
html.mobile-touch-ui[data-theme="dark"] #bottom-tab-bar .btab-create {
    background: transparent !important;
    box-shadow: none !important;
}
html.mobile-touch-ui[data-theme="dark"] #bottom-tab-bar .btab-create .btab-icon {
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* iOS-Settings-style grouped row container.
   `.job-section-cards` wraps every job row inside one status group. The
   container carries a soft translucent fill (the visual "frame"),
   rounded corners, and a hairline ring. Rows inside lose their card
   chrome — no per-row shadow, no inter-row gap — so they read as one
   continuous list with hairline dividers between them (none on the
   last). Each row's opaque header keeps the swipe-action tray hidden
   at rest. */
html.mobile-touch-ui .job-section-cards {
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    /* No L/R margin — `.main-wrap` already supplies a 12px iOS-standard
       gutter on mobile. Stacking another 12px here insets the grouped
       list to ~24px, which reads as "not full width". */
    margin: 0 0 18px !important;
    box-shadow: 0 0 0 1px rgba(60, 60, 67, 0.08) !important;
}

html.mobile-touch-ui[data-theme="dark"] .job-section-cards {
    background: rgba(28, 28, 30, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Strip per-row card chrome inherited from the base `.job-card` rule
   (margin-bottom, drop shadow, full border) — those make rows look
   like stacked cards. Replace with a single bottom hairline. */
html.mobile-touch-ui .job-section-cards > .job-card.jc-mobile-row {
    margin: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
    border-radius: 0 !important;
    min-height: 44px;
}

html.mobile-touch-ui[data-theme="dark"] .job-section-cards > .job-card.jc-mobile-row {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.mobile-touch-ui .job-section-cards > .job-card.jc-mobile-row:last-child {
    border-bottom: 0 !important;
}

/* Tightened text hierarchy — money + next now share one line via the JS
   change in job-card.js, so the standalone next-line is redundant. */
html.mobile-touch-ui .job-card.jc-mobile-row .jc-next-line {
    display: none !important;
}

/* Trim breathing room between identity (client name) and the secondary
   lines so the card scans like a single iOS row, not 4 stacked stripes. */
html.mobile-touch-ui .job-card.jc-mobile-row .job-header {
    row-gap: 2px !important;
}
html.mobile-touch-ui .job-card.jc-mobile-row .jc-identity {
    gap: 2px !important;
}


/* ============================================================
 * Jobs filter / search popup — iOS 18 / Keynote glass on mobile
 *
 * Pairs with the desktop iOS18 treatment in 10-desktop-ios18.css so
 * both surfaces read as the same family of glass menus. Scoped to
 * html.mobile-touch-ui (set by the inline boot script in dashboard
 * .html) so it never bleeds onto desktop. The base look already
 * lives in 01-base.css; these overrides lock the always-dark
 * Keynote-style tone, the iOS row metrics, and the 200ms hover/
 * press transitions on touch.
 * ============================================================ */
/* Adaptive material — split light/dark so each theme uses the right
 * blur, saturation, and tint. Single base color (no gradient stacks)
 * with one inset top highlight and a soft drop. */
html.mobile-touch-ui[data-theme="dark"] .jobs-more-menu {
    /* Deep dark glass: opaque enough that page content behind doesn't
     * bleed through, blur+saturate still give the iOS frosted feel. */
    background: rgba(28, 28, 32, 0.92) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(30px) saturate(170%) !important;
    backdrop-filter: blur(30px) saturate(170%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.24) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    transition: opacity 200ms ease, transform 200ms ease;
}
html.mobile-touch-ui:not([data-theme="dark"]) .jobs-more-menu {
    /* Light glass: opaque enough that page content behind doesn't
     * bleed through. Blur+saturate keep the iOS frosted feel. */
    background: rgba(255, 255, 255, 0.92) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 12px 40px rgba(15, 26, 45, 0.22) !important;
    color: #1B3350 !important;
    transition: opacity 200ms ease, transform 200ms ease;
}

/* Section gap as a soft sheet break, not a visible rule. */
html.mobile-touch-ui .jobs-more-menu .jobs-more-section + .jobs-more-section {
    border-top: 8px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Comfortable iOS row metrics. */
html.mobile-touch-ui .jobs-more-menu .jobs-more-row {
    padding: 16px 22px;
    gap: 16px;
    transition: background-color 200ms ease;
}
/* Row hairline — adaptive: faint white on dark glass, faint navy on light. */
html.mobile-touch-ui[data-theme="dark"] .jobs-more-menu .jobs-more-row + .jobs-more-row::before {
    left: 60px;
    background: rgba(255, 255, 255, 0.08);
}
html.mobile-touch-ui:not([data-theme="dark"]) .jobs-more-menu .jobs-more-row + .jobs-more-row::before {
    left: 60px;
    background: rgba(15, 26, 45, 0.10);
}

/* Hover/press wash — adaptive: white-tint on dark, navy-tint on light. */
html.mobile-touch-ui[data-theme="dark"] .jobs-more-menu .jobs-more-row:hover,
html.mobile-touch-ui[data-theme="dark"] .jobs-more-menu .jobs-more-row:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}
html.mobile-touch-ui[data-theme="dark"] .jobs-more-menu .jobs-more-row:active {
    background: rgba(255, 255, 255, 0.10);
}
html.mobile-touch-ui:not([data-theme="dark"]) .jobs-more-menu .jobs-more-row:hover,
html.mobile-touch-ui:not([data-theme="dark"]) .jobs-more-menu .jobs-more-row:focus-visible {
    background: rgba(15, 26, 45, 0.05);
    outline: none;
}
html.mobile-touch-ui:not([data-theme="dark"]) .jobs-more-menu .jobs-more-row:active {
    background: rgba(15, 26, 45, 0.08);
}

/* Icon + label colors — inherit the panel's `color` so they adapt to
 * theme automatically (white on dark glass, navy on light glass). */
html.mobile-touch-ui .jobs-more-menu .jobs-more-icon {
    color: inherit;
    flex: 0 0 24px;
}
html.mobile-touch-ui .jobs-more-menu .jobs-more-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.6;
}
html.mobile-touch-ui .jobs-more-menu .jobs-more-label {
    font-size: 17px;
    font-weight: 500;
    color: inherit;
    letter-spacing: 0.1px;
}
/* Secondary value text (the dropdown's selected option) — softer than
 * the label in both themes. */
html.mobile-touch-ui[data-theme="dark"] .jobs-more-menu .jobs-more-select-wrap,
html.mobile-touch-ui[data-theme="dark"] .jobs-more-menu .jobs-more-select-wrap select {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
}
html.mobile-touch-ui:not([data-theme="dark"]) .jobs-more-menu .jobs-more-select-wrap,
html.mobile-touch-ui:not([data-theme="dark"]) .jobs-more-menu .jobs-more-select-wrap select {
    color: rgba(15, 26, 45, 0.55);
    font-size: 15px;
}

/* Destructive Clear filters in iOS red. */
html.mobile-touch-ui .jobs-more-menu .jobs-more-row-danger .jobs-more-label,
html.mobile-touch-ui .jobs-more-menu .jobs-more-row-danger .jobs-more-icon {
    color: #FF453A;
}

/* Dim backdrop — barely-there. Page content stays visibly present
 * so the panel's backdrop-filter has real pixels to blur, and the
 * glass appears to glow rather than dim. */
html.mobile-touch-ui[data-theme="dark"] .jobs-more-backdrop {
    background: rgba(0, 0, 0, 0.12) !important;
    transition: opacity 200ms ease;
}
html.mobile-touch-ui:not([data-theme="dark"]) .jobs-more-backdrop {
    background: rgba(15, 26, 45, 0.10) !important;
    transition: opacity 200ms ease;
}

/* Compact Payment Schedule rendered inside the Scope section. Each row
   is a single line (milestone + amount on the right) with an optional
   muted sub-line for the "Due upon ..." text. Reads as a dense table,
   not a stack of cards — half the vertical space of .mjd-mini-card. */
.mjd-pay-plan {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(15, 26, 45, 0.08);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 4px;
}
[data-theme="dark"] .mjd-pay-plan {
    background: rgba(28, 32, 42, 0.50);
    border-color: rgba(255, 255, 255, 0.06);
}
.mjd-pay-plan-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 0.5px solid rgba(15, 26, 45, 0.06);
}
[data-theme="dark"] .mjd-pay-plan-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
.mjd-pay-plan-row:last-child { border-bottom: 0; }
.mjd-pay-plan-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mjd-pay-plan-text strong {
    font: 600 13px/1.25 'DM Sans', sans-serif;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mjd-pay-plan-text span {
    font: 500 11px/1.2 'DM Sans', sans-serif;
    color: var(--gray-3, #7A8694);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mjd-pay-plan-amt {
    flex: 0 0 auto;
    font: 700 13px/1 'DM Mono', ui-monospace, monospace;
    color: var(--text);
    white-space: nowrap;
}
[data-theme="dark"] .mjd-pay-plan-text strong,
[data-theme="dark"] .mjd-pay-plan-amt { color: #E4E8ED; }

/* Total row at the bottom of a .mjd-pay-plan table — slightly heavier
   so the eye lands on the sum at a glance. Top hairline reads as the
   subtotal divider; no body separator since it's the last row. */
.mjd-pay-plan-row.mjd-pay-plan-total {
    background: rgba(15, 26, 45, 0.04);
    border-top: 1px solid rgba(15, 26, 45, 0.10);
    border-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.mjd-pay-plan-row.mjd-pay-plan-total .mjd-pay-plan-text strong {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 11px;
    color: var(--text-lt, #4B5563);
}
.mjd-pay-plan-row.mjd-pay-plan-total .mjd-pay-plan-amt {
    font-size: 15px;
    color: var(--text);
}
[data-theme="dark"] .mjd-pay-plan-row.mjd-pay-plan-total {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .mjd-pay-plan-row.mjd-pay-plan-total .mjd-pay-plan-text strong { color: #C7D0DD; }
[data-theme="dark"] .mjd-pay-plan-row.mjd-pay-plan-total .mjd-pay-plan-amt { color: #E4E8ED; }

/* Negative-amount rows (discount, credit) — colored amount so the sign
   reads at a glance without the user having to parse the leading "-". */
.mjd-pay-plan-row .mjd-pay-plan-amt[data-neg="1"],
.mjd-pay-plan-amt[data-neg="1"] {
    color: #B0301F;
}
[data-theme="dark"] .mjd-pay-plan-amt[data-neg="1"] {
    color: #F5A89D;
}

/* ── Money grid (Payments tiles) — applies on every viewport ──────────
   Used by the v2 Payments summary on both mobile and desktop. Defined
   outside any @media block so the desktop card renders the same boxed
   tiles the iPhone shows. Variant classes (-2, -3, -4) override the
   column count; -4 ramps from 2x2 (small) to 4-col (>=600px) below. */
.mjd-money-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.mjd-money-grid-3 {
    grid-template-columns: 1fr;
}
.mjd-money-grid-2 {
    grid-template-columns: 1fr 1fr;
}
.mjd-money-grid > div {
    padding: 14px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(60, 60, 67, 0.12);
    box-shadow: 0 1px 2px rgba(60, 60, 67, 0.06);
}
.mjd-money-grid > div > span {
    display: block;
    color: #8E8E93;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mjd-money-grid > div > strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 20px;
}
[data-theme="dark"] .mjd-money-grid > div {
    background: rgba(28, 32, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .mjd-money-grid > div > span {
    color: var(--gray-3, #8FA4BF);
}
[data-theme="dark"] .mjd-money-grid > div > strong {
    color: var(--text, #E0E4EA);
}

/* ── Payments proposal (v2) — side-by-side preview UI ─────────────────
   These styles are scoped to .mjd-pv2-* so they don't bleed into the
   live Payments section. Easy to delete the whole block once a layout
   is picked. */
.mjd-pv2-tag {
    background: rgba(255, 159, 10, 0.14);
    color: #B25E00;
    border: 1px dashed rgba(255, 159, 10, 0.45);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 6px 0 12px;
    font: 600 11px/1.3 'DM Sans', sans-serif;
    letter-spacing: 0.2px;
    text-align: center;
}
[data-theme="dark"] .mjd-pv2-tag {
    background: rgba(255, 159, 10, 0.14);
    color: #FFD180;
    border-color: rgba(255, 159, 10, 0.30);
}

.mjd-pv2-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 4px 8px;
    font: 700 11px/1 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-lt, #4B5563);
}
/* Tint the To-invoice header red — it's actionable work waiting on
   you. Awaiting-customer stays neutral; the row borders carry the
   state color, header doesn't need to compete. */
.mjd-pv2-section-head-needs-invoice {
    color: #B0301F;
}
[data-theme="dark"] .mjd-pv2-section-head-needs-invoice { color: #F5A89D; }
.mjd-pv2-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mjd-pv2-head-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--navy, #1B3350);
    color: #fff;
    font: 700 11px/1 'DM Sans', sans-serif;
    text-transform: none;
    letter-spacing: 0.2px;
    cursor: pointer;
}
.mjd-pv2-head-btn:active { filter: brightness(0.92); }
.mjd-pv2-head-btn-ghost {
    background: transparent;
    color: var(--text-lt, #4B5563);
    border: 1px solid rgba(15, 26, 45, 0.18);
}
[data-theme="dark"] .mjd-pv2-head-btn-ghost {
    color: #C7D0DD;
    border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .mjd-pv2-section-head { color: #C7D0DD; }
.mjd-pv2-section-head .mjd-pv2-count {
    background: rgba(15, 26, 45, 0.08);
    color: var(--gray-3, #7A8694);
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}
[data-theme="dark"] .mjd-pv2-section-head .mjd-pv2-count {
    background: rgba(255, 255, 255, 0.08);
    color: #8FA4BF;
}

/* Headline number that sits next to a section name. Same usage in
   .mjd-pv2-section-head and inside <details><summary>. Reads as the
   answer to "how much?", not as decorative chrome. */
.mjd-pv2-headline {
    font: 700 14px/1 'DM Mono', ui-monospace, monospace;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
[data-theme="dark"] .mjd-pv2-headline { color: #E4E8ED; }
.mjd-pv2-details > summary .mjd-pv2-headline { margin-left: auto; }
.mjd-pv2-details > summary .mjd-pv2-count { margin-left: 8px; }

.mjd-pv2-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mjd-pv2-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 26, 45, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 26, 45, 0.04);
}
[data-theme="dark"] .mjd-pv2-row {
    background: rgba(28, 32, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.06);
}
.mjd-pv2-row.voided { opacity: 0.55; }

.mjd-pv2-pill {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    font: 700 11px/1 'DM Sans', sans-serif;
    letter-spacing: 0.2px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mjd-pv2-pill-paid          { background: rgba(48, 209, 88, 0.16);  color: #1B7F3D; }
.mjd-pv2-pill-awaiting      { background: rgba(255, 159, 10, 0.18); color: #8A4B00; }
.mjd-pv2-pill-invoiced      { background: rgba(46, 117, 182, 0.14); color: #1E5A8C; }
.mjd-pv2-pill-needs_invoice { background: rgba(231, 76, 60, 0.14);  color: #B0301F; }
.mjd-pv2-pill-open          { background: rgba(15, 26, 45, 0.06);   color: var(--gray-3, #7A8694); }
.mjd-pv2-pill-invoice       { background: rgba(46, 117, 182, 0.14); color: #1E5A8C; }
.mjd-pv2-pill-voided        { background: rgba(15, 26, 45, 0.10);   color: var(--gray-3, #7A8694); }
[data-theme="dark"] .mjd-pv2-pill-paid          { background: rgba(48, 209, 88, 0.22);  color: #8AE2A6; }
[data-theme="dark"] .mjd-pv2-pill-awaiting      { background: rgba(255, 159, 10, 0.22); color: #FFD180; }
[data-theme="dark"] .mjd-pv2-pill-invoiced      { background: rgba(124, 173, 217, 0.18); color: #A6CCEE; }
[data-theme="dark"] .mjd-pv2-pill-needs_invoice { background: rgba(231, 76, 60, 0.22);  color: #F5A89D; }
[data-theme="dark"] .mjd-pv2-pill-open          { background: rgba(255,255,255,0.06);    color: #8FA4BF; }
[data-theme="dark"] .mjd-pv2-pill-invoice       { background: rgba(124, 173, 217, 0.18); color: #A6CCEE; }
[data-theme="dark"] .mjd-pv2-pill-voided        { background: rgba(255,255,255,0.08);    color: #8FA4BF; }

/* Pending rows get a subtle border tint matching the pill so the eye
   tracks straight to the actionable lines. needs_invoice pulls hardest
   (red border + small glow) since it's the brand-new work-to-do. */
.mjd-pv2-row-needs_invoice {
    border-color: rgba(231, 76, 60, 0.40);
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.10), 0 1px 2px rgba(15, 26, 45, 0.04);
}
.mjd-pv2-row-invoiced {
    border-color: rgba(46, 117, 182, 0.32);
}
.mjd-pv2-row-awaiting {
    border-color: rgba(255, 159, 10, 0.36);
}
[data-theme="dark"] .mjd-pv2-row-needs_invoice {
    border-color: rgba(231, 76, 60, 0.45);
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.14), 0 1px 2px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] .mjd-pv2-row-invoiced { border-color: rgba(124, 173, 217, 0.30); }
[data-theme="dark"] .mjd-pv2-row-awaiting { border-color: rgba(255, 159, 10, 0.40); }

/* "Next: …" sub-line — slightly bolder + tinted by state so the next
   action reads as guidance, not a label. */
.mjd-pv2-text .mjd-pv2-next {
    font-weight: 600;
    color: var(--text-lt, #4B5563);
}
.mjd-pv2-row-needs_invoice .mjd-pv2-next { color: #B0301F; }
.mjd-pv2-row-invoiced      .mjd-pv2-next { color: #1E5A8C; }
.mjd-pv2-row-awaiting      .mjd-pv2-next { color: #8A4B00; }
[data-theme="dark"] .mjd-pv2-text .mjd-pv2-next { color: #C7D0DD; }
[data-theme="dark"] .mjd-pv2-row-needs_invoice .mjd-pv2-next { color: #F5A89D; }
[data-theme="dark"] .mjd-pv2-row-invoiced      .mjd-pv2-next { color: #A6CCEE; }
[data-theme="dark"] .mjd-pv2-row-awaiting      .mjd-pv2-next { color: #FFD180; }

/* Action button color matches the most-urgent state so eye + thumb
   land in the same place. needs_invoice → red; everything else stays
   on the navy primary. */
.mjd-pv2-row-needs_invoice .mjd-pv2-action {
    background: #C0392B;
}

.mjd-pv2-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mjd-pv2-text strong {
    font: 600 14px/1.2 'DM Sans', sans-serif;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mjd-pv2-text span {
    font: 500 11px/1.2 'DM Sans', sans-serif;
    color: var(--gray-3, #7A8694);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mjd-pv2-amount {
    font: 700 15px/1 'DM Mono', ui-monospace, monospace;
    color: var(--text);
    white-space: nowrap;
}

.mjd-pv2-action {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--navy, #1B3350);
    color: #fff;
    font: 600 12px/1 'DM Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.mjd-pv2-action:active { filter: brightness(0.92); }

/* Collapsible section blocks — native <details>. */
.mjd-pv2-details {
    margin-top: 14px;
    border: 1px solid rgba(15, 26, 45, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
}
[data-theme="dark"] .mjd-pv2-details {
    background: rgba(28, 32, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.06);
}
.mjd-pv2-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 700 12px/1 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-lt, #4B5563);
}
[data-theme="dark"] .mjd-pv2-details > summary { color: #C7D0DD; }
.mjd-pv2-details > summary::-webkit-details-marker { display: none; }
.mjd-pv2-details > summary::after {
    content: '›';
    color: var(--gray-3, #7A8694);
    transition: transform 0.18s ease;
    font-size: 18px;
    margin-left: 8px;
}
.mjd-pv2-details[open] > summary::after { transform: rotate(90deg); }
.mjd-pv2-details > .mjd-pv2-list,
.mjd-pv2-details > .mjd-money-grid {
    padding: 0 12px 12px;
}
.mjd-pv2-details .mjd-pv2-count {
    background: rgba(15, 26, 45, 0.08);
    color: var(--gray-3, #7A8694);
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.2px;
    margin-left: auto;
}
[data-theme="dark"] .mjd-pv2-details .mjd-pv2-count {
    background: rgba(255,255,255,0.08);
    color: #8FA4BF;
}

@media (max-width: 430px) {
    /* Mid-size iPhones (393, 414, 430): keep 4-col layout but tighten
       gap + padding so the title doesn't truncate to 5 chars. */
    .mjd-pv2-row {
        gap: 6px;
        padding: 11px 10px;
    }
    .mjd-pv2-pill {
        max-width: 110px;
        padding: 4px 8px;
    }
    .mjd-pv2-action {
        padding: 6px 10px;
    }
}
@media (max-width: 360px) {
    /* Very tight phones (SE-class): action drops to a 2nd row. */
    .mjd-pv2-row { grid-template-columns: auto 1fr auto; }
    .mjd-pv2-action { grid-column: 1 / -1; justify-self: end; }
}

/* ── v2 Payments — feed-the-books additions ────────────────────────── */

/* 4-tile money strip: Contract / Received / Open A/R / Balance.
   2x2 on phone, single row on wider screens. */
.mjd-money-grid-4 {
    grid-template-columns: 1fr 1fr;
}
@media (min-width: 600px) {
    .mjd-money-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Top status pill — single read of the job's payment health. Sits
   above the money grid; bigger and bolder than row pills since it's
   the headline. */
.mjd-pv2-status-row {
    margin: 4px 0 10px;
    display: flex;
    justify-content: flex-start;
}
.mjd-pv2-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font: 700 12px/1 'DM Sans', sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.mjd-pv2-status-pill-needs_invoice { background: rgba(231, 76, 60, 0.16);  color: #B0301F; }
.mjd-pv2-status-pill-overdue       { background: rgba(231, 76, 60, 0.20);  color: #9B2418; }
.mjd-pv2-status-pill-awaiting      { background: rgba(255, 159, 10, 0.20); color: #8A4B00; }
.mjd-pv2-status-pill-paid          { background: rgba(48, 209, 88, 0.20);  color: #1B7F3D; }
.mjd-pv2-status-pill-open          { background: rgba(15, 26, 45, 0.08);   color: var(--text-lt, #4B5563); }
[data-theme="dark"] .mjd-pv2-status-pill-needs_invoice { background: rgba(231, 76, 60, 0.24);  color: #F5A89D; }
[data-theme="dark"] .mjd-pv2-status-pill-overdue       { background: rgba(231, 76, 60, 0.28);  color: #FFB3A8; }
[data-theme="dark"] .mjd-pv2-status-pill-awaiting      { background: rgba(255, 159, 10, 0.24); color: #FFD180; }
[data-theme="dark"] .mjd-pv2-status-pill-paid          { background: rgba(48, 209, 88, 0.26);  color: #8AE2A6; }
[data-theme="dark"] .mjd-pv2-status-pill-open          { background: rgba(255,255,255,0.08);   color: #C7D0DD; }

/* Row-level overdue badge — small, inline with the row title. */
.mjd-pv2-overdue {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(231, 76, 60, 0.16);
    color: #B0301F;
    font: 700 10px/1 'DM Sans', sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
[data-theme="dark"] .mjd-pv2-overdue {
    background: rgba(231, 76, 60, 0.24);
    color: #F5A89D;
}
.mjd-pv2-row.is-overdue {
    border-color: rgba(231, 76, 60, 0.45);
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.08), 0 1px 2px rgba(15, 26, 45, 0.04);
}
[data-theme="dark"] .mjd-pv2-row.is-overdue {
    border-color: rgba(231, 76, 60, 0.50);
}

/* Small ghost-style action inside <details> summary — for "Log Hours"
   (Labor section) and "Import PDF" (Invoices section). Visually
   subordinate so the summary still reads as a section header. */
.mjd-pv2-summary-link {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(15, 26, 45, 0.18);
    border-radius: 999px;
    padding: 4px 10px;
    margin-left: 8px;
    color: var(--text-lt, #4B5563);
    font: 600 11px/1 'DM Sans', sans-serif;
    text-transform: none;
    letter-spacing: 0.2px;
    cursor: pointer;
}
.mjd-pv2-summary-link:active { filter: brightness(0.92); }
[data-theme="dark"] .mjd-pv2-summary-link {
    border-color: rgba(255, 255, 255, 0.18);
    color: #C7D0DD;
}
/* Keep the count chip pinned right when a link sits between name + count. */
.mjd-pv2-details > summary .mjd-pv2-summary-link { margin-left: 8px; }
.mjd-pv2-details > summary .mjd-pv2-summary-link + .mjd-pv2-count { margin-left: auto; }

/* Empty-state row inside a <details> archive — softer than the row
   articles, for "No invoices on file." etc. */
.mjd-pv2-empty-row {
    padding: 12px 14px;
    color: var(--gray-3, #7A8694);
    font: 500 12px/1.4 'DM Sans', sans-serif;
}

/* Ad-hoc affordance row — small ghost chips for unscheduled cash /
   unplanned billing. Sits below the active workflow lists, above the
   archives. Demoted by design so per-row actions stay primary. */
.mjd-pv2-adhoc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 4px 6px;
}
.mjd-pv2-adhoc-chip {
    appearance: none;
    background: transparent;
    border: 1px dashed rgba(15, 26, 45, 0.22);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--text-lt, #4B5563);
    font: 600 11px/1 'DM Sans', sans-serif;
    cursor: pointer;
}
.mjd-pv2-adhoc-chip:active { filter: brightness(0.92); }
[data-theme="dark"] .mjd-pv2-adhoc-chip {
    border-color: rgba(255, 255, 255, 0.20);
    color: #C7D0DD;
}

/* Expandable invoice rows — each invoice is a nested <details> inside
   the Invoices archive. Summary uses the existing row layout; expanded
   body shows line items, totals, and actions. */
.mjd-pv2-inv {
    border-radius: 12px;
    overflow: hidden;
}
/* Summary keeps default block display — the grid lives on the inner
   div so iOS Safari doesn't fight us over rendering grid on <summary>. */
.mjd-pv2-inv-summary {
    list-style: none;
    cursor: pointer;
    display: block;
    padding: 0;
    margin: 0;
}
.mjd-pv2-inv-summary::-webkit-details-marker { display: none; }
.mjd-pv2-inv-summary::marker { display: none; content: ''; }
/* Inner row: the row class brings the grid columns; we extend with a
   trailing column for the chevron so the layout is explicit. */
.mjd-pv2-inv-summary > .mjd-pv2-row {
    grid-template-columns: auto 1fr auto auto;
}
.mjd-pv2-inv-chev {
    color: var(--gray-3, #7A8694);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.18s ease;
    transform-origin: center;
    display: inline-block;
}
.mjd-pv2-inv[open] .mjd-pv2-inv-chev { transform: rotate(90deg); }
.mjd-pv2-inv.voided { opacity: 0.65; }
@media (max-width: 380px) {
    /* Tight phones: keep all 4 columns so the chevron stays inline.
       Tighter gap + smaller pill so they fit comfortably. */
    .mjd-pv2-inv-summary > .mjd-pv2-row {
        gap: 6px;
        padding: 11px 10px;
    }
}
.mjd-pv2-inv-body {
    padding: 12px 14px 14px;
    background: rgba(15, 26, 45, 0.02);
    border: 1px solid rgba(15, 26, 45, 0.06);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    margin-top: -4px;
}
[data-theme="dark"] .mjd-pv2-inv-body {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}
.mjd-pv2-inv-lines {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mjd-pv2-inv-lines li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 500 12px/1.3 'DM Sans', sans-serif;
    color: var(--text);
}
.mjd-pv2-inv-lines li b {
    font: 600 12px/1.3 'DM Mono', ui-monospace, monospace;
    color: var(--text);
    white-space: nowrap;
}
[data-theme="dark"] .mjd-pv2-inv-lines li,
[data-theme="dark"] .mjd-pv2-inv-lines li b { color: #E4E8ED; }
.mjd-pv2-inv-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 26, 45, 0.06);
    border-radius: 8px;
    margin-bottom: 10px;
}
.mjd-pv2-inv-totals > div {
    display: flex;
    justify-content: space-between;
    font: 500 12px/1.3 'DM Sans', sans-serif;
    color: var(--text-lt, #4B5563);
}
.mjd-pv2-inv-totals > div b {
    font: 600 12px/1.3 'DM Mono', ui-monospace, monospace;
    color: var(--text);
}
.mjd-pv2-inv-total {
    border-top: 1px solid rgba(15, 26, 45, 0.10);
    padding-top: 4px;
    margin-top: 2px;
    font-weight: 700;
}
.mjd-pv2-inv-total span { font-weight: 700; color: var(--text); }
.mjd-pv2-inv-total b { font-size: 14px; }
[data-theme="dark"] .mjd-pv2-inv-totals {
    background: rgba(28, 32, 42, 0.65);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .mjd-pv2-inv-totals > div { color: #C7D0DD; }
[data-theme="dark"] .mjd-pv2-inv-totals > div b { color: #E4E8ED; }
[data-theme="dark"] .mjd-pv2-inv-total { border-top-color: rgba(255, 255, 255, 0.10); }
.mjd-pv2-inv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.mjd-pv2-inv-btn {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(15, 26, 45, 0.18);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--text-lt, #4B5563);
    font: 600 11px/1 'DM Sans', sans-serif;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.mjd-pv2-inv-btn:active { filter: brightness(0.92); }
.mjd-pv2-inv-btn-danger {
    color: #B0301F;
    border-color: rgba(231, 76, 60, 0.40);
}
[data-theme="dark"] .mjd-pv2-inv-btn {
    border-color: rgba(255, 255, 255, 0.18);
    color: #C7D0DD;
}
[data-theme="dark"] .mjd-pv2-inv-btn-danger {
    color: #F5A89D;
    border-color: rgba(231, 76, 60, 0.50);
}
.mjd-pv2-inv-muted {
    color: var(--gray-3, #7A8694);
    font: 500 11px/1.3 'DM Sans', sans-serif;
}
[data-theme="dark"] .mjd-pv2-inv-muted { color: #8FA4BF; }

/* ── Period P&L + Export CSV sheets ────────────────────────────────── */

.report-modal {
    max-width: 460px;
    width: 100%;
    padding: 16px;
    max-height: 85vh;
    overflow-y: auto;
}
.report-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.report-modal-title {
    font: 700 18px/1.2 'DM Sans', sans-serif;
    color: var(--text);
}
.report-modal-close {
    appearance: none;
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--gray-3, #7A8694);
    font: 700 16px/1 'DM Sans', sans-serif;
    cursor: pointer;
}
.report-modal-close:active { background: rgba(15, 26, 45, 0.08); }
[data-theme="dark"] .report-modal-close { color: #8FA4BF; }

.report-range-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.report-range-chip {
    appearance: none;
    border: 1px solid rgba(15, 26, 45, 0.18);
    background: transparent;
    border-radius: 999px;
    padding: 6px 12px;
    font: 600 12px/1 'DM Sans', sans-serif;
    color: var(--text-lt, #4B5563);
    cursor: pointer;
}
.report-range-chip.is-active {
    background: var(--navy, #1B3350);
    border-color: var(--navy, #1B3350);
    color: #fff;
}
.report-range-chip:active { filter: brightness(0.92); }
[data-theme="dark"] .report-range-chip {
    border-color: rgba(255, 255, 255, 0.18);
    color: #C7D0DD;
}
[data-theme="dark"] .report-range-chip.is-active {
    background: #2968A6;
    border-color: #2968A6;
    color: #fff;
}

.report-body { display: flex; flex-direction: column; gap: 12px; }

/* Custom date-range picker — hidden until the Custom chip is active. */
.report-custom-range {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid rgba(15, 26, 45, 0.10);
    border-radius: 12px;
    background: rgba(15, 26, 45, 0.04);
}
.report-custom-range.is-open { display: flex; }
[data-theme="dark"] .report-custom-range {
    border-color: var(--border, #1E2A3C);
    background: rgba(255, 255, 255, 0.03);
}
.report-custom-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.report-custom-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.report-custom-field span {
    font: 700 10px/1 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-3, #7A8694);
}
.report-custom-field input[type="date"] {
    appearance: none;
    background: #FFFFFF;
    border: 1px solid rgba(15, 26, 45, 0.18);
    border-radius: 8px;
    padding: 10px 12px;
    font: 500 14px/1.2 'DM Sans', sans-serif;
    color: var(--text);
    min-height: 40px;
}
[data-theme="dark"] .report-custom-field input[type="date"] {
    background: #0F1520;
    border-color: var(--gray-2, #2A3545);
    color: var(--text);
    color-scheme: dark;
}
.report-custom-apply {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    background: var(--navy, #1B3350);
    color: #fff;
    font: 700 13px/1 'DM Sans', sans-serif;
    cursor: pointer;
    align-self: flex-end;
}
.report-custom-apply:active { filter: brightness(0.92); }
[data-theme="dark"] .report-custom-apply {
    background: #2968A6;
}
.report-loading,
.report-error {
    padding: 24px 12px;
    text-align: center;
    color: var(--gray-3, #7A8694);
    font: 500 13px/1.3 'DM Sans', sans-serif;
}
.report-error { color: #B0301F; }

.report-period-line {
    font: 600 11px/1 'DM Mono', ui-monospace, monospace;
    color: var(--gray-3, #7A8694);
    text-align: center;
    letter-spacing: 0.4px;
}

.report-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.report-tiles > div {
    padding: 12px;
    border-radius: 12px;
    background: rgba(15, 26, 45, 0.04);
    border: 1px solid rgba(15, 26, 45, 0.06);
}
.report-tiles span {
    display: block;
    color: var(--gray-3, #7A8694);
    font: 700 10px/1 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.report-tiles strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font: 700 18px/1.1 'DM Sans', sans-serif;
}
[data-theme="dark"] .report-tiles > div {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .report-tiles span { color: #8FA4BF; }
[data-theme="dark"] .report-tiles strong { color: #E4E8ED; }

.report-net-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(15, 26, 45, 0.06);
}
.report-net-row span {
    font: 700 11px/1 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-lt, #4B5563);
}
.report-net-row strong {
    font: 700 18px/1 'DM Mono', ui-monospace, monospace;
    color: var(--text);
}
.report-net-positive { background: rgba(48, 209, 88, 0.14); }
.report-net-positive strong { color: #1B7F3D; }
.report-net-negative { background: rgba(231, 76, 60, 0.14); }
.report-net-negative strong { color: #B0301F; }
[data-theme="dark"] .report-net-positive { background: rgba(48, 209, 88, 0.18); }
[data-theme="dark"] .report-net-positive strong { color: #8AE2A6; }
[data-theme="dark"] .report-net-negative { background: rgba(231, 76, 60, 0.20); }
[data-theme="dark"] .report-net-negative strong { color: #F5A89D; }

.report-section {
    border: 1px solid rgba(15, 26, 45, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
.report-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font: 700 11px/1 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-lt, #4B5563);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.report-section > summary::-webkit-details-marker { display: none; }
.report-section > summary::after {
    content: '›';
    color: var(--gray-3, #7A8694);
    transition: transform 0.18s ease;
    font-size: 18px;
}
.report-section[open] > summary::after { transform: rotate(90deg); }
[data-theme="dark"] .report-section { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .report-section > summary { color: #C7D0DD; }

.report-breakdown {
    list-style: none;
    margin: 0;
    padding: 0 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.report-breakdown li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 500 12px/1.3 'DM Sans', sans-serif;
    color: var(--text);
}
.report-breakdown li b {
    font: 600 12px/1.3 'DM Mono', ui-monospace, monospace;
    color: var(--text);
    white-space: nowrap;
}
[data-theme="dark"] .report-breakdown li,
[data-theme="dark"] .report-breakdown li b { color: #E4E8ED; }

.report-hint {
    margin: 0;
    color: var(--text-lt, #4B5563);
    font: 500 13px/1.4 'DM Sans', sans-serif;
}
[data-theme="dark"] .report-hint { color: #C7D0DD; }

.report-export-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.report-export-btn {
    appearance: none;
    border: 1px solid rgba(15, 26, 45, 0.18);
    background: #FFFFFF;
    border-radius: 12px;
    padding: 14px;
    font: 600 14px/1 'DM Sans', sans-serif;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.report-export-btn:active {
    background: rgba(15, 26, 45, 0.06);
    filter: brightness(0.96);
}
[data-theme="dark"] .report-export-btn {
    background: rgba(28, 32, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.18);
    color: #E4E8ED;
}

/* By-job breakdown — denser per-row card with revenue/cogs/gp + margin pill. */
.report-section-count {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 26, 45, 0.08);
    color: var(--gray-3, #7A8694);
    font: 700 10px/1 'DM Sans', sans-serif;
    letter-spacing: 0.2px;
}
[data-theme="dark"] .report-section-count {
    background: rgba(255, 255, 255, 0.08);
    color: #8FA4BF;
}

.report-by-job { gap: 10px; }
.report-by-job-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 26, 45, 0.06);
    border-radius: 10px;
}
.report-by-job-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.report-by-job-title {
    font: 600 13px/1.2 'DM Sans', sans-serif;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.report-by-job-margin {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font: 700 11px/1 'DM Mono', ui-monospace, monospace;
}
.report-by-job-margin-pos { background: rgba(48, 209, 88, 0.18);  color: #1B7F3D; }
.report-by-job-margin-mid { background: rgba(255, 159, 10, 0.18); color: #8A4B00; }
.report-by-job-margin-neg { background: rgba(231, 76, 60, 0.18);  color: #B0301F; }
[data-theme="dark"] .report-by-job-margin-pos { background: rgba(48, 209, 88, 0.22);  color: #8AE2A6; }
[data-theme="dark"] .report-by-job-margin-mid { background: rgba(255, 159, 10, 0.22); color: #FFD180; }
[data-theme="dark"] .report-by-job-margin-neg { background: rgba(231, 76, 60, 0.22);  color: #F5A89D; }

.report-by-job-line {
    display: flex;
    justify-content: space-between;
    font: 500 12px/1.2 'DM Sans', sans-serif;
    color: var(--text);
}
.report-by-job-line b {
    font: 600 12px/1.2 'DM Mono', ui-monospace, monospace;
    color: var(--text);
}
.report-by-job-line-muted,
.report-by-job-line-muted b {
    color: var(--gray-3, #7A8694);
}
.report-by-job-line-gp {
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(15, 26, 45, 0.06);
    font-weight: 700;
}
.report-by-job-line-gp b { font-weight: 700; }

[data-theme="dark"] .report-by-job-row {
    background: rgba(28, 32, 42, 0.65);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .report-by-job-title,
[data-theme="dark"] .report-by-job-line,
[data-theme="dark"] .report-by-job-line b { color: #E4E8ED; }
[data-theme="dark"] .report-by-job-line-muted,
[data-theme="dark"] .report-by-job-line-muted b { color: #8FA4BF; }
[data-theme="dark"] .report-by-job-line-gp { border-top-color: rgba(255, 255, 255, 0.08); }