      :root {
        --bg: #060708;
        --surface: rgba(18, 20, 25, 0.62);
        --text: #f5f5f6;
        --muted: #9aa1ad;
        --border: rgba(255, 255, 255, 0.13);
        --accent: #818cf8;
        --accent-soft: rgba(66, 61, 155, 0.38);
        --menu-yellow-soft: rgba(59, 130, 246, 0.14);
        --menu-yellow-soft-strong: rgba(59, 130, 246, 0.24);
        --menu-yellow-border: rgba(59, 130, 246, 0.42);
        --menu-yellow-text: #dbeafe;
        /* Header / toolbar “+” add controls (customers, jobs, service, profile tabs) */
        --app-add-glyph: #86efac;
        --app-add-glyph-hover: #4ade80;
        --app-add-glyph-on-light: #16a34a;
        --app-add-glyph-on-light-hover: #22c55e;
        /* Native <select> / dropdown accent (focus + option highlight where browsers allow) */
        --form-select-accent: #2563eb;
        --form-select-highlight-soft: rgba(37, 99, 235, 0.14);
        --form-select-highlight-mid: rgba(37, 99, 235, 0.2);
        --profile-header-bg: rgba(15, 23, 42, 0.92);
        /* Baseline container scheme for future UI additions */
        --container-surface-bg: #2a3750;
        --container-surface-border: #25354f;
        --panel-bg: radial-gradient(85% 85% at 0% 0%, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0) 60%), linear-gradient(180deg, rgba(18, 20, 25, 0.74) 0%, rgba(18, 20, 25, 0.62) 100%);
        --drawer-bg: radial-gradient(90% 80% at 0% 0%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 60%), linear-gradient(180deg, rgba(18, 20, 25, 0.94) 0%, rgba(18, 20, 25, 0.9) 100%);
        --view-panel-bg: radial-gradient(90% 80% at 0% 0%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 55%), radial-gradient(90% 80% at 100% 100%, rgba(56, 189, 248, 0.14) 0%, rgba(56, 189, 248, 0) 52%), linear-gradient(180deg, rgba(12, 14, 18, 0.96) 0%, rgba(16, 18, 23, 0.97) 100%);
        --workspace-tabs-bg: rgba(15, 23, 42, 0.26);
        --workspace-body-bg: radial-gradient(80% 80% at 0% 0%, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0) 55%), radial-gradient(80% 80% at 100% 100%, rgba(56, 189, 248, 0.1) 0%, rgba(56, 189, 248, 0) 55%), linear-gradient(180deg, rgba(248, 250, 252, 0.94) 0%, rgba(241, 245, 249, 0.94) 100%);
        --diary-surface-bg: radial-gradient(90% 80% at 0% 0%, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
        --customer-panel-width: 340px;
        /* Customer workspace host: bottom row Jobs DB vs Outstanding pair (wider right = less squashed on laptops). */
        --customer-snapshot-host-col-jobs: 1fr;
        --customer-snapshot-host-col-outstanding: 1.45fr;
        /* Top row Today’s jobs column cap (inside snapshot stack); independent of customer list panel width. */
        --customer-snapshot-today-max: 368px;
        /* Customer workspace: Today’s jobs + This month’s services stay side-by-side at fixed mins */
        --customer-snapshot-services-min-width: 720px;
        /* Subtle corner radius — soft, not pill-like (timeline, cards, modals, inputs) */
        --ui-radius: 4px;
      }

      /*
        Browser / viewport hints from shell-app.js on <html>:
        data-ff-browser (safari|chrome|firefox|edge|opera|other),
        data-ff-engine (webkit|gecko|other), data-ff-os (mac|windows|ios|android|linux|other),
        data-ff-vw-tier on desktop: wide | medium | narrow (>900px width only).
        Adjusts Customer Base column weights only — same grid positions as default.
      */
      html[data-ff-browser="safari"] {
        --customer-snapshot-host-col-jobs: 0.9fr;
        --customer-snapshot-host-col-outstanding: 1.55fr;
        --customer-snapshot-today-max: 382px;
      }

      html[data-ff-browser="safari"][data-ff-os="mac"] {
        --customer-snapshot-host-col-jobs: 0.86fr;
        --customer-snapshot-host-col-outstanding: 1.62fr;
        --customer-snapshot-today-max: 388px;
      }

      html[data-ff-browser="firefox"] {
        --customer-snapshot-host-col-jobs: 0.94fr;
        --customer-snapshot-host-col-outstanding: 1.48fr;
      }

      html[data-ff-vw-tier="narrow"] {
        --customer-snapshot-host-col-jobs: 0.84fr;
        --customer-snapshot-host-col-outstanding: 1.56fr;
      }

      html[data-ff-browser="safari"][data-ff-vw-tier="narrow"],
      html[data-ff-browser="safari"][data-ff-os="mac"][data-ff-vw-tier="medium"] {
        --customer-snapshot-host-col-jobs: 0.8fr;
        --customer-snapshot-host-col-outstanding: 1.68fr;
        --customer-snapshot-today-max: 392px;
      }

      @supports (padding: max(0px, env(safe-area-inset-bottom))) {
        html[data-ff-os="ios"] .job-modal .drawer-actions,
        html[data-ff-os="ios"] .drawer-panel .drawer-actions {
          padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        }
      }

      * {
        box-sizing: border-box;
      }

      /* Ensure the HTML hidden attribute always wins over any CSS display rule. */
      [hidden] {
        display: none !important;
      }

      /*
        AUTH GATE — applied from first paint, before any JS runs.
        Body starts without .ff-auth-ok; JS adds it only after Firebase
        confirms a valid session. This prevents any app-shell content
        (including position:fixed children) from ever rendering before auth.
      */
      body:not(.ff-auth-ok) #appShell {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }
      body.ff-auth-ok #authScreen {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }

      /* Safari / macOS: stop automatic text inflation; keeps typography aligned with other engines. */
      html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      body {
        margin: 0;
        font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
        background: var(--bg);
        color: var(--text);
      }

      body.customer-view-open {
        overflow: hidden !important;
      }

      body.customer-view-open .content {
        overflow: hidden !important;
      }

      body.customer-view-open #customerPage .customer-panel,
      body.customer-view-open #customerPage .workspace-panel,
      body.supplier-view-open #customerPage .customer-panel,
      body.supplier-view-open #customerPage .workspace-panel {
        opacity: 0.52;
        transition: opacity 0.2s ease;
      }

      body.supplier-view-open {
        overflow: hidden !important;
      }

      body.supplier-view-open .content {
        overflow: hidden !important;
      }

      .auth-screen {
        min-height: 100vh;
        min-height: 100dvh;
        display: grid;
        place-items: center;
        padding: 24px;
      }

      .auth-card {
        width: min(100%, 420px);
        border: 1px solid var(--border);
        border-radius: var(--ui-radius);
        background: var(--surface);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
        padding: 22px;
        display: grid;
        gap: 14px;
      }

      .auth-title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
      }

      .auth-subtitle {
        margin: 0;
        color: var(--muted);
        font-size: 0.84rem;
      }

      .auth-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .auth-message {
        min-height: 20px;
        margin: 0;
        font-size: 0.82rem;
        color: var(--muted);
      }

      .auth-message.error {
        color: #fca5a5;
      }

      .auth-message.success {
        color: #86efac;
      }

      .app-shell {
        min-height: 100vh;
        min-height: 100dvh;
        display: grid;
        grid-template-columns: 260px 1fr;
      }

      /* Clock sits above the scrollable <main>; only .content scrolls so time/date stay put */
      .app-main-column {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        align-self: stretch;
      }

      .sidebar {
        background: var(--surface);
        border-right: 1px solid var(--border);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 24px 16px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        box-shadow: 16px 0 36px rgba(0, 0, 0, 0.35);
      }

      /* Top of sidebar: user company logo (upload); bottom: Firefly mark */
      .sidebar-company-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        margin-bottom: 2px;
      }

      .sidebar-company-logo-btn {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
        padding: 10px 10px;
        border: 1px dashed rgba(255, 255, 255, 0.22);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        cursor: pointer;
        color: inherit;
        font: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 76px;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      }

      .sidebar-company-logo-btn:hover {
        background: var(--menu-yellow-soft);
        border-color: var(--menu-yellow-border);
        color: var(--menu-yellow-text);
      }

      .sidebar-company-logo-btn:focus-visible {
        outline: 2px solid var(--menu-yellow-border);
        outline-offset: 2px;
      }

      /* When a logo is set: no dashed frame — show only the PNG/image */
      .sidebar-company-logo-btn.sidebar-company-logo-btn--has-logo {
        border: none;
        background: transparent;
        min-height: 0;
        padding: 6px 8px;
      }

      .sidebar-company-logo-btn.sidebar-company-logo-btn--has-logo:hover {
        border: none;
        background: rgba(255, 255, 255, 0.06);
        color: inherit;
      }

      .sidebar-company-logo-btn.sidebar-company-logo-btn--has-logo:focus-visible {
        outline: 2px solid var(--menu-yellow-border);
        outline-offset: 4px;
      }

      /* Company name when no logo (from Settings) */
      .sidebar-company-logo-btn.sidebar-company-logo-btn--name-only {
        border: none;
        background: transparent;
        min-height: 0;
        padding: 10px 8px;
      }

      .sidebar-company-logo-btn.sidebar-company-logo-btn--name-only:hover {
        border: none;
        background: rgba(255, 255, 255, 0.06);
        color: inherit;
      }

      .sidebar-company-logo-btn.sidebar-company-logo-btn--name-only:focus-visible {
        outline: 2px solid var(--menu-yellow-border);
        outline-offset: 4px;
      }

      .sidebar-company-name-display {
        display: block;
        max-width: 100%;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.01em;
        color: var(--text);
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
      }

      .sidebar-company-name-display[hidden] {
        display: none !important;
      }

      .sidebar-company-logo-img {
        max-width: 100%;
        max-height: 56px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
      }

      .sidebar-company-logo-img[hidden] {
        display: none !important;
      }

      .sidebar-company-logo-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 0.8rem;
        color: var(--muted);
        line-height: 1.3;
        font-weight: 600;
      }

      .sidebar-company-logo-hint {
        font-size: 0.72rem;
        font-weight: 500;
        opacity: 0.88;
      }

      .sidebar-firefly-brand {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-top: 10px;
        padding: 14px 12px 0 12px;
        border-top: 1px solid var(--border);
        text-align: left;
        width: 100%;
        box-sizing: border-box;
      }

      .sidebar-firefly-logo {
        width: 30px;
        height: 30px;
        border-radius: 4px;
        object-fit: cover;
        display: block;
      }

      .sidebar-firefly-name {
        font-weight: 700;
        font-size: 1.02rem;
        letter-spacing: 0.02em;
      }

      .nav-group {
        display: grid;
        gap: 6px;
      }

      .nav-group-bottom {
        margin-top: auto;
      }

      .nav-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin: 8px 10px;
        background: transparent;
      }

      .nav-collapsible-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        margin: 8px 0;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        cursor: pointer;
        font: inherit;
        color: inherit;
        text-transform: inherit;
        letter-spacing: inherit;
      }

      .nav-collapsible-toggle:hover {
        background: var(--menu-yellow-soft);
        border-color: var(--menu-yellow-border);
        color: var(--menu-yellow-text);
      }

      .nav-collapsible-toggle:focus-visible {
        outline: 2px solid var(--menu-yellow-border);
        outline-offset: 2px;
      }

      .nav-collapsible-arrow {
        font-size: 0.75rem;
        line-height: 1;
        transition: transform 0.2s ease;
      }

      .nav-collapsible-toggle[aria-expanded="true"] .nav-collapsible-arrow {
        transform: rotate(90deg);
      }

      .nav-collapsible-content {
        display: grid;
        gap: 6px;
      }

      .nav-collapsible-content.is-collapsed {
        display: none;
      }

      .nav-item {
        border: 1px solid transparent;
        border-radius: 10px;
        padding: 10px 12px;
        color: var(--text);
        text-decoration: none;
        font-weight: 500;
        background: transparent;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .nav-icon {
        width: 14px;
        height: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.9;
        flex: 0 0 14px;
      }

      .nav-icon svg {
        width: 14px;
        height: 14px;
        display: block;
      }

      .nav-item:hover {
        background: var(--menu-yellow-soft);
        border-color: var(--menu-yellow-border);
        color: var(--menu-yellow-text);
      }

      .nav-item.active {
        background: var(--menu-yellow-soft-strong);
        color: var(--menu-yellow-text);
        border-color: var(--menu-yellow-border);
      }

      .content {
        flex: 1 1 auto;
        min-height: 0;
        padding: 28px;
        overflow: auto;
      }

      /*
        Customer Base: slightly tighter main gutter beside the nav (set via JS class so we
        do not rely on :has(), which can fail in older embedded browsers).
      */
      /*
        Customer Base: keep scroll inside list/table panels only — not on main.content (avoids a second
        vertical scrollbar beside Today’s jobs, This month’s services, outstanding, jobs DB, sidebar).
      */
      /*
        Lock main scroll: body class (JS) + :has() so it still works if the class is missing.
        Prevents a second vertical bar on the far right of Customer Base.
      */
      body.shell-page-customer-base main.content,
      main.content:has(#customerPage:not(.hidden)) {
        padding-left: 18px;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }

      body.shell-page-customer-base #customerPage.customer-layout,
      main.content:has(#customerPage:not(.hidden)) #customerPage.customer-layout {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
      }

      /*
        Service Centre page: same single-scroll pattern — table wrap scrolls, not main.content.
      */
      body.shell-page-service-centre main.content,
      main.content:has(#serviceCentrePage:not(.hidden)) {
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }

      body.shell-page-service-centre #serviceCentrePage.settings-page.service-centre-page,
      main.content:has(#serviceCentrePage:not(.hidden)) #serviceCentrePage.settings-page.service-centre-page {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-content: unset;
      }

      body.shell-page-service-centre #serviceCentrePage .service-centre-panel,
      main.content:has(#serviceCentrePage:not(.hidden)) #serviceCentrePage .service-centre-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
      }

      body.shell-page-service-centre #serviceCentrePage .service-centre-table-wrap,
      main.content:has(#serviceCentrePage:not(.hidden)) #serviceCentrePage .service-centre-table-wrap {
        min-height: 0;
        overflow: auto;
      }

      /* Parking slot (collapsed when empty after clock is moved into the active page) */
      .shell-datetime-holder:empty {
        display: none;
      }

      .shell-top-right-cluster--dock {
        position: fixed;
        top: 36px;
        right: 28px;
        z-index: 25;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
      }

      .shell-ask-ai-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 6px 10px;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: #60a5fa;
        font: inherit;
        font-size: 0.88rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
          background 0.18s ease,
          color 0.18s ease;
      }

      .shell-ask-ai-btn:hover {
        background: rgba(59, 130, 246, 0.16);
        color: #93c5fd;
      }

      .shell-ask-ai-btn:focus-visible {
        outline: 2px solid rgba(59, 130, 246, 0.65);
        outline-offset: 2px;
      }

      .shell-ask-ai-icon {
        display: inline-flex;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        color: #3b82f6;
      }

      .shell-ask-ai-icon svg {
        width: 100%;
        height: 100%;
      }

      .shell-ask-ai-label {
        white-space: nowrap;
      }

      .shell-datetime {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        color: #f8fafc;
      }

      .shell-datetime-icon {
        width: 18px;
        height: 18px;
        display: inline-flex;
        color: #bfdbfe;
        flex: 0 0 18px;
      }

      .shell-datetime-copy {
        display: grid;
        gap: 0;
      }

      .shell-datetime-time {
        font-size: 0.88rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0.02em;
      }

      .shell-datetime-date {
        font-size: 0.72rem;
        color: #cbd5e1;
        line-height: 1.1;
      }

      .sync-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 14px;
        width: 30px;
        height: 30px;
        color: #cbd5e1;
        pointer-events: none;
      }

      .sync-status.sync-status--interactive {
        pointer-events: auto;
        cursor: pointer;
      }

      .sync-status.sync-status--interactive:hover,
      .sync-status.sync-status--interactive:focus-visible {
        color: #f8fafc;
        outline: none;
      }

      .sync-status-icon {
        display: inline-flex;
        width: 28px;
        height: 28px;
        color: currentColor;
        flex: 0 0 28px;
      }

      .sync-status-icon svg {
        width: 28px;
        height: 28px;
        display: block;
      }

      .sync-status[data-sync-state="syncing"] .sync-status-icon {
        animation: sync-spin 0.95s linear infinite;
      }

      .sync-status[data-sync-state="syncing"] {
        color: #fbbf24;
      }

      .sync-status[data-sync-state="synced"] {
        color: #86efac;
      }

      .sync-status[data-sync-state="offline"] {
        color: #cbd5e1;
      }

      .sync-status[data-sync-state="error"] {
        color: #fca5a5;
      }

      .sync-status-label {
        display: none;
      }

      @keyframes sync-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .hidden {
        display: none !important;
      }

      .mode-toggle-wrap {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .mode-toggle-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 44px;
        height: 24px;
        cursor: pointer;
      }

      .mode-toggle-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      .mode-toggle-slider {
        width: 100%;
        height: 100%;
        border-radius: 999px;
        background: #2563eb;
        border: 1px solid #1d4ed8;
        position: relative;
        transition: background 0.2s ease, border-color 0.2s ease;
      }

      .mode-toggle-slider::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #f8fafc;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.45);
        transition: transform 0.2s ease;
      }

      .mode-toggle-input:checked + .mode-toggle-slider {
        background: #22c55e;
        border-color: #16a34a;
      }

      .mode-toggle-input:checked + .mode-toggle-slider::after {
        transform: translateX(20px);
      }

      .gas-rate-seconds-wrap {
        display: grid;
        justify-items: center;
        gap: 6px;
        margin-top: 8px;
      }

      .gas-rate-seconds-circle {
        width: 126px;
        height: 126px;
        border-radius: 50%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 5px solid #ffffff;
        box-shadow: none;
        color: #ffffff;
      }

      .gas-rate-seconds-circle::before {
        content: "";
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        background: #000000;
      }

      .gas-rate-seconds-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.02em;
        z-index: 1;
      }

      .gas-rate-seconds-unit {
        position: absolute;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        font-size: 0.72rem;
        color: #ffffff;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        z-index: 1;
      }

      .gas-rate-seconds-input {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70px;
        border: 0;
        outline: none;
        background: transparent;
        color: #ffffff;
        text-align: center;
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.02em;
        appearance: textfield;
        -moz-appearance: textfield;
        z-index: 1;
      }

      .gas-rate-seconds-input::-webkit-outer-spin-button,
      .gas-rate-seconds-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      .gas-rate-kw-display-row {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: baseline;
      }

      .gas-rate-kw-label {
        grid-column: 1;
        justify-self: end;
        margin: 0;
        padding-right: 24px;
        white-space: nowrap;
        color: #dc2626;
      }

      .gas-rate-kw-value {
        grid-column: 2;
        justify-self: center;
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        color: #dc2626;
        letter-spacing: 0.02em;
      }

      .gas-rate-validation {
        margin-top: 6px;
        min-height: 18px;
        text-align: center;
        font-size: 0.82rem;
        font-weight: 700;
        color: #dc2626;
      }

      .gas-rate-input-error {
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.3);
      }

      .customer-layout {
        height: calc(100vh - 56px);
        height: calc(100dvh - 56px);
        min-height: 0;
        max-height: calc(100vh - 56px);
        max-height: calc(100dvh - 56px);
        min-width: calc(var(--customer-panel-width) + 520px);
        display: flex;
        gap: 14px;
        position: relative;
        padding-top: 48px;
        overflow: hidden;
      }

      /*
        Shell page title strip — match Customer Base (centre, 1rem, 48px top band)
        across main pages and the customer profile drawer title row.
      */
      .customer-page-title,
      .diary-toolbar .diary-title,
      #jobsShellPage #jobsPage .jobs-page-title,
      h2.service-centre-page-title,
      .content > .settings-page > h2.settings-title:first-child {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 1.14rem;
        font-weight: 700;
        color: #e5e7eb;
        position: absolute;
        left: 50%;
        top: 8px;
        transform: translateX(-50%);
        text-align: center;
        pointer-events: none;
        z-index: 1;
      }

      /* Sync chip on Customer Base must stay clickable */
      .customer-page-title .sync-status {
        pointer-events: auto;
      }

      .page-title-icon {
        width: 24px;
        height: 24px;
        display: inline-flex;
        color: currentColor;
      }

      .panel {
        background: var(--panel-bg);
        border: 1px solid var(--border);
        border-radius: 16px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
      }

      .customer-panel {
        width: var(--customer-panel-width);
        flex: 0 0 var(--customer-panel-width);
        padding: 14px;
        display: grid;
        gap: 8px;
        align-content: start;
        grid-template-rows: auto auto minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
      }

      /*
        Customer Base — match job tiles’ horizontal inset:
        .customer-day-jobs-panel and embedded .jobs-portal-frame use 8px horizontal padding inside
        the workspace; the list column used 14px here, which read as a fat navy gutter (sidebar → cards).
      */
      /*
        One bottom inset for the whole Customer Base row so the customer list column lines up with
        Outstanding Invoices / Outstanding Quotes (same distance from inner chrome to panel edge).
      */
      #customerPage {
        --customer-base-bottom-pad: 8px;
      }

      #customerPage .customer-panel {
        gap: 10px;
        padding: 14px 8px var(--customer-base-bottom-pad);
        align-content: stretch;
        min-height: 0;
        box-sizing: border-box;
      }

      #customerPage > .workspace-panel.customer-jobs-snapshot-host {
        padding: 14px 8px var(--customer-base-bottom-pad);
        box-sizing: border-box;
      }

      #customerPage #customerWorkspaceSidePanels > .customer-day-jobs-panel.customer-outstanding-panel {
        padding: 8px 8px var(--customer-base-bottom-pad);
        box-sizing: border-box;
      }

      /* Top workspace row: same bottom inset as customer column + outstanding row */
      #customerPage .customer-jobs-snapshot-stack > .customer-today-jobs-panel,
      #customerPage .customer-jobs-snapshot-stack .customer-service-due-panel {
        padding: 8px 8px var(--customer-base-bottom-pad);
        box-sizing: border-box;
      }

      /* Inner list: same inset as job tiles + dedicated vertical scroller (Today’s jobs pattern). */
      #customerPage .customer-list {
        padding: 8px;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        align-self: stretch;
        --customer-list-scroll-track: rgba(48, 72, 118, 0.52);
        --customer-list-scroll-thumb: #94a3b8;
        --customer-list-scroll-thumb-hover: #cbd5e1;
        --customer-list-chrome-border: rgba(56, 82, 128, 0.28);
        --customer-list-chrome-ring: rgba(255, 255, 255, 0.32);
        border-color: var(--customer-list-chrome-border);
        background: var(--customer-list-scroll-track);
        box-shadow:
          inset 0 0 0 1px var(--customer-list-chrome-ring),
          0 10px 24px rgba(15, 23, 42, 0.08);
        overflow-y: scroll !important;
        overflow-x: hidden;
        direction: ltr;
        scrollbar-gutter: auto;
        scrollbar-width: auto;
        scrollbar-color: var(--customer-list-scroll-thumb) var(--customer-list-scroll-track);
        background-clip: padding-box;
      }

      #customerPage .customer-list::-webkit-scrollbar {
        width: 17px;
        height: 17px;
        background: var(--customer-list-scroll-track);
      }

      #customerPage .customer-list::-webkit-scrollbar-track {
        background: var(--customer-list-scroll-track);
        margin: 4px;
        border-radius: 8px;
      }

      #customerPage .customer-list::-webkit-scrollbar-corner {
        background: var(--customer-list-scroll-track);
      }

      #customerPage .customer-list::-webkit-scrollbar-thumb {
        background-color: var(--customer-list-scroll-thumb);
        border-radius: 5px;
        border: 3px solid var(--customer-list-scroll-track);
        background-clip: padding-box;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.28),
          inset 0 -1px 0 rgba(0, 0, 0, 0.22);
      }

      #customerPage .customer-list::-webkit-scrollbar-thumb:hover {
        background-color: var(--customer-list-scroll-thumb-hover);
      }

      #customerPage .customer-list::-webkit-scrollbar-button {
        display: block;
        height: 15px;
        width: 17px;
        background-color: var(--customer-list-scroll-track);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 11px 11px;
      }

      #customerPage .customer-list::-webkit-scrollbar-button:vertical:start:decrement,
      #customerPage .customer-list::-webkit-scrollbar-button:single-button:vertical:decrement {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 14l4-4 4 4' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      #customerPage .customer-list::-webkit-scrollbar-button:vertical:end:increment,
      #customerPage .customer-list::-webkit-scrollbar-button:single-button:vertical:increment {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 10l4 4 4-4' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      #customerPage .customer-list::-webkit-scrollbar-button:hover {
        background-color: rgba(56, 78, 118, 0.82);
      }

      body[data-theme="light"] #customerPage .customer-list {
        --customer-list-scroll-track: rgba(88, 118, 168, 0.28);
        --customer-list-scroll-thumb: #7c8fb3;
        --customer-list-scroll-thumb-hover: #94a3b8;
        --customer-list-chrome-border: rgba(56, 82, 128, 0.22);
        --customer-list-chrome-ring: rgba(255, 255, 255, 0.65);
      }

      .customer-header {
        display: block;
      }

      .customer-list-header {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        margin: 2px 0 0;
        padding: 0 0 6px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .customer-list-header-icon {
        width: 18px;
        height: 18px;
        display: inline-flex;
        color: currentColor;
      }

      .panel-title {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
      }

      .btn {
        border: 1px solid var(--menu-yellow-border);
        border-radius: 10px;
        padding: 10px 11px;
        background: var(--menu-yellow-soft);
        color: var(--menu-yellow-text);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
      }

      .btn:hover {
        background: var(--menu-yellow-soft-strong);
        border-color: var(--menu-yellow-border);
      }

      /* Inline background on .btn was forcing yellow; exclude explicit primary class */
      .btn[style*="background"]:not(.booking-action-btn--primary):not(.dialog-action-btn--primary):not(.dialog-action-btn--generate) {
        background: var(--menu-yellow-soft) !important;
        border-color: var(--menu-yellow-border) !important;
        color: var(--menu-yellow-text) !important;
      }

      /* Compact modal/dialog actions (reference: overlap booking warning) */
      .booking-action-btn,
      .dialog-action-btn {
        min-width: 30px;
        height: 30px;
        border-radius: 7px;
        padding: 0 8px;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.2;
      }

      .booking-action-btn--primary,
      .dialog-action-btn--primary {
        background: rgba(129, 140, 248, 0.3) !important;
        border-color: rgba(129, 140, 248, 0.52) !important;
        color: #e0e7ff !important;
      }

      .booking-action-btn--primary:hover,
      .dialog-action-btn--primary:hover {
        background: rgba(129, 140, 248, 0.44) !important;
        border-color: rgba(165, 180, 252, 0.65) !important;
        color: #f5f5ff !important;
      }

      /* App confirm: destructive actions (Remove / Delete / Clear / Clear all) */
      .booking-action-btn.dialog-action-btn--primary.dialog-action-btn--danger,
      .dialog-action-btn.dialog-action-btn--primary.dialog-action-btn--danger,
      #appConfirmModal #appConfirmOkBtn.dialog-action-btn--danger {
        background: rgba(185, 28, 28, 0.52) !important;
        border-color: rgba(252, 165, 165, 0.78) !important;
        color: #fecaca !important;
      }

      .booking-action-btn.dialog-action-btn--primary.dialog-action-btn--danger:hover,
      .dialog-action-btn.dialog-action-btn--primary.dialog-action-btn--danger:hover,
      #appConfirmModal #appConfirmOkBtn.dialog-action-btn--danger:hover {
        background: rgba(220, 38, 38, 0.65) !important;
        border-color: rgba(254, 226, 226, 0.92) !important;
        color: #ffffff !important;
      }

      body[data-theme="light"] .booking-action-btn.dialog-action-btn--primary.dialog-action-btn--danger,
      body[data-theme="light"] .dialog-action-btn.dialog-action-btn--primary.dialog-action-btn--danger,
      body[data-theme="light"] #appConfirmModal #appConfirmOkBtn.dialog-action-btn--danger {
        background: rgba(220, 38, 38, 0.14) !important;
        border-color: rgba(185, 28, 28, 0.45) !important;
        color: #b91c1c !important;
      }

      body[data-theme="light"] .booking-action-btn.dialog-action-btn--primary.dialog-action-btn--danger:hover,
      body[data-theme="light"] .dialog-action-btn.dialog-action-btn--primary.dialog-action-btn--danger:hover,
      body[data-theme="light"] #appConfirmModal #appConfirmOkBtn.dialog-action-btn--danger:hover {
        background: rgba(220, 38, 38, 0.24) !important;
        border-color: rgba(153, 27, 27, 0.55) !important;
        color: #991b1b !important;
      }

      .customer-list {
        --customer-list-visible-rows: 12;
        --customer-list-row-height: 84px;
        display: grid;
        gap: 8px;
        border: 1px solid var(--container-surface-border);
        border-radius: 10px;
        background: var(--container-surface-bg);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 24px rgba(15, 23, 42, 0.08);
        align-content: start;
        box-sizing: border-box;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        align-self: stretch;
        scrollbar-gutter: auto;
      }

      .customer-day-jobs-panel {
        margin-top: 6px;
        border: 1px solid var(--container-surface-border);
        border-radius: 10px;
        background: var(--container-surface-bg);
        padding: 8px;
        display: grid;
        gap: 8px;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 24px rgba(15, 23, 42, 0.08);
      }

      .workspace-panel .customer-day-jobs-panel {
        margin-top: 0;
        width: 100%;
        max-width: none;
        height: auto;
        align-self: start;
        align-content: start;
      }

      .workspace-panel.customer-jobs-snapshot-host {
        display: grid;
        grid-template-columns: minmax(0, var(--customer-snapshot-host-col-jobs))
          minmax(268px, var(--customer-snapshot-host-col-outstanding));
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        align-content: stretch;
        min-height: 0;
        /* Same horizontal + bottom inset as customer column; token is set on #customerPage (inherited). */
        padding: 14px 8px var(--customer-base-bottom-pad, 8px);
        overflow-x: hidden;
        overflow-y: hidden;
      }

      /* Let grid tracks shrink below intrinsic content; scroll lives inside panels */
      .workspace-panel.customer-jobs-snapshot-host > .customer-jobs-snapshot-stack,
      .workspace-panel.customer-jobs-snapshot-host > .customer-jobs-side-panels {
        min-height: 0;
        min-width: 0;
      }

      .customer-jobs-snapshot-stack {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, min(var(--customer-snapshot-today-max), 100%)) minmax(0, 1fr);
        align-items: stretch;
        gap: 10px;
        overflow-x: hidden;
        /* Same scroll viewport for Today’s jobs + This month’s services (4 card slots + gaps, shorter than five) */
        --customer-snapshot-pair-viewport-height: calc(4 * 92px + 3 * 8px);
        --customer-base-unified-window-height: calc(10 * 40px);
      }

      .customer-jobs-snapshot-stack > .customer-day-jobs-panel,
      .customer-jobs-snapshot-stack > .customer-right-side-stack {
        align-self: stretch;
        min-height: 0;
      }

      /* Top row: fill host grid row like Outstanding (override .workspace-panel .customer-day-jobs-panel height:auto). */
      #customerPage:not(.hidden) .workspace-panel.customer-jobs-snapshot-host > .customer-jobs-snapshot-stack {
        height: 100%;
        align-self: stretch;
        box-sizing: border-box;
      }
      #customerPage:not(.hidden)
        .workspace-panel.customer-jobs-snapshot-host
        .customer-jobs-snapshot-stack
        > .customer-day-jobs-panel.customer-today-jobs-panel,
      #customerPage:not(.hidden)
        .workspace-panel.customer-jobs-snapshot-host
        .customer-jobs-snapshot-stack
        > .customer-right-side-stack {
        height: 100%;
        max-height: none;
        min-height: 0;
        align-self: stretch;
        align-content: start;
        box-sizing: border-box;
      }

      .customer-jobs-snapshot-stack .customer-day-jobs-panel,
      .customer-jobs-snapshot-stack .customer-service-due-panel,
      .customer-jobs-snapshot-stack .customer-right-side-stack {
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
      }

      .customer-jobs-snapshot-stack .customer-right-side-stack {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        gap: 10px;
      }

      .customer-jobs-snapshot-stack .customer-outstanding-panels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        min-height: 0;
      }

      .customer-jobs-side-panels {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-self: stretch;
        align-items: stretch;
        min-width: 0;
        min-height: 0;
        height: 100%;
        max-height: none;
      }

      .customer-jobs-side-panels.customer-jobs-side-panels--three-outstanding {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .customer-jobs-snapshot-stack .customer-day-jobs-panel {
        display: grid;
        gap: 8px;
      }

      /* Full-width rule like .customer-list-header under “Customers” */
      .customer-jobs-snapshot-stack .customer-day-jobs-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        margin: 0;
        min-height: 32px;
        padding: 0 0 8px;
        box-sizing: border-box;
        box-shadow: none;
      }

      .customer-jobs-snapshot-stack .customer-today-jobs-panel .customer-day-jobs-head {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-day-jobs-head {
        border-bottom: 1px solid rgba(255, 255, 255, 0.38);
      }

      .customer-jobs-snapshot-stack .customer-day-jobs-title {
        margin: 0;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        color: var(--text);
      }

      .customer-day-jobs-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
      }

      .customer-day-jobs-title {
        margin: 0;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--text);
      }

      .customer-day-jobs-table {
        border: 0;
        background: transparent;
        width: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        box-sizing: border-box;
        --customer-day-jobs-min-width: 0;
        --customer-day-jobs-time-col-width: 82px;
        --customer-snapshot-list-height: 286px;
      }

      /* TODAY'S JOBS: default viewport ≈5 cards; Customer Base snapshot uses shorter --customer-snapshot-pair-viewport-height */
      .customer-today-jobs-panel {
        --customer-today-job-slot-height: 92px;
        --customer-today-jobs-stack-gap: 8px;
        --customer-today-jobs-viewport-height: calc(
          5 * var(--customer-today-job-slot-height) + 4 * var(--customer-today-jobs-stack-gap)
        );
        background: var(--panel-bg);
        border-color: var(--border);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .customer-outstanding-panel {
        background: var(--panel-bg);
        border: 1px solid var(--border);
        /* No backdrop-filter here: it creates a stacking/containing block that traps in-page overlays. */
        min-width: 0;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        overflow: hidden;
      }

      .customer-jobs-side-panels .customer-day-jobs-panel {
        align-self: stretch;
        height: 100%;
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr);
      }

      .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 8px 0;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-title {
        margin: 0;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .customer-jobs-side-panels .customer-day-jobs-title--outstanding-invoices::before,
      .customer-jobs-side-panels .customer-day-jobs-title--outstanding-sales-orders::before,
      .customer-jobs-side-panels .customer-day-jobs-title--outstanding-quotes::before {
        content: "";
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
      }

      /* Invoice doc + lines (sales orders use the same invoice-style icon) */
      .customer-jobs-side-panels .customer-day-jobs-title--outstanding-invoices::before,
      .customer-jobs-side-panels .customer-day-jobs-title--outstanding-sales-orders::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 4h7l5 5v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z' stroke='%23e2e8f0' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 4v5h5M8 12h8M8 16h6M8 20h4' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      }

      /* Quote doc + lines */
      .customer-jobs-side-panels .customer-day-jobs-title--outstanding-quotes::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 6.2h10A1.8 1.8 0 0 1 18.8 8v9.8A1.8 1.8 0 0 1 17 19.6H7a1.8 1.8 0 0 1-1.8-1.8V8A1.8 1.8 0 0 1 7 6.2Z' stroke='%23e2e8f0' stroke-width='2'/%3E%3Cpath d='M9.1 10.5h5.8M9.1 13.2h5.8M9.1 15.9h3.8' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      }

      body[data-theme="light"] .customer-jobs-side-panels .customer-day-jobs-title--outstanding-invoices::before,
      body[data-theme="light"] .customer-jobs-side-panels .customer-day-jobs-title--outstanding-sales-orders::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 4h7l5 5v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z' stroke='%230f172a' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 4v5h5M8 12h8M8 16h6M8 20h4' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      }

      body[data-theme="light"] .customer-jobs-side-panels .customer-day-jobs-title--outstanding-quotes::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 6.2h10A1.8 1.8 0 0 1 18.8 8v9.8A1.8 1.8 0 0 1 17 19.6H7a1.8 1.8 0 0 1-1.8-1.8V8A1.8 1.8 0 0 1 7 6.2Z' stroke='%230f172a' stroke-width='2'/%3E%3Cpath d='M9.1 10.5h5.8M9.1 13.2h5.8M9.1 15.9h3.8' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      }

      /* Customer Base: match Jobs header + add control to Outstanding header scale (h3 defaults slightly larger than h4). */
      #jobsShellPage #jobsPage .jobs-portal-header-title {
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
      }

      #jobsShellPage #jobsPage .jobs-portal-header-title::before {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        background-size: 14px 14px;
      }

      #jobsShellPage #jobsPage .jobs-portal-add-job-glyph {
        width: 26px;
        height: 26px;
        font-size: 1.75rem;
        line-height: 0.88;
      }

      /*
       * Outstanding invoices/quotes: chrome on .customer-day-jobs-table; exactly ONE scrollport on
       * .customer-day-jobs-list (avoids scrollbar-gutter + webkit track reading as “double” bars).
       */
      .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-table,
      .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-table {
        min-height: 0;
        height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(15, 23, 42, 0.24);
        border-radius: 10px;
        background: #e2e8f0 !important;
        padding: 8px;
        box-sizing: border-box;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(15, 23, 42, 0.12);
        overflow: hidden;
      }

      .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list,
      .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        background: #e2e8f0 !important;
        border-radius: 8px;
        align-content: start;
        padding-bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: auto;
        scrollbar-width: auto;
      }

      .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-empty {
        background: transparent;
      }

      /*
       * Customer Base — right column: outer panel can stay glassy; inner list window must stay a solid
       * white block even when empty (workspace .customer-day-jobs-panel otherwise uses height: auto).
       */
      #customerPage .workspace-panel.customer-jobs-snapshot-host .customer-jobs-side-panels > .customer-day-jobs-panel.customer-outstanding-panel {
        height: 100%;
        min-height: 0;
        max-height: none;
        align-self: stretch;
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-table {
        flex: 1 1 auto;
        min-height: 10rem;
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list:has(> .customer-day-jobs-empty:only-child) {
        justify-content: center;
        min-height: 8rem;
      }

      #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list {
        overflow-x: hidden;
        overflow-y: auto;
      }

      body[data-theme="light"] .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-table,
      body[data-theme="light"] .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-table {
        background: #e2e8f0 !important;
        border-color: rgba(15, 23, 42, 0.28) !important;
        box-shadow:
          inset 0 0 0 1px rgba(15, 23, 42, 0.1),
          0 8px 20px rgba(15, 23, 42, 0.12) !important;
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list,
      #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list {
        --outstanding-scroll-track: #e2e8f0;
        --outstanding-scroll-thumb: #94a3b8;
        --outstanding-scroll-thumb-hover: #64748b;
        scrollbar-color: var(--outstanding-scroll-thumb) var(--outstanding-scroll-track);
      }

      body[data-theme="light"] #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list,
      body[data-theme="light"] #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list {
        --outstanding-scroll-track: #e8eef4;
        --outstanding-scroll-thumb: #94a3b8;
        --outstanding-scroll-thumb-hover: #64748b;
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar,
      #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar {
        width: 17px;
        height: 17px;
        background: var(--outstanding-scroll-track);
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-track,
      #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-track {
        background: var(--outstanding-scroll-track);
        /* Tight bottom so Outstanding Quotes matches Invoices (no faux “padding” from track + steppers). */
        margin: 4px 4px 0 4px;
        border-radius: 8px;
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-corner,
      #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-corner {
        background: var(--outstanding-scroll-track);
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-thumb,
      #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-thumb {
        background-color: var(--outstanding-scroll-thumb);
        border-radius: 5px;
        border: 3px solid var(--outstanding-scroll-track);
        background-clip: padding-box;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.35),
          inset 0 -1px 0 rgba(0, 0, 0, 0.12);
      }

      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-thumb:hover,
      #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-thumb:hover {
        background-color: var(--outstanding-scroll-thumb-hover);
      }

      /* No arrow steppers — they add a tall dead zone at the bottom vs the non-scrolling invoices column. */
      #customerPage .customer-jobs-side-panels .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-button,
      #customerPage .customer-jobs-snapshot-stack .customer-outstanding-panel .customer-day-jobs-list::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
      }

      /* Jobs shell: flex chain from .jobs-shell-page (no Customer Base grid). */
      #jobsShellPage #jobsPage {
        margin-top: 0;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        box-sizing: border-box;
      }

      /*
       * Today’s Jobs (Customer Base): slate chrome on the table; single scrollport on the list inside.
       */
      #customerPage .customer-today-jobs-panel .customer-day-jobs-table {
        --today-jobs-scroll-track: rgba(15, 23, 42, 0.68);
        --today-jobs-chrome-border: rgba(15, 23, 42, 0.16);
        --today-jobs-chrome-ring: rgba(255, 255, 255, 0.26);
        min-height: var(--customer-today-jobs-viewport-height);
        max-height: var(--customer-today-jobs-viewport-height);
        border: 1px solid var(--today-jobs-chrome-border);
        border-radius: 10px;
        background: var(--today-jobs-scroll-track);
        padding: 8px;
        box-sizing: border-box;
        box-shadow: inset 0 0 0 1px var(--today-jobs-chrome-ring), 0 10px 24px rgba(15, 23, 42, 0.08);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-clip: padding-box;
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list {
        --today-jobs-scroll-thumb: #94a3b8;
        --today-jobs-scroll-thumb-hover: #cbd5e1;
        flex: 1 1 auto;
        min-height: 0;
        direction: ltr;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: auto;
        scrollbar-width: auto;
        scrollbar-color: var(--today-jobs-scroll-thumb) var(--today-jobs-scroll-track);
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar {
        width: 17px;
        height: 17px;
        background: var(--today-jobs-scroll-track);
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-track {
        background: var(--today-jobs-scroll-track);
        /* Match Outstanding lists: no extra track margin at bottom (keeps row bottoms visually aligned). */
        margin: 4px 4px 0 4px;
        border-radius: 8px;
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-corner {
        background: var(--today-jobs-scroll-track);
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-thumb {
        background-color: var(--today-jobs-scroll-thumb);
        border-radius: 5px;
        border: 3px solid var(--today-jobs-scroll-track);
        background-clip: padding-box;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.28),
          inset 0 -1px 0 rgba(0, 0, 0, 0.22);
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-thumb:hover {
        background-color: var(--today-jobs-scroll-thumb-hover);
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-button {
        display: block;
        height: 15px;
        width: 17px;
        background-color: var(--today-jobs-scroll-track);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 11px 11px;
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-button:vertical:start:decrement,
      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-button:single-button:vertical:decrement {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 14l4-4 4 4' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-button:vertical:end:increment,
      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-button:single-button:vertical:increment {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 10l4 4 4-4' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      #customerPage .customer-today-jobs-panel .customer-day-jobs-list::-webkit-scrollbar-button:hover {
        background-color: rgba(30, 41, 59, 0.88);
      }

      /* Snapshot grid row is height-capped; table fills it and scrolls instead of forcing ~492px */
      #customerPage .customer-jobs-snapshot-stack .customer-today-jobs-panel .customer-day-jobs-table {
        min-height: 0;
        height: auto;
        flex: 1 1 auto;
        max-height: 100%;
      }

      body[data-theme="light"] #customerPage .customer-today-jobs-panel .customer-day-jobs-table {
        --today-jobs-scroll-track: rgba(15, 23, 42, 0.68);
        --today-jobs-chrome-border: rgba(15, 23, 42, 0.16);
        --today-jobs-chrome-ring: rgba(255, 255, 255, 0.26);
      }

      body[data-theme="light"] #customerPage .customer-today-jobs-panel .customer-day-jobs-list {
        --today-jobs-scroll-thumb: #94a3b8;
        --today-jobs-scroll-thumb-hover: #cbd5e1;
      }

      .customer-jobs-snapshot-stack .customer-today-jobs-panel .customer-day-jobs-list {
        width: 100%;
        max-width: 100%;
        margin: 0;
        min-height: 0;
        justify-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .customer-today-jobs-panel .customer-day-jobs-list {
        min-height: 0;
        justify-items: center;
      }

      .customer-jobs-snapshot-stack .customer-today-jobs-panel .customer-day-jobs-row {
        width: 100%;
        max-width: 100%;
      }

      .customer-today-jobs-panel .customer-day-jobs-row {
        width: 100%;
        max-width: 100%;
      }

      .customer-day-jobs-header {
        display: none;
      }

      .customer-day-jobs-header span,
      .customer-day-jobs-row span {
        padding: 7px 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .customer-day-jobs-header span {
        border-right: 1px solid rgba(15, 23, 42, 0.14);
      }

      .customer-day-jobs-row span {
        border-right: 0;
      }

      .customer-day-jobs-header span:last-child,
      .customer-day-jobs-row span:last-child {
        border-right: 0;
      }

      .customer-day-jobs-header span {
        font-size: 0.68rem;
        font-weight: 700;
        color: #0f172a;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .customer-day-jobs-list {
        height: auto;
        max-height: none;
        overflow-y: visible;
        overflow-x: hidden;
        min-width: 0;
        box-sizing: border-box;
        display: grid;
        gap: 8px;
        align-content: start;
        padding-bottom: 8px;
      }

      .customer-day-jobs-row {
        display: block;
        position: relative;
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: var(--ui-radius);
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 251, 255, 0.96) 55%, rgba(240, 245, 255, 0.96) 100%);
        padding: 8px 12px;
        min-width: 0;
        box-sizing: border-box;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
        cursor: pointer;
        overflow: hidden;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
      }

      .customer-day-jobs-row.customer-day-jobs-row-expanded {
        overflow: visible;
        z-index: 2;
      }

      .customer-day-jobs-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: rgba(79, 70, 229, 0.18);
      }

      .customer-day-jobs-row:last-child {
        border-bottom: 0;
      }

      .customer-day-jobs-row:not(.customer-day-jobs-row-expanded):hover {
        background:
          linear-gradient(135deg, rgba(238, 242, 255, 0.98) 0%, rgba(231, 237, 255, 0.98) 55%, rgba(224, 232, 255, 0.98) 100%);
        border-color: rgba(79, 70, 229, 0.4);
        box-shadow: 0 6px 14px rgba(79, 70, 229, 0.16);
        transform: translateY(-1px);
      }

      .customer-outstanding-invoice-row.customer-day-jobs-row {
        display: flex;
        align-items: center;
        gap: 6px;
        position: relative;
        padding: 0;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }

      .customer-outstanding-invoice-row.customer-day-jobs-row::before {
        display: none;
      }

      .customer-outstanding-invoice-row.customer-day-jobs-row:not(.customer-day-jobs-row-expanded):hover {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        transform: none;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-payment-btn {
        flex: 0 0 auto;
        align-self: stretch;
        margin: 0;
        padding: 3px 28px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
        background: #2563eb;
        border: 1px solid #1d4ed8;
        border-radius: var(--ui-radius, 6px);
        box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
        cursor: pointer;
        z-index: 1;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-payment-btn:hover {
        background: #1d4ed8;
        border-color: #1e40af;
        color: #ffffff;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-payment-btn:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 1px;
      }

      .customer-outstanding-invoice-row .customer-day-jobs-card-story {
        line-height: 1.12 !important;
        margin: 0;
        padding: 0;
      }

      .customer-outstanding-row-card {
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: var(--ui-radius);
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 251, 255, 0.96) 55%, rgba(240, 245, 255, 0.96) 100%);
        padding: 5px 6px 6px 10px;
        box-sizing: border-box;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
        overflow: hidden;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
      }

      .customer-outstanding-row-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: rgba(79, 70, 229, 0.18);
      }

      .customer-outstanding-invoice-row.customer-day-jobs-row:not(.customer-day-jobs-row-expanded):hover .customer-outstanding-row-card,
      .customer-outstanding-quote-row.customer-day-jobs-row:not(.customer-day-jobs-row-expanded):hover .customer-outstanding-row-card {
        background:
          linear-gradient(135deg, rgba(238, 242, 255, 0.98) 0%, rgba(231, 237, 255, 0.98) 55%, rgba(224, 232, 255, 0.98) 100%);
        border-color: rgba(79, 70, 229, 0.4);
        box-shadow: 0 6px 14px rgba(79, 70, 229, 0.16);
        transform: translateY(-1px);
      }

      .customer-outstanding-invoice-row .customer-day-jobs-card-meta-box.customer-outstanding-invoice-meta-grid {
        padding: 6px;
        margin-top: 0;
        border-width: 2px;
        display: block;
        box-sizing: border-box;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-left {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: 0;
        line-height: 1.12 !important;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-primary {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.12 !important;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-top-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        margin: 0;
        min-width: 0;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-action-stack {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        flex: 0 0 auto;
        min-width: 0;
        width: min(var(--outstanding-panel-actions-width, max-content), 100%);
        max-width: 100%;
        box-sizing: border-box;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-action-stack > * {
        max-width: 100%;
        box-sizing: border-box;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-action-stack > button,
      .customer-outstanding-quote-row .customer-outstanding-quote-action-stack > button,
      .customer-outstanding-quote-row .customer-outstanding-quote-response-menu .job-status-trigger {
        width: 100%;
        min-width: 0;
        padding: 3px 10px 4px;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-reminder-btn {
        align-self: stretch;
        box-sizing: border-box;
        width: auto;
        height: auto;
        margin: 0 !important;
        padding: 3px 28px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        border: 1px solid #ca8a04;
        border-radius: var(--ui-radius, 6px);
        background: rgba(250, 204, 21, 0.06);
        box-shadow: 0 1px 2px rgba(202, 138, 4, 0.2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-reminder-btn:hover {
        border-color: #a16207;
        background: rgba(250, 204, 21, 0.12);
        color: #eab308;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-reminder-btn:focus-visible {
        outline: 2px solid #ca8a04;
        outline-offset: 1px;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-call-btn {
        align-self: stretch;
        box-sizing: border-box;
        margin: 0;
        padding: 3px 28px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        color: #1e3a8a !important;
        background: #dbeafe !important;
        border: 1px solid #2563eb !important;
        border-radius: var(--ui-radius, 6px);
        box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-call-btn:hover {
        background: #bfdbfe !important;
        border-color: #1d4ed8 !important;
        color: #1e40af !important;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-call-btn:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 1px;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-reminder-btn svg {
        width: auto;
        height: calc(0.72rem * 1.2);
        display: block;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-reminder-btn svg path {
        fill: currentColor;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-receipt-btn {
        border-color: #7c3aed !important;
        background: rgba(124, 58, 237, 0.1) !important;
        color: #5b21b6 !important;
        box-shadow: 0 1px 2px rgba(91, 33, 182, 0.22) !important;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-receipt-btn:hover {
        border-color: #6d28d9 !important;
        background: rgba(124, 58, 237, 0.2) !important;
        color: #4c1d95 !important;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-receipt-btn:focus-visible {
        outline: 2px solid #7c3aed !important;
        outline-offset: 1px;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-receipt-btn {
        border-color: #7c3aed !important;
        background: rgba(124, 58, 237, 0.1) !important;
        color: #5b21b6 !important;
        box-shadow: 0 1px 2px rgba(91, 33, 182, 0.22) !important;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-receipt-btn:hover {
        border-color: #6d28d9 !important;
        background: rgba(124, 58, 237, 0.2) !important;
        color: #4c1d95 !important;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-receipt-btn:focus-visible {
        outline: 2px solid #7c3aed !important;
        outline-offset: 1px;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-primary > span {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.12 !important;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
        min-width: 0;
        flex: 1 1 auto;
        column-gap: 0;
        row-gap: 2px;
        font-size: 0.95rem;
        line-height: 1.15;
      }

      /* Sales order dues: same type size / line rhythm as .customer-outstanding-invoice-due-inline + primary gap: 3px */
      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-dues-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2px;
        font-size: 0.95rem;
        line-height: 1.15;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-dues-block > * {
        margin: 0 !important;
        padding: 0 !important;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-dues-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        column-gap: 0.35em;
        row-gap: 2px;
        width: auto;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        font-size: inherit;
        line-height: 1.15;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-money-seg {
        display: inline;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        font-size: inherit;
        font-weight: 800;
        line-height: 1.15;
        white-space: nowrap;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-money-line--accent {
        color: #ea580c;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-money-label,
      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-money-value {
        display: inline;
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        font-weight: inherit;
        vertical-align: baseline;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-money-label {
        font-weight: 700;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-money-value {
        font-size: 0.95rem;
        font-variant-numeric: tabular-nums;
        font-weight: 800;
        line-height: 1.15;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-overdue-line {
        display: block;
        width: auto;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.15;
      }

      .customer-outstanding-sales-order-row .customer-outstanding-sales-order-overdue-tag {
        display: inline-block;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #c2410c;
        line-height: 1.15;
        vertical-align: baseline;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline .customer-outstanding-invoice-due-status-bullet {
        color: #b91c1c;
        font-weight: 900;
        font-size: 1em;
        line-height: 1;
        margin: 0;
        padding: 0 0.12em;
        flex: 0 0 auto;
        user-select: none;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-customer-name {
        font-weight: 800;
        color: #0f172a;
        font-size: 0.86rem;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-doc-name {
        font-weight: 500;
        color: #475569;
        font-size: 0.78rem;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-doc-number {
        font-weight: 800;
        color: #475569;
        font-size: 0.86rem;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline .customer-outstanding-invoice-amount,
      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline .customer-outstanding-invoice-due-word,
      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline .customer-outstanding-invoice-status {
        color: #b91c1c;
        font-weight: 800;
        display: inline;
        padding: 0;
        line-height: 1.15;
        white-space: nowrap;
        vertical-align: baseline;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline .customer-outstanding-invoice-amount {
        margin: 0 0.35em 0 0;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline .customer-outstanding-invoice-due-word {
        text-transform: uppercase;
        font-size: 0.78rem;
        margin: 0 0.28em 0 0;
      }

      .customer-outstanding-invoice-row
        .customer-outstanding-invoice-due-inline
        .customer-outstanding-invoice-due-word--overdue {
        text-transform: none;
        letter-spacing: 0.02em;
      }

      .customer-outstanding-invoice-row
        .customer-outstanding-invoice-due-inline
        .customer-outstanding-invoice-due-word--paid {
        text-transform: none;
        letter-spacing: 0.02em;
        color: #15803d;
        font-weight: 800;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline .customer-outstanding-invoice-status {
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.78rem;
        margin: 0;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-due-inline .customer-outstanding-invoice-status--partly-paid {
        color: #64748b;
        text-transform: none;
        letter-spacing: normal;
        font-weight: 800;
        font-size: 0.9263em;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-amount {
        font-size: 0.95rem;
      }

      .customer-outstanding-invoice-row .customer-outstanding-invoice-status {
        font-size: 0.88rem;
      }

      .customer-outstanding-quote-row.customer-day-jobs-row {
        display: flex;
        align-items: center;
        gap: 6px;
        position: relative;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }

      .customer-outstanding-quote-row.customer-day-jobs-row::before {
        display: none;
      }

      .customer-outstanding-quote-row.customer-day-jobs-row:not(.customer-day-jobs-row-expanded):hover {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        transform: none;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-response-menu {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-response-menu .job-status-trigger {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 3px 10px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        border-radius: var(--ui-radius, 6px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-response-menu .job-status-trigger.active {
        border: 1px solid #15803d;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-response-menu .job-status-trigger.quote-response-none {
        border: 1px solid #94a3b8;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-response-menu .job-status-trigger.quote-response-declined {
        border: 1px solid #b91c1c;
      }

      .customer-outstanding-quote-row.customer-day-jobs-row:has(.customer-outstanding-quote-response-menu[open]) {
        overflow: visible;
        z-index: 50000;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-response-menu.job-status-menu[open] {
        z-index: 50001;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-response-menu .job-status-options {
        z-index: 50002;
      }

      .customer-outstanding-quote-row .customer-day-jobs-card-story {
        line-height: 1.12 !important;
        margin: 0;
        padding: 0;
      }

      .customer-outstanding-quote-row .customer-day-jobs-card-meta-box.customer-outstanding-quote-meta-grid {
        padding: 6px;
        margin-top: 0;
        border-width: 2px;
        display: block;
        box-sizing: border-box;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-left {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: 0;
        line-height: 1.12 !important;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-primary {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.12 !important;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-top-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        margin: 0;
        min-width: 0;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-action-stack {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        flex: 0 0 auto;
        min-width: 0;
        width: min(var(--outstanding-panel-actions-width, max-content), 100%);
        max-width: 100%;
        box-sizing: border-box;
        position: relative;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-action-stack > * {
        max-width: 100%;
        box-sizing: border-box;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-reminder-btn {
        align-self: stretch;
        box-sizing: border-box;
        width: auto;
        height: auto;
        margin: 0 !important;
        padding: 3px 28px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        border: 1px solid #ca8a04;
        border-radius: var(--ui-radius, 6px);
        background: rgba(250, 204, 21, 0.06);
        box-shadow: 0 1px 2px rgba(202, 138, 4, 0.2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-reminder-btn:hover {
        border-color: #a16207;
        background: rgba(250, 204, 21, 0.12);
        color: #eab308;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-reminder-btn:focus-visible {
        outline: 2px solid #ca8a04;
        outline-offset: 1px;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-reminder-btn[data-outstanding-quote-reason] {
        color: #c2410c;
        background: #fff7ed;
        border: 1px solid #f97316;
        box-shadow: 0 1px 2px rgba(249, 115, 22, 0.2);
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-reminder-btn[data-outstanding-quote-reason]:hover {
        color: #9a3412;
        background: #ffedd5;
        border-color: #ea580c;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-reminder-btn[data-outstanding-quote-reason]:focus-visible {
        outline: 2px solid #f97316;
        outline-offset: 1px;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-notes-btn {
        align-self: stretch;
        box-sizing: border-box;
        margin: 0;
        padding: 3px 28px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        color: #1e3a8a !important;
        background: #dbeafe !important;
        border: 1px solid #2563eb !important;
        border-radius: var(--ui-radius, 6px);
        box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-booking-btn {
        align-self: stretch;
        box-sizing: border-box;
        margin: 0;
        padding: 3px 18px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        color: #4c1d95;
        background: #f3e8ff;
        border: 1px solid #9333ea;
        border-radius: var(--ui-radius, 6px);
        box-shadow: 0 1px 2px rgba(147, 51, 234, 0.2);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-notes-btn:hover {
        background: #bfdbfe !important;
        border-color: #1d4ed8 !important;
        color: #1e40af !important;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-booking-btn:hover {
        background: #e9d5ff;
        border-color: #7e22ce;
        color: #3b0764;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-notes-btn:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 1px;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-booking-btn:focus-visible {
        outline: 2px solid #9333ea;
        outline-offset: 1px;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-remove-btn,
      .customer-outstanding-invoice-row .customer-outstanding-quote-remove-btn,
      .customer-outstanding-sales-order-row .customer-outstanding-quote-remove-btn,
      .settings-description-line-top .customer-outstanding-quote-remove-btn {
        align-self: center;
        box-sizing: border-box;
        margin: 0;
        width: 28px;
        height: 28px;
        padding: 0;
        font-size: 19px;
        font-weight: 600;
        line-height: 1;
        color: #991b1b;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        flex: 0 0 auto;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-remove-btn:hover,
      .customer-outstanding-invoice-row .customer-outstanding-quote-remove-btn:hover,
      .customer-outstanding-sales-order-row .customer-outstanding-quote-remove-btn:hover,
      .settings-description-line-top .customer-outstanding-quote-remove-btn:hover {
        color: #7f1d1d;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-remove-btn:focus-visible,
      .customer-outstanding-invoice-row .customer-outstanding-quote-remove-btn:focus-visible,
      .customer-outstanding-sales-order-row .customer-outstanding-quote-remove-btn:focus-visible,
      .settings-description-line-top .customer-outstanding-quote-remove-btn:focus-visible {
        outline: 2px solid #dc2626;
        outline-offset: 1px;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-reminder-btn svg {
        width: auto;
        height: calc(0.72rem * 1.2);
        display: block;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-reminder-btn svg path {
        fill: currentColor;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-remove-btn svg,
      .customer-outstanding-invoice-row .customer-outstanding-quote-remove-btn svg,
      .customer-outstanding-sales-order-row .customer-outstanding-quote-remove-btn svg,
      .settings-description-line-top .customer-outstanding-quote-remove-btn svg {
        width: auto;
        height: calc(0.72rem * 1.2);
        display: block;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-remove-btn svg path,
      .customer-outstanding-invoice-row .customer-outstanding-quote-remove-btn svg path,
      .customer-outstanding-sales-order-row .customer-outstanding-quote-remove-btn svg path,
      .settings-description-line-top .customer-outstanding-quote-remove-btn svg path {
        fill: currentColor;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-amount-inline {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
        min-width: 0;
        flex: 1 1 auto;
        column-gap: 0;
        row-gap: 2px;
        font-size: 0.95rem;
        line-height: 1.15;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-amount,
      .customer-outstanding-quote-row .customer-outstanding-quote-label,
      .customer-outstanding-quote-row .customer-outstanding-quote-bullet {
        color: #4338ca;
        font-weight: 800;
        line-height: 1.15;
        vertical-align: baseline;
        display: inline;
        padding: 0;
        white-space: nowrap;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-amount {
        margin: 0 0.35em 0 0;
        font-size: 0.95rem;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-label {
        text-transform: uppercase;
        font-size: 0.78rem;
        margin: 0;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-bullet {
        font-size: 1em;
        line-height: 1;
        margin: 0;
        padding: 0 0.12em;
        flex: 0 0 auto;
        user-select: none;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-customer-name {
        font-weight: 800;
        color: #0f172a;
        font-size: 0.86rem;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-doc-name {
        font-weight: 500;
        color: #475569;
        font-size: 0.78rem;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-doc-number {
        font-weight: 800;
        color: #475569;
        font-size: 0.86rem;
      }

      .customer-outstanding-quote-row .customer-outstanding-quote-primary > span {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.12 !important;
      }

      .customer-day-jobs-card-story {
        margin: 0;
        padding: 0;
        font-size: 0.8rem;
        color: #4b5563;
        font-weight: 400;
        line-height: 1.18 !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
      }

      .customer-day-jobs-card-story-line {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.18 !important;
      }

      .customer-day-jobs-card-story-line + .customer-day-jobs-card-story-line {
        margin-top: 5px !important;
      }

      .customer-day-jobs-card-story-line:first-child {
        font-weight: 800;
        color: #0f172a;
      }

      .customer-day-jobs-card-meta-box {
        display: block;
        position: relative;
        margin-top: 4px;
        padding: 6px 48px 6px 10px;
        border: 1px solid rgba(15, 23, 42, 0.26);
        border-radius: var(--ui-radius);
        background: transparent;
      }

      .customer-day-jobs-card-label {
        color: #475569;
        font-weight: 700;
      }

      .customer-day-jobs-actions-menu {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid rgba(15, 23, 42, 0.12);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }

      .customer-day-jobs-actions-menu .tab-inline-action-btn {
        width: 254px;
        text-align: center;
        min-width: 254px;
        padding: 6px 10px;
        min-height: 30px;
        font-size: 0.78rem;
        line-height: 1.15;
        font-weight: 400;
        background: rgba(226, 232, 240, 0.9) !important;
        color: var(--profile-header-bg) !important;
        border: 1px solid var(--profile-header-bg) !important;
        border-bottom: 1px solid var(--profile-header-bg) !important;
        border-radius: 10px !important;
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding-left: 26px;
        position: relative;
      }

      .customer-day-jobs-actions-menu .tab-inline-action-btn.sms-sent {
        background: rgba(22, 163, 74, 0.32);
        border-color: rgba(22, 163, 74, 0.65);
        color: #052e16;
      }

      .customer-day-jobs-actions-menu .tab-inline-action-btn:hover {
        background: rgba(203, 213, 225, 0.95) !important;
        color: var(--profile-header-bg) !important;
        border-color: var(--profile-header-bg) !important;
      }

      .customer-day-jobs-actions-menu .tab-inline-action-btn svg {
        width: 11px;
        height: 11px;
        display: block;
        flex: 0 0 auto;
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
      }

      .customer-day-jobs-actions-menu .tab-inline-action-btn .customer-day-jobs-action-label {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        pointer-events: none;
      }

      .customer-day-jobs-card-meta-box .customer-day-jobs-card-story-line:first-of-type {
        font-weight: 700;
        color: #111827;
      }

      .customer-day-jobs-actions-menu .tab-inline-action-btn svg.customer-day-jobs-action-icon-message {
        color: #16a34a;
      }

      .customer-day-jobs-actions-menu .tab-inline-action-btn svg.customer-day-jobs-action-icon-message path {
        fill: currentColor;
      }

      .customer-day-jobs-actions-menu .tab-inline-action-btn svg.customer-day-jobs-action-icon-navigation {
        color: #dc2626;
      }

      .customer-day-jobs-inline-menu {
        margin-top: 6px;
      }

      .customer-day-jobs-quick-call {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #166534;
        text-decoration: none;
        border: 1px solid rgba(22, 163, 74, 0.34);
        background: rgba(240, 253, 244, 0.95);
      }

      .customer-day-jobs-quick-call svg {
        width: 16px;
        height: 16px;
        display: block;
      }

      .customer-day-jobs-quick-call:hover {
        color: #14532d;
        border-color: rgba(22, 163, 74, 0.5);
        background: #dcfce7;
      }

      .customer-day-jobs-options-toggle {
        position: absolute;
        top: 36px;
        right: 6px;
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #166534;
        border: 1px solid rgba(22, 101, 52, 0.3);
        background: rgba(220, 252, 231, 0.95);
        cursor: pointer;
      }

      .customer-day-jobs-options-toggle svg {
        width: 19px;
        height: 19px;
        display: block;
      }

      .customer-day-jobs-options-toggle:hover {
        color: #14532d;
        border-color: rgba(21, 128, 61, 0.44);
        background: #bbf7d0;
      }

      .customer-day-jobs-empty {
        padding: 10px 8px;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        color: #475569;
      }

      .customer-day-jobs-tail-note {
        padding: 10px 8px;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        color: #475569;
      }

      .customer-day-jobs-detail-row {
        margin: 0;
        font-size: 0.82rem;
        color: var(--text);
        line-height: 1.45;
        text-align: left;
      }

      .customer-day-jobs-detail-row + .customer-day-jobs-detail-row {
        margin-top: 6px;
      }

      .customer-day-jobs-detail-row strong {
        color: var(--text);
      }

      .customer-day-jobs-phone-link {
        color: #166534;
        text-decoration: none;
        font-weight: inherit;
      }

      .customer-day-jobs-phone-link:hover {
        color: #14532d;
        text-decoration: underline;
      }

      .customer-day-jobs-tel-wrap {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .customer-day-jobs-tel-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(220, 38, 38, 0.34);
        background: rgba(254, 242, 242, 0.95);
        color: #b91c1c;
        text-decoration: none;
        font-size: 0.78rem;
        line-height: 1;
      }

      .customer-day-jobs-tel-link svg {
        width: 14px;
        height: 14px;
      }

      .customer-day-jobs-tel-link:hover {
        background: #fee2e2;
        border-color: rgba(220, 38, 38, 0.5);
      }

      #customerDayJobDetailsModal .job-modal-body {
        color: var(--text);
      }

      #customerDayJobDetailsModal .job-modal-body .field-label {
        color: var(--text);
      }

      #diaryDaySummaryModal {
        width: min(560px, calc(100vw - 24px));
      }

      #diaryDaySummaryModal .job-modal-body {
        color: var(--text);
        gap: 12px;
      }

      .diary-day-summary-date {
        margin: 0;
        color: var(--muted);
        font-size: 0.82rem;
      }

      .diary-day-summary-list {
        display: grid;
        gap: 8px;
      }

      .diary-day-summary-item {
        width: 100%;
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        text-align: left;
        padding: 10px 12px;
        display: grid;
        gap: 3px;
        cursor: pointer;
      }

      .diary-day-summary-item:hover,
      .diary-day-summary-item:focus-visible {
        background: rgba(129, 140, 248, 0.14);
        border-color: rgba(129, 140, 248, 0.36);
        outline: none;
      }

      .diary-day-summary-item-time {
        font-size: 0.76rem;
        font-weight: 700;
        color: #c7d2fe;
      }

      .diary-day-summary-item-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text);
      }

      .diary-day-summary-item-meta {
        font-size: 0.78rem;
        color: var(--muted);
      }

      .diary-day-summary-empty {
        margin: 0;
        color: var(--muted);
      }

      .customer-day-jobs-detail-actions {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .customer-day-jobs-detail-actions .tab-inline-action-btn {
        width: 100%;
        text-align: center;
      }

      .customer-day-jobs-detail-actions .tab-inline-action-btn.sms-sent {
        background: rgba(22, 163, 74, 0.32);
        border-color: rgba(22, 163, 74, 0.65);
        color: #052e16;
      }

      .customer-service-due-panel {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--panel-bg);
        padding: 8px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 8px;
        overflow: hidden;
        box-sizing: border-box;
        color: var(--text);
        min-height: 0;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 24px rgba(15, 23, 42, 0.08);
      }

      /* Snapshot Service panel: remove bottom dead-space so white table reaches panel bottom. */
      .customer-jobs-snapshot-stack .customer-service-due-panel {
        padding-bottom: 8px;
        gap: 8px;
      }

      .customer-service-due-panel .customer-day-jobs-title {
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--text);
      }

      .customer-service-due-table {
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: 10px;
        background: #ffffff;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
      }

      /* Snapshot white table should fill the available row to the bottom edge. */
      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-service-due-table {
        min-height: 0;
        height: 100%;
        max-height: none;
      }

      /* One scroll container: fills the white panel (no nested service-centre border). */
      .customer-service-due-table .customer-service-due-table-wrap.service-centre-table-wrap {
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0;
        background: #ffffff;
      }

      /* One scroll container: fills the white panel (vertical scroll; horizontal when table is wider than panel). */
      .customer-service-due-table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: auto;
        background: #ffffff;
        border-radius: 0;
        scrollbar-gutter: auto;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-service-due-table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow-x: auto;
        overflow-y: scroll !important;
        scrollbar-gutter: auto;
        background: #e2e8f0;
        --svc-snapshot-scroll-track: #e2e8f0;
        --svc-snapshot-scroll-thumb: #94a3b8;
        --svc-snapshot-scroll-thumb-hover: #64748b;
        scrollbar-color: var(--svc-snapshot-scroll-thumb) var(--svc-snapshot-scroll-track);
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-service-due-table-wrap::-webkit-scrollbar {
        width: 17px;
        height: 17px;
        background: var(--svc-snapshot-scroll-track);
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-service-due-table-wrap::-webkit-scrollbar-track {
        background: var(--svc-snapshot-scroll-track);
        margin: 4px;
        border-radius: 8px;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-service-due-table-wrap::-webkit-scrollbar-thumb {
        background-color: var(--svc-snapshot-scroll-thumb);
        border-radius: 5px;
        border: 3px solid var(--svc-snapshot-scroll-track);
        background-clip: padding-box;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.35),
          inset 0 -1px 0 rgba(0, 0, 0, 0.12);
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-service-due-table-wrap::-webkit-scrollbar-thumb:hover {
        background-color: var(--svc-snapshot-scroll-thumb-hover);
      }

      /* This month’s services (snapshot): same table chrome, zebra, and cell grid as Jobs DB */
      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        text-align: left;
        box-sizing: border-box;
        font-size: 0.74rem !important;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table thead th:nth-child(1) {
        font-size: 0.74rem !important;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table tbody td {
        padding: 6px 7px !important;
        vertical-align: middle !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.1);
        border-right: 1px solid rgba(15, 23, 42, 0.1);
        box-sizing: border-box;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table tbody td:last-child {
        border-right: 0 !important;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table tbody tr:nth-child(odd) td {
        background: #ffffff;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table tbody tr:nth-child(even) td {
        background: #f8fafc;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table tbody tr:hover td {
        background: #e2e8f0 !important;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table tbody td:nth-child(1) {
        font-size: 0.76rem !important;
        font-weight: 700;
        color: #0f172a;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .service-centre-table tbody td:nth-child(1) .service-centre-customer-link {
        font-size: 0.76rem !important;
        font-weight: 700;
        color: #0f172a;
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-service-due-empty-cell {
        background: #ffffff !important;
        border-right: 0 !important;
        vertical-align: middle !important;
        padding: 10px 8px !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        line-height: 1.35;
        font-family: inherit;
        color: #475569 !important;
        text-align: center;
        margin: 0;
      }

      body[data-theme="light"] .customer-jobs-snapshot-stack .customer-service-due-panel .customer-service-due-table-wrap {
        --svc-snapshot-scroll-track: #e8eef4;
        --svc-snapshot-scroll-thumb: #94a3b8;
        --svc-snapshot-scroll-thumb-hover: #64748b;
      }

      .customer-service-due-table .service-centre-table tbody tr:last-child td {
        border-bottom: 0 !important;
      }

      .customer-service-due-table .service-centre-table {
        background: #ffffff;
      }

      /* Full-width header band (avoids white sliver past last column / scrollbar gutter) */
      .customer-service-due-table .service-centre-table thead {
        background-color: #e2e8f0;
      }

      .customer-service-due-table .service-centre-table thead th {
        background: #e2e8f0 !important;
        color: #0f172a !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.2);
        border-right: 1px solid rgba(15, 23, 42, 0.14);
        padding: 6px 7px !important;
        font-size: 0.74rem !important;
        line-height: 1.25;
        font-weight: 700;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .customer-service-due-table .service-centre-table thead th:nth-child(1) {
        font-size: 0.68rem !important;
      }

      .customer-service-due-table .service-centre-table thead th:last-child,
      .customer-service-due-table .service-centre-table tbody td:last-child {
        border-right: 0 !important;
      }

      /* Workspace snapshot: wide min-width; narrow viewports scroll horizontally (see @media below). */
      .customer-service-due-table .service-centre-table {
        table-layout: fixed;
        width: 100%;
        min-width: 985px;
        font-size: 0.84rem;
      }

      .customer-service-due-table .service-centre-table th,
      .customer-service-due-table .service-centre-table td {
        min-width: 0;
      }

      .customer-service-due-table .service-centre-table th:nth-child(1),
      .customer-service-due-table .service-centre-table td:nth-child(1) {
        white-space: normal;
      }

      .customer-service-due-table .service-centre-table tbody td {
        padding: 8px 6px !important;
        font-size: 0.84rem !important;
        line-height: 1.35;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        vertical-align: top;
      }

      .customer-service-due-table .service-centre-table tbody td:nth-child(1) {
        font-size: 0.78rem !important;
      }

      .customer-service-due-table .service-centre-table tbody td:nth-child(1) .service-centre-customer-link {
        font-size: 0.78rem !important;
      }

      /* 10 columns: Customer, Phone, Address, Tenant, Tenant contact, Type, Due, Status, Reminder, Done */
      .customer-service-due-table .service-centre-table th:nth-child(1),
      .customer-service-due-table .service-centre-table td:nth-child(1) {
        width: 210px;
        min-width: 210px;
      }
      .customer-service-due-table .service-centre-table th:nth-child(2),
      .customer-service-due-table .service-centre-table td:nth-child(2) {
        width: 130px;
        min-width: 130px;
      }
      .customer-service-due-table .service-centre-table th:nth-child(3),
      .customer-service-due-table .service-centre-table td:nth-child(3) {
        width: 360px;
        min-width: 360px;
      }
      .customer-service-due-table .service-centre-table th:nth-child(4),
      .customer-service-due-table .service-centre-table td:nth-child(4) {
        width: 120px;
        min-width: 120px;
      }
      .customer-service-due-table .service-centre-table th:nth-child(5),
      .customer-service-due-table .service-centre-table td:nth-child(5) {
        width: 120px;
        min-width: 120px;
      }
      .customer-service-due-table .service-centre-table th:nth-child(6),
      .customer-service-due-table .service-centre-table td:nth-child(6) {
        width: 125px;
        min-width: 125px;
      }
      .customer-service-due-table .service-centre-table th:nth-child(7),
      .customer-service-due-table .service-centre-table td:nth-child(7) {
        width: 105px;
        min-width: 105px;
      }
      .customer-service-due-table .service-centre-table th:nth-child(8),
      .customer-service-due-table .service-centre-table td:nth-child(8) {
        width: 105px;
        min-width: 105px;
      }
      .customer-service-due-table .service-centre-table th:nth-child(9),
      .customer-service-due-table .service-centre-table td:nth-child(9) {
        width: 76px;
        min-width: 76px;
      }

      .customer-service-due-table .service-centre-table thead th:nth-child(8),
      .customer-service-due-table .service-centre-table thead th:nth-child(9),
      .customer-service-due-table .service-centre-table thead th:nth-child(10),
      .customer-service-due-table .service-centre-table tbody td:nth-child(8),
      .customer-service-due-table .service-centre-table tbody td:nth-child(9),
      .customer-service-due-table .service-centre-table tbody td:nth-child(10) {
        text-align: center;
      }

      @media (max-width: 1280px) {
        .customer-service-due-table-wrap {
          overflow-x: auto;
        }

        .customer-service-due-table .service-centre-table {
          table-layout: fixed;
          min-width: 985px;
          font-size: 0.8rem;
        }

        .customer-service-due-table .service-centre-table tbody td {
          font-size: 0.8rem !important;
        }
      }

      /* Customer workspace snapshot only: never shrink or re-layout table on narrow viewports */
      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table {
        table-layout: fixed !important;
        min-width: 985px !important;
        width: 100% !important;
        font-size: 0.84rem;
      }

      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table tbody td {
        font-size: 0.84rem !important;
      }

      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table tbody tr:nth-child(even) td {
        background: #f8fafc;
      }

      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table tbody tr:nth-child(odd) td {
        background: #ffffff;
      }

      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table tbody tr {
        height: 52px;
      }

      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table tbody tr td {
        box-sizing: border-box;
        overflow: hidden;
      }

      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table tbody tr[data-open-service-customer]:hover td {
        background: #e2e8f0 !important;
      }

      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table tbody tr.service-centre-row--completed td,
      .customer-jobs-snapshot-stack .customer-service-due-table .service-centre-table tbody tr.service-centre-row--completed:hover td {
        background: #bbf7d0 !important;
      }

      .customer-service-due-table .service-centre-status {
        min-width: 0;
        padding: 4px 8px;
      }

      .customer-service-due-table .customer-service-due-empty-cell {
        padding: 10px 8px;
        text-align: center;
        background: #ffffff !important;
        border-right: 0 !important;
        margin: 0;
      }

      .customer-service-due-table .customer-service-due-empty-cell .jobs-portal-empty-msg {
        margin: 0;
        padding: 0;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        line-height: 1.35;
        font-family: inherit;
        color: #475569 !important;
      }

      .nearby-merchants-list {
        display: grid;
        gap: 8px;
      }

      .nearby-merchant-tile {
        position: relative;
        display: block;
        width: 100%;
      }

      .nearby-merchant-tile--can-save .nearby-merchant-btn {
        padding-right: 42px;
      }

      .nearby-merchant-add-saved {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 2;
        width: 28px;
        height: 28px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: #16a34a;
        cursor: pointer;
        display: grid;
        place-items: center;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, transform 0.12s ease;
      }

      .nearby-merchant-add-saved:hover {
        background: transparent;
        color: #15803d;
        transform: scale(1.08);
      }

      .nearby-merchant-add-saved:focus-visible {
        outline: 2px solid rgba(34, 197, 94, 0.75);
        outline-offset: 2px;
      }

      .nearby-merchant-add-saved:active {
        color: #14532d;
        transform: scale(0.95);
      }

      /* Green plus only (no button fill) — bars use currentColor */
      .nearby-merchant-add-saved-cross {
        display: block;
        width: 14px;
        height: 14px;
        position: relative;
        pointer-events: none;
      }

      .nearby-merchant-add-saved-cross::before,
      .nearby-merchant-add-saved-cross::after {
        content: "";
        position: absolute;
        background: currentColor;
        border-radius: 1px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .nearby-merchant-add-saved-cross::before {
        width: 12px;
        height: 2px;
      }

      .nearby-merchant-add-saved-cross::after {
        width: 2px;
        height: 12px;
      }

      .nearby-merchants-section-title {
        margin: 2px 0 0;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text);
      }

      .nearby-merchants-saved-block {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
      }

      /* Saved suppliers shown first: separator below map list follows */
      .nearby-merchants-saved-block--before-map-list {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
      }

      /* Only saved suppliers in the modal (no map rows): no stray top rule */
      .nearby-merchants-saved-block--first-section {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }

      .nearby-merchants-section-title--saved-heading {
        margin: 0 0 8px;
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text);
      }

      #nearbyMerchantsModal .nearby-merchants-saved-block {
        border-top-color: rgba(255, 255, 255, 0.14);
      }

      #nearbyMerchantsModal .nearby-merchants-saved-block--before-map-list {
        border-bottom-color: rgba(255, 255, 255, 0.14);
      }

      body[data-theme="light"] #nearbyMerchantsModal .nearby-merchants-saved-block {
        border-top-color: rgba(15, 23, 42, 0.12);
      }

      body[data-theme="light"] #nearbyMerchantsModal .nearby-merchants-saved-block--before-map-list {
        border-bottom-color: rgba(15, 23, 42, 0.12);
      }

      .nearby-merchants-controls {
        display: grid;
        gap: 8px;
        margin-bottom: 8px;
      }

      .nearby-merchants-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
      }

      .nearby-merchants-meta {
        margin: 0;
        font-size: 0.74rem;
        color: #475569;
      }

      .settings-favorite-merchants-add-row {
        display: grid;
        grid-template-columns: 280px 88px auto;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
      }

      #settingsFavoriteMerchantInput {
        width: 280px;
      }

      #settingsFavoriteMerchantPostcodeInput {
        width: 88px;
      }

      .settings-favorite-merchants-list {
        display: grid;
        gap: 6px;
        margin-top: 8px;
      }

      .settings-favorite-merchants-matches {
        display: grid;
        gap: 6px;
        margin-top: 6px;
        border: 1px solid var(--border);
        background: rgba(15, 23, 42, 0.04);
        max-width: 420px;
        max-height: 220px;
        overflow: auto;
        padding: 6px;
      }

      .settings-favorite-merchants-matches:empty {
        display: none;
      }

      .settings-favorite-merchants-match-btn {
        width: 100%;
        text-align: left;
        cursor: pointer;
      }

      .settings-favorite-merchants-match-btn:hover {
        background: var(--menu-yellow-soft-strong);
        border-color: var(--menu-yellow-border);
      }

      .settings-favorite-merchants-match-btn:focus-visible {
        outline: 2px solid rgba(37, 99, 235, 0.42);
        outline-offset: 1px;
      }

      .settings-favorite-merchants-match-btn.active {
        background: var(--menu-yellow-soft-strong);
        border-color: var(--menu-yellow-border);
        outline: none;
      }

      body[data-theme="light"] .settings-favorite-merchants-match-btn:hover,
      body[data-theme="light"] .settings-favorite-merchants-match-btn.active {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(37, 99, 235, 0.48);
        color: #111827;
      }

      .settings-favorite-merchants-item {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
        padding: 6px 8px;
        border: 1px solid var(--border);
        background: rgba(148, 163, 184, 0.12);
      }

      .settings-favorite-merchants-open {
        min-width: 0;
        cursor: pointer;
      }

      .settings-favorite-merchants-remove {
        cursor: pointer;
        white-space: nowrap;
      }

      .settings-description-templates-list {
        display: grid;
        gap: 12px;
        margin-top: 10px;
      }

      .settings-description-templates-list--compact {
        gap: 8px;
        margin-top: 0;
        max-height: min(52vh, 26rem);
        overflow-y: auto;
        padding: 2px 6px 2px 2px;
      }

      .settings-description-lines-count {
        font-weight: 700;
        opacity: 0.75;
      }

      .settings-description-lines-panel {
        margin-top: 4px;
      }

      .settings-description-line {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 8px;
        row-gap: 6px;
        align-items: start;
        padding: 8px 10px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
        box-sizing: border-box;
      }

      .settings-description-line-top {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .settings-description-line-desc {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        padding: 0;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
      }

      .settings-description-line-desc > .settings-description-line-desc-summary {
        list-style: none;
        display: inline-flex;
        align-items: center;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 2px 0;
        cursor: pointer;
        user-select: none;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--muted);
        gap: 6px;
      }

      .settings-description-line-desc > .settings-description-line-desc-summary::-webkit-details-marker {
        display: none;
      }

      .settings-description-line-desc > .settings-description-line-desc-summary::marker {
        content: none;
      }

      /* Single chevron after “Description” (collapsed → right, open → down) */
      .settings-description-line-desc > .settings-description-line-desc-summary::after {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        flex-shrink: 0;
        opacity: 0.55;
      }

      .settings-description-line-desc[open] > .settings-description-line-desc-summary::after {
        transform: rotate(45deg);
        margin-top: 2px;
      }

      .settings-description-line-desc-body {
        margin-top: 6px;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
      }

      .settings-description-line-desc > .settings-description-line-desc-summary:focus-visible {
        outline: 2px solid rgba(96, 165, 250, 0.75);
        outline-offset: 2px;
        border-radius: 4px;
      }

      .settings-description-line-label-row {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .settings-description-line-num {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--muted);
        min-width: 1.25rem;
        text-align: right;
      }

      .settings-description-line-name {
        flex: 1 1 auto;
        min-width: 0;
        width: 0;
      }

      .settings-description-line-amount-cell {
        flex: 0 0 auto;
        display: flex;
        align-items: stretch;
        border: 1px solid #94a3b8;
        border-radius: 6px;
        overflow: hidden;
        background: #ffffff;
        box-sizing: border-box;
      }

      .settings-description-line-amount-prefix {
        display: flex;
        align-items: center;
        padding: 0 2px 0 6px;
        font-size: 0.82rem;
        font-weight: 600;
        color: #111827;
        user-select: none;
      }

      .settings-description-line-price {
        /* ~5 digit amounts; tabular figures keep width even */
        width: 6ch;
        min-width: 6ch;
        max-width: 6ch;
        flex-shrink: 0;
        padding: 6px 4px 6px 2px !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        color: #111827 !important;
        font-variant-numeric: tabular-nums;
        text-align: right;
      }

      .settings-description-line-price::placeholder {
        color: #64748b;
        opacity: 1;
      }

      .settings-description-line-price:focus {
        outline: none;
      }

      .settings-description-line-amount-cell:focus-within {
        outline: 2px solid rgba(15, 23, 42, 0.35);
        outline-offset: 1px;
      }

      .settings-description-line-content {
        display: block;
        width: 100%;
        min-height: 3rem;
        max-height: 10rem;
        resize: vertical;
        box-sizing: border-box;
      }

      .settings-description-lines-empty {
        margin: 0 !important;
      }

      .settings-description-template-remove {
        flex-shrink: 0;
        white-space: nowrap;
      }

      body[data-theme="light"] .settings-description-line {
        background: #f8fafc;
        border-color: #cbd5e1;
      }

      body[data-theme="light"] .settings-description-line-amount-cell:focus-within {
        outline-color: rgba(15, 23, 42, 0.28);
      }

      body[data-theme="light"] .settings-description-line-desc > .settings-description-line-desc-summary {
        color: #64748b;
      }

      body[data-theme="light"] .settings-description-line-desc > .settings-description-line-desc-summary:focus-visible {
        outline-color: rgba(37, 99, 235, 0.45);
      }

      @media (max-width: 480px) {
        .settings-description-line-top {
          flex-wrap: wrap;
        }

        .settings-description-line-label-row {
          flex: 1 1 100%;
          min-width: 100%;
        }

        .settings-description-line-name {
          width: auto;
          min-width: 0;
          flex: 1 1 auto;
        }

        .settings-description-line {
          grid-template-columns: auto minmax(0, 1fr);
        }
      }

      .booking-job-row {
        display: grid;
        grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.1fr);
        gap: 10px;
        align-items: end;
      }

      .booking-new-job-wrap {
        margin-top: -2px;
      }

      .nearby-merchant-btn {
        width: 100%;
        display: grid;
        gap: 3px;
        text-align: left;
        padding: 8px 10px;
        border: 1px solid rgba(15, 23, 42, 0.24);
        border-radius: 10px;
        background: #ffffff;
        color: #0f172a;
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }

      /* Neutral hover (no blue wash) — keeps dark text readable on white cards */
      .nearby-merchant-btn:hover {
        background: rgba(241, 245, 249, 0.98);
        border-color: rgba(148, 163, 184, 0.55);
      }

      .nearby-merchant-btn:focus-visible {
        outline: 2px solid rgba(100, 116, 139, 0.5);
        outline-offset: 2px;
        background: rgba(248, 250, 252, 0.99);
        border-color: rgba(100, 116, 139, 0.45);
      }

      .nearby-merchant-btn:active {
        background: rgba(226, 232, 240, 0.99);
        border-color: rgba(100, 116, 139, 0.5);
      }

      .nearby-merchant-name {
        font-size: 0.84rem;
        font-weight: 700;
      }

      .nearby-merchant-address {
        font-size: 0.76rem;
        color: #475569;
      }

      /*
        Nearby merchants modal sits on a dark .job-modal shell; without this, button text
        can inherit light body colors while the row uses a white card — hover must stay
        low-contrast gray, never saturated blue, with forced readable type on the row.
      */
      #nearbyMerchantsModal .nearby-merchant-btn {
        background: #ffffff !important;
        border: 1px solid rgba(148, 163, 184, 0.5) !important;
        color: #0f172a !important;
      }

      #nearbyMerchantsModal .nearby-merchant-btn .nearby-merchant-name {
        color: #0f172a !important;
      }

      #nearbyMerchantsModal .nearby-merchant-btn .nearby-merchant-address {
        color: #64748b !important;
      }

      #nearbyMerchantsModal .nearby-merchant-btn:hover,
      #nearbyMerchantsModal .nearby-merchant-btn:focus-visible,
      #nearbyMerchantsModal .nearby-merchant-btn:active {
        background: #f1f5f9 !important;
        border-color: rgba(100, 116, 139, 0.45) !important;
        color: #0f172a !important;
      }

      #nearbyMerchantsModal .nearby-merchant-btn:hover .nearby-merchant-name,
      #nearbyMerchantsModal .nearby-merchant-btn:focus-visible .nearby-merchant-name,
      #nearbyMerchantsModal .nearby-merchant-btn:active .nearby-merchant-name {
        color: #0f172a !important;
      }

      #nearbyMerchantsModal .nearby-merchant-btn:hover .nearby-merchant-address,
      #nearbyMerchantsModal .nearby-merchant-btn:focus-visible .nearby-merchant-address,
      #nearbyMerchantsModal .nearby-merchant-btn:active .nearby-merchant-address {
        color: #64748b !important;
      }

      #nearbyMerchantsModal .nearby-merchant-add-saved {
        background: transparent !important;
        color: #22c55e !important;
        box-shadow: none !important;
      }

      #nearbyMerchantsModal .nearby-merchant-add-saved:hover {
        background: transparent !important;
        color: #4ade80 !important;
      }

      #nearbyMerchantsModal .nearby-merchant-add-saved:active {
        color: #16a34a !important;
      }

      .customer-search {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 10px;
        padding: 9px 10px 9px 34px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--text);
        font: inherit;
        font-size: 0.86rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 11px center;
      }

      .customer-header .customer-search {
        width: 100%;
        min-width: 0;
        max-width: none;
        font-size: 0.82rem;
        padding: 8px 10px 8px 31px;
        background-position: 10px center;
      }

      .customer-search::placeholder {
        color: #9aa1ad;
      }

      .customer-item {
        display: grid;
        gap: 5px;
        position: relative;
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: var(--ui-radius);
        padding: 10px 52px 10px 13px;
        min-height: var(--customer-list-row-height);
        height: var(--customer-list-row-height);
        align-content: center;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 251, 255, 0.96) 55%, rgba(240, 245, 255, 0.96) 100%);
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
        cursor: pointer;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
      }

      .customer-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: rgba(79, 70, 229, 0.18);
      }

      .customer-item:hover {
        background:
          linear-gradient(135deg, rgba(238, 242, 255, 0.98) 0%, rgba(231, 237, 255, 0.98) 55%, rgba(224, 232, 255, 0.98) 100%);
        border-color: rgba(79, 70, 229, 0.4);
        box-shadow: 0 6px 14px rgba(79, 70, 229, 0.16);
        transform: translateY(-1px);
      }

      .customer-item:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.16);
      }

      .customer-item-name {
        font-size: 0.94rem;
        font-weight: 600;
        color: #111827;
        line-height: 1.3;
        transform: translateY(-2px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .customer-item-contact {
        font-size: 0.84rem;
        font-weight: 600;
        color: #334155;
      }

      .customer-item-address,
      .customer-item-email {
        color: #4b5563;
        font-size: 0.8rem;
        line-height: 1.2;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .customer-item-actions {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        display: grid;
        gap: 4px;
        justify-items: center;
      }

      .customer-action-link {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #16a34a;
        text-decoration: none;
        border: 1px solid rgba(22, 163, 74, 0.28);
        background: rgba(240, 253, 244, 0.95);
      }

      .customer-action-link svg {
        width: 14px;
        height: 14px;
        display: block;
      }

      .customer-action-link:hover {
        color: #15803d;
        background: #dcfce7;
        border-color: rgba(22, 163, 74, 0.45);
      }

      .customer-action-link.phone-link {
        color: #166534;
        border-color: rgba(22, 163, 74, 0.34);
        background: rgba(240, 253, 244, 0.95);
      }

      .customer-action-link.phone-link:hover {
        color: #14532d;
        border-color: rgba(22, 163, 74, 0.5);
        background: #dcfce7;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .empty {
        color: #6b7280;
        font-size: 0.82rem;
        padding: 10px 11px;
      }

      .workspace-panel {
        flex: 1 1 auto;
        min-width: 0;
        padding: 18px;
        height: 100%;
        min-height: 0;
        overflow: auto;
      }

      .settings-page {
        position: relative;
        min-height: calc(100vh - 56px);
        padding-top: 48px;
        display: grid;
        gap: 14px;
        align-content: start;
      }

      .service-centre-page {
        position: relative;
        gap: 0;
      }

      .service-centre-toolbar {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        margin-top: 28px;
        margin-bottom: 0;
      }

      .service-centre-month-tabs {
        flex: 0 1 auto;
        min-width: 520px;
        max-width: min(100%, 860px);
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 0 0 4px;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
      }

      .service-centre-month-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 8px 12px;
      }

      /* Service Centre month tabs: force larger tab pills than default workspace-tab sizing. */
      .service-centre-month-tabs .workspace-tab.service-centre-month-tab {
        flex: 0 0 auto !important;
        min-width: 54px;
        font-size: 0.86rem !important;
        font-weight: 700;
        padding: 10px 14px !important;
        line-height: 1.1;
        text-align: center;
      }

      .business-overview-range-tabs {
        margin-bottom: 12px;
      }

      .business-overview-range-tabs .workspace-tab.business-overview-range-tab {
        min-width: 88px;
        padding: 7px 12px;
      }

      .business-overview-content {
        display: grid;
        gap: 10px;
      }

      .business-overview-hero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
      }

      .business-overview-title {
        margin: 0 0 4px;
        font-size: 1.02rem;
        font-weight: 800;
        color: #0f172a;
      }

      .business-overview-caption {
        margin: 0;
        font-size: 0.78rem;
        color: var(--muted);
      }

      .business-overview-insights-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 10px;
      }

      .business-overview-card {
        border: 1px solid rgba(15, 23, 42, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        padding: 10px;
        min-height: 78px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
      }

      .business-overview-card--table {
        padding-bottom: 6px;
      }

      .business-overview-table-wrap {
        overflow: auto;
        border: 1px solid rgba(15, 23, 42, 0.14);
        border-radius: 8px;
        background: #ffffff;
      }

      .business-overview-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }

      .business-overview-table th,
      .business-overview-table td {
        padding: 8px 10px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.1);
        font-size: 0.76rem;
        color: #334155;
        text-align: left;
      }

      .business-overview-table th {
        background: #e2e8f0;
        color: #0f172a;
        font-weight: 700;
      }

      .business-overview-table th:nth-child(1),
      .business-overview-table td:nth-child(1) {
        width: 34%;
      }

      .business-overview-table th:nth-child(2),
      .business-overview-table td:nth-child(2) {
        width: 20%;
        font-weight: 800;
        color: #0f172a;
      }

      .business-overview-table tbody tr:last-child td {
        border-bottom: 0;
      }

      .business-overview-card-label {
        margin: 0 0 4px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #64748b;
      }

      .business-overview-card-value {
        margin: 0;
        font-size: 1.18rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.2;
      }

      .business-overview-card-sub {
        margin: 2px 0 0;
        font-size: 0.72rem;
        color: #475569;
      }

      .business-overview-cis-list {
        margin: 10px 0 0;
        padding-left: 1.1rem;
        font-size: 0.76rem;
        color: #334155;
        line-height: 1.45;
      }

      .business-overview-cis-list li + li {
        margin-top: 6px;
      }

      .business-overview-progress-row + .business-overview-progress-row {
        margin-top: 8px;
      }

      .business-overview-progress-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.76rem;
        color: #475569;
        margin-bottom: 4px;
      }

      .business-overview-progress-head strong {
        color: #0f172a;
      }

      .business-overview-progress-track {
        height: 9px;
        border-radius: 999px;
        background: #e2e8f0;
        overflow: hidden;
      }

      .business-overview-progress-fill {
        display: block;
        height: 100%;
        border-radius: 999px;
      }

      .business-overview-progress-fill--indigo {
        background: #4f46e5;
      }

      .business-overview-progress-fill--green {
        background: #16a34a;
      }

      .business-overview-progress-fill--amber {
        background: #ca8a04;
      }

      .business-overview-cash-track {
        display: flex;
        width: 100%;
        height: 14px;
        border-radius: 999px;
        overflow: hidden;
        background: #e2e8f0;
        margin: 2px 0 8px;
      }

      .business-overview-cash-seg {
        height: 100%;
        min-width: 0;
      }

      .business-overview-cash-seg--received {
        background: #16a34a;
      }

      .business-overview-cash-seg--owed {
        background: #ef4444;
      }

      .business-overview-cash-legend {
        display: grid;
        gap: 4px;
        font-size: 0.74rem;
        color: #475569;
      }

      .business-overview-cash-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .business-overview-year-bars {
        height: 124px;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 5px;
        align-items: end;
        margin: 4px 0 2px;
      }

      .business-overview-year-bar-col {
        display: grid;
        gap: 4px;
        justify-items: center;
      }

      .business-overview-year-bar-wrap {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: flex-end;
      }

      .business-overview-year-bar {
        display: block;
        width: 100%;
        min-height: 6px;
        border-radius: 4px 4px 2px 2px;
        background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
      }

      .business-overview-year-bar-label {
        font-size: 0.64rem;
        color: #64748b;
        line-height: 1;
      }

      .business-overview-dot {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        display: inline-block;
      }

      .business-overview-dot--green {
        background: #16a34a;
      }

      .business-overview-dot--red {
        background: #ef4444;
      }

      .business-overview-dot--indigo {
        background: #4f46e5;
      }

      .business-overview-dot--amber {
        background: #ca8a04;
      }

      .settings-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
      }

      .settings-panel {
        padding: 16px;
        display: grid;
        gap: 12px;
      }

      .service-centre-panel {
        margin-top: 0;
        padding: 8px;
        display: grid;
        gap: 8px;
        border: 1px solid var(--border) !important;
        border-radius: 10px;
        background: var(--panel-bg) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
      }

      .service-centre-table-wrap {
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: 10px;
        background: #ffffff;
        overflow: auto;
      }

      .service-centre-panel .service-centre-empty {
        margin: 0;
        padding: 10px 8px;
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: 10px;
        background: #ffffff;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        color: #475569;
      }

      .service-centre-panel-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        margin: 2px 0 0;
        padding: 0 0 6px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .service-centre-panel-title {
        margin: 0 0 0 4px;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.2;
        color: var(--text);
      }

      .service-centre-panel-add-btn {
        min-width: 30px;
        width: 30px;
        height: 30px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
      }

      .service-centre-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1370px;
        font-size: 0.78rem;
      }

      .service-centre-table th,
      .service-centre-table td {
        border-bottom: 1px solid rgba(148, 163, 184, 0.24);
        border-right: 1px solid rgba(148, 163, 184, 0.2);
        padding: 8px 9px;
        text-align: left;
        vertical-align: middle;
        color: #111827;
        background: rgba(255, 255, 255, 0.9);
      }

      .service-centre-table th:nth-child(1),
      .service-centre-table td:nth-child(1) {
        min-width: 240px;
        white-space: nowrap;
      }

      .service-centre-table th:nth-child(2),
      .service-centre-table td:nth-child(2) {
        min-width: 120px;
      }

      .service-centre-table th:nth-child(3),
      .service-centre-table td:nth-child(3) {
        min-width: 115px;
      }

      .service-centre-table th:nth-child(4),
      .service-centre-table td:nth-child(4) {
        min-width: 300px;
      }

      .service-centre-table th:nth-child(8),
      .service-centre-table td:nth-child(8) {
        min-width: 130px;
      }

      .service-centre-table th:nth-child(9),
      .service-centre-table td:nth-child(9) {
        min-width: 118px;
      }

      .service-centre-table th:nth-child(10),
      .service-centre-table td:nth-child(10) {
        min-width: 96px;
      }

      .service-centre-table th:nth-child(11),
      .service-centre-table td:nth-child(11) {
        min-width: 66px;
      }

      .service-centre-table th:nth-child(12),
      .service-centre-table td:nth-child(12) {
        min-width: 58px;
        text-align: center;
      }

      .service-centre-completed-col {
        width: 64px;
        min-width: 64px !important;
        max-width: 64px;
        text-align: center;
      }

      .service-centre-reminder-cell {
        text-align: center !important;
        vertical-align: middle;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      .service-centre-table thead th:nth-child(11) {
        text-align: center;
        padding-left: 6px;
        padding-right: 6px;
      }

      .service-centre-table thead th:nth-child(10),
      .service-centre-table thead th:nth-child(12),
      .service-centre-table tbody td:nth-child(10),
      .service-centre-table tbody td:nth-child(12) {
        text-align: center;
      }

      .service-centre-reminder-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #facc15;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto !important;
      }

      .service-centre-reminder-btn svg {
        width: 18px;
        height: 18px;
        display: block;
      }

      .service-centre-reminder-btn svg path {
        fill: currentColor;
      }

      .service-centre-reminder-btn:hover {
        color: #eab308;
      }

      .service-centre-completed-cell {
        text-align: center;
      }

      .service-centre-delete-cell {
        text-align: center;
      }

      .service-centre-delete-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(248, 113, 113, 0.72);
        border-radius: 8px;
        background: rgba(185, 28, 28, 0.18);
        color: #ef4444;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.02rem;
        line-height: 1;
      }

      .service-centre-delete-btn:hover {
        color: #fee2e2;
        border-color: rgba(252, 165, 165, 0.9);
        background: rgba(185, 28, 28, 0.44);
      }

      .service-centre-completed-checkbox {
        width: 14px;
        height: 14px;
        accent-color: #16a34a;
        cursor: pointer;
      }

      .service-centre-table tbody tr.service-centre-row--completed td {
        background: #bbf7d0 !important;
      }

      .service-centre-table tbody tr.service-centre-row--completed:hover td {
        background: #86efac !important;
      }

      .service-centre-table tbody tr.service-centre-row--completed .service-centre-customer-link {
        color: #14532d !important;
      }

      .service-centre-table th:last-child,
      .service-centre-table td:last-child {
        border-right: 0;
      }

      .service-centre-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #e2e8f0 !important;
        color: #0f172a !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.2);
        border-right: 1px solid rgba(15, 23, 42, 0.14);
        font-size: 0.75rem;
        text-transform: none;
        letter-spacing: 0.01em;
      }

      #serviceCentrePage .service-centre-table tbody tr[data-open-service-customer] {
        cursor: pointer;
      }

      #serviceCentrePage .service-centre-table tbody tr[data-open-service-customer]:hover td {
        background: #e2e8f0 !important;
      }

      .customer-service-due-table .service-centre-table tbody tr[data-open-service-customer] {
        cursor: default;
      }

      .service-centre-input {
        width: 100%;
        min-width: 120px;
        border: 1px solid rgba(15, 23, 42, 0.22);
        background: #ffffff;
        color: #111827;
        padding: 6px 8px;
        font: inherit;
        font-size: 0.78rem;
      }

      .service-centre-customer-link {
        width: auto;
        height: auto;
        display: inline-block;
        color: #0f172a;
        text-decoration: none;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        font: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        cursor: pointer;
      }

      .service-centre-customer-link:hover {
        color: #1d4ed8;
        text-decoration: underline;
      }

      .service-centre-tenant-link {
        width: auto;
        height: auto;
        display: inline-block;
        color: inherit;
        text-decoration: none;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        font: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        cursor: pointer;
      }

      .service-centre-tenant-link:hover {
        color: #1d4ed8;
        text-decoration: none;
      }

      .service-centre-phone-with-icon {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .service-centre-tenant-contact-wrap {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .service-centre-phone-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border: 1px solid rgba(22, 163, 74, 0.34);
        background: rgba(240, 253, 244, 0.95);
        color: #166534;
        flex: 0 0 auto;
      }

      .service-centre-phone-icon svg {
        width: 12px;
        height: 12px;
      }

      .service-centre-phone-call-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #166534;
        text-decoration: none;
        cursor: pointer;
      }

      .service-centre-phone-call-link:hover {
        color: #14532d;
      }

      .service-centre-input.amount {
        min-width: 92px;
      }

      .service-centre-month {
        font-weight: 600;
        color: #334155;
      }

      .service-centre-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 84px;
        padding: 4px 7px;
        border: 1px solid rgba(15, 23, 42, 0.2);
        background: #e2e8f0;
        color: #0f172a;
        font-size: 0.72rem;
        font-weight: 700;
      }

      .service-centre-status.overdue {
        background: #fee2e2;
        border-color: #f87171;
        color: #b91c1c;
      }

      .service-centre-status.coming-up {
        background: #fef9c3;
        border-color: #fde68a;
        color: #854d0e;
      }

      .service-centre-status.up-to-date {
        background: #dcfce7;
        border-color: #4ade80;
        color: #166534;
      }

      .service-centre-status.completed {
        background: #dcfce7;
        border-color: #4ade80;
        color: #166534;
      }

      .service-centre-status.due-today {
        background: #ffedd5;
        border-color: #fdba74;
        color: #c2410c;
      }

      .service-centre-status.not-set {
        background: #e5e7eb;
        border-color: #cbd5e1;
        color: #475569;
      }

      .service-centre-empty {
        margin: 0;
        color: var(--text);
        font-size: 0.84rem;
      }

      .settings-section-title {
        margin: 0;
        font-size: 0.92rem;
        font-weight: 700;
      }

      .settings-help {
        margin: 0;
        color: #d1d5db;
        font-size: 0.82rem;
      }

      .settings-theme-details {
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.04);
        padding: 8px 10px;
      }

      .settings-theme-details summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: var(--text);
        font-size: 0.98rem;
        font-weight: 800;
        letter-spacing: 0.02em;
      }

      .settings-theme-details summary::-webkit-details-marker {
        display: none;
      }

      .settings-theme-details summary::after {
        content: "▶";
        color: var(--muted);
        font-size: 0.78rem;
        transition: transform 0.18s ease;
      }

      .settings-theme-details[open] summary::after {
        transform: rotate(90deg);
      }

      .settings-danger-zone-details {
        border-color: rgba(248, 113, 113, 0.38);
        background: rgba(127, 29, 29, 0.14);
      }

      .settings-erase-backup-label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 0;
        font-size: 0.84rem;
        color: var(--text);
        line-height: 1.35;
        cursor: pointer;
      }

      .settings-erase-backup-label input {
        margin: 2px 0 0;
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .settings-erase-business-data-btn {
        justify-self: start;
      }

      .support-retention-heading {
        margin: 18px 0 8px;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text);
      }

      .support-retention-list .support-retention-ul {
        margin: 0;
        padding-left: 1.25rem;
        font-size: 0.88rem;
        line-height: 1.55;
        color: var(--text);
      }

      .support-retention-list .support-retention-ul li {
        margin-bottom: 6px;
      }

      /* Accounts + Tools: primary action buttons match Company Details → Remove logo (.btn compact) */
      #settingsPage .btn.settings-panel-action-btn,
      #toolsPage .btn.settings-panel-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.78rem;
        line-height: 1.25;
        font-weight: 600;
        border-radius: 10px;
        min-width: 0;
        width: auto;
        max-width: 100%;
        margin-bottom: 0;
        border: 1px solid var(--menu-yellow-border);
        border-bottom-width: 1px;
        background: var(--menu-yellow-soft);
        color: var(--menu-yellow-text);
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }

      #settingsPage .btn.settings-panel-action-btn:hover,
      #toolsPage .btn.settings-panel-action-btn:hover {
        background: var(--menu-yellow-soft-strong);
        border-color: var(--menu-yellow-border);
        color: var(--menu-yellow-text);
      }

      #settingsPage .btn.settings-panel-action-btn.settings-panel-action-btn--danger,
      #toolsPage .btn.settings-panel-action-btn.settings-panel-action-btn--danger {
        border-color: rgba(252, 165, 165, 0.55);
        background: rgba(185, 28, 28, 0.38);
        color: #fecaca;
      }

      #settingsPage .btn.settings-panel-action-btn.settings-panel-action-btn--danger:hover,
      #toolsPage .btn.settings-panel-action-btn.settings-panel-action-btn--danger:hover {
        background: rgba(220, 38, 38, 0.52);
        border-color: rgba(254, 202, 202, 0.72);
        color: #fff;
      }

      #settingsPage .btn.settings-panel-action-btn.settings-panel-action-btn--block,
      #toolsPage .btn.settings-panel-action-btn.settings-panel-action-btn--block {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
      }

      body[data-theme="light"] #settingsPage .btn.settings-panel-action-btn:not(.settings-panel-action-btn--danger),
      body[data-theme="light"] #toolsPage .btn.settings-panel-action-btn:not(.settings-panel-action-btn--danger) {
        color: #111827;
        border-color: #94a3b8;
        background: #f8fafc;
      }

      body[data-theme="light"] #settingsPage .btn.settings-panel-action-btn:not(.settings-panel-action-btn--danger):hover,
      body[data-theme="light"] #toolsPage .btn.settings-panel-action-btn:not(.settings-panel-action-btn--danger):hover {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(37, 99, 235, 0.48);
        color: #111827;
      }

      .settings-theme-content {
        margin-top: 10px;
        display: grid;
        gap: 10px;
      }

      .company-details-content {
        gap: 0;
        width: min(100%, 46rem);
        max-width: 46rem;
      }

      .company-details-ch-key-row {
        margin-top: 10px;
      }

      .company-details-ch-key-help {
        margin-top: 6px;
      }

      .company-details-groq-key-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }

      .company-details-groq-key-row .form-input {
        flex: 1;
        min-width: min(100%, 12rem);
      }

      .settings-groq-key-saved-note {
        margin-top: 6px;
        margin-bottom: 0;
        color: #86efac;
        font-weight: 600;
      }

      body[data-theme="light"] .settings-groq-key-saved-note {
        color: #166534;
      }

      /*
        Section bodies are CSS grids; items default to justify-self: stretch, so they
        visually fill the row even when max-width is set. Pin width + start-align.
      */
      .company-details-field {
        min-width: 0;
        justify-self: start;
        box-sizing: border-box;
      }

      .company-details-field--short {
        width: min(100%, 18rem);
        max-width: 18rem;
      }

      .company-details-field--line {
        width: min(100%, 30rem);
        max-width: 30rem;
      }

      /* Message templates (Accounts): full-width fields inside company-details sections */
      .company-details-field.message-template-field.company-details-field--line {
        width: min(100%, 46rem);
        max-width: 46rem;
      }

      .company-details-field.message-template-field .form-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: block;
      }

      /* In-panel subsection titles (Message templates, Quote & invoice templates) */
      .message-templates-secondary-heading {
        margin: 0 0 10px;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }

      .settings-theme-details--communication-templates .settings-theme-content > .message-templates-secondary-heading:first-of-type {
        margin-top: 16px;
      }

      body[data-theme="light"] .message-templates-secondary-heading {
        color: #64748b;
      }

      .app-settings-payment-links-section {
        margin-top: 16px;
      }

      .app-settings-cis-fields {
        margin-top: 4px;
        /* One width for rate + UTR: fits longest CIS option (“0% (gross payment status)”) without full panel stretch */
        --app-settings-cis-control-width-ch: 34;
      }

      .app-settings-cis-fields .app-settings-cis-compact {
        display: block;
        width: min(100%, calc(var(--app-settings-cis-control-width-ch) * 1ch));
        max-width: 100%;
        box-sizing: border-box;
      }

      .quote-cis-panel {
        margin: 10px 0 4px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        background: rgba(255, 255, 255, 0.04);
      }

      .quote-cis-panel--modal-foot {
        margin: 14px 0 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
      }

      body[data-theme="light"] .quote-cis-panel--modal-foot {
        border-top-color: #e2e8f0;
      }

      .quote-cis-panel.quote-cis-panel--inline {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .quote-cis-panel--modal-foot.quote-cis-panel--inline {
        margin: 14px 0 10px;
        padding: 12px 14px;
        border: 1px solid rgba(148, 163, 184, 0.32);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
      }

      body[data-theme="light"] .quote-cis-panel--modal-foot.quote-cis-panel--inline {
        border-color: #e2e8f0;
        background: rgba(248, 250, 252, 0.98);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
      }

      .quote-cis-panel.quote-cis-panel--quote-rate {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .quote-cis-panel--modal-foot.quote-cis-panel--quote-rate {
        margin: 14px 0 10px;
        padding: 12px 14px;
        border: 1px solid rgba(148, 163, 184, 0.32);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
      }

      body[data-theme="light"] .quote-cis-panel--modal-foot.quote-cis-panel--quote-rate {
        border-color: #e2e8f0;
        background: rgba(248, 250, 252, 0.98);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
      }

      .quote-cis-panel-rate-summary {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 20px;
        width: 100%;
      }

      .quote-cis-panel-rate-summary .quote-cis-inline__rate {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 0 0 auto;
        min-width: 7.5rem;
      }

      .quote-cis-panel-summary-text {
        flex: 1 1 14rem;
        min-width: 0;
        margin: 0 !important;
        padding: 1.1rem 0 0;
        font-size: 0.78rem !important;
        line-height: 1.45;
        color: var(--muted);
        text-align: left;
      }

      .quote-cis-panel-rate-summary .quote-cis-rate-select {
        grid-column: unset;
        grid-row: unset;
        width: 100% !important;
        max-width: 10.5rem;
      }

      .quote-cis-inline {
        display: grid;
        grid-template-columns: minmax(7.5rem, 10.5rem) minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 18px;
        row-gap: 6px;
        width: 100%;
        box-sizing: border-box;
        align-items: start;
      }

      .quote-cis-inline__rate {
        display: contents;
      }

      .quote-cis-inline__rate-label {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0.02em;
        color: var(--muted);
        line-height: 1.25;
      }

      .quote-cis-rate-select {
        grid-column: 1;
        grid-row: 2;
        width: 100% !important;
        min-width: 0;
        max-width: 10.5rem;
        margin: 0 !important;
        padding: 7px 10px !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        min-height: 2.125rem;
        height: auto;
        box-sizing: border-box;
        border-radius: 8px;
      }

      .quote-cis-inline__right {
        grid-column: 2;
        grid-row: 1 / -1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 16px;
        min-width: 0;
      }

      .quote-cis-inline__summary {
        flex: 1 1 12rem;
        min-width: 0;
        margin: 0 !important;
        padding: 0;
        align-self: start;
        font-size: 0.78rem !important;
        line-height: 1.45;
        color: var(--muted);
        text-align: left;
      }

      .quote-cis-materials-aside {
        flex: 0 0 auto;
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        display: flex;
        flex-direction: column;
        gap: 4px;
        box-sizing: border-box;
      }

      .quote-cis-materials-label {
        margin: 0;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--muted);
        line-height: 1.2;
      }

      .quote-cis-materials-input {
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        text-align: right;
        box-sizing: border-box;
        border-radius: 8px;
      }

      .quote-cis-materials-bracket {
        margin: 0;
        font-size: 0.62rem;
        line-height: 1.3;
        color: var(--muted);
        opacity: 0.9;
      }

      @media (max-width: 420px) {
        .quote-cis-inline {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
        }

        .quote-cis-inline__rate-label {
          grid-column: 1;
          grid-row: 1;
        }

        .quote-cis-rate-select {
          grid-column: 1;
          grid-row: 2;
          max-width: 100%;
        }

        .quote-cis-inline__right {
          grid-column: 1;
          grid-row: 3;
          flex-direction: column;
          align-items: stretch;
        }

        .quote-cis-inline__summary {
          flex: 1 1 auto;
        }

        .quote-cis-materials-aside {
          width: 100%;
          max-width: none;
        }
      }

      .quote-cis-panel .field-label {
        margin-bottom: 4px;
      }

      .quote-cis-summary {
        margin: 8px 0 0;
        font-size: 0.78rem;
        line-height: 1.4;
        color: var(--muted);
        min-height: 1.2em;
      }

      body[data-theme="light"] .quote-cis-panel {
        border-color: #cbd5e1;
        background: rgba(248, 250, 252, 0.9);
      }

      .qd-line-cis-utr {
        margin: 4px 0 0;
        font-size: 0.82rem;
        color: #475569;
      }

      .qd-totals-cis {
        font-size: 0.88rem;
        color: #334155;
      }

      .qd-totals-cis-net {
        font-weight: 700;
      }

      .qd-cis-footnote {
        margin: 8px 0 0;
        font-size: 0.72rem;
        line-height: 1.35;
        color: #64748b;
      }

      .app-settings-cloud-send-block {
        margin-top: 22px;
      }

      .message-templates-quote-invoice-block {
        margin-top: 14px;
        padding-top: 0;
      }

      .message-templates-unified-footer {
        margin-top: 18px;
      }

      .company-details-field--signature {
        width: min(100%, 26rem);
        max-width: 26rem;
      }

      /* Same two-column track as phone row: signature = column 1 only (= company phone width) */
      #settingsPage .company-details-contact-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
        width: min(100%, 36rem);
        max-width: 36rem;
        justify-items: stretch;
      }

      #settingsPage .company-details-contact-body > .phone-row {
        grid-column: 1 / -1;
        gap: 12px;
      }

      #settingsPage .company-details-contact-body .field-label {
        margin: 0 0 12px;
      }

      #settingsPage .company-details-contact-body > .company-details-field--signature {
        grid-column: 1;
        min-width: 0;
        width: 100%;
        max-width: none;
      }

      .company-details-content .phone-row,
      .company-details-content .address-row {
        justify-self: start;
        width: min(100%, 36rem);
        max-width: 36rem;
        box-sizing: border-box;
      }

      /* Town / city + county + postcode: one row (three columns on wide screens) */
      #settingsPage .company-details-content .phone-row.company-details-address-local-row {
        width: min(100%, 36rem);
        max-width: 36rem;
      }

      #settingsPage .company-details-address-local-row .company-details-postcode-cell.postcode-field {
        width: 14ch;
        min-width: 14ch;
        max-width: 14ch;
        box-sizing: border-box;
      }

      #settingsPage .company-details-address-local-row .company-details-postcode-cell .form-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .company-details-content .phone-row.phone-row-three {
        width: min(100%, 38rem);
        max-width: 38rem;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.55fr) minmax(0, 0.85fr);
      }

      #settingsPage .company-details-content .phone-row.phone-row-three.company-details-address-local-row {
        width: min(100%, 36rem);
        max-width: 36rem;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 14ch;
      }

      .company-details-content .postcode-country-row.postcode-only-row {
        justify-self: start;
        width: min(100%, 18rem);
        max-width: 18rem;
        box-sizing: border-box;
      }

      .company-details-section {
        margin-bottom: 14px;
        padding: 14px 14px 16px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.42);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }

      .company-details-section:last-of-type {
        margin-bottom: 0;
      }

      /* Message templates: collapsible section boxes (<details> + <summary>) */
      details.company-details-section--collapsible > summary.company-details-section-summary {
        margin: 0;
        padding: 0 0 10px 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.25);
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text);
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        user-select: none;
      }

      details.company-details-section--collapsible > summary.company-details-section-summary::-webkit-details-marker {
        display: none;
      }

      details.company-details-section--collapsible > summary.company-details-section-summary::marker {
        content: "";
        display: none;
      }

      details.company-details-section--collapsible > summary.company-details-section-summary::before {
        content: none;
        display: none;
      }

      /* Single chevron on the right (native marker hidden above) */
      details.company-details-section--collapsible > summary.company-details-section-summary::after {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        flex-shrink: 0;
        opacity: 0.55;
        margin-top: 1px;
        margin-left: auto;
      }

      details.company-details-section--collapsible[open] > summary.company-details-section-summary::after {
        transform: rotate(45deg);
        margin-top: 2px;
      }

      .company-details-collapsible-body {
        margin-top: 12px;
        display: grid;
        gap: 12px;
      }

      .company-details-collapsible-body > .company-details-section-lead {
        margin: 0;
      }

      details.company-details-section--collapsible > summary.company-details-section-summary:focus-visible {
        outline: 2px solid rgba(96, 165, 250, 0.85);
        outline-offset: 3px;
        border-radius: 4px;
      }

      .company-details-section-title {
        margin: 0 0 6px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.25);
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text);
      }

      .company-details-section-lead {
        margin: 0 0 12px;
        font-size: 0.78rem;
        line-height: 1.5;
        color: var(--muted);
      }

      .company-details-section-lead code {
        font-size: 0.74em;
        padding: 1px 4px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .company-details-section-body {
        display: grid;
        gap: 12px;
      }

      .company-details-footer {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid rgba(148, 163, 184, 0.3);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .company-details-footer-hint {
        margin: 0;
        font-size: 0.74rem;
        color: var(--muted);
        max-width: 36rem;
      }

      .company-details-logo-pair-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        width: min(100%, 36rem);
        max-width: 36rem;
        justify-self: start;
        box-sizing: border-box;
      }

      @media (max-width: 520px) {
        .company-details-logo-pair-row {
          grid-template-columns: 1fr;
        }
      }

      .company-details-logo-pair-row .company-details-logo-block {
        width: 100%;
        max-width: none;
        min-width: 0;
      }

      .company-details-logo-block {
        box-sizing: border-box;
        border: 1px dashed rgba(148, 163, 184, 0.4);
        background: rgba(255, 255, 255, 0.04);
        border-radius: 10px;
        padding: 12px;
      }

      .company-details-section-header {
        margin-top: 8px;
      }

      .company-details-hint {
        margin: 0 0 8px;
        font-size: 0.82rem;
        color: var(--muted);
      }

      .company-details-logo-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        flex-wrap: wrap;
      }

      .company-details-logo-preview {
        max-height: 56px;
        max-width: 220px;
        object-fit: contain;
        border: 1px solid rgba(148, 163, 184, 0.35);
        padding: 4px;
        background: #fff;
      }

      .template-layout-grid {
        display: grid;
        gap: 10px;
      }

      .template-layout-card {
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.05);
        padding: 8px;
      }

      .template-layout-title {
        margin: 0 0 8px;
        font-size: 0.82rem;
        font-weight: 700;
        color: #f3f4f6;
      }

      .template-layout-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 6px;
      }

      .template-layout-item {
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.08);
        color: #f3f4f6;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: grab;
        user-select: none;
      }

      .template-layout-item:active {
        cursor: grabbing;
      }

      .template-layout-item.is-dragging {
        opacity: 0.6;
      }

      .template-layout-handle {
        color: #9ca3af;
        font-size: 0.8rem;
        line-height: 1;
      }

      .template-layout-item.is-drop-target {
        border-color: var(--menu-yellow-border);
        background: var(--menu-yellow-soft-strong);
      }

      body[data-theme="light"] .template-layout-card {
        border: 1px solid rgba(15, 23, 42, 0.15);
        background: rgba(255, 255, 255, 0.85);
      }

      body[data-theme="light"] .template-layout-title,
      body[data-theme="light"] .template-layout-item {
        color: #0f172a;
      }

      body[data-theme="light"] .template-layout-item {
        border: 1px solid rgba(15, 23, 42, 0.15);
        background: rgba(255, 255, 255, 0.9);
      }

      .template-visual-editor-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 1400;
      }

      .template-visual-editor-backdrop.show {
        opacity: 1;
        pointer-events: auto;
      }

      .template-visual-editor-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.98);
        width: min(1220px, calc(100vw - 24px));
        height: min(860px, calc(100vh - 24px));
        z-index: 1410;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(15, 23, 42, 0.95);
        color: #f8fafc;
        display: none;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
      }

      .template-visual-editor-modal.show {
        display: flex;
        transform: translate(-50%, -50%) scale(1);
      }

      .template-visual-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
      }

      .template-visual-toolbar-title {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
      }

      .template-visual-toolbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .template-visual-body {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
      }

      .template-visual-preview-wrap {
        background: #0f172a;
        border-right: 1px solid rgba(255, 255, 255, 0.14);
        min-height: 0;
        overflow: auto;
        padding: 10px;
      }

      .template-visual-preview-frame {
        width: 100%;
        height: 100%;
        min-height: 680px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: #ffffff;
      }

      .template-visual-controls {
        min-height: 0;
        overflow: auto;
        padding: 10px;
        display: grid;
        gap: 10px;
      }

      .template-visual-controls .template-layout-card {
        background: rgba(255, 255, 255, 0.04);
      }

      body[data-theme="light"] .template-visual-editor-modal {
        border: 1px solid rgba(15, 23, 42, 0.2);
        background: rgba(248, 250, 252, 0.98);
        color: #0f172a;
      }

      body[data-theme="light"] .template-visual-toolbar {
        border-bottom: 1px solid rgba(15, 23, 42, 0.15);
      }

      body[data-theme="light"] .template-visual-preview-wrap {
        background: #e5e7eb;
        border-right: 1px solid rgba(15, 23, 42, 0.15);
      }

      .theme-option-list {
        display: grid;
        gap: 8px;
      }

      .theme-option-btn {
        width: 100%;
        border: 1px solid var(--menu-yellow-border);
        border-radius: 10px;
        background: var(--menu-yellow-soft);
        color: var(--menu-yellow-text);
        padding: 8px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        text-align: left;
        cursor: pointer;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.25;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }

      .theme-option-btn:hover {
        background: var(--menu-yellow-soft-strong);
        border-color: var(--menu-yellow-border);
        color: var(--menu-yellow-text);
      }

      .theme-option-btn.active {
        border-color: var(--menu-yellow-border);
        background: var(--menu-yellow-soft-strong);
        color: var(--menu-yellow-text);
      }

      .theme-option-label {
        font-size: 0.78rem;
        font-weight: 600;
      }

      .theme-option-swatches {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .theme-option-swatch {
        width: 14px;
        height: 14px;
        border: 1px solid rgba(255, 255, 255, 0.38);
      }

      /* Light theme readability hardening */
      body[data-theme="light"] {
        color: #111827;
      }

      body[data-theme="light"] .sidebar {
        background: rgba(255, 255, 255, 0.9);
        border-right-color: rgba(15, 23, 42, 0.14);
      }

      body[data-theme="light"] .nav-title {
        color: #475569;
        background: transparent;
      }

      body[data-theme="light"] .nav-collapsible-toggle:hover {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(37, 99, 235, 0.48);
        color: #111827;
      }

      body[data-theme="light"] .nav-item {
        color: #1f2937;
        background: transparent;
        border-color: transparent;
      }

      body[data-theme="light"] .nav-item:hover {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(37, 99, 235, 0.48);
        color: #111827;
      }

      body[data-theme="light"] .nav-item.active {
        background: rgba(59, 130, 246, 0.32);
        border-color: rgba(30, 64, 175, 0.52);
        color: #111827;
      }

      body[data-theme="light"] .sidebar-company-logo-btn {
        border-color: rgba(15, 23, 42, 0.2);
        background: rgba(15, 23, 42, 0.04);
      }

      body[data-theme="light"] .sidebar-company-logo-btn:hover {
        color: #111827;
      }

      body[data-theme="light"] .sidebar-company-logo-btn.sidebar-company-logo-btn--has-logo {
        border: none;
        background: transparent;
      }

      body[data-theme="light"] .sidebar-company-logo-btn.sidebar-company-logo-btn--has-logo:hover {
        background: rgba(59, 130, 246, 0.1);
        color: inherit;
      }

      body[data-theme="light"] .sidebar-company-logo-btn.sidebar-company-logo-btn--name-only:hover {
        background: rgba(59, 130, 246, 0.1);
        color: inherit;
      }

      body[data-theme="light"] .sidebar-company-name-display {
        color: #111827;
      }

      body[data-theme="light"] .sidebar-company-logo-placeholder {
        color: #64748b;
      }

      body[data-theme="light"] .sidebar-firefly-brand {
        border-top-color: rgba(15, 23, 42, 0.12);
      }

      body[data-theme="light"] #jobsPage .jobs-portal-job-shell .jobs-portal-list-customer-name {
        border-bottom-color: rgba(15, 23, 42, 0.14);
      }

      body[data-theme="light"] .drawer-panel.view-panel .customer-workspace-customer-name {
        border-bottom-color: rgba(15, 23, 42, 0.14);
        color: #0f172a;
      }

      body[data-theme="light"]
        .drawer-panel.view-panel
        .customer-profile-job-row-head
        > :is(.customer-profile-job-name-btn, .customer-profile-job-name-static) {
        border-bottom-color: rgba(15, 23, 42, 0.14);
      }

      body[data-theme="light"] .panel,
      body[data-theme="light"] .drawer-panel,
      body[data-theme="light"] .workspace-panel-body,
      body[data-theme="light"] .diary-surface,
      body[data-theme="light"] .customer-panel,
      body[data-theme="light"] .settings-panel {
        color: #111827;
      }

      body[data-theme="light"] .company-details-section {
        background: #f1f5f9;
        border-color: #cbd5e1;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
      }

      body[data-theme="light"] .company-details-section-title,
      body[data-theme="light"] .company-details-section-summary {
        border-bottom-color: #cbd5e1;
        color: #0f172a;
      }

      body[data-theme="light"] details.company-details-section--collapsible > summary.company-details-section-summary:focus-visible {
        outline-color: rgba(37, 99, 235, 0.55);
      }

      body[data-theme="light"] .company-details-section-lead {
        color: #64748b;
      }

      body[data-theme="light"] .company-details-section-lead code {
        background: #e2e8f0;
        border-color: #cbd5e1;
        color: #334155;
      }

      body[data-theme="light"] .company-details-footer {
        border-top-color: #cbd5e1;
      }

      body[data-theme="light"] .company-details-footer-hint {
        color: #64748b;
      }

      body[data-theme="light"] .company-details-logo-block {
        background: #ffffff;
        border-color: #94a3b8;
      }

      /* Light theme: stronger panel boundaries + glass edge for clear window limits. */
      body[data-theme="light"] .panel,
      body[data-theme="light"] .drawer-panel,
      body[data-theme="light"] .workspace-panel,
      body[data-theme="light"] .workspace-panel-body,
      body[data-theme="light"] .diary-surface,
      body[data-theme="light"] .customer-panel,
      body[data-theme="light"] .settings-panel,
      body[data-theme="light"] .job-modal,
      body[data-theme="light"] .settings-theme-details,
      body[data-theme="light"] .customer-day-jobs-table,
      body[data-theme="light"] .customer-service-due-table-wrap,
      body[data-theme="light"] #jobsPage .jobs-portal-frame,
      body[data-theme="light"] #jobsPage .jobs-portal-db-table,
      body[data-theme="light"] #jobsPage .jobs-portal-active-list {
        border-color: rgba(15, 23, 42, 0.26) !important;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.56),
          0 8px 20px rgba(15, 23, 42, 0.1) !important;
      }

      /*
       * Customer Base (light): outer columns = single border + drop shadow only (no inset ring).
       * Inner surfaces match Today’s jobs / Services glass edge.
       */
      body[data-theme="light"] #customerPage > aside.customer-panel.panel,
      body[data-theme="light"] #customerPage > section.workspace-panel.panel.customer-jobs-snapshot-host {
        border-color: rgba(15, 23, 42, 0.22) !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1) !important;
      }

      body[data-theme="light"] #customerPage .customer-list,
      body[data-theme="light"] #customerPage .customer-day-jobs-panel,
      body[data-theme="light"] #customerPage .customer-service-due-panel {
        border-color: rgba(15, 23, 42, 0.22) !important;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.56),
          0 8px 20px rgba(15, 23, 42, 0.08) !important;
      }

      body[data-theme="light"] .jobs-portal-modal-window .jobs-portal-nested-page,
      body[data-theme="light"] .jobs-portal-modal-window .jobs-portal-detail-card--solo.job-list,
      body[data-theme="light"] .jobs-portal-modal-window .job-timeline-details.jobs-portal-timeline {
        border-color: rgba(15, 23, 42, 0.28) !important;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.62),
          0 10px 24px rgba(15, 23, 42, 0.14) !important;
      }

      body[data-theme="light"] .customer-search {
        background: #ffffff;
        border: 1px solid #94a3b8;
        color: #111827;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
      }

      body[data-theme="light"] .customer-search::placeholder {
        color: #64748b;
      }

      body[data-theme="light"] .customer-jobs-snapshot-stack .customer-today-jobs-panel .customer-day-jobs-head {
        border-bottom-color: rgba(15, 23, 42, 0.14);
      }

      body[data-theme="light"] .workspace-tabs {
        background: #dbeafe;
        border-bottom-color: #93c5fd;
      }

      body[data-theme="light"] .workspace-tab {
        background: #f8fafc;
        color: #334155;
        border-color: #cbd5e1;
      }

      body[data-theme="light"] .workspace-tab:hover {
        background: rgba(59, 130, 246, 0.22);
        border-color: rgba(37, 99, 235, 0.46);
        color: #111827;
      }

      body[data-theme="light"] .workspace-tab.active {
        background: rgba(59, 130, 246, 0.34);
        border-color: rgba(30, 64, 175, 0.52);
        color: #111827;
      }

      body[data-theme="light"] .drawer-panel.view-panel .tab-inline-action-btn {
        background: #334155 !important;
        color: #ffffff !important;
        border-color: #475569 !important;
      }

      body[data-theme="light"] .shell-datetime {
        color: #0f172a;
      }

      body[data-theme="light"] .shell-datetime-date {
        color: #475569;
      }

      body[data-theme="light"] .shell-datetime-icon {
        color: #1d4ed8;
      }

      body[data-theme="light"] .shell-ask-ai-btn {
        color: #2563eb;
      }

      body[data-theme="light"] .shell-ask-ai-btn:hover {
        background: rgba(37, 99, 235, 0.12);
        color: #1d4ed8;
      }

      body[data-theme="light"] .shell-ask-ai-icon {
        color: #1d4ed8;
      }

      body[data-theme="light"] .drawer-panel.view-panel .tab-inline-action-btn:hover {
        background:
          linear-gradient(to bottom, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.18)),
          #334155 !important;
        border-color: rgba(37, 99, 235, 0.46) !important;
        color: #ffffff !important;
      }

      body[data-theme="light"] .service-tab-add-btn {
        background: #334155 !important;
        color: #ffffff !important;
        border-color: #475569 !important;
      }

      body[data-theme="light"] .service-tab-add-btn:hover {
        background:
          linear-gradient(to bottom, rgba(34, 197, 94, 0.28), rgba(34, 197, 94, 0.28)),
          #334155 !important;
        border-color: rgba(74, 222, 128, 0.55) !important;
        color: #ffffff !important;
      }

      body[data-theme="light"] .diary-view-btn {
        background: #f8fafc;
        color: #334155;
      }

      body[data-theme="light"] .diary-view-btn:hover,
      body[data-theme="light"] .diary-nav-btn:hover,
      body[data-theme="light"] .btn:hover {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(37, 99, 235, 0.48);
        color: #111827;
      }

      body[data-theme="light"] .diary-view-btn.active {
        background: rgba(59, 130, 246, 0.34);
        color: #111827;
      }

      body[data-theme="light"] .btn,
      body[data-theme="light"] .diary-nav-btn {
        color: #111827;
        border-color: #94a3b8;
        background: #f8fafc;
      }

      body[data-theme="light"] .settings-help,
      body[data-theme="light"] .job-picker-note,
      body[data-theme="light"] .job-picker-empty,
      body[data-theme="light"] .share-help-text,
      body[data-theme="light"] .lookup-hint,
      body[data-theme="light"] .field-label {
        color: #334155;
      }

      /* Light theme: default text contrast pass for small labels/secondary copy. */
      body[data-theme="light"] .info-label,
      body[data-theme="light"] .info-value,
      body[data-theme="light"] .section-header,
      body[data-theme="light"] .customer-day-jobs-tail-note,
      body[data-theme="light"] .customer-profile-tab-empty-note,
      body[data-theme="light"] .jobs-portal-empty-msg,
      body[data-theme="light"] .jobs-portal-search-empty,
      body[data-theme="light"] .job-timeline-item-meta {
        color: #334155 !important;
      }

      body[data-theme="light"] .job-timeline-item-text,
      body[data-theme="light"] .customer-profile-job-name-btn,
      body[data-theme="light"] .customer-profile-job-name-static,
      body[data-theme="light"] .jobs-portal-list-customer-name,
      body[data-theme="light"] .jobs-portal-list-job-title,
      body[data-theme="light"] .jobs-portal-drilldown-customer-link,
      body[data-theme="light"] .jobs-portal-drilldown-job-title {
        color: #0f172a !important;
      }

      body[data-theme="light"] .timeline-doc-compact-label,
      body[data-theme="light"] .timeline-doc-compact-sep {
        color: #0f172a !important;
      }

      body[data-theme="light"] .timeline-doc-doc-ref,
      body[data-theme="light"] .timeline-doc-compact-job {
        color: #64748b !important;
      }

      body[data-theme="light"] .theme-option-btn {
        color: #111827;
        background: #f8fafc;
        border-color: #94a3b8;
      }

      body[data-theme="light"] .theme-option-btn:hover {
        background: rgba(59, 130, 246, 0.16);
        border-color: rgba(37, 99, 235, 0.48);
        color: #111827;
      }

      body[data-theme="light"] .theme-option-btn.active {
        background: rgba(59, 130, 246, 0.26);
        border-color: rgba(37, 99, 235, 0.52);
        color: #111827;
      }

      body[data-theme="light"] .settings-theme-details {
        border-color: rgba(15, 23, 42, 0.16);
        background: rgba(255, 255, 255, 0.86);
      }

      body[data-theme="light"] .settings-theme-details summary {
        color: #111827;
      }

      body[data-theme="light"] .settings-danger-zone-details {
        border-color: rgba(185, 28, 28, 0.35);
        background: rgba(254, 226, 226, 0.55);
      }

      body[data-theme="light"] .settings-erase-backup-label {
        color: #111827;
      }

      body[data-theme="light"] .settings-erase-business-data-btn {
        border-color: rgba(185, 28, 28, 0.45);
        background: rgba(254, 226, 226, 0.95);
        color: #991b1b;
      }

      body[data-theme="light"] .settings-erase-business-data-btn:hover {
        background: rgba(254, 202, 202, 0.98);
        border-color: rgba(153, 27, 27, 0.5);
        color: #7f1d1d;
      }

      body[data-theme="light"] #settingsPage .btn.settings-panel-action-btn.settings-panel-action-btn--danger:not(.settings-erase-business-data-btn),
      body[data-theme="light"] #toolsPage .btn.settings-panel-action-btn.settings-panel-action-btn--danger {
        border-color: rgba(185, 28, 28, 0.45);
        background: rgba(254, 226, 226, 0.95);
        color: #991b1b;
      }

      body[data-theme="light"] #settingsPage .btn.settings-panel-action-btn.settings-panel-action-btn--danger:not(.settings-erase-business-data-btn):hover,
      body[data-theme="light"] #toolsPage .btn.settings-panel-action-btn.settings-panel-action-btn--danger:hover {
        background: rgba(254, 202, 202, 0.98);
        border-color: rgba(153, 27, 27, 0.5);
        color: #7f1d1d;
      }

      body[data-theme="light"] .job-modal {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(15, 23, 42, 0.18);
      }

      body[data-theme="light"] .job-modal .drawer-title,
      body[data-theme="light"] .job-modal-body {
        color: #111827;
      }

      body[data-theme="light"] .job-picker-item {
        color: #111827;
        background: rgba(248, 250, 252, 0.95);
        border-color: rgba(15, 23, 42, 0.16);
      }

      body[data-theme="light"] #addCustomerBtn,
      body[data-theme="light"] #serviceCentreAddBtn,
      body[data-theme="light"] #addDiaryBookingBtn {
        color: var(--app-add-glyph-on-light);
      }

      body[data-theme="light"] #addCustomerBtn:hover,
      body[data-theme="light"] #serviceCentreAddBtn:hover,
      body[data-theme="light"] #addDiaryBookingBtn:hover {
        color: var(--app-add-glyph-on-light-hover);
      }

      body[data-theme="default"] #addCustomerBtn,
      body[data-theme="default"] #serviceCentreAddBtn {
        color: var(--app-add-glyph);
      }

      body[data-theme="default"] #addCustomerBtn:hover,
      body[data-theme="default"] #serviceCentreAddBtn:hover {
        color: var(--app-add-glyph-hover);
      }

      /* Customer Base: + controls white at rest, green on hover (Customers header + embedded Jobs). */
      #customerPage #addCustomerBtn,
      #jobsShellPage #jobsPage .jobs-portal-add-job-btn {
        color: #ffffff;
      }

      #customerPage #addCustomerBtn:hover,
      #jobsShellPage #jobsPage .jobs-portal-add-job-btn:hover {
        color: var(--app-add-glyph);
      }

      body[data-theme="light"] #customerPage #addCustomerBtn,
      body[data-theme="light"] #jobsShellPage #jobsPage .jobs-portal-add-job-btn {
        color: #64748b;
      }

      body[data-theme="light"] #customerPage #addCustomerBtn:hover,
      body[data-theme="light"] #jobsShellPage #jobsPage .jobs-portal-add-job-btn:hover {
        color: var(--app-add-glyph-on-light);
      }

      /* Jobs shell page: full main column width; inner #jobsPage is the jobs portal UI. */
      .jobs-shell-page {
        position: relative;
        min-height: calc(100vh - 56px);
        min-height: calc(100dvh - 56px);
        max-height: calc(100dvh - 56px);
        padding-top: 48px;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }

      .jobs-shell-page #jobsPage.settings-page {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-top: 0;
        padding-left: clamp(8px, 2vw, 18px);
        padding-right: clamp(8px, 2vw, 18px);
        padding-bottom: 14px;
        box-sizing: border-box;
      }

      .jobs-shell-page #jobsPage .settings-panel.panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .diary-page {
        min-height: calc(100vh - 56px);
        display: grid;
        gap: 14px;
        align-content: start;
        position: relative;
        padding-top: 48px;
      }

      .diary-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        position: relative;
      }

      .diary-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* .diary-title: layout shared with .customer-page-title (see shell strip rule) */

      .diary-view-switch {
        display: inline-flex;
        flex-wrap: wrap;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: var(--ui-radius) !important;
        overflow: hidden;
        max-width: min(100%, 520px);
      }

      /* Inner segments stay square; outer switch uses --ui-radius (beats global `button` rounding) */
      .diary-view-switch .diary-view-btn {
        border-radius: 0 !important;
      }

      .diary-view-btn {
        border: 0;
        border-radius: 0 !important;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        font: inherit;
        font-size: 0.83rem;
        font-weight: 600;
        cursor: pointer;
      }

      .diary-view-btn.active {
        background: var(--menu-yellow-soft-strong);
        color: var(--menu-yellow-text);
      }

      .diary-view-btn:hover {
        background: var(--menu-yellow-soft);
        color: var(--menu-yellow-text);
      }

      .diary-nav-btn {
        border: 1px solid var(--menu-yellow-border);
        border-radius: var(--ui-radius);
        padding: 7px 10px;
        background: var(--menu-yellow-soft);
        color: var(--menu-yellow-text);
        font: inherit;
        font-size: 0.82rem;
        cursor: pointer;
      }

      .diary-nav-btn:hover {
        background: var(--menu-yellow-soft);
        border-color: var(--menu-yellow-border);
        color: var(--menu-yellow-text);
      }

      .diary-nav-btn:disabled {
        cursor: not-allowed;
        opacity: 0.45;
      }

      .diary-range {
        font-size: 0.9rem;
        color: #111827;
      }

      .diary-booking-mode-hint {
        margin-top: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #92400e;
        background: #fef3c7;
        border: 1px solid #f59e0b;
        border-radius: var(--ui-radius);
        padding: 6px 9px;
      }

      #addCustomerBtn {
        margin-left: auto;
        border: 0;
        background: transparent;
        color: var(--app-add-glyph);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        font-weight: 600;
        line-height: 1;
        transform: translateY(-1px);
        padding: 0 2px;
        min-width: 0;
        height: auto;
      }

      #addCustomerBtn .add-customer-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-size: 2rem;
        font-weight: 700;
        line-height: 0.9;
        color: currentColor;
      }

      #addCustomerBtn:hover {
        color: var(--app-add-glyph-hover);
        background: transparent;
      }

      #serviceCentreAddBtn {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--app-add-glyph);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        min-width: 0;
        height: auto;
      }

      #serviceCentreAddBtn .service-centre-add-icon {
        width: 32px;
        height: 32px;
        display: block;
        color: currentColor;
      }

      #serviceCentreAddBtn .service-centre-add-glyph {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-size: 2rem;
        font-weight: 700;
        line-height: 0.9;
        color: currentColor;
      }

      #serviceCentreAddBtn:hover {
        color: var(--app-add-glyph-hover);
        background: transparent !important;
        box-shadow: none !important;
      }

      .diary-surface {
        background: var(--diary-surface-bg);
        border: 1px solid rgba(15, 23, 42, 0.32);
        border-radius: 0;
        padding: 14px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      .diary-list {
        display: grid;
        gap: 10px;
      }

      .diary-day-group {
        display: grid;
        gap: 8px;
      }

      .diary-day-label {
        margin: 0;
        color: #a5b4fc;
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .diary-item {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 10px;
        padding: 10px 11px;
        background: rgba(255, 255, 255, 0.03);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .diary-item-main {
        min-width: 0;
      }

      .diary-item-title {
        margin: 0;
        font-size: 0.88rem;
        font-weight: 700;
      }

      .diary-item-meta {
        margin: 3px 0 0;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .calendar-board {
        margin-top: 10px;
        border: 1px solid rgba(15, 23, 42, 0.32);
        border-radius: 0;
        overflow: hidden;
        background: #ffffff;
      }

      .calendar-weekdays {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        border-bottom: 1px solid rgba(15, 23, 42, 0.26);
      }

      .calendar-weekday {
        padding: 8px 10px;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #111827;
        background: #f8fafc;
        border-right: 1px solid rgba(15, 23, 42, 0.26);
      }

      .calendar-weekday:last-child {
        border-right: 0;
      }

      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        min-height: 600px;
      }

      .calendar-grid.week-view {
        min-height: 420px;
      }

      .calendar-grid:not(.week-view) .calendar-cell {
        min-height: 156px;
        grid-template-rows: auto 1fr auto;
      }

      .calendar-grid:not(.week-view) .calendar-events {
        gap: 2px;
        align-content: start;
        min-height: 0;
      }

      .calendar-cell {
        border-right: 1px solid rgba(15, 23, 42, 0.22);
        border-bottom: 1px solid rgba(15, 23, 42, 0.22);
        min-height: 110px;
        padding: 6px;
        display: grid;
        gap: 6px;
        align-content: start;
        background: #ffffff;
      }

      .calendar-cell[data-diary-date] {
        cursor: pointer;
      }

      .calendar-cell[data-diary-date]:hover {
        background: #f1f5f9;
      }

      .calendar-cell.other-month {
        background: #f8fafc;
      }

      .calendar-cell.today {
        background: #eef2ff;
      }

      .calendar-cell.past-day {
        background: #e5e7eb;
      }

      .calendar-cell.other-month.past-day {
        background: #dfe3ea;
      }

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

      .calendar-day-num {
        font-size: 0.78rem;
        font-weight: 700;
        color: #111827;
        border-radius: 999px;
        min-width: 22px;
        text-align: center;
        line-height: 22px;
        padding: 0 4px;
      }

      .calendar-cell.today .calendar-day-num {
        background: rgba(129, 140, 248, 0.35);
      }

      .calendar-events {
        display: grid;
        gap: 5px;
      }

      .calendar-event {
        border: 0;
        border-radius: 0 !important;
        padding: 1px 0;
        background: transparent !important;
        box-shadow: none !important;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        cursor: pointer;
      }

      .calendar-event::before {
        content: "\2022";
        flex: 0 0 auto;
        color: var(--calendar-event-accent, #4f46e5);
        font-size: 0.9rem;
        line-height: 1;
      }

      .calendar-event.dragging {
        opacity: 0.5;
      }

      .calendar-event-time {
        font-size: 0.68rem;
        color: #334155;
        font-weight: 700;
        flex: 0 0 auto;
      }

      .calendar-event-title {
        margin: 0;
        font-size: 0.72rem;
        font-weight: 700;
        color: #111827;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .calendar-event-meta {
        margin: 1px 0 0;
        font-size: 0.66rem;
        color: #475569;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .calendar-more-btn {
        width: 100%;
        border: 1px solid rgba(148, 163, 184, 0.3);
        background: rgba(241, 245, 249, 0.9);
        color: #0f172a;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 5px 8px;
        text-align: center;
        cursor: pointer;
      }

      .calendar-more-btn:hover,
      .calendar-more-btn:focus-visible {
        background: #e2e8f0;
        outline: none;
      }

      .calendar-day-board {
        margin-top: 10px;
        border: 1px solid rgba(15, 23, 42, 0.42);
        border-radius: 0;
        overflow: hidden;
        background: #ffffff;
      }

      .calendar-day-board.past-day {
        background: #e5e7eb;
      }

      .diary-day-jobs-panel {
        margin-top: 10px;
        border: 1px solid rgba(15, 23, 42, 0.32);
        border-radius: 0;
        background: #ffffff;
        overflow: hidden;
      }

      .diary-day-jobs-header {
        display: grid;
        grid-template-columns: 130px minmax(140px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(320px, 2fr);
        border-bottom: 1px solid rgba(15, 23, 42, 0.26);
        background: #e2e8f0;
      }

      .diary-day-jobs-header span {
        padding: 8px 10px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #0f172a;
        border-right: 1px solid rgba(15, 23, 42, 0.2);
      }

      .diary-day-jobs-header span:last-child {
        border-right: 0;
      }

      .diary-day-jobs-list {
        max-height: 320px;
        overflow-y: auto;
      }

      .diary-day-jobs-row {
        display: grid;
        grid-template-columns: 130px minmax(140px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(320px, 2fr);
        border-bottom: 1px solid rgba(15, 23, 42, 0.16);
      }

      .diary-day-jobs-row:last-child {
        border-bottom: 0;
      }

      .diary-day-jobs-cell {
        padding: 8px 10px;
        font-size: 0.8rem;
        color: #111827;
        border-right: 1px solid rgba(15, 23, 42, 0.12);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .diary-day-jobs-cell:last-child {
        border-right: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
      }

      .diary-day-jobs-empty {
        padding: 12px;
        font-size: 0.82rem;
        font-weight: 600;
        color: #475569;
        text-align: center;
      }

      /* Year view: 12 mini months */
      .diary-year-board {
        margin-top: 10px;
      }

      .diary-year-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
      }

      .year-mini-month-block {
        border: 1px solid rgba(15, 23, 42, 0.22);
        border-radius: 10px;
        background: #ffffff;
        padding: 8px 8px 10px;
        overflow: hidden;
      }

      .year-mini-month-title {
        font-size: 0.78rem;
        font-weight: 800;
        color: #0f172a;
        text-align: center;
        margin-bottom: 6px;
      }

      .year-mini-weekdays {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0;
        margin-bottom: 2px;
      }

      .year-mini-wd {
        font-size: 0.58rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748b;
        text-align: center;
      }

      .year-mini-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 1px;
      }

      .year-mini-cell {
        min-height: 26px;
        padding: 2px 1px;
        font-size: 0.65rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 1px;
        cursor: pointer;
        border-radius: 4px;
        color: #0f172a;
        background: #f8fafc;
      }

      .year-mini-cell:hover {
        background: #e0e7ff;
      }

      .year-mini-cell.other-month {
        opacity: 0.28;
        pointer-events: none;
      }

      .year-mini-cell.today {
        outline: 2px solid rgba(129, 140, 248, 0.85);
        outline-offset: -1px;
        background: #eef2ff;
      }

      .year-mini-daynum {
        font-weight: 700;
        line-height: 1.1;
      }

      .year-mini-count {
        font-size: 0.55rem;
        font-weight: 800;
        color: #4338ca;
        background: rgba(129, 140, 248, 0.22);
        border-radius: 4px;
        padding: 0 3px;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Agenda: all appointments, grouped by date */
      .diary-agenda-board {
        margin-top: 10px;
        display: grid;
        gap: 14px;
        max-height: min(70vh, 720px);
        overflow-y: auto;
        padding-right: 4px;
      }

      .diary-agenda-empty {
        margin: 20px 0;
        text-align: center;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--muted);
      }

      .diary-agenda-day-rows {
        display: grid;
        gap: 8px;
      }

      .diary-agenda-event.calendar-event {
        position: static;
        width: 100%;
        min-height: 0;
        cursor: pointer;
        text-align: left;
        margin: 0;
      }

      .diary-agenda-row {
        display: grid;
        grid-template-columns: minmax(100px, 22%) minmax(0, 1fr);
        gap: 12px;
        align-items: start;
      }

      .diary-agenda-time-col {
        font-size: 0.78rem;
        font-weight: 800;
        color: #312e81;
        white-space: nowrap;
      }

      .diary-agenda-main-col {
        min-width: 0;
      }

      .diary-agenda-primary-line {
        margin: 0;
      }

      .diary-agenda-notes-line {
        margin-top: 4px;
      }

      .day-slot {
        min-height: 56px;
        padding: 7px 10px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 8px;
        align-items: start;
        position: relative;
        overflow: visible;
      }

      .day-slot[data-diary-time] {
        cursor: pointer;
      }

      .day-slot[data-diary-time]:hover {
        background: #f8fafc;
      }

      .day-slot:last-child {
        border-bottom: 0;
      }

      .day-slot-label {
        font-size: 0.72rem;
        color: #111827;
        font-weight: 600;
        line-height: 1.6;
      }

      .day-slot-events {
        display: block;
        min-height: 38px;
        position: relative;
        overflow: visible;
      }

      .calendar-event.day-span-event {
        box-shadow: none !important;
        min-height: 58px;
        padding: 3px 0;
        background: transparent !important;
        align-items: flex-start;
      }

      .calendar-event.day-span-event .calendar-event-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
      }

      .calendar-event.day-span-event.overbooked {
        border-width: 0;
      }

      .drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 30;
      }

      .drawer-backdrop.open {
        opacity: 1;
        pointer-events: auto;
      }

      .drawer-panel {
        position: fixed;
        top: 4px;
        left: 50%;
        right: auto;
        width: min(560px, calc(100vw - 24px));
        height: calc(100vh - 8px);
        max-height: none;
        background: var(--drawer-bg);
        border: 1px solid var(--border);
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transform: translate(-50%, -28px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.24s ease, opacity 0.2s ease;
        z-index: 31;
        display: flex;
        flex-direction: column;
      }

      .drawer-panel.open {
        transform: translate(-50%, 0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      /* Above .jobs-portal-modal-backdrop (40): edit/add customer or supplier must not sit under the job timeline window. */
      #customerDrawerBackdrop.drawer-backdrop,
      #supplierDrawerBackdrop.drawer-backdrop {
        z-index: 55;
      }

      .drawer-backdrop.property-backdrop {
        z-index: 47;
      }

      .drawer-panel.property-panel {
        z-index: 48;
      }

      .drawer-panel.property-panel.property-panel--editing #propertySubmitBtn {
        background: #16a34a !important;
        border-color: #15803d !important;
        color: #ffffff !important;
      }

      .drawer-panel.property-panel.property-panel--editing #propertySubmitBtn:hover {
        background: #15803d !important;
        border-color: #166534 !important;
        color: #ffffff !important;
      }

      .drawer-backdrop.view-backdrop {
        z-index: 45;
      }

      .drawer-panel.view-panel {
        z-index: 46;
        width: min(748px, calc(100vw - 24px));
        overflow: hidden !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        background: var(--view-panel-bg);
      }

      /* Customer + supplier profiles: wider than default view-panel so workspace tab labels stay readable */
      #customerViewDrawer.drawer-panel.view-panel,
      #supplierViewDrawer.drawer-panel.view-panel {
        width: min(900px, calc(100vw - 24px));
      }

      #supplierViewDrawer .customer-view-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
      }

      /* Same pattern as customer profile: name, tab strip, then one scrolling panel for the active tab. */
      #supplierViewDrawer .supplier-profile-workspace-tabs {
        flex-shrink: 0;
        margin-top: 4px;
      }

      #supplierViewDrawer .supplier-profile-tabpanel {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        margin-top: 0;
        padding-top: 10px !important;
      }

      #supplierViewDrawer .supplier-profile-doc-search-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
        margin: 0;
        padding: 10px 0;
        width: 100%;
        box-sizing: border-box;
      }

      #supplierViewDrawer .supplier-profile-doc-search-input-wrap {
        flex: 0 1 auto;
        width: 100%;
        max-width: min(var(--customer-panel-width), 100%);
        min-width: 0;
      }

      #supplierViewDrawer .supplier-profile-doc-search-hint {
        flex: 1 1 200px;
        margin: 0;
        min-width: min(100%, 12rem);
        font-size: 0.78rem;
        line-height: 1.35;
        color: var(--muted, #94a3b8);
      }

      /* Match Customer Base list search (same width band as “Search suppliers…”) */
      #supplierViewDrawer .supplier-profile-doc-search-row .supplier-profile-doc-date-filter.customer-search {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        font-size: 0.82rem;
        padding: 8px 10px 8px 31px;
        background-position: 10px center;
      }

      /* Narrow drawer: compact grids so rows stay inside the panel */
      #supplierViewDrawer .supplier-profile-po-database,
      #supplierViewDrawer .supplier-profile-so-database {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      #supplierViewDrawer .supplier-profile-po-database .service-cp12-db-row {
        grid-template-columns:
          minmax(76px, 92px) minmax(0, 1fr) minmax(0, 1.05fr) minmax(56px, 64px);
      }

      #supplierViewDrawer .supplier-profile-so-database .service-cp12-db-row {
        grid-template-columns:
          minmax(76px, 92px) minmax(0, 1fr) minmax(0, 1.05fr) minmax(56px, 64px);
      }

      #supplierViewDrawer .supplier-profile-po-database .supplier-profile-doc-actions-header,
      #supplierViewDrawer .supplier-profile-so-database .supplier-profile-doc-actions-header {
        font-size: 0.68rem;
        line-height: 1.15;
        text-align: center;
        padding-left: 4px;
        padding-right: 4px;
      }

      #supplierViewDrawer .supplier-profile-po-database .supplier-profile-doc-address-cell,
      #supplierViewDrawer .supplier-profile-so-database .supplier-profile-doc-address-cell {
        word-break: break-word;
        white-space: normal;
        min-width: 0;
      }

      #supplierViewDrawer .supplier-profile-po-database .service-cp12-db-cell,
      #supplierViewDrawer .supplier-profile-so-database .service-cp12-db-cell {
        padding: 7px 6px;
        font-size: 0.76rem;
      }

      #supplierViewDrawer .supplier-profile-po-database .service-cp12-actions-cell,
      #supplierViewDrawer .supplier-profile-so-database .service-cp12-actions-cell {
        justify-content: center;
        padding-left: 4px;
        padding-right: 4px;
      }

      #supplierViewDrawer .supplier-profile-po-database .service-cp12-delete-btn,
      #supplierViewDrawer .supplier-profile-so-database .service-cp12-delete-btn {
        min-width: 28px;
        width: 28px;
        height: 28px;
        padding: 0;
        flex-shrink: 0;
      }

      #supplierViewDrawer .supplier-profile-po-database .service-cert-open-btn,
      #supplierViewDrawer .supplier-profile-so-database .service-cert-open-btn {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        box-sizing: border-box;
      }

      #serviceOrderPickJobModal .service-order-pick-job-body .job-picker-note + .service-order-pick-field {
        margin-top: 12px;
      }

      #serviceOrderPickJobModal .service-order-pick-job-body .service-order-pick-field + .service-order-pick-field {
        margin-top: 12px;
      }

      #serviceOrderPickJobModal .service-order-pick-actions {
        margin-top: 18px;
        justify-content: flex-end;
        gap: 8px;
      }

      #supplierViewDrawer .supplier-profile-company-doc-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid rgba(148, 163, 184, 0.28);
      }

      /* Purchase orders — dark amber bar, white label (matches doc emphasis) */
      #supplierViewDrawer .supplier-profile-add-po-btn {
        cursor: pointer;
        font-family: inherit;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
        padding: 0 8px;
        border-radius: 7px;
        font-size: 0.72rem;
        line-height: 1.2;
        font-weight: 600;
        box-sizing: border-box;
        background: linear-gradient(180deg, rgba(146, 64, 14, 0.95) 0%, rgba(120, 53, 15, 0.98) 100%);
        border: 1px solid rgba(69, 26, 3, 0.95);
        color: #ffffff;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
      }

      #supplierViewDrawer .supplier-profile-add-po-btn:hover {
        background: linear-gradient(180deg, rgba(180, 83, 9, 0.98) 0%, rgba(146, 64, 14, 1) 100%);
        border-color: rgba(67, 20, 7, 0.98);
        color: #ffffff;
      }

      #supplierViewDrawer .supplier-profile-add-po-btn:focus-visible {
        outline: 2px solid rgba(251, 191, 36, 0.9);
        outline-offset: 2px;
      }

      body[data-theme="light"] #supplierViewDrawer .supplier-profile-add-po-btn {
        background: linear-gradient(180deg, rgba(146, 64, 14, 0.96) 0%, rgba(120, 53, 15, 0.99) 100%);
        border-color: rgba(69, 26, 3, 0.9);
        color: #ffffff;
      }

      body[data-theme="light"] #supplierViewDrawer .supplier-profile-add-po-btn:hover {
        background: linear-gradient(180deg, rgba(180, 83, 9, 0.98) 0%, rgba(146, 64, 14, 1) 100%);
        border-color: rgba(67, 20, 7, 0.95);
        color: #ffffff;
      }

      #supplierViewDrawer .supplier-profile-company-doc-actions .supplier-profile-add-po-btn,
      #supplierViewDrawer .supplier-profile-company-doc-actions .supplier-profile-add-so-btn {
        height: auto;
        min-height: 32px;
        padding: 6px 12px;
        max-width: 100%;
      }

      /* Blue — same footprint as Add Purchase Order */
      #supplierViewDrawer .supplier-profile-add-so-btn {
        cursor: pointer;
        font-family: inherit;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
        padding: 0 8px;
        border-radius: 7px;
        font-size: 0.72rem;
        line-height: 1.2;
        font-weight: 600;
        box-sizing: border-box;
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.45) 0%, rgba(37, 99, 235, 0.58) 100%);
        border: 1px solid rgba(29, 78, 216, 0.75);
        color: #dbeafe;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
      }

      #supplierViewDrawer .supplier-profile-add-so-btn:hover {
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.6) 0%, rgba(37, 99, 235, 0.72) 100%);
        border-color: rgba(30, 64, 175, 0.9);
        color: #eff6ff;
      }

      #supplierViewDrawer .supplier-profile-add-so-btn:focus-visible {
        outline: 2px solid rgba(96, 165, 250, 0.9);
        outline-offset: 2px;
      }

      body[data-theme="light"] #supplierViewDrawer .supplier-profile-add-so-btn {
        background: linear-gradient(180deg, rgba(96, 165, 250, 0.5) 0%, rgba(59, 130, 246, 0.65) 100%);
        border-color: rgba(37, 99, 235, 0.65);
        color: #1e3a8a;
      }

      body[data-theme="light"] #supplierViewDrawer .supplier-profile-add-so-btn:hover {
        background: linear-gradient(180deg, rgba(96, 165, 250, 0.7) 0%, rgba(59, 130, 246, 0.82) 100%);
        border-color: rgba(29, 78, 216, 0.8);
        color: #1e3a8a;
      }

      .drawer-panel.view-panel::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      .drawer-head {
        padding: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .drawer-title {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
      }

      .drawer-body {
        padding: 16px;
        display: grid;
        gap: 12px;
        overflow: auto;
      }

      /*
        Add / edit customer or supplier: full viewport height, flush right, slides in from the right.
        Form scrolls inside so the header stays put (no whole-panel scroll).
      */
      #customerDrawer.drawer-panel,
      #supplierDrawer.drawer-panel {
        top: 0;
        bottom: auto;
        left: auto;
        right: 0;
        width: min(560px, 100%);
        height: 100vh;
        height: 100dvh;
        max-height: none;
        overflow: hidden;
        transform: translateX(calc(100% + 8px));
        border-radius: var(--ui-radius) 0 0 var(--ui-radius);
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-sizing: border-box;
        z-index: 56;
      }

      #customerDrawer.drawer-panel.open,
      #supplierDrawer.drawer-panel.open {
        transform: translateX(0);
      }

      /*
        Add property: same placement and slide-in as add customer (right edge, not centered).
        Form scrolls inside like the customer form.
      */
      #propertyDrawer.drawer-panel {
        top: 0;
        bottom: auto;
        left: auto;
        right: 0;
        width: min(560px, 100%);
        height: 100vh;
        height: 100dvh;
        max-height: none;
        overflow: hidden;
        transform: translateX(calc(100% + 8px));
        border-radius: var(--ui-radius) 0 0 var(--ui-radius);
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-sizing: border-box;
      }

      #propertyDrawer.drawer-panel.open {
        transform: translateX(0);
      }

      #customerDrawer.drawer-panel .drawer-head,
      #propertyDrawer.drawer-panel .drawer-head,
      #supplierDrawer.drawer-panel .drawer-head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--drawer-bg);
        flex-shrink: 0;
      }

      #customerDrawer.drawer-panel > form.drawer-body,
      #supplierDrawer.drawer-panel > form.drawer-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        align-content: start;
        grid-auto-rows: max-content;
      }

      #propertyDrawer.drawer-panel > form.drawer-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        align-content: start;
        grid-auto-rows: max-content;
      }

      .field-label {
        margin: 0 0 6px;
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      label.field-label {
        display: block;
        cursor: pointer;
      }

      .section-header {
        margin: 2px 0 0;
        padding-top: 4px;
        font-size: 0.86rem;
        font-weight: 700;
      }

      .drawer-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.12);
        border: 0;
        margin: 2px 0;
      }

      .additional-details {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: var(--ui-radius);
        background: rgba(255, 255, 255, 0.03);
        padding: 8px 10px;
      }

      .additional-details summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 0.86rem;
        font-weight: 700;
      }

      .additional-details summary:hover {
        color: #fef3c7;
      }

      .additional-details summary::-webkit-details-marker {
        display: none;
      }

      .summary-arrow {
        color: var(--muted);
        transition: transform 0.2s ease;
      }

      .additional-details[open] .summary-arrow {
        transform: rotate(90deg);
      }

      .additional-fields {
        margin-top: 10px;
        display: grid;
        gap: 10px;
      }

      .form-input {
        width: 100%;
        border: 1px solid rgba(15, 23, 42, 0.22);
        border-radius: 10px;
        padding: 8px 10px;
        background: #ffffff;
        color: #111827;
        font: inherit;
        font-size: 0.92rem;
      }

      .form-input::placeholder {
        color: #64748b;
      }

      .cp12-pressure-input {
        width: 72px;
        min-width: 72px;
        text-align: center;
      }

      .cp12-gas-rate-input {
        width: 72px;
        min-width: 72px;
        text-align: center;
      }

      .cp12-gas-rate-wrap {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .cp12-gas-rate-input-row {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .cp12-gas-rate-input-row .cp12-gas-rate-input {
        padding-right: 28px;
      }

      .cp12-gas-rate-input-row .gas-rate-open-icon-btn {
        position: absolute;
        right: 7px;
        top: 50%;
        transform: translateY(-50%);
        margin-bottom: 0;
        min-width: 0;
        width: 16px;
        height: 16px;
        padding: 0;
        border: 0 !important;
        border-radius: var(--ui-radius);
        background: transparent !important;
        box-shadow: none !important;
        color: #111827 !important;
      }

      .cp12-stack-left {
        display: grid;
        gap: 8px;
      }

      #cp12Section .cp12-appliance-flow-block {
        margin-top: 8px;
      }

      #cp12Section .cp12-gas-installation-block {
        margin-top: 8px;
        display: grid;
        gap: 12px;
        justify-items: center;
      }

      #cp12Section .cp12-gas-installation-row {
        width: 100%;
        text-align: center;
      }

      #cp12Section .cp12-gas-installation-row .field-label {
        text-align: center !important;
        text-transform: none !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        margin-bottom: 8px !important;
      }

      #cp12Section .cp12-gas-installation-actions {
        margin-top: 4px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }

      #cp12Section .cp12-gas-option-btn {
        min-width: 86px;
        width: auto;
        padding: 9px 14px;
        font-size: 0.86rem;
        font-weight: 700;
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid rgba(148, 163, 184, 0.9) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.9) !important;
        border-radius: var(--ui-radius) !important;
        margin-bottom: 0 !important;
      }

      #cp12Section .cp12-gas-option-btn:hover {
        background: #f8fafc !important;
        border-color: rgba(100, 116, 139, 0.95) !important;
        color: #0f172a !important;
      }

      #cp12Section .cp12-gas-option-btn.is-active-pass {
        background: #166534 !important;
        color: #ffffff !important;
        border-color: rgba(22, 101, 52, 0.75) !important;
      }

      #cp12Section .cp12-gas-option-btn.is-active-fail {
        background: #b91c1c !important;
        color: #ffffff !important;
        border-color: rgba(185, 28, 28, 0.75) !important;
      }

      #cp12Section .cp12-gas-option-btn.is-active-na {
        background: #166534 !important;
        color: #ffffff !important;
        border-color: rgba(22, 101, 52, 0.75) !important;
        transform: none;
        font-weight: 700;
      }

      #cp12Section .cp12-gas-option-btn.is-active-not-seen {
        background: #166534 !important;
        color: #ffffff !important;
        border-color: rgba(22, 101, 52, 0.75) !important;
      }

      #cp12Section .cp12-gas-option-btn.is-active-warning {
        background: #ca8a04 !important;
        color: #1c1917 !important;
        border-color: rgba(161, 98, 7, 0.9) !important;
      }

      #cp12Section .cp12-warning-category-actions {
        margin-top: 4px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
      }

      #cp12Section .cp12-warning-category-btn {
        min-width: 124px;
        background: #6b7280 !important;
        color: #ffffff !important;
        border-color: rgba(75, 85, 99, 0.75) !important;
      }

      #cp12Section .cp12-warning-appliance-card {
        margin-top: 8px;
        border: 1px solid rgba(15, 23, 42, 0.14);
        border-radius: 8px;
        padding: 10px;
        background: #f8fafc;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

      #cp12Section .cp12-warning-appliance-card .field-label {
        color: #0f172a !important;
        font-weight: 600;
      }

      #cp12Section .cp12-warning-appliance-card .form-input {
        color: #0f172a !important;
        background: #ffffff !important;
        border-color: rgba(15, 23, 42, 0.22) !important;
      }

      #cp12Section .cp12-warning-category-btn.is-active-ar {
        background: #ea580c !important;
        color: #ffffff !important;
        border-color: rgba(194, 65, 12, 0.82) !important;
      }

      #cp12Section .cp12-warning-category-btn.is-active-id {
        background: #b91c1c !important;
        color: #ffffff !important;
        border-color: rgba(153, 27, 27, 0.82) !important;
      }

      #cp12Section .cp12-defects-row {
        grid-template-columns: repeat(3, max-content) !important;
        justify-content: center;
        column-gap: 10px;
      }

      #cp12Section #cp12DeclarationSection .field-label {
        text-transform: none !important;
      }

      .cp12-stack-left .field-label {
        text-align: left !important;
      }

      .cp12-stack-left .cp12-pressure-input,
      .cp12-stack-left .cp12-gas-rate-input {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .cp12-stack-left .cp12-compact-select {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .cp12-signature-row {
        align-items: start !important;
      }

      .cp12-signature-preview {
        width: 100%;
        height: 38px;
        border: 1px solid rgba(15, 23, 42, 0.28);
        border-radius: var(--ui-radius);
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        cursor: crosshair;
        padding: 0;
      }

      .cp12-signature-preview-text {
        font-size: 0.78rem;
        color: #64748b;
        font-weight: 600;
      }

      .cp12-signature-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      /* Accounts ▸ Company Details: engineer default signature — box pad, not a thin line */
      #settingsPage #settingsEngineerSignatureBtn.settings-engineer-signature-preview {
        width: 100%;
        max-width: none;
        min-height: 88px;
        height: auto;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(148, 163, 184, 0.42);
        border-radius: 10px;
        box-sizing: border-box;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
      }

      body[data-theme="light"] #settingsPage #settingsEngineerSignatureBtn.settings-engineer-signature-preview {
        background: #f1f5f9;
        border-color: #cbd5e1;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
      }

      #settingsPage #settingsEngineerSignatureBtn.settings-engineer-signature-preview img {
        width: auto !important;
        max-width: 100%;
        max-height: 76px;
        height: auto !important;
        object-fit: contain;
        display: block;
        margin: 0 auto;
      }

      #settingsPage #settingsEngineerSignatureBtn.settings-engineer-signature-preview .cp12-signature-preview-text {
        text-align: center;
        line-height: 1.4;
        padding: 6px 4px;
      }

      #settingsPage .company-details-signature-inline-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 12px;
        width: 100%;
        min-width: 0;
      }

      #settingsPage .company-details-signature-inline-row .settings-engineer-signature-preview {
        flex: 1 1 auto;
        min-width: 0;
      }

      #settingsPage .company-details-signature-clear-btn,
      #settingsPage .company-details-logo-clear-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 0;
      }

      .cp12-signature-modal-pad {
        width: 100%;
        height: 260px;
        border: 1px solid rgba(15, 23, 42, 0.28);
        border-radius: var(--ui-radius);
        background: #ffffff;
        touch-action: none;
        cursor: crosshair;
      }

      .cp12-pressure-wrap {
        text-align: center;
      }

      .cp12-pressure-wrap .field-label {
        text-align: center;
      }

      .cp12-pressure-wrap .cp12-pressure-input {
        margin-left: auto;
        margin-right: auto;
      }

      .address-autocomplete {
        position: relative;
      }

      .company-field-with-search {
        display: flex;
        align-items: stretch;
        gap: 8px;
        width: 100%;
      }

      .company-field-with-search .form-input {
        flex: 1 1 auto;
        min-width: 0;
      }

      .company-ch-search-btn {
        flex: 0 0 40px;
        width: 40px;
        min-width: 40px;
        min-height: 38px;
        padding: 0;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--ui-radius);
        background: rgba(15, 23, 42, 0.55);
        color: #e2e8f0;
        cursor: pointer;
        box-sizing: border-box;
      }

      .company-ch-search-btn:hover {
        background: rgba(37, 99, 235, 0.35);
        border-color: rgba(96, 165, 250, 0.55);
        color: #f8fafc;
      }

      .company-ch-search-btn:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 1px;
      }

      .company-ch-search-icon {
        width: 18px;
        height: 18px;
        display: block;
      }

      body[data-theme="light"] .company-ch-search-btn {
        background: rgba(241, 245, 249, 0.95);
        border-color: rgba(15, 23, 42, 0.18);
        color: #334155;
      }

      body[data-theme="light"] .company-ch-search-btn:hover {
        background: rgba(219, 234, 254, 0.95);
        border-color: rgba(37, 99, 235, 0.45);
        color: #1e293b;
      }

      .address-suggestions {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        max-height: 220px;
        overflow: auto;
        border: 1px solid rgba(15, 23, 42, 0.2);
        border-radius: var(--ui-radius);
        background: #ffffff;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
        display: none;
        z-index: 50;
      }

      .address-suggestions.open {
        display: block;
      }

      .address-suggestion-btn {
        width: 100%;
        text-align: left;
        border: 0;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        background: transparent;
        color: #111827;
        padding: 9px 10px;
        font: inherit;
        font-size: 0.84rem;
        line-height: 1.45;
        cursor: pointer;
      }

      .address-suggestion-btn:last-child {
        border-bottom: 0;
      }

      .address-suggestion-btn--stacked {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
      }

      .address-suggestion-sub {
        display: block;
        font-size: 0.78rem;
        line-height: 1.35;
        color: #6b7280;
        font-weight: 400;
      }

      .address-suggestion-btn:hover {
        background: var(--form-select-highlight-soft);
      }

      .address-suggestion-btn:focus-visible {
        outline: 2px solid rgba(37, 99, 235, 0.45);
        outline-offset: -2px;
        background: var(--form-select-highlight-mid);
      }

      .lookup-hint {
        margin-top: 6px;
        font-size: 0.74rem;
        color: var(--muted);
      }

      .lookup-hint.warn {
        color: #facc15;
      }

      .lookup-hint.ok {
        color: #86efac;
      }

      .form-select {
        width: 100%;
        border: 1px solid rgba(15, 23, 42, 0.22);
        border-radius: 10px;
        padding: 8px 10px;
        background: #ffffff;
        color: #111827;
        font: inherit;
        font-size: 0.92rem;
      }

      .timeline-payment-allocate-select.timeline-payment-allocate-select--error {
        border-color: #dc2626;
        box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.28);
      }

      .form-input:disabled,
      .form-select:disabled {
        background: #f1f5f9;
        color: #64748b;
      }

      /* All form dropdowns: blue accent + blue option hover (Firefox; accent-color helps Chrome/Edge) */
      select,
      .form-select,
      .service-centre-month-select {
        accent-color: var(--form-select-accent);
      }

      select:focus-visible,
      .form-select:focus-visible,
      .service-centre-month-select:focus-visible {
        outline: 2px solid rgba(37, 99, 235, 0.42);
        outline-offset: 1px;
      }

      select option,
      .form-select option,
      .service-centre-month-select option {
        color: #111827;
        background-color: #ffffff;
      }

      select option:hover,
      select option:focus,
      select option:focus-visible,
      .form-select option:hover,
      .form-select option:focus,
      .form-select option:focus-visible,
      .service-centre-month-select option:hover,
      .service-centre-month-select option:focus,
      .service-centre-month-select option:focus-visible {
        background-color: var(--form-select-accent) !important;
        color: #ffffff !important;
      }

      select option:checked,
      .form-select option:checked,
      .service-centre-month-select option:checked {
        background-color: var(--form-select-highlight-soft) !important;
        color: #0f172a !important;
      }

      .name-row {
        display: grid;
        grid-template-columns: max-content minmax(10ch, 1fr) minmax(10ch, 1fr);
        gap: 10px;
        align-items: end;
      }

      .phone-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
      }

      .phone-row.phone-row-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      @media (max-width: 720px) {
        .phone-row.phone-row-three {
          grid-template-columns: 1fr;
        }
      }

      .title-field {
        width: 9ch;
        min-width: 9ch;
      }

      .drawer-actions {
        margin-top: 6px;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        flex-wrap: wrap;
      }

      #jobPickerActions.certificate-mode {
        width: 100%;
        justify-content: flex-end;
      }

      /* Select/dropdown mode: primary action first (Add to Job / Copy Quote), then Create new job, then Cancel */
      #jobPickerActions.job-picker-select-mode {
        justify-content: flex-end;
      }
      #jobPickerActions.job-picker-select-mode #skipJobPickerBtn {
        order: 1;
      }
      #jobPickerActions.job-picker-select-mode #addNewJobPickerBtn {
        order: 2;
      }
      #jobPickerActions.job-picker-select-mode #cancelJobPickerBtn {
        order: 3;
      }

      /* Generate -> Save to Job chooser button colors */
      #jobPickerActions.job-picker-select-mode #skipJobPickerBtn {
        border-color: var(--menu-yellow-border) !important;
        background: var(--menu-yellow-soft) !important;
        color: var(--menu-yellow-text) !important;
      }

      #jobPickerActions.job-picker-select-mode #skipJobPickerBtn:hover {
        border-color: var(--menu-yellow-border) !important;
        background: var(--menu-yellow-soft-strong) !important;
        color: var(--menu-yellow-text) !important;
      }

      #jobPickerActions.job-picker-select-mode #addNewJobPickerBtn {
        border-color: rgba(74, 222, 128, 0.85) !important;
        background: rgba(22, 163, 74, 0.24) !important;
        color: #dcfce7 !important;
      }

      #jobPickerActions.job-picker-select-mode #addNewJobPickerBtn:hover {
        border-color: rgba(134, 239, 172, 0.95) !important;
        background: rgba(22, 163, 74, 0.36) !important;
        color: #f0fdf4 !important;
      }

      .notes-input {
        min-height: 4.6em;
        resize: vertical;
      }

      .info-section {
        display: grid;
        gap: 8px;
      }

      .customer-profile-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .customer-info-card {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(15, 23, 42, 0.14);
        border-radius: 10px;
        padding: 12px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        color: #111827;
        position: relative;
      }

      .customer-info-card.full-span {
        grid-column: 1 / -1;
      }

      .customer-info-card .section-header {
        margin: -12px -12px 10px;
      }

      .customer-info-card .info-label {
        color: #64748b;
      }

      .customer-info-card .info-value {
        color: #111827;
      }

      .customer-info-card .info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .customer-info-card::before {
        content: none;
      }

      .customer-notes-value {
        margin: 0;
        color: #111827;
        line-height: 1.35;
        font-size: 0.84rem;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .customer-info-card.compact-notes .section-header {
        margin-bottom: 8px;
      }

      .customer-info-card.compact-notes .customer-notes-value {
        min-height: 3.2em;
      }

      .customer-tab-surface {
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, 0.18);
        border-radius: 10px;
        padding: 12px;
        color: #111827;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
      }

      .customer-tab-surface .section-header {
        color: #f8fafc;
        background: #121419;
        margin: -12px -12px 12px;
        padding: 9px 12px;
        border-radius: var(--ui-radius) var(--ui-radius) 0 0;
      }

      .customer-tab-surface .info-label {
        color: #64748b;
      }

      .customer-tab-surface .info-value {
        color: #111827;
      }

      .customer-tab-surface .drawer-divider {
        display: none;
      }

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

      .info-label {
        margin: 0;
        color: var(--muted);
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .info-value {
        margin: 2px 0 0;
        font-size: 0.88rem;
        min-height: 1.2em;
      }

      .workspace-tabs {
        display: flex;
        gap: 4px;
        overflow: hidden !important;
        padding: 8px 8px 0;
        align-items: flex-end;
        flex-wrap: nowrap;
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
        background: var(--workspace-tabs-bg);
      }

      .workspace-tab {
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-bottom: 0;
        /* Tab strip: curved top only; bottom edge square (flush with bar) */
        border-radius: 10px 10px 0 0;
        appearance: none;
        -webkit-appearance: none;
        background: rgba(255, 255, 255, 0.08);
        color: var(--text);
        padding: 9px 10px;
        font: inherit;
        font-size: 0.79rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        margin-bottom: -1px;
        flex: 1 1 0;
        text-align: center;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .workspace-tab.active {
        background: var(--menu-yellow-soft-strong);
        border-color: var(--menu-yellow-border);
        color: #fef3c7;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }

      .workspace-tab:hover {
        background: var(--menu-yellow-soft);
        border-color: var(--menu-yellow-border);
        color: var(--menu-yellow-text);
      }

      .workspace-panel-body {
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        padding: 14px;
        background: var(--workspace-body-bg);
        margin-top: 0;
        overflow: visible;
        max-height: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #111827;
      }

      .drawer-panel.view-panel .workspace-panel-body {
        background: var(--panel-bg);
        border-color: var(--border);
        color: #111827;
        box-shadow: none;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      /* Jobs / Archives: gutter matches .workspace-tabs (8px) so job blocks + timeline line up with tab / Add edges */
      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 8px !important;
        box-sizing: border-box;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel .job-timeline {
        gap: 14px;
      }

      /* Customer profile Jobs/Archives: same outer shell as Jobs page timeline/list */
      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel .job-node {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 8px;
        box-sizing: border-box;
        background: var(--panel-bg);
        border: 1px solid var(--border);
        border-radius: 10px !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
      }

      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel .job-item {
        width: 100%;
        max-width: none;
        margin: 0;
        position: relative;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 251, 255, 0.96) 55%, rgba(240, 245, 255, 0.96) 100%);
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: 10px !important;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
        padding-left: 13px;
      }

      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel .job-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 10px 0 0 10px;
        background: rgba(79, 70, 229, 0.18);
        pointer-events: none;
      }

      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel .job-item:hover {
        background:
          linear-gradient(135deg, rgba(238, 242, 255, 0.98) 0%, rgba(231, 237, 255, 0.98) 55%, rgba(224, 232, 255, 0.98) 100%);
        border-color: rgba(79, 70, 229, 0.4);
        box-shadow: 0 6px 14px rgba(79, 70, 229, 0.16);
        transform: translateY(-1px);
      }

      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel .job-item:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.16);
      }

      /* Customer Profile > Jobs tab cards (normal panel path): same left strip + hover highlight. */
      .drawer-panel.view-panel .customer-profile-jobs-tab .job-item.customer-profile-job-row {
        position: relative;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 251, 255, 0.96) 55%, rgba(240, 245, 255, 0.96) 100%);
        border: 1px solid rgba(15, 23, 42, 0.16);
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
        padding-left: 13px;
      }

      .drawer-panel.view-panel .customer-profile-jobs-tab .job-item.customer-profile-job-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 10px 0 0 10px;
        background: rgba(79, 70, 229, 0.18);
        pointer-events: none;
      }

      .drawer-panel.view-panel .customer-profile-jobs-tab .job-item.customer-profile-job-row:hover {
        background:
          linear-gradient(135deg, rgba(238, 242, 255, 0.98) 0%, rgba(231, 237, 255, 0.98) 55%, rgba(224, 232, 255, 0.98) 100%);
        border-color: rgba(79, 70, 229, 0.4);
        box-shadow: 0 6px 14px rgba(79, 70, 229, 0.16);
        transform: translateY(-1px);
      }

      .drawer-panel.view-panel .customer-profile-jobs-tab .job-item.customer-profile-job-row:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.16);
      }

      .drawer-panel.view-panel .workspace-tabs {
        background: transparent;
        border-bottom-color: transparent;
      }

      /* Customer tab (Primary/Additional Contact): no inner wrapper frame; use only outer panel border. */
      .drawer-panel.view-panel .customer-profile-grid {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-sizing: border-box;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
      }

      .drawer-panel.view-panel .property-list {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-sizing: border-box;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
      }

      .drawer-panel.view-panel .job-list {
        background: transparent;
        border: 0;
        padding: 0;
        box-shadow: none;
      }

      .drawer-panel.view-panel .customer-profile-jobs-rows {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
      }

      .drawer-panel.view-panel .customer-profile-job-row-head {
        margin-bottom: 6px;
      }

      /*
        Same separator as .customer-list-header (flat 1px line; square bottom edge so global
        `button { border-radius }` does not curve the underline).
      */
      .drawer-panel.view-panel .customer-profile-job-row-head > .customer-profile-job-name-btn,
      .drawer-panel.view-panel .customer-profile-job-row-head > .customer-profile-job-name-static {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 0 4px;
        padding: 0 0 6px;
        border: none !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.14) !important;
        border-radius: 0 !important;
        text-decoration: none;
        text-align: left;
      }

      .drawer-panel.view-panel .customer-profile-job-row-head > .customer-profile-job-name-btn:hover,
      .drawer-panel.view-panel .customer-profile-job-row-head > .customer-profile-job-name-btn:focus-visible {
        text-decoration: none;
      }

      #jobsPage .jobs-portal-job-shell .customer-profile-job-row-head {
        margin-bottom: 6px;
      }

      .drawer-panel.view-panel .customer-profile-job-name-btn,
      #jobsPage .jobs-portal-job-shell .customer-profile-job-name-btn {
        display: block;
        width: 100%;
        max-width: 100%;
        text-align: left;
        padding: 0;
        margin: 0 0 4px;
        border: none;
        background: none;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.25;
        cursor: pointer;
        text-decoration: underline;
        text-decoration-color: rgba(37, 99, 235, 0.4);
        text-underline-offset: 3px;
        -webkit-appearance: none;
        appearance: none;
      }

      #jobsPage .jobs-portal-job-shell .customer-profile-job-name-btn {
        margin-bottom: 0;
        text-decoration: none;
      }

      .drawer-panel.view-panel .customer-profile-job-name-btn:hover,
      .drawer-panel.view-panel .customer-profile-job-name-btn:focus-visible {
        color: #1d4ed8;
        text-decoration-color: rgba(29, 78, 216, 0.65);
      }

      #jobsPage .jobs-portal-job-shell .customer-profile-job-name-btn:hover,
      #jobsPage .jobs-portal-job-shell .customer-profile-job-name-btn:focus-visible {
        color: #1d4ed8;
        text-decoration: none;
      }

      .drawer-panel.view-panel .customer-profile-job-name-static,
      #jobsPage .jobs-portal-job-shell .customer-profile-job-name-static {
        display: block;
        font-size: 0.95rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 4px;
        line-height: 1.25;
      }

      #jobsPage .jobs-portal-job-shell .customer-profile-job-name-static {
        margin-bottom: 0;
      }

      .drawer-panel.view-panel .customer-profile-job-address,
      #jobsPage .jobs-portal-job-shell .customer-profile-job-address {
        margin: 0;
        font-size: 0.78rem;
        font-weight: 600;
        color: #64748b;
        line-height: 1.35;
      }

      /* Bookings tab: lone .job-timeline-list under .job-list (not inside <details>) */
      .drawer-panel.view-panel .job-list > .job-timeline-list {
        background: var(--container-surface-bg);
        border: 1px solid var(--container-surface-border);
        border-radius: var(--ui-radius);
        padding: 8px;
      }

      /* Timeline <details>: same light blue panel + border as main Jobs page .jobs-portal-timeline */
      .drawer-panel.view-panel .job-timeline-details.jobs-portal-timeline {
        display: block;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px !important;
        box-sizing: border-box;
        padding: 10px !important;
        background: #e8eef5 !important;
        border: 1px solid rgba(15, 23, 42, 0.3) !important;
        border-radius: var(--ui-radius) !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1) !important;
      }

      .drawer-panel.view-panel .job-timeline-details.jobs-portal-timeline .job-timeline-list {
        margin-top: 8px;
        padding: 8px 0 !important;
        background: transparent !important;
        border: 0 !important;
      }

      .drawer-panel.view-panel .job-timeline-details.jobs-portal-timeline .job-timeline-list::before {
        top: 8px;
        bottom: 8px;
        left: 7px;
        width: 3px;
        background: rgba(51, 65, 85, 0.45) !important;
        opacity: 1 !important;
      }

      .drawer-panel.view-panel .jobs-portal-caption-stack {
        align-items: flex-start;
        justify-content: flex-start;
        min-height: 0;
        margin-bottom: 0;
      }

      .drawer-panel.view-panel .jobs-portal-caption-stack .job-customer-name {
        width: auto;
        text-align: left;
      }

      .drawer-panel.view-panel .jobs-portal-job-title {
        width: 100%;
        margin-top: 0;
        text-align: left;
        text-transform: none;
      }

      .drawer-panel.view-panel .job-list .info-value {
        color: #cbd5e1;
      }

      /* Unified customer-profile tab empty state text (jobs/archives/etc.): lighter and consistently placed. */
      .drawer-panel.view-panel .customer-profile-tab-empty-note {
        margin: 0;
        padding: 10px 8px;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        color: #cbd5e1;
      }

      .customer-view-body {
        flex: 1 1 auto;
        display: block;
        padding: 14px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 14px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .customer-view-body::-webkit-scrollbar {
        display: none;
      }

      .drawer-panel.view-panel .customer-workspace-name-rule {
        margin: 0 0 12px;
        padding: 0;
        box-sizing: border-box;
      }

      /* Same rhythm and line weight as .customer-list-header */
      .drawer-panel.view-panel .customer-workspace-customer-name {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin: 0;
        padding: 0 0 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 1.05rem;
        font-weight: 800;
        color: #f8fafc;
        line-height: 1.25;
        letter-spacing: -0.02em;
      }

      .drawer-panel.view-panel .customer-workspace-customer-name-text {
        min-width: 0;
      }

      .drawer-panel.view-panel .customer-workspace-balance-due {
        color: #ef4444;
        font-size: 0.96rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .workspace-panel-body {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .workspace-panel-body::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      .drawer-panel.view-panel,
      .drawer-panel.view-panel * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
      }

      .drawer-panel.view-panel::-webkit-scrollbar,
      .drawer-panel.view-panel *::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
      }

      .drawer-panel.view-panel {
        font-weight: 600;
      }

      .drawer-panel.view-panel .section-header,
      .drawer-panel.view-panel .job-title {
        font-weight: 700;
      }

      .customer-view-actions {
        border-top: 1px solid rgba(148, 163, 184, 0.24);
        padding: 12px 14px 14px;
        margin-top: 0;
        background: rgba(15, 23, 42, 0.22);
      }

      .service-tab-add-btn {
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        background: var(--profile-header-bg) !important;
        color: #ffffff !important;
        font-weight: 700;
      }

      .service-tab-add-btn:hover {
        background:
          linear-gradient(to bottom, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.22)),
          var(--profile-header-bg) !important;
        border-color: rgba(74, 222, 128, 0.5) !important;
        color: #ffffff !important;
      }

      /* Customer profile tabs: “Add +” below workspace tabs */
      .tab-inline-action-row.job-tab-add-row.top,
      .tab-inline-action-row.workspace-tab-add-row.top {
        margin-top: 30px;
        margin-bottom: 14px;
        align-items: center;
        box-sizing: border-box;
      }

      /* Jobs / Archives: panel already has 8px top pad — keep ~same gap under tabs as other tabs */
      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel .tab-inline-action-row.job-tab-add-row.top,
      .drawer-panel.view-panel .workspace-panel-body.workspace-panel-body--no-outer-panel .tab-inline-action-row.workspace-tab-add-row.top {
        margin-top: 22px;
      }

      /* Customer profile Jobs / Quotes / Invoices / Servicing: same control as Jobs page add (+) */
      .drawer-panel.view-panel .profile-customer-tab-add-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0 4px;
        min-width: 0;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--app-add-glyph);
        cursor: pointer;
        border-radius: var(--ui-radius);
        line-height: 0;
        -webkit-appearance: none;
        appearance: none;
        font: inherit;
        flex: 0 0 auto;
        box-sizing: border-box;
      }

      .drawer-panel.view-panel .profile-customer-tab-add-btn:hover {
        color: var(--app-add-glyph-hover);
        opacity: 1;
      }

      .drawer-panel.view-panel .profile-customer-tab-add-btn:focus {
        outline: none;
      }

      .drawer-panel.view-panel .profile-customer-tab-add-btn:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.75);
        outline-offset: 3px;
      }

      .drawer-panel.view-panel .profile-customer-tab-add-btn .jobs-portal-add-job-svg {
        width: 32px;
        height: 32px;
        display: block;
        color: currentColor;
      }

      body[data-theme="light"] .drawer-panel.view-panel .profile-customer-tab-add-btn {
        color: var(--app-add-glyph-on-light);
      }

      body[data-theme="light"] .drawer-panel.view-panel .profile-customer-tab-add-btn:hover {
        color: var(--app-add-glyph-on-light-hover);
      }

      body[data-theme="light"] .drawer-panel.view-panel .profile-customer-tab-add-btn:focus-visible {
        outline-color: rgba(15, 23, 42, 0.45);
      }

      /* Servicing: “Clear all” row (panel gutter handles horizontal inset) */
      .tab-inline-action-row.servicing-tab-clear-row {
        margin-top: 0;
        margin-bottom: 10px;
        box-sizing: border-box;
      }

      .tab-inline-action-row {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
      }

      .tab-inline-action-row.top {
        margin-top: 0;
        margin-bottom: 10px;
      }

      .tab-inline-action-btn {
        min-width: 124px;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        border-bottom: 0;
        border-radius: 10px 10px 0 0;
        background: var(--profile-header-bg) !important;
        color: #ffffff !important;
        padding: 9px 12px;
        font: inherit;
        font-size: 0.79rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.1;
        cursor: pointer;
        margin-bottom: -1px;
      }

      .tab-inline-action-btn:hover {
        background:
          linear-gradient(to bottom, var(--menu-yellow-soft), var(--menu-yellow-soft)),
          var(--profile-header-bg) !important;
        border-color: var(--menu-yellow-border) !important;
        color: #ffffff !important;
      }

      /* -------------------------------------------------------------------------
         Unified footer actions for all job-modals + form drawers (same as overlap
         warning: 30px height, 7px radius, yellow secondary, indigo primary).
         ------------------------------------------------------------------------- */
      .job-modal .drawer-head > .btn:not(.icon-close-btn),
      .job-modal .drawer-actions > .btn:not(.icon-close-btn):not(.description-pad-toolbar-btn):not(.property-delete-btn),
      .drawer-panel .drawer-actions > .btn:not(.icon-close-btn):not(.property-delete-btn) {
        min-width: 30px;
        height: 30px;
        border-radius: 7px;
        padding: 0 8px;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.2;
      }

      .job-modal .drawer-actions > .tab-inline-action-btn,
      .drawer-panel .drawer-actions > .tab-inline-action-btn {
        min-width: 30px !important;
        width: auto;
        max-width: none;
        height: 30px;
        border-radius: 7px !important;
        padding: 0 8px !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        letter-spacing: normal;
        line-height: 1.2;
        border: 1px solid var(--menu-yellow-border) !important;
        border-bottom: 1px solid var(--menu-yellow-border) !important;
        background: var(--menu-yellow-soft) !important;
        color: var(--menu-yellow-text) !important;
      }

      .job-modal .drawer-actions > .tab-inline-action-btn:hover,
      .drawer-panel .drawer-actions > .tab-inline-action-btn:hover {
        background: var(--menu-yellow-soft-strong) !important;
        border-color: var(--menu-yellow-border) !important;
        color: var(--menu-yellow-text) !important;
      }

      /* Customer Profile: keep hover text white (not yellow). */
      .drawer-panel.view-panel .tab-inline-action-btn:hover,
      .drawer-panel.view-panel .drawer-actions > .tab-inline-action-btn:hover,
      .drawer-panel.view-panel .profile-customer-tab-add-btn:hover {
        color: #ffffff !important;
      }

      /* Primary = indigo (Continue / Save / Add / Submit) */
      .job-modal .drawer-actions > button[type="submit"]:not(.icon-close-btn):not(.dialog-action-btn--generate),
      .drawer-panel .drawer-actions > button[type="submit"]:not(.icon-close-btn):not(.dialog-action-btn--generate),
      .job-modal .drawer-actions > .btn[style*="background"]:not(.icon-close-btn),
      .drawer-panel .drawer-actions > .btn[style*="background"]:not(.icon-close-btn),
      .job-modal .drawer-actions > .booking-action-btn--primary,
      .job-modal .drawer-actions > .dialog-action-btn--primary,
      .drawer-panel .drawer-actions > .booking-action-btn--primary,
      .drawer-panel .drawer-actions > .dialog-action-btn--primary,
      #addGasRateCalculatorBtn,
      #saveSignaturePadBtn,
      #saveCp12GasMeterPageBtn,
      #saveCp12AppliancePageBtn,
      #createCp12CertificateBtn {
        background: rgba(129, 140, 248, 0.3) !important;
        border-color: rgba(129, 140, 248, 0.52) !important;
        color: #e0e7ff !important;
      }

      .job-modal .drawer-actions > button[type="submit"]:not(.icon-close-btn):not(.dialog-action-btn--generate):hover,
      .drawer-panel .drawer-actions > button[type="submit"]:not(.icon-close-btn):not(.dialog-action-btn--generate):hover,
      .job-modal .drawer-actions > .btn[style*="background"]:not(.icon-close-btn):hover,
      .drawer-panel .drawer-actions > .btn[style*="background"]:not(.icon-close-btn):hover,
      .job-modal .drawer-actions > .booking-action-btn--primary:hover,
      .job-modal .drawer-actions > .dialog-action-btn--primary:hover,
      .drawer-panel .drawer-actions > .booking-action-btn--primary:hover,
      .drawer-panel .drawer-actions > .dialog-action-btn--primary:hover,
      #addGasRateCalculatorBtn:hover,
      #saveSignaturePadBtn:hover,
      #saveCp12GasMeterPageBtn:hover,
      #saveCp12AppliancePageBtn:hover,
      #createCp12CertificateBtn:hover {
        background: rgba(129, 140, 248, 0.44) !important;
        border-color: rgba(165, 180, 252, 0.65) !important;
        color: #f5f5ff !important;
      }

      /* Quote / invoice: Generate (green, next to Save) */
      .job-modal .drawer-actions > .dialog-action-btn--generate,
      #quoteModal .drawer-actions > .dialog-action-btn--generate,
      #invoiceModal .drawer-actions > .dialog-action-btn--generate,
      #purchaseOrderModal .drawer-actions > .dialog-action-btn--generate {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(52, 211, 153, 0.58) !important;
        color: #d1fae5 !important;
      }

      .job-modal .drawer-actions > .dialog-action-btn--generate:hover,
      #quoteModal .drawer-actions > .dialog-action-btn--generate:hover,
      #invoiceModal .drawer-actions > .dialog-action-btn--generate:hover,
      #purchaseOrderModal .drawer-actions > .dialog-action-btn--generate:hover {
        background: rgba(34, 197, 94, 0.52) !important;
        border-color: rgba(110, 231, 183, 0.72) !important;
        color: #ecfdf5 !important;
      }

      body[data-theme="light"] .job-modal .drawer-actions > .dialog-action-btn--generate,
      body[data-theme="light"] #quoteModal .drawer-actions > .dialog-action-btn--generate,
      body[data-theme="light"] #invoiceModal .drawer-actions > .dialog-action-btn--generate,
      body[data-theme="light"] #purchaseOrderModal .drawer-actions > .dialog-action-btn--generate {
        background: rgba(22, 163, 74, 0.16) !important;
        border-color: rgba(22, 163, 74, 0.42) !important;
        color: #14532d !important;
      }

      body[data-theme="light"] .job-modal .drawer-actions > .dialog-action-btn--generate:hover,
      body[data-theme="light"] #quoteModal .drawer-actions > .dialog-action-btn--generate:hover,
      body[data-theme="light"] #invoiceModal .drawer-actions > .dialog-action-btn--generate:hover,
      body[data-theme="light"] #purchaseOrderModal .drawer-actions > .dialog-action-btn--generate:hover {
        background: rgba(22, 163, 74, 0.26) !important;
        border-color: rgba(21, 128, 61, 0.5) !important;
        color: #052e16 !important;
      }

      body[data-theme="light"] .job-modal .drawer-actions > button[type="submit"]:not(.icon-close-btn):not(.dialog-action-btn--generate),
      body[data-theme="light"] .drawer-panel .drawer-actions > button[type="submit"]:not(.icon-close-btn):not(.dialog-action-btn--generate),
      body[data-theme="light"] .job-modal .drawer-actions > .btn[style*="background"]:not(.icon-close-btn),
      body[data-theme="light"] .drawer-panel .drawer-actions > .btn[style*="background"]:not(.icon-close-btn),
      body[data-theme="light"] .job-modal .drawer-actions > .booking-action-btn--primary,
      body[data-theme="light"] .job-modal .drawer-actions > .dialog-action-btn--primary,
      body[data-theme="light"] .drawer-panel .drawer-actions > .booking-action-btn--primary,
      body[data-theme="light"] .drawer-panel .drawer-actions > .dialog-action-btn--primary,
      body[data-theme="light"] #addGasRateCalculatorBtn,
      body[data-theme="light"] #saveSignaturePadBtn,
      body[data-theme="light"] #saveCp12GasMeterPageBtn,
      body[data-theme="light"] #saveCp12AppliancePageBtn,
      body[data-theme="light"] #createCp12CertificateBtn {
        color: #1e1b4b !important;
      }

      body[data-theme="light"] .job-modal .drawer-actions > button[type="submit"]:not(.icon-close-btn):not(.dialog-action-btn--generate):hover,
      body[data-theme="light"] .drawer-panel .drawer-actions > button[type="submit"]:not(.icon-close-btn):not(.dialog-action-btn--generate):hover,
      body[data-theme="light"] .job-modal .drawer-actions > .btn[style*="background"]:not(.icon-close-btn):hover,
      body[data-theme="light"] .drawer-panel .drawer-actions > .btn[style*="background"]:not(.icon-close-btn):hover,
      body[data-theme="light"] .job-modal .drawer-actions > .booking-action-btn--primary:hover,
      body[data-theme="light"] .job-modal .drawer-actions > .dialog-action-btn--primary:hover,
      body[data-theme="light"] .drawer-panel .drawer-actions > .booking-action-btn--primary:hover,
      body[data-theme="light"] .drawer-panel .drawer-actions > .dialog-action-btn--primary:hover,
      body[data-theme="light"] #addGasRateCalculatorBtn:hover,
      body[data-theme="light"] #saveSignaturePadBtn:hover,
      body[data-theme="light"] #saveCp12GasMeterPageBtn:hover,
      body[data-theme="light"] #saveCp12AppliancePageBtn:hover,
      body[data-theme="light"] #createCp12CertificateBtn:hover {
        color: #312e81 !important;
      }

      .gas-rate-open-icon-btn {
        min-width: 0;
        width: 42px;
        height: 38px;
        padding: 0;
        border-radius: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.08rem;
        line-height: 1;
      }

      .gas-rate-open-icon-btn svg {
        width: 16px;
        height: 16px;
        display: block;
      }

      .gas-rate-open-icon-btn:hover,
      .gas-rate-open-icon-btn:focus-visible {
        background: transparent !important;
        border-color: transparent !important;
        color: #111827 !important;
      }

      #cp12AddApplianceBtn {
        min-width: 0;
        width: auto;
        padding: 6px 10px;
        font-size: 0.74rem;
        border-color: rgba(22, 101, 52, 0.55) !important;
        background: #15803d !important;
        color: #ffffff !important;
      }

      #cp12AddApplianceBtn:hover {
        border-color: rgba(22, 101, 52, 0.72) !important;
        background: #166534 !important;
        color: #ffffff !important;
      }

      #cp12AdditionalAppliances [data-remove-cp12-appliance] {
        min-width: 0;
        width: auto;
        padding: 6px 9px;
        font-size: 0.72rem;
        border-color: rgba(185, 28, 28, 0.65) !important;
        background: #b91c1c !important;
        color: #ffffff !important;
      }

      #cp12AdditionalAppliances [data-remove-cp12-appliance]:hover {
        border-color: rgba(153, 27, 27, 0.78) !important;
        background: #991b1b !important;
        color: #ffffff !important;
      }

      #cp12Section .profile-tab-card-header {
        background: transparent !important;
        color: #f8fafc !important;
        border-bottom: 1px solid rgba(248, 250, 252, 0.62) !important;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        justify-content: center;
        text-align: center;
      }

      /* Keep CP12 modal header unchanged; make form surface dark, fields white. */
      #boilerServiceModal .job-modal-body,
      #boilerServiceModal #boilerServiceFormActions {
        background: var(--container-surface-bg) !important;
        color: #e2e8f0 !important;
      }

      #boilerServiceModal .job-modal-body .field-label,
      #boilerServiceModal .job-modal-body .section-header {
        color: #e2e8f0 !important;
      }

      #boilerServiceModal .form-input,
      #boilerServiceModal .form-select,
      #boilerServiceModal textarea.form-input {
        background: #ffffff !important;
        color: #111827 !important;
        border-color: rgba(15, 23, 42, 0.42) !important;
      }

      #boilerServiceModal .cp12-signature-preview {
        border-color: rgba(15, 23, 42, 0.45) !important;
      }

      #boilerServiceModal #cp12ServiceIntroBlock {
        background: rgba(15, 23, 42, 0.48);
        border: 1px solid rgba(148, 163, 184, 0.38);
        border-radius: var(--ui-radius);
        padding: 10px 12px;
        color: #e2e8f0;
      }

      #boilerServiceModal #cp12Section .profile-tab-card-header {
        color: #e2e8f0 !important;
        border-bottom-color: rgba(226, 232, 240, 0.4) !important;
      }

      #boilerServiceModal #cp12Section .profile-tab-card-header.cp12-header-strong {
        font-weight: 800 !important;
      }

      #boilerServiceModal #cp12Section .profile-tab-card-header.cp12-header-no-underline {
        border-bottom-color: transparent !important;
      }

      #boilerServiceModal #cp12Section .profile-tab-card-header.cp12-reading-header {
        justify-content: flex-start !important;
        text-align: left !important;
      }

      /* Linked appliances in warning notice: modal uses light .field-label globally on dark body — force dark text on this light panel. */
      #boilerServiceModal #cp12Section .cp12-warning-appliance-card .field-label,
      #boilerServiceModal #cp12Section .cp12-warning-appliance-card p.field-label {
        color: #0f172a !important;
        font-weight: 600 !important;
      }

      #boilerServiceModal #cp12Section .cp12-warning-appliance-card .form-input,
      #boilerServiceModal #cp12Section .cp12-warning-appliance-card input.form-input {
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        caret-color: #0f172a !important;
        background: #ffffff !important;
        border-color: rgba(15, 23, 42, 0.3) !important;
        opacity: 1 !important;
      }

      .cp12-appliance-summary-empty {
        padding: 10px 12px;
        font-size: 0.84rem;
        font-weight: 600;
        color: #475569;
        text-align: center;
      }

      #cp12ApplianceSummaryList {
        margin-top: 4px;
        margin-bottom: 8px;
        display: grid;
        gap: 0;
        border: 1px solid rgba(15, 23, 42, 0.24);
        border-top: 0;
        border-radius: 0 0 var(--ui-radius) var(--ui-radius);
        overflow: hidden;
        background: #ffffff;
      }

      .cp12-appliance-summary-item {
        color: #111827;
        font-size: 0.86rem;
        font-weight: 600;
        line-height: 1.3;
        display: grid;
        grid-template-columns: 48px minmax(110px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr) 34px;
        align-items: center;
        gap: 0;
        border-bottom: 1px solid rgba(15, 23, 42, 0.18);
      }

      .cp12-appliance-summary-item > * {
        border-right: 1px solid rgba(15, 23, 42, 0.16);
      }

      .cp12-appliance-summary-item > *:last-child {
        border-right: 0;
      }

      .cp12-appliance-summary-item.cp12-appliance-summary-header {
        background: #e2e8f0;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .cp12-appliance-summary-item[data-edit-cp12-appliance-row] {
        cursor: pointer;
      }

      .cp12-appliance-summary-item[data-edit-cp12-appliance-row]:hover {
        background: #f8fafc;
      }

      .cp12-appliance-summary-item:last-child {
        border-bottom: 0;
      }

      .cp12-appliance-summary-text {
        padding: 8px 10px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .cp12-appliance-summary-text.cp12-appliance-summary-index {
        text-align: center;
        font-weight: 700;
      }

      .cp12-appliance-summary-actions {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
      }

      .cp12-appliance-summary-actions.cp12-appliance-summary-actions-header {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        justify-content: center;
      }

      .cp12-appliance-summary-warning {
        padding: 6px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid rgba(15, 23, 42, 0.16);
      }

      .cp12-appliance-summary-warning input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
      }

      .cp12-warning-open-btn {
        min-width: 180px;
        border: 1px solid rgba(185, 28, 28, 0.9) !important;
        background: rgba(220, 38, 38, 0.92) !important;
        color: #ffffff !important;
        font-weight: 800 !important;
      }

      .cp12-warning-open-btn:hover {
        background: rgba(185, 28, 28, 0.96) !important;
        border-color: rgba(153, 27, 27, 0.98) !important;
        color: #ffffff !important;
      }

      .cp12-warning-remove-wrap {
        margin-top: 12px;
        display: flex;
        justify-content: flex-start;
      }

      .cp12-warning-header {
        justify-content: center;
        text-align: center;
      }

      .cp12-warning-remove-btn {
        min-width: 180px;
        border: 1px solid rgba(107, 114, 128, 0.9) !important;
        background: rgba(107, 114, 128, 0.92) !important;
        color: #ffffff !important;
        font-weight: 800 !important;
      }

      .cp12-warning-remove-btn:hover {
        background: rgba(75, 85, 99, 0.96) !important;
        border-color: rgba(55, 65, 81, 0.98) !important;
        color: #ffffff !important;
      }

      #boilerServiceFormActions {
        gap: 8px;
      }

      #boilerServiceFormActions .tab-inline-action-btn {
        font-weight: 800 !important;
        border-width: 1.5px !important;
        border-color: rgba(148, 163, 184, 0.72) !important;
        background: rgba(15, 23, 42, 0.42) !important;
        color: #f8fafc !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.34);
      }

      #boilerServiceFormActions .tab-inline-action-btn:hover {
        border-color: rgba(226, 232, 240, 0.9) !important;
        background: rgba(15, 23, 42, 0.58) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.4);
      }

      #boilerServiceFormActions #clearBoilerServiceFormBtn {
        margin-right: 0;
      }

      #boilerServiceFormActions #deleteBoilerServiceFromListBtn {
        margin-right: auto;
        min-width: 30px;
        width: 30px;
        height: 30px;
        padding: 0;
        font-size: 1rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-width: 1.5px !important;
        border-color: rgba(220, 38, 38, 0.95) !important;
        background: rgba(153, 27, 27, 0.55) !important;
        color: #fecaca !important;
        font-weight: 800 !important;
        box-shadow: 0 4px 12px rgba(127, 29, 29, 0.45);
      }

      #boilerServiceFormActions #deleteBoilerServiceFromListBtn:hover {
        border-color: rgba(248, 113, 113, 0.98) !important;
        background: rgba(185, 28, 28, 0.72) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 14px rgba(127, 29, 29, 0.55);
      }

      #boilerServiceFormActions #saveBoilerServiceBtn {
        border-color: rgba(34, 197, 94, 0.9) !important;
        background: rgba(22, 163, 74, 0.44) !important;
        color: #ecfdf5 !important;
      }

      #boilerServiceFormActions #saveBoilerServiceBtn:hover {
        border-color: rgba(134, 239, 172, 0.96) !important;
        background: rgba(22, 163, 74, 0.6) !important;
        color: #ffffff !important;
      }

      #boilerServiceFormActions #editBoilerServiceBtn {
        border-color: rgba(129, 140, 248, 0.9) !important;
        background: rgba(99, 102, 241, 0.46) !important;
        color: #e0e7ff !important;
      }

      #boilerServiceFormActions #editBoilerServiceBtn:hover {
        border-color: rgba(199, 210, 254, 0.95) !important;
        background: rgba(99, 102, 241, 0.62) !important;
        color: #ffffff !important;
      }

      #boilerServiceFormActions #cancelBoilerServiceBtn {
        border-color: rgba(245, 158, 11, 0.95) !important;
        background: rgba(245, 158, 11, 0.42) !important;
        color: var(--menu-yellow-text) !important;
      }

      #boilerServiceFormActions #cancelBoilerServiceBtn:hover {
        border-color: rgba(251, 191, 36, 0.98) !important;
        background: rgba(245, 158, 11, 0.58) !important;
        color: var(--menu-yellow-text) !important;
      }

      /* CP12 gas meter + appliance sub-pages: same vibrancy as main boiler form footer */
      #cp12GasMeterPage .drawer-actions > .tab-inline-action-btn,
      #cp12AppliancePage .drawer-actions > .tab-inline-action-btn {
        font-weight: 800 !important;
        border-width: 1.5px !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.34);
      }

      #cancelCp12GasMeterPageBtn,
      #cancelCp12AppliancePageBtn {
        border-color: rgba(245, 158, 11, 0.95) !important;
        background: rgba(245, 158, 11, 0.42) !important;
        color: #fffbeb !important;
      }

      #cancelCp12GasMeterPageBtn:hover,
      #cancelCp12AppliancePageBtn:hover {
        border-color: rgba(251, 191, 36, 0.98) !important;
        background: rgba(245, 158, 11, 0.58) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.4);
      }

      #saveCp12GasMeterPageBtn,
      #saveCp12AppliancePageBtn {
        border-color: rgba(129, 140, 248, 0.9) !important;
        background: rgba(99, 102, 241, 0.46) !important;
        color: #e0e7ff !important;
      }

      #saveCp12GasMeterPageBtn:hover,
      #saveCp12AppliancePageBtn:hover {
        border-color: rgba(199, 210, 254, 0.95) !important;
        background: rgba(99, 102, 241, 0.62) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.4);
      }

      #cp12ApplianceSummaryList [data-delete-cp12-appliance] {
        min-width: 26px;
        width: 26px;
        height: 28px;
        padding: 0;
        font-size: 0.8rem;
        line-height: 1;
        margin: 0;
        border-color: rgba(153, 27, 27, 0.78) !important;
        background: #b91c1c !important;
        color: #ffffff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      #cp12ApplianceSummaryList [data-delete-cp12-appliance]:hover {
        border-color: rgba(127, 29, 29, 0.9) !important;
        background: #991b1b !important;
        color: #ffffff !important;
      }

      .service-certificates {
        margin-top: 8px;
        display: grid;
        gap: 6px;
      }

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

      .service-cert-name {
        font-size: 0.8rem;
        font-weight: 600;
        color: #111827;
        min-width: 0;
        width: 100%;
      }

      .service-cert-open-btn {
        border: 0;
        background: transparent;
        padding: 0;
        font: inherit;
        color: #1d4ed8;
        text-decoration: underline;
        cursor: pointer;
        text-align: left;
        white-space: normal;
        word-break: break-word;
      }

      .service-cert-open-btn:hover {
        color: #1e40af;
      }

      .service-cp12-database {
        margin-bottom: 12px;
        border: 1px solid rgba(15, 23, 42, 0.18);
        background: #ffffff;
      }

      .service-cp12-db-row {
        display: grid;
        grid-template-columns: 104px minmax(0, 1.35fr) minmax(0, 1fr) minmax(82px, 0.62fr) 90px;
        align-items: center;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
      }

      /* Quotes / Invoices profile tab: same grid as servicing but without Status column */
      .customer-documents-database .service-cp12-db-row {
        grid-template-columns: 104px minmax(0, 1.05fr) minmax(0, 1.3fr) 90px;
      }

      .service-cp12-db-row:last-child {
        border-bottom: 0;
      }

      .service-cp12-db-row-header {
        background: var(--profile-header-bg);
        color: #f8fafc;
        font-size: 0.74rem;
        font-weight: 700;
      }

      .service-cp12-db-cell {
        padding: 8px 10px;
        min-width: 0;
        border-right: 1px solid rgba(148, 163, 184, 0.18);
        font-size: 0.8rem;
        color: #0f172a;
      }

      .service-cp12-db-row-header .service-cp12-db-cell {
        color: #ffffff;
      }

      .service-cp12-db-cell:last-child {
        border-right: 0;
      }

      .service-cp12-actions-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }

      .service-cp12-send-btn {
        min-width: 28px;
        width: 28px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(22, 163, 74, 0.48);
        background: #ffffff;
        color: #16a34a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        cursor: pointer;
      }

      .service-cp12-send-btn svg {
        width: 15px;
        height: 15px;
        display: block;
      }

      .service-cp12-send-btn svg path {
        fill: currentColor;
      }

      .service-cp12-send-btn:hover {
        background: #f0fdf4;
        border-color: rgba(21, 128, 61, 0.7);
        color: #15803d;
      }

      .service-cp12-delete-btn {
        min-width: 28px;
        width: 28px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(185, 28, 28, 0.46);
        background: rgba(239, 68, 68, 0.82);
        color: #ffffff;
        font-size: 0.86rem;
        line-height: 1;
        cursor: pointer;
      }

      .service-cp12-delete-btn:hover {
        background: rgba(220, 38, 38, 0.9);
        border-color: rgba(185, 28, 28, 0.62);
      }

      .service-cp12-db-empty {
        padding: 10px;
        margin: 0;
        font-size: 0.84rem;
        color: #334155;
      }

      .cert-viewer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.62);
        z-index: 5000;
        display: none;
      }

      .cert-viewer-backdrop.open {
        display: block;
      }

      .cert-viewer-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(840px, calc(100vw - 52px));
        height: min(86vh, 760px);
        background: #ffffff;
        border: 1px solid rgba(148, 163, 184, 0.38);
        box-shadow: 0 20px 48px rgba(2, 6, 23, 0.35);
        z-index: 5001;
        display: none;
        grid-template-rows: auto 1fr;
        overflow: visible;
      }

      .cert-viewer-modal.open {
        display: grid;
      }

      .cert-viewer-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 8px;
        align-items: start;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.32);
        background: #f8fafc;
        position: relative;
        z-index: 6;
        min-width: 0;
        box-sizing: border-box;
      }

      .cert-viewer-title {
        margin: 0;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.15;
      }

      .cert-viewer-title-main {
        display: block;
        min-width: 0;
        font-size: 0.9rem;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .cert-viewer-title-sub {
        display: block;
        min-width: 0;
        font-size: 0.74rem;
        font-weight: 600;
        color: #475569;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .cert-viewer-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-end;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }

      .cert-viewer-toolbar > .cert-viewer-close-btn {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        margin-left: 0;
      }

      .cert-viewer-quote-response-wrap {
        flex: 0 0 auto;
      }

      .cert-viewer-quote-response-menu.job-status-menu .job-status-trigger {
        min-width: min(100%, 200px);
        min-height: 32px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-inline: 10px;
        border-radius: 8px;
      }

      .cert-viewer-quote-response-menu.job-status-menu[open] {
        z-index: 20000;
      }

      .cert-viewer-quote-response-menu .job-status-options {
        z-index: 20001;
      }

      .cert-viewer-convert-wrap {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        flex: 0 0 auto;
      }

      .cert-viewer-convert-sep {
        align-self: stretch;
        width: 1px;
        min-height: 1.1em;
        margin: 0 2px;
        background: rgba(148, 163, 184, 0.45);
        flex-shrink: 0;
      }

      body[data-theme="light"] .cert-viewer-convert-sep {
        background: rgba(100, 116, 139, 0.5);
      }

      #appDocPdfConvertSalesOrderBtn.app-doc-pdf-convert-sales {
        background: #2563eb;
        border-color: #1d4ed8;
        color: #ffffff;
      }

      #appDocPdfConvertSalesOrderBtn.app-doc-pdf-convert-sales:hover {
        background: #1d4ed8;
        border-color: #1e40af;
        color: #ffffff;
      }

      #appDocPdfConvertInvoiceBtn.app-doc-pdf-convert-invoice {
        background: #facc15;
        border-color: #eab308;
        color: #713f12;
      }

      #appDocPdfConvertInvoiceBtn.app-doc-pdf-convert-invoice:hover {
        background: #eab308;
        border-color: #ca8a04;
        color: #422006;
      }

      body[data-theme="light"] #appDocPdfConvertSalesOrderBtn.app-doc-pdf-convert-sales {
        background: #2563eb;
        border-color: #1d4ed8;
        color: #ffffff;
      }

      body[data-theme="light"] #appDocPdfConvertSalesOrderBtn.app-doc-pdf-convert-sales:hover {
        background: #1d4ed8;
        border-color: #1e40af;
        color: #ffffff;
      }

      body[data-theme="light"] #appDocPdfConvertInvoiceBtn.app-doc-pdf-convert-invoice {
        background: #facc15;
        border-color: #eab308;
        color: #713f12;
      }

      body[data-theme="light"] #appDocPdfConvertInvoiceBtn.app-doc-pdf-convert-invoice:hover {
        background: #eab308;
        border-color: #ca8a04;
        color: #422006;
      }

      .cert-viewer-btn {
        border: 1px solid rgba(100, 116, 139, 0.55);
        background: #ffffff;
        color: #0f172a;
        padding: 6px 10px;
        min-width: 84px;
        height: 32px;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
      }

      .cert-viewer-btn:hover {
        background: #e2e8f0;
      }

      .cert-viewer-btn-icon {
        min-width: 34px;
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 10px;
        border: 1px solid rgba(100, 116, 139, 0.55);
        background: #ffffff;
        color: #16a34a;
      }

      .cert-viewer-btn-icon svg {
        width: 21px;
        height: 21px;
        display: block;
      }

      .cert-viewer-btn-icon svg path {
        fill: currentColor;
      }

      .cert-viewer-btn-icon:hover {
        background: #f8fafc;
        border-color: rgba(71, 85, 105, 0.75);
        color: #15803d;
        transform: translateY(-1px);
      }

      .cert-viewer-btn-icon:active {
        transform: translateY(0);
      }

      .cert-viewer-close-btn {
        border: 1px solid rgba(100, 116, 139, 0.55);
        background: #ffffff;
        color: #0f172a;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        margin-left: 2px;
      }

      .cert-viewer-close-btn:hover {
        background: #e2e8f0;
      }

      /* cert-send-toggle / cert-send-help: still used by Share document dialog recipient rows */
      .cert-send-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 10px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 8px;
        background: #f8fafc;
      }

      .cert-send-toggle-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: #0f172a;
      }

      .cert-send-toggle input[type="checkbox"] {
        width: 17px;
        height: 17px;
      }

      .cert-send-help {
        margin: 0;
        font-size: 0.75rem;
        color: #475569;
      }

      .cert-viewer-frame {
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        background: #ffffff;
        position: relative;
        z-index: 1;
      }

      /* Quote / invoice / job-sheet preview uses same cert-viewer shell; sit above standard job drawers */
      #appDocPdfViewerBackdrop {
        z-index: 5020;
      }

      #appDocPdfViewerModal {
        z-index: 5021;
      }

      .app-doc-pdf-send-backdrop,
      .app-doc-pdf-share-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.44);
        z-index: 13050;
        display: none;
      }

      .app-doc-pdf-send-backdrop.open,
      .app-doc-pdf-share-backdrop.open {
        display: block;
      }

      .app-doc-pdf-send-modal,
      .app-doc-pdf-share-modal {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(92vw, 420px);
        background: #ffffff;
        border: 1px solid rgba(148, 163, 184, 0.45);
        border-radius: 10px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
        z-index: 13051;
        display: none;
      }

      .app-doc-pdf-send-modal.open,
      .app-doc-pdf-share-modal.open {
        display: block;
      }

      .app-doc-pdf-send-head {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.32);
      }

      /* Shared: Service reminder, certificate send, quote/invoice PDF send, job-sheet share */
      .ff-send-dialog-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.25;
      }

      .ff-send-dialog-subtitle {
        margin: 0 0 10px;
        color: #0f172a;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.35;
        text-transform: none;
        letter-spacing: normal;
      }

      .app-doc-pdf-send-body {
        padding: 12px 14px 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .app-doc-pdf-send-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 0.85rem;
        color: #334155;
      }

      .app-doc-pdf-send-help {
        margin: 0;
        font-size: 0.75rem;
        color: #64748b;
      }

      .app-doc-pdf-send-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 4px;
      }

      .app-doc-pdf-send-actions > .dialog-action-btn--generate {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(52, 211, 153, 0.58) !important;
        color: #14532d !important;
      }

      .app-doc-pdf-send-actions > .dialog-action-btn--generate:hover {
        background: rgba(34, 197, 94, 0.52) !important;
        border-color: rgba(110, 231, 183, 0.72) !important;
        color: #052e16 !important;
      }

      /* Today’s Jobs send picker: reuse .app-doc-pdf-send-* layout; stack above job modal + default PDF send z-index */
      #jobSmsRecipientBackdrop.app-doc-pdf-send-backdrop {
        z-index: 14100;
      }

      #jobSmsRecipientModal.app-doc-pdf-send-modal {
        z-index: 14101;
      }

      /* White modal: high-contrast footer (not inside .job-modal, so explicit styles) */
      #jobSmsRecipientModal .drawer-actions > .btn:not(.icon-close-btn):not(.description-pad-toolbar-btn):not(.property-delete-btn) {
        min-width: 30px;
        height: 30px;
        border-radius: 7px;
        padding: 0 10px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        border-width: 2px;
      }

      #jobSmsRecipientModal #jobSmsRecipientCancelBtn.booking-action-btn {
        background: rgba(59, 130, 246, 0.32) !important;
        border-color: rgba(29, 78, 216, 0.78) !important;
        color: #1e3a8a !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
      }

      #jobSmsRecipientModal #jobSmsRecipientCancelBtn.booking-action-btn:hover {
        background: rgba(59, 130, 246, 0.48) !important;
        border-color: rgba(30, 64, 175, 0.92) !important;
        color: #172554 !important;
      }

      #jobSmsRecipientModal #jobSmsRecipientSendBtn.dialog-action-btn--generate {
        background: rgba(22, 163, 74, 0.38) !important;
        border-color: rgba(21, 128, 61, 0.85) !important;
        color: #064e3b !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
      }

      #jobSmsRecipientModal #jobSmsRecipientSendBtn.dialog-action-btn--generate:hover {
        background: rgba(22, 163, 74, 0.55) !important;
        border-color: rgba(20, 83, 45, 0.95) !important;
        color: #022c22 !important;
      }

      .firefly-messaging-recipients {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .firefly-msg-group {
        padding: 10px 12px;
        border-radius: var(--ui-radius);
        border: 1px solid var(--border);
        background: rgba(15, 23, 42, 0.35);
      }

      .firefly-msg-group-title {
        margin: 0 0 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text);
        line-height: 1.35;
      }

      .firefly-msg-group-toggles {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        align-items: center;
      }

      .firefly-msg-empty {
        margin: 0;
        font-size: 0.85rem;
        color: var(--muted);
      }

      .app-doc-pdf-send-body .firefly-msg-group,
      .app-doc-pdf-share-modal .firefly-msg-group {
        background: rgba(248, 250, 252, 0.95);
        border-color: rgba(148, 163, 184, 0.4);
      }

      .app-doc-pdf-send-body .firefly-msg-group-title,
      .app-doc-pdf-share-modal .firefly-msg-group-title {
        color: #0f172a;
      }

      .app-doc-pdf-send-body .firefly-msg-empty,
      .app-doc-pdf-share-modal .firefly-msg-empty {
        color: #64748b;
      }

      .app-doc-pdf-share-field-wrap {
        margin-top: 4px;
      }

      .app-doc-pdf-share-field-label {
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        color: #475569;
        margin: 0 0 6px;
      }

      .app-doc-pdf-share-email-input {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
        border: 1px solid rgba(148, 163, 184, 0.65);
        border-radius: 8px;
        font-size: 0.85rem;
      }

      #openCp12GasMeterPageBtn {
        justify-content: flex-start;
        text-align: left;
        border-color: rgba(22, 101, 52, 0.55) !important;
        background: #15803d !important;
        color: #ffffff !important;
      }

      #openCp12ApplianceSectionBtn {
        justify-content: flex-start;
        text-align: left;
        border-color: rgba(22, 101, 52, 0.55) !important;
        background: #15803d !important;
        color: #ffffff !important;
      }

      .cp12-nav-action-btn {
        min-width: 0;
        width: auto;
        height: 34px;
        padding: 7px 10px;
        display: inline-flex;
        align-items: center;
      }

      #cp12GasMeterPageHeader {
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 0.96rem !important;
        min-height: 42px;
      }

      #cp12AppliancePageHeader {
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.96rem !important;
        min-height: 42px;
      }

      #openCp12GasMeterPageBtn:hover {
        border-color: rgba(22, 101, 52, 0.72) !important;
        background: #166534 !important;
        color: #ffffff !important;
      }

      #openCp12ApplianceSectionBtn:hover {
        border-color: rgba(22, 101, 52, 0.72) !important;
        background: #166534 !important;
        color: #ffffff !important;
      }

      .cp12-section-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 6px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 800;
        line-height: 1;
      }

      .cp12-section-status-pill.cp12-status-complete {
        background: #16a34a;
        color: #ffffff;
      }

      .cp12-section-status-pill.cp12-status-incomplete {
        background: #dc2626;
        color: #ffffff;
      }

      .cp12-make-autocomplete {
        position: relative;
      }

      .cp12-make-suggestions {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        max-height: 180px;
        overflow-y: auto;
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #0f172a;
        z-index: 60;
        box-shadow: 0 8px 18px rgba(2, 6, 23, 0.2);
      }

      .cp12-make-suggestion-item {
        display: block;
        width: 100%;
        border: 0;
        background: #ffffff;
        color: #0f172a;
        text-align: left;
        padding: 7px 8px;
        cursor: pointer;
        font: inherit;
        font-size: 0.79rem;
      }

      .cp12-make-suggestion-item:hover {
        background: #eff6ff;
      }

      #cp12Section .field-label {
        text-align: center;
      }

      #cp12GasMeterPage .field-label {
        text-align: left;
      }

      #cp12AppliancePage .field-label,
      #cp12AppliancePage .section-header,
      #cp12AppliancePage .profile-tab-card-header {
        text-transform: none !important;
        letter-spacing: normal !important;
      }

      #cp12Section .cp12-compact-select {
        width: auto;
        min-width: 0;
        max-width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      /* Keep Gas Installation & Pipework controls hard-left (override centered CP12 defaults). */
      #cp12Section #cp12GasMeterPage .cp12-compact-select {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      #cp12Section .cp12-status-select {
        width: 13.5ch !important;
      }

      #cp12Section .cp12-pressure-input,
      #cp12Section .cp12-gas-rate-input {
        width: 13.5ch !important;
        min-width: 13.5ch !important;
      }

      #cp12Section .cp12-status-select-full {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      #cp12Section .cp12-compact-select.cp12-select-pass {
        background: #166534 !important;
        color: #ffffff !important;
        border-color: rgba(22, 101, 52, 0.75) !important;
      }

      #cp12Section .cp12-compact-select.cp12-select-fail {
        background: #b91c1c !important;
        color: #ffffff !important;
        border-color: rgba(185, 28, 28, 0.75) !important;
      }

      #cp12Section .cp12-compact-select.cp12-select-warning {
        background: #c2410c !important;
        color: #ffffff !important;
        border-color: rgba(194, 65, 12, 0.75) !important;
      }

      .drawer-panel.view-panel .drawer-head {
        padding: 10px 16px 12px;
        min-height: 48px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
        background: var(--profile-header-bg);
      }

      .property-list {
        display: grid;
        gap: 10px;
      }

      .property-item {
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: 10px;
        padding: 10px;
        background: #ffffff;
        color: #111827;
      }

      .property-item .info-label {
        color: #64748b;
      }

      .property-item .info-value {
        color: #111827;
      }

      .property-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: -10px -10px 10px;
      }

      .property-item-tools {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 30px;
      }

      .profile-card-actions {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 30px;
        gap: 6px;
      }

      .property-actions {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 30px;
        gap: 3px;
      }

      /* Timeline “add element” (+): green everywhere (was blue/yellow accent from menu tokens). */
      .property-add-btn {
        width: auto;
        height: auto;
        border: 0;
        background: transparent;
        color: #16a34a;
        font-size: 2rem;
        font-weight: 700;
        line-height: 0.9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        margin-right: 6px;
      }

      .property-add-btn:hover {
        color: #22c55e;
      }

      .property-delete-btn {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        border: 1px solid rgba(239, 68, 68, 0.55);
        background: rgba(127, 29, 29, 0.35);
        color: #fca5a5;
        font-size: 1.05rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      #editCustomerBtn {
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        background: var(--profile-header-bg) !important;
        color: #ffffff !important;
        font-size: 0.79rem;
        font-weight: 700;
        min-width: 124px;
        height: 34px !important;
        padding: 0 12px !important;
      }

      #editCustomerBtn:hover {
        background:
          linear-gradient(to bottom, var(--menu-yellow-soft), var(--menu-yellow-soft)),
          var(--profile-header-bg) !important;
        border-color: var(--menu-yellow-border) !important;
        color: #ffffff !important;
      }

      #deleteCustomerBtn {
        width: 34px;
        min-width: 34px;
        height: 34px !important;
        padding: 0 !important;
        border-radius: 8px;
        border: 1px solid #dc2626;
        background: #ef4444;
        color: #ffffff;
        font-size: 1.05rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.35), 0 8px 18px rgba(127, 29, 29, 0.4);
      }

      #deleteCustomerBtn:hover {
        background: #dc2626;
        border-color: #b91c1c;
        color: #ffffff;
      }

      .property-title {
        margin: 0;
        font-size: 0.86rem;
        font-weight: 400;
        color: #f8fafc;
      }

      .property-address-summary {
        font-weight: 700;
      }

      .property-edit-btn {
        min-width: 46px;
        border: 1px solid var(--menu-yellow-border);
        background: var(--menu-yellow-soft);
        color: var(--menu-yellow-text);
      }

      .property-edit-btn:hover {
        background: var(--menu-yellow-soft-strong);
      }

      .drawer-panel.view-panel .property-item-tools .profile-edit-btn {
        min-width: 0;
        height: 30px;
        padding: 0 10px;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        background: var(--profile-header-bg) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
        line-height: 1.1;
        cursor: pointer;
      }

      .drawer-panel.view-panel .property-item-tools .profile-edit-btn:hover {
        background:
          linear-gradient(to bottom, var(--menu-yellow-soft), var(--menu-yellow-soft)),
          var(--profile-header-bg) !important;
        border-color: var(--menu-yellow-border) !important;
        color: #ffffff !important;
      }

      .drawer-panel.view-panel .property-item-tools .profile-delete-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
        border-radius: 7px;
        border: 1px solid rgba(185, 28, 28, 0.46);
        background: rgba(239, 68, 68, 0.82);
        color: #ffffff;
        font-size: 1.05rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.2), 0 3px 8px rgba(127, 29, 29, 0.24);
      }

      .drawer-panel.view-panel .property-item-tools .profile-delete-btn:hover {
        background: rgba(220, 38, 38, 0.9);
        border-color: rgba(185, 28, 28, 0.62);
        color: #ffffff;
      }

      .drawer-panel.view-panel .property-item-tools .profile-delete-btn.job-delete-btn {
        width: auto;
        min-width: 0;
        padding: 0 10px;
        gap: 6px;
        font-size: 0.73rem;
        font-weight: 700;
        letter-spacing: 0.01em;
      }

      .property-item .property-delete-btn {
        border: 1px solid #991b1b;
        background: #b91c1c;
        color: #fee2e2;
      }

      .property-item .property-delete-btn:hover {
        background: #991b1b;
      }

      .job-item .property-delete-btn {
        border: 1px solid #991b1b;
        background: #b91c1c;
        color: #fee2e2;
      }

      .job-item .property-delete-btn:hover {
        background: #991b1b;
      }

      .job-list {
        display: grid;
        gap: 10px;
        padding: 0;
        box-sizing: border-box;
      }

      .customer-document-list {
        display: grid;
        gap: 10px;
      }

      .customer-document-row {
        grid-template-columns: 18px minmax(0, 1fr) auto;
      }

      .job-timeline {
        display: grid;
        gap: 12px;
      }

      .job-node {
        display: block;
        position: relative;
        overflow: visible;
      }

      .job-marker {
        display: none;
      }

      .job-dot {
        display: none;
      }

      .job-line {
        display: none;
      }

      .job-node:last-child .job-line {
        display: none;
      }

      .job-item {
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: var(--ui-radius);
        padding: 10px;
        background: #ffffff;
        color: #111827;
        position: relative;
        overflow: visible;
      }

      .customer-profile-job-row[data-customer-job-open-timeline] {
        cursor: pointer;
      }

      .job-item-head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 26px;
      }

      /* Jobs timeline: customer name, then job title, then address below */
      .job-item-head.jobs-portal-caption-stack {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
        min-height: 0;
        margin-bottom: 6px;
      }

      .job-card-label {
        margin: -10px -10px 10px;
      }

      .job-property-header {
        justify-content: center;
        text-align: center;
      }

      .job-item .job-card-label.job-property-header {
        margin: 0 auto 10px;
        width: fit-content;
        max-width: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: var(--ui-radius) !important;
        background: rgba(15, 23, 42, 0.9);
        color: #f8fafc;
        border-bottom: 1px solid rgba(148, 163, 184, 0.35);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.01em;
        text-transform: uppercase;
      }

      .profile-tab-card-header {
        padding: 8px 10px;
        min-height: 36px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 0.86rem;
        font-weight: 400;
        color: #f8fafc;
        background: var(--profile-header-bg);
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
      }

      .drawer-panel.view-panel .customer-info-card .section-header.profile-tab-card-header {
        margin: 0 0 8px;
        padding: 6px 12px;
        min-height: 0;
        width: fit-content;
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.82rem;
        font-weight: 700 !important;
        line-height: 1.2;
        letter-spacing: 0.01em;
        color: #f8fafc;
        background: var(--profile-header-bg);
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: var(--ui-radius) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.35);
      }

      .drawer-panel.view-panel .job-item .job-card-label.job-property-header {
        border-radius: var(--ui-radius) !important;
      }

      .drawer-panel.view-panel .property-item-head.profile-tab-card-header {
        margin: 0 0 8px;
        padding: 0;
        min-height: 0;
        background: transparent;
        border-bottom: 0;
      }

      .drawer-panel.view-panel .property-item-head.profile-tab-card-header .property-title {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        max-width: 100%;
        padding: 5px 10px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: var(--ui-radius) !important;
        background: var(--profile-header-bg);
        color: #f8fafc;
      }

      .drawer-panel.view-panel .property-item.disabled .property-item-head.profile-tab-card-header .property-title {
        background: #6b7280;
        border-color: rgba(107, 114, 128, 0.7);
      }

      .job-title {
        margin: 0;
        font-size: 0.86rem;
        font-weight: 700;
        color: #111827;
      }

      .job-title-centered {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
      }

      .job-created-next-to-status {
        margin: 0;
        color: #475569;
        font-size: 0.72rem;
      }

      .job-customer-name {
        margin: 0;
        width: 100%;
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.1;
        text-align: center;
      }

      .job-customer-open-btn {
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
      }

      .job-customer-open-btn:hover {
        text-decoration: underline;
      }

      .job-card-actions {
        justify-content: space-between;
      }

      .job-status-bottom-left {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .service-item-title {
        font-size: 0.92rem;
        font-weight: 800;
        color: #0f172a !important;
      }

      .drawer-panel.view-panel .job-list .service-item .info-label {
        color: #334155 !important;
        font-weight: 700 !important;
      }

      .drawer-panel.view-panel .job-list .service-item .info-value {
        color: #0f172a !important;
        font-weight: 700 !important;
      }

      .service-item .service-edit-btn {
        min-width: 86px;
        height: 30px;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        background: var(--profile-header-bg) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
        line-height: 1.1;
        cursor: pointer;
      }

      .service-item .service-edit-btn:hover {
        background:
          linear-gradient(to bottom, var(--menu-yellow-soft), var(--menu-yellow-soft)),
          var(--profile-header-bg) !important;
        border-color: var(--menu-yellow-border) !important;
        color: #ffffff !important;
      }

      #serviceTypeInput {
        color: #0f172a;
        font-weight: 700;
      }

      .job-meta {
        margin: 6px 0 0;
        color: #475569;
        font-size: 0.8rem;
      }

      .job-created-meta {
        margin: 2px 0 0;
      }

      .job-list .info-value {
        color: #374151;
      }

      .job-status-row {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .job-status-top-right {
        margin-top: 6px;
        display: flex;
        justify-content: flex-end;
      }

      .job-status-menu {
        position: relative;
        z-index: 20;
      }

      .job-status-menu[open] {
        z-index: 120;
      }

      .job-status-trigger {
        list-style: none;
        border: 0;
        border-radius: var(--ui-radius);
        padding: 6px 26px 6px 26px;
        font: inherit;
        font-size: 0.76rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        min-width: 104px;
      }

      .job-status-trigger::-webkit-details-marker {
        display: none;
      }

      .job-status-trigger.active {
        background: #16a34a;
        color: #ffffff;
      }

      .job-status-trigger.completed {
        background: #4b5563;
        color: #ffffff;
      }

      .job-status-trigger.quote-response-none {
        background: rgba(241, 245, 249, 0.98);
        color: #334155;
        border: 1px solid #94a3b8;
      }

      .job-status-trigger.quote-response-declined {
        background: #dc2626;
        color: #ffffff;
      }

      .job-status-trigger.quote-response-declined:hover {
        background: #b91c1c;
        color: #ffffff;
      }

      .job-status-options .quote-response-option {
        width: 100%;
        border: 0;
        background: transparent;
        color: #ffffff;
        font: inherit;
        font-size: 0.76rem;
        font-weight: 700;
        padding: 8px 10px;
        text-align: center;
        cursor: pointer;
      }

      .job-status-options .quote-response-option:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
      }

      .job-status-options .quote-response-option[data-quote-response-value=""]:hover {
        background: #4b5563;
        color: #ffffff;
      }

      .job-status-options .quote-response-option[data-quote-response-value="accepted"]:hover {
        background: #16a34a;
        color: #ffffff;
      }

      .job-status-options .quote-response-option[data-quote-response-value="declined"]:hover {
        background: #dc2626;
        color: #ffffff;
      }

      .job-status-trigger:hover {
        filter: brightness(0.96);
      }

      .job-status-trigger.active:hover {
        background: #15803d;
        color: #ffffff;
      }

      .job-status-trigger.completed:hover {
        background: #374151;
        color: #ffffff;
      }

      .job-status-options {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--ui-radius);
        background: rgba(17, 24, 39, 0.98);
        overflow: hidden;
        z-index: 1000;
      }

      .job-status-option {
        width: 100%;
        border: 0;
        background: transparent;
        color: #ffffff;
        font: inherit;
        font-size: 0.76rem;
        font-weight: 700;
        padding: 8px 10px;
        text-align: center;
        cursor: pointer;
      }

      .job-status-option:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
      }

      .job-status-option[data-job-status-value="Active"]:hover {
        background: #16a34a;
        color: #ffffff;
      }

      .job-status-option[data-job-status-value="Completed"]:hover {
        background: #4b5563;
        color: #ffffff;
      }

      .job-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 4000;
      }

      .job-modal-backdrop.open {
        opacity: 1;
        pointer-events: auto;
      }

      .job-modal {
        position: fixed;
        left: 50%;
        top: 14px;
        transform: translate(-50%, -24px);
        width: min(430px, calc(100vw - 24px));
        max-height: calc(100vh - 28px);
        background: rgba(18, 20, 25, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: var(--ui-radius);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 4001;
        display: flex;
        flex-direction: column;
      }

      /* Clip header/body to rounded shell (timeline preview is compact) */
      .timeline-preview-modal.job-modal {
        overflow: hidden;
      }

      /* Custom confirm / warning: match other modals (rounded shell + clipped corners) */
      .app-confirm-modal.job-modal {
        overflow: hidden;
      }

      /*
       * In-app confirm + notice (#appConfirmModal, #appNoticeModal) and window.alert override:
       * above PDF viewer (5021), send/share overlays (13051), SMS recipient (14101),
       * and deep in-page menus — all warnings/notices stay readable on top.
       */
      .app-confirm-backdrop {
        z-index: 500000;
      }

      .app-confirm-modal {
        z-index: 500001;
      }

      #appConfirmModal.app-confirm-modal,
      #appNoticeModal.app-confirm-modal {
        z-index: 500001;
      }

      .app-confirm-message {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.88);
      }

      body[data-theme="light"] .job-modal .app-confirm-message {
        color: rgba(15, 23, 42, 0.88);
      }

      .cert-new-job-modal-hint {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.65);
      }

      .cert-new-job-modal-error {
        margin: 8px 0 0;
        font-size: 13px;
        line-height: 1.35;
        color: #f0a0a0;
      }

      body[data-theme="light"] .cert-new-job-modal-hint {
        color: rgba(0, 0, 0, 0.55);
      }

      body[data-theme="light"] .cert-new-job-modal-error {
        color: #b00020;
      }

      .add-pictures-modal {
        width: min(420px, calc(100vw - 24px));
      }

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

      .add-pictures-modal-hint {
        margin: 0;
        font-size: 0.88rem;
        line-height: 1.45;
        color: rgba(226, 232, 240, 0.9);
      }

      .add-pictures-modal-footnote {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.45;
        color: rgba(148, 163, 184, 0.95);
      }

      .add-pictures-action-btn {
        width: 100%;
        justify-content: center;
      }

      .add-pictures-hidden-input {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
      }

      .add-pictures-camera-pane {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .add-pictures-camera-pane.hidden {
        display: none;
      }

      .add-pictures-camera-label {
        margin: 0;
      }

      .add-pictures-video-wrap {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        background: #0f172a;
        border: 1px solid rgba(148, 163, 184, 0.25);
        aspect-ratio: 4 / 3;
        max-height: min(52vh, 420px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .add-pictures-camera-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .add-pictures-camera-error {
        margin: 0;
        font-size: 0.82rem;
        color: #fecaca;
        line-height: 1.4;
      }

      .add-pictures-camera-error.hidden {
        display: none;
      }

      .add-pictures-camera-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      body[data-theme="light"] .add-pictures-video-wrap {
        background: #1e293b;
        border-color: rgba(100, 116, 139, 0.35);
      }

      body[data-theme="light"] .add-pictures-camera-error {
        color: #b91c1c;
      }

      body[data-theme="light"] .add-pictures-modal-hint {
        color: rgba(51, 65, 85, 0.92);
      }

      body[data-theme="light"] .add-pictures-modal-footnote {
        color: rgba(71, 85, 105, 0.92);
      }

      #jobSheetModal {
        width: min(720px, calc(100vw - 24px));
      }

      #jobSheetModal .job-sheet-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: min(72vh, calc(100vh - 140px));
        overflow-y: auto;
        padding-right: 4px;
      }

      .job-sheet-intro {
        margin: 0 0 14px;
        font-size: 0.86rem;
        line-height: 1.45;
        color: rgba(226, 232, 240, 0.88);
      }

      .job-sheet-section {
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
      }

      .job-sheet-section:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }

      .job-sheet-section-title {
        margin: 0 0 10px;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: rgba(148, 163, 184, 0.95);
      }

      .job-sheet-check-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 8px 14px;
        align-items: start;
      }

      .job-sheet-check {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.86rem;
        line-height: 1.35;
        color: rgba(241, 245, 249, 0.92);
        cursor: pointer;
      }

      .job-sheet-check input {
        margin-top: 3px;
        flex-shrink: 0;
      }

      body[data-theme="light"] .job-sheet-intro {
        color: rgba(51, 65, 85, 0.92);
      }

      body[data-theme="light"] .job-sheet-section-title {
        color: rgba(71, 85, 105, 0.95);
      }

      body[data-theme="light"] .job-sheet-check {
        color: rgba(30, 41, 59, 0.92);
      }

      #quoteModal,
      #invoiceModal,
      #purchaseOrderModal {
        width: min(760px, calc(100vw - 24px));
        --quote-desc-min-width: 450px;
        --quote-qty-col-width: 40px;
        --quote-bin-col-width: 40px;
        --quote-right-col-width: 15ch;
        --quote-line-gap: 6px;
      }

      /* Title only in header (no Close); centre in the bar */
      #quoteModal .drawer-head,
      #invoiceModal .drawer-head,
      #purchaseOrderModal .drawer-head {
        justify-content: center;
      }

      #purchaseOrderModal:not(.purchase-order-modal--service) .drawer-head .drawer-title.po-modal-doc-title {
        color: #ffffff;
      }

      body[data-theme="light"] #purchaseOrderModal:not(.purchase-order-modal--service) .drawer-head {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border-bottom-color: rgba(255, 255, 255, 0.1);
      }

      body[data-theme="light"] #purchaseOrderModal:not(.purchase-order-modal--service) .drawer-head .drawer-title.po-modal-doc-title {
        color: #ffffff;
      }

      /* Flex child scrolls so tall description rows don’t clip (modal still max-height: 100vh-28px) */
      #quoteModal .job-modal-body,
      #invoiceModal .job-modal-body,
      #purchaseOrderModal .job-modal-body {
        flex: 1 1 auto;
        min-height: 0;
      }

      #quoteModal .job-modal-body--quote,
      #invoiceModal .job-modal-body--quote,
      #purchaseOrderModal .job-modal-body--quote {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      #quoteModal .drawer-actions.quote-invoice-modal-actions,
      #invoiceModal .drawer-actions.quote-invoice-modal-actions,
      #purchaseOrderModal .drawer-actions.quote-invoice-modal-actions {
        margin-top: 32px;
      }

      #quoteModal .quote-modal-section--meta,
      #invoiceModal .quote-modal-section--meta,
      #purchaseOrderModal .quote-modal-section--meta {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      #quoteModal .quote-modal-section--meta > div .field-label,
      #invoiceModal .quote-modal-section--meta > div .field-label,
      #purchaseOrderModal .quote-modal-section--meta > div .field-label {
        margin-bottom: 4px;
      }

      #quoteModal .quote-modal-meta-divider,
      #invoiceModal .quote-modal-meta-divider,
      #purchaseOrderModal .quote-modal-meta-divider {
        margin: 24px 0 22px;
        height: 0;
        border: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.5);
        width: 100%;
        flex-shrink: 0;
      }

      body[data-theme="light"] #quoteModal .quote-modal-meta-divider,
      body[data-theme="light"] #invoiceModal .quote-modal-meta-divider,
      body[data-theme="light"] #purchaseOrderModal .quote-modal-meta-divider {
        border-top-color: #cbd5e1;
      }

      #purchaseOrderModal #poCustomerJobLinkSection.po-modal-customer-job--readonly .po-supplier-combobox-input,
      #purchaseOrderModal #poCustomerJobLinkSection.po-modal-customer-job--readonly select.form-input {
        cursor: default;
      }

      #purchaseOrderModal #poCustomerJobLinkSection {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      #quoteModal .quote-modal-section--lines,
      #invoiceModal .quote-modal-section--lines,
      #purchaseOrderModal .quote-modal-section--lines {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      #quoteModal .quote-line-items-block,
      #invoiceModal .quote-line-items-block,
      #purchaseOrderModal .quote-line-items-block {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
      }

      /* Bin column must be a fixed width (not max-content): header row has an empty bin cell, line rows
         have the delete button — different max-content widths shift the 1fr description track and misalign Qty. */
      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-items-column-headers {
        display: grid;
        grid-template-columns:
          minmax(0, 1fr)
          var(--quote-line-gap)
          var(--quote-qty-col-width)
          var(--quote-line-gap)
          var(--quote-bin-col-width)
          var(--quote-line-gap)
          var(--quote-right-col-width);
        align-items: end;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 4px;
        padding: 0;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-col-h--desc {
        grid-column: 1;
        justify-self: start;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-col-h--qty {
        grid-column: 3;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        text-align: center;
        letter-spacing: normal;
        box-sizing: border-box;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-col-h--bin {
        grid-column: 5;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-col-h--amt {
        grid-column: 7;
        justify-self: end;
        text-align: right;
      }

      #quoteModal .quote-line-items-host,
      #invoiceModal .quote-line-items-host,
      #purchaseOrderModal .quote-line-items-host {
        display: grid;
        gap: 8px;
      }

      #quoteModal .quote-line-add-toolbar,
      #invoiceModal .quote-line-add-toolbar,
      #purchaseOrderModal .quote-line-add-toolbar {
        padding: 0;
        margin: -6px 0 0;
        box-sizing: border-box;
      }

      /* Quote: deposit | discount + subtotal + total. Invoice: deposit + amount received | subtotal + VAT/total + amount due. */
      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-totals-align-row {
        --quote-totals-rhythm: 8px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: start;
        column-gap: 20px;
        row-gap: 0;
        width: 100%;
        box-sizing: border-box;
        margin-top: 8px;
        margin-bottom: 8px;
        padding: 0;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-totals-grid-l1 {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
        align-self: start;
        min-width: 0;
        max-width: 100%;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-totals-grid-rcol {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--quote-totals-rhythm);
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-totals-grid-rcol > .quote-modal-section--totals {
        padding-bottom: 0;
      }

      #quoteModal .quote-totals-grid-rcol .quote-totals-grid-r1,
      #purchaseOrderModal .quote-totals-grid-rcol .quote-totals-grid-r1 {
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        box-sizing: border-box;
      }

      #purchaseOrderModal .quote-totals-grid-rcol .quote-totals-grid-r3 {
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        box-sizing: border-box;
      }

      #purchaseOrderModal .po-purchase-totals-l1-spacer {
        min-height: 6.5rem;
        width: 100%;
        box-sizing: border-box;
      }

      /* Deposit + materials: same fixed width as subtotal/total (.quote-money-input uses --quote-right-col-width). */
      #purchaseOrderModal #poTotalsLayoutService .so-svc-deposit-materials-width-match {
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 14px;
        row-gap: var(--quote-totals-rhythm);
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        align-items: start;
        justify-content: start;
      }

      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-span-cols {
        grid-column: 1 / -1;
        margin: 0;
      }

      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-deposit-input,
      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-materials-input {
        grid-column: 1;
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        justify-self: start;
        box-sizing: border-box;
        text-align: right;
      }

      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-deposit-input {
        text-align: left;
      }

      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-deposit-toggle {
        grid-column: 2;
        align-self: center;
        margin-top: 0 !important;
        white-space: nowrap;
        line-height: 1.2;
      }

      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-preview {
        grid-column: 1;
        align-self: start;
        margin: 0;
      }

      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-materials-label {
        grid-column: 1;
        margin: 0;
      }

      /* Materials line is derived from CIS/material lines for PDF; hide on form only (input stays for recalc). */
      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-materials-label,
      #purchaseOrderModal #poTotalsLayoutService .so-svc-dm-materials-input {
        display: none !important;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-totals-grid-l1 .quote-modal-section--deposit {
        padding: 0;
        margin: 0;
      }

      #invoiceModal .quote-totals-grid-l1 .quote-deposit-wrap--quote-stack .invoice-deposit-field {
        margin-top: var(--quote-totals-rhythm);
      }

      #quoteModal .quote-deposit-wrap--quote-stack,
      #invoiceModal .quote-deposit-wrap--quote-stack {
        max-width: none;
        margin: 0;
      }

      #quoteModal .quote-deposit-controls-row,
      #invoiceModal .quote-deposit-controls-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
      }

      #quoteModal .quote-deposit-pdf-toggle--beside-input,
      #invoiceModal .quote-deposit-pdf-toggle--beside-input {
        margin-top: 0 !important;
        flex-shrink: 0;
        white-space: nowrap;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-totals-align-row .quote-modal-section--totals {
        margin: 0;
        padding: 0;
      }

      /* VAT + subtotal + total: one grid so the VAT toggle stays on the same row as the amount when VAT is off. */
      #quoteModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid,
      #invoiceModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid,
      #purchaseOrderModal #poTotalsLayoutService .quote-line-totals-align-row .quote-totals-vat-subtotal-grid {
        display: grid;
        grid-template-columns: auto var(--quote-right-col-width);
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: var(--quote-totals-rhythm);
        justify-content: end;
        width: max-content;
        max-width: 100%;
        margin-left: auto;
        box-sizing: border-box;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__vat,
      #invoiceModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__vat,
      #purchaseOrderModal #poTotalsLayoutService .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__vat {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        margin-top: 0;
        flex-shrink: 0;
        white-space: nowrap;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__subtotal,
      #invoiceModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__subtotal,
      #purchaseOrderModal #poTotalsLayoutService .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__subtotal {
        grid-column: 2;
        grid-row: 1;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__total,
      #invoiceModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__total,
      #purchaseOrderModal #poTotalsLayoutService .quote-line-totals-align-row .quote-totals-vat-subtotal-grid__total {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        justify-items: end;
        row-gap: 0;
        margin: 0;
        padding: 0;
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        box-sizing: border-box;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-vat-subtotal-grid__total,
      #invoiceModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-vat-subtotal-grid__total,
      #purchaseOrderModal
        #poTotalsLayoutService
        .quote-line-totals-align-row
        .quote-totals-grid-rcol
        .quote-totals-vat-subtotal-grid__total {
        row-gap: var(--quote-totals-rhythm);
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-vat-subtotal-grid__total > .field-label,
      #invoiceModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-vat-subtotal-grid__total > .field-label,
      #purchaseOrderModal
        #poTotalsLayoutService
        .quote-line-totals-align-row
        .quote-totals-grid-rcol
        .quote-totals-vat-subtotal-grid__total
        > .field-label {
        margin: 0 !important;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid--narrow-money,
      #invoiceModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid--narrow-money,
      #purchaseOrderModal
        #poTotalsLayoutService
        .quote-line-totals-align-row
        .quote-totals-vat-subtotal-grid--narrow-money {
        grid-template-rows: auto;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid--narrow-money .quote-totals-vat-subtotal-grid__vat,
      #invoiceModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid--narrow-money .quote-totals-vat-subtotal-grid__vat,
      #purchaseOrderModal
        #poTotalsLayoutService
        .quote-line-totals-align-row
        .quote-totals-vat-subtotal-grid--narrow-money
        .quote-totals-vat-subtotal-grid__vat {
        grid-row: 1;
        align-self: end;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid--narrow-money .quote-totals-vat-subtotal-grid__subtotal,
      #invoiceModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid--narrow-money .quote-totals-vat-subtotal-grid__subtotal,
      #purchaseOrderModal
        #poTotalsLayoutService
        .quote-line-totals-align-row
        .quote-totals-vat-subtotal-grid--narrow-money
        .quote-totals-vat-subtotal-grid__subtotal {
        grid-row: 1;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid--narrow-money .quote-totals-vat-subtotal-grid__total,
      #invoiceModal .quote-line-totals-align-row .quote-totals-vat-subtotal-grid--narrow-money .quote-totals-vat-subtotal-grid__total,
      #purchaseOrderModal
        #poTotalsLayoutService
        .quote-line-totals-align-row
        .quote-totals-vat-subtotal-grid--narrow-money
        .quote-totals-vat-subtotal-grid__total {
        display: none !important;
      }

      #quoteModal .quote-line-totals-align-row .quote-totals-grid-r1 .quote-modal-totals-field,
      #quoteModal .quote-line-totals-align-row .quote-totals-grid-r2 .quote-modal-totals-field,
      #invoiceModal .quote-line-totals-align-row .quote-totals-grid-r2 .quote-modal-totals-field,
      #invoiceModal .quote-line-totals-align-row .quote-totals-grid-r4 .quote-modal-totals-field,
      #purchaseOrderModal .quote-line-totals-align-row .quote-totals-grid-r1 .quote-modal-totals-field,
      #purchaseOrderModal .quote-line-totals-align-row .quote-totals-grid-r2 .quote-modal-totals-field {
        display: grid;
        justify-items: end;
        justify-content: end;
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        margin: 0;
        padding: 0;
        row-gap: 0;
        box-sizing: border-box;
      }

      /* Same vertical rhythm: section gap = label→input = input→hint (discount) */
      #quoteModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-grid-r1 .quote-modal-totals-field,
      #quoteModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-grid-r2 .quote-modal-totals-field,
      #invoiceModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-grid-r2 .quote-modal-totals-field,
      #invoiceModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-grid-r4 .quote-modal-totals-field,
      #purchaseOrderModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-grid-r1 .quote-modal-totals-field,
      #purchaseOrderModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-grid-r2 .quote-modal-totals-field,
      #purchaseOrderModal .quote-line-totals-align-row .quote-totals-grid-rcol .quote-totals-grid-r3 #poTotalWrap {
        row-gap: var(--quote-totals-rhythm);
      }

      #purchaseOrderModal .po-totals-spacer--discount {
        visibility: hidden;
        pointer-events: none;
        min-height: 4.5rem;
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        box-sizing: border-box;
      }

      /* Native select: light “paper” control so it reads as a standard white dropdown */
      #purchaseOrderModal .po-order-title-select {
        width: 100%;
      }

      #purchaseOrderModal #poPurchaseSalesOrderLinkWrap.po-purchase-linked-so-field--error .field-label {
        color: #dc2626;
      }

      #purchaseOrderModal #poPurchaseSalesOrderLinkWrap.po-purchase-linked-so-field--error .po-purchase-linked-so-hint {
        color: #dc2626;
      }

      #purchaseOrderModal #poPurchaseSalesOrderLinkWrap.po-purchase-linked-so-field--error select#poPurchaseLinkedSoSelect {
        border-color: #dc2626 !important;
        color: #dc2626 !important;
        box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
      }

      #purchaseOrderModal #poServiceSalesOrderLinkWrap.po-purchase-linked-so-field--error .field-label {
        color: #dc2626;
      }

      #purchaseOrderModal #poServiceSalesOrderLinkWrap.po-purchase-linked-so-field--error .po-service-linked-so-hint {
        color: #dc2626;
      }

      #purchaseOrderModal #poServiceSalesOrderLinkWrap.po-purchase-linked-so-field--error select#poServiceLinkedSoSelect {
        border-color: #dc2626 !important;
        color: #dc2626 !important;
        box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
      }

      #purchaseOrderModal .po-deliver-to-select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 0.92rem;
        line-height: 1.35;
        cursor: pointer;
        appearance: auto;
      }

      #purchaseOrderModal .po-supplier-combobox-wrap {
        position: relative;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      #purchaseOrderModal .po-supplier-combobox-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 0.92rem;
        line-height: 1.35;
      }

      #purchaseOrderModal .po-supplier-suggestions {
        z-index: 80;
      }

      #purchaseOrderModal .po-customer-combobox-wrap {
        position: relative;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      #purchaseOrderModal .po-customer-suggestions {
        z-index: 80;
      }

      /* Let supplier/customer dropdowns paint outside the form; scroll the modal shell instead (avoids clipping). */
      #purchaseOrderModal.job-modal {
        overflow-x: hidden;
        overflow-y: auto;
      }

      #purchaseOrderModal #purchaseOrderForm.job-modal-body {
        overflow: visible;
      }

      #purchaseOrderModal .po-customer-suggestions-empty {
        padding: 10px 12px;
        font-size: 0.84rem;
        line-height: 1.45;
        color: var(--muted);
      }

      #purchaseOrderModal .po-job-link-select option[value="stock"] {
        font-weight: 700;
      }

      body[data-theme="light"] #purchaseOrderModal .po-deliver-to-select,
      body[data-theme="light"] #purchaseOrderModal .po-supplier-combobox-input,
      body[data-theme="light"] #purchaseOrderModal .po-customer-combobox-input {
        background: #ffffff !important;
        color: #0f172a !important;
        border-color: #94a3b8 !important;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-totals-align-row .quote-totals-grid-rcol .quote-modal-totals-field > .field-label {
        margin: 0 !important;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-totals-align-row .quote-totals-grid-rcol .quote-modal-totals-hint {
        margin: 0 !important;
        padding: 0;
        font-size: 0.78rem;
        color: var(--muted);
        text-align: right;
        width: 100%;
        line-height: 1.2;
        justify-self: end;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .quote-line-totals-align-row .quote-totals-grid-rcol .quote-modal-totals-hint:empty {
        display: none;
      }

      #purchaseOrderModal #poTotalsLayoutPurchase .quote-line-totals-align-row .quote-totals-grid-r3 .quote-total-and-vat-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        align-items: flex-start;
      }

      #purchaseOrderModal #poTotalsLayoutPurchase .quote-line-totals-align-row .quote-totals-grid-r3 .quote-total-and-vat-row > #poTotalWrap {
        flex: 0 0 auto;
      }

      #purchaseOrderModal #poTotalsLayoutPurchase .quote-line-totals-align-row .quote-totals-grid-r3 #poTotalWrap {
        display: grid;
        justify-items: end;
        row-gap: var(--quote-totals-rhythm);
        margin: 0;
        padding: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
      }

      #purchaseOrderModal
        #poTotalsLayoutPurchase
        .quote-line-totals-align-row
        .quote-totals-grid-rcol
        .quote-totals-grid-r3
        #poTotalWrap
        > .field-label {
        margin: 0 !important;
      }

      #quoteModal .quote-line-add-row--quote-aligned,
      #invoiceModal .quote-line-add-row--quote-aligned,
      #purchaseOrderModal .quote-line-add-row--quote-aligned {
        display: grid;
        grid-template-columns:
          minmax(0, 1fr)
          var(--quote-line-gap)
          var(--quote-qty-col-width)
          var(--quote-line-gap)
          var(--quote-bin-col-width)
          var(--quote-line-gap)
          var(--quote-right-col-width);
        margin: 0;
        width: 100%;
      }

      #quoteModal .quote-line-add-row--quote-aligned .tab-inline-action-btn,
      #invoiceModal .quote-line-add-row--quote-aligned .tab-inline-action-btn,
      #purchaseOrderModal .quote-line-add-row--quote-aligned .tab-inline-action-btn {
        grid-column: 1;
        justify-self: start;
        align-self: center;
      }

      #quoteModal .quote-cis-materials-standalone {
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        padding: 0 0 6px;
        margin: 0;
        box-sizing: border-box;
      }

      #quoteModal .quote-cis-materials-quote-stack.quote-cis-materials-standalone {
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        padding: 0;
        margin: 0;
      }

      #quoteModal .quote-cis-materials-standalone .quote-cis-materials-label {
        display: block;
        margin: 0 0 4px;
      }

      /* Same width as Deposit % / discount money column */
      #quoteModal .quote-cis-materials-standalone .quote-cis-materials-input {
        width: var(--quote-right-col-width) !important;
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        box-sizing: border-box;
      }

      #quoteModal .quote-modal-section--deposit {
        padding-bottom: 0;
      }

      #quoteModal .quote-modal-section--deposit .quote-deposit-wrap:not(.quote-deposit-wrap--quote-stack) {
        max-width: 13rem;
      }

      #quoteModal .quote-modal-section--deposit .quote-deposit-wrap--quote-stack,
      #invoiceModal .quote-modal-section--deposit .quote-deposit-wrap--quote-stack {
        max-width: none;
      }

      #quoteModal #quoteDepositAmountPreview,
      #invoiceModal #invoiceDepositAmountPreview {
        margin: 4px 0 0;
        font-size: 0.78rem;
        color: var(--muted);
        min-height: 1.2em;
      }

      #quoteModal .quote-modal-section--totals {
        padding-top: 0;
        padding-bottom: 4px;
        margin-top: 0;
      }

      #quoteModal .quote-bottom-totals-only {
        display: flex;
        justify-content: flex-end;
        width: 100%;
      }

      #quoteModal .quote-modal-section--totals .quote-totals-stack.quote-totals-stack--quote {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }

      #quoteModal .quote-modal-section--totals .quote-totals-stack {
        margin-top: 0 !important;
      }

      #quoteModal .quote-totals-stack.quote-totals-stack--quote .quote-modal-totals-field > .field-label {
        margin-bottom: 2px;
      }

      #descriptionPadModal {
        width: min(620px, calc(100vw - 24px));
      }

      .description-pad-body {
        gap: 12px;
      }

      .description-pad-toolbar {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        align-items: center;
        padding: 5px 6px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: var(--ui-radius);
        background: rgba(15, 23, 42, 0.16);
        overflow-x: auto;
        overflow-y: hidden;
      }

      .description-pad-toolbar .form-select {
        width: auto;
        min-width: 68px;
        min-height: 24px;
        height: 24px;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 8px;
        padding-right: 22px;
        font-size: 0.68rem;
        line-height: 1.1;
      }

      .description-pad-toolbar .description-pad-font-family {
        min-width: 92px;
      }

      .description-pad-toolbar .description-pad-template-select {
        min-width: 96px;
      }

      .description-pad-font-size-group {
        display: inline-flex;
        flex-direction: column;
        gap: 2px;
        flex-shrink: 0;
      }

      .description-pad-font-size-group .description-pad-toolbar-btn {
        min-width: 22px;
        width: 22px;
        height: 20px;
        padding: 0;
      }

      .description-pad-toolbar-btn {
        min-width: 22px;
        width: 22px;
        height: 22px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.68rem;
        color: #94a3b8;
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none;
        flex: 0 0 auto;
      }

      .description-pad-toolbar-btn:hover,
      .description-pad-toolbar-btn.is-active {
        background: transparent !important;
        border-color: transparent !important;
        color: #f8fafc;
      }

      .description-pad-toolbar-divider {
        width: 1px;
        height: 14px;
        background: rgba(148, 163, 184, 0.16);
        flex: 0 0 auto;
      }

      .description-pad-toolbar-icon {
        width: 12px;
        height: 12px;
        display: block;
      }

      .description-pad-toolbar-text-icon {
        font-size: 0.68rem;
        line-height: 1;
      }

      #descriptionPadEditor {
        height: 420px;
        min-height: 420px;
        max-height: 420px;
        padding: 12px 14px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: var(--ui-radius);
        background: #ffffff;
        color: #0f172a;
        outline: none;
        overflow-y: auto;
        line-height: 1.5;
        white-space: pre-wrap;
        word-break: break-word;
      }

      #descriptionPadEditor:empty::before {
        content: attr(data-placeholder);
        color: #64748b;
      }

      #descriptionPadEditor p,
      #descriptionPadEditor div,
      #descriptionPadEditor h2,
      #descriptionPadEditor h3,
      #descriptionPadEditor ul {
        margin-top: 0;
        margin-bottom: 0.6em;
      }

      #descriptionPadEditor ul {
        padding-left: 1.2em;
      }

      #descriptionPadEditor h2 {
        font-size: 1.4rem;
        line-height: 1.25;
      }

      #descriptionPadEditor h3 {
        font-size: 1.1rem;
        line-height: 1.3;
      }

      #quoteForm.job-modal-body,
      #invoiceForm.job-modal-body {
        padding-left: 12px;
        padding-right: 12px;
      }

      #quoteRefInput,
      #quoteTitleInput,
      #quotePropertyInput,
      #invoiceRefInput,
      #invoiceTitleInput,
      #invoicePropertyInput {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
      }

      /* Service Centre add/edit service modal uses square edges by standard. */
      #serviceModal,
      #serviceModal .drawer-head,
      #serviceModal .job-modal-body,
      #serviceModal :where(
        .form-input,
        .form-select,
        .btn,
        .booking-action-btn,
        .property-delete-btn,
        .address-suggestions,
        .address-suggestion-btn
      ) {
        border-radius: var(--ui-radius) !important;
      }

      #serviceModal .service-customer-add-row {
        margin-top: 8px;
        display: flex;
        justify-content: flex-end;
      }

      /* Match Add Service footer button sizing, with green tint. */
      #serviceModal #serviceAddNewCustomerBtn {
        min-width: 30px !important;
        width: auto;
        max-width: none;
        height: 30px;
        border-radius: 7px !important;
        padding: 0 8px !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        letter-spacing: normal;
        line-height: 1.2;
        border: 1px solid rgba(34, 197, 94, 0.72) !important;
        border-bottom: 1px solid rgba(34, 197, 94, 0.72) !important;
        background: rgba(22, 163, 74, 0.28) !important;
        color: #ecfdf5 !important;
      }

      #serviceModal #serviceAddNewCustomerBtn:hover {
        border-color: rgba(74, 222, 128, 0.86) !important;
        background: rgba(22, 163, 74, 0.42) !important;
        color: #ffffff !important;
      }

      .job-modal.open {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
      }

      /* Timeline add (notes, etc.): vertically centered instead of pinned to top */
      .job-modal.job-modal--centered {
        top: 50%;
        transform: translate(-50%, calc(-50% - 24px));
      }

      .job-modal.job-modal--centered.open {
        transform: translate(-50%, -50%);
      }

      /* Ensure the job picker stays above the CP12/service modal when opened from it. */
      #jobPickerBackdrop {
        z-index: 4010;
      }

      #jobPickerModal {
        z-index: 4011;
      }

      /* Match CP12 modal size to customer profile window */
      #boilerServiceModal {
        top: 4px;
        width: min(560px, calc(100vw - 24px));
        height: calc(100vh - 8px);
        max-height: none;
      }

      #gasRateCalculatorModal {
        background: #000000 !important;
        border: 1px solid rgba(148, 163, 184, 0.22) !important;
        color: #ffffff;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
      }

      #gasPipeSizingModal {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a;
      }

      #gasRateCalculatorModal .drawer-head,
      #gasRateCalculatorModal .job-modal-body {
        background: #000000 !important;
      }

      #gasPipeSizingModal .drawer-head,
      #gasPipeSizingModal .job-modal-body {
        background: #ffffff !important;
      }

      #gasRateCalculatorModal .drawer-head {
        background: #000000 !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
        color: #ffffff;
      }

      #gasPipeSizingModal .drawer-head {
        background: var(--profile-header-bg) !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.25);
        color: #ffffff;
      }

      #gasRateCalculatorModal .drawer-title,
      #gasRateCalculatorModal .field-label,
      #gasRateCalculatorModal .section-header {
        color: #ffffff;
      }

      #gasPipeSizingModal .drawer-title,
      #gasPipeSizingModal .field-label,
      #gasPipeSizingModal .section-header {
        color: #0f172a;
      }

      #gasRateCalculatorModal .drawer-head .drawer-title {
        color: #ffffff;
      }

      /* Gas Rate Calculator footer buttons: darker and higher contrast. */
      #gasRateCalculatorModal .drawer-actions > .tab-inline-action-btn {
        border-width: 1.5px !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.28);
      }

      #clearGasRateCalculatorBtn {
        border-color: rgba(51, 65, 85, 0.9) !important;
        background: rgba(30, 41, 59, 0.7) !important;
        color: #f8fafc !important;
      }

      #clearGasRateCalculatorBtn:hover {
        border-color: rgba(100, 116, 139, 0.95) !important;
        background: rgba(30, 41, 59, 0.84) !important;
        color: #ffffff !important;
      }

      #addGasRateCalculatorBtn {
        border-color: rgba(250, 204, 21, 0.95) !important;
        background: rgba(202, 138, 4, 0.78) !important;
        color: #fffbeb !important;
      }

      #addGasRateCalculatorBtn:hover {
        border-color: rgba(253, 230, 138, 0.98) !important;
        background: rgba(202, 138, 4, 0.92) !important;
        color: #ffffff !important;
      }

      #cancelGasRateCalculatorBtn {
        border-color: var(--menu-yellow-border) !important;
        background: var(--menu-yellow-soft) !important;
        color: var(--menu-yellow-text) !important;
      }

      #cancelGasRateCalculatorBtn:hover {
        border-color: var(--menu-yellow-border) !important;
        background: var(--menu-yellow-soft-strong) !important;
        color: var(--menu-yellow-text) !important;
      }

      /* Add Service: green-tinted Save Service button */
      #serviceSubmitBtn {
        border-color: rgba(74, 222, 128, 0.85) !important;
        background: rgba(22, 163, 74, 0.24) !important;
        color: #dcfce7 !important;
      }

      #serviceSubmitBtn:hover {
        border-color: rgba(134, 239, 172, 0.95) !important;
        background: rgba(22, 163, 74, 0.36) !important;
        color: #f0fdf4 !important;
      }

      /* CP12 / Gas Safety Record actions */
      #saveBoilerServiceBtn,
      #saveCp12GasMeterPageBtn,
      #saveCp12AppliancePageBtn {
        border-color: rgba(74, 222, 128, 0.85) !important;
        background: rgba(22, 163, 74, 0.24) !important;
        color: #dcfce7 !important;
      }

      #saveBoilerServiceBtn:hover,
      #saveCp12GasMeterPageBtn:hover,
      #saveCp12AppliancePageBtn:hover {
        border-color: rgba(134, 239, 172, 0.95) !important;
        background: rgba(22, 163, 74, 0.36) !important;
        color: #f0fdf4 !important;
      }

      #cancelCp12GasMeterPageBtn,
      #cancelCp12AppliancePageBtn {
        border-color: rgba(59, 130, 246, 0.95) !important;
        background: rgba(37, 99, 235, 0.78) !important;
        color: #eff6ff !important;
      }

      #cancelCp12GasMeterPageBtn:hover,
      #cancelCp12AppliancePageBtn:hover {
        border-color: rgba(147, 197, 253, 0.98) !important;
        background: rgba(37, 99, 235, 0.92) !important;
        color: #ffffff !important;
      }

      /* Start Timer = light blue (when not running) */
      #gasRateMetricTimerBtn:not([data-running]),
      #gasRateImperialTimerBtn:not([data-running]) {
        border-color: rgba(147, 197, 253, 0.95) !important;
        background: rgba(59, 130, 246, 0.22) !important;
        color: #eff6ff !important;
      }

      #gasRateMetricTimerBtn:not([data-running]):hover,
      #gasRateImperialTimerBtn:not([data-running]):hover {
        border-color: rgba(191, 219, 254, 0.98) !important;
        background: rgba(59, 130, 246, 0.34) !important;
        color: #ffffff !important;
      }

      /* Gas Rate Calculator: Stop Timer = red while running */
      #gasRateMetricTimerBtn[data-running],
      #gasRateImperialTimerBtn[data-running] {
        border-color: rgba(248, 113, 113, 0.95) !important;
        background: rgba(185, 28, 28, 0.85) !important;
        color: #ffffff !important;
      }

      #gasRateMetricTimerBtn[data-running]:hover,
      #gasRateImperialTimerBtn[data-running]:hover {
        border-color: rgba(252, 165, 165, 0.98) !important;
        background: rgba(153, 27, 27, 0.95) !important;
        color: #ffffff !important;
      }

      #gasPipeSizingModal .drawer-head .drawer-title {
        color: #ffffff;
      }

      .gas-pipe-sizing-help {
        margin: 0;
        font-size: 0.78rem;
        color: #334155;
      }

      .gas-pipe-sizing-validation {
        min-height: 1.05rem;
        margin: 0;
        font-size: 0.76rem;
        color: #b91c1c;
      }

      .gas-pipe-sizing-result {
        padding: 8px 10px;
        border: 1px solid rgba(148, 163, 184, 0.4);
        background: #f8fafc;
        color: #0f172a;
        font-size: 0.78rem;
        line-height: 1.4;
      }

      .gas-pipe-sizing-result.is-warning {
        border-color: #fdba74;
        background: #fff7ed;
        color: #9a3412;
      }

      .gas-pipe-sizing-result.is-success {
        border-color: #86efac;
        background: #ecfdf5;
        color: #14532d;
      }

      .gas-pipe-sizing-plan {
        border: 1px solid rgba(148, 163, 184, 0.4);
        background: #ffffff;
        padding: 8px 10px;
      }

      .gas-pipe-sizing-plan-title {
        margin: 0;
        font-size: 0.76rem;
        font-weight: 700;
        color: #0f172a;
      }

      .gas-pipe-sizing-plan-list {
        margin: 4px 0 8px 18px;
        padding: 0;
        color: #1f2937;
        font-size: 0.76rem;
        line-height: 1.45;
      }

      .gas-pipe-sizing-plan-list:last-child {
        margin-bottom: 0;
      }

      .gas-pipe-sizing-chart-wrap {
        border: 1px solid #94a3b8;
        background: #ffffff;
        max-height: 170px;
        overflow: auto;
      }

      .gas-pipe-sizing-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 560px;
        font-size: 0.76rem;
      }

      .gas-pipe-sizing-table th,
      .gas-pipe-sizing-table td {
        padding: 7px 8px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.28);
        border-right: 1px solid rgba(148, 163, 184, 0.22);
        text-align: left;
        background: #ffffff;
        color: #111827;
      }

      .gas-pipe-sizing-table th:last-child,
      .gas-pipe-sizing-table td:last-child {
        border-right: 0;
      }

      .gas-pipe-sizing-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #e2e8f0;
        color: #0f172a;
        font-weight: 700;
      }

      .gas-pipe-sizing-table tbody tr.is-selected-length td {
        background: #eff6ff;
      }

      .gas-pipe-sizing-table td.is-suitable {
        background: #ecfdf5;
      }

      .gas-pipe-sizing-table td.is-recommended {
        background: #dcfce7;
        font-weight: 700;
        color: #14532d;
      }

      .gas-pipe-sizing-empty {
        padding: 10px 8px;
        text-align: center;
        font-size: 0.78rem;
        color: #475569;
      }

      .job-modal-body {
        padding: 14px 14px 12px;
        display: grid;
        gap: 10px;
        overflow-y: auto;
      }

      /* Let job-name preset menu paint outside the short add-job form (matches timeline menu) */
      #jobModal .job-modal-body {
        overflow: visible;
      }

      /* Same for dynamically created “name this job” prompt — preset list layers over the shell, no inner scroll */
      #jobsNewProjectNameModal.job-modal {
        overflow: visible;
      }

      #jobsNewProjectNameModal .job-modal-body {
        overflow: visible;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-row {
        display: grid;
        grid-template-columns:
          minmax(0, 1fr)
          var(--quote-line-gap)
          var(--quote-qty-col-width)
          var(--quote-line-gap)
          var(--quote-bin-col-width)
          var(--quote-line-gap)
          var(--quote-right-col-width);
        grid-template-rows: auto auto;
        row-gap: 6px;
        align-items: start;
        width: 100%;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-desc-wrap {
        display: contents;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-desc-wrap > .quote-line-cis-kind-bar {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 0;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-desc-wrap > .quote-line-desc-input-shell {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-qty-wrap {
        display: contents;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-qty-wrap > .quote-line-qty {
        grid-column: 3;
        grid-row: 2;
        align-self: start;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-remove-wrap {
        display: contents;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-remove-wrap > .quote-line-remove {
        grid-column: 5;
        grid-row: 2;
        align-self: start;
        justify-self: center;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-price-wrap {
        display: contents;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-price-wrap > .quote-line-unit-price {
        grid-column: 7;
        grid-row: 2;
        align-self: start;
        justify-self: end;
      }

      /* CIS bar hidden: single content row — avoid a blank grid track + row-gap above inputs */
      :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-row:not(:has(.quote-line-cis-kind-bar:not(.hidden)))
        .quote-line-desc-input-shell {
        grid-row: 1;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-row:not(:has(.quote-line-cis-kind-bar:not(.hidden)))
        .quote-line-qty-wrap
        > .quote-line-qty {
        grid-row: 1;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-row:not(:has(.quote-line-cis-kind-bar:not(.hidden)))
        .quote-line-remove-wrap
        > .quote-line-remove {
        grid-row: 1;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-row:not(:has(.quote-line-cis-kind-bar:not(.hidden)))
        .quote-line-price-wrap
        > .quote-line-unit-price {
        grid-row: 1;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-template-input {
        position: absolute;
        top: 4px;
        right: 38px;
        width: 300px;
        max-width: calc(100% - 78px);
        height: 30px;
        z-index: 6;
        opacity: 0;
        pointer-events: none;
        background: transparent !important;
        color: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 7px;
        padding: 0 10px;
        font-size: 0.74rem;
        line-height: 1.2;
        caret-color: transparent;
        box-shadow: none !important;
        outline: none !important;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-template-input.quote-line-template-input--open {
        opacity: 1;
        pointer-events: auto;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-template-input:focus,
      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-template-input:focus-visible {
        background: transparent !important;
        color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
      }

      .quote-line-desc-input-shell {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 40px;
      }

      /* Segmented CIS toggle — row 2 of line grid, left-aligned in description column */
      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-cis-kind-btns {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid rgba(100, 116, 139, 0.55);
        background: rgba(15, 23, 42, 0.5);
      }

      body[data-theme="light"] :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-cis-kind-btns {
        border-color: #cbd5e1;
        background: #f1f5f9;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-cis-kind-btn {
        padding: 3px 8px;
        margin: 0;
        font-size: 0.64rem;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: 0.01em;
        border-radius: 0;
        border: none;
        border-right: 1px solid rgba(100, 116, 139, 0.45);
        background: transparent;
        color: #94a3b8;
        cursor: pointer;
        box-sizing: border-box;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-cis-kind-btn:last-child {
        border-right: none;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-cis-kind-btn:hover {
        background: rgba(51, 65, 85, 0.45);
        color: #e2e8f0;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-cis-kind-btn[data-cis-kind="labour"].quote-line-cis-kind-btn--active {
        background: rgba(34, 197, 94, 0.32);
        color: #ecfdf5;
        box-shadow: inset 0 0 0 999px rgba(74, 222, 128, 0.14);
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-cis-kind-btn[data-cis-kind="material"].quote-line-cis-kind-btn--active {
        background: rgba(14, 165, 233, 0.3);
        color: #f0f9ff;
        box-shadow: inset 0 0 0 999px rgba(56, 189, 248, 0.12);
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-cis-kind-btn[data-cis-kind="expenses"].quote-line-cis-kind-btn--active {
        background: rgba(249, 115, 22, 0.34);
        color: #fff7ed;
        box-shadow: inset 0 0 0 999px rgba(251, 146, 60, 0.14);
      }

      body[data-theme="light"] :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-cis-kind-btn {
        color: #64748b;
        border-right-color: #cbd5e1;
      }

      body[data-theme="light"] :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-cis-kind-btn:hover {
        background: #e2e8f0;
        color: #0f172a;
      }

      body[data-theme="light"]
        :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-cis-kind-btn[data-cis-kind="labour"].quote-line-cis-kind-btn--active {
        background: #bbf7d0;
        color: #14532d;
        box-shadow: none;
      }

      body[data-theme="light"]
        :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-cis-kind-btn[data-cis-kind="material"].quote-line-cis-kind-btn--active {
        background: #bae6fd;
        color: #0c4a6e;
        box-shadow: none;
      }

      body[data-theme="light"]
        :where(#quoteLineItems, #invoiceLineItems, #poLineItems)
        .quote-line-cis-kind-btn[data-cis-kind="expenses"].quote-line-cis-kind-btn--active {
        background: #fed7aa;
        color: #9a3412;
        box-shadow: none;
      }

      .quote-line-label {
        margin: 0;
        color: #f8fafc;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        line-height: 1;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-qty {
        width: var(--quote-qty-col-width);
        min-width: var(--quote-qty-col-width);
        max-width: var(--quote-qty-col-width);
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        appearance: textfield;
        -moz-appearance: textfield;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-desc {
        display: block;
        width: 100%;
        min-height: 40px;
        height: 40px;
        max-height: none;
        margin: 0;
        box-sizing: border-box;
        resize: vertical;
        overflow-x: hidden;
        overflow-y: hidden;
        line-height: 1.35;
        padding-right: 74px;
      }

      /* Pad / multi-line */
      .quote-line-row.quote-line-row-desc-grown .quote-line-desc-input-shell,
      .quote-line-row:has(.quote-line-desc.quote-line-desc-expanded) .quote-line-desc-input-shell {
        min-height: 40px;
        height: auto;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-desc.quote-line-desc-expanded {
        height: auto;
        max-height: none;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-expand-btn {
        position: absolute;
        top: 6px;
        right: 6px;
        transform: none;
        width: 28px;
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        color: #0f172a;
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none;
        z-index: 1;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-template-toggle-btn {
        position: absolute;
        top: 6px;
        right: 38px;
        transform: none;
        width: 28px;
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        color: #0f172a;
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none;
        z-index: 1;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-expand-btn:hover {
        color: #000000;
        background: transparent !important;
        border-color: transparent !important;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-template-toggle-btn:hover {
        color: #000000;
        background: transparent !important;
        border-color: transparent !important;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-expand-icon {
        width: 20px;
        height: 20px;
        display: block;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-template-toggle-icon {
        width: 18px;
        height: 18px;
        display: block;
      }

      #quoteLineItems,
      #invoiceLineItems {
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .quote-ref-readonly {
        background: rgba(148, 163, 184, 0.18) !important;
        border-color: rgba(148, 163, 184, 0.42) !important;
        color: #cbd5e1 !important;
        cursor: not-allowed;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-qty::-webkit-outer-spin-button,
      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-qty::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-unit-price {
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        display: block;
        margin-left: auto;
        box-sizing: border-box;
        text-align: right;
      }

      :where(#quoteLineItems, #invoiceLineItems, #poLineItems) .quote-line-remove {
        width: auto;
        min-width: 0;
        min-height: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        line-height: 1;
        margin: 0;
        align-self: start;
        transform: translateX(5px);
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      #addQuoteLineBtn,
      #addInvoiceLineBtn,
      #addPoLineBtn {
        min-width: 42px;
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: var(--ui-radius);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        color: #22c55e !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        margin-bottom: 0;
      }

      #addQuoteLineBtn:hover,
      #addInvoiceLineBtn:hover,
      #addPoLineBtn:hover {
        color: #4ade80 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 0 !important;
      }

      .quote-line-add-row {
        margin-top: -4px;
        margin-bottom: 0;
        display: flex;
        justify-content: flex-start;
      }

      .invoice-form-top-actions {
        display: flex;
        justify-content: flex-end;
        margin-bottom: -2px;
      }

      .quote-vat-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #f8fafc;
        font-size: 1.02rem;
        font-weight: 700;
        line-height: 1.1;
      }

      .quote-totals-stack .quote-vat-toggle {
        margin-top: 4px;
      }

      .quote-form-grid {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
        align-items: flex-start;
        margin-top: -16px;
        margin-bottom: 12px;
      }

      .invoice-form-grid {
        justify-content: space-between;
      }

      .quote-bottom-grid {
        justify-content: space-between;
      }

      .quote-bottom-grid .quote-totals-stack {
        margin-top: 0;
      }

      /* Quote modal: discount above subtotal; VAT left of Total; % inputs match money field width */
      #quoteModal .quote-totals-stack.quote-totals-stack--quote {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-end;
      }

      #quoteModal .quote-totals-stack.quote-totals-stack--quote .quote-subtotal-total-vat-col {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        padding: 0;
        margin: 0;
      }

      /* Same vertical rhythm as Subtotal/Total: label (4px below) + 40px input; optional hint line */
      #quoteModal .quote-totals-stack.quote-totals-stack--quote .quote-subtotal-total-vat-col > .quote-modal-totals-field {
        display: grid;
        justify-items: end;
        justify-content: end;
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        align-self: flex-end;
        row-gap: 0;
      }

      #quoteModal .quote-totals-stack.quote-totals-stack--quote .quote-subtotal-total-vat-col > .quote-modal-totals-field + .quote-modal-totals-field {
        margin-top: 4px;
      }

      #quoteModal .quote-totals-stack.quote-totals-stack--quote .quote-modal-totals-hint {
        margin: 4px 0 0;
        padding: 0;
        font-size: 0.78rem;
        color: var(--muted);
        text-align: right;
        width: 100%;
        line-height: 1.2;
        justify-self: end;
      }

      #quoteModal .quote-totals-stack.quote-totals-stack--quote .quote-modal-totals-hint:empty {
        margin: 0;
        min-height: 0;
        height: 0;
        overflow: hidden;
      }

      #quoteModal .quote-totals-stack.quote-totals-stack--quote .quote-subtotal-total-vat-col > .quote-total-and-vat-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 0;
        margin-top: 4px;
      }

      #quoteModal .quote-totals-stack.quote-totals-stack--quote #quoteTotalWrap {
        display: grid;
        justify-items: end;
        row-gap: 0;
        margin: 0;
        padding: 0;
      }

      #quoteModal .quote-totals-stack.quote-totals-stack--quote .quote-vat-toggle--quote-beside-total {
        margin-top: 0;
        flex-shrink: 0;
        white-space: nowrap;
      }

      .quote-bottom-grid .quote-totals-stack .quote-vat-toggle {
        gap: 6px;
        font-size: 0.86rem;
      }

      .quote-bottom-grid .quote-totals-stack .quote-vat-toggle input[type="checkbox"] {
        transform: scale(1);
      }

      .quote-bottom-grid .quote-deposit-wrap .quote-vat-toggle,
      #quoteModal .quote-modal-section--deposit .quote-deposit-wrap .quote-vat-toggle,
      #invoiceModal .quote-modal-section--deposit .quote-deposit-wrap .quote-vat-toggle {
        margin-top: 10px;
        gap: 6px;
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.1;
        color: #f8fafc;
      }

      .quote-bottom-grid .quote-deposit-wrap .quote-vat-toggle input[type="checkbox"],
      #quoteModal .quote-modal-section--deposit .quote-deposit-wrap .quote-vat-toggle input[type="checkbox"],
      #invoiceModal .quote-modal-section--deposit .quote-deposit-wrap .quote-vat-toggle input[type="checkbox"] {
        transform: scale(1);
      }

      .invoice-form-grid .quote-totals-stack {
        margin-top: 0;
      }

      .invoice-form-grid .quote-totals-stack .quote-vat-toggle {
        gap: 6px;
        font-size: 0.86rem;
      }

      .invoice-form-grid .quote-totals-stack .quote-vat-toggle input[type="checkbox"] {
        transform: scale(1);
      }

      #invoiceModal .quote-form-grid.quote-bottom-grid.invoice-form-grid .quote-totals-stack > .quote-vat-toggle {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        align-self: flex-start;
        width: auto !important;
        max-width: none !important;
        margin-top: 4px !important;
        gap: 6px !important;
        font-size: 0.86rem !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
      }

      #invoiceModal .quote-form-grid.quote-bottom-grid.invoice-form-grid .quote-totals-stack > .quote-vat-toggle > span {
        display: inline !important;
        white-space: nowrap !important;
      }

      .invoice-form-grid .invoice-deposit-wrap .quote-vat-toggle {
        display: inline-flex;
        margin-top: 10px;
        gap: 6px;
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.1;
        color: #f8fafc;
        white-space: nowrap;
        align-items: center;
        flex-wrap: nowrap;
        width: fit-content;
        max-width: 100%;
      }

      .invoice-form-grid .invoice-deposit-wrap .quote-vat-toggle input[type="checkbox"] {
        transform: scale(1);
      }

      .quote-discount-wrap,
      .quote-deposit-wrap,
      .invoice-deposit-wrap {
        min-width: var(--quote-right-col-width);
        align-self: flex-start;
      }

      #quoteModal .quote-deposit-percent-input {
        width: 100%;
        max-width: 120px;
        min-width: 72px;
      }

      /* Deposit % and discount %: same width as Subtotal/Total (.quote-money-input) */
      #quoteModal .quote-bottom-grid > .quote-deposit-wrap .quote-deposit-percent-input,
      #quoteModal .quote-modal-section--deposit .quote-deposit-wrap .quote-deposit-percent-input,
      #quoteModal .quote-totals-stack--quote .quote-discount-wrap .quote-deposit-percent-input,
      #quoteModal .quote-line-totals-align-row .quote-totals-grid-r1 .quote-deposit-percent-input,
      #invoiceModal .quote-line-totals-align-row .quote-modal-section--deposit .quote-deposit-percent-input {
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        box-sizing: border-box;
      }

      .invoice-deposit-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
      }

      .invoice-deposit-stack .invoice-deposit-field {
        width: 100%;
        min-width: 0;
      }

      .quote-vat-toggle input[type="checkbox"] {
        transform: scale(1.25);
        transform-origin: center;
        accent-color: #22c55e;
      }

      .settings-toggle-switch input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 42px;
        height: 24px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.35);
        border: 1px solid rgba(148, 163, 184, 0.5);
        position: relative;
        transform: none;
        transition: background-color 0.18s ease, border-color 0.18s ease;
        cursor: pointer;
      }

      .settings-toggle-switch input[type="checkbox"]::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(2, 6, 23, 0.24);
        transition: transform 0.18s ease;
      }

      .settings-toggle-switch input[type="checkbox"]:checked {
        background: rgba(34, 197, 94, 0.65);
        border-color: rgba(34, 197, 94, 0.85);
      }

      .settings-toggle-switch input[type="checkbox"]:checked::before {
        transform: translateX(18px);
      }

      .quote-totals-stack {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        align-self: start;
        margin-top: -12px;
        align-items: flex-start;
        margin-left: auto;
      }

      .quote-totals-stack .field-label {
        margin: 0 0 4px 0;
        text-align: right;
      }

      .quote-totals-stack > div {
        display: grid;
        justify-items: end;
      }

      .quote-money-input {
        width: var(--quote-right-col-width);
        min-width: var(--quote-right-col-width);
        max-width: var(--quote-right-col-width);
        text-align: right;
        justify-self: end;
      }

      #invoiceModal .invoice-amount-received-input--locked[readonly] {
        cursor: default;
        background: rgba(148, 163, 184, 0.14);
        color: #334155;
      }

      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) .form-input:not(.quote-line-desc) {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        box-sizing: border-box;
      }

      /* Do not force height: auto !important here — it overrides inline heights from auto-size + user resize. */
      :where(#quoteModal, #invoiceModal, #purchaseOrderModal) textarea.quote-line-desc.quote-line-desc-expanded {
        max-height: none !important;
        min-height: 40px !important;
      }

      .job-picker-note {
        margin: 0;
        font-size: 0.78rem;
        color: rgba(229, 231, 235, 0.85);
      }

      .job-picker-note:empty {
        display: none;
      }

      .job-picker-list {
        display: grid;
        gap: 8px;
        max-height: 220px;
        overflow-y: auto;
        padding-right: 2px;
      }

      .job-picker-select-wrap {
        display: grid;
        gap: 6px;
      }

      .job-picker-select-wrap .form-select {
        width: 100%;
      }

      .job-picker-item {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        background: rgba(31, 41, 55, 0.82);
        color: #f9fafb;
        font: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        text-align: left;
        padding: 10px 12px;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
      }

      .job-picker-item:hover {
        background: rgba(55, 65, 81, 0.92);
        border-color: rgba(129, 140, 248, 0.7);
      }

      .job-picker-empty {
        margin: 0;
        border: 1px dashed rgba(255, 255, 255, 0.24);
        border-radius: 10px;
        padding: 10px 12px;
        color: rgba(229, 231, 235, 0.9);
        font-size: 0.8rem;
      }

      .icon-close-btn {
        min-width: 36px;
        height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        line-height: 1;
        background: transparent;
        border: 0;
        box-shadow: none;
      }

      .customer-profile-head {
        display: grid;
        grid-template-columns: 36px 1fr 36px;
        align-items: center;
      }

      .customer-edit-head {
        display: grid;
        grid-template-columns: 36px 1fr 36px;
        align-items: center;
      }

      .customer-edit-title {
        text-align: center;
      }

      .customer-edit-spacer {
        width: 36px;
        height: 36px;
      }

      .customer-profile-title {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0;
      }

      .customer-profile-title-icon {
        width: 24px;
        height: 24px;
        display: inline-flex;
        color: currentColor;
      }

      .customer-profile-spacer {
        width: 36px;
        height: 36px;
      }

      /* One bordered “track” panel per timeline (<details>), everywhere */
      .job-timeline-details {
        display: block;
        margin-top: 10px;
        border: 1px solid rgba(15, 23, 42, 0.28);
        border-radius: var(--ui-radius);
        background: #e8eef5;
        padding: 10px 12px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        position: relative;
        overflow: visible;
      }

      #jobsPage .jobs-page-title .page-title-icon {
        color: #e5e7eb;
      }

      #jobsPage .settings-panel {
        width: min(100%, 1080px);
        margin-left: auto;
        margin-right: auto;
      }

      /* Jobs embedded under Customer Base workspace (not standalone right-side page). */
      #jobsShellPage #jobsPage {
        position: relative;
        min-height: 0;
        min-width: 0;
        padding-top: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        overflow: hidden;
      }

      #jobsShellPage #jobsPage .settings-panel {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 !important;
        /* Kill #jobsPage .panel.settings-panel { padding: 8px 0 24px } — bottoms must line up with Outstanding. */
        padding: 0 !important;
        overflow: hidden;
        box-sizing: border-box;
      }

      #jobsShellPage #jobsPage .jobs-portal-frame {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        margin: 0;
        /* Match Outstanding panels: header + underline start at the inner top (no extra top inset). */
        padding: 0 8px 8px;
      }

      #jobsShellPage #jobsPage #jobsPortalList {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
      }

      #jobsShellPage #jobsPage .jobs-portal-list-section {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
      }

      #jobsShellPage #jobsPage .jobs-page-title {
        display: none;
      }

      /* No single blue box around the whole list — each job is its own white card on the page */
      #jobsPage .panel.settings-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 8px 0 24px !important;
      }

      #jobsPage #jobsPortalList {
        padding: 0;
      }

      #jobsPage #jobsPortalList > .info-value {
        color: var(--muted);
        text-align: center;
        padding: 20px 12px;
        font-weight: 600;
      }

      /* Jobs timeline outer shell: match Customer Base Today's jobs outer container */
      #jobsPage .jobs-portal-nested-page {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 1000px;
        /* Top margin 0: list frame already has margin-top 12px; nested sheet aligns to same vertical start */
        margin: 0 auto 0;
        min-height: 0;
        padding: 8px;
        box-sizing: border-box;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--panel-bg);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 24px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      /* One compact row: back | customer • job (centered) | Created + status */
      #jobsPage .jobs-portal-nested-top {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        flex-shrink: 0;
        min-height: 0;
        padding: 0 0 6px;
        margin: 0;
      }

      #jobsPage .jobs-portal-nested-back-slot {
        position: relative;
        z-index: 2;
        grid-column: 1;
        justify-self: start;
      }

      #jobsPage .jobs-portal-nested-back-slot .jobs-portal-back-btn {
        padding-top: 0;
        padding-bottom: 0;
      }

      #jobsPage .jobs-portal-nested-top .jobs-portal-back-btn.jobs-portal-back-btn--floating {
        padding: 2px 8px 2px 2px;
        font-size: 0.8rem;
        gap: 6px;
      }

      #jobsPage .jobs-portal-nested-top-center {
        grid-column: 2;
        justify-self: center;
        min-width: 0;
        max-width: min(56vw, 480px);
      }

      #jobsPage .jobs-portal-nested-top-meta {
        position: relative;
        z-index: 2;
        grid-column: 3;
        justify-self: end;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px 8px;
        min-width: 0;
      }

      #jobsPage .jobs-portal-nested-top-meta .jobs-portal-drilldown-created {
        margin: 0;
        flex: 0 1 auto;
        font-size: 0.72rem;
        font-weight: 600;
        color: #cbd5e1;
        line-height: 1.2;
        white-space: nowrap;
      }

      #jobsPage .jobs-portal-nested-top-meta .jobs-portal-drilldown-status-corner {
        flex: 0 0 auto;
        margin-left: 0;
        position: relative;
      }

      #jobsPage .jobs-portal-nested-top-meta .jobs-portal-drilldown-status-corner .job-status-menu {
        position: relative;
      }

      #jobsPage .jobs-portal-drilldown-status-corner .job-status-trigger {
        padding: 4px 20px;
        font-size: 0.72rem;
        min-width: 92px;
      }

      /* Inline with status trigger: tighter, vertically centered */
      #jobsPage .jobs-portal-nested-top .jobs-portal-drilldown-customer-job {
        margin: 0;
        padding: 0 4px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0 5px;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1.2;
        color: #e2e8f0;
        text-align: center;
      }

      #jobsPage .jobs-portal-nested-top .jobs-portal-drilldown-customer-link {
        font-size: 0.92rem;
        font-weight: 800;
        line-height: 1.2;
      }

      #jobsPage .jobs-portal-nested-top .jobs-portal-drilldown-job-title {
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.2;
      }

      #jobsPage .jobs-portal-nested-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0 4px;
        box-sizing: border-box;
      }

      /* Customer • job on first line; property address below (normal flow) */
      #jobsPage .jobs-portal-drilldown-address {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0 0 8px;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.3;
        color: #cbd5e1;
        letter-spacing: 0.01em;
        padding: 0 10px;
        box-sizing: border-box;
        pointer-events: auto;
        z-index: auto;
      }

      #jobsPage .jobs-portal-drilldown-customer-link {
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        font-family: inherit;
        font-size: 1.08rem;
        font-weight: 800;
        line-height: inherit;
        color: inherit;
        cursor: pointer;
        text-decoration: none;
        -webkit-appearance: none;
        appearance: none;
      }

      #jobsPage .jobs-portal-drilldown-customer-link:hover,
      #jobsPage .jobs-portal-drilldown-customer-link:focus {
        color: inherit;
        text-decoration: none;
        outline: none;
      }

      #jobsPage .jobs-portal-drilldown-customer-link:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.55);
        outline-offset: 2px;
        border-radius: 2px;
      }

      #jobsPage .jobs-portal-drilldown-sep {
        opacity: 0.9;
        user-select: none;
      }

      #jobsPage .jobs-portal-drilldown-job-title {
        font-size: 0.82rem;
        font-weight: 600;
        color: #cbd5e1;
      }

      #jobsPage .jobs-portal-drilldown-status-menu.job-status-menu[open] {
        z-index: 130;
      }

      /* Drill-down: outer node is chromeless — one “timeline pod” card (.job-item) matches .jobs-portal-timeline */
      #jobsPage.jobs-portal--detail-open .jobs-portal-nested-body .job-node.jobs-portal-detail-node:not(.jobs-portal-timeline-only-node) {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
      }

      #jobsPage.jobs-portal--detail-open .jobs-portal-nested-body .job-node.jobs-portal-detail-node:not(.jobs-portal-timeline-only-node) .job-item {
        background: #e8eef5;
        border: none !important;
        border-radius: var(--ui-radius) !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
      }

      /* Timeline block sits inside the same pod — no second frame (beats global .jobs-portal-timeline !important) */
      #jobsPage.jobs-portal--detail-open .jobs-portal-nested-body .jobs-portal-timeline {
        margin-top: 4px !important;
        padding: 40px 0 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      #jobsPage.jobs-portal--detail-open .jobs-portal-drilldown-job-card .jobs-portal-job-card-actions-tools {
        justify-content: flex-end;
        padding-top: 8px;
      }

      #jobsPage.jobs-portal--detail-open .jobs-portal-drilldown-job-card .jobs-portal-job-card-actions-tools .property-item-tools {
        margin-left: auto;
      }

      /* + control inside timeline shell — not floated above the card edge */
      #jobsPage.jobs-portal--detail-open .jobs-portal-detail-node .job-timeline-shell .job-timeline-add-corner {
        top: 10px;
        right: 12px;
        transform: none;
      }

      /* Always-open timeline (no <details> / collapse) on Jobs drill-down */
      #jobsPage .jobs-portal-timeline--static {
        cursor: default;
      }

      /* Ghost control on slate — white chevron + label, no pill background */
      #jobsPage .jobs-portal-back-btn.jobs-portal-back-btn--floating {
        margin: 0;
        min-height: 0;
        width: 30px;
        height: 30px;
        padding: 0;
        border: none;
        border-radius: var(--ui-radius);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: transparent;
        box-shadow: none;
        transition:
          color 0.15s ease,
          opacity 0.15s ease,
          background 0.15s ease;
      }

      #jobsPage .jobs-portal-back-btn.jobs-portal-back-btn--floating:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
        opacity: 1;
      }

      #jobsPage .jobs-portal-back-btn.jobs-portal-back-btn--floating:active {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
      }

      #jobsPage .jobs-portal-back-btn.jobs-portal-back-btn--floating .jobs-portal-back-svg {
        width: 18px;
        height: 18px;
        display: block;
        flex-shrink: 0;
        color: #ffffff;
      }

      #jobsPage .jobs-portal-detail-card--solo {
        width: 100%;
      }

      /* Timeline-only chrome (no job header / edit / delete on Jobs nav detail) */
      #jobsPage .jobs-portal-timeline-only-node {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
      }

      #jobsPage .jobs-portal-timeline-only-shell {
        width: 100%;
        margin: 0;
      }

      /* Jobs page list shell: match Customer Base Today's jobs outer container style */
      #jobsPage .jobs-portal-frame {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: 1000px;
        margin: 12px auto 0;
        box-sizing: border-box;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--panel-bg);
        padding: 8px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 24px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      /* Timeline drill-down: avoid double slate — nested page supplies the panel */
      #jobsPage .jobs-portal-frame.jobs-portal-frame--detail {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
      }

      #jobsPage .jobs-portal-toolbar.jobs-portal-toolbar-stack {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        margin: 0 0 8px;
        box-sizing: border-box;
      }

      #jobsPage .jobs-portal-toolbar-stack > .jobs-portal-toolbar-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px 16px;
        width: 100%;
      }

      /* Header row: title left, add button on the right — match Outstanding header band (even padding above/below underline). */
      #jobsPage .jobs-portal-toolbar-row--search-top {
        position: relative;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 8px 0;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      #jobsPage .jobs-portal-header-title {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        margin: 0 auto 0 6px;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #e2e8f0;
        text-transform: uppercase;
        line-height: 1;
        pointer-events: none;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      #jobsPage .jobs-portal-header-title::before {
        content: "";
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4' y='5' width='16' height='15' rx='2' stroke='%23e2e8f0' stroke-width='2'/%3E%3Cpath d='M9 5V3.8A1.8 1.8 0 0 1 10.8 2h2.4A1.8 1.8 0 0 1 15 3.8V5' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      }

      /* Keep Customer Base section headers consistent with Jobs header typography. */
      .customer-jobs-snapshot-stack .customer-day-jobs-title,
      .customer-list-header {
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        line-height: 1;
      }

      .customer-jobs-snapshot-stack .customer-today-jobs-panel .customer-day-jobs-title,
      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-day-jobs-title {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .customer-jobs-snapshot-stack .customer-today-jobs-panel .customer-day-jobs-title::before,
      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-day-jobs-title::before {
        content: "";
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
      }

      .customer-jobs-snapshot-stack .customer-today-jobs-panel .customer-day-jobs-title::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.2' stroke='%23e2e8f0' stroke-width='2'/%3E%3Cpath d='M12 7.6v4.7l3 1.8' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      .customer-jobs-snapshot-stack .customer-service-due-panel .customer-day-jobs-title::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4' y='5' width='16' height='15' rx='2' stroke='%23e2e8f0' stroke-width='2'/%3E%3Cpath d='M8 3.8V6M16 3.8V6M8 11.2h8M8 14.8h5' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      }

      #jobsPage .jobs-portal-toggle-search-cluster {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        flex: 0 1 auto;
        min-width: 0;
      }

      #jobsPage .jobs-portal-toggle-search-cluster #jobsPortalToggleHost {
        flex: 0 0 auto;
      }

      #jobsPage .jobs-portal-add-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      /* Search next to Active / Archived toggle; fixed width unchanged. */
      #jobsPage .jobs-portal-toggle-search-cluster .customer-search {
        flex: 0 0 228px;
        min-width: 0;
        max-width: 228px;
        width: 228px;
        margin-left: 0;
        font-size: 0.82rem;
        padding: 8px 10px 8px 31px;
        background-position: 10px center;
      }

      #jobsPage .jobs-portal-add-job-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0 2px;
        min-width: 0;
        border: none;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--app-add-glyph);
        cursor: pointer;
        border-radius: var(--ui-radius);
        line-height: 0;
        -webkit-appearance: none;
        appearance: none;
      }

      #jobsPage .jobs-portal-add-job-btn:hover {
        color: var(--app-add-glyph-hover);
        opacity: 1;
      }

      #jobsPage .jobs-portal-add-job-btn:focus {
        outline: none;
      }

      #jobsPage .jobs-portal-add-job-btn:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.75);
        outline-offset: 3px;
      }

      #jobsPage .jobs-portal-add-job-svg {
        width: 26px;
        height: 26px;
        display: block;
        color: currentColor;
      }

      #jobsPage .jobs-portal-add-job-glyph {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-size: 2rem;
        font-weight: 700;
        line-height: 0.9;
        color: currentColor;
      }

      .jobs-pick-customer-search {
        width: 100%;
        margin-bottom: 10px;
        box-sizing: border-box;
      }

      /* Match address / form-select suggestion rows — soft highlight, readable text */
      .jobs-pick-customer-list {
        max-height: min(52vh, 360px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid rgba(15, 23, 42, 0.14);
        border-radius: var(--ui-radius);
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
      }

      .jobs-pick-customer-row {
        display: block;
        width: 100%;
        text-align: left;
        padding: 9px 10px;
        margin: 0;
        border: 0;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 0;
        background: transparent;
        color: #111827;
        font: inherit;
        font-size: 0.84rem;
        line-height: 1.45;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }

      .jobs-pick-customer-row:last-child {
        border-bottom: 0;
      }

      .jobs-pick-customer-row:hover {
        background: var(--form-select-highlight-soft);
      }

      .jobs-pick-customer-row--selected,
      .jobs-pick-customer-row--selected:hover {
        background: var(--form-select-highlight-mid);
      }

      .jobs-pick-customer-row:focus {
        outline: none;
      }

      .jobs-pick-customer-row:focus-visible {
        outline: 2px solid rgba(37, 99, 235, 0.45);
        outline-offset: -2px;
        background: var(--form-select-highlight-mid);
        position: relative;
        z-index: 1;
      }

      .jobs-pick-customer-row:active {
        background: var(--form-select-highlight-mid);
      }

      .jobs-pick-customer-empty {
        margin: 8px 0 0;
      }

      .initial-job-property-pick-select {
        width: 100%;
        max-width: 100%;
      }

      /* Customer drawer: Save Customer — tinted green */
      #customerDrawer .customer-save-submit-btn.dialog-action-btn--primary {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(52, 211, 153, 0.58) !important;
        color: #d1fae5 !important;
      }

      #customerDrawer .customer-save-submit-btn.dialog-action-btn--primary:hover {
        background: rgba(34, 197, 94, 0.52) !important;
        border-color: rgba(110, 231, 183, 0.72) !important;
        color: #ecfdf5 !important;
      }

      body[data-theme="light"] #customerDrawer .customer-save-submit-btn.dialog-action-btn--primary {
        background: rgba(22, 163, 74, 0.16) !important;
        border-color: rgba(22, 163, 74, 0.42) !important;
        color: #14532d !important;
      }

      body[data-theme="light"] #customerDrawer .customer-save-submit-btn.dialog-action-btn--primary:hover {
        background: rgba(22, 163, 74, 0.26) !important;
        border-color: rgba(21, 128, 61, 0.5) !important;
        color: #052e16 !important;
      }

      /* Add / edit customer: Add Property — same green family as other “add” actions */
      #customerDrawer .customer-add-property-btn {
        background: rgba(34, 197, 94, 0.22) !important;
        border-color: rgba(52, 211, 153, 0.52) !important;
        color: #d1fae5 !important;
      }

      #customerDrawer .customer-add-property-btn:hover {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(110, 231, 183, 0.68) !important;
        color: #ecfdf5 !important;
      }

      body[data-theme="light"] #customerDrawer .customer-add-property-btn {
        background: rgba(22, 163, 74, 0.14) !important;
        border-color: rgba(22, 163, 74, 0.42) !important;
        color: #14532d !important;
      }

      body[data-theme="light"] #customerDrawer .customer-add-property-btn:hover {
        background: rgba(22, 163, 74, 0.26) !important;
        border-color: rgba(21, 128, 61, 0.52) !important;
        color: #052e16 !important;
      }

      /* Add job → New customer: tinted green (positive path) */
      #jobsAddJobChoiceModal .drawer-actions > .jobs-add-job-choice-btn--new.dialog-action-btn--primary {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(52, 211, 153, 0.58) !important;
        color: #d1fae5 !important;
      }

      #jobsAddJobChoiceModal .drawer-actions > .jobs-add-job-choice-btn--new.dialog-action-btn--primary:hover {
        background: rgba(34, 197, 94, 0.52) !important;
        border-color: rgba(110, 231, 183, 0.72) !important;
        color: #ecfdf5 !important;
      }

      body[data-theme="light"] #jobsAddJobChoiceModal .drawer-actions > .jobs-add-job-choice-btn--new.dialog-action-btn--primary {
        background: rgba(22, 163, 74, 0.16) !important;
        border-color: rgba(22, 163, 74, 0.42) !important;
        color: #14532d !important;
      }

      body[data-theme="light"] #jobsAddJobChoiceModal .drawer-actions > .jobs-add-job-choice-btn--new.dialog-action-btn--primary:hover {
        background: rgba(22, 163, 74, 0.26) !important;
        border-color: rgba(21, 128, 61, 0.5) !important;
        color: #052e16 !important;
      }

      /* Add Job modal: Create Job button green in add mode only. */
      #jobModal:not(.job-modal--edit) #jobSubmitBtn.dialog-action-btn--primary {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(52, 211, 153, 0.58) !important;
        color: #d1fae5 !important;
      }

      #jobModal:not(.job-modal--edit) #jobSubmitBtn.dialog-action-btn--primary:hover {
        background: rgba(34, 197, 94, 0.52) !important;
        border-color: rgba(110, 231, 183, 0.72) !important;
        color: #ecfdf5 !important;
      }

      body[data-theme="light"] #jobModal:not(.job-modal--edit) #jobSubmitBtn.dialog-action-btn--primary {
        background: rgba(22, 163, 74, 0.16) !important;
        border-color: rgba(22, 163, 74, 0.42) !important;
        color: #14532d !important;
      }

      body[data-theme="light"] #jobModal:not(.job-modal--edit) #jobSubmitBtn.dialog-action-btn--primary:hover {
        background: rgba(22, 163, 74, 0.26) !important;
        border-color: rgba(21, 128, 61, 0.5) !important;
        color: #052e16 !important;
      }

      /* New customer flow: “Create a job for this customer?” — match Add Job Create Job (green). */
      #startJobPromptModal #startJobPromptYesBtn.dialog-action-btn--primary {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(52, 211, 153, 0.58) !important;
        color: #d1fae5 !important;
      }

      #startJobPromptModal #startJobPromptYesBtn.dialog-action-btn--primary:hover {
        background: rgba(34, 197, 94, 0.52) !important;
        border-color: rgba(110, 231, 183, 0.72) !important;
        color: #ecfdf5 !important;
      }

      body[data-theme="light"] #startJobPromptModal #startJobPromptYesBtn.dialog-action-btn--primary {
        background: rgba(22, 163, 74, 0.16) !important;
        border-color: rgba(22, 163, 74, 0.42) !important;
        color: #14532d !important;
      }

      body[data-theme="light"] #startJobPromptModal #startJobPromptYesBtn.dialog-action-btn--primary:hover {
        background: rgba(22, 163, 74, 0.26) !important;
        border-color: rgba(21, 128, 61, 0.5) !important;
        color: #052e16 !important;
      }

      #appConfirmModal.app-confirm--success #appConfirmOkBtn.dialog-action-btn--primary {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(52, 211, 153, 0.58) !important;
        color: #d1fae5 !important;
      }

      #appConfirmModal.app-confirm--confirm-left #appConfirmOkBtn {
        order: -1;
      }

      #appConfirmModal.app-confirm--confirm-left #appConfirmCancelBtn {
        order: 0;
      }

      #appConfirmModal.app-confirm--success #appConfirmOkBtn.dialog-action-btn--primary:hover {
        background: rgba(34, 197, 94, 0.52) !important;
        border-color: rgba(110, 231, 183, 0.72) !important;
        color: #ecfdf5 !important;
      }

      body[data-theme="light"] #appConfirmModal.app-confirm--success #appConfirmOkBtn.dialog-action-btn--primary {
        background: rgba(22, 163, 74, 0.16) !important;
        border-color: rgba(22, 163, 74, 0.42) !important;
        color: #14532d !important;
      }

      body[data-theme="light"] #appConfirmModal.app-confirm--success #appConfirmOkBtn.dialog-action-btn--primary:hover {
        background: rgba(22, 163, 74, 0.26) !important;
        border-color: rgba(21, 128, 61, 0.5) !important;
        color: #052e16 !important;
      }

      #certNewJobModal #certNewJobCancelBtn {
        background: rgba(59, 130, 246, 0.3) !important;
        border-color: rgba(96, 165, 250, 0.52) !important;
        color: #dbeafe !important;
      }

      #certNewJobModal #certNewJobCancelBtn:hover {
        background: rgba(59, 130, 246, 0.45) !important;
        border-color: rgba(147, 197, 253, 0.7) !important;
        color: #eff6ff !important;
      }

      #certNewJobModal #certNewJobSubmitBtn.dialog-action-btn--primary {
        background: rgba(34, 197, 94, 0.38) !important;
        border-color: rgba(52, 211, 153, 0.58) !important;
        color: #d1fae5 !important;
      }

      #certNewJobModal #certNewJobSubmitBtn.dialog-action-btn--primary:hover {
        background: rgba(34, 197, 94, 0.52) !important;
        border-color: rgba(110, 231, 183, 0.72) !important;
        color: #ecfdf5 !important;
      }

      #jobsPage .jobs-portal-filter-toggle {
        display: inline-flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        padding: 3px;
        border-radius: var(--ui-radius);
        overflow: hidden;
        background: rgba(0, 0, 0, 0.22);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
      }

      #jobsPage .jobs-portal-filter-seg {
        margin: 0;
        border: none;
        cursor: pointer;
        font: inherit;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 8px 14px;
        border-radius: 0;
        background: transparent;
        color: #94a3b8;
        transition:
          background 0.18s ease,
          color 0.18s ease,
          box-shadow 0.18s ease;
      }

      #jobsPage .jobs-portal-filter-seg:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.65);
        outline-offset: 2px;
      }

      #jobsPage .jobs-portal-filter-seg--on.jobs-portal-filter-seg--green {
        background: linear-gradient(180deg, rgba(34, 197, 94, 0.55) 0%, rgba(22, 163, 74, 0.5) 100%);
        color: #ecfdf5;
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.2) inset,
          0 2px 8px rgba(22, 163, 74, 0.25);
      }

      #jobsPage .jobs-portal-filter-seg--on.jobs-portal-filter-seg--blue {
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.55) 0%, rgba(37, 99, 235, 0.52) 100%);
        color: #eff6ff;
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.2) inset,
          0 2px 8px rgba(37, 99, 235, 0.28);
      }

      #jobsPage .jobs-portal-empty-msg {
        margin: 0;
      }

      #jobsPage .jobs-portal-search-empty {
        margin: 0 0 10px;
      }

      #jobsPage .jobs-portal-list-section {
        width: 100%;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-sizing: border-box;
        box-shadow: none;
      }

      /* Active jobs inner container: match Customer Base Today's jobs inner surface */
      #jobsPage .jobs-portal-active-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0 4px;
        box-sizing: border-box;
      }

      /*
       * Customer Base embedded jobs list: scroll lives here (flex-basis 0 so rows overflow and scrollbar shows).
       * Table layout matches “This month’s services” — one thead + tbody so columns stay aligned.
       */
      #jobsShellPage #jobsPage .jobs-portal-active-list {
        --jobs-db-visible-rows: 10;
        --jobs-db-row-height: 52px;
        --jobs-db-window-height: calc(var(--jobs-db-visible-rows) * var(--jobs-db-row-height) - 30px);
        --jobs-portal-scroll-track: #e2e8f0;
        --jobs-portal-scroll-thumb: #94a3b8;
        --jobs-portal-scroll-thumb-hover: #64748b;
        flex: 1 1 0%;
        min-height: 0;
        height: auto;
        overflow-y: scroll !important;
        overflow-x: auto;
        scrollbar-gutter: auto;
        scrollbar-color: var(--jobs-portal-scroll-thumb) var(--jobs-portal-scroll-track);
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-top: 0;
        border-radius: 0 0 var(--ui-radius) var(--ui-radius) !important;
        background: var(--jobs-portal-scroll-track);
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar {
        width: 17px;
        height: 17px;
        background: var(--jobs-portal-scroll-track);
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-track {
        background: var(--jobs-portal-scroll-track);
        margin: 4px 4px 0 4px;
        border-radius: 8px;
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-corner {
        background: var(--jobs-portal-scroll-track);
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-thumb {
        background-color: var(--jobs-portal-scroll-thumb);
        border-radius: 5px;
        border: 3px solid var(--jobs-portal-scroll-track);
        background-clip: padding-box;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.35),
          inset 0 -1px 0 rgba(0, 0, 0, 0.12);
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-thumb:hover {
        background-color: var(--jobs-portal-scroll-thumb-hover);
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-button {
        display: block;
        height: 15px;
        width: 17px;
        background-color: var(--jobs-portal-scroll-track);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 11px 11px;
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-button:vertical:start:decrement,
      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-button:single-button:vertical:decrement {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 14l4-4 4 4' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-button:vertical:end:increment,
      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-button:single-button:vertical:increment {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 10l4 4 4-4' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      #jobsShellPage #jobsPage .jobs-portal-active-list::-webkit-scrollbar-button:hover {
        background-color: rgba(148, 163, 184, 0.35);
      }

      body[data-theme="light"] #jobsShellPage #jobsPage .jobs-portal-active-list {
        --jobs-portal-scroll-track: #e8eef4;
        --jobs-portal-scroll-thumb: #94a3b8;
        --jobs-portal-scroll-thumb-hover: #64748b;
      }

      #jobsShellPage #jobsPage .jobs-portal-toolbar {
        flex-shrink: 0;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table {
        width: 100%;
        min-width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
        background: #ffffff;
        font-size: 0.84rem;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table col.jobs-portal-db-col--name {
        width: 20%;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table col.jobs-portal-db-col--job {
        width: 22%;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table col.jobs-portal-db-col--addr {
        width: auto;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table col.jobs-portal-db-col--status {
        width: 92px;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table thead {
        background-color: #e2e8f0;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        background: #e2e8f0 !important;
        color: #0f172a !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.2);
        border-right: 1px solid rgba(15, 23, 42, 0.14);
        padding: 6px 7px !important;
        font-size: 0.74rem !important;
        line-height: 1.25;
        font-weight: 700;
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table thead th:last-child {
        border-right: 0 !important;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table thead th.jobs-portal-db-th--status {
        text-align: center;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody td {
        min-width: 0;
        border-bottom: 1px solid rgba(15, 23, 42, 0.1);
        border-right: 1px solid rgba(15, 23, 42, 0.1);
        padding: 6px 7px !important;
        font-size: 0.84rem !important;
        line-height: 1.35;
        vertical-align: middle;
        text-align: left;
        box-sizing: border-box;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody td:last-child {
        border-right: 0 !important;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody td.jobs-portal-db-td--status {
        text-align: center;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody tr:last-child td {
        border-bottom: 0 !important;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody tr.jobs-portal-job-shell {
        height: var(--jobs-db-row-height);
        min-height: var(--jobs-db-row-height);
        background: #ffffff;
        position: relative;
        z-index: 1;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody tr.jobs-portal-job-shell:nth-child(even) {
        background: #f8fafc;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody tr.jobs-portal-job-shell:hover {
        background: #e2e8f0 !important;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody tr.jobs-portal-job-shell.jobs-portal-list-row--selected {
        background: #eef2ff !important;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table tbody tr.jobs-portal-job-shell.jobs-portal-job-shell--status-open {
        z-index: 1200;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .jobs-portal-list-customer-name {
        margin: 0;
        padding: 0;
        border: 0;
        min-width: 0;
        font-size: 0.76rem;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.25;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .jobs-portal-list-job-title {
        margin: 0 !important;
        min-width: 0;
        font-size: 0.76rem;
        font-weight: 600 !important;
        color: #334155 !important;
        line-height: 1.25;
        display: block;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .customer-profile-job-address {
        margin: 0;
        min-width: 0;
        font-size: 0.74rem;
        color: #64748b;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .jobs-portal-list-status-cell {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: relative;
        z-index: 40;
        width: 100%;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .jobs-portal-list-status-cell .job-status-menu {
        margin: 0;
        position: relative;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .jobs-portal-list-status-cell .job-status-menu[open] {
        z-index: 2500;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .jobs-portal-list-status-cell .job-status-trigger {
        min-width: 74px;
        padding: 3px 10px;
        font-size: 0.66rem;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .jobs-portal-list-status-text {
        font-size: 0.72rem;
        font-weight: 700;
        color: #334155;
        padding-left: 0;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .jobs-portal-db-empty-cell {
        vertical-align: middle;
        text-align: center;
        border-right: 0 !important;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .profile-card-actions.job-card-actions {
        display: none;
      }

      #jobsShellPage #jobsPage .jobs-portal-db-table .job-created-next-to-status {
        margin: 0;
        font-size: 0.72rem;
        color: #64748b;
        white-space: nowrap;
      }

      #jobsPage tr.jobs-portal-job-shell[data-jobs-portal-list-card] {
        cursor: pointer;
      }

      #jobsPage .jobs-portal-list-section > .jobs-portal-empty-msg,
      #jobsPage .jobs-portal-list-section > .jobs-portal-search-empty {
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: 10px;
        background: var(--container-surface-bg);
        color: #334155;
        margin: 0;
        padding: 14px 12px;
        box-sizing: border-box;
      }

      /* Empty-state copy under column headers: no extra box, lighter text (Customer Base + standalone Jobs). */
      #jobsPage .jobs-portal-list-section[aria-label*="archived" i] .jobs-portal-active-list .jobs-portal-empty-msg,
      #jobsPage .jobs-portal-list-section[aria-label*="active" i] .jobs-portal-active-list .jobs-portal-empty-msg {
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #94a3b8;
        padding: 4px 0;
      }

      /* Zero jobs: same stack as populated list (header row + scroll body), like This month’s services. */
      #jobsPage .jobs-portal-list-section--empty {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

      #jobsShellPage #jobsPage .jobs-portal-list-section--empty {
        width: 100%;
        max-width: none;
        margin: 0;
      }

      #jobsPage .jobs-portal-list-section--empty .jobs-portal-active-list {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }

      #jobsPage .jobs-portal-list-section--empty .jobs-portal-empty-msg {
        border: none !important;
        background: #ffffff !important;
        margin: 0;
        padding: 10px 8px;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        color: #475569 !important;
      }

      /* Chromeless wrapper: cards sit on the frame like .customer-day-jobs-row on .customer-day-jobs-panel */
      #jobsPage .jobs-portal-job-shell {
        box-sizing: border-box;
        width: 100%;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
      }

      #jobsPage .jobs-portal-job-shell:has(.jobs-portal-list-row--selected) {
        border: none;
        box-shadow: none;
      }

      /* Selected list card: no border — soft inset emboss (must beat list-card border rule) */
      #jobsPage .jobs-portal-job-shell .job-item.customer-profile-job-row.jobs-portal-list-row--selected[data-jobs-portal-list-card] {
        border: none !important;
        background: linear-gradient(180deg, #f4f6ff 0%, #e8ecfa 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.95),
          inset 0 -2px 5px rgba(15, 23, 42, 0.06),
          inset 2px 0 4px rgba(255, 255, 255, 0.35),
          inset -2px 0 4px rgba(15, 23, 42, 0.04);
      }

      #jobsPage .jobs-portal-job-shell .job-item.customer-profile-job-row.jobs-portal-list-row--selected[data-jobs-portal-list-card]:hover {
        transform: none;
        border: none !important;
        background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.95),
          inset 0 -2px 5px rgba(15, 23, 42, 0.06),
          inset 2px 0 4px rgba(255, 255, 255, 0.35),
          inset -2px 0 4px rgba(15, 23, 42, 0.04),
          0 4px 12px rgba(79, 70, 229, 0.12);
      }

      #jobsPage .jobs-portal-job-shell [data-jobs-portal-list-card] {
        cursor: pointer;
      }

      /* Jobs list rows: same left accent strip + whole-card hover as .customer-item */
      #jobsPage .jobs-portal-job-shell .job-item.customer-profile-job-row[data-jobs-portal-list-card] {
        position: relative;
        border: 1px solid rgba(15, 23, 42, 0.16) !important;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 251, 255, 0.96) 55%, rgba(240, 245, 255, 0.96) 100%);
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
        padding-left: 13px;
      }

      #jobsPage .jobs-portal-job-shell .job-item.customer-profile-job-row[data-jobs-portal-list-card]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: var(--ui-radius) 0 0 var(--ui-radius);
        background: rgba(79, 70, 229, 0.18);
        pointer-events: none;
      }

      #jobsPage .jobs-portal-job-shell .job-item.customer-profile-job-row[data-jobs-portal-list-card]:hover {
        background:
          linear-gradient(135deg, rgba(238, 242, 255, 0.98) 0%, rgba(231, 237, 255, 0.98) 55%, rgba(224, 232, 255, 0.98) 100%);
        border-color: rgba(79, 70, 229, 0.4) !important;
        box-shadow: 0 6px 14px rgba(79, 70, 229, 0.16);
        transform: translateY(-1px);
      }

      #jobsPage .jobs-portal-job-shell .job-item.customer-profile-job-row[data-jobs-portal-list-card]:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.16);
      }

      #jobsPage .jobs-portal-job-shell .job-item.customer-profile-job-row.jobs-portal-list-row--selected[data-jobs-portal-list-card]::before {
        background: rgba(79, 70, 229, 0.42);
      }

      /* Same separator rhythm as .customer-list-header (line sits under name only; no negative margins). */
      #jobsPage .jobs-portal-job-shell .jobs-portal-list-customer-name {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 0 6px;
        padding: 0 0 6px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.14);
        font-size: 0.95rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.25;
        letter-spacing: -0.01em;
      }

      #jobsPage .jobs-portal-job-shell [data-jobs-portal-list-card] .jobs-portal-list-job-head .customer-profile-job-name-static.jobs-portal-list-job-title {
        font-weight: 400;
        margin: 0 0 4px;
        display: block;
        width: 100%;
        max-width: 100%;
        text-align: left;
        text-decoration: none;
        cursor: inherit;
        color: #0f172a;
      }

      #jobsPage .jobs-portal-detail-card {
        width: 100%;
      }

      /* Same shell as customer profile Jobs tab (.job-list > .job-timeline > .job-node) */
      #jobsPage .jobs-portal-detail-card--solo.job-list {
        background: transparent;
        border: 0;
        padding: 0;
        box-shadow: none;
      }

      /* Active-jobs card click opens timeline in overlay window. */
      .jobs-portal-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(2, 6, 23, 0.78);
        display: grid;
        place-items: center;
        padding: 12px;
      }

      .jobs-portal-modal-window {
        width: min(1100px, calc(100vw - 24px));
        height: min(92vh, 980px);
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
      }

      .jobs-portal-modal-window .jobs-portal-nested-page {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
        position: relative;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.84);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 24px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      .jobs-portal-modal-window .jobs-portal-nested-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0 22px 20px;
        box-sizing: border-box;
        overflow: auto;
      }

      /* Close control: top-left (in grid back slot), same footprint as profile tool buttons */
      .jobs-portal-modal-window .jobs-portal-nested-back-slot .jobs-portal-modal-x-btn {
        position: static;
        width: 30px;
        height: 30px;
        border-radius: var(--ui-radius);
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #f8fafc;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 auto;
      }

      .jobs-portal-modal-window .jobs-portal-nested-back-slot .jobs-portal-modal-x-btn:hover {
        background: transparent !important;
        box-shadow: none !important;
        color: #ffffff;
      }

      /* Mirror original Jobs-page timeline presentation inside popup. */
      .jobs-portal-modal-window .jobs-portal-nested-top {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        flex-shrink: 0;
        min-height: 34px;
        padding: 6px 0 8px;
        margin: 0;
      }

      .jobs-portal-modal-window .jobs-portal-nested-back-slot {
        position: absolute;
        z-index: 2;
        right: 0;
        top: 0;
        grid-column: auto;
        justify-self: auto;
      }

      .jobs-portal-modal-window .jobs-portal-nested-top-center {
        grid-column: 2;
        justify-self: center;
        min-width: 0;
        max-width: min(56vw, 480px);
      }

      .jobs-portal-modal-window .jobs-portal-nested-top-meta {
        position: relative;
        z-index: 2;
        grid-column: 3;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        min-width: 0;
      }

      .jobs-portal-modal-window .jobs-portal-nested-top-meta .jobs-portal-drilldown-created {
        margin: 0;
        flex: 0 1 auto;
        font-size: 0.72rem;
        font-weight: 600;
        color: #cbd5e1;
        line-height: 1.2;
        white-space: nowrap;
      }

      .jobs-portal-modal-window .jobs-portal-nested-top-meta .jobs-portal-drilldown-created {
        display: none;
      }

      .jobs-portal-modal-window .jobs-portal-nested-top-meta .jobs-portal-drilldown-status-corner .job-status-menu {
        position: relative;
      }

      .jobs-portal-modal-window .jobs-portal-drilldown-status-corner .job-status-trigger {
        padding: 4px 20px;
        font-size: 0.72rem;
        min-width: 92px;
      }

      .jobs-portal-modal-window .jobs-portal-nested-top .jobs-portal-drilldown-customer-job {
        margin: 0;
        padding: 0 4px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0 5px;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1.2;
        color: #e2e8f0;
        text-align: center;
      }

      .jobs-portal-modal-window .jobs-portal-nested-top .jobs-portal-drilldown-customer-link {
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        font-family: inherit;
        font-size: 0.92rem;
        font-weight: 800;
        line-height: 1.2;
        color: inherit;
        cursor: pointer;
        text-decoration: none;
        -webkit-appearance: none;
        appearance: none;
      }

      .jobs-portal-modal-window .jobs-portal-drilldown-customer-link:hover,
      .jobs-portal-modal-window .jobs-portal-drilldown-customer-link:focus {
        color: inherit;
        text-decoration: none;
        outline: none;
      }

      .jobs-portal-modal-window .jobs-portal-drilldown-customer-link:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.55);
        outline-offset: 2px;
        border-radius: 2px;
      }

      .jobs-portal-modal-window .jobs-portal-nested-top .jobs-portal-drilldown-job-title {
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.2;
      }

      .jobs-portal-modal-window .jobs-portal-drilldown-address {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0 0 18px;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.3;
        color: #cbd5e1;
        letter-spacing: 0.01em;
        padding: 0 10px;
        box-sizing: border-box;
        pointer-events: auto;
        z-index: auto;
      }

      .jobs-portal-modal-window .jobs-portal-drilldown-status-menu.job-status-menu[open] {
        z-index: 5200;
      }

      .jobs-portal-modal-window .jobs-portal-drilldown-status-corner,
      .jobs-portal-modal-window .jobs-portal-drilldown-status-corner .job-status-menu {
        z-index: 5200;
      }

      .jobs-portal-modal-window .jobs-portal-drilldown-status-corner .job-status-options {
        z-index: 5201;
      }

      .jobs-portal-modal-window.jobs-portal--detail-open .jobs-portal-nested-body .job-node.jobs-portal-detail-node:not(.jobs-portal-timeline-only-node) {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
      }

      .jobs-portal-modal-window.jobs-portal--detail-open .jobs-portal-nested-body .job-node.jobs-portal-detail-node:not(.jobs-portal-timeline-only-node) .job-item {
        background: transparent !important;
        border: none !important;
        border-radius: var(--ui-radius) !important;
        box-shadow: none !important;
        padding: 0 0 6px;
      }

      /* Inner container window for timeline section inside popup. */
      .jobs-portal-modal-window .jobs-portal-detail-card--solo.job-list {
        width: 100%;
        max-width: calc(100% - 12px);
        margin: 0 auto;
        padding: 0 10px 12px;
        box-sizing: border-box;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: var(--ui-radius);
        background: rgba(15, 23, 42, 0.74);
        position: relative;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-title {
        margin: 0;
        padding: 0 8px;
        width: 100%;
        box-sizing: border-box;
        background: transparent;
        border-radius: 0;
        border-bottom: 0;
        font-size: 0.96rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        line-height: 1.2;
        text-align: center;
        color: var(--text);
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-head {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
        column-gap: 8px;
        height: 52px;
        min-height: 52px;
        padding: 0 0 0 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 6px;
        /* Stack above .job-timeline-details scroll surface so status menu isn’t covered (Completed was unclickable). */
        position: relative;
        z-index: 5300;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-left-meta {
        grid-column: 1;
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        height: 100%;
        align-self: stretch;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-status-corner {
        position: relative;
        z-index: 5200;
        display: flex;
        align-items: center;
        height: 100%;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-status-corner .job-status-menu {
        margin: 0;
        display: flex;
        align-items: center;
        height: 100%;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-status-corner .job-status-trigger {
        margin: 0;
        line-height: 1.1;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-status-corner .job-status-menu.job-status-menu[open] {
        z-index: 5301;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-status-corner .job-status-options {
        z-index: 5302;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-head .jobs-portal-modal-timeline-title {
        grid-column: 2;
        margin: 0;
        align-self: center;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-created {
        margin: 0;
        font-size: 0.72rem;
        font-weight: 600;
        color: #cbd5e1;
        line-height: 1.2;
        white-space: nowrap;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-add-wrap {
        grid-column: 3;
        justify-self: end;
        align-self: center;
        margin-top: 0;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-add-wrap .property-add-btn {
        width: 30px;
        height: 30px;
        font-size: 1.75rem;
        margin-right: 0;
        color: #ffffff;
      }

      .jobs-portal-modal-window .jobs-portal-modal-timeline-add-wrap .property-add-btn:hover {
        color: #86efac;
      }

      /* Match customer profile Jobs timeline panel styling exactly inside popup. */
      .jobs-portal-modal-window .job-timeline-details.jobs-portal-timeline {
        display: block;
        width: calc(100% - 12px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        margin-top: 14px !important;
        min-height: 240px;
        max-height: min(62vh, 560px);
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        padding: 10px !important;
        background: #e8eef5 !important;
        border: 1px solid rgba(15, 23, 42, 0.3) !important;
        border-radius: var(--ui-radius) !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1) !important;
        position: relative;
      }

      .jobs-portal-modal-window .job-timeline-details.jobs-portal-timeline .job-timeline-list {
        margin-top: 8px;
        min-height: 190px;
        align-content: start;
        padding: 8px 0 !important;
        background: transparent !important;
        border: 0 !important;
      }

      .jobs-portal-modal-window .job-timeline-details.jobs-portal-timeline .job-timeline-list::before {
        top: 8px;
        bottom: 8px;
        left: 7px;
        width: 3px;
        background: rgba(51, 65, 85, 0.45) !important;
        opacity: 0 !important;
      }

      .jobs-portal-modal-window .job-timeline-details.jobs-portal-timeline .job-timeline-list:has(.job-timeline-row)::before {
        opacity: 1 !important;
      }

      /* Popup timeline is always open; hide summary/expander in modal. */
      .jobs-portal-modal-window .job-timeline-details.jobs-portal-timeline > summary {
        display: none;
      }

      .jobs-portal-modal-window .job-timeline-details.jobs-portal-timeline {
        cursor: default;
      }

      .jobs-portal-modal-window.jobs-portal--detail-open .jobs-portal-drilldown-job-card .jobs-portal-job-card-actions-tools {
        justify-content: flex-end;
        padding-top: 8px;
      }

      .jobs-portal-modal-window.jobs-portal--detail-open .jobs-portal-drilldown-job-card .jobs-portal-job-card-actions-tools .property-item-tools {
        margin-left: auto;
      }

      .jobs-portal-modal-window.jobs-portal--detail-open .jobs-portal-detail-card--solo.job-list .job-timeline-shell .job-timeline-add-corner {
        display: none;
      }

      .jobs-portal-modal-window .job-timeline-add-corner .property-add-btn {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--ui-radius);
        background: transparent;
        border: 0;
        color: #ffffff;
      }

      .jobs-portal-modal-window .job-timeline-add-corner .property-add-btn:hover {
        background: transparent;
        color: #86efac;
      }

      /* Customer profile Jobs tab: compact Edit / Delete (override global .tab-inline-action-btn tab sizing) */
      .jobs-portal-modal-window .property-item-tools {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }

      .jobs-portal-modal-window .property-item-tools .profile-edit-btn.tab-inline-action-btn {
        min-width: 0 !important;
        width: auto;
        max-width: none;
        height: 30px;
        padding: 0 10px !important;
        margin-bottom: 0 !important;
        border-radius: var(--ui-radius) !important;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
        background: var(--profile-header-bg) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 0.79rem !important;
        letter-spacing: 0.01em;
        line-height: 1.1;
        cursor: pointer;
      }

      .jobs-portal-modal-window .property-item-tools .profile-edit-btn.tab-inline-action-btn:hover {
        background:
          linear-gradient(to bottom, var(--menu-yellow-soft), var(--menu-yellow-soft)),
          var(--profile-header-bg) !important;
        border-color: var(--menu-yellow-border) !important;
        color: #ffffff !important;
      }

      .jobs-portal-modal-window .property-item-tools .profile-delete-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
        border-radius: 7px;
        border: 1px solid rgba(185, 28, 28, 0.46) !important;
        background: rgba(239, 68, 68, 0.82) !important;
        color: #ffffff !important;
        font-size: 1.05rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.2), 0 3px 8px rgba(127, 29, 29, 0.24);
      }

      .jobs-portal-modal-window .property-item-tools .profile-delete-btn:hover {
        background: rgba(220, 38, 38, 0.9) !important;
        border-color: rgba(185, 28, 28, 0.62) !important;
        color: #ffffff !important;
      }

      .jobs-portal-modal-window .property-item-tools .profile-delete-btn.job-delete-btn {
        width: auto;
        min-width: 0;
        padding: 0 10px;
        gap: 6px;
        font-size: 0.73rem;
        font-weight: 700;
        letter-spacing: 0.01em;
      }

      body[data-theme="light"] .jobs-portal-modal-window .property-item-tools .profile-edit-btn.tab-inline-action-btn {
        background: #334155 !important;
        color: #ffffff !important;
        border-color: #475569 !important;
      }

      body[data-theme="light"] .jobs-portal-modal-window .property-item-tools .profile-edit-btn.tab-inline-action-btn:hover {
        background:
          linear-gradient(to bottom, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.18)),
          #334155 !important;
        border-color: rgba(37, 99, 235, 0.46) !important;
        color: #ffffff !important;
      }

      .jobs-portal-modal-window .jobs-portal-timeline--static {
        cursor: default;
      }

      .jobs-portal-modal-window .job-timeline {
        gap: 12px;
      }

      .jobs-portal-modal-window .job-node {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        box-sizing: border-box;
        background: transparent;
        border: none;
        border-radius: var(--ui-radius) !important;
        box-shadow: none;
      }

      .jobs-portal-modal-window .job-node.jobs-portal-timeline-only-node {
        padding: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
      }

      .jobs-portal-modal-window .job-item {
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
        background: transparent;
        border: none !important;
        border-radius: var(--ui-radius) !important;
        box-shadow: none !important;
      }

      #jobsPage .job-timeline {
        gap: 14px;
      }

      /* Match drawer: outer slate frame + inner light job card (customer profile Jobs tab) */
      #jobsPage .job-node {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 8px;
        box-sizing: border-box;
        background: var(--container-surface-bg);
        border: none;
        border-radius: var(--ui-radius) !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
      }

      #jobsPage .job-node.jobs-portal-timeline-only-node {
        padding: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
      }

      #jobsPage .job-item {
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
        background: #f8fafc;
        border: none !important;
        border-radius: var(--ui-radius) !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
      }

      #jobsPage .jobs-portal-caption-stack .job-customer-name {
        width: auto;
        text-align: left;
        margin: 0;
        font-weight: 600;
        color: #111827;
      }

      /* Match customer profile Jobs tab action button sizing exactly */
      #jobsPage .property-item-tools .profile-edit-btn {
        min-width: 0;
        height: 30px;
        padding: 0 10px;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        background: var(--profile-header-bg) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
        line-height: 1.1;
        cursor: pointer;
      }

      #jobsPage .property-item-tools .profile-edit-btn:hover {
        background:
          linear-gradient(to bottom, var(--menu-yellow-soft), var(--menu-yellow-soft)),
          var(--profile-header-bg) !important;
        border-color: var(--menu-yellow-border) !important;
        color: #ffffff !important;
      }

      #jobsPage .property-item-tools .profile-delete-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
        border-radius: var(--ui-radius);
        border: 1px solid rgba(185, 28, 28, 0.46) !important;
        background: rgba(239, 68, 68, 0.82) !important;
        color: #ffffff !important;
        font-size: 1.05rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.2), 0 3px 8px rgba(127, 29, 29, 0.24);
      }

      #jobsPage .property-item-tools .profile-delete-btn:hover {
        background: rgba(220, 38, 38, 0.9) !important;
        border-color: rgba(185, 28, 28, 0.62) !important;
        color: #ffffff !important;
      }

      #jobsPage .property-item-tools .profile-delete-btn.job-delete-btn {
        width: auto;
        min-width: 0;
        padding: 0 10px;
        gap: 6px;
        font-size: 0.73rem;
        font-weight: 700;
        letter-spacing: 0.01em;
      }

      #jobsPage .jobs-portal-timeline {
        display: block;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px !important;
        box-sizing: border-box;
        padding: 10px !important;
        background: #e8eef5 !important;
        border: none !important;
        border-radius: var(--ui-radius) !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1) !important;
      }

      #jobsPage.jobs-portal--detail-open .jobs-portal-timeline {
        border: none !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1) !important;
      }

      #jobsPage .jobs-portal-timeline .job-timeline-list {
        margin-top: 8px;
        padding: 8px 0 !important;
        background: transparent !important;
        border: 0 !important;
      }

      #jobsPage .jobs-portal-timeline .job-timeline-list::before {
        top: 8px;
        bottom: 8px;
        left: 7px;
        width: 3px;
        background: rgba(51, 65, 85, 0.45) !important;
        opacity: 0 !important;
      }

      #jobsPage .jobs-portal-timeline .job-timeline-list:has(.job-timeline-row)::before {
        opacity: 1 !important;
      }

      #jobsPage .job-item .job-card-label.job-property-header {
        background: rgba(15, 23, 42, 0.9);
        color: #f8fafc;
        border-color: rgba(148, 163, 184, 0.35);
        border-radius: var(--ui-radius) !important;
      }

      #jobsPage .jobs-portal-caption-stack {
        align-items: flex-start;
        justify-content: flex-start;
        min-height: 0;
        margin-bottom: 0;
      }

      #jobsPage .jobs-portal-job-title {
        width: 100%;
        margin-top: 0;
        text-align: left;
        text-transform: none;
        font-weight: 700;
        color: #111827;
      }

      .job-timeline-details summary {
        cursor: pointer;
        list-style: none;
        font-size: 0.8rem;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .job-timeline-details summary:hover {
        color: #854d0e;
      }

      .job-timeline-details summary::-webkit-details-marker {
        display: none;
      }

      .job-timeline-details summary::after {
        content: "▶";
        color: #4b5563;
        transition: transform 0.2s ease;
      }

      .job-timeline-details[open] summary::after {
        transform: rotate(90deg);
      }

      .job-timeline-list {
        margin-top: 8px;
        display: grid;
        gap: 10px;
        position: relative;
        padding: 10px 0;
      }

      .job-timeline-list::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 7px;
        width: 3px;
        background: rgba(51, 65, 85, 0.42);
        opacity: 0;
      }

      .job-timeline-list:has(.job-timeline-row)::before {
        opacity: 1;
      }

      /* One boxed container per timeline entry (row wraps dot + content + remove) */
      .job-timeline-row {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .job-timeline-row-card {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        border: 1px solid rgba(15, 23, 42, 0.22);
        border-radius: var(--ui-radius);
        background: #ffffff;
        padding: 8px 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        flex: 1 1 auto;
        min-width: 0;
      }

      .job-timeline-row-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        flex-shrink: 0;
        margin-right: 0;
        padding-left: 0;
      }

      .job-timeline-inline-actions {
        display: inline-flex;
        align-items: center;
        gap: 20px;
        border-left: 1px solid rgba(148, 163, 184, 0.3);
        padding-left: 12px;
        padding-right: 16px;
      }

      .job-timeline-time {
        display: none;
      }

      .job-timeline-center {
        position: relative;
        display: flex;
        justify-content: center;
      }

      .job-timeline-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #4f46e5;
        border: 2px solid #ffffff;
        box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.25);
      }

      .job-timeline-item {
        border: 0;
        border-radius: var(--ui-radius);
        padding: 0;
        background: transparent;
        cursor: pointer;
        min-width: 0;
      }

      /* Service record / quote / invoice: profile doc removed but sent — keep history, no interaction */
      .job-timeline-item.job-timeline-item--document-unavailable {
        cursor: default;
        opacity: 0.62;
      }

      .job-timeline-item.job-timeline-item--document-unavailable .job-timeline-item-text,
      .job-timeline-item.job-timeline-item--document-unavailable .timeline-doc-compact,
      .job-timeline-item.job-timeline-item--document-unavailable .timeline-doc-compact-icon {
        color: #6b7280;
      }

      .job-timeline-item.job-timeline-item--document-unavailable .timeline-cert-send-status {
        opacity: 0.9;
      }

      body[data-theme="light"] .job-timeline-item.job-timeline-item--document-unavailable .job-timeline-item-text,
      body[data-theme="light"] .job-timeline-item.job-timeline-item--document-unavailable .timeline-doc-compact,
      body[data-theme="light"] .job-timeline-item.job-timeline-item--document-unavailable .timeline-doc-compact-icon {
        color: #64748b;
      }

      .job-timeline-item-text {
        margin: 0;
        font-size: 0.82rem;
        color: #111827;
      }

      .job-timeline-item-text strong {
        font-weight: 800;
      }

      .timeline-doc-compact {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
      }

      .timeline-doc-compact-icon {
        width: 15px;
        height: 15px;
        display: inline-flex;
        color: #111827;
        flex: 0 0 auto;
      }

      .timeline-doc-compact-icon--quote {
        color: #2563eb;
      }

      .timeline-doc-compact-icon--invoice {
        color: #dc2626;
      }

      .timeline-doc-compact-icon--sales-order {
        color: #ea580c;
      }

      body[data-theme="light"] .timeline-doc-compact-icon--sales-order {
        color: #c2410c;
      }

      .timeline-doc-compact-icon--appointment {
        color: #7c3aed;
      }

      .timeline-doc-compact-icon--job-sheet {
        color: #ea580c;
      }

      .timeline-doc-compact-icon--pictures {
        color: #db2777;
      }

      .timeline-doc-compact-icon--payment {
        color: #059669;
      }

      .timeline-doc-compact-icon--payment-receipt {
        color: #9333ea;
      }

      body[data-theme="light"] .timeline-doc-compact-icon--payment-receipt {
        color: #7c3aed;
      }

      .timeline-doc-compact-icon--documents {
        color: #0d9488;
      }

      .timeline-doc-compact-icon--notes {
        color: #64748b;
      }

      .timeline-doc-compact-icon--service-record {
        color: #ca8a04;
      }

      .timeline-doc-compact-icon--cp12 {
        color: #eab308;
      }

      .timeline-doc-compact--block {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        max-width: 100%;
      }

      .timeline-doc-compact--block .timeline-doc-compact-icon {
        margin-top: 2px;
        flex-shrink: 0;
      }

      .timeline-doc-compact-body {
        min-width: 0;
        flex: 1;
      }

      .timeline-doc-compact-label {
        font-weight: 800;
        color: #111827;
      }

      .timeline-doc-compact-sep {
        font-weight: 800;
        color: #111827;
      }

      /* Document ref: same tone as job/title line, bold */
      .timeline-doc-doc-ref {
        font-weight: 700;
        font-size: inherit;
        line-height: inherit;
        color: #334155;
      }

      .timeline-doc-compact-job {
        color: #334155;
      }

      .timeline-appointment-when {
        color: #475569;
        font-weight: 600;
      }

      .timeline-cert-send-status {
        display: inline-block;
        margin-left: 6px;
        font-size: 0.72rem;
        font-weight: 700;
      }

      .timeline-cert-send-status.sent {
        color: #16a34a;
      }

      .timeline-cert-send-status.not-sent {
        color: #6b7280;
      }

      .timeline-doc-compact--quote-invoice {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
      }

      .timeline-doc-read-row {
        display: block;
        width: 100%;
        flex-basis: 100%;
        margin-top: 4px;
        font-size: 0.72rem;
        line-height: 1.4;
      }

      .timeline-quote-response {
        display: inline-block;
        margin-left: 6px;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.35;
        vertical-align: baseline;
      }

      .timeline-quote-response--none {
        background: #e5e7eb;
        color: #4b5563;
      }

      .timeline-quote-response--agreed {
        background: #16a34a;
        color: #ffffff;
      }

      .timeline-quote-response--declined {
        background: #dc2626;
        color: #ffffff;
      }

      .timeline-doc-read-label {
        font-weight: 700;
        color: #475569;
        margin-right: 4px;
      }

      .timeline-read-receipt-seen {
        color: #0f766e;
        font-weight: 600;
      }

      .timeline-read-receipt-btn {
        border: 0;
        background: transparent;
        color: #2563eb;
        font-size: inherit;
        font-weight: 700;
        cursor: pointer;
        text-decoration: underline;
        padding: 0 2px;
        font-family: inherit;
      }

      .timeline-read-receipt-btn:hover {
        color: #1d4ed8;
      }

      .timeline-payment-receipt-sent {
        flex-basis: 100%;
        margin-top: 3px;
      }

      .timeline-read-sep {
        color: #94a3b8;
        font-weight: 400;
      }

      .booking-confirm-send-wrap {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.28);
      }

      .booking-confirm-send-heading-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
      }

      /* Edit: plane on top, “Confirm Booking” centred beneath (send is the focal control) */
      .booking-modal--edit .booking-confirm-send-heading-row {
        margin-bottom: 0;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
      }

      .booking-confirm-send-heading-row .booking-confirm-send-heading {
        margin-bottom: 0;
        flex: 0 1 auto;
        min-width: 0;
      }

      .booking-modal--edit #bookingConfirmSendRecipients {
        display: none !important;
      }

      /* Edit booking: green plane only (no white tile), tucked next to title */
      #bookingModal .booking-confirm-plane-btn.service-cp12-send-btn {
        flex-shrink: 0;
        background: rgba(22, 163, 74, 0.85) !important;
        border: 1px solid rgba(74, 222, 128, 0.65) !important;
        color: #ecfdf5 !important;
      }

      #bookingModal .booking-confirm-plane-btn.service-cp12-send-btn:hover {
        background: rgba(21, 128, 61, 0.95) !important;
        border-color: rgba(134, 239, 172, 0.85) !important;
        color: #ffffff !important;
      }

      body[data-theme="light"] #bookingModal .booking-confirm-plane-btn.service-cp12-send-btn {
        background: #16a34a !important;
        border-color: #15803d !important;
        color: #f0fdf4 !important;
      }

      body[data-theme="light"] #bookingModal .booking-confirm-plane-btn.service-cp12-send-btn:hover {
        background: #15803d !important;
        border-color: #166534 !important;
        color: #ffffff !important;
      }

      .booking-confirm-send-heading {
        margin: 0 0 10px;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.35;
        text-transform: none;
        letter-spacing: normal;
      }

      /* Plain label on dark booking shell (no white card behind heading) */
      #bookingModal .booking-confirm-send-heading {
        margin: 0 0 10px;
        padding: 0;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.95);
        background: transparent;
        border: none;
        border-radius: 0;
      }

      body[data-theme="light"] #bookingModal .booking-confirm-send-heading {
        color: #0f172a;
      }

      #bookingModal #bookingConfirmSendRecipients .firefly-msg-group {
        background: #ffffff;
        border: 1px solid rgba(148, 163, 184, 0.45);
      }

      #bookingModal #bookingConfirmSendRecipients .firefly-msg-group-title {
        color: #0f172a;
      }

      #bookingModal #bookingConfirmSendRecipients .app-doc-pdf-send-toggle {
        color: #0f172a;
      }

      #bookingModal #bookingConfirmSendRecipients .firefly-msg-empty {
        color: #475569;
      }

      .booking-confirm-channels {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .booking-confirm-channel-label {
        margin: 0;
      }

      .booking-day-preview-wrap {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
      }

      .booking-day-preview-btn {
        align-self: flex-start;
        font-size: 0.76rem !important;
        font-weight: 600 !important;
        padding: 6px 10px !important;
      }

      .booking-day-preview-panel {
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: var(--ui-radius);
        background: rgba(15, 23, 42, 0.35);
        padding: 10px 10px 8px;
        font-size: 0.78rem;
        line-height: 1.35;
      }

      body[data-theme="light"] .booking-day-preview-panel {
        background: rgba(248, 250, 252, 0.95);
        border-color: rgba(148, 163, 184, 0.45);
      }

      .booking-day-preview-inner {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .booking-day-preview-heading {
        margin: 0;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }

      .booking-day-preview-hint,
      .booking-day-preview-empty {
        margin: 0;
        color: var(--muted);
        font-size: 0.76rem;
      }

      .booking-day-preview-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .booking-day-preview-item {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
        align-items: baseline;
        padding: 6px 8px;
        border-radius: calc(var(--ui-radius) - 1px);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      body[data-theme="light"] .booking-day-preview-item {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(15, 23, 42, 0.08);
      }

      .booking-day-preview-time {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        min-width: 5.5rem;
        flex-shrink: 0;
      }

      .booking-day-preview-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1;
      }

      .booking-day-preview-detail {
        display: block;
        font-size: 0.72rem;
        color: var(--muted);
        font-weight: 500;
      }

      .booking-day-preview-dist-row {
        display: block;
        margin-top: 4px;
      }

      .booking-day-preview-dist {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        color: #a5b4fc;
      }

      body[data-theme="light"] .booking-day-preview-dist {
        color: #4338ca;
      }

      .booking-day-preview-dist--muted {
        font-weight: 600;
        color: var(--muted);
      }

      .booking-day-preview-loading {
        margin: 0;
        font-size: 0.8rem;
        color: var(--muted);
      }

      .job-timeline-item-meta {
        margin: 3px 0 0;
        color: #4b5563;
        font-size: 0.74rem;
      }

      .job-timeline-remove-btn {
        border: 0;
        background: transparent;
        color: #991b1b;
        width: 28px;
        height: 28px;
        padding: 0;
        font-size: 19px;
        font-weight: 600;
        line-height: 1;
        border-radius: 0;
        cursor: pointer;
        white-space: nowrap;
        margin-left: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: none;
        flex: 0 0 auto;
      }

      .job-timeline-remove-btn:hover {
        color: #7f1d1d;
      }

      .job-timeline-convert-sep {
        align-self: stretch;
        width: 1px;
        min-height: 1.15em;
        margin: 0 4px;
        background: rgba(148, 163, 184, 0.4);
        flex-shrink: 0;
      }

      body[data-theme="light"] .job-timeline-convert-sep {
        background: rgba(100, 116, 139, 0.45);
      }

      .job-timeline-convert-btn {
        border: 1px solid rgba(79, 70, 229, 0.34);
        background: rgba(238, 242, 255, 0.95);
        color: #3730a3;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
        padding: 4px 7px;
        border-radius: var(--ui-radius);
        cursor: pointer;
        white-space: nowrap;
        min-width: 164px;
        text-align: center;
      }

      .job-timeline-convert-btn:hover {
        background: #e0e7ff;
        border-color: rgba(79, 70, 229, 0.52);
      }

      .job-timeline-convert-btn--invoice {
        border-color: rgba(234, 179, 8, 0.5);
        background: rgba(254, 249, 195, 0.92);
        color: #854d0e;
      }

      .job-timeline-convert-btn--invoice:hover {
        background: #fef08a;
        border-color: rgba(202, 138, 4, 0.55);
      }

      .timeline-preview-text {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.45;
        color: #f3f4f6;
        white-space: pre-wrap;
      }

      .timeline-preview-meta {
        margin: 6px 0 0;
        color: #9ca3af;
        font-size: 0.78rem;
      }

      .timeline-doc-hint {
        margin: 4px 0 0;
        font-size: 0.74rem;
        color: #cbd5e1;
      }

      .timeline-doc-list {
        display: grid;
        gap: 8px;
        margin-top: 8px;
      }

      .timeline-doc-link {
        color: #c7d2fe;
        text-decoration: underline;
        font-size: 0.82rem;
        word-break: break-all;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        font-family: inherit;
      }

      .timeline-doc-meta {
        margin-left: 6px;
        color: #9ca3af;
        font-size: 0.74rem;
      }

      .document-preview-modal {
        width: min(920px, calc(100vw - 24px));
        max-height: min(88vh, 820px);
      }

      .document-preview-body {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 10px;
      }

      .document-preview-name {
        margin: 0;
        color: #e5e7eb;
        font-size: 0.84rem;
        word-break: break-all;
      }

      .document-preview-surface {
        min-height: 430px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 10px;
        background: rgba(17, 24, 39, 0.8);
        overflow: hidden;
      }

      .document-preview-surface iframe,
      .document-preview-surface img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .document-preview-surface img {
        object-fit: contain;
        background: #111827;
      }

      .document-preview-fallback {
        padding: 20px;
        color: #e5e7eb;
        font-size: 0.85rem;
      }

      .share-help-text {
        margin: 0;
        font-size: 0.76rem;
        color: #9ca3af;
      }

      .timeline-edit-btn {
        height: 30px;
        min-width: 42px;
        border-radius: 7px;
        padding: 0 10px;
      }

      .job-timeline-details .info-value {
        color: #374151;
      }

      .job-timeline-details .property-add-btn {
        color: #16a34a;
      }

      .job-timeline-details .property-add-btn:hover {
        color: #22c55e;
      }

      .timeline-add-row {
        margin-top: 8px;
        display: flex;
        justify-content: flex-end;
      }

      .timeline-add-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        z-index: 1;
      }

      .timeline-add-wrap.timeline-menu-open {
        z-index: 952;
      }

      .job-timeline-add-corner {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 900;
      }

      .job-timeline-shell {
        position: relative;
      }

      .job-timeline-shell .job-timeline-add-corner {
        top: 0;
        right: 8px;
        transform: translateY(calc(-100% - 4px));
      }

      .job-timeline-add-corner .property-add-btn {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: var(--ui-radius);
        background: transparent;
        color: #16a34a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .job-timeline-add-corner .property-add-btn:hover {
        background: transparent;
        color: #22c55e;
      }

      .timeline-add-menu {
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        min-width: 190px;
        border: 1px solid rgba(15, 23, 42, 0.22);
        border-radius: var(--ui-radius);
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
        padding: 4px 0;
        z-index: 901;
      }

      .job-node.timeline-menu-surface-open,
      .job-item.timeline-menu-surface-open,
      .job-timeline-details.timeline-menu-surface-open {
        z-index: 950;
      }

      .timeline-add-menu-item {
        width: 100%;
        border: 0;
        background: transparent;
        color: #111827;
        font: inherit;
        font-size: 0.82rem;
        text-align: left;
        padding: 8px 10px;
        cursor: pointer;
      }

      .timeline-add-menu-item:hover {
        background: #eef2ff;
      }

      /* Job modal + booking modal + “name this job” prompt: combobox + preset menu */
      #jobModal .job-name-combobox-wrap,
      #bookingModal .job-name-combobox-wrap,
      #jobsNewProjectNameModal .job-name-combobox-wrap {
        width: 100%;
      }

      #jobModal .job-name-combobox-field,
      #bookingModal .job-name-combobox-field,
      #jobsNewProjectNameModal .job-name-combobox-field {
        display: flex;
        align-items: stretch;
        width: 100%;
        border: 1px solid rgba(15, 23, 42, 0.22);
        border-radius: var(--ui-radius);
        background: #ffffff;
        overflow: hidden;
      }

      #jobModal .job-name-combobox-input,
      #bookingModal .job-name-combobox-input,
      #jobsNewProjectNameModal .job-name-combobox-input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent;
      }

      #jobModal .job-name-preset-toggle,
      #bookingModal .job-name-preset-toggle,
      #jobsNewProjectNameModal .job-name-preset-toggle {
        flex: 0 0 40px;
        width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-left: 1px solid rgba(15, 23, 42, 0.22);
        border-radius: 0;
        background: #ffffff;
        color: #111827;
        cursor: pointer;
        padding: 0;
      }

      #jobModal .job-name-preset-toggle:hover,
      #bookingModal .job-name-preset-toggle:hover,
      #jobsNewProjectNameModal .job-name-preset-toggle:hover {
        background: #eef2ff;
      }

      #jobModal .job-name-preset-toggle-icon,
      #bookingModal .job-name-preset-toggle-icon,
      #jobsNewProjectNameModal .job-name-preset-toggle-icon {
        width: 18px;
        height: 18px;
        transition: transform 0.15s ease;
      }

      #jobModal .job-name-combobox-wrap.timeline-menu-open .job-name-preset-toggle-icon,
      #bookingModal .job-name-combobox-wrap.timeline-menu-open .job-name-preset-toggle-icon,
      #jobsNewProjectNameModal .job-name-combobox-wrap.timeline-menu-open .job-name-preset-toggle-icon {
        transform: rotate(180deg);
      }

      #jobModal .job-name-preset-menu.timeline-add-menu,
      #bookingModal .job-name-preset-menu.timeline-add-menu,
      #jobsNewProjectNameModal .job-name-preset-menu.timeline-add-menu {
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        min-width: 0;
        width: 100%;
        border-radius: var(--ui-radius);
      }

      #jobModal .job-name-combobox-wrap.timeline-menu-open,
      #bookingModal .job-name-combobox-wrap.timeline-menu-open,
      #jobsNewProjectNameModal .job-name-combobox-wrap.timeline-menu-open {
        z-index: 952;
      }

      /* Edit booking (locked): customer name opens profile — same text as other fields */
      #bookingModal #bookingCustomerSearch.booking-customer-name--open-profile {
        cursor: pointer;
        color: #111827;
        text-decoration: none;
      }

      .property-item.disabled {
        opacity: 1;
        pointer-events: none;
        background: #ffffff;
      }

      .property-item.disabled .property-title {
        color: #f8fafc;
      }

      .property-item.disabled .info-value {
        color: #111827;
      }

      .property-item.disabled .info-label {
        color: #64748b;
      }

      .property-details-block {
        margin-top: 8px;
        border: 1px solid rgba(15, 23, 42, 0.24);
        border-radius: 8px;
        background: #eef2f7;
        padding: 6px 8px;
      }

      .property-details-block summary {
        cursor: pointer;
        list-style: none;
        font-size: 0.8rem;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .property-details-block summary:hover {
        color: #854d0e;
      }

      .property-details-block summary::-webkit-details-marker {
        display: none;
      }

      .property-details-block summary::after {
        content: "▶";
        color: #111827;
        font-size: 0.72rem;
        transition: transform 0.2s ease;
      }

      .property-details-block[open] summary::after {
        transform: rotate(90deg);
      }

      .property-details-content {
        margin-top: 8px;
      }

      .half-field {
        width: calc(75% - 2.5px);
        min-width: 0;
      }

      .mobile-field {
        width: calc(50% - 5px);
        min-width: 0;
      }

      .address-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
      }

      .postcode-field {
        width: 14ch;
        min-width: 14ch;
      }

      .postcode-country-row {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 6px;
        width: 100%;
      }

      .postcode-country-row.postcode-only-row {
        grid-template-columns: 1fr;
      }

      .country-hidden {
        display: none !important;
      }

      .topbar {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
      }

      .status-chip {
        font-size: 0.8rem;
        color: #bbf7d0;
        background: #052e16;
        border: 1px solid #166534;
        border-radius: 999px;
        padding: 6px 10px;
      }

      .hero {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 32px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
      }

      .hero h1 {
        margin: 0;
        font-size: 1.9rem;
      }

      .hero p {
        margin: 10px 0 0;
        color: var(--muted);
        max-width: 620px;
        line-height: 1.55;
      }

      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
      }

      .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
      }

      .card h3 {
        margin: 0;
        font-size: 0.95rem;
      }

      .card p {
        margin: 8px 0 0;
        color: var(--muted);
        font-size: 0.9rem;
      }

      /* Preview mode: square corners across app boxes/forms/cards/panels */
      .app-shell :where(
        .nav-item,
        .panel,
        .topbar,
        .hero,
        .card,
        .btn,
        .booking-action-btn,
        .customer-list,
        .customer-search,
        .customer-item,
        .drawer-panel,
        .drawer-head,
        .drawer-body,
        .drawer-actions,
        .job-modal,
        .form-input,
        .form-select,
        input,
        select,
        textarea,
        button,
        .property-item,
        .job-item,
        .property-details-block,
        .customer-tab-surface,
        .info-section,
        .job-status-trigger,
        .job-status-options,
        .job-status-option,
        .address-suggestions,
        .address-suggestion-item,
        .timeline-preview-modal,
        .timeline-preview-surface,
        .document-preview-modal,
        .document-preview-surface,
        .share-document-modal,
        details,
        summary
      ) {
        border-radius: var(--ui-radius) !important;
      }

      /*
        Diary calendar grid: keep columns/cells square (global rules skip these selectors).
        Toolbar controls outside this list still use --ui-radius.
      */
      .app-shell #diaryPage .calendar-board,
      .app-shell #diaryPage .calendar-weekdays,
      .app-shell #diaryPage .calendar-weekday,
      .app-shell #diaryPage .calendar-grid,
      .app-shell #diaryPage .calendar-cell,
      .app-shell #diaryPage .calendar-cell-head,
      .app-shell #diaryPage .calendar-events,
      .app-shell #diaryPage .calendar-event,
      .app-shell #diaryPage .calendar-day-board,
      .app-shell #diaryPage .day-slot,
      .app-shell #diaryPage .day-slot-label,
      .app-shell #diaryPage .day-slot-events,
      .app-shell #diaryPage .diary-day-jobs-panel,
      .app-shell #diaryPage .diary-day-jobs-header,
      .app-shell #diaryPage .diary-day-jobs-row,
      .app-shell #diaryPage .diary-day-jobs-cell,
      .app-shell #diaryPage .calendar-more-btn {
        border-radius: 0 !important;
      }

      /* Diary outer white container should stay rounded; only inner calendar stays square. */
      .app-shell #diaryPage .diary-surface {
        border-radius: var(--ui-radius) !important;
      }

      /* Extra hard override for all form UI across site */
      .app-shell form :where(
        input,
        select,
        textarea,
        button,
        .form-input,
        .form-select,
        .address-autocomplete,
        .address-suggestions,
        .address-suggestion-item,
        .drawer-actions,
        .name-row > div,
        .postcode-country-row > div
      ) {
        border-radius: var(--ui-radius) !important;
      }

      /* Absolute form control override (including add customer/property drawers) */
      input,
      select,
      textarea,
      button,
      .form-input,
      .form-select,
      .address-autocomplete,
      .address-suggestions,
      .address-suggestion-item {
        border-radius: var(--ui-radius) !important;
      }

      /*
        Global radius unifier: keep corners consistently small across pages and drawers.
        (Tab bottom edges keep their own explicit square-corner overrides below.)
      */
      .app-shell :where(
        .panel,
        .customer-list,
        .customer-item,
        .customer-day-jobs-panel,
        .customer-day-jobs-table,
        .customer-service-due-panel,
        .customer-service-due-table,
        .service-centre-panel,
        .service-centre-table-wrap,
        .job-item,
        .property-item,
        .workspace-panel-body,
        .customer-tab-surface,
        .customer-info-card,
        .customer-profile-grid,
        .property-list,
        .jobs-portal-frame,
        .jobs-portal-list-section,
        .jobs-portal-active-list,
        .jobs-portal-nested-page,
        .jobs-portal-nested-body,
        .job-timeline-details,
        .service-cp12-database,
        .service-cp12-db-row,
        .btn
      ),
      .drawer-panel :where(
        .workspace-panel-body,
        .customer-tab-surface,
        .customer-info-card,
        .customer-profile-grid,
        .property-list,
        .job-item,
        .property-item,
        .service-cp12-database,
        .service-cp12-db-row,
        .btn
      ) {
        border-radius: var(--ui-radius) !important;
      }

      /*
        Workspace tab buttons: must override global `button { border-radius }`.
        #customerViewDrawer sits outside #appShell, so include drawer selectors here.
      */
      #customerViewDrawer .workspace-tabs button.workspace-tab,
      .drawer-panel.view-panel .workspace-tabs button.workspace-tab,
      .app-shell .workspace-tabs button.workspace-tab {
        border-top-left-radius: var(--ui-radius) !important;
        border-top-right-radius: var(--ui-radius) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        appearance: none;
        -webkit-appearance: none;
      }

      input[type="text"],
      input[type="search"],
      input[type="email"],
      input[type="tel"],
      input[type="date"],
      input[type="time"],
      input[type="number"],
      input[type="url"],
      input[type="password"],
      select,
      textarea {
        border-radius: var(--ui-radius) !important;
      }

      /* Non-:where fallback for tab "window" cards/panels */
      .app-shell .panel,
      .app-shell .drawer-panel,
      .app-shell .workspace-panel-body,
      .app-shell .customer-tab-surface,
      .app-shell .info-section,
      .app-shell .job-list,
      .app-shell .job-timeline,
      .app-shell .job-node,
      .app-shell .job-item,
      .app-shell .job-card-label,
      .app-shell .job-item-head,
      .app-shell .job-timeline-details,
      .app-shell .job-timeline-list,
      .app-shell .job-timeline-item,
      .app-shell .property-list,
      .app-shell .property-item,
      .app-shell .property-item-head,
      .app-shell .property-details-block {
        border-radius: var(--ui-radius) !important;
      }

      /* Customer profile drawer (Jobs/Properties/etc.) square window override */
      .drawer-panel.view-panel,
      .drawer-panel.view-panel .workspace-panel-body,
      .drawer-panel.view-panel .customer-tab-surface,
      .drawer-panel.view-panel .info-section,
      .drawer-panel.view-panel .job-list,
      .drawer-panel.view-panel .job-timeline,
      .drawer-panel.view-panel .job-node,
      .drawer-panel.view-panel .job-item,
      .drawer-panel.view-panel .job-card-label,
      .drawer-panel.view-panel .job-item-head,
      .drawer-panel.view-panel .job-timeline-details,
      .drawer-panel.view-panel .job-timeline-list,
      .drawer-panel.view-panel .job-timeline-item,
      .drawer-panel.view-panel .property-list,
      .drawer-panel.view-panel .property-item,
      .drawer-panel.view-panel .property-item-head,
      .drawer-panel.view-panel .property-details-block {
        border-radius: var(--ui-radius) !important;
      }

      /*
        Global: contenteditable “inputs” (e.g. description pad) are not <textarea>,
        so they don’t match the input/textarea radius rules above.
      */
      .app-shell .form-input[contenteditable="true"],
      .app-shell [contenteditable="true"].form-input {
        border-radius: var(--ui-radius) !important;
      }

      /*
        Laptop / “expanded” parity scaling is applied in shell-app.js (syncFireflyAppShellScale) so
        Safari / WebKit get the same uniform zoom as Chromium when stylesheet zoom is inconsistent.
      */

      @media (max-width: 900px) {
        .app-shell {
          grid-template-columns: 1fr;
        }

        .sidebar {
          border-right: 0;
          border-bottom: 1px solid var(--border);
        }

        .customer-layout {
          min-width: calc(var(--customer-panel-width) + 380px);
        }

        .customer-profile-grid {
          grid-template-columns: 1fr;
        }

        /* Narrow shell: columns shrink; horizontal scroll on stack if the services table is wide */
        .customer-jobs-snapshot-stack {
          width: 100%;
          max-width: 100%;
          grid-template-columns: minmax(0, min(var(--customer-snapshot-today-max), 100%)) minmax(0, 1fr);
        }
      }

      /*
        Accounts ▸ Company Details — field widths must win over grid stretch and any
        later generic rules. (#settingsPage matches only this screen.)
      */
      #settingsPage .company-details-content {
        width: min(100%, 46rem) !important;
        max-width: 46rem !important;
      }

      #settingsPage .company-details-section-body > .company-details-field,
      #settingsPage .company-details-section-body > .company-details-logo-pair-row,
      #settingsPage .company-details-section-body > .phone-row,
      #settingsPage .company-details-section-body > .address-row,
      #settingsPage .company-details-section-body > .postcode-country-row.postcode-only-row {
        justify-self: start !important;
      }

      #settingsPage .company-details-field--short {
        width: min(100%, 18rem) !important;
        max-width: 18rem !important;
      }

      #settingsPage .company-details-field--line {
        width: min(100%, 30rem) !important;
        max-width: 30rem !important;
      }

      #settingsPage .company-details-content .message-template-field.company-details-field--line {
        width: min(100%, 46rem) !important;
        max-width: 46rem !important;
      }

      #settingsPage .company-details-content .message-template-field .form-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
      }

      #settingsPage .company-details-contact-body > .company-details-field--signature {
        width: 100% !important;
        max-width: none !important;
      }

      #settingsPage .company-details-logo-pair-row {
        width: min(100%, 36rem) !important;
        max-width: 36rem !important;
      }

      #settingsPage .company-details-logo-pair-row .company-details-logo-block {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
      }

      #settingsPage .company-details-content .phone-row,
      #settingsPage .company-details-content .address-row {
        width: min(100%, 36rem) !important;
        max-width: 36rem !important;
      }

      #settingsPage .company-details-content .phone-row.company-details-address-local-row {
        width: min(100%, 36rem) !important;
        max-width: 36rem !important;
      }

      #settingsPage .company-details-address-local-row .company-details-postcode-cell.postcode-field {
        width: 14ch !important;
        min-width: 14ch !important;
        max-width: 14ch !important;
        box-sizing: border-box !important;
      }

      #settingsPage .company-details-address-local-row .company-details-postcode-cell .form-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      #settingsPage .company-details-content .phone-row.phone-row-three {
        width: min(100%, 38rem) !important;
        max-width: 38rem !important;
      }

      #settingsPage .company-details-content .phone-row.phone-row-three.company-details-address-local-row {
        width: min(100%, 36rem) !important;
        max-width: 36rem !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 14ch !important;
      }

      #settingsPage .company-details-content .postcode-country-row.postcode-only-row {
        width: min(100%, 18rem) !important;
        max-width: 18rem !important;
      }

      @media (max-width: 720px) {
        #settingsPage .company-details-content .phone-row.phone-row-three.company-details-address-local-row {
          grid-template-columns: 1fr !important;
        }

        #settingsPage .company-details-address-local-row .company-details-postcode-cell.postcode-field {
          width: 100% !important;
          max-width: 14ch !important;
          min-width: 0 !important;
        }
      }

      /* Customer base: row 1 = title / suppliers toggle; row 2 = big icon + add (rule only under row 1) */
      .customer-list-header.customer-list-header--split {
        border-bottom: none;
      }

      .customer-list-header--split {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        align-items: end;
        column-gap: 8px;
        row-gap: 10px;
      }

      .customer-list-header-top {
        grid-column: 1 / -1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        min-width: 0;
        width: 100%;
        /* Same vertical rhythm + full-width rule as TODAY’S JOBS head */
        min-height: 32px;
        padding: 0 0 8px;
        box-sizing: border-box;
        box-shadow: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      body[data-theme="light"] .customer-panel .customer-list-header--split .customer-list-header-top {
        border-bottom-color: rgba(15, 23, 42, 0.14);
      }

      .customer-list-header-leading {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: end;
        display: grid;
        grid-template-columns: 30px 30px;
        column-gap: 0;
        align-items: center;
        justify-items: center;
        padding-bottom: 1px;
      }

      .customer-list-header-leading #addCustomerBtn {
        margin-left: 0;
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        padding: 0;
        box-sizing: border-box;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .customer-list-header-leading #addCustomerBtn .add-customer-icon {
        width: 30px;
        height: 30px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .customer-list-header-leading .customer-list-header-icon--hero {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text);
        /* Optical align with the “+” glyph (font metrics sit slightly lower than the SVG) */
        transform: translateY(3px);
      }

      .customer-list-header-leading .customer-list-header-icon--hero svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .customer-list-header-trailing-spacer {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: end;
        width: 0;
        min-height: 1px;
        padding-bottom: 1px;
      }

      .customer-base-mode-toggle-wrap {
        align-items: center;
        gap: 8px;
      }

      /* Same size + style as TODAY'S JOBS title (h4.customer-day-jobs-title in snapshot stack) */
      .customer-panel .customer-list-header--split .customer-list-title-static.customer-day-jobs-title {
        margin: 0;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        color: var(--text);
        text-transform: uppercase;
      }

      /* Inactive = muted + faint rim; active = app accent fill (readable in light + dark) */
      .customer-base-mode-pill {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 4px 11px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        text-transform: uppercase;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.05);
        user-select: none;
        transition:
          background 0.15s ease,
          border-color 0.15s ease,
          color 0.15s ease,
          box-shadow 0.15s ease;
      }

      body[data-theme="light"] .customer-base-mode-pill {
        color: #64748b;
        background: rgba(15, 23, 42, 0.04);
        border-color: rgba(15, 23, 42, 0.14);
      }

      .customer-base-mode-toggle-wrap.customer-base-mode--customers .customer-base-mode-pill--customers,
      .customer-base-mode-toggle-wrap.customer-base-mode--suppliers .customer-base-mode-pill--suppliers {
        color: var(--menu-yellow-text);
        background: var(--menu-yellow-soft-strong);
        border-color: var(--menu-yellow-border);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12);
      }

      body[data-theme="light"] .customer-base-mode-toggle-wrap.customer-base-mode--customers .customer-base-mode-pill--customers,
      body[data-theme="light"] .customer-base-mode-toggle-wrap.customer-base-mode--suppliers .customer-base-mode-pill--suppliers {
        color: #0c4a6e;
        background: rgba(37, 99, 235, 0.16);
        border-color: rgba(37, 99, 235, 0.45);
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
      }

      /* Slider: customers (off) = green track; suppliers (on) = blue track */
      .customer-base-mode-toggle-wrap .mode-toggle-slider {
        background: rgba(34, 197, 94, 0.55);
        border: 1px solid rgba(74, 222, 128, 0.65);
      }

      .customer-base-mode-toggle-wrap .mode-toggle-input:focus-visible + .mode-toggle-slider {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .customer-base-mode-toggle-wrap .mode-toggle-input:checked + .mode-toggle-slider {
        background: rgba(37, 99, 235, 0.62);
        border-color: rgba(96, 165, 250, 0.75);
      }

      .customer-base-mode-toggle-wrap .mode-toggle-slider::after {
        background: #f8fafc;
        border: 1px solid rgba(15, 23, 42, 0.28);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
      }

      body[data-theme="light"] .customer-base-mode-toggle-wrap .mode-toggle-slider {
        background: #22c55e;
        border-color: #15803d;
      }

      body[data-theme="light"] .customer-base-mode-toggle-wrap .mode-toggle-input:checked + .mode-toggle-slider {
        background: #2563eb;
        border-color: #1d4ed8;
      }

      body[data-theme="light"] .customer-base-mode-toggle-wrap .mode-toggle-slider::after {
        background: #ffffff;
        border-color: rgba(15, 23, 42, 0.22);
      }

      .customer-base-mode-toggle-wrap .mode-toggle-switch {
        flex-shrink: 0;
      }

      /* Supplier workspace (Customer Base right column) */
      .supplier-workspace-panel {
        padding: 0.75rem 0 0;
      }

      .supplier-workspace-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.35rem;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      body[data-theme="light"] .supplier-workspace-toolbar {
        border-bottom-color: rgba(15, 23, 42, 0.12);
      }

      /* Same section header rhythm as TODAY'S JOBS (title + divider live in toolbar / po-head) */
      .supplier-workspace-title {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
      }

      .supplier-workspace-panel .supplier-workspace-title.customer-day-jobs-title {
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        text-transform: uppercase;
        color: var(--text);
      }

      .supplier-workspace-meta {
        margin: 0 0 0.75rem;
        font-size: 0.85rem;
        color: var(--muted, #6b7280);
      }

      .supplier-workspace-po-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 0.5rem;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      body[data-theme="light"] .supplier-workspace-po-head {
        border-bottom-color: rgba(15, 23, 42, 0.12);
      }

      .supplier-workspace-subtitle {
        margin: 0;
      }

      .supplier-workspace-panel .supplier-workspace-subtitle.customer-day-jobs-title {
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        text-transform: uppercase;
        color: var(--text);
      }

      .supplier-po-list {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }

      .supplier-po-empty {
        font-size: 0.9rem;
        color: var(--muted, #6b7280);
        padding: 0.5rem 0;
      }

      .supplier-po-row {
        display: grid;
        grid-template-columns: minmax(4rem, 6.5rem) 1fr auto;
        gap: 0.5rem;
        align-items: center;
        padding: 0.55rem 0.65rem;
        border-radius: 10px;
        border: 1px solid rgba(15, 23, 42, 0.1);
        background: rgba(255, 255, 255, 0.65);
        cursor: pointer;
        text-align: left;
        font: inherit;
        color: inherit;
      }

      .supplier-po-row:hover {
        border-color: rgba(15, 23, 42, 0.18);
        background: rgba(255, 255, 255, 0.9);
      }

      .supplier-po-row-ref {
        font-weight: 700;
        font-size: 0.82rem;
      }

      .supplier-po-row-title {
        font-size: 0.88rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .supplier-po-row-total {
        font-weight: 600;
        font-size: 0.85rem;
        font-variant-numeric: tabular-nums;
      }

      /* AI Assistant (Groq Cloud plan → user confirm → apply) */
      .ai-assistant-modal {
        width: min(560px, calc(100vw - 24px));
      }

      .ai-assistant-hint {
        font-size: 0.86rem;
        color: rgba(15, 23, 42, 0.72);
        margin: 0 0 10px;
        line-height: 1.45;
      }

      .ai-assistant-textarea {
        resize: vertical;
        min-height: 88px;
        font-family: inherit;
        line-height: 1.4;
      }

      .ai-assistant-speak-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
      }

      .ai-assistant-mic-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        border: 1px solid rgba(34, 197, 94, 0.45);
        background: rgba(22, 163, 74, 0.18);
        color: #14532d;
        font: inherit;
        font-weight: 600;
        font-size: 0.88rem;
        padding: 8px 16px;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
      }

      .ai-assistant-mic-btn:hover {
        background: rgba(22, 163, 74, 0.28);
        border-color: rgba(34, 197, 94, 0.65);
      }

      .ai-assistant-mic-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }

      .ai-assistant-mic-btn.ai-assistant-mic-btn--listening {
        background: rgba(220, 38, 38, 0.14);
        border-color: rgba(220, 38, 38, 0.45);
        color: #7f1d1d;
        animation: ai-assistant-pulse 1.2s ease-in-out infinite;
      }

      @keyframes ai-assistant-pulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.25);
        }
        50% {
          box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
        }
      }

      .ai-assistant-mic-icon svg {
        width: 20px;
        height: 20px;
        display: block;
      }

      .ai-assistant-mic-status {
        font-size: 0.8rem;
        color: rgba(15, 23, 42, 0.55);
      }

      .ai-assistant-error {
        margin-top: 8px;
        font-size: 0.84rem;
        color: #b91c1c;
      }

      .ai-assistant-research-banner {
        font-size: 0.82rem;
        line-height: 1.45;
        margin: 0 0 10px;
        padding: 8px 10px;
        border-radius: 8px;
        background: rgba(59, 130, 246, 0.12);
        border: 1px solid rgba(59, 130, 246, 0.28);
        color: rgba(15, 23, 42, 0.88);
      }

      .ai-assistant-research-banner.ai-assistant-research-banner--warn {
        background: rgba(234, 179, 8, 0.14);
        border-color: rgba(202, 138, 4, 0.35);
      }

      .ai-assistant-summary {
        font-size: 0.9rem;
        line-height: 1.5;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.04);
        border: 1px solid rgba(15, 23, 42, 0.08);
        margin-bottom: 12px;
        white-space: pre-wrap;
        max-height: min(52vh, 480px);
        overflow-y: auto;
        overflow-x: hidden;
      }

      .ai-assistant-action-list {
        margin: 0;
        padding-left: 1.15rem;
        font-size: 0.88rem;
        line-height: 1.45;
      }

      .ai-assistant-action-list li {
        margin-bottom: 6px;
      }

      /*
        Late overrides: later .workspace-panel { padding: 18px; overflow: auto } must not undo Customer Base
        insets or re-enable an outer scrollport (would stack with inner panel scrollers).
      */
      #customerPage:not(.hidden) > aside.panel.customer-panel,
      #customerPage:not(.hidden) > section.panel.workspace-panel.customer-jobs-snapshot-host {
        padding: 14px 8px var(--customer-base-bottom-pad) !important;
        box-sizing: border-box !important;
      }
      #customerPage:not(.hidden) > section.panel.workspace-panel.customer-jobs-snapshot-host {
        overflow: hidden !important;
      }
      #customerPage:not(.hidden) #customerWorkspaceSidePanels.customer-jobs-side-panels > .customer-day-jobs-panel.customer-outstanding-panel,
      #customerPage:not(.hidden) .customer-jobs-snapshot-stack > .customer-today-jobs-panel,
      #customerPage:not(.hidden) .customer-jobs-snapshot-stack .customer-service-due-panel {
        padding: 8px 8px var(--customer-base-bottom-pad) !important;
        box-sizing: border-box !important;
      }