/* SteamShop admin styles: the BeeClair UI kit (~/Downloads/beeclair-ui-kit, as used by BMS in
   E:\Project Management System), with BeeClair red replaced by the client brief's lime #AEE802.
   Tailwind classes don't work inside Filament panels: style custom Blade with pms-* classes here,
   then run: php artisan filament:assets
   Selectors starting di-, pms-support, pms-company-intro, pms-preview-card, pms-document, pms-fbr are
   Digital-Invoicing pages, unused here (harmless; remove if they get in the way). */

/* The sign-in screen font (as BMS). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');


/* ================= Badges (pms.css lines 426-453) ================= */
.pms-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.06);
}

.dark .pms-badge {
    background-color: rgba(255, 255, 255, 0.1);
}

.pms-badge-success { background-color: #dcfce7; color: #166534; }
.pms-badge-warning { background-color: #fef3c7; color: #92400e; }
.pms-badge-danger  { background-color: #fee2e2; color: #991b1b; }
.pms-badge-info    { background-color: #dbeafe; color: #1e40af; }

.dark .pms-badge-success { background-color: rgba(34, 197, 94, 0.15); color: #4ade80; }
.dark .pms-badge-warning { background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.dark .pms-badge-danger  { background-color: rgba(239, 68, 68, 0.15); color: #f87171; }
.dark .pms-badge-info    { background-color: rgba(59, 130, 246, 0.15); color: #60a5fa; }

.pms-muted {
    color: rgba(0, 0, 0, 0.5);
}

/* ================= Filter drawer (phones) (pms.css lines 1606-1807) ================= */
/* ---- filter drawer (client, 2026-10-01) --------------------------------
   resources/views/components/pms/filter-drawer.blade.php: every filter bar (both dashboards, the
   report pages). 768px and up: the fields show inline as before and the drawer chrome is hidden.
   Below: a "Filters" button with a count badge opens the same fields as a bottom sheet. The open
   panel has NO transform, so Filament's fixed-position dropdowns inside it still place correctly. */

.pms-filter-drawer-toggle,
.pms-filter-drawer-head,
.pms-filter-drawer-foot,
.pms-filter-drawer-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .pms-filter-drawer-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.875rem;
        border-radius: 0.5rem;
        border: 1px solid rgba(0, 0, 0, 0.12);
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--gray-700);
        cursor: pointer;
    }

    .dark .pms-filter-drawer-toggle {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        color: var(--gray-200);
    }

    .pms-filter-drawer-toggle svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .pms-filter-drawer-count {
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 0.375rem;
        border-radius: 9999px;
        background: var(--primary-600);
        color: #fff;
        font-size: 0.75rem;
        line-height: 1.25rem;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .pms-filter-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .pms-filter-drawer.is-open .pms-filter-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .pms-filter-drawer-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        max-height: 85dvh;
        background: #fff;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .dark .pms-filter-drawer-panel {
        background: var(--gray-900);
        box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.6);
    }

    .pms-filter-drawer.is-open .pms-filter-drawer-panel {
        transform: none;
        visibility: visible;
        transition: transform 0.2s ease;
    }

    .pms-filter-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        font-size: 1rem;
        font-weight: 600;
    }

    .pms-filter-drawer-foot {
        display: flex;
        gap: 0.5rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .dark .pms-filter-drawer-head,
    .dark .pms-filter-drawer-foot {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .pms-filter-drawer-foot > * {
        flex: 1 1 0;
    }

    .pms-filter-drawer-close {
        display: inline-flex;
        padding: 0.375rem;
        margin: -0.375rem;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
    }

    .pms-filter-drawer-close svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .pms-filter-drawer-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem;
    }

    /* Inside the sheet the filters' own Section card loses its frame: the sheet is the card. */
    .pms-filter-drawer-body .fi-section {
        background: transparent;
        box-shadow: none;
        --tw-ring-shadow: 0 0 #0000;
        border: 0;
    }

    .pms-filter-drawer-body .fi-section-header {
        display: none;
    }

    .pms-filter-drawer-body .fi-section-content-ctn,
    .pms-filter-drawer-body .fi-section-content {
        padding: 0;
        border: 0;
    }

    /* The report's inline Reset beside the period pills: the sheet's foot has one. */
    .pms-filter-drawer-body .rpt-period .fi-fo-field-content-ctn > .fi-sc {
        display: none;
    }

    /* Period pills (and every grouped toggle) wrap inside the sheet instead of running off it. */
    .pms-filter-drawer-body .fi-fo-field-content,
    .pms-filter-drawer-body .rpt-period .fi-fo-field-content {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
    }

    .pms-filter-drawer-body .fi-fo-toggle-buttons.fi-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
        box-shadow: none;
    }

    .pms-filter-drawer-body .fi-fo-toggle-buttons.fi-btn-group > .fi-btn {
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
        border-radius: var(--radius-lg);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    }

    .dark .pms-filter-drawer-body .fi-fo-toggle-buttons.fi-btn-group > .fi-btn {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    html.pms-filter-drawer-locked {
        overflow: hidden;
    }
}

/* ================= Usage tiles (the tile look) (pms.css lines 3017-3128) ================= */
/* Billing → this month's figures (client, 2026-09-28): one row per figure, icon · label ·
   number beside it, instead of the number stacked under an uppercase label. */
.pms-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.pms-usage-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background: #fff;
}

.dark .pms-usage-tile {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.pms-usage-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
}

.pms-usage-svg {
    width: 1.25rem;
    height: 1.25rem;
}

.pms-usage-icon-primary { background: color-mix(in oklab, var(--primary-500) 15%, transparent); color: var(--primary-600); }
.pms-usage-icon-info    { background: color-mix(in oklab, var(--info-500, #3b82f6) 15%, transparent); color: var(--info-600, #2563eb); }
.pms-usage-icon-success { background: color-mix(in oklab, var(--success-500) 15%, transparent); color: var(--success-600); }
.pms-usage-icon-warning { background: color-mix(in oklab, var(--warning-500) 15%, transparent); color: var(--warning-600); }
.pms-usage-icon-danger  { background: color-mix(in oklab, var(--danger-500) 15%, transparent); color: var(--danger-600); }
.pms-usage-icon-gray    { background: color-mix(in oklab, var(--gray-500) 15%, transparent); color: var(--gray-600); }

.dark .pms-usage-icon-primary { color: var(--primary-400); }
.dark .pms-usage-icon-info    { color: var(--info-400, #60a5fa); }
.dark .pms-usage-icon-success { color: var(--success-400); }
.dark .pms-usage-icon-warning { color: var(--warning-400); }
.dark .pms-usage-icon-danger  { color: var(--danger-400); }
.dark .pms-usage-icon-gray    { color: var(--gray-300); }

.pms-usage-label {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
}

.dark .pms-usage-label { color: var(--gray-300); }

.pms-usage-note {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gray-500);
}

.pms-usage-value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.pms-usage-value-warning { color: var(--warning-600); }
.pms-usage-value-danger  { color: var(--danger-600); }
.dark .pms-usage-value-warning { color: var(--warning-400); }
.dark .pms-usage-value-danger  { color: var(--danger-400); }

.pms-usage-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.pms-usage-bar > .pms-progress { flex: 1; }

.pms-usage-caption {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
}

/* Billing → Where to transfer (client, 2026-09-28): the bank's name with an icon, then its
   details as tiles in the same style as this month's figures, each with a copy button. */
.pms-bank-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.pms-bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
}

/* ================= Brand buttons, scrollbars, stat-tile grid, small helper text (pms.css lines 3308-3477) ================= */
/* SteamShop: solid primary buttons in the client brief's exact lime #AEE802 with near-black
   text #171717 (white on lime is unreadable). Filament sets these variables inline from its
   palette, so they need !important. Outlined and link-style buttons keep the palette. */
.fi-btn.fi-color.fi-color-primary:not(.fi-outlined):not(label) {
    --bg: #aee802 !important;
    --text: #171717 !important;
    --hover-bg: #9ccf00 !important;
    --hover-text: #171717 !important;
    --dark-bg: #aee802 !important;
    --dark-text: #171717 !important;
    --dark-hover-bg: #c2f23a !important;
    --dark-hover-text: #171717 !important;
}

/* A switched-on toggle in the solid brand red in both themes (client, 2026-09-30). Filament
   paints it with shade 400 in light mode but 300 in dark mode — a pale coral here. */
.fi-toggle.fi-toggle-on.fi-color-primary {
    --bg: var(--primary-500) !important;
    --dark-bg: var(--primary-500) !important;
}

/* Scrollbars (client, 2026-09-30): slim and rounded everywhere — page, sidebar, tables,
   dropdowns, modals — instead of the browser's wide grey bar with arrow buttons. The thumb
   turns brand lime on hover. Firefox uses scrollbar-width/-color; Chrome/Edge/Safari the
   ::-webkit-scrollbar rules. The standard properties are limited to browsers WITHOUT
   ::-webkit-scrollbar: Chrome 121+ ignores the webkit rules once they are set. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
    }

    .dark * {
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.22);
    border: 2px solid transparent;
    border-radius: 9999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #6b8f00; /* SteamShop: lime-600, readable on white */
}

.dark ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #aee802; /* SteamShop brand lime */
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* List-page tiles (Sale invoices / Buyers / Items, client 2026-09-30): the Billing page's
   pms-usage tiles, four in a row on a wide screen, two by two below that, one on a phone —
   never three and one. The label may wrap so a long figure never runs over it. */
.pms-stat-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pms-stat-tiles .pms-usage-label {
    white-space: normal;
}

@media (max-width: 1440px) {
    .pms-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A row carrying a money figure ("Rs 8,715,976") needs more room before it goes four across. */
@media (max-width: 1760px) {
    .pms-stat-tiles-roomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .pms-stat-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* Buyer form → the NTN / CNIC help line (client, 2026-10-01): the hint, then FBR's answer as
   two badges — or the small "Checking with FBR…" pill — on the same line, wrapping if narrow. */
.pms-ntn-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 1.375rem;
    gap: 0.375rem 0.625rem;
}

.pms-ntn-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* A toggle button whose input is disabled while a request runs looks and acts locked. */
.fi-fo-toggle-buttons-input:disabled + .fi-btn {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* As slim as the checking pill, so the line keeps its height when one replaces the other. */
.pms-ntn-badges .fi-badge {
    min-height: 0;
    padding-block: 0.1875rem;
    padding-inline: 0.4375rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

/* Hidden until Livewire shows it while FBR is asked: its own "hide until loading" rule does
   not match the combined wire:loading.inline-flex.delay attribute. */
.pms-ntn-help .pms-fbr-checking {
    display: none;
    margin-top: 0;
    padding: 0.125rem 0.5rem 0.125rem 0.3125rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

.pms-ntn-help .pms-fbr-checking-ring {
    width: 0.625rem;
    height: 0.625rem;
    border-width: 1.5px;
    vertical-align: -0.0625rem;
}

/* Smaller helper text where a hint must stay on one line (client, 2026-09-30). */
.pms-help-sm .fi-sc-text {
    font-size: 0.75rem;
    line-height: 1rem;
}

/* Buyer form → "Checking with FBR…" (client, 2026-09-30): a pill with a smooth brand-red
   ring and dots that fill in one by one. No motion for people who ask for less. */
.pms-fbr-checking {
    align-items: center;
    width: fit-content;
    margin-top: 0.625rem;
    padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--primary-700);
    background: color-mix(in oklab, var(--primary-500) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary-500) 25%, transparent);
}

/* ================= Intro card, 2/3-tile rows, stacked tiles, unsaved-changes bar, equal-height sections (pms.css lines 3521-3793) ================= */
/* Admin → Sandbox scenarios picker (client, 2026-09-30): one card, the explanation on the
   left and the company dropdown on the right; an empty state until a company is chosen. */
.pms-picker-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background: #fff;
}

.dark .pms-picker-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.pms-picker-intro {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 16rem;
    flex: 1 1 22rem;
}

.pms-picker-intro .pms-usage-label {
    white-space: normal;
}

.pms-picker-field {
    flex: 0 1 26rem;
    min-width: 16rem;
}

.pms-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--gray-300);
    border-radius: 0.75rem;
    text-align: center;
}

.dark .pms-empty-state {
    border-color: rgba(255, 255, 255, 0.15);
}

/* ══════════════════════════════════════════════════════════════════════
   One page style for both panels (client, 2026-09-30): the intro card
   (<x-pms.page-intro>, the Sandbox scenarios picker card above) and the stat
   tiles (<x-pms.stat-tiles>, the pms-usage tiles above). Order on a page:
   intro card, tiles, then the page body, each the page's own 2rem apart.
   ══════════════════════════════════════════════════════════════════════ */

/* The intro card's right-hand buttons, badge or figure: their own width, at the row's end. */
.pms-page-intro-actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    margin-left: auto;
}

/* An intro card above tiles inside a list page's header schema, whose own gap is 1.5rem:
   topped up to the page's 2rem so every page spaces them alike. */
.pms-page-intro-in-schema {
    margin-bottom: 0.5rem;
}

/* A row of three stays three across until the screen is narrow — never two and one. */
.pms-stat-tiles-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .pms-stat-tiles-3 { grid-template-columns: minmax(0, 1fr); }
}

/* A row of two: half each, stacking on a phone. */
.pms-stat-tiles-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .pms-stat-tiles-2 { grid-template-columns: minmax(0, 1fr); }
}

/* A tile that opens the list it counts. */
a.pms-usage-tile-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.pms-usage-tile-link:hover {
    border-color: var(--primary-400);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dark a.pms-usage-tile-link:hover {
    border-color: var(--primary-600);
}

a.pms-usage-tile-link:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* A row with a long figure (money), every tile alike: icon + label on the top line, the figure
   left-aligned under the label, the note under the figure. Label and note stay on one line
   each — cut with an ellipsis, whole in the tooltip — so a long figure never squeezes them. */
.pms-usage-tile.pms-usage-tile-stacked {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Centred, so a tile without a note, stretched to its neighbours' height, keeps equal
       space above and below (client, 2026-10-01). */
    align-content: center;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
}

.pms-usage-tile-stacked > :nth-child(n + 3) {
    grid-column: 2;
}

.pms-usage-tile-stacked .pms-usage-label,
.pms-usage-tile-stacked .pms-usage-note {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pms-usage-tile-stacked .pms-usage-value {
    margin-top: 0.125rem;
    font-size: 1.4375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

.pms-usage-tile-stacked > .pms-badge {
    justify-self: start;
}

/* "Rs" a little smaller and muted beside the digits. */
.pms-usage-currency {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--gray-500);
}

.dark .pms-usage-currency {
    color: var(--gray-400);
}

/* Unsaved changes bar (client, 2026-10-01): floats at the bottom centre, slides up when the
   form has changes, with Discard and Save changes. */
.pms-unsaved-bar {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    background: #fff;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, 0);
}

.dark .pms-unsaved-bar {
    border-color: var(--gray-700);
    background: var(--gray-900);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
}

.pms-unsaved-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--gray-700);
}

.dark .pms-unsaved-text { color: var(--gray-200); }

.pms-unsaved-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--primary-500);
}

.pms-unsaved-actions {
    display: inline-flex;
    gap: 0.5rem;
}

/* Centred on the content, not the window: the sidebar takes the left of a wide screen. */
@media (min-width: 64rem) {
    .fi-body:not(.fi-body-has-top-navigation) .pms-unsaved-bar {
        left: calc(50% + var(--sidebar-width, 0px) / 2);
    }
}

.pms-unsaved-anim { transition: transform 0.25s ease, opacity 0.25s ease; }
.pms-unsaved-hidden { transform: translate(-50%, 1.5rem); opacity: 0; }

@media (max-width: 480px) {
    .pms-unsaved-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pms-unsaved-anim { transition: opacity 0.15s ease; }
}
/* Admin company page → Invoicing box (client, 2026-10-01): its four tiles two by two at every
   width above a phone — the box is half the page wide, so four across would squeeze them. */
.pms-stat-tiles.pms-admin-invoicing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .pms-stat-tiles.pms-admin-invoicing { grid-template-columns: minmax(0, 1fr); }
}

/* Admin company page (client, 2026-10-01): "Owner account" and "Invoicing" side by side, both
   the row's height. Filament wraps the grid in our div, then each section in .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-section
   > section.fi-section, so each level is stretched. Stacked on narrow screens: natural heights. */
@media (min-width: 1024px) {
    .pms-equal-sections > .fi-grid > .fi-grid-col > .fi-sc-component,
    .pms-equal-sections > .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-section,
    .pms-equal-sections > .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-section > .fi-section {
        height: 100%;
    }

    /* Everywhere (client, 2026-10-01: "match height"): sections side by side in any form grid
       fill their row, so the shorter box never ends early. A section alone on its row keeps
       its own height (the row is its height). */
    .fi-grid-col > .fi-sc-component:has(> .fi-sc-section),
    .fi-grid-col > .fi-sc-component > .fi-sc-section,
    .fi-grid-col > .fi-sc-component > .fi-sc-section > .fi-section {
        height: 100%;
    }
}

/* The running release at the foot of both sidebars (client, 2026-10-01). Lined up with the
   navigation's own 1.5rem inset; centred in a collapsed (icon-only) sidebar so it never clips. */
.pms-version {
    flex-shrink: 0;
    padding: 0.5rem 1.5rem 0.75rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: all;
}

/* ================= Top bar on phones + mobile alignment (pms.css lines 3936-4123) ================= */
/* Phones/tablets (client, 2026-10-02): less space left of the hamburger. Filament gives the
   top bar 1rem each side; the menu button carries its own padding too. */
@media (max-width: 1023px) {
    .fi-topbar { padding-inline-start: 0.375rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile alignment (client, 2026-10-02)
   On a phone, whatever drops under a title (badges, buttons, a picker, a date) starts at the
   left, lined up with the content, instead of dangling at the right. Desktop is unchanged:
   every rule here is below 640px (the filter drawer's own break is 768px).
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 639.98px) {
    /* Intro cards (<x-pms.page-intro>, the Sandbox scenarios picker, the admin company intro):
       the badge, buttons or field on their own line under the text, starting where the title's
       text starts (icon 2.25rem + gap 0.75rem), not at the icon's edge. */
    .pms-picker-card {
        row-gap: 0.75rem;
    }

    .pms-picker-card > .pms-picker-intro {
        min-width: 0;
        flex-basis: 100%;
    }

    .pms-picker-card > .pms-page-intro-actions,
    .pms-picker-card > .pms-picker-field {
        flex: 1 1 100%;
        min-width: 0;
        justify-content: flex-start;
        margin-left: 3rem;
    }

    .pms-company-intro .pms-page-intro-actions {
        margin-left: 3rem;
    }

    /* Section headers with actions: heading and collapse chevron share the first line; the
       actions take their own line below, from the left. */
    .fi-section-header:has(> .fi-section-header-after-ctn) > .fi-section-header-text-ctn {
        flex: 1 1 0;
        order: 1;
    }

    .fi-section-header:has(> .fi-section-header-after-ctn) > .fi-section-collapse-btn {
        order: 2;
    }

    .fi-section-header > .fi-section-header-after-ctn {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
    }

    .fi-section-header-after-ctn > .fi-sc.fi-align-end {
        justify-content: flex-start;
    }

    /* Wizard → Invoice preview: Columns · Print · Download PDF as one row of three equal
       buttons, icon over a short label, so all three fit a phone without wrapping. */
    .pms-preview-card .fi-section-header-after-ctn > .fi-sc {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .pms-preview-card .fi-section-header-after-ctn .di-cols {
        display: block;
    }

    .pms-preview-card .fi-section-header-after-ctn .fi-btn {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
        line-height: 1rem;
        white-space: nowrap;
    }

    .pms-preview-card .di-cols-chevron {
        display: none !important;
    }

    /* The Columns menu opens from the left edge of its button (it is the first of three). */
    .pms-preview-card .di-cols-menu {
        left: 0;
        right: auto;
        max-width: calc(100vw - 2rem);
    }

    /* The printed sheet as wide as the card allows: less padding at every level. */
    .di-invoice-wizard .fi-sc-wizard-step {
        padding: 0.75rem;
    }

    .pms-preview-card > .fi-section-content-ctn > .fi-section-content {
        padding: 0.5rem;
    }

    .pms-document-frame {
        padding: 0;
        background: none;
    }

    .dark .pms-document-frame {
        background: none;
    }

    .pms-document-frame .di-sheet-wrap {
        padding: 6px;
    }

    /* Too small to read on a phone: pinch to zoom, or open the PDF. */
    .pms-document-open {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.625rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--primary-600);
    }

    .dark .pms-document-open {
        color: var(--primary-400);
    }

    .pms-document-open-icon {
        width: 1rem;
        height: 1rem;
    }

    /* Table toolbars: the search box starts at the left and fills the row (Filament pushes it
       right with margin-inline-start:auto, leaving a blank strip once the empty actions box is
       hidden). */
    .fi-ta-header-toolbar > :nth-child(2) {
        flex: 1 1 auto;
        margin-inline-start: 0;
    }

    .fi-ta-header-toolbar > :nth-child(2) > .fi-ta-search-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Help desk: a message's date under its author, from the left, instead of wrapping to the right. */
    .pms-support-msg-head time {
        flex-basis: 100%;
        margin-left: 0;
    }

    /* Label / value lists (invoice header, ticket details): a label column and the values
       left-aligned beside it. A long value (buyer, address) wrapped to the left while short ones
       sat at the right edge; now every value starts on the same line. */
    .pms-kv-row {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: 0.75rem;
    }

    .pms-kv-row dd,
    .pms-support-page-url dd {
        text-align: left;
        overflow-wrap: anywhere;
    }

    .pms-totals-card .pms-kv-row {
        display: flex;
    }

    .pms-totals-card .pms-kv-row dd {
        text-align: right;
    }
}

/* The "Open the PDF" link under the preview is for phones only. */
@media (min-width: 640px) {
    .pms-document-open {
        display: none;
    }
}

/* ================= Company switcher (pms.css lines 4298-4393) ================= */
/* Company switcher (client, 2026-10-05): long company names wrap onto a second line instead of
   being cut with "…"; the list keeps its own vertical scroll when there are many companies. */
.fi-tenant-menu .fi-dropdown-list-item-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.fi-tenant-menu .fi-dropdown-list-item { align-items: center; height: auto; min-height: 2.25rem; }
.fi-tenant-menu .fi-dropdown-panel { overflow-y: auto; }

/* Help centre (client, 2026-10-05): topic cards, article lists, the "Your tickets" link, the
   "Was this helpful?" row and the "Didn't find your answer?" block. Everything is prefixed .pms-help. */
/* Six topics in full rows, no gap at the end (client, 2026-10-05): 3 + 3 on a wide screen,
   2 + 2 + 2 on a tablet, one column on a phone. */
.pms-help-topics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 1023px) { .pms-help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pms-help-topics { grid-template-columns: minmax(0, 1fr); } }
.pms-help-topic {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: border-color 0.15s;
}
.pms-help-topic:hover,
.pms-help-topic:focus-visible { border-color: var(--primary-500); }
.dark .pms-help-topic { border-color: rgba(255, 255, 255, 0.1); background-color: rgb(24, 24, 27); box-shadow: none; }
.dark .pms-help-topic:hover,
.dark .pms-help-topic:focus-visible { border-color: var(--primary-400); }
.pms-help-topic-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.pms-help-topic-name { font-size: 0.9375rem; font-weight: 600; }
.pms-help-topic-desc { font-size: 0.8125rem; color: rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; }
.dark .pms-help-topic-desc { color: rgba(255, 255, 255, 0.6); }
.pms-help-topic-count { font-size: 0.75rem; font-weight: 500; color: var(--primary-600); }
.dark .pms-help-topic-count { color: var(--primary-400); }

.pms-help-list { list-style: none; margin: 0; padding: 0; }
.pms-help-list li + li { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.dark .pms-help-list li + li { border-top-color: rgba(255, 255, 255, 0.1); }
.pms-help-list-link {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1.25rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.pms-help-list-link:hover,
.pms-help-list-link:focus-visible { background-color: rgba(0, 0, 0, 0.03); }
.dark .pms-help-list-link:hover,
.dark .pms-help-list-link:focus-visible { background-color: rgba(255, 255, 255, 0.04); }
.pms-help-list-title { font-size: 0.875rem; font-weight: 600; color: var(--primary-600); overflow-wrap: anywhere; }
.dark .pms-help-list-title { color: var(--primary-400); }
.pms-help-list-summary { font-size: 0.8125rem; color: rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; }
.dark .pms-help-list-summary { color: rgba(255, 255, 255, 0.6); }
.pms-help-list-topic { font-size: 0.75rem; color: rgba(0, 0, 0, 0.45); }
.dark .pms-help-list-topic { color: rgba(255, 255, 255, 0.45); }

.pms-help-tickets-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-600);
    text-decoration: none;
    white-space: nowrap;
}
/* No underline on hover (client, 2026-10-05): a slightly deeper red instead. */
.pms-help-tickets-link, .pms-help-tickets-link:hover { text-decoration: none; }
.pms-help-tickets-link:hover { color: var(--primary-700); }
.dark .pms-help-tickets-link:hover { color: var(--primary-300); }
.dark .pms-help-tickets-link { color: var(--primary-400); }
.pms-help-tickets-icon { width: 1.25rem; height: 1.25rem; }
.pms-help-waiting {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in oklab, var(--primary-500) 15%, transparent);
}

/* ================= Sticky wizard Back/Next (pms.css lines 4423-4445) ================= */
/* Sale invoice wizard (client, 2026-10-05): Back / Next in a bar pinned to the bottom of the screen
   while the step is in view — no scrolling down a long Items step to reach them. Sticky, not fixed,
   so it never covers the step's last field and stops at the end of the wizard. */
.di-invoice-wizard .fi-sc-wizard-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: color-mix(in oklab, white 92%, transparent);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, 0.25);
}
.dark .di-invoice-wizard .fi-sc-wizard-footer {
    background: color-mix(in oklab, var(--gray-900) 92%, transparent);
    border-top-color: var(--gray-700);
    box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, 0.6);
}
@media (max-width: 639px) {
    .di-invoice-wizard .fi-sc-wizard-footer { padding: 0.625rem 0.75rem; }
}


/* ======== From BMS (E:\Project Management System
esources\css\pms.css): sign-in screen ======== */
/* ═══════════════════════════════════════════════════════════════════════
   Sign-in screen (app/Filament/Auth/Login.php)

   Ported from the static "Modernist" mockup. Everything is scoped under
   .pms-login, including the design tokens, so none of it leaks into the rest
   of the panel — the app's own theme is unrelated to this screen.

   The form markup is Filament's, not ours, so the rules below reach into
   .fi-* classes. That is the trade: we keep Filament's authentication,
   validation and rate limiting, and restyle what it renders.

   Deliberately light-only. This is a marketing-facing screen with a fixed
   palette; it does not follow the panel's dark mode.
   ══════════════════════════════════════════════════════════════════════ */

.pms-login {
    --pms-ink: #201e1d;
    --pms-bg: #f3f2f2;
    --pms-surface: #eae9e9;
    /* SteamShop lime (#AEE802, the client brief) on near-black, in place of BMS's
       golden. Like the golden, lime is a fill, never text on the light panel (it
       fails contrast there): links, carets and ticks use ink with a lime accent. */
    --pms-accent: #aee802; /* SteamShop */
    --pms-accent-400: #aee802;
    --pms-accent-700: #8fc000;
    --pms-neutral-100: #f8f4f4;
    --pms-neutral-900: #101010;
    --pms-divider: rgba(32, 30, 29, 0.4);
    --pms-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--pms-bg);
    color: var(--pms-ink);
    font-family: var(--pms-font);
}

/* ---- left: media panel ---------------------------------------------- */

.pms-login-media {
    position: relative;
    overflow: hidden;
    background: var(--pms-neutral-900);
}

.pms-login-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The source is already greyscale; this keeps it so if the asset is ever
       swapped for a colour one, and adds the mockup's contrast lift. */
    filter: grayscale(1) contrast(1.08);
}

/* The building photo; its sign sits in the upper middle, so it is kept in frame. */
.pms-login-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}

.pms-login-scrim {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 24px 76px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(32, 30, 29, 0) 0%,
        rgba(32, 30, 29, 0) 50%,
        rgba(32, 30, 29, 0.8) 78%,
        rgba(32, 30, 29, 0.92) 100%
    );
}

.pms-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The real wordmark, reversed. Replaced a plain accent square on
   2026-09-11. Width-constrained rather than height-constrained: the artwork is
   1472x318, so a height alone would let it run the width of the column. */
.pms-login-logo {
    width: 132px;
    height: auto;
    flex: none;
}

/* Kept for anything else that wants it; the login screen no longer prints the
   name beside the logo, which already says it. */
.pms-login-brand-name {
    font-weight: 800;
    font-size: 17px;
    color: var(--pms-neutral-100);
}

.pms-login-statement {
    max-width: 420px;
}

.pms-login-kicker {
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pms-accent-400);
}

.pms-login-headline {
    margin: 0;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--pms-neutral-100);
}

.pms-login-rule {
    width: 64px;
    height: 3px;
    margin: 24px 0 16px;
    background: var(--pms-accent);
}

.pms-login-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(248, 244, 244, 0.75);
}

/* ---- right: form panel ---------------------------------------------- */

.pms-login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 88px;
}

.pms-login-form {
    width: 100%;
}

.pms-login-title {
    margin: 0 0 6px;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--pms-ink);
}

.pms-login-sub {
    margin: 0 0 34px;
    font-size: 14px;
    color: rgba(32, 30, 29, 0.6);
}

/* ---- Filament's form, restyled -------------------------------------- */

.pms-login .fi-sc-has-gap {
    gap: 20px;
}

.pms-login .fi-fo-field-label {
    font-family: var(--pms-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(32, 30, 29, 0.6);
}

/* Filament colours the inner span, not the label, so setting it on the label
   alone loses — which left these rendering near-white on a light panel. */
.pms-login .fi-fo-field-label-content {
    color: rgba(32, 30, 29, 0.6);
}

/* The mockup has no required asterisks; the fields are both required anyway
   and the form says so on submit. */
.pms-login .fi-fo-field-label-required-mark {
    display: none;
}

/* The mockup fills inputs with --color-surface rather than white. */
.pms-login .fi-input-wrp {
    border-radius: 0;
    border: 1px solid var(--pms-divider);
    background: var(--pms-surface);
    box-shadow: none;
    outline: none;
}

.pms-login .fi-input-wrp:hover {
    border-color: rgba(32, 30, 29, 0.45);
}

/* A soft halo, not a second border: an inset ring on top of the border read
   as an error state at a glance. */
/* No focus border or halo (owner's choice): the caret shows where you are typing. */
.pms-login .fi-input-wrp:focus-within {
    border-color: var(--pms-divider);
    box-shadow: none;
}

.pms-login .fi-input-wrp input {
    min-height: 44px;
    font-family: var(--pms-font);
    font-size: 15px;
    color: var(--pms-ink);
    background: transparent;
    caret-color: var(--pms-ink);
}

/*
   Chrome paints autofilled inputs with its own pale blue and ignores
   background-color, so a filled field looked nothing like an empty one. The
   only lever is an inset shadow large enough to cover the field, plus
   text-fill-color for the text itself.
*/
.pms-login .fi-input-wrp input:-webkit-autofill,
.pms-login .fi-input-wrp input:-webkit-autofill:hover,
.pms-login .fi-input-wrp input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pms-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--pms-surface) inset;
    caret-color: var(--pms-ink);
}

/* The authenticator code boxes on the sign-in page (owner: not visible). Filament draws them white with a faint
   border, and in dark mode with white text, on this always-light page: they take the page's own field colours. */
.pms-login .fi-one-time-code-input-ctn > .fi-one-time-code-input-digit {
    background: var(--pms-surface);
    border: 1px solid var(--pms-divider);
    border-radius: 0;
    color: var(--pms-ink);
    caret-color: var(--pms-ink);
    box-shadow: none;
}

.pms-login .fi-one-time-code-input-ctn > .fi-one-time-code-input-digit:focus {
    border-color: var(--pms-ink);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

/* The reveal button sits inside the field, so it takes the field's fill
   rather than Filament's white, with a hairline to separate it. */
.pms-login .fi-input-wrp-suffix {
    background: var(--pms-surface);
}

.pms-login .fi-input-wrp-actions button {
    border-radius: 0;
    color: rgba(32, 30, 29, 0.55);
}

.pms-login .fi-input-wrp-actions button:hover {
    color: var(--pms-ink);
}

/*
   Checkbox: an 18px square with no tick. appearance:none removes the native
   control (and Filament's SVG tick); checked state is an accent fill with a
   3px inset ring of the page background, which is what the mockup draws.
*/
.pms-login .fi-checkbox-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 0;
    border: 1.5px solid var(--pms-divider);
    background: transparent;
    background-image: none;
}

.pms-login .fi-checkbox-input:checked {
    background-color: var(--pms-accent);
    background-image: none;
    border-color: var(--pms-ink);
    box-shadow: inset 0 0 0 3px var(--pms-bg);
}

.pms-login .fi-checkbox-input:focus-visible {
    outline: 2px solid var(--pms-ink);
    outline-offset: 2px;
}

.pms-login label:has(.fi-checkbox-input) .fi-fo-field-label-content {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--pms-ink);
}

/* Filament colours links from the panel's primary (amber on the tenant panel,
   slate on the platform panel). This screen has its own palette. */
.pms-login .fi-link {
    color: var(--pms-ink) !important;
    text-decoration: underline;
    text-decoration-color: var(--pms-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-family: var(--pms-font);
    font-size: 12px;
    font-weight: 600;
}

.pms-login .fi-link:hover {
    color: var(--pms-ink) !important;
    text-decoration-color: var(--pms-ink);
}

/*
   Submit button. !important is load-bearing here rather than lazy: Filament
   colours .fi-btn through same-specificity utility classes on the element
   (fi-bg-color-400 and friends), so a plain descendant selector ties and
   loses on source order.

   justify-content is flush left, and the corners stay square — both are
   design-system rules from the mockup's readme, not oversights.
*/
.pms-login .fi-ac .fi-btn,
.pms-login .pms-auth-form .fi-btn {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    padding-inline: 18px;
    border-radius: 0 !important;
    background-color: var(--pms-accent) !important;
    color: var(--pms-ink) !important;
    font-family: var(--pms-font);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none !important;
}

.pms-login .fi-ac .fi-btn:hover,
.pms-login .pms-auth-form .fi-btn:hover {
    background-color: var(--pms-accent-700) !important;
}

/* ---- responsive + motion -------------------------------------------- */

@media (max-width: 900px) {
    .pms-login {
        grid-template-columns: 1fr;
    }

    /* A phone shows the building and its sign, not the headline over it. */
    .pms-login-media {
        min-height: 240px;
    }

    .pms-login-statement {
        display: none;
    }

    .pms-login-photo {
        object-position: 40% 42%;
    }

    .pms-login-panel {
        padding: 32px 24px;
    }

    .pms-login-headline {
        font-size: 30px;
    }
}

/* The panel falls back to its ink background, which the scrim sits on. */
@media (prefers-reduced-motion: reduce) {
    .pms-login-video {
        display: none;
    }
}


/* ---- The sidebar's own edge (client, 2026-10-06) -----------------------------
   The navigation sat on white against a gray-50 page with nothing between them,
   so on a bright screen the two areas read as one and the eye had no left
   margin to come back to. A hairline rule and a faintly cooler panel separate
   them the way the cards separate themselves from the page behind.
   Only the edge is drawn: the nav itself is Filament's and is left alone. */
.fi-sidebar {
    border-inline-end: 1px solid rgba(17, 24, 39, 0.08);
    background-color: #fbfbfc;
}

.dark .fi-sidebar {
    border-inline-end-color: rgba(255, 255, 255, 0.08);
    /* The same 2% white over the dark page, but solid: on a phone the sidebar opens OVER the page, and the old
       translucent white let the dashboard show through it (owner, 2026-10-29). */
    background-color: color-mix(in srgb, #fff 2%, var(--gray-950));
}

/* Forgot password: the way back to sign in, under the form. */
.pms-login-back {
    margin-top: 20px;
}

.pms-login-back .fi-link {
    font-size: 13px;
}


/* SteamShop: the gift-card artwork is a cut-out, not a photo, so it is shown whole in the upper
   part of the panel (BMS's building photo fills it edge to edge), above the statement the scrim
   carries. On a phone the statement is hidden, so the artwork takes the whole strip. */
.pms-login-photo-whole {
    top: 7%;
    left: 8%;
    width: 84%;
    height: 54%;
    object-fit: contain;
    object-position: 50% 50%;
}

@media (max-width: 900px) {
    .pms-login-photo-whole {
        top: 8%;
        height: 84%;
    }
}

/* --- Price breakdown (card-value form's calculator panel; views/filament/price-breakdown) ------------------ */
.pms-breakdown {
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
    font-size: 0.875rem;
}
.dark .pms-breakdown { border-color: var(--gray-700); }
.pms-breakdown-empty { display: flex; gap: .625rem; align-items: flex-start; padding: 0.875rem 1rem; border-radius: .625rem;
    background: color-mix(in oklab, var(--warning-500) 10%, transparent); color: var(--warning-800); font-size: .875rem; line-height: 1.45; }
.dark .pms-breakdown-empty { background: color-mix(in oklab, var(--warning-500) 12%, transparent); color: var(--warning-200); }
.pms-breakdown-empty-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--warning-500); }
.pms-breakdown-empty strong { display: block; font-weight: 600; margin-bottom: .125rem; }
.pms-breakdown-empty span { display: block; }
.pms-breakdown-rows { margin: 0; }
.pms-breakdown-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}
.dark .pms-breakdown-rows > div { border-bottom-color: var(--gray-800); }
.pms-breakdown-rows dt { color: var(--gray-500); white-space: nowrap; }
.pms-breakdown-rows dd { margin: 0; font-weight: 600; text-align: right; }
.pms-breakdown-formula { flex-direction: column; }
.pms-breakdown-formula dd { text-align: left; font-weight: 400; }
.pms-breakdown-formula code {
    display: block;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--gray-50);
    font-size: 0.75rem;
}
.dark .pms-breakdown-formula code { background: var(--gray-800); }
.pms-breakdown-good { color: var(--success-600); }
.pms-breakdown-bad { color: var(--danger-600); }
.dark .pms-breakdown-good { color: var(--success-400); }
.dark .pms-breakdown-bad { color: var(--danger-400); }
.pms-breakdown-final {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--primary-400) 14%, transparent);
}
.pms-breakdown-final strong { font-size: 1.25rem; }
.pms-breakdown-final small { display: block; font-size: .75rem; font-weight: 400; color: var(--gray-500); }
.pms-breakdown-shelf { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: .5rem 1rem; font-size: .875rem; color: var(--gray-500); }
/* A warning inside the panel (face value, sale price): spaced from what's around it. */
.pms-breakdown-note { margin: .75rem; }

/* --- Price calculator page (views/filament/pages/price-calculator) ------------------------------------------- */
.pms-calc-form { display: flex; flex-direction: column; gap: 1rem; }
.pms-calc-actions { display: flex; justify-content: flex-start; }
.pms-calc-suppliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.pms-calc-supplier {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
}
.dark .pms-calc-supplier { border-color: var(--gray-700); }
.pms-calc-supplier-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pms-calc-supplier-facts { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; font-size: 0.875rem; }
.pms-calc-supplier-facts > div { display: flex; justify-content: space-between; gap: 1rem; }
.pms-calc-supplier-facts dt { color: var(--gray-500); white-space: nowrap; }
.pms-calc-supplier-facts dd { margin: 0; font-weight: 600; white-space: nowrap; }
.pms-calc-supplier-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.pms-calc-note, .pms-calc-muted { font-size: 0.875rem; color: var(--gray-500); }
.pms-calc-note a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.dark .pms-calc-note a { color: var(--primary-400); }
.pms-calc-table-wrap { overflow-x: auto; }
.pms-calc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.pms-calc-table th { text-align: left; font-weight: 600; padding: 0.5rem 0.75rem; white-space: nowrap; border-bottom: 1px solid var(--gray-200); }
.pms-calc-table td { padding: 0.625rem 0.75rem; vertical-align: top; border-bottom: 1px solid var(--gray-100); }
.dark .pms-calc-table th { border-bottom-color: var(--gray-700); }
.dark .pms-calc-table td { border-bottom-color: var(--gray-800); }
.pms-calc-table code { font-size: 0.75rem; white-space: nowrap; }
.pms-calc-table td:first-child { white-space: nowrap; }
.pms-calc-table td:nth-child(3) { width: 1%; white-space: nowrap; } /* type badges never truncate ("Ma...") */
/* A Filament badge truncates itself (overflow hidden), which lets a table squeeze it to nothing whatever the cell
   asks: its own text is its least width. */
.pms-calc-table td:nth-child(3) .fi-badge { max-width: none; min-width: max-content; }
@media (max-width: 640px) {
    .pms-calc-table th:nth-child(4), .pms-calc-table td:nth-child(4) { display: none; } /* descriptions: wide screens only */
}

/* --- Bulk manager: compact inline inputs so a row fits at 1280 px (BulkManagerTable) ---------------------------- */
/* Wide enough for "DefinitePlay" beside its chevron and a 6-figure price (they were cut at 8 / 5.5 rem). */
.pms-bulk-table .fi-ta-text-input { width: 6.5rem; min-width: 0; }
.pms-bulk-table .fi-ta-select { width: 9.75rem; min-width: 0; }
.pms-bulk-table .fi-ta-text-input .fi-input, .pms-bulk-table .fi-ta-select .fi-select-input { padding-inline: 0.5rem; }
.pms-bulk-table .pms-bulk-date, .pms-bulk-table .pms-bulk-date * { white-space: nowrap; } /* a sale's from / to day: a button opening the date picker */
.pms-bulk-table .fi-ta-text-input.pms-bulk-short { width: 4.25rem; } /* profit % and threshold: a few digits */
.pms-bulk-table .fi-ta-text-input.pms-bulk-cost { width: 9.75rem; } /* actual price: the currency prefix and 4 decimals */
/* The line under an inline input (TextInputWithNoteColumn): the Sale price's "Ends in 3 days". */
.pms-input-note { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--gray-500); white-space: nowrap; }

/* Bulk manager, "Enable editing": the "Editing on · 14:32 left" badge beside Lock (edit-unlock-badge.blade.php). */
.pms-edit-unlock { display: inline-flex; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Bulk manager, Codes column: the count opens the page's one codes popover (bulk-manager/codes-popover.blade.php). */
.pms-codes-cell { padding: 0.75rem; }
.pms-codes-count { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pms-codes-count.is-ok { color: var(--success-600); }
.pms-codes-count.is-low { color: var(--warning-600); }
.dark .pms-codes-count.is-ok { color: var(--success-400); }
.dark .pms-codes-count.is-low { color: var(--warning-400); }
button.pms-codes-count, a.pms-codes-count { padding: 0.125rem 0.5rem; border-radius: 0.375rem; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
button.pms-codes-count:hover, button.pms-codes-count:focus-visible, a.pms-codes-count:hover, a.pms-codes-count:focus-visible { background: var(--gray-100); outline: none; }
.dark button.pms-codes-count:hover, .dark button.pms-codes-count:focus-visible, .dark a.pms-codes-count:hover, .dark a.pms-codes-count:focus-visible { background: rgba(255, 255, 255, 0.08); }
.pms-codes-pop {
    position: fixed; z-index: 40; width: 18rem; max-width: calc(100vw - 1rem); padding: 0.75rem;
    border: 1px solid var(--gray-200); border-radius: 0.75rem; background: #fff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); outline: none;
}
.dark .pms-codes-pop { border-color: rgba(255, 255, 255, 0.1); background: var(--gray-900); }
.pms-codes-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.pms-codes-pop-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 600; color: var(--gray-950); }
.dark .pms-codes-pop-title { color: #fff; }
.pms-codes-pop-total { flex: none; font-size: 0.75rem; color: var(--gray-500); white-space: nowrap; }
.pms-codes-pop-list { max-height: 15rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.pms-codes-pop-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; border-top: 1px solid var(--gray-100); }
.dark .pms-codes-pop-list li { border-color: rgba(255, 255, 255, 0.06); }
.pms-codes-pop-code { min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: var(--gray-800); user-select: all; }
.dark .pms-codes-pop-code { color: var(--gray-200); }
.pms-codes-pop-eye { flex: none; display: inline-flex; padding: 0.25rem; border-radius: 0.375rem; color: var(--gray-500); }
.pms-codes-pop-eye:hover, .pms-codes-pop-eye:focus-visible { background: var(--gray-100); color: var(--gray-900); outline: none; }
.dark .pms-codes-pop-eye:hover, .dark .pms-codes-pop-eye:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pms-codes-pop-eye-icon { width: 1rem; height: 1rem; }
.pms-codes-pop-note { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--gray-500); }
.pms-codes-pop-error { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--danger-600); }
.dark .pms-codes-pop-error { color: var(--danger-400); }
.pms-codes-pop-link { display: inline-block; margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; }
.dark .pms-codes-pop-link { color: var(--primary-400); }
.pms-codes-pop-links { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1rem; }

/* Sales > Reports (resources/views/filament/pages/reports.blade.php) */
.pms-report { display: flex; flex-direction: column; gap: 1rem; }
.pms-report-period { font-size: 0.875rem; font-weight: 600; color: var(--gray-600); margin: 0; }
.dark .pms-report-period { color: var(--gray-400); }
.pms-report-note, .pms-report-empty { font-size: 0.8125rem; color: var(--gray-500); margin: 0.5rem 0 0; }
.pms-report-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; } /* minmax: a wide table scrolls in its card, never pushes it past a phone's edge */
@media (min-width: 1024px) { .pms-report-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pms-report-pair > * { height: 100%; }
.pms-report-scroll { overflow-x: auto; }
.pms-report-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; white-space: nowrap; }
.pms-report-table th { text-align: left; font-weight: 600; color: var(--gray-600); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--gray-200); }
.pms-report-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--gray-100); }
.pms-report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pms-report-table tr.quiet td { color: var(--gray-400); }
.pms-report-table td.neg { color: var(--danger-600); }
.dark .pms-report-table th { color: var(--gray-400); border-bottom-color: rgb(255 255 255 / 0.1); }
.dark .pms-report-table td { border-bottom-color: rgb(255 255 255 / 0.05); }
.dark .pms-report-table tr.quiet td { color: var(--gray-500); }
.dark .pms-report-table td.neg { color: var(--danger-400); }

/* ID checks > View documents: the photos side by side at one height, each whole (letterboxed); a click opens it
   full size. Stacks on a phone. */
.pms-kyc-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.pms-kyc-docs figure { margin: 0; }
.pms-kyc-docs figcaption { font-weight: 600; margin-bottom: .375rem; }
.pms-kyc-docs a { display: block; border-radius: .5rem; overflow: hidden; background: #0b0b0b; outline-offset: 2px; }
.pms-kyc-docs img { display: block; width: 100%; height: 220px; object-fit: contain; transition: opacity .15s; }
.pms-kyc-docs a:hover img { opacity: .85; }

/* Support > Inbox (resources/views/filament/pages/support-inbox.blade.php): the list and the conversation side by
   side, both scrolling inside the page's height; on a phone only one shows (the conversation has a Back arrow). */
.pms-inbox { display: grid; grid-template-columns: minmax(18rem, 22rem) 1fr; gap: 1rem; height: calc(100dvh - 15rem); min-height: 28rem; }
.pms-inbox-list, .pms-inbox-thread { display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: .75rem; overflow: hidden; }
.dark .pms-inbox-list, .dark .pms-inbox-thread { background: var(--gray-900); border-color: rgb(255 255 255 / 0.1); }
.pms-inbox-search { margin: 0 .5rem .5rem; flex-shrink: 0; }
.pms-inbox-items { overflow-y: auto; flex: 1; border-top: 1px solid var(--gray-100); }
.dark .pms-inbox-items { border-top-color: rgb(255 255 255 / 0.05); }
.pms-inbox-item { display: flex; flex-direction: column; gap: .125rem; width: 100%; text-align: left; padding: .625rem .875rem; border-bottom: 1px solid var(--gray-100); border-left: 3px solid transparent; }
.dark .pms-inbox-item { border-bottom-color: rgb(255 255 255 / 0.05); }
.pms-inbox-item:hover { background: var(--gray-50); }
.dark .pms-inbox-item:hover { background: rgb(255 255 255 / 0.03); }
.pms-inbox-item-active, .pms-inbox-item-active:hover { background: color-mix(in oklab, var(--primary-500) 10%, transparent); border-left-color: var(--primary-500); }
.dark .pms-inbox-item-active, .dark .pms-inbox-item-active:hover { background: color-mix(in oklab, var(--primary-500) 12%, transparent); }
.pms-inbox-item-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.pms-inbox-item-name { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pms-inbox-item-top time { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.pms-inbox-item-subject, .pms-inbox-item-last { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pms-inbox-item-last { color: var(--gray-500); }
.pms-inbox-item-unread .pms-inbox-item-name::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--warning-500); margin-right: .375rem; vertical-align: middle; }
.pms-inbox-item-unread .pms-inbox-item-subject { font-weight: 600; }
.pms-inbox-empty { padding: 1.5rem 1rem; text-align: center; color: var(--gray-500); font-size: .875rem; }

.pms-inbox-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; flex-wrap: wrap; }
.dark .pms-inbox-head { border-bottom-color: rgb(255 255 255 / 0.1); }
.pms-inbox-back { display: none; padding: .25rem; border-radius: .375rem; }
.pms-inbox-back-icon { width: 1.25rem; height: 1.25rem; }
.pms-inbox-who { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1; }
.pms-inbox-who-name { display: flex; align-items: center; gap: .5rem; font-weight: 600; flex-wrap: wrap; }
.pms-inbox-who-meta { font-size: .8125rem; color: var(--gray-500); overflow-wrap: anywhere; }
.pms-inbox-who a { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; }
.dark .pms-inbox-who a { color: var(--primary-400); }
.pms-inbox-actions { display: flex; gap: .5rem; flex-shrink: 0; }

.pms-inbox-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; background: var(--gray-50); }
.dark .pms-inbox-messages { background: rgb(0 0 0 / 0.15); }
.pms-inbox-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(36rem, 85%); }
.pms-inbox-msg-staff { align-self: flex-end; align-items: flex-end; }
.pms-inbox-msg-system { align-self: center; align-items: center; }
.pms-inbox-msg-bubble { padding: .5rem .75rem; border-radius: .75rem; background: #fff; border: 1px solid var(--gray-200); font-size: .875rem; }
.dark .pms-inbox-msg-bubble { background: var(--gray-800); border-color: rgb(255 255 255 / 0.08); }
.pms-inbox-msg-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pms-inbox-msg-staff .pms-inbox-msg-bubble { background: color-mix(in oklab, var(--primary-500) 22%, #fff); border-color: transparent; color: #1a2600; }
.dark .pms-inbox-msg-staff .pms-inbox-msg-bubble { background: color-mix(in oklab, var(--primary-500) 25%, var(--gray-900)); color: var(--gray-100); }
.pms-inbox-msg-system .pms-inbox-msg-bubble { background: transparent; border-style: dashed; color: var(--gray-600); font-size: .8125rem; }
.dark .pms-inbox-msg-system .pms-inbox-msg-bubble { color: var(--gray-400); }
.pms-inbox-msg-meta { font-size: .6875rem; color: var(--gray-500); margin-top: .25rem; }
.pms-inbox-photo { display: block; margin-top: .375rem; }
.pms-inbox-photo img { display: block; max-width: 16rem; max-height: 12rem; border-radius: .5rem; object-fit: contain; background: #0b0b0b; }

.pms-inbox-compose { padding: .75rem 1rem; border-top: 1px solid var(--gray-200); flex-shrink: 0; display: flex; flex-direction: column; gap: .5rem; }
.dark .pms-inbox-compose { border-top-color: rgb(255 255 255 / 0.1); }
.pms-inbox-textarea { width: 100%; resize: vertical; min-height: 4rem; max-height: 12rem; border: 1px solid var(--gray-300); border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; background: #fff; color: inherit; }
.dark .pms-inbox-textarea { background: var(--gray-800); border-color: rgb(255 255 255 / 0.1); }
.pms-inbox-textarea:focus { outline: 2px solid var(--primary-500); outline-offset: -1px; }
.pms-inbox-error { margin: 0; font-size: .8125rem; color: var(--danger-600); }
.pms-inbox-compose-bar { display: flex; align-items: center; gap: .5rem; }
.pms-inbox-spacer { flex: 1; }
.pms-inbox-attach { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 500; color: var(--gray-700); cursor: pointer; padding: .375rem .625rem; border-radius: .5rem; border: 1px solid var(--gray-200); white-space: nowrap; }
.dark .pms-inbox-attach { color: var(--gray-300); border-color: rgb(255 255 255 / 0.1); }
.pms-inbox-attach-icon { width: 1rem; height: 1rem; }
.pms-inbox-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--gray-500); }
.pms-inbox-none-icon { width: 2.5rem; height: 2.5rem; }

@media (max-width: 1023px) {
    .pms-inbox { grid-template-columns: 1fr; }
    .pms-inbox-has-thread .pms-inbox-list, .pms-inbox:not(.pms-inbox-has-thread) .pms-inbox-thread { display: none; }
    .pms-inbox-back { display: inline-flex; }
}
@media (max-width: 767px) {
    .pms-inbox { height: calc(100dvh - 12rem); }
    .pms-inbox-head { align-items: flex-start; }
    .pms-inbox-actions { width: 100%; }
}
.pms-inbox-item-guest { font-weight: 400; color: var(--gray-500); }

/* Support > Inbox: the customer panel (as the old WordPress chat's "Customer orders"). A third column from 1536 px;
   below that the conversation's Customer button opens it over the conversation. */
.pms-badge-gray { background-color: var(--gray-100); color: var(--gray-700); }
.dark .pms-badge-gray { background-color: rgb(255 255 255 / 0.08); color: var(--gray-300); }
.pms-inbox { position: relative; }
.pms-inbox-customer { display: none; flex-direction: column; min-height: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: .75rem; overflow: hidden; }
.dark .pms-inbox-customer { background: var(--gray-900); border-color: rgb(255 255 255 / 0.1); }
.pms-inbox-customer-open .pms-inbox-customer { display: flex; position: absolute; top: 0; right: 0; bottom: 0; width: min(24rem, 100%); z-index: 20; box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); }
@media (min-width: 1536px) {
    .pms-inbox.pms-inbox-has-thread { grid-template-columns: minmax(18rem, 20rem) 1fr minmax(19rem, 23rem); }
    .pms-inbox-customer, .pms-inbox-customer-open .pms-inbox-customer { display: flex; position: static; width: auto; box-shadow: none; }
    .pms-inbox-customer-toggle, .pms-inbox-customer-close { display: none !important; }
}
.pms-inbox-customer-head { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1rem; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.dark .pms-inbox-customer-head { border-bottom-color: rgb(255 255 255 / 0.1); }
.pms-inbox-customer-close { padding: .25rem; border-radius: .375rem; }
.pms-inbox-customer-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.pms-inbox-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); }
.pms-inbox-profile { display: flex; flex-direction: column; gap: .125rem; }
.pms-inbox-customer-note { margin: 0; font-size: .8125rem; color: var(--gray-500); }
.pms-inbox-spent { display: flex; justify-content: space-between; align-items: flex-end; gap: .5rem; padding: .875rem 1rem; border-radius: .625rem; background: color-mix(in oklab, var(--primary-500) 18%, transparent); }
.pms-inbox-spent > span:first-child { display: flex; flex-direction: column; gap: .125rem; }
.pms-inbox-spent .pms-inbox-label { color: var(--gray-700); }
.dark .pms-inbox-spent .pms-inbox-label { color: var(--gray-300); }
.pms-inbox-spent-value { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pms-inbox-spent-count { font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.pms-inbox-statuses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.pms-inbox-status-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pms-inbox-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .375rem; vertical-align: middle; }
.pms-inbox-dot-success { background: var(--success-500); }
.pms-inbox-dot-warning { background: var(--warning-500); }
.pms-inbox-dot-danger { background: var(--danger-500); }
.pms-inbox-dot-info { background: var(--info-500, #3b82f6); }
.pms-inbox-dot-gray { background: var(--gray-400); }
.pms-inbox-bar { display: block; height: 4px; margin-top: .25rem; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.dark .pms-inbox-bar { background: rgb(255 255 255 / 0.06); }
.pms-inbox-bar-fill { display: block; height: 100%; margin: 0; border-radius: 999px; }
.pms-inbox-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.pms-inbox-chip { font-size: .75rem; font-weight: 600; padding: .25rem .625rem; border-radius: 999px; border: 1px solid var(--gray-200); color: var(--gray-600); }
.dark .pms-inbox-chip { border-color: rgb(255 255 255 / 0.1); color: var(--gray-300); }
.pms-inbox-chip:hover { border-color: var(--primary-500); }
.pms-inbox-chip-on, .dark .pms-inbox-chip-on { background: var(--primary-500); border-color: var(--primary-500); color: #1a2600; }
.pms-inbox-orders { display: flex; flex-direction: column; gap: .5rem; }
.pms-inbox-order { display: flex; flex-direction: column; gap: .25rem; padding: .625rem .75rem; border: 1px solid var(--gray-200); border-radius: .625rem; }
.dark .pms-inbox-order { border-color: rgb(255 255 255 / 0.08); }
.pms-inbox-order-linked { border-color: var(--primary-500); }
.dark .pms-inbox-order-linked { border-color: var(--primary-500); }
.pms-inbox-order-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8125rem; }
.pms-inbox-order-number { font-weight: 700; color: var(--primary-700); }
.dark .pms-inbox-order-number { color: var(--primary-400); }
.pms-inbox-order-total { font-weight: 600; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.dark .pms-inbox-order-total { color: #fff; }
.pms-inbox-order-item { font-size: .75rem; color: var(--gray-600); overflow-wrap: anywhere; }
.dark .pms-inbox-order-item { color: var(--gray-400); }
.pms-inbox-order-about { font-weight: 600; color: var(--primary-700); }
.dark .pms-inbox-order-about { color: var(--primary-400); }
.pms-inbox-faint { color: var(--gray-500); }
/* The list's Open / Waiting / Mine / All: one segmented row in a track, the chosen one lime. */
.pms-inbox-filters { display: flex; gap: 2px; margin: .75rem .75rem .5rem; padding: 3px; border-radius: .625rem; background: var(--gray-100); flex-shrink: 0; }
.dark .pms-inbox-filters { background: rgb(255 255 255 / 0.05); }
.pms-inbox-filter { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .3125rem; min-width: 0; padding: .375rem .5rem; border-radius: .5rem; font-size: .8125rem; font-weight: 600; color: var(--gray-600); white-space: nowrap; transition: background-color .15s, color .15s; }
.dark .pms-inbox-filter { color: var(--gray-400); }
.pms-inbox-filter:hover { color: var(--gray-950); }
.dark .pms-inbox-filter:hover { color: #fff; }
.pms-inbox-filter-on, .pms-inbox-filter-on:hover, .dark .pms-inbox-filter-on, .dark .pms-inbox-filter-on:hover { background: var(--primary-500); color: #1a2600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
.pms-inbox-filter-count { font-size: .6875rem; font-weight: 700; padding: 0 .3125rem; border-radius: 999px; line-height: 1.125rem; background: rgb(0 0 0 / 0.07); }
.dark .pms-inbox-filter-count { background: rgb(255 255 255 / 0.1); }
.pms-inbox-filter-on .pms-inbox-filter-count, .dark .pms-inbox-filter-on .pms-inbox-filter-count { background: rgb(0 0 0 / 0.14); }
/* The AI assistant's messages: on the shop's side, outlined in lime rather than filled like a staff reply. */
.pms-inbox-msg-assistant { align-self: flex-end; align-items: flex-end; }
.pms-inbox-msg-assistant .pms-inbox-msg-bubble { background: #fff; border: 1px dashed var(--primary-600); }
.dark .pms-inbox-msg-assistant .pms-inbox-msg-bubble { background: var(--gray-800); border-color: var(--primary-500); }

/* Option cards (Staff roles' permissions): each choice a bordered card with a small switch, lime when on, instead of
   a bare checkbox list. Put pms-check-cards on a CheckboxList. */
.pms-check-cards .fi-fo-checkbox-list-option { height: 100%; padding: .75rem .875rem; border: 1px solid var(--gray-200); border-radius: .625rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.dark .pms-check-cards .fi-fo-checkbox-list-option { border-color: rgb(255 255 255 / 0.1); }
.pms-check-cards .fi-fo-checkbox-list-option:hover { border-color: var(--primary-500); }
.pms-check-cards .fi-fo-checkbox-list-option:has(.fi-checkbox-input:checked) { border-color: var(--primary-500); background: color-mix(in oklab, var(--primary-500) 10%, transparent); }
.pms-check-cards .fi-fo-checkbox-list-option:has(.fi-checkbox-input:disabled) { cursor: not-allowed; opacity: .7; }
.pms-check-cards .fi-fo-checkbox-list-option { flex-direction: row-reverse; justify-content: space-between; }
.pms-check-cards .fi-checkbox-input {
    appearance: none; -webkit-appearance: none; position: relative; width: 2.25rem; height: 1.25rem; margin-top: .125rem; border-radius: 999px;
    background: var(--gray-300); background-image: none !important; border: 0; box-shadow: none; transition: background-color .15s; cursor: inherit;
}
.dark .pms-check-cards .fi-checkbox-input { background: var(--gray-600); }
.pms-check-cards .fi-checkbox-input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform .15s; }
.pms-check-cards .fi-checkbox-input:checked, .dark .pms-check-cards .fi-checkbox-input:checked { background: var(--primary-500); }
.pms-check-cards .fi-checkbox-input:checked::before { transform: translateX(1rem); }
.pms-check-cards .fi-checkbox-input:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* Segmented controls (Customers > CRM's lists): one rounded track, the chosen segment lime. The inbox's filters
   (pms-inbox-filters) look the same. Scrolls sideways rather than wrapping when the row is too narrow. */
.pms-segments { display: inline-flex; gap: 2px; padding: 3px; border-radius: .625rem; background: var(--gray-100); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pms-segments::-webkit-scrollbar { display: none; }
.dark .pms-segments { background: rgb(255 255 255 / 0.05); }
.pms-segment { flex: 0 0 auto; padding: .4375rem .875rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; color: var(--gray-600); white-space: nowrap; transition: background-color .15s, color .15s; }
.dark .pms-segment { color: var(--gray-400); }
.pms-segment:hover { color: var(--gray-950); }
.dark .pms-segment:hover { color: #fff; }
.pms-segment-on, .pms-segment-on:hover, .dark .pms-segment-on, .dark .pms-segment-on:hover { background: var(--primary-500); color: #1a2600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
.pms-segments-sm .pms-segment { padding: .3125rem .625rem; font-size: .8125rem; }
.pms-crm-lists { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .5rem; }
.pms-crm-lists + .pms-report-note { margin-top: -.25rem; }
/* Five tiles: as many across as fit (five on a wide screen), never four and one left alone. */
.pms-stat-tiles.pms-crm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1023px) { .pms-stat-tiles.pms-crm-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* two across: the fifth spans, no gap */
/* 1024-1535: three over two (six columns: the first three span two, the last two span three), no gap. */
@media (min-width: 1024px) and (max-width: 1535px) {
    .pms-stat-tiles.pms-crm-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .pms-stat-tiles.pms-crm-tiles > * { grid-column: span 2; }
    .pms-stat-tiles.pms-crm-tiles > :nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 1536px) { .pms-stat-tiles.pms-crm-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pms-stat-tiles.pms-crm-tiles { grid-template-columns: minmax(0, 1fr); } }
.pms-crm-head { display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1rem .5rem; }
.pms-crm-head .pms-crm-lists { margin-top: 0; }
.pms-crm-spacer { flex: 1; }
.pms-crm-note { margin: 0; font-size: .8125rem; color: var(--gray-500); }
/* Marketing > Coupon reports: a coupon's row filters the usage records below it. */
.pms-coupon-row { cursor: pointer; }
.pms-coupon-row:hover td { background: var(--gray-50); }
.dark .pms-coupon-row:hover td { background: rgb(255 255 255 / 0.03); }
.pms-report-table td.num, .pms-report-table th.num { white-space: nowrap; }
/* Marketing > Overview: visits per source as a bar (one measure, one colour), the count and share beside it. */
.pms-sources-bar-col { min-width: 9rem; }
@media (max-width: 1023px) { .pms-sources-bar { display: none; } .pms-sources-bar-col { min-width: 0; } } /* narrow: the count and share only */
.pms-sources-cell { display: flex; align-items: center; gap: .625rem; } /* inside the cell: a cell itself must stay a cell, or the row lines break */
.pms-sources-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; min-width: 6rem; }
.dark .pms-sources-bar { background: rgb(255 255 255 / 0.06); }
.pms-sources-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary-500); }
.pms-sources-n { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 5.5rem; text-align: right; }
.pms-sources tfoot th { border-top: 1px solid var(--gray-200); border-bottom: 0; }
.dark .pms-sources tfoot th { border-top-color: rgb(255 255 255 / 0.1); }
/* The inbox's order cards are links (the whole card opens the order). */
a.pms-inbox-order { color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
a.pms-inbox-order:hover, a.pms-inbox-order:focus-visible { border-color: var(--primary-500); background: color-mix(in oklab, var(--primary-500) 6%, transparent); }
/* Support > Live chat (2026-11-06): six figures (six across on a wide screen, three by two, two by three, then one),
   online dots and unread counts in the list, the customer's facts, earlier chats, and Share product. */
.pms-stat-tiles.pms-chat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
@media (min-width: 1024px) { .pms-stat-tiles.pms-chat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .pms-stat-tiles.pms-chat-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pms-stat-tiles.pms-chat-tiles { grid-template-columns: minmax(0, 1fr); } }
.pms-inbox-online-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--success-500); margin-right: .375rem; vertical-align: middle; flex-shrink: 0; }
.pms-inbox-item-when { display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.pms-inbox-unread { min-width: 1.125rem; padding: 0 .3125rem; border-radius: 999px; background: var(--danger-500); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; }
.pms-inbox-facts { display: grid; grid-template-columns: auto 1fr; gap: .375rem .75rem; margin: .5rem 0 0; font-size: .8125rem; }
.pms-inbox-facts dt { color: var(--gray-500); white-space: nowrap; }
.pms-inbox-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; overflow-wrap: anywhere; min-width: 0; }
.pms-inbox-presence { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; padding: .75rem .875rem; border: 1px solid var(--gray-200); border-radius: .625rem; font-size: .8125rem; }
.dark .pms-inbox-presence { border-color: rgb(255 255 255 / 0.08); }
.pms-inbox-presence-on { border-color: color-mix(in oklab, var(--success-500) 45%, transparent); }
.pms-inbox-presence-page { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; overflow-wrap: anywhere; }
.pms-inbox-section { display: flex; flex-direction: column; gap: .5rem; }
button.pms-inbox-order { width: 100%; text-align: left; transition: border-color .15s, background-color .15s; }
button.pms-inbox-order:hover, button.pms-inbox-order:focus-visible { border-color: var(--primary-500); background: color-mix(in oklab, var(--primary-500) 6%, transparent); }
.pms-inbox-product { display: flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; min-width: 14rem; }
.pms-inbox-product img { width: 3.5rem; height: 3.5rem; border-radius: .5rem; object-fit: cover; background: #0b0b0b; flex-shrink: 0; }
.pms-inbox-product > span { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pms-inbox-product-name { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pms-inbox-product-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.pms-inbox-share { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border: 1px solid var(--gray-200); border-radius: .625rem; max-height: 18rem; overflow-y: auto; }
.dark .pms-inbox-share { border-color: rgb(255 255 255 / 0.1); }
.pms-inbox-share-head { display: flex; align-items: center; justify-content: space-between; }
.pms-inbox-share-results { display: flex; flex-direction: column; gap: .25rem; }
.pms-inbox-share-result { display: flex; align-items: center; gap: .625rem; width: 100%; text-align: left; padding: .375rem .5rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; }
.pms-inbox-share-result:hover, .pms-inbox-share-result:focus-visible { background: color-mix(in oklab, var(--primary-500) 10%, transparent); }
.pms-inbox-share-result img { width: 2rem; height: 2rem; border-radius: .375rem; object-fit: cover; background: #0b0b0b; flex-shrink: 0; }
button.pms-inbox-attach { background: transparent; }
/* The report pages' period (Today ... Custom): one segmented row; on a phone the buttons wrap as separate pills. */
.pms-period .fi-btn { white-space: nowrap; }
@media (max-width: 639px) {
    .pms-period.fi-btn-group { display: flex; flex-wrap: wrap; gap: .375rem; width: auto; box-shadow: none; background: transparent; }
    .pms-period.fi-btn-group .fi-btn { border-radius: .5rem; box-shadow: inset 0 0 0 1px var(--gray-200); }
    .dark .pms-period.fi-btn-group .fi-btn { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
}
.pms-sources td.pms-sources-note { white-space: normal; } /* the Not tracked note wraps rather than widening the table */

/* --- Order page (OrderInfolist; resources/views/filament/orders): the order at a glance, its progress, the cards
   bought and every payment attempt, laid out like a shop's order page (owner, 2026-10-29). ------------------------ */
.pms-order-summary { display: flex; flex-direction: column; gap: 1.25rem; }
.pms-order-summary-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pms-order-summary-id { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.pms-order-summary-number { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; color: var(--gray-950); }
.dark .pms-order-summary-number { color: #fff; }
.pms-order-summary-meta { font-size: .875rem; color: var(--gray-500); }
.dark .pms-order-summary-meta strong { color: var(--gray-200); }
.pms-order-summary-total { display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; }
.pms-order-summary-amount { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gray-950); white-space: nowrap; }
.dark .pms-order-summary-amount { color: #fff; }
.pms-order-summary-via { font-size: .8125rem; color: var(--gray-500); white-space: nowrap; }
@media (max-width: 640px) {
    .pms-order-summary-total { align-items: flex-start; } /* on a phone, under the title and from the left */
}

/* Placed -> Paid -> Delivered: a dot per step on one line, joined by a rule that turns green as it is done. */
/* The last step only as wide as its words, so the line runs to it with no empty third on the right. */
.pms-order-steps { display: flex; margin: 0; padding: 0; list-style: none; }
.pms-order-steps > .pms-order-step { flex: 1 1 0; min-width: 0; }
.pms-order-steps > .pms-order-step:last-child { flex: none; padding-right: 0; }
/* Dot on top, words under it, so the joining rule runs between dots and never through a label. */
.pms-order-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding-right: .75rem; }
.pms-order-step:not(:last-child)::after {
    content: ''; position: absolute; top: .75rem; left: 2.125rem; right: .5rem; height: 2px; border-radius: 1px;
    background: var(--gray-200);
}
.dark .pms-order-step:not(:last-child)::after { background: rgb(255 255 255 / .1); }
.pms-order-step-done:not(:last-child)::after { background: var(--success-500) !important; }
.pms-order-step-dot {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 1.625rem; height: 1.625rem;
    border-radius: 999px; border: 2px solid var(--gray-300); background: var(--gray-50);
}
.dark .pms-order-step-dot { border-color: rgb(255 255 255 / .2); background: var(--gray-900); }
.pms-order-step-dot .fi-icon { width: .875rem; height: .875rem; color: #fff; }
.pms-order-step-done .pms-order-step-dot { border-color: var(--success-500); background: var(--success-500); }
.pms-order-step-now .pms-order-step-dot { border-color: var(--warning-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warning-500) 20%, transparent); }
.pms-order-step-stopped .pms-order-step-dot { border-color: var(--danger-500); background: var(--danger-500); }
.pms-order-step-text { display: flex; flex-direction: column; min-width: 0; padding-top: .125rem; }
.pms-order-step-label { font-size: .875rem; font-weight: 600; color: var(--gray-950); white-space: nowrap; }
.dark .pms-order-step-label { color: #fff; }
.pms-order-step-next .pms-order-step-label { color: var(--gray-400); }
.pms-order-step-when { font-size: .75rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    /* A phone: one step a row, dot beside its words; side by side, the dates ran into each other. */
    .pms-order-steps { flex-direction: column; gap: .75rem; }
    .pms-order-step { flex-direction: row; align-items: center; gap: .625rem; padding-right: 0; }
    .pms-order-step:not(:last-child)::after { display: none; }
    .pms-order-step-text { flex-direction: row; align-items: baseline; gap: .5rem; padding-top: 0; }
}
.pms-order-step-now .pms-order-step-when { color: var(--warning-600); font-weight: 600; }
.dark .pms-order-step-now .pms-order-step-when { color: var(--warning-400); }

.pms-order-note { display: flex; gap: .5rem; align-items: flex-start; padding: .625rem .75rem; border-radius: .625rem; font-size: .875rem; background: var(--gray-50); color: var(--gray-700); }
.dark .pms-order-note { background: rgb(255 255 255 / .04); color: var(--gray-300); }
.pms-order-note .fi-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .0625rem; }
.pms-order-note-hold { background: color-mix(in oklab, var(--warning-500) 10%, transparent); color: var(--warning-800); }
.dark .pms-order-note-hold { background: color-mix(in oklab, var(--warning-500) 12%, transparent); color: var(--warning-300); }

/* Product editor's side cards (ProductForm): the shop link and "At a glance". */
.pms-product-shop-link { display: flex; flex-direction: column; gap: .25rem; padding-top: .25rem; border-top: 1px solid var(--gray-100); padding-top: .875rem; }
.dark .pms-product-shop-link { border-top-color: rgb(255 255 255 / .06); }
.pms-product-shop-link-note { font-size: .8125rem; color: var(--gray-500); }
.pms-glance { display: flex; flex-direction: column; margin: 0; }
.pms-glance div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; }
.pms-glance div + div { border-top: 1px solid var(--gray-100); }
.dark .pms-glance div + div { border-top-color: rgb(255 255 255 / .06); }
.pms-glance dt { font-size: .875rem; color: var(--gray-500); white-space: nowrap; }
.pms-glance dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--gray-950); }
.dark .pms-glance dd { color: #fff; }
.pms-glance dd span { display: block; font-size: .75rem; font-weight: 400; color: var(--gray-500); }
.pms-glance dd.pms-glance-warn { color: var(--warning-600); }
.dark .pms-glance dd.pms-glance-warn { color: var(--warning-400); }

/* A supplier's sync on its price calculator card: spinner while it runs, tick or cross and the report after. */
.pms-sync { display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .75rem; border-radius: .625rem; font-size: .8125rem; line-height: 1.45;
    background: var(--gray-50); color: var(--gray-700); }
.dark .pms-sync { background: rgb(255 255 255 / .04); color: var(--gray-300); }
.pms-sync-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .0625rem; }
.pms-sync-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pms-sync-title { font-weight: 600; color: var(--gray-950); }
.dark .pms-sync-title { color: #fff; }
.pms-sync-message { overflow-wrap: anywhere; }
.pms-sync-queued .pms-sync-icon, .pms-sync-running .pms-sync-icon { color: var(--primary-500); }
.pms-sync-running, .pms-sync-queued { background: color-mix(in oklab, var(--primary-500) 8%, transparent); }
.pms-sync-ok .pms-sync-icon { color: var(--success-500); }
.pms-sync-failed { background: color-mix(in oklab, var(--danger-500) 8%, transparent); }
.pms-sync-failed .pms-sync-icon { color: var(--danger-500); }

/* An entry kept to one line (the order page's email): it ends in "…" rather than breaking mid-word. */
/* The class sits on the text item itself; its grid cells must be allowed to shrink for the "…" to show. */
.pms-one-line.fi-in-text-item { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; }
.fi-in-entry:has(.pms-one-line), .fi-in-entry:has(.pms-one-line) * { min-width: 0; }

/* What was bought: picture, card, quantity x price, codes sent, line total. */
.pms-order-lines { display: flex; flex-direction: column; }
.pms-order-line { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem 1rem; padding: .75rem 0; }
.pms-order-line + .pms-order-line { border-top: 1px solid var(--gray-100); }
.dark .pms-order-line + .pms-order-line { border-top-color: rgb(255 255 255 / .06); }
.pms-order-line-img { width: 4rem; height: 2.75rem; border-radius: .5rem; object-fit: cover; background: var(--gray-100); }
.dark .pms-order-line-img { background: rgb(255 255 255 / .06); }
.pms-order-line-img-none { display: grid; place-items: center; color: var(--gray-400); }
.pms-order-line-img-none .fi-icon { width: 1.25rem; height: 1.25rem; }
.pms-order-line-name { display: flex; flex-direction: column; min-width: 0; }
.pms-order-line-product { font-weight: 600; color: var(--gray-950); overflow-wrap: anywhere; }
.dark .pms-order-line-product { color: #fff; }
.pms-order-line-value { font-size: .8125rem; color: var(--gray-500); }
/* A top-up's details on an order line (Player ID...): label, the value in mono, a copy button. */
.pms-order-line-field { display: inline-flex; align-items: center; gap: .375rem; margin-top: .25rem; max-width: 100%; font-size: .8125rem; }
.pms-order-line-field-label { color: var(--gray-500); white-space: nowrap; }
.pms-order-line-field code { padding: .0625rem .375rem; border-radius: .375rem; background: var(--gray-100); color: var(--gray-950); font-weight: 600; overflow-wrap: anywhere; }
.dark .pms-order-line-field code { background: rgb(255 255 255 / .06); color: #fff; }
.pms-order-line-field-copy { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .375rem; color: var(--gray-400); }
.pms-order-line-field-copy:hover { color: var(--primary-600); background: var(--gray-100); }
.dark .pms-order-line-field-copy:hover { color: var(--primary-400); background: rgb(255 255 255 / .06); }
.pms-order-line-field-copy .fi-icon { width: 1rem; height: 1rem; }
.pms-order-line-price { font-size: .875rem; color: var(--gray-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dark .pms-order-line-price { color: var(--gray-400); }
.pms-order-line-total { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 5rem; text-align: right; }
/* The codes badge, then (short of codes) how many are in stock and Assign codes: a line of its own under the name,
   so the badge and the button never squeeze the product name into a sliver (owner screenshot, 2026-11-04). */
.pms-order-line-codes { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .5rem; }
.pms-order-line-stock { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
@media (max-width: 640px) {
    /* Picture and name on top; price, codes and total under the name, from the left. */
    .pms-order-line { grid-template-columns: 4rem minmax(0, 1fr); row-gap: .5rem; }
    .pms-order-line-price { grid-column: 2; }
    .pms-order-line-codes { grid-column: 2; grid-row: auto; justify-self: start; }
    .pms-order-line-total { grid-column: 2; text-align: left; }
}

/* Payment attempts: one card each, the gateway's answer as a full sentence under its figures. */
.pms-order-attempts { display: flex; flex-direction: column; gap: .75rem; }
.pms-order-attempt { display: flex; flex-direction: column; gap: .625rem; padding: .875rem 1rem; border: 1px solid var(--gray-200); border-radius: .75rem; }
.dark .pms-order-attempt { border-color: rgb(255 255 255 / .08); }
.pms-order-attempt-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.pms-order-attempt-gateway { font-weight: 600; color: var(--gray-950); }
.dark .pms-order-attempt-gateway { color: #fff; }
.pms-order-attempt-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.pms-order-attempt-when { margin-left: auto; font-size: .8125rem; color: var(--gray-500); white-space: nowrap; }
.pms-order-attempt-refs { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; font-size: .8125rem; }
.pms-order-attempt-refs div { display: flex; gap: .375rem; min-width: 0; }
.pms-order-attempt-refs dt { color: var(--gray-500); white-space: nowrap; }
.pms-order-attempt-refs dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gray-800); overflow-wrap: anywhere; user-select: all; }
.dark .pms-order-attempt-refs dd { color: var(--gray-200); }
.pms-order-attempt-answer { margin: 0; padding: .5rem .75rem; border-radius: .5rem; font-size: .8125rem; line-height: 1.5; background: var(--gray-50); color: var(--gray-700); overflow-wrap: anywhere; }
.dark .pms-order-attempt-answer { background: rgb(255 255 255 / .04); color: var(--gray-300); }
.pms-order-attempt-answer span { display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); margin-bottom: .125rem; }
/* The order's status-check log under its attempts: one compact row a check, newest first. */
.pms-order-checks { display: flex; flex-direction: column; gap: .375rem; }
.pms-order-checks-title { margin: 0; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); white-space: nowrap; }
.pms-order-checks ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pms-order-check { display: flex; flex-direction: column; gap: .25rem; padding: .5rem 0; border-top: 1px solid var(--gray-200); }
.dark .pms-order-check { border-color: rgb(255 255 255 / .08); }
.pms-order-check-top { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; font-size: .8125rem; }
.pms-order-check-when { color: var(--gray-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pms-order-check-who { font-weight: 600; color: var(--gray-950); white-space: nowrap; }
.dark .pms-order-check-who { color: #fff; }
.pms-order-check-answer { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--gray-700); overflow-wrap: anywhere; }
.dark .pms-order-check-answer { color: var(--gray-300); }

/* Staff notes on an order: one per row, who and when above the words (line breaks kept). */
.pms-order-notes { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.pms-order-notes-item { padding: .75rem .875rem; border-radius: .625rem; background: var(--gray-50); }
.dark .pms-order-notes-item { background: rgb(255 255 255 / .04); }
.pms-order-notes-meta { font-size: .75rem; color: var(--gray-500); }
.pms-order-notes-meta strong { color: var(--gray-700); }
.dark .pms-order-notes-meta strong { color: var(--gray-200); }
.pms-order-notes-body { margin: .25rem 0 0; font-size: .875rem; color: var(--gray-800); white-space: pre-line; overflow-wrap: anywhere; }
.dark .pms-order-notes-body { color: var(--gray-200); }
.pms-order-notes-empty { margin: 0; font-size: .875rem; color: var(--gray-500); }

/* Order messages on the order page (filament/orders/messages): the notes' look, a coloured edge per author (the
   customer in the brand colour, staff grey, the shop's notices blue), and a line saying whether the customer may write. */
.pms-order-msg { border-left: 3px solid var(--gray-300); }
.pms-order-msg--customer { border-left-color: var(--primary-500); }
.pms-order-msg--system { border-left-color: var(--info-500, #3b82f6); }
.dark .pms-order-msg--staff { border-left-color: var(--gray-600); }
.pms-order-msg-title { display: block; margin-top: .25rem; font-size: .875rem; font-weight: 600; color: var(--gray-900); }
.dark .pms-order-msg-title { color: var(--gray-100); }
.pms-order-msg-new { display: inline-block; margin-left: .25rem; padding: 0 .375rem; border-radius: .25rem; font-size: .6875rem; font-weight: 600; background: var(--primary-500); color: var(--gray-950); }
.pms-order-msg-state { margin: .75rem 0 0; font-size: .75rem; color: var(--gray-500); }

/* The receipt under an order's items: a rule above it, like the foot of a till receipt. */
.pms-order-receipt { padding-top: 1rem; border-top: 1px solid var(--gray-200); }
.dark .pms-order-receipt { border-top-color: rgb(255 255 255 / .1); }

/* A report's period under the intro card, on the page itself (HasShopPeriod, Reports): the bar with the dates it
   covers beside it; Custom's dates on the line under. */
.pms-period-field > .fi-sc { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pms-period-field > .fi-sc > .fi-grid-col:has(.fi-sc-grid, .fi-fo-date-time-picker) { flex-basis: 100%; }
@media (max-width: 639.98px) {
    .pms-period-field .pms-period { overflow-x: auto; max-width: 100%; }
}

/* On a phone a segment bar (CRM lists, coupon ranking) wraps instead of hiding its last choices off the edge. */
@media (max-width: 639.98px) {
    .pms-segments { flex-wrap: wrap; overflow-x: visible; }
}

/* Reports' Figures box: a small heading over each table inside it. */
.pms-report-subhead { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--gray-950); }
.dark .pms-report-subhead { color: #fff; }
.pms-report-table + .pms-report-subhead, .pms-report-scroll + .pms-report-subhead { margin-top: 1rem; }
.fi-section-content .pms-report-pair { margin-top: 1.5rem; }

/* The dashboard's "on the shop now" (App\Livewire\LiveVisitors): a pill with a dot that pulses while anyone is on. */
.pms-live-visitors { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 999px; font-size: .875rem; white-space: nowrap; color: var(--gray-700); background: var(--gray-100); }
.dark .pms-live-visitors { color: var(--gray-200); background: rgb(255 255 255 / .06); }
.pms-live-visitors strong { color: var(--gray-950); font-variant-numeric: tabular-nums; }
.dark .pms-live-visitors strong { color: #fff; }
.pms-live-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--gray-400); }
.pms-live-dot-on { background: var(--success-500); box-shadow: 0 0 0 0 color-mix(in oklab, var(--success-500) 60%, transparent); animation: pms-live-pulse 2s infinite; }
@keyframes pms-live-pulse { 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .pms-live-dot-on { animation: none; } }
button.pms-live-visitors { cursor: pointer; border: 0; }
button.pms-live-visitors:hover { background: var(--gray-200); }
.dark button.pms-live-visitors:hover { background: rgb(255 255 255 / .1); }
/* On a phone the top bar is tight: the dot and the number say it. */
@media (max-width: 639.98px) { .pms-live-label { display: none; } }

/* Its live traffic report (the pill's dropdown). */
.pms-live-report { display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem; font-size: .875rem; }
.pms-live-report-title { margin: 0; font-weight: 600; color: var(--gray-950); }
.dark .pms-live-report-title { color: #fff; }
.pms-live-report-head { margin: .25rem 0 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.pms-live-report ul { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.pms-live-report li { display: flex; justify-content: space-between; gap: 1rem; color: var(--gray-700); }
.dark .pms-live-report li { color: var(--gray-300); }
.pms-live-report-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pms-live-report-empty { margin: 0; color: var(--gray-500); }
.pms-live-report-link { margin-top: .25rem; padding-top: .625rem; border-top: 1px solid var(--gray-200); font-weight: 600; color: var(--primary-700); }
.dark .pms-live-report-link { border-top-color: rgb(255 255 255 / .1); color: var(--primary-400); }
/* The report opens under the pill, at its right edge (a plain Alpine toggle, not Filament's dropdown). */
.pms-live { position: relative; }
.pms-live > .pms-live-report { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 40; width: 18rem; max-width: calc(100vw - 2rem); border-radius: .75rem; border: 1px solid var(--gray-200); background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .12); }
.dark .pms-live > .pms-live-report { border-color: rgb(255 255 255 / .1); background: var(--gray-900); }
.pms-live-report-link { white-space: nowrap; }

/* The sign-in screen's card collage (components/bms/auth-split): the storefront's hero collage, same plane and
   numbers (storefront/app/globals.css .ss-collage, fitted to live's hero image), in the box the old picture used. */
.pms-login-collage-box { position: absolute; top: 7%; left: 8%; width: 84%; height: 54%; display: flex; align-items: center; justify-content: center; container-type: size; }
.pms-collage { position: relative; width: min(100cqw, calc(100cqh * 768 / 524)); aspect-ratio: 768 / 524; container-type: inline-size; }
.pms-collage-grid {
    position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d;
    transform: translate(50cqw, 34.11cqw) perspective(238.3cqw) translate(-50cqw, -34.11cqw) translate(-14.01cqw, 26.67cqw) rotateX(41.42deg) rotateZ(-40.17deg);
}
/* A still hit area holding a face that lifts and ignores the pointer (a moving hovered element flickers). */
.pms-collage-grid > * { position: absolute; display: block; width: 17.37cqw; transform-style: preserve-3d; }
.pms-collage-grid > * > * { display: block; width: 100%; height: auto; border-radius: 6% / 9%; box-shadow: 0 0.6cqw 1.2cqw rgb(0 0 0 / 0.35); pointer-events: none; will-change: transform; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pms-collage-grid > :hover > * { transform: translateZ(3cqw); box-shadow: 0 2.5cqw 3cqw rgb(0 0 0 / 0.5); }
}
@media (max-width: 900px) {
    .pms-login-collage-box { top: 8%; height: 84%; }
}
/* Above the panel's scrim, so the cards aren't dimmed (phone) and take the pointer for the hover lift. */
.pms-login-collage-box { z-index: 1; }

/* Dashboard stock lists (StockAlerts, WRD p80): two equal cards side by side from 1024px, rows drawn like the
   order page's item lines (picture, name over region and value), the codes left and the threshold on the right. */
.pms-stock-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 1024px) { .pms-stock-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pms-stock-rows { display: flex; flex-direction: column; }
.pms-stock-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .625rem .5rem; margin: 0 -.5rem; border-radius: .5rem; }
.pms-stock-row + .pms-stock-row { border-top: 1px solid var(--gray-100); border-top-left-radius: 0; border-top-right-radius: 0; }
.dark .pms-stock-row + .pms-stock-row { border-top-color: rgb(255 255 255 / .06); }
.pms-stock-row-link:hover { background: var(--gray-50); }
.dark .pms-stock-row-link:hover { background: rgb(255 255 255 / .04); }
.pms-stock-name { display: flex; flex-direction: column; min-width: 0; }
.pms-stock-figures { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.pms-stock-min { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.pms-stock-empty { font-size: .875rem; color: var(--gray-500); }
.pms-stock-all { display: inline-block; margin-top: .75rem; font-size: .875rem; font-weight: 600; color: var(--primary-600); }
.dark .pms-stock-all { color: var(--primary-400); }
.pms-stock-all:hover { text-decoration: underline; }

/* The order page's "Customer history" card (WRD p53): label left, figure right, the statuses as badges, and the
   revenue's split in a box with a lime bar like the reference's. */
.pms-history { display: flex; flex-direction: column; gap: .75rem; }
.pms-history-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.pms-history-label { color: var(--gray-500); white-space: nowrap; }
.pms-history-value { font-weight: 500; color: var(--gray-950); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dark .pms-history-value { color: #fff; }
.pms-history-total .pms-history-label { color: var(--gray-700); font-weight: 500; }
.dark .pms-history-total .pms-history-label { color: var(--gray-300); }
.pms-history-total .pms-history-value { font-weight: 600; }
.pms-history-statuses { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; margin: 0; padding: 0 0 .75rem; border-bottom: 1px solid var(--gray-100); }
.dark .pms-history-statuses { border-bottom-color: rgb(255 255 255 / .06); }
.pms-history-split { display: flex; flex-direction: column; gap: .375rem; padding: .625rem .75rem; border-left: 3px solid var(--primary-500); border-radius: .375rem; background: var(--gray-50); }
.dark .pms-history-split { background: rgb(255 255 255 / .04); }
.pms-history-done .pms-history-label, .pms-history-done .pms-history-value { color: var(--success-600); }
.dark .pms-history-done .pms-history-label, .dark .pms-history-done .pms-history-value { color: var(--success-400); }

/* Support tickets: a ticket's conversation (filament/tickets/conversation). The customer on the left, staff on the
   right in lime, status changes centred and dashed; screenshots as thumbnails, PDFs as download chips. */
.pms-ticket-thread { display: flex; flex-direction: column; gap: .875rem; list-style: none; margin: 0; padding: 0; }
.pms-ticket-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(40rem, 88%); }
.pms-ticket-msg-staff { align-self: flex-end; align-items: flex-end; }
.pms-ticket-msg-system { align-self: center; align-items: center; }
.pms-ticket-msg-meta { font-size: .75rem; color: var(--gray-500); margin-bottom: .25rem; }
.pms-ticket-msg-meta strong { color: var(--gray-700); font-weight: 600; }
.dark .pms-ticket-msg-meta strong { color: var(--gray-200); }
.pms-ticket-msg-bubble { padding: .625rem .875rem; border-radius: .75rem; background: var(--gray-50); border: 1px solid var(--gray-200); font-size: .875rem; }
.dark .pms-ticket-msg-bubble { background: var(--gray-800); border-color: rgb(255 255 255 / 0.08); }
.pms-ticket-msg-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pms-ticket-msg-staff .pms-ticket-msg-bubble { background: color-mix(in oklab, var(--primary-500) 22%, #fff); border-color: transparent; color: #1a2600; }
.dark .pms-ticket-msg-staff .pms-ticket-msg-bubble { background: color-mix(in oklab, var(--primary-500) 25%, var(--gray-900)); color: var(--gray-100); }
.pms-ticket-msg-system .pms-ticket-msg-bubble { background: transparent; border-style: dashed; color: var(--gray-600); font-size: .8125rem; padding: .375rem .75rem; }
.dark .pms-ticket-msg-system .pms-ticket-msg-bubble { color: var(--gray-400); }
.pms-ticket-files { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: .5rem; }
.pms-ticket-photo img { display: block; width: 8rem; height: 6rem; border-radius: .5rem; object-fit: cover; background: #0b0b0b; }
.pms-ticket-file { display: inline-flex; align-items: center; gap: .375rem; max-width: 16rem; padding: .375rem .625rem; border-radius: .5rem; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-800); font-size: .8125rem; font-weight: 500; }
.dark .pms-ticket-file { background: var(--gray-900); border-color: rgb(255 255 255 / 0.12); color: var(--gray-200); }
.pms-ticket-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pms-ticket-file small { color: var(--gray-500); white-space: nowrap; }
.pms-ticket-file-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* --- Create order (Orders > Create order; views/filament/orders/create-summary + whatsapp-replies) ----------------- */
.pms-create-summary { display: flex; flex-direction: column; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--gray-200); }
.dark .pms-create-summary { border-top-color: rgb(255 255 255 / .1); }
.pms-create-summary dl { display: flex; flex-direction: column; gap: .375rem; margin: 0; max-width: 24rem; margin-left: auto; width: 100%; }
.pms-create-summary dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; color: var(--gray-600); }
.dark .pms-create-summary dl > div { color: var(--gray-400); }
.pms-create-summary dt { white-space: nowrap; }
.pms-create-summary dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; color: var(--gray-950); }
.dark .pms-create-summary dd { color: #fff; }
.pms-create-summary-total { padding-top: .375rem; border-top: 1px dashed var(--gray-200); font-weight: 700; }
.dark .pms-create-summary-total { border-top-color: rgb(255 255 255 / .1); }
.pms-create-summary-total dd { font-size: 1.125rem; }

.pms-wa-replies { display: flex; flex-direction: column; gap: .75rem; }
.pms-wa-reply { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border-radius: .75rem; border: 1px solid var(--gray-200); }
.dark .pms-wa-reply { border-color: rgb(255 255 255 / .1); }
.pms-wa-reply-words { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pms-wa-reply-words strong { font-size: .875rem; color: var(--gray-950); white-space: nowrap; }
.dark .pms-wa-reply-words strong { color: #fff; }
.pms-wa-reply-words span { font-size: .75rem; color: var(--gray-500); }
/* "Show the text" on the left, Copy on the right, under the title so the title has the card's width. */
.pms-wa-reply-text summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; list-style: none; font-size: .75rem; color: var(--gray-500); }
.pms-wa-reply-text summary::-webkit-details-marker { display: none; }
.pms-wa-reply-text summary > span::before { content: '\25B8'; display: inline-block; margin-right: .375rem; transition: transform .15s; }
.pms-wa-reply-text[open] summary > span::before { transform: rotate(90deg); }
.pms-wa-reply-text summary .fi-btn { flex: none; }
.pms-wa-reply-text textarea {
    display: block; width: 100%; margin-top: .5rem; padding: .5rem .625rem; resize: vertical; border-radius: .5rem;
    border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-800); font-size: .8125rem; line-height: 1.45;
}
.dark .pms-wa-reply-text textarea { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); color: var(--gray-200); }

/* Customer verification and saved cards (customers/phone, customers/cards; WRD p51): a phone with its Verified badge,
   each card as its number, then "Visa · Added 3 Nov 2026 by …" under it (fits the order page's narrow Customer card). */
.pms-phone { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pms-phone-number { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--gray-950); white-space: nowrap; }
.dark .pms-phone-number { color: #fff; }
.pms-cards { display: flex; flex-direction: column; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pms-cards-row { display: flex; flex-direction: column; gap: .125rem; font-size: .875rem; }
.pms-cards-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--gray-950); white-space: nowrap; letter-spacing: .02em; }
.dark .pms-cards-number { color: #fff; }
.pms-cards-none { font-size: .8125rem; color: var(--gray-500); white-space: nowrap; }
.pms-cards-meta { font-size: .8125rem; color: var(--gray-500); }

/* Upgrade request details (upgrade-requests/details): four blocks two by two from 640px, the limit alerts full width. */
.pms-request { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .pms-request { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pms-request-block { display: flex; flex-direction: column; gap: .625rem; min-width: 0; padding: .875rem 1rem; border: 1px solid var(--gray-200); border-radius: .75rem; }
.dark .pms-request-block { border-color: rgb(255 255 255 / .08); }
.pms-request-wide { grid-column: 1 / -1; }
.pms-request-title { font-size: .8125rem; font-weight: 600; color: var(--gray-950); }
.dark .pms-request-title { color: #fff; }
.pms-request-link { font-size: .875rem; font-weight: 600; color: var(--primary-600); white-space: nowrap; }
.dark .pms-request-link { color: var(--primary-400); }
.pms-request-badges { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pms-request .pms-history-row { min-width: 0; }
.pms-request .pms-one-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pms-request-statuses { padding-bottom: 0; border-bottom: 0; }

/* --- Email logs > View (views/filament/email-logs/preview): the email in a sandboxed frame, on white as mail apps show it */
.pms-email-preview { display: block; width: 100%; height: 70vh; min-height: 24rem; border: 1px solid var(--gray-200); border-radius: .75rem; background: #fff; }
.dark .pms-email-preview { border-color: rgb(255 255 255 / .1); }
.pms-email-preview-none { margin: 0; font-size: .875rem; color: var(--gray-500); }

/* --- Dashboard Active users (views/filament/widgets/active-users-figures): three figures across, one per line on a phone */
.pms-active-users { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: .75rem 0 .5rem; }
@media (max-width: 640px) { .pms-active-users { grid-template-columns: minmax(0, 1fr); } }
.pms-active-users-fig { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pms-active-users-label { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.pms-active-users-value { font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--gray-950); }
.dark .pms-active-users-value { color: #fff; }
.pms-active-users-change { font-size: .75rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pms-active-users-up { color: var(--success-600); }
.pms-active-users-down { color: var(--danger-600); }
.dark .pms-active-users-up { color: var(--success-400); }
.dark .pms-active-users-down { color: var(--danger-400); }
.pms-active-users-note { display: block; font-size: .8125rem; color: var(--gray-500); }

/* The card value form's Import codes / View all codes: at phone width the icons go so both buttons fit on one line. */
@media (max-width: 767.98px) {
  .pms-code-actions .fi-btn > .fi-icon { display: none; }
}

/* --- Import codes (Vouchers/ImportCodesAction; views/filament/codes): the card value and its stock on top, "Deliver
   these first" as an option card, and the summary window after every import (tiles, then masked code lists). */
.pms-import-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--gray-200); border-radius: .75rem; background: var(--gray-50); }
.dark .pms-import-card { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); }
.pms-import-card-main { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pms-import-card-product { font-size: .75rem; font-weight: 500; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pms-import-card-value { font-size: 1rem; font-weight: 600; color: var(--gray-950); }
.dark .pms-import-card-value { color: #fff; }
.pms-import-card-stock { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.pms-import-card-count { font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--gray-950); }
.dark .pms-import-card-count { color: #fff; }
.pms-import-card-label { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.pms-import-card-stock-out .pms-import-card-count { color: var(--danger-600); }
.dark .pms-import-card-stock-out .pms-import-card-count { color: var(--danger-400); }

.pms-option-card { padding: .75rem .875rem; border: 1px solid var(--gray-200); border-radius: .75rem; transition: border-color .15s, background-color .15s; }
.dark .pms-option-card { border-color: rgb(255 255 255 / .1); }
.pms-option-card:has(.fi-toggle.fi-toggle-on), .pms-option-card:has(button[aria-checked="true"]) { border-color: var(--primary-500); background: color-mix(in oklab, var(--primary-500) 8%, transparent); }
.pms-option-card .fi-fo-field-label-content { white-space: nowrap; }

.pms-import-summary { display: flex; flex-direction: column; gap: 1rem; }
.pms-import-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pms-import-tile { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .75rem; border: 1px solid var(--gray-200); border-radius: .625rem; min-width: 0; }
.dark .pms-import-tile { border-color: rgb(255 255 255 / .1); }
.pms-import-tile-label { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.pms-import-tile-value { font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--gray-950); }
.dark .pms-import-tile-value { color: #fff; }
.pms-import-tile-good { border-color: var(--primary-500); background: color-mix(in oklab, var(--primary-500) 8%, transparent); }
.dark .pms-import-tile-good { border-color: var(--primary-500); }
.pms-import-tile-bad { border-color: var(--danger-300); background: var(--danger-50); }
.dark .pms-import-tile-bad { border-color: rgb(239 68 68 / .4); background: rgb(239 68 68 / .08); }
.pms-import-tile-bad .pms-import-tile-value { color: var(--danger-700); }
.dark .pms-import-tile-bad .pms-import-tile-value { color: var(--danger-400); }
.pms-import-first { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; color: var(--gray-600); }
.dark .pms-import-first { color: var(--gray-300); }
.pms-import-list-title { margin: 0 0 .375rem; font-size: .8125rem; font-weight: 600; color: var(--gray-700); }
.dark .pms-import-list-title { color: var(--gray-200); }
.pms-import-list ul { margin: 0; padding: 0; list-style: none; max-height: 16rem; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: .625rem; }
.dark .pms-import-list ul { border-color: rgb(255 255 255 / .1); }
.pms-import-list li { display: flex; gap: .75rem; align-items: baseline; padding: .4375rem .75rem; font-size: .8125rem; border-top: 1px solid var(--gray-100); }
.dark .pms-import-list li { border-top-color: rgb(255 255 255 / .06); }
.pms-import-list li:first-child { border-top: 0; }
.pms-import-code { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--gray-950); white-space: nowrap; }
.dark .pms-import-code { color: #fff; }
.pms-import-why { min-width: 0; color: var(--gray-600); }
.dark .pms-import-why { color: var(--gray-400); }
.pms-import-list-bad .pms-import-why { color: var(--danger-700); }
.dark .pms-import-list-bad .pms-import-why { color: var(--danger-400); }
.pms-import-more { color: var(--gray-500); font-style: italic; }
.pms-import-allgood { margin: 0; font-size: .875rem; color: var(--gray-600); }
.dark .pms-import-allgood { color: var(--gray-300); }
@media (max-width: 400px) { .pms-import-tile { padding: .5rem .625rem; } .pms-import-tile-value { font-size: 1.125rem; } }

/* Sales > Store credit (App\Filament\Pages\StoreCredit): the period bar with its date, six tiles three across (two
   on a tablet, one on a phone: never four and two), the activity feed, links, the lime badge of a "Refund" line. */
.pms-sc-period { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pms-stat-tiles.pms-stat-tiles-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .pms-stat-tiles.pms-stat-tiles-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pms-stat-tiles.pms-stat-tiles-six { grid-template-columns: minmax(0, 1fr); } }
.pms-sc-link { font-weight: 600; color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dark .pms-sc-link { color: var(--primary-400); }
.pms-badge-primary { background-color: color-mix(in oklab, var(--primary-500) 22%, transparent); color: var(--primary-800); }
.dark .pms-badge-primary { background-color: color-mix(in oklab, var(--primary-500) 16%, transparent); color: var(--primary-300); }
.pms-sc-feed { margin: 0; padding: 0; list-style: none; }
.pms-sc-feed li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .5rem 0; font-size: .875rem; border-top: 1px solid var(--gray-100); }
.dark .pms-sc-feed li { border-top-color: rgb(255 255 255 / .06); }
.pms-sc-feed li:first-child { border-top: 0; padding-top: 0; }
.pms-sc-feed li .pms-badge { justify-self: start; }
.pms-sc-feed-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pms-sc-feed-who .pms-inbox-faint { margin-left: .375rem; }
.pms-sc-feed-amount { font-weight: 600; text-align: right; white-space: nowrap; }
.pms-sc-feed-when { white-space: nowrap; min-width: 3.5rem; text-align: right; }
@media (max-width: 640px) {
    .pms-sc-feed li { grid-template-columns: minmax(0, 1fr) auto; row-gap: .25rem; }
    .pms-sc-feed-who { grid-column: 1; grid-row: 2; }
    .pms-sc-feed-amount { grid-column: 2; grid-row: 1; }
    .pms-sc-feed-when { grid-column: 2; grid-row: 2; }
}

/* Dashboard extras (client doc, the Bloom reference). The widget grid packs a role's widgets without holes, and
   boxes side by side are one height. */
.pms-dashboard .fi-grid:has(> .fi-sc-liberated > .fi-wi-widget) { grid-auto-flow: row dense; align-items: stretch; }
.pms-dashboard .fi-wi-widget { align-self: stretch; }
.pms-dashboard .fi-wi-widget > .fi-section { height: 100%; }
.pms-dash-links { display: inline-flex; gap: 1rem; }
.pms-dash-link { font-size: .875rem; font-weight: 600; color: var(--primary-700); white-space: nowrap; }
.dark .pms-dash-link { color: var(--primary-400); }
.pms-dash-link:hover { text-decoration: underline; }
.pms-dash-strong { font-weight: 600; color: var(--gray-950); }
.dark .pms-dash-strong { color: #fff; }
.pms-dash-muted { display: block; font-size: .75rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; }
.pms-dash-icon { width: 1.25rem; height: 1.25rem; }

/* Overview: the measure chips (any mix), a swatch on each (the line's colour), the totals, a caption per chart. */
.pms-overview-chips .pms-segment { display: inline-flex; align-items: center; gap: .375rem; }
.pms-overview-swatch { display: inline-block; flex: none; width: .625rem; height: .625rem; border-radius: 9999px; }
.pms-overview-totals { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; color: var(--gray-700); }
.dark .pms-overview-totals { color: var(--gray-300); }
.pms-overview-caption { margin: 1rem 0 .25rem; font-size: .8125rem; font-weight: 600; color: var(--gray-500); }
.pms-overview-totals + .pms-overview-caption { margin-top: 0; }

/* Success rate: the figure, a meter (same-hue track), the change, then paid / placed. */
.pms-rate-figure { margin: 0; font-size: 2.5rem; line-height: 1.1; font-weight: 700; color: var(--gray-950); }
.dark .pms-rate-figure { color: #fff; }
.pms-meter { display: block; position: relative; height: .625rem; margin: .75rem 0 .5rem; border-radius: 9999px; background: color-mix(in oklab, #3987e5 18%, transparent); overflow: hidden; }
.pms-meter-fill { display: block; height: 100%; border-radius: 9999px; background: #3987e5; }
.pms-meter-sm { display: inline-block; width: 5rem; height: .375rem; margin: 0 .5rem 0 0; vertical-align: middle; }
.pms-rate-change { margin: 0; font-size: .8125rem; color: var(--gray-500); }
.pms-rate-figures { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0 0; }
.pms-rate-figures > div { padding: .625rem .75rem; border-radius: .5rem; background: var(--gray-50); }
.dark .pms-rate-figures > div { background: rgb(255 255 255 / 0.04); }
.pms-rate-figures dt { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.pms-rate-figures dd { margin: .125rem 0 0; font-size: 1.125rem; font-weight: 700; color: var(--gray-950); }
.dark .pms-rate-figures dd { color: #fff; }

/* Recent orders: a search and status buttons that open Orders; two-line cells cut with an ellipsis. */
.pms-recent-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; }
.pms-recent-search-input { flex: 1 1 12rem; min-width: 0; max-width: 18rem; padding: .4375rem .75rem; border-radius: .5rem; font-size: .875rem; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--gray-200); border: 0; }
.dark .pms-recent-search-input { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.pms-recent-search-input:focus { outline: 2px solid var(--primary-500); outline-offset: 0; }
.pms-recent-search .pms-segments { max-width: 100%; }
.pms-recent-cell { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; } /* all seven columns fit in the card at 1280 px */
.pms-recent-who { max-width: 5.25rem; }
.pms-recent-orders th, .pms-recent-orders td { padding-inline: .375rem; }
.pms-recent-cell > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.pms-recent-orders td { vertical-align: middle; }
.pms-recent-orders .fi-badge { max-width: none; min-width: max-content; } /* "Awaiting payment" whole, never "Awai..." */

/* Sales overview: three shares with their figures over a thin segmented bar (2px gaps), then top products. */
.pms-shares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.pms-share { min-width: 0; }
.pms-share-label { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--gray-600); white-space: nowrap; }
.dark .pms-share-label { color: var(--gray-400); }
.pms-share-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--gray-950); }
.dark .pms-share-value { color: #fff; }
.pms-segbar { display: flex; gap: 2px; height: 8px; margin: .75rem 0 1.25rem; border-radius: 9999px; overflow: hidden; background: var(--gray-100); }
.dark .pms-segbar { background: rgb(255 255 255 / 0.06); }
.pms-segbar > span { flex-basis: 0; min-width: 2px; }
.pms-share-cell { white-space: nowrap; }

/* Support requests and recent activity: a tinted icon, bold title (and status), one line of detail, time ago. */
.pms-feed { list-style: none; margin: 0; padding: 0; }
.pms-feed > li + li { border-top: 1px solid var(--gray-100); }
.dark .pms-feed > li + li { border-top-color: rgb(255 255 255 / 0.05); }
.pms-feed-row { display: flex; gap: .75rem; align-items: flex-start; padding: .625rem .25rem; border-radius: .5rem; }
.pms-feed-link:hover { background: var(--gray-50); }
.dark .pms-feed-link:hover { background: rgb(255 255 255 / 0.04); }
.pms-feed-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pms-feed-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pms-feed-name { font-size: .875rem; font-weight: 600; color: var(--gray-950); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .pms-feed-name { color: #fff; }
.pms-feed-text { font-size: .8125rem; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .pms-feed-text { color: var(--gray-400); }
.pms-feed-time { font-size: .75rem; color: var(--gray-500); }
@media (max-width: 639px) {
    .pms-shares { gap: .5rem; }
    .pms-share-value { font-size: 1.125rem; }
    .pms-recent-search-input { max-width: none; }
    .pms-share-cell .pms-meter-sm { display: none; } /* the percent says it; Earnings stays in view */
}

/* Sales > Reports' comparison (ComparisonBars): this against last, every figure in text under its bar. */
.pms-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 768px) { .pms-compare { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pms-compare-tile { padding: .875rem; border-radius: .75rem; box-shadow: inset 0 0 0 1px var(--gray-200); }
.dark .pms-compare-tile { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.pms-compare-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; white-space: nowrap; }
.pms-compare-label { font-weight: 600; color: var(--gray-700); }
.dark .pms-compare-label { color: var(--gray-200); }
.pms-compare-change { font-weight: 600; font-variant-numeric: tabular-nums; }
.pms-compare-bars { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: end; height: 4rem; margin-top: .75rem; }
.pms-compare-bar { display: block; min-height: 2px; border-radius: 4px 4px 0 0; }
.pms-compare-bar-now { background: #199e70; }
.pms-compare-bar-then { background: var(--gray-300); }
.dark .pms-compare-bar-then { background: var(--gray-600); }
.pms-compare-figures { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; margin: .5rem 0 0; }
.pms-compare-figures dd { margin: 0; font-size: .875rem; font-weight: 600; color: var(--gray-950); overflow-wrap: anywhere; }
.dark .pms-compare-figures dd { color: #fff; }
.pms-compare-figures dt { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }

/* Customers > CRM's chart rows: a wide chart beside a narrow one, or three across. */
.pms-crm-wide, .pms-crm-three { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.pms-crm-wide > *, .pms-crm-three > * { height: 100%; }
.pms-crm-wide .fi-section, .pms-crm-three .fi-section, .pms-crm-row .fi-section { height: 100%; } /* side-by-side cards end level */
@media (min-width: 1024px) {
    .pms-crm-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .pms-crm-wide > :only-child { grid-column: 1 / -1; } /* no billing.view: the donut alone */
    .pms-crm-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pms-crm-who { display: flex; flex-direction: column; min-width: 0; }
.pms-crm-who strong, .pms-crm-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pms-crm-who strong { font-size: .875rem; font-weight: 600; color: var(--gray-950); }
.dark .pms-crm-who strong { color: #fff; }
.pms-crm-who small { font-size: .75rem; color: var(--gray-500); }
.pms-crm-top th, .pms-crm-top td { padding-inline: .375rem; } /* all four columns fit a third of the page at 1280 px */
.pms-crm-top-name { max-width: 7.5rem; }
.pms-crm-insights, .pms-crm-people { display: flex; flex-direction: column; gap: .875rem; margin: 0; padding: 0; list-style: none; }
.pms-crm-insights li, .pms-crm-people li { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pms-crm-insights .pms-usage-icon { flex: none; }
.pms-crm-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: .75rem; font-weight: 700; background: var(--gray-100); color: var(--gray-700); }
.dark .pms-crm-avatar { background: rgb(255 255 255 / 0.08); color: var(--gray-200); }

/* Marketing > Mail: campaign cards (client doc). */
.pms-campaign-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.pms-campaign-heading { margin: 0; font-size: 1rem; font-weight: 600; color: var(--gray-950); }
.dark .pms-campaign-heading { color: #fff; }
.pms-campaign-search { width: 100%; max-width: 18rem; padding: .5rem .75rem; font-size: .875rem; border-radius: .5rem; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-950); }
.dark .pms-campaign-search { border-color: rgb(255 255 255 / 0.15); background: rgb(255 255 255 / 0.05); color: #fff; }
.pms-campaign-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) { .pms-campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pms-campaign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pms-campaign-card { display: flex; flex-direction: column; gap: .375rem; min-width: 0; padding: 1rem; border-radius: .75rem; border: 1px solid var(--gray-200); background: #fff; text-decoration: none; transition: border-color .15s; }
.pms-campaign-card:hover { border-color: var(--primary-500); }
.dark .pms-campaign-card { border-color: rgb(255 255 255 / 0.1); background: var(--gray-900); }
.dark .pms-campaign-card:hover { border-color: var(--primary-500); }
.pms-campaign-top { display: flex; align-items: center; gap: .375rem; margin-bottom: .25rem; }
.pms-campaign-spark { flex: none; width: 4.5rem; height: 1.75rem; margin-left: auto; color: var(--primary-600); }
.dark .pms-campaign-spark { color: var(--primary-400); }
.pms-campaign-name { color: var(--gray-950); font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .pms-campaign-name { color: #fff; }
.pms-campaign-desc { min-height: 2.5rem; color: var(--gray-600); font-size: .8125rem; line-height: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dark .pms-campaign-desc { color: var(--gray-400); }
.pms-campaign-state { color: var(--gray-500); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pms-campaign-figures { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: end; gap: .75rem; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--gray-200); }
.dark .pms-campaign-figures { border-top-color: rgb(255 255 255 / 0.1); }
.pms-campaign-figures > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pms-campaign-figures span { color: var(--gray-500); font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.pms-campaign-figures strong { color: var(--gray-950); font-size: .875rem; white-space: nowrap; }
.dark .pms-campaign-figures strong { color: #fff; }
.pms-campaign-revenue strong { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; }
.pms-campaign-more { display: flex; justify-content: center; }
.pms-campaign-empty { margin: 0; color: var(--gray-500); font-size: .875rem; }

/* Inventory page, Locked numbers, Roles' permission matrix, codes popover links */
.pms-inv-card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.25rem; border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); outline: 1px solid rgb(0 0 0 / .05); }
.dark .pms-inv-card { background: var(--gray-900); outline-color: rgb(255 255 255 / .1); }
.pms-inv-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.pms-inv-card-name { display: flex; flex-direction: column; gap: .125rem; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--gray-950); }
.dark .pms-inv-card-name { color: #fff; }
.pms-inv-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pms-inv-card-name small { font-size: .8125rem; font-weight: 400; color: var(--gray-500); }
.pms-inv-card-badges { display: flex; flex-wrap: wrap; gap: .375rem; }
.pms-inv-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 1rem; margin: 0; }
.pms-inv-facts dt { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.pms-inv-facts dd { margin: 0; font-size: .875rem; font-weight: 600; color: var(--gray-950); overflow-wrap: anywhere; }
.dark .pms-inv-facts dd { color: #fff; }
.pms-inv-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.pms-inv-audit { font-size: .8125rem; font-weight: 600; color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dark .pms-inv-audit { color: var(--primary-400); }
.pms-tabs-start { align-self: flex-start; }
.pms-codes-pop-links { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.pms-matrix-wrap { width: 0; min-width: 100%; overflow-x: auto; } /* width 0: a wide table scrolls here, it never widens the modal */
.pms-matrix { width: 100%; border-collapse: collapse; font-size: .875rem; }
.pms-matrix th, .pms-matrix td { padding: .5rem .75rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; text-align: center; }
.dark .pms-matrix th, .dark .pms-matrix td { border-bottom-color: rgb(255 255 255 / .1); }
.pms-matrix thead th { font-weight: 600; color: var(--gray-950); }
.dark .pms-matrix thead th { color: #fff; }
.pms-matrix th:first-child { position: sticky; left: 0; text-align: left; font-weight: 500; background: #fff; color: var(--gray-950); }
.dark .pms-matrix th:first-child { background: var(--gray-900); color: #fff; }
.pms-matrix-group th, .pms-matrix-group th:first-child { padding-top: .875rem; font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--gray-500); }
.dark .pms-matrix-group th:first-child { color: var(--gray-400); }
.pms-matrix-yes { display: inline-block; width: 1.125rem; height: 1.125rem; color: var(--primary-600); }
.dark .pms-matrix-yes { color: var(--primary-400); }
.pms-matrix-no { color: var(--gray-400); }
@media (max-width: 767px) {
    .pms-inv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two-factor card (App\Filament\Auth\StaffAppAuthentication, owner 2026-11-05): Filament's "Authenticator app" actions
   block laid out as a card: icon tile | title + On/Off badge over the description | buttons on the right. The block's
   parts are siblings (label row, actions, below-content), so the label row is unwrapped and all of them sit on one grid.
   Narrower than 40rem (a phone, the set-up-required page) the buttons drop under the text, starting at the left. */
.fi-sc-component:has(> .pms-mfa-card) { container-type: inline-size; }
.pms-mfa-card {
    display: grid;
    grid-template-columns: 2.75rem auto minmax(0, 1fr) auto;
    grid-template-areas: "icon title badge actions" "icon desc desc actions";
    align-items: center;
    gap: .25rem 1rem;
    padding: .5rem .25rem;
}
.pms-mfa-card > .fi-sc-actions-label-ctn { display: contents; }
.pms-mfa-card > .fi-sc-actions-label-ctn > .fi-sc:first-child {
    grid-area: icon;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    background: color-mix(in oklab, var(--primary-500) 15%, transparent);
}
.pms-mfa-card .fi-sc-icon { width: 1.5rem; height: 1.5rem; color: var(--primary-700); }
.dark .pms-mfa-card .fi-sc-icon { color: var(--primary-400); }
.pms-mfa-card .fi-sc-actions-label { grid-area: title; font-size: 1rem; font-weight: 600; white-space: nowrap; color: var(--gray-950); }
.dark .pms-mfa-card .fi-sc-actions-label { color: #fff; }
.pms-mfa-card > .fi-sc-actions-label-ctn > .fi-sc:last-child { grid-area: badge; justify-self: start; }
.pms-mfa-card > .fi-sc:last-child { grid-area: desc; font-size: .875rem; color: var(--gray-500); }
.dark .pms-mfa-card > .fi-sc:last-child { color: var(--gray-400); }
.pms-mfa-card > .fi-ac { grid-area: actions; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.pms-mfa-card > .fi-ac .fi-btn { white-space: nowrap; }
@container (max-width: 40rem) {
    .pms-mfa-card { grid-template-areas: "icon title badge" "icon desc desc" "actions actions actions"; grid-template-columns: 2.75rem auto minmax(0, 1fr); row-gap: .5rem; }
    .pms-mfa-card > .fi-ac { justify-content: flex-start; margin-top: .25rem; }
}

/* Two-factor modals. Set up (pms-mfa-modal): numbered steps; the instruction, QR code and manual code centred, the
   code a monospace chip with a copy icon (Filament's own copy-on-click). Recovery codes (set up and "Regenerate"):
   the codes as a two-column block and Copy / Download as two buttons under them (the sentence around Filament's two
   links is blanked in lang/vendor/filament-panels). */
.pms-mfa-modal .fi-sc-dense:has(.fi-sc-image) { text-align: center; }
.pms-mfa-modal .fi-sc-dense:has(.fi-sc-image) .fi-sc-flex { justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pms-mfa-modal .fi-sc-dense:has(.fi-sc-image) .fi-sc-image { padding: .5rem; border-radius: .75rem; background: #fff; }
.pms-mfa-modal .fi-sc-dense:has(.fi-sc-image) > .fi-grid-col:first-child .fi-sc-text::before,
.pms-mfa-modal .fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-label-content::before,
.pms-mfa-modal .fi-fo-field:has(.fi-revealable) .fi-fo-field-label-content::before {
    content: "1";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-inline-end: .5rem;
    border-radius: 9999px;
    background: var(--primary-500);
    color: var(--gray-950);
    font-size: .75rem;
    font-weight: 700;
    vertical-align: middle;
}
.pms-mfa-modal .fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-label-content::before { content: "2"; }
.pms-mfa-modal .fi-fo-field:has(.fi-revealable) .fi-fo-field-label-content::before { content: "3"; }
.pms-mfa-modal .fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-label-content { white-space: nowrap; }
.pms-mfa-modal .fi-sc-text.fi-copyable.fi-font-mono {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .625rem;
    border: 1px solid var(--gray-200);
    border-radius: .5rem;
    background: var(--gray-50);
    color: var(--gray-950);
    font-size: .9375rem;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.dark .pms-mfa-modal .fi-sc-text.fi-copyable.fi-font-mono { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .05); color: #fff; }
.pms-mfa-modal .fi-sc-text.fi-copyable.fi-font-mono:hover { border-color: var(--primary-500); }

.pms-mfa-modal .fi-sc-text.fi-copyable.fi-font-mono::after,
.fi-sc-text:has(> a[download="recovery-codes.txt"]) > .fi-link::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: var(--pms-mfa-icon-copy) center / contain no-repeat;
    mask: var(--pms-mfa-icon-copy) center / contain no-repeat;
}
:root {
    --pms-mfa-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.75' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6'/%3E%3C/svg%3E");
    --pms-mfa-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.75' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
}
.fi-sc-text:has(> a[download="recovery-codes.txt"]) > a.fi-link::before {
    -webkit-mask-image: var(--pms-mfa-icon-download);
    mask-image: var(--pms-mfa-icon-download);
}
.fi-sc-text:has(> a[download="recovery-codes.txt"]) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .25rem;
}
.fi-sc-text:has(> a[download="recovery-codes.txt"]) > .fi-link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border-radius: .5rem;
    border: 1px solid var(--gray-300);
    background: #fff;
    color: var(--gray-950);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.fi-sc-text:has(> a[download="recovery-codes.txt"]) > .fi-link:hover { background: var(--gray-50); }
.fi-sc-text:has(> a[download="recovery-codes.txt"]) > a.fi-link { border-color: var(--primary-500); background: var(--primary-500); color: var(--gray-950); }
.fi-sc-text:has(> a[download="recovery-codes.txt"]) > a.fi-link:hover { background: var(--primary-400); }
.dark .fi-sc-text:has(> a[download="recovery-codes.txt"]) > button.fi-link { border-color: rgb(255 255 255 / .15); background: rgb(255 255 255 / .05); color: #fff; }
.dark .fi-sc-text:has(> a[download="recovery-codes.txt"]) > button.fi-link:hover { background: rgb(255 255 255 / .1); }
.fi-sc-text:has(> a[download="recovery-codes.txt"]) > .fi-link .fi-link-label { color: inherit; text-decoration: none; }
.fi-modal-window:has(a[download="recovery-codes.txt"]) .fi-sc-unordered-list {
    margin: 0;
    padding: .75rem 1rem;
    list-style: none;
    gap: .375rem 1.5rem;
    justify-items: center;
    border: 1px dashed var(--gray-300);
    border-radius: .75rem;
    background: var(--gray-50);
}
.dark .fi-modal-window:has(a[download="recovery-codes.txt"]) .fi-sc-unordered-list { border-color: rgb(255 255 255 / .15); background: rgb(255 255 255 / .04); }
.fi-modal-window:has(a[download="recovery-codes.txt"]) .fi-sc-unordered-list .fi-sc-text { font-size: .8125rem; white-space: nowrap; }

/* ================= Table filter bars (owner, 2026-11-05) ================= */
/* Every table's Filters card above its list (FiltersLayout::AboveContent: Products, Orders, Codes, Customers, Bulk
   manager, In-stock requests, Activity log, Inventory, Store credit history, Locked numbers, a product's card values).
   Filament puts the fields in equal grid columns (filtersFormColumns), so a pill group sat in a third of the row with
   a hole beside it and a select stretched to a third of a wide screen. From 768px the fields flow in one row sized to
   their content: pills at their natural width; selects and text 256px, dates 176px; one gap; bottoms aligned; a whole
   field wraps (a From / To pair side by side). Below 768px one column, full width; pills wrap inside their group.
   Layout only: the filters and their queries are untouched. */

/* The card is one wrapping row. Filament's header and form step aside (display: contents) so their parts join it:
   the title on its own line, then the filters, then any Apply button, then Reset filters right after the last filter
   (owner: in the space the row leaves, not the top-right corner). On a phone each filter and the button take a line. */
.fi-ta-filters-above-content-ctn .fi-ta-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
}

.fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-ta-filters-header,
.fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-grid.fi-sc {
    display: contents;
}

.fi-ta-filters-above-content-ctn .fi-ta-filters-heading {
    flex: 0 0 100%;
}

.fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-grid.fi-sc > .fi-grid-col {
    order: 1;
    flex: 0 0 100%;
    min-width: 0;
}

.fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-ta-filters-actions-ctn {
    order: 2;
}

.fi-ta-filters-above-content-ctn .fi-ta-filters-header > div {
    order: 3;
}

/* A filter holding only a hidden field (Codes' card value, Activity log's card) leaves no empty slot. */
.fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-grid.fi-sc > .fi-grid-col:not(:has(.fi-fo-field)) {
    display: none;
}

/* Reset filters (label and arrow icon: AppServiceProvider): a small grey outline button, level with the controls'
   middle. Not destructive, so never red. Every table's filters, the dropdown ones included. */
.fi-ta-filters-header [data-table-filter-action="reset"] {
    gap: 0.375rem;
    height: 2.25rem; /* the pills next to it (owner: match button heights) */
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-600);
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.fi-ta-filters-header [data-table-filter-action="reset"]:hover {
    border-color: var(--gray-400);
    background-color: var(--gray-50);
    color: var(--gray-950);
    text-decoration-line: none;
}

.fi-ta-filters-header [data-table-filter-action="reset"] > .fi-link-label {
    align-self: center;
}

.fi-ta-filters-header [data-table-filter-action="reset"] .fi-icon {
    width: 1rem;
    height: 1rem;
    color: inherit;
}

.dark .fi-ta-filters-header [data-table-filter-action="reset"] {
    border-color: rgb(255 255 255 / 0.15);
    color: var(--gray-300);
}

.dark .fi-ta-filters-header [data-table-filter-action="reset"]:hover {
    border-color: rgb(255 255 255 / 0.3);
    background-color: rgb(255 255 255 / 0.05);
    color: #fff;
}

@media (min-width: 768px) {
    .fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-grid.fi-sc > .fi-grid-col .fi-grid.fi-sc {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.5rem;
    }

    .fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-grid.fi-sc .fi-grid-col {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-grid.fi-sc .fi-fo-field:not(.fi-fo-toggle-buttons-wrp) {
        width: 16rem;
        max-width: 100%;
    }

    .fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-grid.fi-sc .fi-fo-field:has(.fi-fo-date-time-picker) {
        width: 11rem;
    }
}

/* Status checks: View N more under the latest 3 (owner, 2026-11-05). */
.pms-order-checks-more {
    margin-top: 0.75rem;
}