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

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