[x-cloak] { display: none !important; }
        /* Reserve scrollbar space whether or not the page actually scrolls.
           Without this, navigating between a short page (no scrollbar) and a
           tall page (scrollbar) shifts the entire layout by ~15px — the
           sidebar visibly jumps left/right between sections. `stable`
           reserves the gutter on both axes so the inner width stays constant
           regardless of content height. */
        html { scrollbar-gutter: stable; }
        /* Scrollbar polish in webkit */
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 8px; }
        ::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184); }

        /* Prev/next record arrows (invoice / quote / job detail) — subtle grey
           chevrons pinned to the left + right margins, vertically centred. The
           left arrow clears the sidebar in both expanded + collapsed states
           (mirrors the sidebar-collapsed FOUC class); on mobile the sidebar is
           off-canvas so it tucks to the edge. Renders inside #main-swap, so the
           prev/next targets refresh with each record. */
        .record-nav-arrow {
            position: fixed; top: 50%; transform: translateY(-50%);
            z-index: 30;
            display: inline-flex; align-items: center; justify-content: center;
            width: 2.25rem; height: 3.5rem; border-radius: 0.5rem;
            color: rgb(148 163 184);
            transition: color .15s ease, background-color .15s ease;
        }
        .record-nav-arrow:hover { color: rgb(51 65 85); background: rgb(100 116 139 / 0.12); }
        .record-nav-next { right: 0.25rem; }
        .record-nav-prev { left: 238px; }
        @media (min-width: 1000px) { html.sidebar-collapsed .record-nav-prev { left: 64px; } }
        @media (max-width: 999px) { .record-nav-prev { left: 0.25rem; } }
        html.theme-night .record-nav-arrow { color: rgb(100 116 139); }
        html.theme-night .record-nav-arrow:hover { color: rgb(203 213 225); background: rgb(148 163 184 / 0.15); }

        /* Cross-document View Transitions (Chrome 126+, Edge 126+, Safari 18+).
           Stops the sidebar + topbar from flashing between page navs by handing
           the same-origin transition off to the browser. Firefox / older
           browsers just get the existing instant-swap behaviour — no JS, no
           polyfill, graceful degrade.

           - @view-transition opt-in    → tells the browser to animate
           - sidebar/topbar named slots → kept visually persistent (no fade)
           - shorter default duration   → 80ms feels instant but smooth */
        @view-transition { navigation: auto; }
        /* Sidebar + topbar stay pinned by name — same view-transition-name on
           the old + new docs means the browser keeps them visually persistent.
           No crossfade, no morph. */
        aside.provider-sidebar { view-transition-name: provider-sidebar; }
        header.provider-topbar { view-transition-name: provider-topbar; }
        ::view-transition-old(provider-sidebar),
        ::view-transition-new(provider-sidebar),
        ::view-transition-old(provider-topbar),
        ::view-transition-new(provider-topbar) {
            animation: none !important;
            mix-blend-mode: normal !important;
        }
        /* Kill the root crossfade on every nav. Without this, every sort /
           filter click triggered an 80ms crossfade between the old and new
           main content. Even when end-positions matched, the table's auto-
           layout column widths reflow when the visible rows differ, and the
           browser interpolated between the snapshots — visible to the user
           as a horizontal "shake to the left" wobble.
           The new behaviour: main content swaps instantly (no animation), but
           the sidebar + topbar still feel pinned because of the named slots
           above. Net result is a snappier, judder-free transition. */
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none !important;
            mix-blend-mode: normal !important;
        }

        /* ===== FOUC-preempt for the sidebar brand =====
           Tailwind CDN parses the DOM + injects styles AFTER the page first
           paints, so the "4S" badge would otherwise render as unstyled text
           for a frame or two on every navigation. Hand-rolling raw CSS for
           the badge + org-name container guarantees they're correctly
           positioned + coloured from frame 1, before Tailwind even loads.
           The Tailwind utility classes still live on the elements as a
           fallback / for when the user resizes / toggles collapse mode. */
        .fs-brand-badge {
            display: inline-flex;
            width: 1.7rem;               /* 15% smaller than the prior 2rem */
            height: 1.7rem;
            border-radius: 0.5625rem;    /* squircle-ish, Apple-style */
            color: white;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.6875rem;
            line-height: 1rem;
            flex-shrink: 0;
            /* Apple "liquid glass": translucent brand gradient + frosted blur,
               a top sheen, a glass-edge border, inner highlight + soft shadow. */
            background:
                linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 60%),
                linear-gradient(170deg, var(--badge-c1, #4f46e5) 0%, var(--badge-c2, #1e1b4b) 100%);
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            backdrop-filter: blur(12px) saturate(180%);
            border: 1px solid rgba(148,163,184,0.45);  /* grey-ish glass keyline */
            box-shadow:
                inset 0 1px 0.5px rgba(255,255,255,0.55),
                inset 0 -1px 1px rgba(2,6,23,0.18),
                0 1px 2.5px rgba(0,0,0,0.6);  /* tiny near-black drop shadow */
            text-shadow: 0 1px 1px rgba(2,6,23,0.25);
        }
        /* Customisable list-table column weight override (Edit Columns → weight).
           Global (here, not in the swapped partial) so it always applies however
           the page was reached. !important + descendant selector beats the
           per-cell font-medium/semibold baked into the cell partials. */
        td.lc-bold, th.lc-bold, td.lc-bold *, th.lc-bold * { font-weight: 700 !important; }
        td.lc-regular, th.lc-regular, td.lc-regular *, th.lc-regular * { font-weight: 400 !important; }
        /* New brand stack: ORG name on top (bold), "powered by 4-Sure 2.0" below in lighter weight.
           Previously fs-brand-text held "4-Sure 2.0" + fs-brand-org held the org name.
           Roles swapped: the SP's identity leads, 4-Sure is the credit underneath. */
        .fs-brand-text {
            font-size: 0.875rem;       /* slightly larger — it's the headline now */
            line-height: 1.125rem;
            font-weight: 700;          /* bold */
            color: rgb(203, 213, 225); /* slate-300 — grey, a touch lighter than the powered-by line */
            max-width: 10rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .fs-brand-org {
            font-size: 0.34375rem;      /* 5.5px — 2pt smaller than the prior 7.5px; quiet credit */
            line-height: 0.6875rem;
            color: rgb(148, 163, 184);  /* slate-400 — lighter */
        }

        /* ===== Sidebar flex layout pre-paint =====
           THE actual nav-flash source. Tailwind's `flex-1` on the nav is
           what keeps the user footer pinned at the bottom — without it,
           the nav takes its natural height and pushes the footer below
           the fold. Before Tailwind CDN boots on each page load, those
           utility classes are inert, so the footer pops out of view for
           ~50-150ms and then jumps in as Tailwind kicks in. Hand-rolling
           the flex props in raw CSS guarantees the layout is correct
           from frame 1 — the footer never disappears on nav. */
        aside.provider-sidebar {
            display: flex;
            flex-direction: column;
        }
        aside.provider-sidebar > nav {
            flex: 1 1 0%;
            min-height: 0;
            overflow-y: auto;
            /* Reserve scrollbar gutter so the sidebar nav doesn't visibly
               shift horizontally when sections grow / shrink across pages. */
            scrollbar-gutter: stable;
        }
        /* ===== Mobile drawer FOUC / nav-flash preempt =====
           On phones + tablets (<1000px) the sidebar is an off-canvas drawer
           toggled by Alpine (sidebarOpen → .translate-x-0 / .-translate-x-full).
           Before Alpine boots on each full-page nav, NEITHER class is applied,
           so the fixed drawer paints fully visible for a frame — and the
           cross-document View Transition snapshots it open — e.g. tapping
           "+ New quote" flashed the side menu on the way to Create Quote.
           Default it off-canvas here; the rule yields the instant Alpine marks
           it open (.translate-x-0), so opening still works + animates. On
           desktop (>=1000px) md:relative + md:translate-x-0 keep it pinned. */
        @media (max-width: 999px) {
            aside.provider-sidebar:not(.translate-x-0):not(.-translate-x-full) { transform: translateX(-100%) !important; }
        }
        /* Same fix for the outer page shell: the top-level x-data div uses
           Tailwind `flex` to put sidebar | main side-by-side. Pre-paint it
           so the main content doesn't briefly stack below the sidebar on
           the first paint of every page. */
        body > [x-data] { display: flex; }
        /* scrollbar-gutter: stable on the *actual* scroll container — without
           this, every full-page nav (column sort, filter dropdown change,
           clear-filters link, auto-refresh) momentarily shrinks/grows the
           viewport scrollbar and shifts the entire main content ~10px
           horizontally. The result on screen is a visible "judder" / shake
           on every click that triggers a reload. scrollbar-gutter on <html>
           already covers the outer page, but main is its own scroll context
           and needs its own gutter reservation. */
        main.provider-main {
            flex: 1 1 0%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            scrollbar-gutter: stable;
        }
        /* Children of the app scroll container keep their natural height.
           Without this, any top-level card that sets overflow (rounded-corner
           clipping, horizontal table scroll) gets flex-COMPRESSED to the
           viewport instead of overflowing — the content below it (save /
           go-live buttons) is clipped and the page cannot scroll to it.
           Nothing relies on that compression (#list-pinned-top is unused);
           a future inner-scroll child can opt back in with explicit
           flex-shrink. */
        main.provider-main > * { flex-shrink: 0; }
        /* List pages (Job Cards / Quotations / Invoices) have a sticky
           #list-pinned-top wrapper that needs to butt directly against
           the topbar so its bg covers the area between the topbar bottom
           and the wrapper's pt-X (otherwise scrolled rows leak through).
           Negative margin-top doesn't work because position:sticky clamps
           the element to its parent's content-box top, ignoring the
           negative margin. The clean fix: zero main's pt only on list
           pages, then the pinned-top's own internal pt-X provides the
           breathing room. Other pages keep main's pt-X. Result: every
           page's H1 sits at the same y (~76px from viewport top). */
        main.provider-main:has(#list-pinned-top) {
            padding-top: 0;
        }

        /* ===== Settings (Our Business) tab strip =====
           1) View Transitions slot so cross-tab navigation smoothly
              crossfades instead of hard-flashing through the new page.
              Default 80ms animation feels instant + clean.
           2) Pre-paint the active-tab border + colour from frame 1 so
              the underline doesn't blink unstyled while Tailwind CDN
              processes brand-600 / text-brand-700.
           3) Pre-paint the H1 page title so it sits in its final font
              weight + size before Tailwind kicks in. */
        .settings-tab-strip { view-transition-name: settings-tab-strip; }
        .settings-tab-active {
            border-bottom-color: #4f46e5 !important;  /* brand-600 */
            color: #4338ca !important;                /* brand-700 */
        }
        .settings-page-title {
            font-size: 1.375rem;       /* text-2xl per base.html config */
            line-height: 1.875rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: rgb(15, 23, 42);    /* slate-900 */
        }