/*
 | 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.
 */

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

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