/*
 | BeeClair PMS — styles for custom Filament views.
 |
 | Plain CSS, deliberately. Filament panels load a PRECOMPILED stylesheet that
 | contains only the classes Filament itself uses, so Tailwind utilities written
 | in our own Blade views resolve to nothing and the markup renders unstyled.
 | Registering this file through FilamentAsset (see AppServiceProvider) avoids a
 | Tailwind build step entirely.
 |
 | Colours come from Filament's own CSS custom properties where possible, so
 | these panels follow the panel's theme and dark mode automatically.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');


.pms-panel {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.625rem;
    background-color: rgba(0, 0, 0, 0.02);
    padding: 0.875rem 1rem;
}

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

/* ---- headline ------------------------------------------------------- */

.pms-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.pms-eyebrow {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-eyebrow {
    color: rgba(255, 255, 255, 0.5);
}

.pms-total {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.pms-total-lg {
    font-size: 1.5rem;
}

.pms-meta {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.55);
}

.dark .pms-meta {
    color: rgba(255, 255, 255, 0.55);
}

.pms-vendor-name {
    font-weight: 600;
}

.pms-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-code {
    color: rgba(255, 255, 255, 0.5);
}

/* ---- tables --------------------------------------------------------- */

.pms-table-wrap {
    overflow-x: auto;
}

.pms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.pms-table caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-table caption {
    color: rgba(255, 255, 255, 0.5);
}

.pms-table th {
    text-align: left;
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.dark .pms-table th {
    color: rgba(255, 255, 255, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.pms-table td {
    padding: 0.4375rem 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .pms-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

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

.pms-table tfoot td {
    border-top: 1.5px solid rgba(0, 0, 0, 0.25);
    border-bottom: 0;
    font-weight: 700;
    padding-top: 0.5rem;
}

.dark .pms-table tfoot td {
    border-top-color: rgba(255, 255, 255, 0.3);
}

/* .pms-table th sets text-align:left and outranks .pms-num on specificity, so
   a numeric heading sat left while its figures sat right — nothing above the
   Debit column said "Debit". Stated here rather than per table. */
.pms-table th.pms-num {
    text-align: right;
}

.pms-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pms-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 3.5rem;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.75rem;
}

.dark .pms-count {
    color: rgba(255, 255, 255, 0.45);
}

.pms-strong {
    font-weight: 600;
}

/* ---- grouped project -> method rows ---------------------------------- */

/* The project heading row: no bottom rule, so it reads as a group header
   rather than a sibling of the method rows beneath it. */
.pms-table tr.pms-group td {
    font-weight: 600;
    padding-top: 0.625rem;
    border-bottom: 0;
}

.pms-table tr.pms-group:first-child td {
    padding-top: 0.25rem;
}

/* Second-level rows sit indented under their group. */
.pms-table tr.pms-sub td {
    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;
    border-bottom: 0;
    color: rgba(0, 0, 0, 0.7);
}

.dark .pms-table tr.pms-sub td {
    color: rgba(255, 255, 255, 0.7);
}

.pms-table tr.pms-sub td:first-child {
    padding-left: 1.75rem;
}

/* Third-level rows: indented further and quieter still, so the eye reads
   group -> sub -> detail without needing rules between them. */
.pms-table tr.pms-sub2 td {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-bottom: 0;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-table tr.pms-sub2 td {
    color: rgba(255, 255, 255, 0.5);
}

.pms-table tr.pms-sub2 td:first-child {
    padding-left: 3rem;
}

/* Fourth level: the individual instrument — cheque number, bank, txn id. */
.pms-table tr.pms-sub3 td {
    padding-top: 0.0625rem;
    padding-bottom: 0.0625rem;
    border-bottom: 0;
    font-size: 0.6875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(0, 0, 0, 0.42);
}

.dark .pms-table tr.pms-sub3 td {
    color: rgba(255, 255, 255, 0.42);
}

.pms-table tr.pms-sub3 td:first-child {
    padding-left: 4.25rem;
}

/* Card padding still applies to the deeper indents. */
.pms-card .pms-table tr.pms-sub td:first-child {
    padding-left: 2.5rem;
}

.pms-card .pms-table tr.pms-sub2 td:first-child {
    padding-left: 3.75rem;
}

.pms-card .pms-table tr.pms-sub3 td:first-child {
    padding-left: 5rem;
}

/* Close each group with a rule under its last method row. */
.pms-table tr.pms-sub-last td {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .pms-table tr.pms-sub-last td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.pms-method {
    white-space: nowrap;
}

/* The live net-payment figure on the entry form. */
.pms-net {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- cards ----------------------------------------------------------- */

.pms-card {
    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);
    overflow: hidden;
}

.dark .pms-card {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: rgb(24, 24, 27);
    box-shadow: none;
}

.pms-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .pms-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.pms-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pms-card-body {
    padding: 1rem 1.25rem;
}

/* A table that fills its card edge to edge. */
.pms-card .pms-table-wrap {
    padding: 0;
}

.pms-card .pms-table th:first-child,
.pms-card .pms-table td:first-child {
    padding-left: 1.25rem;
}

.pms-card .pms-table th:last-child,
.pms-card .pms-table td:last-child {
    padding-right: 1.25rem;
}

.pms-card .pms-table th {
    background-color: rgba(0, 0, 0, 0.02);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.dark .pms-card .pms-table th {
    background-color: rgba(255, 255, 255, 0.03);
}

.pms-card .pms-table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.015);
}

.dark .pms-card .pms-table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03);
}

.pms-card .pms-table tfoot td {
    background-color: rgba(0, 0, 0, 0.02);
    padding-bottom: 0.625rem;
}

.dark .pms-card .pms-table tfoot td {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Wide tables scroll inside the card, never the page. */
.pms-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- misc ------------------------------------------------------------ */

.pms-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    white-space: nowrap;
}

.pms-nowrap {
    white-space: nowrap;
}

.pms-closing {
    text-align: right;
}

.pms-closing-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-closing-label {
    color: rgba(255, 255, 255, 0.5);
}

.pms-closing-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pms-empty-state {
    padding: 3rem 1.25rem;
    text-align: center;
}

.pms-empty-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.pms-empty-text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.55);
}

.dark .pms-empty-text {
    color: rgba(255, 255, 255, 0.55);
}

.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);
}

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

.pms-note {
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.55);
}

.dark .pms-note {
    color: rgba(255, 255, 255, 0.55);
}

.pms-btn-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(217, 119, 6);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.pms-btn-link:hover {
    text-decoration: underline;
}

/* ---- key/value grids -------------------------------------------------- */

.pms-kv {
    display: grid;
    gap: 0.25rem 1.5rem;
    font-size: 0.8125rem;
}

@media (min-width: 640px) {
    .pms-kv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pms-kv-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.pms-kv-row dt {
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-kv-row dt {
    color: rgba(255, 255, 255, 0.5);
}

.pms-kv-row dd {
    font-weight: 500;
    margin: 0;
}

/* ---- plan cards -------------------------------------------------------- */

/* Ledger subtotal cards sit side by side on wider screens. */
.pms-summary-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .pms-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .pms-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pms-plan-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .pms-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .pms-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pms-plan {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.625rem;
    padding: 1rem;
}

.dark .pms-plan {
    border-color: rgba(255, 255, 255, 0.12);
}

.pms-plan-current {
    border-color: rgb(217, 119, 6);
    box-shadow: 0 0 0 1px rgb(217, 119, 6);
}

.pms-plan-price {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pms-plan-period {
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-plan-period {
    color: rgba(255, 255, 255, 0.5);
}

.pms-plan-price-was {
    text-decoration: line-through;
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.55);
}

.dark .pms-plan-price-was {
    color: rgba(255, 255, 255, 0.55);
}

/* Save badge and the expiry warning share their own line below the price,
   rather than crowding onto it. */
.pms-plan-savings-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.375rem;
}

.pms-plan-expiry {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #991b1b;
}

.dark .pms-plan-expiry {
    font-size: 0.7125rem;
    margin-left: 0.5rem;
    color: #f87171;
}

/* ---- status banners ---------------------------------------------------- */

.pms-banner {
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .pms-banner {
    border-color: rgba(255, 255, 255, 0.1);
}

/* A banner with something at its right-hand end — the low-stock dismiss (x).
   The layout lives HERE and not in a style attribute: Alpine x-show restores a
   shown element by CLEARING style.display, which wipes an inline display:flex
   and drops the button onto its own line (client, 2026-09-25). */
.pms-banner-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pms-banner-row > :first-child { flex: 1 1 auto; }

.pms-banner-dismiss {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0.125rem;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}

.pms-banner-dismiss:hover { opacity: 1; }

.pms-banner-success { background-color: #f0fdf4; border-color: #bbf7d0; }
.pms-banner-warning { background-color: #fffbeb; border-color: #fde68a; }
.pms-banner-danger  { background-color: #fef2f2; border-color: #fecaca; }
.pms-banner-info    { background-color: #eff6ff; border-color: #bfdbfe; }

.dark .pms-banner-success { background-color: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); }
.dark .pms-banner-warning { background-color: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); }
.dark .pms-banner-danger  { background-color: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); }
.dark .pms-banner-info    { background-color: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.25); }

/* ---- layout helpers -------------------------------------------------- */

.pms-cols-2 {
    display: grid;
    gap: 1rem 1.75rem;
}

@media (min-width: 640px) {
    .pms-cols-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.pms-divider {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .pms-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.pms-footnote {
    margin-top: 0.625rem;
    font-size: 0.6875rem;
    color: rgba(0, 0, 0, 0.4);
}

.dark .pms-footnote {
    color: rgba(255, 255, 255, 0.4);
}

.pms-empty {
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.55);
}

.dark .pms-empty {
    color: rgba(255, 255, 255, 0.55);
}

.pms-stack > * + * {
    margin-top: 1.125rem;
}

/* ---------------------------------------------------------------------------
   Batch export progress

   Plain CSS, like everything else here: Filament panels load a precompiled
   stylesheet containing only Filament's own classes, so Tailwind utilities
   written in a custom Blade view resolve to nothing at all.
   --------------------------------------------------------------------------- */

.pms-progress {
    width: 100%;
    max-width: 12rem;
    height: 0.375rem;
    margin-top: 0.5rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.pms-progress-bar {
    height: 100%;
    border-radius: 9999px;
    background-color: #f59e0b;
    /* The bar is redrawn on each poll, so ease the jump between readings. */
    transition: width 0.4s ease;
}

.dark .pms-progress {
    background-color: rgba(255, 255, 255, 0.12);
}

/* A quiet "this is live" cue, so a still-looking table does not read as
   stalled while it is in fact polling. */
.pms-live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.375rem;
    border-radius: 9999px;
    background-color: #f59e0b;
    animation: pms-pulse 1.6s ease-in-out infinite;
}

@keyframes pms-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Respect a reduced-motion preference: the dot still shows, it just holds
   still. */
@media (prefers-reduced-motion: reduce) {
    .pms-live-dot { animation: none; }
    .pms-progress-bar { transition: none; }
}

/* ---------------------------------------------------------------------------
   Auth screens that are a short explanation followed by a form: the invitation
   accept page and the forced change-password page.

   The spacing lives here rather than as utility classes in the Blade because
   the panels load a precompiled Filament stylesheet — Tailwind utilities in our
   own views resolve to nothing. Filament's schema renders its own gap BETWEEN
   fields, so what is missing is only the rhythm around it: intro to form, and
   form to submit button.
--------------------------------------------------------------------------- */
.pms-auth-intro {
    font-size: 0.875rem;
    line-height: 1.55;
}

.pms-auth-hint {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.45);
}

.dark .pms-auth-hint {
    color: rgba(255, 255, 255, 0.45);
}

.pms-auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.75rem;
}

/* The tenant switcher's chevron.
   Almost every user belongs to exactly one company, so the arrow advertises a
   choice that is not there. Only the icon is hidden: the company name and logo
   are siblings inside the same trigger button, and Filament renders the whole
   block behind one `@if (hasTenantMenu())` — switching the menu off would take
   the name and logo with it. The dropdown itself still works for super-admins
   and genuine multi-company users. */
.fi-tenant-menu-trigger > svg:last-child {
    display: none;
}

/* ...and the alignment that hiding it exposes.
   The trigger is `justify-content: center`, exactly like .fi-sidebar-item-btn.
   Nav items only LOOK left-aligned because .fi-sidebar-item-label carries
   `flex: 1`, which eats the spare width; the chevron used to do that job here.
   Giving the tenant name the same flex restores the same geometry, and matching
   the nav's 24px inline padding puts the avatar on the same vertical line as
   the navigation icons below it. */
.fi-tenant-menu {
    margin-inline: calc(var(--spacing) * 6);
}

.fi-tenant-menu-trigger-text {
    flex: 1;
}

/* ---- stat tiles ------------------------------------------------------- */
/* A row of figures that should be read at a glance rather than as prose.
   Replaces a two-column key/value grid on the import preview, where pairs
   like "Vendors 286 new, 0 reused" collided into one cramped line. */

.pms-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
}

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

@media (min-width: 768px) {
    .pms-stats-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pms-stats-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pms-stat {
    background: #fff;
    padding: 0.75rem 0.875rem;
}

.dark .pms-stat {
    background: rgb(24, 24, 27);
}

.pms-stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-stat-label {
    color: rgba(255, 255, 255, 0.5);
}

.pms-stat-value {
    margin-top: 0.125rem;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.pms-stat-note {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
}

.dark .pms-stat-note {
    color: rgba(255, 255, 255, 0.5);
}

/* ---- callout ---------------------------------------------------------- */
/* One line the reader must actually check, rather than skim past. Quieter
   than a banner, which is reserved for something being wrong. */

.pms-callout {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    font-size: 0.8125rem;
    line-height: 1.5;
}

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

.pms-callout-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    color: rgba(0, 0, 0, 0.4);
}

.dark .pms-callout-icon {
    color: rgba(255, 255, 255, 0.4);
}

/* ---- name chips ------------------------------------------------------- */
/* Master data the import would create. Previously a comma-run of 286 names
   that wrapped over three lines and could not be scanned. */

.pms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.pms-chip {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .pms-chip {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.pms-chip-more {
    color: rgba(0, 0, 0, 0.5);
    border-style: dashed;
}

.dark .pms-chip-more {
    color: rgba(255, 255, 255, 0.5);
}

.pms-disclosure {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.pms-disclosure > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.pms-disclosure > summary::-webkit-details-marker {
    display: none;
}

.pms-disclosure > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 0.375rem;
    transition: transform 0.15s ease;
}

.pms-disclosure[open] > summary::before {
    transform: rotate(90deg);
}

/* ---- vertical rhythm -------------------------------------------------- */
/* .pms-card-body is padding only, so its children previously spaced
   themselves by whatever margins they happened to carry, which read as
   uneven. This gives one gap for every child. */

.pms-flow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pms-flow > * {
    margin: 0;
}

/* A banner carrying one short warning rather than a paragraph of them. */
/* A statement's own verdict — "Balanced.", "Profit", "Loss".
   Green or red and in words, not only a sign on a number: the reader may not
   know accounting, and on the balance sheet every other figure on the page
   depends on this one line holding. */
.pms-verdict {
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    margin: 0;
}

.pms-verdict-ok { color: #15803d; }
.pms-verdict-bad { color: #b91c1c; }

.dark .pms-verdict-ok { color: #4ade80; }
.dark .pms-verdict-bad { color: #f87171; }

.pms-verdict-note {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: rgba(32, 30, 29, 0.65);
}

.dark .pms-verdict-note { color: rgba(248, 244, 244, 0.6); }

.pms-banner-compact {
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
}

.pms-banner-compact .pms-footnote {
    margin-top: 0.375rem;
}

/* The row holding the Preview button. Separated from the form above it by
   a rule, so the action reads as the end of the form rather than another
   field crowded against the last radio description. */
.pms-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .pms-form-actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ---- row review table -------------------------------------------------- */

.pms-check-col {
    width: 2.75rem;
}

.pms-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* A skipped row stays legible: it is still evidence of what is in the file,
   and the operator may well put it back. */
.pms-row-skipped {
    opacity: 0.45;
}

.pms-row-skipped td:not(:first-child) {
    text-decoration: line-through;
}

.pms-row-problem {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: rgb(185, 28, 28);
}

.dark .pms-row-problem {
    color: rgb(252, 165, 165);
}

.pms-row-skipped .pms-row-problem {
    text-decoration: none;
}

.pms-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .pms-pager {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ---- breakdown disclosure --------------------------------------------- */
/* A breakdown child that can open to show its individual payments. The rows
   are not rendered until it does: at 904 payments the page was 1.45 MB
   because every payment appeared twice, once in the table and once here. */

.pms-disclose {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.pms-disclose:hover {
    text-decoration: underline;
}

.pms-disclose-mark {
    font-size: 0.625rem;
    opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════════════════
   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;
    --pms-accent: #ec3013;
    --pms-accent-400: #ff9783;
    --pms-accent-700: #ae1800;
    --pms-neutral-100: #f8f4f4;
    --pms-neutral-900: #2d2b2b;
    --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);
}

.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.72) 0%,
        rgba(32, 30, 29, 0.2) 45%,
        rgba(32, 30, 29, 0.82) 88%,
        rgba(32, 30, 29, 0.35) 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 {
    height: 2px;
    margin: 24px 0 16px;
    background: rgba(248, 244, 244, 0.35);
}

.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. */
.pms-login .fi-input-wrp:focus-within {
    border-color: var(--pms-accent);
    box-shadow: 0 0 0 3px rgba(236, 48, 19, 0.15);
}

.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-accent);
}

/*
   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-accent);
}

/* 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-accent);
}

/*
   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-accent);
    box-shadow: inset 0 0 0 3px var(--pms-bg);
}

.pms-login .fi-checkbox-input:focus-visible {
    outline: 2px solid var(--pms-accent);
    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-accent) !important;
    font-family: var(--pms-font);
    font-size: 12px;
    font-weight: 600;
}

.pms-login .fi-link:hover {
    color: var(--pms-accent-700) !important;
}

/*
   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 {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    padding-inline: 18px;
    border-radius: 0 !important;
    background-color: var(--pms-accent) !important;
    color: #fff !important;
    font-family: var(--pms-font);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none !important;
}

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

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

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

    .pms-login-media {
        min-height: 300px;
    }

    .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;
    }
}

/* ---- add-on lines on a plan card (R7) --------------------------------- */

/* The plan price alone stops being the amount owed once add-ons are on, so
   each one is listed and the total is stated. Set as a small ledger rather
   than loose text: the customer is checking a figure, not reading prose. */
.pms-addon-lines {
    list-style: none;
    margin: 0.625rem 0 0;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.8125rem;
}

.dark .pms-addon-lines {
    background: rgba(255, 255, 255, 0.04);
}

.pms-addon-lines li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.1875rem 0;
    color: rgba(0, 0, 0, 0.6);
}

.dark .pms-addon-lines li {
    color: rgba(255, 255, 255, 0.6);
}

/* A leader line between the label and the figure, so the eye tracks across
   a card that is only ~250px wide. */
.pms-addon-lines li > span:first-child::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.pms-addon-lines li > span:first-child {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    /* The rate note takes a whole line of its own rather than being squeezed
       into the row beside the label and clipped. */
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.pms-addon-lines li > span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pms-addon-lines .pms-addon-total {
    margin-top: 0.3125rem;
    padding-top: 0.4375rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    font-weight: 700;
    color: inherit;
}

.dark .pms-addon-lines .pms-addon-total {
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* A short qualifier that must never wrap away from what it qualifies —
   "RMS add-on" as plain text broke onto two lines in a narrow plan card. */
.pms-pill {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.07);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: 1px;
}

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

/* Centred, on an element we own.
   Filament renders helperText inside an inline span with no width to centre
   within, so hints that need centring are written in the page's own view
   instead — see opening-balances.blade.php. */
.pms-center {
    display: block;
    width: 100%;
    text-align: center;
}

/* A repeater hint that reads as an instruction for the Add button rather than
   as a footnote to the last row.

   Filament renders the add button inside the repeater's own content, so there
   is no slot between the rows and it — helperText and belowContent both land
   underneath. This prints the text inside the button's own wrapper instead.

   The copy comes from --pms-add-hint, set on the repeater in PHP, so it stays
   out of the stylesheet and the rule does nothing on repeaters that do not set
   it. */
/* The add wrapper is a centred flex ROW, so the printed hint would sit beside
   the button rather than above it. */
.pms-hinted-repeater .fi-fo-table-repeater-add,
.pms-hinted-repeater .fi-fo-repeater-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5rem;
}

.fi-fo-table-repeater-add::before,
.fi-fo-repeater-add::before {
    content: var(--pms-add-hint, '');
    display: block;
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.55);
}

.dark .fi-fo-table-repeater-add::before,
.dark .fi-fo-repeater-add::before {
    color: rgba(255, 255, 255, 0.55);
}

/* The per-month rate behind a quarterly or yearly figure. Without it the same
   add-on reads as three different prices across the three plan cards. */
.pms-addon-note {
    flex-basis: 100%;
    font-style: normal;
    font-size: 0.6875rem;
    opacity: 0.7;
    white-space: nowrap;
}

.pms-nowrap {
    white-space: nowrap;
}

/*
 * NO overflow container on the line repeater, deliberately.
 *
 * It had one, to scroll the row sideways. That clips any dropdown opening
 * downward out of a cell — the item picker's search panel was cut off at the
 * bottom of the row — and releasing the clip while a select is open (:has on
 * aria-expanded) only traded that for the row bursting out of the card.
 *
 * A scrolling ancestor and an in-cell dropdown cannot both work. So the columns
 * are sized to fit instead, and on a screen too narrow for them Filament's own
 * container query stacks the row into its mobile layout.
 */

/*
 * A quantity that exceeds what is in stock, while it is being typed.
 *
 * The hint beside the field says how much there is; this makes the number
 * itself unmistakable, because a red line of helper text under a row of
 * eleven fields is easy to miss. The save is still refused server-side —
 * see OrderService — this is only the half that is quick.
 */
.pms-short {
    color: rgb(220 38 38) !important;
    font-weight: 600;
}

.dark .pms-short {
    color: rgb(248 113 113) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   The BeeClair UI kit (BEECLAIR-UI-GUIDE.md, 2026-10-06)
   Brought across from BeeClair Digital Invoicing, which was forked from here:
   the intro card, the stat tiles, the filter drawer, the unsaved-changes bar,
   the brand red on buttons and scrollbars, and the mobile alignment rules.
   Blocks whose only subjects are Digital Invoicing's own pages were left out
   (di-*, pms-support*, pms-company-intro, pms-preview-card, pms-document*,
   pms-fbr*, pms-ntn-*, the help centre, the sale-invoice wizard). Badges,
   pms-muted and pms-empty-state already live above in their TMS form; the
   kit's copies were dropped rather than allowed to win on source order.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- filter drawer (DI client, 2026-10-01) ------------------------------
   resources/views/components/pms/filter-drawer.blade.php: every filter bar (the dashboard, 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;
    }

    /* Period pills (and every grouped toggle) wrap inside the sheet instead of running off it. */
    .pms-filter-drawer-body .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;
    }
}

/* ---- the tile look (DI client, 2026-09-28) ------------------------------
   One row per figure, icon, label, the number beside it, instead of the number stacked under an
   uppercase label. Drawn by <x-pms.stat-tiles> and by the intro card's icon circle. */
.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;
}

/* ---- the brand red on Filament's own chrome (DI client, 2026-09-30) -----
   Solid primary buttons in BeeClair's exact logo red #f2290f with white text. Filament derives
   the button shade and text colour from its palette (a lighter coral with dark text), set
   inline, so these variables need !important. Outlined and link-style buttons keep the panel's
   own palette. */
.fi-btn.fi-color.fi-color-primary:not(.fi-outlined):not(label) {
    --bg: #f2290f !important;
    --text: #ffffff !important;
    --hover-bg: #d4220b !important;
    --hover-text: #ffffff !important;
    --dark-bg: #f2290f !important;
    --dark-text: #ffffff !important;
    --dark-hover-bg: #ff4a31 !important;
    --dark-hover-text: #ffffff !important;
}

/* A switched-on toggle in the solid brand red in both themes: 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: slim and rounded everywhere (page, sidebar, tables, dropdowns, modals) instead of
   the browser's wide grey bar with arrow buttons. The thumb turns BeeClair red on hover. Firefox
   uses scrollbar-width/-color; Chrome, Edge and 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: #f2290f;
}

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

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #f2290f;
}

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

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

/* ---- stat tile rows (DI client, 2026-09-30) -----------------------------
   The tiles above a list, 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 ("AED 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); }
}

/* 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 and 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 and 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 (DI 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;
}

/* The currency 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);
}

/* ---- the intro card (DI client, 2026-09-30) -----------------------------
   <x-pms.page-intro>: one card, the icon circle and the explanation on the left, the page's own
   control on the right. Order on a page: intro card, tiles, then the page body, the page's own
   2rem apart. */
.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;
}

/* 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;
}

/* ---- unsaved changes bar (DI 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; }
}

/* ---- sections of equal height (DI client, 2026-10-01) -------------------
   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). .pms-equal-sections is
   for a grid wrapped in our own div, where Filament nests
   .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-section > section.fi-section and every
   level has to be 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%;
    }

    .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%;
    }
}

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

/* Phones and tablets (DI 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 (DI 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) {
    /* The intro card: the badge, buttons or field on their own line under the text, starting
       where the title's text starts (icon 2.25rem plus the 0.75rem gap), 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;
    }

    /* 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;
    }

    /* 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;
    }

    /* Label / value lists (the receiving account's title, number and IBAN): a label column and
       the values left-aligned beside it. A long value 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 {
        text-align: left;
        overflow-wrap: anywhere;
    }
}

/* ---- the company switcher (DI client, 2026-10-05) -----------------------
   Long company names wrap onto a second line instead of being cut with an ellipsis; 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; }

/* ---- a document register's intro card (BeeClair UI guide, 2026-10-06) ---
   On the eight document registers the intro card stands IN PLACE of Filament's own page heading
   (App\Filament\App\Concerns\HasRegisterIntro), so its title is drawn at a heading's size rather
   than at a tile label's, and the line under it keeps the muted note's own size. The colours are
   the label's and the note's, so the dark theme needs nothing of its own. */
.pms-register-intro .pms-usage-label {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6rem;
    color: var(--gray-950);
}

.dark .pms-register-intro .pms-usage-label { color: var(--gray-50); }

.pms-register-intro .pms-usage-note { line-height: 1.1rem; }

/* ---- wide statements on a phone (BeeClair UI guide §3, 2026-10-06) ------
   The general ledger and the journal carry ten columns. Squeezed into 390px
   every cell wraps into a column of single words and one row grows ten lines
   tall, so the table keeps a readable width and its card scrolls sideways
   instead (which .pms-scroll already does). Desktop is untouched. */
@media (max-width: 767px) {
    .pms-scroll-wide > .pms-table {
        min-width: 52rem;
    }
}

/* ---- A compact upload box (client, 2026-10-06) -------------------------------
   The quotation line's picture field at its natural height is about two and a
   half times a text input, so the three fields beside it on the same row left a
   band of white under them. Shrunk to roughly an input's height: it is a drop
   target, not a preview, and the preview replaces it once a file is chosen. */
.pms-compact-upload .filepond--root,
.pms-compact-upload .filepond--drop-label {
    min-height: 2.75rem;
}

.pms-compact-upload .filepond--drop-label label {
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

.pms-compact-upload .filepond--panel-root {
    min-height: 2.75rem;
}

/* ---- 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);
    background-color: rgba(255, 255, 255, 0.02);
}