/* ═══════════════════════════════════════════════════════════════════════════
   Design foundation: the one theme file for the whole app.

   - Type: Geist, one family (panel ->font()). Numbers use tabular figures.
   - Colour: neutrals (zinc) do the work; one primary (navy-indigo, panel ->colors())
     for actions and selection only; status colours mean one thing each:
     success = paid/won, warning = due/overdue, danger = lost/delete, info = AI/hints.
     Orange #FF840E is the logo mark only.
   - Space 4·8·12·16·20·24·32; radius 6 pill · 8 control · 12 card.
   - Users pick Light / Dark / System from the user menu.

   Blade views use Filament components or these tokens, never inline hex colours,
   so dark mode and branding work everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --crm-radius-pill: 6px;
    --crm-radius-control: 8px;
    --crm-radius-card: 12px;

    --crm-text-page: 1.625rem;     /* 26 / 600 */
    --crm-text-section: 0.9375rem; /* 15 / 600 */
    --crm-text-body: 0.875rem;     /* 14 / 400 */
    --crm-text-meta: 0.8125rem;    /* 13 / 400 */
    --crm-text-figure: 1.5rem;     /* 24 / 600 */
    --crm-text-label: 0.78125rem;  /* 12.5 / 500 */

    --crm-selected-bg: var(--primary-50);
    --crm-selected-text: var(--primary-800);
    --crm-selected-icon: var(--primary-600);
    --crm-muted: var(--gray-600);      /* 4.5:1+ on the canvas and on gray-100 tabs */
    --crm-border: var(--gray-200);
    --crm-toast-bg: var(--gray-900);
    --crm-card-shadow-hover: 0 6px 24px rgb(24 24 27 / 0.08);

    /* Surfaces and text for custom Blade views (document previews, cards). */
    --crm-surface: #ffffff;
    --crm-surface-muted: var(--gray-50);
    --crm-surface-sunken: var(--gray-100);
    --crm-border-subtle: var(--gray-100);
    --crm-border-strong: var(--gray-300);
    --crm-text-strong: var(--gray-950);
    --crm-text: var(--gray-700);
    --crm-text-faint: var(--gray-500); /* labels: 4.8:1 on white; never below this for text */
    --crm-shadow-card: 0 1px 3px rgb(24 24 27 / 0.06);
    --crm-shadow-paper: 0 2px 12px rgb(24 24 27 / 0.08);

    /* Status tones: text on a tinted background. */
    --crm-accent-text: var(--primary-600);
    --crm-accent-bg: var(--primary-50);
    --crm-success-text: var(--success-700);
    --crm-success-bg: var(--success-50);
    --crm-warning-text: var(--warning-700);
    --crm-warning-bg: var(--warning-50);
    --crm-danger-text: var(--danger-700);
    --crm-danger-bg: var(--danger-50);
    --crm-info-text: var(--info-700);
    --crm-info-bg: var(--info-50);
    --crm-on-solid: #ffffff;

    /* Loading feedback (UX-SAFE-01): the top bar, busy controls and table placeholders. */
    --crm-progress-color: var(--primary-600);
    --crm-progress-height: 2px;
    --crm-busy-opacity: 0.6;
}

.dark {
    --crm-progress-color: var(--primary-400);
    --crm-selected-bg: rgb(255 255 255 / 0.06);
    --crm-selected-text: var(--primary-200);
    --crm-selected-icon: var(--primary-300);
    --crm-muted: var(--gray-400);
    --crm-border: rgb(255 255 255 / 0.1);
    --crm-toast-bg: var(--gray-800);
    --crm-card-shadow-hover: 0 6px 24px rgb(0 0 0 / 0.45);

    --crm-surface: var(--gray-900);
    --crm-surface-muted: rgb(255 255 255 / 0.03);
    --crm-surface-sunken: rgb(255 255 255 / 0.06);
    --crm-border-subtle: rgb(255 255 255 / 0.06);
    --crm-border-strong: rgb(255 255 255 / 0.2);
    --crm-text-strong: #ffffff;
    --crm-text: var(--gray-300);
    --crm-text-faint: var(--gray-400);
    --crm-shadow-card: 0 1px 3px rgb(0 0 0 / 0.4);
    --crm-shadow-paper: 0 2px 12px rgb(0 0 0 / 0.5);

    --crm-accent-text: var(--primary-300);
    --crm-accent-bg: rgb(108 112 200 / 0.15);
    --crm-success-text: var(--success-400);
    --crm-success-bg: rgb(74 222 128 / 0.1);
    --crm-warning-text: var(--warning-400);
    --crm-warning-bg: rgb(251 191 36 / 0.1);
    --crm-danger-text: var(--danger-400);
    --crm-danger-bg: rgb(248 113 113 / 0.1);
    --crm-info-text: var(--primary-300);
    --crm-info-bg: rgb(108 112 200 / 0.15);
}

/* ── Type ────────────────────────────────────────────────────────────────── */

.fi-body {
    font-size: var(--crm-text-body);
}

.fi-header-heading {
    font-size: var(--crm-text-page);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.fi-header-subheading {
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading {
    font-size: var(--crm-text-section);
    font-weight: 600;
}

.fi-fo-field-label-content,
.fi-in-entry-label {
    font-size: var(--crm-text-label);
    font-weight: 500;
}

.fi-section-header-description {
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

/* Columns of numbers line up. */
.fi-ta-table,
.fi-in-entry,
.fi-input,
.fi-wi-stats-overview-stat-value,
.fi-badge {
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-value {
    font-size: var(--crm-text-figure);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ── Tables: sentence case headers, quiet rows ───────────────────────────── */

.fi-ta-table {
    font-size: var(--crm-text-body);
}

.fi-ta-header-cell {
    font-size: var(--crm-text-label);
    font-weight: 500;
    color: var(--crm-muted);
    text-transform: none;
    letter-spacing: 0;
}

.fi-ta-text:not(.fi-inline) {
    padding-block: var(--crm-row-pad);
}

/* Empty state: dashed card, primary icon, one secondary action. */
.fi-ta-empty-state {
    margin: 1rem;
    border: 1px dashed var(--gray-300);
    border-radius: var(--crm-radius-card);
    padding-block: 2rem;
}

.dark .fi-ta-empty-state {
    border-color: var(--crm-border);
}

.fi-ta-empty-state-icon-bg {
    background-color: transparent;
}

.fi-ta-empty-state-icon-bg .fi-icon {
    color: var(--primary-500);
}

.fi-ta-empty-state-heading {
    font-size: var(--crm-text-section);
    font-weight: 600;
}

.fi-ta-empty-state-description {
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

/* ── Buttons: one primary per screen; Delete is outlined, not filled ────── */

.fi-btn.fi-color-danger:not(.fi-outlined):not(label) {
    background-color: var(--color-white);
    color: var(--danger-700);
    box-shadow: inset 0 0 0 1px var(--danger-200);
}

.fi-btn.fi-color-danger:not(.fi-outlined):not(label) > .fi-icon {
    color: var(--danger-600);
}

.fi-btn.fi-color-danger:not(.fi-outlined):not(label):hover {
    background-color: var(--danger-50);
}

.dark .fi-btn.fi-color-danger:not(.fi-outlined):not(label) {
    background-color: transparent;
    color: var(--danger-400);
    box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.4);
}

.dark .fi-btn.fi-color-danger:not(.fi-outlined):not(label) > .fi-icon {
    color: var(--danger-400);
}

.dark .fi-btn.fi-color-danger:not(.fi-outlined):not(label):hover {
    background-color: rgb(248 113 113 / 0.08);
}

/* ── Badges: pill with a status dot (sidebar and tab counters stay plain) ── */

.fi-badge {
    border-radius: var(--crm-radius-pill);
}

.fi-badge.fi-color {
    box-shadow: none;
}

.fi-badge.fi-color:not(:has(.fi-icon))::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: var(--color-500);
}

.fi-sidebar .fi-badge.fi-color::before,
.fi-tabs .fi-badge.fi-color::before,
.fi-topbar .fi-badge.fi-color::before,
.fi-dropdown-list .fi-badge.fi-color::before {
    content: none;
}

.dark .fi-badge.fi-color {
    background-color: rgb(255 255 255 / 0.06);
}

/* ── Toast: dark, one line, action on the right ─────────────────────────── */

.fi-no-notification {
    background-color: var(--crm-toast-bg);
    border-radius: var(--crm-radius-card);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
    color: #ffffff;
}

.fi-no-notification .fi-no-notification-title {
    color: #ffffff;
    font-size: var(--crm-text-body);
    font-weight: 500;
}

.fi-no-notification .fi-no-notification-body {
    color: var(--gray-300);
    font-size: var(--crm-text-meta);
}

.fi-no-notification .fi-no-notification-close-btn .fi-icon {
    color: var(--gray-400);
}

.fi-no-notification .fi-link {
    color: var(--primary-200);
}

/* ── Sidebar: neutral; primary marks the current page only ─────────────── */

.fi-sidebar .fi-sidebar-group-label {
    color: var(--crm-muted);
    font-size: var(--crm-text-label);
    font-weight: 500;
}

.fi-sidebar .fi-sidebar-item-btn {
    padding-block: 0.375rem;
    column-gap: 0.625rem;
}

.fi-sidebar .fi-sidebar-item-label {
    font-size: var(--crm-text-body);
    font-weight: 400;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--crm-selected-bg);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--crm-selected-text);
    font-weight: 500;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--crm-selected-icon);
}

.fi-sidebar .fi-sidebar-item-badge-ctn {
    margin-inline-start: 0.375rem;
    flex-shrink: 0;
}

.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

.dark .fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--gray-700);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.fi-wi-stats-overview-stat {
    border-radius: var(--crm-radius-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--crm-card-shadow-hover);
    transform: translateY(-2px);
}

/* Tabs that switch between the pages of a merged report family. */
.crm-page-family-tabs {
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

/* ── Hubs (Reports, Settings): sections of link cards ───────────────────── */

.crm-hub {
    display: grid;
    gap: 2rem;
}

.crm-hub-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.crm-hub-intro {
    color: var(--crm-muted);
    font-size: var(--crm-text-body);
    max-width: 48rem;
}

.crm-hub-search {
    width: 100%;
    max-width: 20rem;
}

.crm-hub-section {
    display: grid;
    gap: 0.75rem;
}

.crm-hub-section-title {
    font-size: var(--crm-text-section);
    font-weight: 600;
    color: var(--crm-text-strong);
}

.crm-hub-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.crm-hub-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-card);
    background: var(--crm-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.crm-hub-card:hover,
.crm-hub-card:focus-visible {
    border-color: var(--primary-300);
    box-shadow: var(--crm-shadow-card);
}

.crm-hub-card:focus-visible {
    outline: none;
    box-shadow: var(--crm-focus-ring);
}

.crm-hub-card-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    color: var(--primary-500);
}

.crm-hub-card-text {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.crm-hub-card-title {
    font-size: var(--crm-text-body);
    font-weight: 500;
    color: var(--crm-text-strong);
}

.crm-hub-card-desc {
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

/* ── Sidebar layout: top-level entries, expandable groups, footer ───────── */

.fi-sidebar .fi-sidebar-nav {
    row-gap: 0.25rem;
    padding-block: 0.75rem;
}

.fi-sidebar .fi-sidebar-nav-groups {
    row-gap: 0.125rem;
    flex-grow: 1;
}

/* An expandable group (Sales, Purchases, ...) reads like a top-level entry. */
.fi-sidebar .fi-sidebar-group-btn {
    padding: 0.375rem 0.5rem;
    column-gap: 0.625rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

/* Same hover as a plain entry (gray-50 vanishes on the white sidebar). */
.fi-sidebar .fi-sidebar-group-btn:hover {
    background-color: var(--crm-surface-sunken);
}

.fi-sidebar .fi-sidebar-group-btn > .fi-icon {
    color: var(--gray-400);
}

.fi-sidebar .fi-sidebar-group-btn .fi-sidebar-group-label {
    flex: 1;
    color: var(--gray-700);
    font-size: var(--crm-text-body);
    font-weight: 400;
}

.dark .fi-sidebar .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--gray-200);
}

.fi-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--crm-selected-text);
    font-weight: 500;
}

.fi-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-icon {
    color: var(--crm-selected-icon);
}

/* Children: indented text, no dots or rails. */
.fi-sidebar .fi-sidebar-group-items .fi-sidebar-item-grouped-border {
    display: none;
}

.fi-sidebar .fi-sidebar-group:has(> .fi-sidebar-group-btn) .fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-inline-start: 2.375rem;
}

/* Footer entries (Settings, Help & AI guide) sit at the bottom of the sidebar. */
.fi-sidebar .crm-nav-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--crm-border);
}

/* ── Reports page: views and categories on the left, the list on the right ─ */

.crm-reports {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .crm-reports {
        grid-template-columns: 15rem minmax(0, 1fr);
    }
}

.crm-reports-panel {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-card);
    background: var(--crm-surface);
}

@media (min-width: 1024px) {
    .crm-reports-panel {
        position: sticky;
        top: calc(var(--topbar-height, 4rem) + 1rem);
    }
}

.crm-reports-panel-list {
    display: grid;
    gap: 0.125rem;
}

.crm-reports-panel-heading {
    margin: 0.75rem 0.5rem 0.25rem;
    font-size: var(--crm-text-label);
    font-weight: 500;
    color: var(--crm-muted);
}

.crm-reports-panel-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.4375rem 0.5rem;
    border-radius: var(--crm-radius-control);
    color: var(--crm-text);
    font-size: var(--crm-text-body);
    text-align: start;
}

.crm-reports-panel-item:hover {
    background: var(--crm-surface-sunken);
}

.crm-reports-panel-item.is-active {
    background: var(--crm-selected-bg);
    color: var(--crm-selected-text);
    font-weight: 500;
}

.crm-reports-panel-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--gray-400);
}

.crm-reports-panel-item.is-active .crm-reports-panel-icon {
    color: var(--crm-selected-icon);
}

.crm-reports-panel-count {
    margin-inline-start: auto;
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
    font-variant-numeric: tabular-nums;
}

.crm-count-pill {
    display: inline-flex;
    margin-inline-start: 0.375rem;
    padding: 0 0.5rem;
    border-radius: var(--crm-radius-pill);
    background: var(--crm-accent-bg);
    color: var(--crm-accent-text);
    font-size: var(--crm-text-meta);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* ── Report drawer: the reports list beside every report ──────────────── */

.crm-report-drawer,
.crm-report-drawer-open {
    display: none;
}

@media (min-width: 1024px) {
    .fi-page:has(> .crm-report-drawer) {
        display: grid;
        grid-template-columns: 16rem minmax(0, 1fr);
        column-gap: 1.5rem;
        align-items: start;
    }

    .fi-page:has(> .crm-report-drawer) > :not(.crm-report-drawer) {
        grid-column: 2;
    }

    .fi-page > .crm-report-drawer {
        display: grid;
        gap: 0.75rem;
        grid-column: 1;
        grid-row: 1 / span 20;
        position: sticky;
        top: calc(var(--topbar-height, 4rem) + 1rem);
        max-height: calc(100dvh - var(--topbar-height, 4rem) - 2rem);
        overflow-y: auto;
        padding: 1rem 0.75rem;
        border: 1px solid var(--crm-border);
        border-radius: var(--crm-radius-card);
        background: var(--crm-surface);
    }

    .crm-report-drawer-closed .fi-page:has(> .crm-report-drawer) {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-report-drawer-closed .fi-page > .crm-report-drawer {
        display: none;
    }

    .crm-report-drawer-closed .fi-page:has(> .crm-report-drawer) > :not(.crm-report-drawer) {
        grid-column: 1;
    }

    .crm-report-drawer-closed .crm-report-drawer-open {
        display: inline-flex;
    }
}

.crm-report-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.25rem;
}

.crm-report-drawer-title {
    font-size: var(--crm-text-section);
    font-weight: 600;
    color: var(--crm-text-strong);
}

.crm-report-drawer-close {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: var(--crm-radius-control);
    color: var(--crm-muted);
}

.crm-report-drawer-close:hover {
    background: var(--crm-surface-sunken);
    color: var(--crm-text-strong);
}

.crm-report-drawer-close-icon,
.crm-report-drawer-open-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.crm-report-drawer-open {
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-control);
    background: var(--crm-surface);
    color: var(--crm-text);
    font-size: var(--crm-text-meta);
}

.crm-report-drawer-folders {
    display: grid;
    gap: 0.125rem;
}

.crm-report-drawer-folder > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.5rem;
    border-radius: var(--crm-radius-control);
    color: var(--crm-text);
    font-size: var(--crm-text-body);
    cursor: pointer;
    list-style: none;
}

.crm-report-drawer-folder > summary::-webkit-details-marker {
    display: none;
}

.crm-report-drawer-folder > summary:hover {
    background: var(--crm-surface-sunken);
}

.crm-report-drawer-folder[open] > summary {
    color: var(--crm-selected-text);
    font-weight: 500;
}

.crm-report-drawer-folder-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--gray-400);
}

.crm-report-drawer-chevron {
    margin-inline-start: auto;
    width: 1rem;
    height: 1rem;
    color: var(--gray-400);
    transition: transform 0.15s ease;
}

.crm-report-drawer-folder[open] .crm-report-drawer-chevron {
    transform: rotate(90deg);
}

.crm-report-drawer-folder ul {
    display: grid;
    gap: 0.125rem;
    padding-block: 0.125rem 0.375rem;
}

.crm-report-drawer-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 1.375rem;
    border-radius: var(--crm-radius-control);
    color: var(--crm-text);
    font-size: var(--crm-text-body);
}

.crm-report-drawer-link:hover {
    background: var(--crm-surface-sunken);
}

.crm-report-drawer-link-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--gray-400);
}

.crm-report-drawer-link.is-active .crm-report-drawer-link-icon,
.crm-report-drawer-folder[open] > summary .crm-report-drawer-folder-icon {
    color: var(--crm-selected-icon);
}

.crm-report-drawer-link.is-active {
    background: var(--crm-selected-bg);
    color: var(--crm-selected-text);
    font-weight: 500;
}

/* ── Dashboard loading skeletons (lazy widgets, see HasSkeletonPlaceholder) ──────────── */
.crm-skeleton {
    display: block;
    border-radius: var(--crm-radius-pill);
    background: var(--crm-surface-sunken);
    animation: crm-skeleton-pulse 1.4s ease-in-out infinite;
}
.dark .crm-skeleton {
    background: var(--gray-800);
}
@keyframes crm-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .crm-skeleton { animation: none; }
}
.crm-skeleton-stats {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .crm-skeleton-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .crm-skeleton-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.crm-skeleton-stats .fi-wi-stats-overview-stat-content {
    gap: 0.5rem;
}
.crm-skeleton-label { width: 40%; height: 0.75rem; }
.crm-skeleton-figure { width: 60%; height: 1.5rem; }
.crm-skeleton-meta { width: 30%; height: 0.75rem; }
.crm-skeleton-heading { width: 10rem; height: 1rem; }
.crm-skeleton-chart { width: 100%; }
.crm-skeleton-table { display: flex; flex-direction: column; gap: 0.75rem; }
.crm-skeleton-row { width: 100%; height: 1.25rem; }
.crm-skeleton-row:nth-child(even) { width: 85%; }


/* ═══════════════════════════════════════════════════════════════════════════
   Premium layer (October 2026): one surface language for every screen.

   - Canvas and white surfaces with hairline edges; layered shadows only on what
     floats (menus, modals, toasts). Radius: 8 controls · 12 cards · 16 modals.
   - Buttons: the primary has a light-to-dark wash and an inner highlight. Inputs
     show the soft 3px ring (--crm-ring) while typing; keyboard focus on buttons,
     tabs, links and menu items is a solid ring with a gap (--crm-focus-ring).
   - Tabs are a segmented control; the active segment is a raised white pill.
   - Tables on list pages: the frame scrolls (resources/js/list-pages.js) so the
     header and the selection column stay in view; links in rows are quiet
     (dark text, primary on hover); html.crm-dense = compact rows.
   - Tokens first, light then dark. !important only for focus rings and the
     page-transition bar, which the frameworks set inline.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --crm-canvas: #f6f6f8;
    --crm-card-edge: color-mix(in srgb, var(--gray-950) 7%, transparent);
    --crm-input-border: color-mix(in srgb, var(--gray-950) 12%, transparent);
    --crm-input-border-hover: color-mix(in srgb, var(--gray-950) 24%, transparent);
    --crm-ring-color: color-mix(in srgb, var(--primary-500) 24%, transparent);
    --crm-ring: 0 0 0 3px var(--crm-ring-color);
    /* Keyboard focus on buttons, tabs, links and menu items: solid, with a 2px gap (WCAG 2.4.13). */
    --crm-focus: var(--primary-600);
    --crm-focus-ring: 0 0 0 2px var(--crm-surface), 0 0 0 4px var(--crm-focus);
    --crm-shadow-raised: 0 1px 2px rgb(24 24 27 / 0.05), 0 1px 1px rgb(24 24 27 / 0.03);
    --crm-shadow-pop: 0 0 0 1px rgb(24 24 27 / 0.06), 0 12px 32px -12px rgb(24 24 27 / 0.28), 0 4px 10px -6px rgb(24 24 27 / 0.1);
    --crm-shadow-modal: 0 0 0 1px rgb(24 24 27 / 0.05), 0 32px 64px -24px rgb(24 24 27 / 0.35), 0 12px 24px -12px rgb(24 24 27 / 0.2);
    --crm-radius-modal: 16px;
    --crm-table-head-bg: #fafafa;
    --crm-row-hover: #f7f7f8;
    --crm-row-selected: var(--primary-50);
    --crm-row-pad: 0.75rem;  /* text cells: comfortable */
    --crm-cell-pad: 1rem;    /* selection and actions cells */
    --crm-scrollbar: var(--gray-300);
}

html.crm-dense {
    --crm-row-pad: 0.375rem;
    --crm-cell-pad: 0.25rem; /* the actions cell sets the row height: icon + this */
}

.dark {
    /* Off-black between gray-950 and the gray-900 cards: never a pure black page. */
    --crm-canvas: color-mix(in srgb, var(--gray-950) 70%, var(--gray-900));
    --crm-card-edge: rgb(255 255 255 / 0.08);
    --crm-input-border: rgb(255 255 255 / 0.14);
    --crm-input-border-hover: rgb(255 255 255 / 0.26);
    --crm-ring-color: color-mix(in srgb, var(--primary-400) 32%, transparent);
    --crm-focus: var(--primary-300);
    --crm-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);
    --crm-shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 40px -12px rgb(0 0 0 / 0.7);
    --crm-shadow-modal: 0 0 0 1px rgb(255 255 255 / 0.08), 0 32px 64px -24px rgb(0 0 0 / 0.8);
    --crm-table-head-bg: #1c1c21; /* opaque: rows scroll under the sticky header */
    --crm-row-hover: rgb(255 255 255 / 0.04);
    --crm-row-selected: rgb(108 112 200 / 0.12);
    --crm-scrollbar: var(--gray-700);
}

/* ── Canvas, type and selection ─────────────────────────────────────────── */

.fi-body {
    background-color: var(--crm-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: color-mix(in srgb, var(--primary-500) 22%, transparent);
}

.fi-breadcrumbs li {
    font-size: var(--crm-text-label);
}

.fi-header-heading {
    letter-spacing: -0.02em;
}

/* Page transitions (SPA mode): Livewire's bar in the brand colour; the same look as the
   request bar (#crm-progress, "Busy buttons and progress" below). */
#nprogress .bar {
    background: var(--crm-progress-color) !important;
    height: var(--crm-progress-height) !important;
}

@media (prefers-reduced-motion: reduce) {
    #nprogress .bar {
        transition: none !important;
    }
}

#nprogress .peg {
    box-shadow: none !important;
}

/* Thin scrollbars where lists scroll. */
.fi-ta-content-ctn,
.fi-sidebar-nav,
.fi-modal-window,
.fi-dropdown-panel,
.kb-list,
.kb-board {
    scrollbar-width: thin;
    scrollbar-color: var(--crm-scrollbar) transparent;
}

.fi-ta-content-ctn::-webkit-scrollbar,
.fi-modal-window::-webkit-scrollbar,
.fi-dropdown-panel::-webkit-scrollbar,
.kb-list::-webkit-scrollbar,
.kb-board::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.fi-ta-content-ctn::-webkit-scrollbar-thumb,
.fi-modal-window::-webkit-scrollbar-thumb,
.fi-dropdown-panel::-webkit-scrollbar-thumb,
.kb-list::-webkit-scrollbar-thumb,
.kb-board::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: var(--crm-scrollbar);
    background-clip: padding-box;
}

/* ── Topbar and sidebar ─────────────────────────────────────────────────── */

/* Solid on purpose: a backdrop-filter here makes Firefox open the topbar menus (New, the
   bell) behind the page body. */
.fi-topbar {
    background-color: var(--crm-surface);
    box-shadow: inset 0 -1px 0 var(--crm-border);
}

.dark .fi-topbar {
    background-color: var(--gray-900);
}

/* Topbar menus always paint above the page. */
.fi-topbar-ctn {
    z-index: 40;
}

.fi-topbar .fi-dropdown-panel {
    z-index: 50;
}

.fi-topbar-end {
    column-gap: 0.5rem;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .crm-density-toggle {
    margin: 0;
    border-radius: var(--crm-radius-control);
}

.fi-topbar .fi-icon-btn:hover,
.fi-topbar .crm-density-toggle:hover {
    background-color: var(--crm-surface-sunken);
}

/* Organization switcher (App\Modules\Organizations\Livewire\OrganizationSwitcher): set off from the bell, whose
   unread counter sits over its right edge, and from the New button. */
.crm-org-switcher:has(.crm-org-switcher-trigger) {
    margin-inline: 0.75rem;
}

.crm-org-switcher-trigger {
    max-width: 16rem;
}

.crm-org-switcher-trigger .fi-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-org-switcher-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
}

.crm-org-switcher-heading {
    font-size: 0.75rem;
    color: var(--crm-muted);
}

.crm-org-switcher-options {
    display: grid;
    gap: 0.5rem;
    max-height: 18rem;
    overflow-y: auto;
}

.crm-org-switcher-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
}

.crm-org-switcher-option .fi-checkbox-input {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.crm-org-switcher-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--crm-border);
}

/* The density toggle only shows on pages with a list to compact. */
.crm-density-toggle {
    display: none;
}

body:has(.fi-resource-list-records-page) .crm-density-toggle {
    display: flex;
}

/* Sidebar and topbar form one white frame around the grey canvas, so the work area reads
   as its own surface. Same fill and hairline as the topbar; no shadow. */
.fi-sidebar {
    background-color: var(--crm-surface);
}

.dark .fi-sidebar {
    background-color: var(--gray-900);
}

@media (min-width: 1024px) {
    .fi-sidebar {
        box-shadow: inset -1px 0 0 var(--crm-border);
    }
}

.fi-sidebar .fi-sidebar-item-btn,
.fi-sidebar .fi-sidebar-group-btn {
    transition: background-color 0.12s ease, color 0.12s ease;
}

.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--crm-surface-sunken);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background-color: var(--crm-selected-bg);
}

.fi-sidebar .fi-sidebar-footer {
    border-top: 1px solid var(--crm-border-subtle);
}

.fi-sidebar .fi-user-menu-trigger {
    border-radius: var(--crm-radius-control);
}

/* On the white sidebar the search field sits slightly recessed, like the canvas. */
.fi-sidebar .fi-global-search .fi-input-wrp {
    background-color: var(--crm-surface-muted);
}

.fi-sidebar .fi-global-search .fi-input-wrp:focus-within {
    background-color: var(--crm-surface);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.fi-btn {
    border-radius: var(--crm-radius-control);
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.06s ease;
}

.fi-btn:not(.fi-disabled):not([disabled]):active {
    transform: translateY(0.5px);
}

/* Solid colour buttons (primary, success, warning, info): a light-to-dark wash and an inner highlight. */
.fi-btn.fi-color:not(.fi-outlined):not(label):not(.fi-color-gray):not(.fi-color-danger) {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 55%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 2px rgb(24 24 27 / 0.16);
}

.fi-btn.fi-color:not(.fi-outlined):not(label):not(.fi-color-gray):not(.fi-color-danger):hover {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 2px 6px -1px rgb(24 24 27 / 0.28);
}

.dark .fi-btn.fi-color:not(.fi-outlined):not(label):not(.fi-color-gray):not(.fi-color-danger) {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 1px 2px rgb(0 0 0 / 0.4);
}

/* Secondary (gray) buttons: a crisp edge that darkens on hover. */
.fi-btn.fi-color-gray:not(.fi-outlined):not(label) {
    box-shadow: 0 0 0 1px var(--crm-input-border), var(--crm-shadow-raised);
}

.fi-btn.fi-color-gray:not(.fi-outlined):not(label):hover {
    box-shadow: 0 0 0 1px var(--crm-input-border-hover), var(--crm-shadow-raised);
}

.fi-btn.fi-outlined {
    box-shadow: inset 0 0 0 1px var(--crm-input-border);
}

.fi-btn.fi-outlined:hover {
    box-shadow: inset 0 0 0 1px var(--crm-input-border-hover);
}

.fi-btn.fi-outlined.fi-color:not(.fi-color-gray) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-600) 45%, transparent);
}

.fi-icon-btn {
    border-radius: var(--crm-radius-control);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.fi-icon-btn:hover {
    background-color: var(--crm-surface-sunken);
}

/* One focus ring for every control. */
.fi-btn:not(.fi-disabled):not([disabled]):focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible,
.fi-tabs-item:focus-visible,
.fi-sidebar-item-btn:focus-visible,
.fi-sidebar-group-btn:focus-visible,
.fi-dropdown-list-item:focus-visible,
.fi-pagination-item-btn:focus-visible,
.fi-ta-header-cell-sort-btn:focus-visible,
.fi-checkbox-input:focus-visible,
.fi-radio-input:focus-visible,
.crm-density-toggle:focus-visible,
button[role="switch"]:focus-visible {
    outline: none !important;
    box-shadow: var(--crm-focus-ring) !important;
}

/* Quick-filter chips (QuickFilters): small pills; the active one is filled. */
.fi-btn.crm-chip {
    border-radius: 9999px;
    padding-inline: 0.625rem;
}

.fi-btn.crm-chip.fi-outlined {
    background-color: var(--crm-surface);
    box-shadow: inset 0 0 0 1px var(--crm-input-border);
}

.fi-btn.crm-chip.fi-outlined:hover {
    background-color: var(--crm-surface-muted);
    box-shadow: inset 0 0 0 1px var(--crm-input-border-hover);
}

.dark .fi-btn.crm-chip.fi-outlined {
    background-color: transparent;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */

.fi-input-wrp {
    border-radius: var(--crm-radius-control);
    background-color: var(--crm-surface);
    box-shadow: 0 0 0 1px var(--crm-input-border), var(--crm-shadow-raised);
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.dark .fi-input-wrp {
    background-color: rgb(255 255 255 / 0.04);
}

.fi-input-wrp:not(.fi-disabled):not(.fi-invalid):hover {
    box-shadow: 0 0 0 1px var(--crm-input-border-hover), var(--crm-shadow-raised);
}

.fi-input-wrp:not(.fi-disabled):not(.fi-invalid):focus-within {
    box-shadow: 0 0 0 1px var(--primary-500), var(--crm-ring);
}

.fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px var(--danger-500);
}

.fi-input-wrp.fi-invalid:focus-within {
    box-shadow: 0 0 0 1px var(--danger-500), 0 0 0 3px color-mix(in srgb, var(--danger-500) 22%, transparent);
}

.fi-input-wrp.fi-disabled {
    background-color: var(--crm-surface-muted);
    box-shadow: 0 0 0 1px var(--crm-border-subtle);
}

.fi-input,
.fi-select-input,
.fi-fo-textarea {
    font-size: var(--crm-text-body);
}

.fi-fo-field-wrp-error-message {
    font-size: var(--crm-text-meta);
}

.fi-checkbox-input:not(:checked):not(:indeterminate),
.fi-radio-input:not(:checked) {
    box-shadow: 0 0 0 1px var(--crm-input-border-hover);
}

/* ── Surfaces: sections, tables, stat cards, widgets ───────────────────── */

.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section.fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-fo-builder-item {
    border-radius: var(--crm-radius-card);
    box-shadow: 0 0 0 1px var(--crm-card-edge), var(--crm-shadow-card);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header,
.fi-ta-header {
    padding-block: 0.875rem;
}

.fi-section-header-heading {
    letter-spacing: -0.01em;
}

.fi-section-header > .fi-icon {
    color: var(--primary-500);
}

.fi-wi-stats-overview-stat {
    padding: 1.25rem 1.375rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: var(--crm-text-meta);
    font-weight: 500;
}

.fi-wi-stats-overview-stat-description {
    font-size: var(--crm-text-meta);
}

/* ── Tabs: a segmented control ──────────────────────────────────────────── */

/* Left-aligned under the page title (Filament centres them), never wider than the page. */
.fi-tabs:not(.fi-contained) {
    margin-inline: 0;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 10px;
    background-color: var(--crm-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--crm-border-subtle);
}

.dark .fi-tabs:not(.fi-contained) {
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.fi-tabs:not(.fi-contained) .fi-tabs-item {
    border-radius: 7px;
    padding: 0.375rem 0.75rem;
    transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.fi-tabs:not(.fi-contained) .fi-tabs-item:not(.fi-active):hover {
    background-color: color-mix(in srgb, var(--crm-surface) 55%, transparent);
}

.fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active {
    background-color: var(--crm-surface);
    box-shadow: 0 1px 2px rgb(24 24 27 / 0.1), 0 0 0 1px rgb(24 24 27 / 0.04);
}

.dark .fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active {
    background-color: var(--gray-800);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

.fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--crm-text-strong);
}

.fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active > .fi-icon {
    color: var(--primary-600);
}

.dark .fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active > .fi-icon {
    color: var(--primary-300);
}

/* List pages: tabs sit under the title, not centred. */
.fi-resource-list-records-page .fi-tabs:not(.fi-contained) {
    margin-inline: 0 auto;
}

/* ── Dropdowns and modals ───────────────────────────────────────────────── */

.fi-dropdown-panel {
    border-radius: 10px;
    box-shadow: var(--crm-shadow-pop);
}

.fi-dropdown-list {
    padding: 0.25rem;
}

.fi-dropdown-list-item {
    border-radius: 6px;
}

.fi-dropdown-list-item-label {
    font-size: var(--crm-text-body);
}

.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
    border-radius: var(--crm-radius-modal);
    box-shadow: var(--crm-shadow-modal);
}

.fi-modal > .fi-modal-close-overlay {
    background-color: rgb(24 24 27 / 0.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.dark .fi-modal > .fi-modal-close-overlay {
    background-color: rgb(0 0 0 / 0.6);
}

.fi-modal-heading {
    letter-spacing: -0.01em;
}

.fi-modal-description {
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

/* ── Tables (every table) ───────────────────────────────────────────────── */

.fi-ta-header-toolbar {
    padding-block: 0.625rem;
    min-width: 0;
}

/* One row: the bulk-action bar (neutral buttons + "More actions", BulkActionBar) on the left,
   search / filters / column toggle pushed to the right and never mixed with the actions. */
.fi-ta-header-toolbar > .fi-ta-actions:first-of-type {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

.fi-ta-header-toolbar > :not(.fi-ta-actions:first-of-type) {
    margin-inline-start: auto;
}

/* Phones: the bulk bar collapses to the single "More actions" menu button; the toolbar may wrap. */
@media (max-width: 639.98px) {
    .fi-ta-header-toolbar {
        flex-wrap: wrap;
    }

    .fi-ta-header-toolbar > .fi-ta-actions:first-of-type > .fi-btn:not(.crm-bulk-more) {
        display: none;
    }
}

.fi-ta-table > thead > tr > * {
    background-color: var(--crm-table-head-bg);
}

.fi-ta-header-cell {
    padding-block: 0.625rem;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

.fi-ta-header-cell.fi-ta-header-cell-sorted {
    color: var(--crm-text-strong);
}

.fi-ta-cell.fi-ta-selection-cell,
.fi-ta-cell:has(> .fi-ta-record-checkbox),
.fi-ta-cell:has(> .fi-ta-actions) {
    padding-block: var(--crm-cell-pad);
}

.fi-ta-row {
    transition: background-color 0.1s ease;
}

.fi-ta-row.fi-clickable:hover {
    background-color: var(--crm-row-hover);
}

.fi-ta-row.fi-selected:not(.fi-striped),
.fi-ta-row.fi-selected.fi-clickable:hover {
    background-color: var(--crm-row-selected);
}

.fi-ta-cell .fi-ta-placeholder {
    color: var(--crm-text-faint);
}

/* Quiet links: a row is scanned by eye, so names read as text and turn primary on hover. */
.fi-ta-table .fi-ta-text-item.fi-color-primary {
    color: var(--crm-text-strong);
}

.fi-ta-table .fi-ta-col-has-column-url .fi-ta-text-item {
    transition: color 0.1s ease;
}

.fi-ta-table .fi-ta-col-has-column-url:hover .fi-ta-text-item,
.fi-ta-table .fi-ta-col-has-column-url:focus-visible .fi-ta-text-item {
    color: var(--primary-600);
}

.dark .fi-ta-table .fi-ta-col-has-column-url:hover .fi-ta-text-item,
.dark .fi-ta-table .fi-ta-col-has-column-url:focus-visible .fi-ta-text-item {
    color: var(--primary-300);
}

.fi-ta-table .fi-ta-text-description {
    font-size: var(--crm-text-label);
}

/* Selection bar: tinted with the brand colour. */
.fi-ta-selection-indicator {
    background-color: var(--crm-accent-bg);
}

.fi-ta-selection-indicator > :nth-child(1) {
    color: var(--crm-accent-text);
}

.fi-ta-filter-indicators {
    background-color: var(--crm-surface-muted);
}

.fi-pagination-records-per-page-select-ctn .fi-input-wrp {
    box-shadow: 0 0 0 1px var(--crm-input-border);
}

.fi-pagination-items {
    border-radius: var(--crm-radius-control);
    box-shadow: 0 0 0 1px var(--crm-input-border);
}

.fi-pagination-overview {
    color: var(--crm-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Column manager and filters dropdowns. */
.fi-ta-filters-dropdown .fi-ta-filters,
.fi-ta-col-manager-dropdown .fi-ta-col-manager {
    padding: 1.25rem;
}

/* ── Tables on list pages: the frame scrolls, the edges stay ────────────── */

.fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) {
    max-height: var(--crm-list-frame-max, none);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table > thead > tr > * {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: inset 0 -1px 0 var(--crm-border);
}

/* The selection column stays put while a wide table scrolls sideways (above the stacked mobile
   layout). Row actions are not pinned: lists carry many inline actions, so a pinned actions
   cell would cover the data; the row's actions are reached by scrolling, as before. */
@media (min-width: 640px) {
    .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-selection-cell,
    .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-cell:has(> .fi-ta-record-checkbox) {
        position: sticky;
        inset-inline-start: 0;
        z-index: 2;
        background-color: var(--crm-surface);
        box-shadow: inset -1px 0 0 var(--crm-border-subtle);
    }

    .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table > thead > tr > .fi-ta-selection-cell {
        z-index: 4;
        background-color: var(--crm-table-head-bg);
    }

    .fi-resource-list-records-page .fi-ta-table .fi-ta-row.fi-clickable:hover > .fi-ta-selection-cell,
    .fi-resource-list-records-page .fi-ta-table .fi-ta-row.fi-clickable:hover > .fi-ta-cell:has(> .fi-ta-record-checkbox) {
        background-color: var(--crm-row-hover);
    }

    .fi-resource-list-records-page .fi-ta-table .fi-ta-row.fi-selected > .fi-ta-selection-cell,
    .fi-resource-list-records-page .fi-ta-table .fi-ta-row.fi-selected > .fi-ta-cell:has(> .fi-ta-record-checkbox) {
        background-color: var(--crm-row-selected);
    }

    .dark .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-selection-cell,
    .dark .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-cell:has(> .fi-ta-record-checkbox) {
        background-color: var(--gray-900);
    }
}

/* ── Sign-in ────────────────────────────────────────────────────────────── */

.fi-simple-layout {
    background:
        radial-gradient(60rem 36rem at 8% -12%, color-mix(in srgb, var(--primary-500) 14%, transparent), transparent 60%),
        radial-gradient(48rem 30rem at 108% 112%, color-mix(in srgb, var(--primary-400) 12%, transparent), transparent 60%),
        var(--crm-canvas);
}

.fi-simple-main {
    border-radius: 20px;
    box-shadow: var(--crm-shadow-modal);
    padding: 2.5rem;
}

.fi-simple-header .fi-logo {
    height: 3.25rem !important;
    margin-bottom: 1.25rem;
}

.fi-simple-header-heading {
    font-size: 1.375rem;
    letter-spacing: -0.015em;
}

.fi-simple-page-content .fi-btn.fi-color-primary {
    padding-block: 0.625rem;
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-ta-row,
    .fi-input-wrp,
    .fi-tabs-item,
    .fi-wi-stats-overview-stat {
        transition: none;
    }

    .fi-wi-stats-overview-stat:hover {
        transform: none;
    }
}

/* Phones and tablets: the closed drawer sits fully off-screen. Filament hides it with
   translate: -100%; the extra 4px also hides its shadow (a sliver showed at the edge).
   A bare "-4px" here once replaced Filament's -100% and left the drawer over the page. */
@media (max-width: 1023px) {
    .fi-sidebar:not(.fi-sidebar-open) {
        translate: calc(-100% - 4px) 0;
    }
}

/* ── List pages: breadcrumbs are noise ("Customers › List") ─────────────── */
.fi-resource-list-records-page .fi-breadcrumbs {
    display: none;
}

/* ── Rows: one voice ─────────────────────────────────────────────────────── */
/* Emphasis in a row is medium weight at body size; never bold or large. Numbers and names
   in brand or success colour read as plain text; only warning / danger text keeps its colour. */
.fi-ta-table .fi-ta-text-item.fi-font-bold,
.fi-ta-table .fi-ta-text-item.fi-font-semibold,
.fi-ta-table .fi-ta-text-item.fi-font-extrabold,
.fi-ta-table .fi-ta-text-item.fi-font-black {
    font-weight: 500;
}

.fi-ta-table .fi-ta-text-item.fi-size-lg,
.fi-ta-table .fi-ta-text-item.fi-size-md {
    font-size: var(--crm-text-body);
    line-height: 1.5rem;
}

.fi-ta-table .fi-ta-text-item.fi-color-success,
.fi-ta-table .fi-ta-text-item.fi-color-info {
    color: var(--crm-text-strong);
}

/* Decorative icons beside names (a shop, a person, a pin) add no meaning in a scanned row. */
.fi-ta-table .fi-ta-text-item > .fi-icon,
.fi-ta-table .fi-ta-text-item > span:not(.fi-badge) > .fi-icon {
    display: none;
}

/* Money and quantities line up on the decimal point. */
.fi-ta-table .fi-ta-text.fi-numeric,
.fi-ta-table .fi-ta-cell.fi-align-end .fi-ta-text {
    font-variant-numeric: tabular-nums;
}

/* ── Pinned row actions: View · Edit · ⋯ (HasCompactRowActions) ──────────── */
@media (min-width: 640px) {
    .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-cell:has(> .fi-ta-actions),
    .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-actions-header-cell {
        position: sticky;
        inset-inline-end: 0;
        z-index: 2;
        background-color: var(--crm-surface);
        box-shadow: inset 1px 0 0 var(--crm-border-subtle);
    }

    .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table > thead > tr > .fi-ta-actions-header-cell {
        z-index: 4;
        background-color: var(--crm-table-head-bg);
    }

    .fi-resource-list-records-page .fi-ta-table .fi-ta-row.fi-clickable:hover > .fi-ta-cell:has(> .fi-ta-actions) {
        background-color: var(--crm-row-hover);
    }

    .fi-resource-list-records-page .fi-ta-table .fi-ta-row.fi-selected > .fi-ta-cell:has(> .fi-ta-actions) {
        background-color: var(--crm-row-selected);
    }

    .dark .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-cell:has(> .fi-ta-actions) {
        background-color: var(--gray-900);
    }
}

.fi-ta-table .fi-ta-actions {
    gap: 0.75rem;
}

.fi-ta-table .fi-ta-actions .fi-link {
    font-weight: 500;
}

.fi-ta-table .fi-ta-actions .crm-row-more .fi-icon-btn {
    color: var(--crm-muted);
}

/* ── Identity cell: avatar, name, one quiet line (IdentityColumn) ──────────── */
.crm-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 16rem; /* the name column never collapses to an ellipsis to make room for data columns */
}

.crm-identity-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.crm-identity-text {
    display: grid;
    gap: 0.0625rem;
    min-width: 0;
}

.crm-identity-title {
    font-weight: 500;
    color: var(--crm-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 26rem;
}

.crm-identity-sub {
    font-size: var(--crm-text-label);
    color: var(--crm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}

html.crm-dense .crm-identity-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4375rem;
    font-size: 0.625rem;
}

/* Compact rows are one line each (~40px), so a 13-inch screen shows twice the rows: the
   second lines (identity subtitle, column descriptions) give way, and the controls inside a
   row (inline selects, icon buttons, badges) shrink to the text height. */
html.crm-dense .crm-identity-sub,
html.crm-dense .fi-ta-table .fi-ta-text-description {
    display: none;
}

html.crm-dense .fi-ta-table .fi-ta-text {
    line-height: 1.25rem;
}

html.crm-dense .fi-ta-table .fi-ta-text-item:has(.fi-badge) {
    line-height: 1;
}

html.crm-dense .fi-ta-table .fi-ta-actions .fi-icon-btn {
    width: 1.75rem;
    height: 1.75rem;
}

html.crm-dense .fi-ta-table .fi-ta-select .fi-input-wrp,
html.crm-dense .fi-ta-table .fi-ta-select .fi-select-input {
    min-height: 1.75rem;
    height: 1.75rem;
    padding-block: 0;
}

html.crm-dense .fi-ta-table .fi-ta-select {
    padding-block: 0.125rem;
}

/* ── Row quick actions: icon buttons, then ⋯ ─────────────────────────────── */
.fi-ta-table .fi-ta-actions {
    gap: 0.125rem;
}

/* The pinned actions column takes only what its icons need, so data columns keep the room. */
.fi-ta-table .fi-ta-cell:has(> .fi-ta-actions) {
    padding-inline: 0.5rem;
}

.fi-ta-table .fi-ta-actions .fi-icon-btn {
    margin: 0;
    width: 2rem;
    height: 2rem;
    color: var(--crm-muted);
}

.fi-ta-table .fi-ta-actions .fi-icon-btn:hover {
    color: var(--primary-600);
    background-color: var(--crm-accent-bg);
}

.dark .fi-ta-table .fi-ta-actions .fi-icon-btn:hover {
    color: var(--primary-300);
}

.fi-ta-table .fi-ta-actions .fi-icon-btn.fi-color-danger:hover {
    color: var(--danger-600);
    background-color: var(--crm-danger-bg);
}

/* ── Header: create · Views · More, and the List | Board switch ──────────── */
.fi-header-actions-ctn,
.fi-header-actions-ctn > .fi-ac {
    gap: var(--crm-switch-gap, 0.5rem);
}

.fi-ac > .fi-btn.crm-switch-item {
    border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--crm-input-border);
    background-color: var(--crm-surface-muted);
    color: var(--crm-muted);
}

.fi-ac > .fi-btn.crm-switch-item + .fi-btn.crm-switch-item {
    margin-inline-start: calc(-1 * var(--crm-switch-gap, 0.5rem) - 1px);
}

.fi-ac > .fi-btn.crm-switch-item > .fi-icon {
    color: currentColor;
}

.fi-ac > .fi-btn.crm-switch-item.is-first {
    border-start-start-radius: var(--crm-radius-control);
    border-end-start-radius: var(--crm-radius-control);
}

.fi-ac > .fi-btn.crm-switch-item.is-last {
    border-start-end-radius: var(--crm-radius-control);
    border-end-end-radius: var(--crm-radius-control);
}

.fi-ac > .fi-btn.crm-switch-item:hover {
    color: var(--crm-text-strong);
}

.fi-ac > .fi-btn.crm-switch-item.is-active {
    position: relative;
    z-index: 1;
    background-color: var(--crm-surface);
    color: var(--crm-text-strong);
    box-shadow: inset 0 0 0 1px var(--crm-input-border-hover), var(--crm-shadow-raised);
}

.dark .fi-ac > .fi-btn.crm-switch-item {
    background-color: rgb(255 255 255 / 0.04);
}

.dark .fi-ac > .fi-btn.crm-switch-item.is-active {
    background-color: var(--gray-800);
}


/* ── Page rhythm: the first row is on screen, not below the fold ───────────── */
.fi-page-header-main-ctn {
    padding-block: 1.25rem 2rem;
    row-gap: 1rem;
}

.fi-page-content {
    row-gap: 1rem;
}

.fi-header-heading {
    font-size: 1.375rem;
}

.fi-ta-header .fi-ta-actions:has(.crm-chip) {
    margin-inline-start: 0;
    gap: 0.375rem;
}

/* Inline selects in rows (lead stage, priority) read as values, not form fields. */
.fi-ta-table .fi-ta-select .fi-input-wrp {
    background-color: transparent;
    box-shadow: none;
}

.fi-ta-table .fi-ta-select .fi-input-wrp:hover,
.fi-ta-table .fi-ta-select .fi-input-wrp:focus-within {
    background-color: var(--crm-surface);
    box-shadow: 0 0 0 1px var(--crm-input-border-hover);
}

.fi-ta-table .fi-ta-select .fi-select-input {
    font-weight: 500;
    padding-inline-start: 0.5rem;
}

:root {
    --crm-row-pad: 0.625rem;
}

/* A row menu opens inside its pinned cell (each sticky cell is a stacking context, painted in
   row order). While a menu is open, its cell is lifted above the rows below. */
.fi-ta-table .fi-ta-cell:has(.fi-dropdown-panel:not([style*="display: none"])),
.fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-cell:has(.fi-dropdown-panel:not([style*="display: none"])) {
    z-index: 30;
}

/* ── Document pages: hero card and header (HasRecordHero) ──────────────────── */
.crm-record-header {
    display: grid;
    gap: 1rem;
}

.crm-customer-hero.crm-record-hero::before { background: var(--primary-500); }
.crm-customer-hero.crm-record-tone-success::before { background: var(--success-500); }
.crm-customer-hero.crm-record-tone-warning::before { background: var(--warning-500); }
.crm-customer-hero.crm-record-tone-danger::before { background: var(--danger-500); }
.crm-customer-hero.crm-record-tone-gray::before { background: var(--gray-400); }

.crm-record-hero .crm-customer-name {
    font-size: 1.125rem;
}

.crm-record-party {
    transition: color 0.1s ease;
}

.crm-record-party:hover {
    color: var(--primary-600);
}

.dark .crm-record-party:hover {
    color: var(--primary-300);
}

/* "Quotes › Q/26-27/0012 › View": the last crumb says nothing. */
.fi-resource-view-record-page .fi-breadcrumbs-item:last-child {
    display: none;
}

/* Sticky Save / Cancel bar on forms (Filament's fi-sticky), in the app's surface language. */
.fi-sc-actions.fi-sticky .fi-ac {
    background-color: var(--crm-surface);
    box-shadow: var(--crm-shadow-pop);
    border-radius: var(--crm-radius-card);
}

/* ── Sidebar scrollbar: only while the pointer is over the navigation ───── */
.fi-sidebar .fi-sidebar-nav {
    scrollbar-width: none;
}

.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar {
    width: 0;
}

.fi-sidebar .fi-sidebar-nav:hover {
    scrollbar-width: thin;
}

.fi-sidebar .fi-sidebar-nav:hover::-webkit-scrollbar {
    width: 4px;
}

/* ── Brand logo on the dark topbar: a light chip keeps it legible ───────── */
.dark .fi-topbar .fi-logo {
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    box-sizing: content-box;
}

/* ── One toolbar row: quick-filter chips on the left, search · filters · columns on the right ── */
.fi-ta-header-ctn:has(.crm-chip) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    border-bottom: 1px solid var(--crm-border);
    padding: 0.625rem 1.5rem;
}

.fi-ta-header-ctn:has(.crm-chip) > .fi-ta-header {
    flex: 1 1 32rem;
    min-width: 0;
    padding: 0;
    border: 0;
}

.fi-ta-header-ctn:has(.crm-chip) > .fi-ta-header .fi-ta-actions {
    margin: 0;
    justify-content: flex-start;
    gap: 0.375rem;
}

.fi-ta-header-ctn:has(.crm-chip) > .fi-ta-header-toolbar {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
}

/* The toolbar's empty left slot (no bulk actions shown) takes no room. */
.fi-ta-header-ctn:has(.crm-chip) > .fi-ta-header-toolbar > .fi-ta-actions:empty {
    display: none;
}

/* Pinned actions column: a soft edge shows the row continues underneath (scroll sideways). */
@media (min-width: 640px) {
    .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-cell:has(> .fi-ta-actions),
    .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-actions-header-cell {
        box-shadow: inset 1px 0 0 var(--crm-border-subtle), -12px 0 12px -10px rgb(24 24 27 / 0.12);
    }

    .dark .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-cell:has(> .fi-ta-actions),
    .dark .fi-resource-list-records-page .fi-ta-content-ctn:not(.fi-wi *) .fi-ta-table .fi-ta-actions-header-cell {
        box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.06), -12px 0 12px -10px rgb(0 0 0 / 0.6);
    }
}

/* Inline selects in rows (lead stage, priority) stay compact. */
.fi-ta-table .fi-ta-select {
    min-width: 8.5rem;
    max-width: 10rem;
}

/* Long names in rows truncate instead of widening the table (full text in the record). */
.fi-ta-table .fi-ta-text:not(.fi-wrapped) .fi-ta-text-item {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Record peek panel ── */
/* Quick view side panel (PeekCustomerAction, filament/actions/customer-peek): calm and dense,
   one column of facts, then tasks and recent activity. Tokens only. */
.crm-peek {
    display: grid;
    gap: 1.25rem;
    font-size: var(--crm-text-meta);
    color: var(--crm-text-body, inherit);
}

.crm-peek-ident {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.crm-peek-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--crm-radius-control, 0.625rem);
    background: var(--crm-accent-bg);
    color: var(--crm-accent-text);
    font-size: var(--crm-text-meta);
    font-weight: 600;
}

.crm-peek-ident-text {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.crm-peek-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.crm-peek-meta,
.crm-peek-sub,
.crm-peek-empty {
    color: var(--crm-muted);
}

/* An activity's subject (the quote, invoice or order) sits on its own quiet second line. */
.crm-peek-subline {
    display: block;
    font-size: var(--crm-text-meta);
}

.crm-peek-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.crm-peek-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-pill, 999px);
    color: var(--crm-text-strong);
    background: var(--crm-surface);
}

.crm-peek-chip:hover {
    border-color: var(--crm-border-strong);
    background: var(--crm-row-hover);
}

.crm-peek-chip:focus-visible {
    outline: 2px solid var(--crm-focus);
    outline-offset: 2px;
}

.crm-peek-ico {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--crm-text-faint);
}

.crm-peek-truncate {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-peek-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--crm-border-subtle);
    border-radius: var(--crm-radius-card);
    background: var(--crm-border-subtle);
}

.crm-peek-fact {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    background: var(--crm-surface);
}

.crm-peek-fact dt {
    font-size: var(--crm-text-label);
    color: var(--crm-text-faint);
}

.crm-peek-fact dd {
    margin: 0;
    font-size: var(--crm-text-body);
    font-weight: 600;
    color: var(--crm-text-strong);
    font-variant-numeric: tabular-nums;
}

.crm-peek-fact .crm-peek-hint {
    font-size: var(--crm-text-label);
    font-weight: 400;
    color: var(--crm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-peek-tone-danger dd:not(.crm-peek-hint) { color: var(--crm-danger-text); }
.crm-peek-tone-warning dd:not(.crm-peek-hint) { color: var(--crm-warning-text); }
.crm-peek-tone-success dd:not(.crm-peek-hint) { color: var(--crm-success-text); }

.crm-peek-section {
    display: grid;
    gap: 0.5rem;
}

.crm-peek-heading {
    margin: 0;
    font-size: var(--crm-text-body);
    font-weight: 600;
    color: var(--crm-text-strong);
}

.crm-peek-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-peek-item {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.625rem;
    padding: 0.4375rem 0;
    border-top: 1px solid var(--crm-border-subtle);
}

.crm-peek-item:first-child {
    border-top: 0;
}

.crm-peek-item-ico {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    color: var(--crm-text-faint);
}

.crm-peek-color-primary { color: var(--primary-500); }
.crm-peek-color-success { color: var(--success-500); }
.crm-peek-color-danger { color: var(--danger-500); }
.crm-peek-color-warning { color: var(--warning-500); }
.crm-peek-color-info { color: var(--info-500); }

.crm-peek-item-text {
    display: grid;
    min-width: 0;
    color: var(--crm-text-strong);
}

.crm-peek-item-time {
    font-size: var(--crm-text-label);
    color: var(--crm-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.crm-peek-late {
    color: var(--crm-danger-text);
}

@media (max-width: 420px) {
    .crm-peek-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Customer Board card: a click opens the quick view; the title link and the icon still open the record. */
.kb-card-peek {
    cursor: pointer;
}

.kb-card-title-btn {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
    font: inherit;
    font-weight: 600;
    color: var(--crm-text-strong);
}

.kb-card-title-btn:hover {
    text-decoration: underline;
}

.kb-card-title-btn:focus-visible,
.kb-card-open:focus-visible {
    outline: 2px solid var(--crm-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.kb-card-open {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    color: var(--crm-text-faint);
}

.kb-card-open:hover {
    color: var(--crm-text-strong);
    background: var(--crm-row-hover);
}

/* ── Workflow buttons and send summary ── */
/* The summary at the top of the Send / Approve & send dialogs (filament/actions/send-summary). */
.crm-send-summary {
    display: grid;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-control);
    background: var(--crm-surface-muted);
    font-size: var(--crm-text-meta);
    color: var(--crm-text);
}

.crm-send-summary-doc {
    margin: 0;
    font-size: var(--crm-text-body);
    font-weight: 600;
    color: var(--crm-text-strong);
    font-variant-numeric: tabular-nums;
}

.crm-send-summary-kind {
    margin-inline-end: 0.375rem;
    font-weight: 500;
    color: var(--crm-muted);
}

.crm-send-summary-recipients {
    display: grid;
    gap: 0.25rem;
    margin: 0;
}

.crm-send-summary-recipients > div {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.5rem;
}

.crm-send-summary-recipients dt {
    color: var(--crm-muted);
}

.crm-send-summary-recipients dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.crm-send-summary-missing {
    color: var(--crm-danger-text);
}

.crm-send-summary-attachment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.crm-send-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-pill);
    background: var(--crm-surface);
    color: var(--crm-text-strong);
    overflow-wrap: anywhere;
}

.crm-send-summary-chip-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--crm-muted);
}

.crm-send-summary-link {
    color: var(--crm-accent-text);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.crm-send-summary-link:focus-visible {
    outline: 2px solid var(--crm-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.crm-send-summary-note {
    color: var(--crm-muted);
}

/* ── Document pages: tabs, facts, sections ── */
/* Quotes, orders, invoices (later purchase orders and bills): hero, then Overview / Document /
   Activity tabs (components/crm/doc). One quiet card language; labels sentence case, figures tabular. */

/* Hero card on document pages: no coloured stripes, sentence-case tile labels. */
.crm-customer-hero.crm-record-hero::before {
    display: none;
}

.crm-customer-hero.crm-record-hero .crm-customer-tile {
    border-top-width: 1px;
    border-top-color: var(--crm-border);
}

.crm-customer-hero.crm-record-hero .crm-customer-tile-label {
    font-size: var(--crm-text-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--crm-muted);
}

.crm-customer-hero.crm-record-hero .crm-customer-tile-value {
    font-variant-numeric: tabular-nums;
}

.crm-doc-tabs.fi-tabs {
    margin-inline: 0;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.crm-doc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .crm-doc-grid {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    }
}

.crm-doc-main,
.crm-doc-rail {
    display: grid;
    gap: 1rem;
    align-content: start;
    min-width: 0;
}

.crm-doc-section {
    min-width: 0;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-card);
    background: var(--crm-surface);
}

.crm-doc-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--crm-border-subtle);
}

.crm-doc-section-title {
    margin: 0;
    font-size: var(--crm-text-section);
    font-weight: 600;
    line-height: 1.4;
    color: var(--crm-text-strong);
}

.crm-doc-section-aside {
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
    font-variant-numeric: tabular-nums;
}

.crm-doc-section-body {
    padding: 0.75rem 1rem;
}

.crm-doc-section-body.is-flush {
    padding: 0;
}

.crm-doc-section-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid var(--crm-border-subtle);
}

.crm-doc-empty {
    margin: 0;
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

.crm-doc-pad {
    padding: 0.75rem 1rem;
}

.crm-doc-link {
    color: var(--crm-accent-text);
    text-decoration: none;
    border-radius: 2px;
}

.crm-doc-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.crm-doc-link:focus-visible {
    outline: 2px solid var(--crm-focus);
    outline-offset: 2px;
}

/* Facts: label / value rows; blanks are never rendered. */
.crm-doc-facts {
    display: grid;
    margin: 0;
    font-size: var(--crm-text-meta);
    line-height: 1.45;
}

.crm-doc-fact {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.3125rem 0;
}

.crm-doc-fact dt {
    color: var(--crm-muted);
}

.crm-doc-fact dd {
    margin: 0;
    color: var(--crm-text-strong);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.crm-doc-fact-value + .crm-doc-fact-value {
    margin-top: 0.125rem;
}

.crm-doc-fact-hint {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--crm-muted);
}

.crm-doc-facts dd.crm-doc-tone-danger, .crm-doc-totals dd.crm-doc-tone-danger { color: var(--crm-danger-text); }
.crm-doc-facts dd.crm-doc-tone-warning, .crm-doc-totals dd.crm-doc-tone-warning { color: var(--crm-warning-text); }
.crm-doc-facts dd.crm-doc-tone-success, .crm-doc-totals dd.crm-doc-tone-success { color: var(--crm-success-text); }
.crm-doc-facts dd.crm-doc-tone-muted, .crm-doc-totals dd.crm-doc-tone-muted { color: var(--crm-muted); }

/* Line items. */
.crm-doc-items-scroll {
    overflow-x: auto;
}

.crm-doc-items {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--crm-text-meta);
    font-variant-numeric: tabular-nums;
}

.crm-doc-items th {
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: var(--crm-text-label);
    font-weight: 500;
    color: var(--crm-muted);
    white-space: nowrap;
    background: var(--crm-surface-muted);
    border-bottom: 1px solid var(--crm-border-subtle);
}

.crm-doc-items td {
    padding: 0.625rem 1rem;
    vertical-align: top;
    color: var(--crm-text);
    border-bottom: 1px solid var(--crm-border-subtle);
}

.crm-doc-items tbody tr:last-child td {
    border-bottom: 0;
}

.crm-doc-items .is-num {
    text-align: right;
    white-space: nowrap;
}

.crm-doc-items th:first-child,
.crm-doc-items td:first-child {
    padding-inline-start: 1rem;
}

.crm-doc-items td.crm-doc-amount {
    font-weight: 500;
    color: var(--crm-text-strong);
}

.crm-doc-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 12rem;
}

.crm-doc-item-thumb {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 6px;
    object-fit: cover;
    background: var(--crm-surface-sunken);
}

.crm-doc-item-text {
    min-width: 0;
}

.crm-doc-item-name {
    font-weight: 500;
}

span.crm-doc-item-name {
    color: var(--crm-muted);
}

.crm-doc-item-desc {
    margin-top: 0.125rem;
    color: var(--crm-text);
    max-width: 60ch;
}

.crm-doc-item-meta {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--crm-muted);
}

.crm-doc-unit {
    margin-inline-start: 0.125rem;
    color: var(--crm-muted);
}

/* Totals. */
.crm-doc-totals {
    display: grid;
    gap: 0.25rem;
    width: 100%;
    max-width: 22rem;
    margin: 0;
    font-size: var(--crm-text-meta);
    font-variant-numeric: tabular-nums;
}

.crm-doc-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.125rem 0;
}

.crm-doc-total dt {
    color: var(--crm-muted);
}

.crm-doc-total dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    color: var(--crm-text-strong);
}

.crm-doc-total-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--crm-muted);
}

.crm-doc-total.is-divided {
    margin-top: 0.375rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--crm-border-subtle);
}

.crm-doc-total.is-emphasis dt,
.crm-doc-total.is-emphasis dd {
    font-size: var(--crm-text-section);
    font-weight: 600;
    color: var(--crm-text-strong);
}

/* Terms & notes: disclosures, open when short. */
.crm-doc-notes {
    display: grid;
    gap: 0.25rem;
}

.crm-doc-note + .crm-doc-note {
    border-top: 1px solid var(--crm-border-subtle);
    padding-top: 0.25rem;
}

.crm-doc-note-summary {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0;
    font-size: var(--crm-text-meta);
    font-weight: 500;
    color: var(--crm-text-strong);
    cursor: pointer;
    list-style: none;
    border-radius: 4px;
}

.crm-doc-note-summary::-webkit-details-marker {
    display: none;
}

.crm-doc-note-summary:focus-visible {
    outline: 2px solid var(--crm-focus);
    outline-offset: 2px;
}

.crm-doc-note-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--crm-muted);
    transition: transform 0.15s ease-out;
}

.crm-doc-note[open] .crm-doc-note-chevron {
    transform: rotate(90deg);
}

.crm-doc-prose {
    padding: 0 0 0.5rem 1.375rem;
    max-width: 75ch;
    font-size: var(--crm-text-meta);
    line-height: 1.6;
    color: var(--crm-text);
}

.crm-doc-prose ol,
.crm-doc-paper-scroll .doc-rich-content ol { list-style: decimal; padding-left: 1.25rem; margin: 0; }
.crm-doc-prose ul,
.crm-doc-paper-scroll .doc-rich-content ul { list-style: disc; padding-left: 1.25rem; margin: 0; }
.crm-doc-prose li,
.crm-doc-paper-scroll .doc-rich-content li { margin-bottom: 4px; }
.crm-doc-prose p + p { margin-top: 0.5rem; }

/* Attachments. */
.crm-doc-files {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-doc-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    margin-inline: -0.5rem;
    border-radius: var(--crm-radius-control);
    font-size: var(--crm-text-meta);
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.crm-doc-file:hover {
    background: var(--crm-surface-muted);
}

.crm-doc-file:focus-visible {
    outline: 2px solid var(--crm-focus);
    outline-offset: 1px;
}

.crm-doc-file-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--crm-muted);
}

.crm-doc-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--crm-accent-text);
    font-weight: 500;
}

.crm-doc-file-meta {
    margin-inline-start: auto;
    flex: none;
    font-size: 0.75rem;
    color: var(--crm-muted);
    font-variant-numeric: tabular-nums;
}

/* Activity timeline. */
.crm-doc-timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-doc-event {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 0.875rem;
}

.crm-doc-event:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: 0.25rem;
    left: 0.8125rem;
    width: 1px;
    background: var(--crm-border);
}

.crm-doc-event-icon {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    flex: none;
    border-radius: 999px;
    background: var(--crm-surface-sunken);
    color: var(--crm-muted);
}

.crm-doc-event-icon .fi-icon,
.crm-doc-event-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}

.crm-doc-event-success { background: var(--crm-success-bg); color: var(--crm-success-text); }
.crm-doc-event-warning { background: var(--crm-warning-bg); color: var(--crm-warning-text); }
.crm-doc-event-danger { background: var(--crm-danger-bg); color: var(--crm-danger-text); }
.crm-doc-event-primary,
.crm-doc-event-info { background: var(--crm-accent-bg); color: var(--crm-accent-text); }

.crm-doc-event-text {
    min-width: 0;
    padding-top: 0.1875rem;
    font-size: var(--crm-text-meta);
}

.crm-doc-event-title {
    font-weight: 500;
    color: var(--crm-text-strong);
}

.crm-doc-event-body {
    margin-top: 0.125rem;
    color: var(--crm-text);
    white-space: pre-line;
}

.crm-doc-event-meta {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--crm-muted);
    font-variant-numeric: tabular-nums;
}

/* Document tab: the paper replica scrolls sideways on phones instead of the page. */
.crm-doc-paper-scroll {
    overflow-x: auto;
}

@media (max-width: 639px) {
    .crm-doc-fact {
        grid-template-columns: minmax(6rem, 40%) minmax(0, 1fr);
    }

    /* Phones: each line stacks (item, then qty · rate · tax · amount) instead of scrolling sideways. */
    .crm-doc-items,
    .crm-doc-items tbody {
        display: block;
    }

    .crm-doc-items thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .crm-doc-items tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--crm-border-subtle);
    }

    .crm-doc-items tbody tr:last-child {
        border-bottom: 0;
    }

    .crm-doc-items td {
        padding: 0;
        border: 0;
    }

    .crm-doc-items td:first-child {
        flex: 1 0 100%;
        padding-inline-start: 0;
    }

    .crm-doc-items td.is-num {
        text-align: left;
    }

    .crm-doc-items td.is-num::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        color: var(--crm-muted);
    }

    .crm-doc-items td.crm-doc-amount {
        margin-inline-start: auto;
        text-align: right;
    }

    .crm-doc-item {
        min-width: 0;
    }

    .crm-doc-totals {
        max-width: none;
    }
}

/* ── Smart stock check under a document hero (partials/stock-check) ──────── */
/* A shortage is something to act on, not an error: one amber callout, no coloured stripe. */
.crm-stock-check {
    border: 1px solid color-mix(in srgb, var(--warning-500) 30%, var(--crm-border));
    border-radius: var(--crm-radius-card);
    background: var(--crm-warning-bg);
    padding: 0.75rem 1rem;
}

.crm-stock-check-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.crm-stock-check-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--crm-warning-text);
}

.crm-stock-check-title {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--crm-text-strong);
}

.crm-stock-check-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--crm-accent-text);
}

.crm-stock-check-link:hover {
    text-decoration: underline;
}

.crm-stock-check-lines {
    display: grid;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.crm-stock-check-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.crm-stock-check-item {
    font-weight: 600;
    color: var(--crm-text-strong);
}

.crm-stock-check-text {
    color: var(--crm-text-body);
}

/* ── Command palette and shortcuts ── */
/* Command palette (App\Modules\Shell\Livewire\CommandPalette, resources/js/command-palette.js) and the list
   keyboard shortcuts (resources/js/list-pages.js): highlighted row and the "?" cheat sheet. */

.crm-palette,
.crm-shortcuts {
    width: min(40rem, calc(100vw - 2rem));
    max-width: none;
    max-height: none;
    margin: 12vh auto auto;
    padding: 0;
    border: 0;
    border-radius: var(--crm-radius-card);
    background: var(--crm-surface);
    color: var(--crm-text);
    box-shadow: 0 24px 64px -12px rgb(24 24 27 / 0.32), 0 4px 12px rgb(24 24 27 / 0.08);
    overflow: hidden;
}

.dark .crm-palette,
.dark .crm-shortcuts {
    background: var(--gray-900);
    box-shadow: 0 24px 64px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08);
}

.crm-palette::backdrop,
.crm-shortcuts::backdrop {
    background: rgb(9 9 11 / 0.36);
}

.dark .crm-palette::backdrop,
.dark .crm-shortcuts::backdrop {
    background: rgb(0 0 0 / 0.6);
}

.crm-palette[open],
.crm-shortcuts[open] {
    animation: crm-palette-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes crm-palette-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
    }
}

.crm-palette-panel {
    display: flex;
    flex-direction: column;
    max-height: min(34rem, 76vh);
}

.crm-palette-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.75rem 0 1rem;
    border-bottom: 1px solid var(--crm-border-subtle);
}

.crm-palette-search-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: var(--crm-text-faint);
}

.crm-palette-input {
    flex: 1;
    min-width: 0;
    height: 3.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--crm-text-strong);
    font-size: 1rem;
    caret-color: var(--primary-600);
    outline: none;
    box-shadow: none;
}

.crm-palette-input:focus {
    outline: none;
    box-shadow: none;
}

.crm-palette-input::placeholder {
    color: var(--crm-text-faint);
}

.dark .crm-palette-input {
    caret-color: var(--primary-300);
}

.crm-palette-esc,
.crm-palette kbd,
.crm-shortcuts kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.3125rem;
    border: 1px solid var(--crm-border);
    border-radius: 5px;
    background: var(--crm-surface-muted);
    color: var(--crm-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.crm-palette-esc {
    cursor: pointer;
}

.crm-palette-esc:hover {
    color: var(--crm-text-strong);
    border-color: var(--crm-border-strong);
}

.crm-palette-esc:focus-visible,
.crm-shortcuts-close:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.crm-palette-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
}

.crm-palette-progress::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    background: var(--primary-500);
    animation: crm-palette-progress 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes crm-palette-progress {
    from { transform: translateX(-100%); }
    to { transform: translateX(340%); }
}

.crm-palette-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0 0.375rem;
    scroll-padding: 2rem 0 0.5rem;
}

.crm-palette-group + .crm-palette-group {
    margin-top: 0.25rem;
}

.crm-palette-group-label {
    padding: 0.625rem 1rem 0.25rem;
    color: var(--crm-text-faint);
    font-size: 0.75rem;
    font-weight: 500;
}

.crm-palette-option {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.375rem;
    margin: 0 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--crm-radius-control);
    color: var(--crm-text);
    font-size: var(--crm-text-body);
    text-decoration: none;
    cursor: pointer;
}

.crm-palette-option[aria-selected='true'] {
    background: var(--crm-selected-bg);
}

.dark .crm-palette-option[aria-selected='true'] {
    background: rgb(255 255 255 / 0.08);
}

.crm-palette-option-icon {
    width: 1rem;
    height: 1rem;
    color: var(--crm-text-faint);
}

.crm-palette-option[aria-selected='true'] .crm-palette-option-icon {
    color: var(--crm-selected-icon);
}

.crm-palette-option-text {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.crm-palette-option-title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--crm-text-strong);
    font-weight: 500;
}

/* With a secondary text the title keeps most of the line; alone it takes all of it. */
.crm-palette-option-title:has(+ .crm-palette-option-secondary) {
    flex-shrink: 0;
    max-width: 70%;
}

.crm-palette-option[aria-selected='true'] .crm-palette-option-title {
    color: var(--crm-selected-text);
}

.dark .crm-palette-option[aria-selected='true'] .crm-palette-option-title {
    color: #ffffff;
}

.crm-palette-option-secondary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    font-variant-numeric: tabular-nums;
}

.crm-palette-option-type {
    color: var(--crm-text-faint);
    font-size: 0.75rem;
    white-space: nowrap;
}

.crm-palette-empty {
    padding: 1.75rem 1.25rem 2rem;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    text-align: center;
    text-wrap: balance;
}

.crm-palette-empty-title {
    margin-bottom: 0.25rem;
    color: var(--crm-text-strong);
    font-size: var(--crm-text-body);
    font-weight: 500;
}

.crm-palette-skeleton {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.crm-palette-skeleton span {
    height: 1.25rem;
    border-radius: var(--crm-radius-pill);
    background: var(--crm-surface-sunken);
}

.crm-palette-skeleton span:nth-child(2) { width: 82%; }
.crm-palette-skeleton span:nth-child(3) { width: 64%; }

.crm-palette-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--crm-border-subtle);
    background: var(--crm-surface-muted);
    color: var(--crm-muted);
    font-size: 0.75rem;
}

.crm-palette-foot > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.crm-palette-foot-end {
    margin-left: auto;
}

/* Phones: a full-width sheet from the top; no keyboard hints on touch. */
@media (max-width: 639px) {
    .crm-palette {
        width: 100vw;
        margin: 0;
        border-radius: 0 0 var(--crm-radius-card) var(--crm-radius-card);
    }

    .crm-palette-panel {
        max-height: 100dvh;
    }

    .crm-palette-foot {
        display: none;
    }

    .crm-palette-option-title:has(+ .crm-palette-option-secondary) {
        max-width: 60%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-palette[open],
    .crm-shortcuts[open] {
        animation: none;
    }

    .crm-palette-progress::after {
        animation-duration: 2.4s;
    }
}

/* List keyboard shortcuts: the row j / k moved to, drawn as a focus ring around the whole row.
   Per cell (inset shadows), so the pinned checkbox and actions cells carry it too; !important
   because those pinned cells set their own background and edge lines. */
.fi-ta-row.crm-kb-row {
    --crm-kb-ring: var(--primary-500);
}

.dark .fi-ta-row.crm-kb-row {
    --crm-kb-ring: var(--primary-400);
}

.fi-ta-row.crm-kb-row > td {
    background-color: var(--crm-row-selected, var(--crm-selected-bg)) !important;
    box-shadow: inset 0 2px 0 var(--crm-kb-ring), inset 0 -2px 0 var(--crm-kb-ring) !important;
}

.fi-ta-row.crm-kb-row > td:first-child {
    box-shadow: inset 2px 0 0 var(--crm-kb-ring), inset 0 2px 0 var(--crm-kb-ring), inset 0 -2px 0 var(--crm-kb-ring) !important;
}

.fi-ta-row.crm-kb-row > td:last-child {
    box-shadow: inset -2px 0 0 var(--crm-kb-ring), inset 0 2px 0 var(--crm-kb-ring), inset 0 -2px 0 var(--crm-kb-ring) !important;
}

/* "?" cheat sheet. */
.crm-shortcuts {
    width: min(26rem, calc(100vw - 2rem));
}

.crm-shortcuts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem 0.5rem 1.25rem;
}

.crm-shortcuts-title {
    color: var(--crm-text-strong);
    font-size: var(--crm-text-section);
    font-weight: 600;
}

.crm-shortcuts-close {
    display: inline-flex;
    padding: 0.375rem;
    border-radius: var(--crm-radius-control);
    color: var(--crm-text-faint);
}

.crm-shortcuts-close:hover {
    background: var(--crm-surface-sunken);
    color: var(--crm-text-strong);
}

.crm-shortcuts-section {
    padding: 0.25rem 1.25rem 0.75rem;
}

.crm-shortcuts-section + .crm-shortcuts-section {
    border-top: 1px solid var(--crm-border-subtle);
    padding-top: 0.75rem;
}

.crm-shortcuts-section h3 {
    margin-bottom: 0.375rem;
    color: var(--crm-text-faint);
    font-size: 0.75rem;
    font-weight: 500;
}

.crm-shortcuts dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4375rem 1rem;
    margin: 0;
    font-size: var(--crm-text-body);
}

.crm-shortcuts dt {
    color: var(--crm-text);
}

.crm-shortcuts dd {
    display: inline-flex;
    justify-content: flex-end;
    gap: 0.25rem;
    margin: 0;
}

.crm-shortcuts-note {
    padding: 0 1.25rem 1rem;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
}

.crm-palette-list[data-stale] {
    visibility: hidden;
}

.crm-shortcuts:focus {
    outline: none;
}

/* ── Dashboard number cards ── */
/* CachesDashboardStats::numberCard() + app/Shared/Resources/views/filament/widgets/number-card.blade.php.
   Calm and dense: a muted sentence-case label, the compact value (exact amount in its tooltip),
   one quiet line under it and a neutral sparkline beside the value. Colour only for a real
   signal: the value turns danger only on a problem card above zero, and a change is green or
   red only where its direction is unambiguous (otherwise muted); an arrow and words carry it too. */

.crm-number-card {
    --crm-number-card-pad-x: 1.25rem;
    padding: 1.125rem var(--crm-number-card-pad-x) 1.125rem;
    background-color: var(--crm-surface);
    overflow: hidden;
}

.crm-number-card:hover {
    transform: none;
    box-shadow: 0 0 0 1px var(--crm-input-border), var(--crm-shadow-card);
}

.crm-number-card:focus-visible {
    box-shadow: var(--crm-focus-ring);
}

.crm-number-card .crm-number-card-content {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.crm-number-card .crm-number-card-label {
    font-size: var(--crm-text-label);
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--crm-muted);
}

.crm-number-card .crm-number-card-value {
    font-size: var(--crm-text-figure);
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: -0.02em;
    color: var(--crm-text-strong);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Overdue / low stock: amber, the theme's "due / overdue" colour (red is for errors and rejections). */
.crm-number-card[data-tone="warning"] .crm-number-card-value {
    color: var(--crm-warning-text);
}

.crm-number-card-has-chart .crm-number-card-value {
    padding-right: 5.5rem; /* room for the sparkline beside it */
}

.crm-number-card .crm-number-card-meta {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    min-height: 1.25rem;
    font-size: var(--crm-text-meta);
    line-height: 1.25rem;
    color: var(--crm-muted);
    font-variant-numeric: tabular-nums;
}

.crm-number-card .crm-number-card-delta[data-trend="good"] {
    color: var(--crm-success-text);
}

.crm-number-card .crm-number-card-delta[data-trend="bad"] {
    color: var(--crm-danger-text);
}

.crm-number-card .crm-number-card-arrow {
    width: 0.5625rem;
    height: 0.5625rem;
    flex: none;
    fill: currentColor;
}

/* The sparkline: one neutral line, no fill, beside the value on every card. */
.crm-number-card .crm-number-card-chart {
    position: absolute;
    inset: auto;
    top: 2.5rem;
    right: var(--crm-number-card-pad-x);
    width: 4.75rem;
    height: 1.75rem;
    border-radius: 0;
    overflow: visible;
    pointer-events: none;
    --stat-chart-fill: none;
    --stat-chart-border-width: 1.5;
    --stat-chart-line-tension: 0.35;
}

.crm-number-card .crm-number-card-chart > canvas {
    width: 100%;
    height: 100%;
}

.crm-number-card .crm-number-card-chart .fi-wi-stats-overview-stat-chart-bg-color {
    color: transparent;
}

.crm-number-card .crm-number-card-chart .fi-wi-stats-overview-stat-chart-border-color {
    color: color-mix(in oklab, var(--primary-400) 55%, var(--gray-400));
}

.dark .crm-number-card .crm-number-card-chart .fi-wi-stats-overview-stat-chart-border-color {
    color: color-mix(in oklab, var(--primary-300) 45%, var(--gray-500));
}

.crm-number-card .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Phones: two cards a row, a step smaller; the sparkline drops below the line of text. */
@media (max-width: 639px) {
    .fi-wi-stats-overview .fi-section-content.fi-grid:has(> .fi-grid-col .crm-number-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .crm-number-card {
        --crm-number-card-pad-x: 0.875rem;
        padding-block: 0.875rem;
    }

    .crm-number-card .crm-number-card-value {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .crm-number-card-has-chart .crm-number-card-value {
        padding-right: 0;
    }

    .crm-number-card .crm-number-card-meta {
        font-size: 0.75rem;
        align-items: flex-start;
    }

    .crm-number-card-has-chart {
        padding-bottom: 2.5rem;
    }

    .crm-number-card .crm-number-card-chart {
        top: auto;
        bottom: 0.75rem;
        left: var(--crm-number-card-pad-x);
        width: auto;
        height: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-number-card {
        transition: none;
    }
}

@media (max-width: 639px) {
    .crm-skeleton-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* ── Dashboard charts ── */
/* One chart palette (resources/js/components/crm-echart.js reads these on every draw):
   primary = the lead series (brand navy), neutral = the comparison series,
   1–6 = categorical, only for real categories, in this order (validated for
   colour-vision deficiency on the card surface in both modes; slot 1 is blue so it
   never reads as primary; EChartOption also refuses primary and cat:* in one chart).
   seq-1…5 = ordered buckets, scale-* = heatmaps, up/down = polarity. Status colours
   stay reserved for status. */
:root {
    --crm-chart-primary: #2e3293;
    --crm-chart-neutral: #a1a1aa;
    --crm-chart-1: #2a78d6;
    --crm-chart-2: #eb6834;
    --crm-chart-3: #1baf7a;
    --crm-chart-4: #eda100;
    --crm-chart-5: #e87ba4;
    --crm-chart-6: #008300;
    --crm-chart-track: var(--gray-100);
    --crm-chart-target: var(--gray-950);
    /* Ordinal ramp (seq:1…5): ordered buckets (ageing, response time, stages), lightest = first.
       One hue, validated --ordinal on the card surface (light end 2.31:1). */
    --crm-chart-seq-1: #a3a6e0;
    --crm-chart-seq-2: #7f83d0;
    --crm-chart-seq-3: #5d61bd;
    --crm-chart-seq-4: #3e43a3;
    --crm-chart-seq-5: #22267c;
    /* Continuous one-hue scale (heatmaps, calendar): near-zero recedes to the surface. */
    --crm-chart-scale-low: #eeeffa;
    --crm-chart-scale-high: #22267c;
    /* Polarity (diverging bars, waterfall steps): up = the lead hue, down = orange. Not status. */
    --crm-chart-up: var(--crm-chart-primary);
    --crm-chart-down: #eb6834;
}

.dark {
    --crm-chart-primary: #6c70c8;
    --crm-chart-neutral: #52525b;
    --crm-chart-1: #3987e5;
    --crm-chart-2: #d95926;
    --crm-chart-3: #199e70;
    --crm-chart-4: #c98500;
    --crm-chart-5: #d55181;
    --crm-chart-6: #008300;
    --crm-chart-track: rgb(255 255 255 / 0.06);
    --crm-chart-target: #ffffff;
    --crm-chart-seq-1: #3f43a6;
    --crm-chart-seq-2: #5a5fc0;
    --crm-chart-seq-3: #7a7ed2;
    --crm-chart-seq-4: #9ea1e0;
    --crm-chart-seq-5: #c3c5ee;
    --crm-chart-scale-low: #26284a;
    --crm-chart-scale-high: #c3c5ee;
    --crm-chart-up: var(--crm-chart-primary);
    --crm-chart-down: #d95926;
}

/* Empty chart: a short neutral line in the card instead of empty axes. */
.fi-wi-chart .fi-empty-state .fi-empty-state-icon-bg {
    background: var(--crm-surface-sunken);
}

.crm-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 12rem;
    text-align: center;
}

.crm-chart-empty-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--crm-text-faint);
}

.crm-chart-empty-heading {
    color: var(--crm-text-strong);
    font-size: var(--crm-text-body);
    font-weight: 500;
}

.crm-chart-empty-hint,
.crm-chart-muted {
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
}

/* CRM tab: Mine | Team above the widgets. */
.crm-dashboard-scope {
    display: flex;
    justify-content: flex-end;
}

/* ── Consistency and mobile ── */

/* Status never ends in an ellipsis: a badge cell is exempt from the row's 16rem name clip. */
.fi-ta-table .fi-ta-text:not(.fi-wrapped) .fi-ta-text-item:has(> .fi-badge) {
    max-width: none;
    overflow: visible;
}

/* Brand logo on the dark topbar: a quieter chip (control radius, tight padding, no glare). */
.dark .fi-topbar .fi-logo {
    background-color: rgb(255 255 255 / 0.92);
    border-radius: var(--crm-radius-control);
    padding: 0.1875rem 0.375rem;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

@media (max-width: 639px) {
    /* Topbar: menu · bell · + New. Row density is a desktop control. */
    body:has(.fi-resource-list-records-page) .crm-density-toggle {
        display: none;
    }

    /* Header actions stay on one row: the List | Board switch is a desktop control
       (the Pipeline board has its own sidebar entry), buttons get compact padding. */
    .fi-header-actions-ctn .fi-ac > .fi-btn.crm-switch-item {
        display: none;
    }

    .fi-header-actions-ctn .fi-ac > .fi-btn,
    .fi-header-actions-ctn .fi-ac > .fi-dropdown .fi-btn {
        padding-inline: 0.75rem;
    }

    /* Form Save bar (sticky or in place): one compact row, primary actions share the width, Cancel keeps its size. */
    .fi-sc-actions[id$="form-actions"] > .fi-ac {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .fi-sc-actions.fi-sticky .fi-ac {
        padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    .fi-sc-actions[id$="form-actions"] > .fi-ac > .fi-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding-inline: 0.5rem;
        white-space: nowrap;
    }

    .fi-sc-actions[id$="form-actions"] > .fi-ac > .fi-btn:last-child:not(:first-child):not(.fi-color-primary) {
        flex: 0 0 auto;
    }

    .fi-sc-actions[id$="form-actions"] > .fi-ac > .fi-btn > .fi-icon {
        display: none;
    }

    /* Status badges wrap to a second line instead of truncating. */
    .fi-main .fi-badge:not(.fi-size-xs),
    .fi-main .fi-badge:not(.fi-size-xs) .fi-badge-label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .fi-main .fi-badge:not(.fi-size-xs) {
        max-width: 100%;
        text-align: start;
    }
}

/* ── ECharts ── */
/* Every chart is Apache ECharts (resources/js/components/crm-echart.js, <x-crm.echart>).
   The component reads these tokens and the --crm-chart-* palette above on every draw; the
   status steps are for status only (lifecycle, under-target), chosen per mode with the
   dataviz validator: every adjacent pair ≥ 15 ΔE for normal vision; amber↔green sits in the
   6–8 CVD band, so status bars always carry their name and figure as text. */
:root {
    --crm-chart-grid: var(--gray-200);
    --crm-chart-status-success: var(--success-600);
    --crm-chart-status-warning: var(--warning-500);
    --crm-chart-status-danger: var(--danger-600);
    --crm-chart-status-info: var(--info-600);
    --crm-chart-status-gray: var(--gray-400);
}

.dark {
    --crm-chart-grid: rgb(255 255 255 / 0.08);
    --crm-chart-status-success: var(--success-600);
    --crm-chart-status-warning: var(--warning-500);
    --crm-chart-status-danger: var(--danger-500);
    --crm-chart-status-info: var(--info-500);
    --crm-chart-status-gray: var(--gray-500);
}

.crm-echart {
    position: relative;
    width: 100%;
}

/* The plot and its axis labels share one fixed height: no nested scroll. */
.crm-echart-canvas {
    width: 100%;
    height: var(--crm-echart-height, 300px);
}

/* Report pages with more than one chart (CrmReportPage::charts()): the main chart full width,
   then secondary charts two to a row from 1024px, one per row below. */
.crm-report-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 1024px) {
    .crm-report-charts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-report-charts-full {
        grid-column: 1 / -1;
    }
}

.crm-report-charts-item {
    min-width: 0;
}

/* A long ranking (ReportChart::maxHeightFor()): the chart keeps its row height and scrolls
   inside the card instead of squeezing its bars. */
.crm-echart[data-scroll] {
    max-height: var(--crm-echart-max-height, 880px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* The chart's takeaway (EChartOption::description()/takeaway()): one sentence under the chart
   heading, sentence case, quiet ink, two lines at most; its key figures in strong ink. */
.crm-echart-widget .fi-section-header-description:has(.crm-chart-takeaway),
.crm-chart-caption {
    margin: 0.125rem 0 0;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    line-height: 1.45;
}

.crm-chart-takeaway {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    line-height: 1.45;
    text-wrap: pretty;
}

/* Phones: the takeaway wraps in full (no clamp); it is the chart's point. */
@media (max-width: 639px) {
    .crm-chart-takeaway {
        display: inline;
        -webkit-line-clamp: unset;
        line-clamp: none;
        overflow: visible;
    }
}

.crm-chart-takeaway-figure {
    color: var(--crm-text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.crm-chart-caption {
    margin-bottom: 0.5rem;
}

/* Meter tile (<x-crm.meter>): value vs target with the expected-to-date marker; no gauge dials. */
.crm-meter {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-card);
    background: var(--crm-surface);
    min-width: 0;
}

.crm-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.crm-meter-label {
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    font-weight: 500;
}

.crm-meter-pace {
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    white-space: nowrap;
}

.crm-meter-pace-behind {
    color: var(--crm-warning-text);
    font-weight: 600;
}

.crm-meter-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.crm-meter-value {
    color: var(--crm-text-strong);
    font-size: var(--crm-text-figure);
    font-weight: 600;
    line-height: 1.2;
}

.crm-meter-of {
    color: var(--crm-text);
    font-size: var(--crm-text-meta);
    font-variant-numeric: tabular-nums;
}

.crm-meter-track {
    position: relative;
    height: 0.5rem;
    margin-block: 0.375rem 0.125rem;
    border-radius: 999px;
    background: var(--crm-chart-track);
}

.crm-meter-fill {
    position: absolute;
    inset-block: 0;
    left: 0;
    border-radius: 999px;
    background: var(--crm-chart-primary);
}

/* The expected-to-date marker: a 2px tick in the target ink, taller than the track. */
.crm-meter-marker {
    position: absolute;
    top: -0.25rem;
    bottom: -0.25rem;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--crm-chart-target);
}

.crm-meter-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    color: var(--crm-muted);
    font-size: 0.75rem;
}

/* ── Report pages ── */
/* CrmReportPage: number cards (the dashboard's card, ReportStat), the totals row, rank and
   attainment cells (App\Modules\Reports\Filament\Reports\ReportColumns). Emphasis is weight and words first;
   amber only for overdue (60+ / 90+ buckets, low rates), never red for a figure. */
.crm-report-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.crm-report-cards .crm-number-card {
    position: relative;
}

/* A meter tile in the number-card row (CrmReportPage::headerMeters()): two card columns. */
.crm-report-cards .crm-report-meter {
    grid-column: span 2;
    min-width: 0;
    display: flex;
}

.crm-report-cards .crm-report-meter > .crm-meter {
    flex: 1;
}

/* A name or a short phrase as the value: wraps, a step smaller. */
.crm-number-card.crm-number-card-text .crm-number-card-value {
    font-size: var(--crm-text-section);
    line-height: 1.375rem;
    white-space: normal;
    overflow-wrap: anywhere;
    padding-block: 0.3125rem;
}

/* Totals row: every row summed, under a stronger rule. */
.fi-ta-table tfoot .crm-report-totals-cell {
    padding: 0.75rem 0.75rem;
    border-top: 1px solid var(--crm-border-strong);
    background: var(--crm-surface-muted);
    color: var(--crm-text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fi-ta-table tfoot .crm-report-totals-end {
    text-align: end;
}

.crm-report-totals-hint {
    margin-left: 0.375rem;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    font-weight: 400;
}

/* Rank on a ranked report: the number, and a word on the top three and the last row. */
.crm-report-rank-cell {
    width: 1%;
    white-space: nowrap;
}

.crm-rank {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--crm-muted);
    font-variant-numeric: tabular-nums;
}

.crm-rank-number {
    min-width: 1.25rem;
    text-align: end;
}

.crm-rank-top {
    color: var(--crm-text-strong);
    font-weight: 600;
}

.crm-rank-word {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--crm-radius-pill);
    background: var(--crm-surface-sunken);
    color: var(--crm-text);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
}

/* Attainment: the % and a mini bar (capped at 100%) in the brand colour, never a status hue. */
.crm-attainment {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.crm-attainment-bar {
    position: relative;
    display: block;
    width: 3.5rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--crm-chart-track);
    overflow: hidden;
}

.crm-attainment-bar > i {
    position: absolute;
    inset-block: 0;
    left: 0;
    border-radius: 999px;
    background: var(--crm-chart-primary);
}

.crm-attainment-figure {
    min-width: 3.25rem;
    text-align: end;
}

@media (max-width: 639px) {
    .crm-report-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .crm-attainment-bar {
        width: 2.5rem;
    }
}

/* ── Report filter bar ── */
/* CrmReportPage (filament/reports/partials/filter-bar): one row above the report: the period
   control, up to two primary filters, "Group by" (time grain), "Filters · N" (side panel), and
   the dates as a quiet caption at the end. Active panel filters are chips under the row.
   Phones: the row wraps to two lines at most; the panel is a full-screen sheet. */
.crm-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-filter-bar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.crm-filter-bar-fields {
    display: contents;
}

.crm-filter-bar-fields > .fi-sc,
.crm-filter-bar-fields .fi-sc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.crm-filter-bar-fields .fi-sc-component,
.crm-filter-bar-fields .fi-fo-field {
    min-width: 0;
}

.crm-filter-bar-field {
    width: 13rem;
    max-width: 100%;
}

.crm-filter-bar-field[data-filter='from'],
.crm-filter-bar-field[data-filter='until'] {
    width: 10rem;
}

.crm-filter-bar-field .fi-input-wrp {
    min-height: 2.25rem;
}

/* The period control: a button with the period's name; presets, fiscal years and custom in a menu. */
.crm-period-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.625rem 0 0.75rem;
    border-radius: var(--crm-radius-control);
    background-color: var(--crm-surface);
    box-shadow: 0 0 0 1px var(--crm-input-border), var(--crm-shadow-raised);
    color: var(--crm-text-strong);
    font-size: var(--crm-text-body);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: box-shadow 0.15s ease;
}

.dark .crm-period-trigger {
    background-color: rgb(255 255 255 / 0.04);
}

.crm-period-trigger:hover {
    box-shadow: 0 0 0 1px var(--crm-input-border-hover), var(--crm-shadow-raised);
}

.crm-period-trigger:focus-visible,
.crm-period-option:focus-visible,
.crm-grain-option:focus-visible,
.crm-filter-chip-remove:focus-visible,
.crm-filter-chips-clear:focus-visible,
.crm-echart-expand:focus-visible,
.crm-chart-dialog-save:focus-visible,
.crm-chart-dialog-close:focus-visible {
    outline: none;
    box-shadow: var(--crm-focus-ring);
}

.crm-period-icon {
    width: 1rem;
    height: 1rem;
    color: var(--crm-muted);
}

.crm-period-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--crm-text-faint);
}

.crm-period-menu {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    min-width: 13rem;
}

.crm-period-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    border-radius: 6px;
    color: var(--crm-text-strong);
    font-size: var(--crm-text-body);
    text-align: start;
    font-variant-numeric: tabular-nums;
}

.crm-period-option:hover {
    background-color: var(--crm-surface-sunken);
}

.crm-period-option[aria-checked='true'] {
    font-weight: 600;
}

.crm-period-check {
    width: 1rem;
    height: 1rem;
    color: var(--crm-selected-icon);
}

.crm-period-group {
    padding: 0.625rem 0.625rem 0.25rem;
    color: var(--crm-muted);
    font-size: var(--crm-text-label);
    font-weight: 500;
}

.crm-period-divider {
    height: 1px;
    margin: 0.25rem 0.375rem;
    background-color: var(--crm-border);
}

/* Group by: a segmented control, like the tabs. */
.crm-grain {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.crm-grain-label {
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    white-space: nowrap;
}

.crm-grain-options {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--gray-950) 4%, transparent);
    box-shadow: inset 0 0 0 1px var(--crm-input-border);
}

.dark .crm-grain-options {
    background-color: rgb(255 255 255 / 0.05);
}

.crm-grain-option {
    padding: 0.25rem 0.625rem;
    border-radius: 7px;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.crm-grain-option:hover {
    color: var(--crm-text-strong);
}

.crm-grain-option[aria-pressed='true'] {
    background-color: var(--crm-surface);
    color: var(--crm-text-strong);
    box-shadow: 0 1px 2px rgb(24 24 27 / 0.1), 0 0 0 1px rgb(24 24 27 / 0.04);
}

.dark .crm-grain-option[aria-pressed='true'] {
    background-color: var(--gray-800);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

.crm-filter-bar-more {
    height: 2.25rem;
}

.crm-filter-bar-caption {
    margin-inline-start: auto;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Active panel filters: removable chips, then "Clear all". */
.crm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    height: 1.75rem;
    padding-inline: 0.625rem 0.25rem;
    border-radius: var(--crm-radius-pill);
    background-color: var(--crm-selected-bg);
    color: var(--crm-selected-text);
    font-size: var(--crm-text-meta);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 18%, transparent);
}

.crm-filter-chip-label {
    color: var(--crm-text);
    white-space: nowrap;
}

.crm-filter-chip-value {
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-filter-chip-remove {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 4px;
    color: var(--crm-selected-icon);
}

.crm-filter-chip-remove:hover {
    background-color: color-mix(in srgb, var(--primary-500) 14%, transparent);
}

.crm-filter-chip-remove .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.crm-filter-chips-clear {
    padding: 0.25rem 0.375rem;
    border-radius: 4px;
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.crm-filter-chips-clear:hover {
    color: var(--crm-text-strong);
}

/* The Filters panel (slide-over): fields one per row, Apply / Reset in the footer. */
.crm-filter-panel .fi-modal-footer-actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

@media (max-width: 639px) {
    .crm-filter-bar-row {
        gap: 0.5rem;
    }

    .crm-period {
        flex: 1 1 auto;
    }

    .crm-period-trigger {
        width: 100%;
    }

    .crm-filter-bar-field {
        flex: 1 1 10rem;
        width: auto;
    }

    .crm-filter-bar-caption {
        flex-basis: 100%;
        margin-inline-start: 0;
        white-space: normal;
    }

    .crm-grain {
        order: 5;
        flex-basis: 100%;
    }

    .crm-grain-label {
        display: none;
    }

    .crm-grain-options {
        flex: 1;
    }

    .crm-grain-option {
        flex: 1;
        padding-inline: 0.25rem;
    }

    /* Panel: a full-screen sheet. */
    .fi-modal-slide-over .crm-filter-panel,
    .crm-filter-panel.fi-modal-window {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ── Chart full screen ── */
/* <x-crm.echart>: the toolbox's Full screen icon (and a keyboard button that shows on focus)
   opens a full-viewport <dialog> (crm-echart.js openFullscreen()): title, takeaway, context,
   Save as image (3×, with those lines and the date) and Close; Esc closes. Phones: a sheet. */
.crm-echart-expand {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.25rem 0.5rem;
    border-radius: var(--crm-radius-control);
    background-color: var(--crm-surface);
    color: var(--crm-text-strong);
    font-size: var(--crm-text-meta);
    font-weight: 500;
    box-shadow: var(--crm-shadow-pop);
    /* Visible only to the keyboard (the canvas toolbox icon serves the pointer). */
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.crm-echart-expand:focus-visible {
    clip-path: none;
    width: auto;
    height: auto;
}

html.crm-chart-dialog-open {
    overflow: hidden;
}

.crm-chart-dialog {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 3rem);
    max-width: none;
    height: calc(100dvh - 3rem);
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--crm-radius-modal);
    background-color: var(--crm-surface);
    color: var(--crm-text);
    box-shadow: var(--crm-shadow-modal);
    overflow: hidden;
}

.crm-chart-dialog:not([open]) {
    display: none;
}

.crm-chart-dialog::backdrop {
    background-color: rgb(24 24 27 / 0.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.dark .crm-chart-dialog::backdrop {
    background-color: rgb(0 0 0 / 0.6);
}

.crm-chart-dialog[open] {
    animation: crm-chart-dialog-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes crm-chart-dialog-in {
    from {
        opacity: 0;
        transform: scale(0.985);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-chart-dialog[open] {
        animation: none;
    }
}

.crm-chart-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--crm-border-subtle);
}

.crm-chart-dialog-titles {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.crm-chart-dialog-title {
    color: var(--crm-text-strong);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.crm-chart-dialog-takeaway {
    max-width: 75ch;
    color: var(--crm-text);
    font-size: var(--crm-text-body);
    line-height: 1.45;
    text-wrap: pretty;
}

.crm-chart-dialog-takeaway strong {
    color: var(--crm-text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.crm-chart-dialog-context {
    color: var(--crm-muted);
    font-size: var(--crm-text-meta);
    font-variant-numeric: tabular-nums;
}

.crm-chart-dialog-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
}

.crm-chart-dialog-save {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding-inline: 0.75rem;
    border-radius: var(--crm-radius-control);
    color: var(--crm-text-strong);
    font-size: var(--crm-text-body);
    font-weight: 500;
    box-shadow: 0 0 0 1px var(--crm-input-border), var(--crm-shadow-raised);
}

.crm-chart-dialog-save:hover {
    box-shadow: 0 0 0 1px var(--crm-input-border-hover), var(--crm-shadow-raised);
}

.crm-chart-dialog-save svg,
.crm-chart-dialog-close svg {
    width: 1.125rem;
    height: 1.125rem;
}

.crm-chart-dialog-close {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--crm-radius-control);
    color: var(--crm-muted);
}

.crm-chart-dialog-close:hover {
    background-color: var(--crm-surface-sunken);
    color: var(--crm-text-strong);
}

.crm-chart-dialog-body {
    flex: 1;
    min-height: 0;
    padding: 1rem 1.5rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.crm-chart-dialog-body:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--crm-focus);
}

.crm-chart-dialog-canvas {
    width: 100%;
}

@media (max-width: 639px) {
    .crm-chart-dialog {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    .crm-chart-dialog-head {
        padding: 0.875rem 1rem 0.625rem;
        padding-top: max(0.875rem, env(safe-area-inset-top));
    }

    .crm-chart-dialog-save span {
        display: none;
    }

    .crm-chart-dialog-save {
        width: 2.25rem;
        justify-content: center;
        padding: 0;
    }

    .crm-chart-dialog-body {
        padding: 0.75rem 0.75rem max(1rem, env(safe-area-inset-bottom));
    }
}

/* ── Understand this report ── */
/* CrmReportPage::explained(), filament/reports/partials/explain-panel: one quiet row under the
   number cards (the first reading of the numbers), opening to what the numbers say, how to read
   the cards and charts, terms and what to do. Body 14px, notes 13px; no colour but the primary
   for the toggle and sparkles for AI. The "i" on a number card shows the card's meaning. */
.crm-explain {
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-card, 12px);
    background: var(--crm-surface);
    font-size: var(--crm-text-body);
    color: var(--crm-text);
}

.crm-explain-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
}

.crm-explain-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    color: var(--crm-muted);
}

.crm-explain-lead {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    display: grid;
    gap: 0.125rem;
}

.crm-explain-title {
    font-size: var(--crm-text-body);
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--crm-text-strong);
}

.crm-explain-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--crm-text-meta);
    line-height: 1.45;
    color: var(--crm-muted);
    text-wrap: pretty;
}

.crm-explain-summary-label {
    font-weight: 500;
    color: var(--crm-text);
}

.crm-explain strong {
    font-weight: 600;
    color: var(--crm-text-strong);
    font-variant-numeric: tabular-nums;
}

.crm-explain-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
    padding: 0 0.625rem;
    border-radius: var(--crm-radius-control, 8px);
    font-size: var(--crm-text-meta);
    font-weight: 500;
    color: var(--crm-accent-text);
    white-space: nowrap;
}

.crm-explain-toggle:hover {
    background: var(--crm-accent-bg);
}

.crm-explain-toggle:focus-visible {
    outline: none;
    box-shadow: var(--crm-focus-ring);
}

.crm-explain-chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.crm-explain[data-open="true"] .crm-explain-chevron {
    transform: rotate(180deg);
}

.crm-explain-body {
    display: grid;
    gap: 1.25rem;
    padding: 0.25rem 1rem 1.25rem 3rem;
}

.crm-explain-answers {
    max-width: 72ch;
    color: var(--crm-text);
    line-height: 1.5;
}

.crm-explain-grid {
    display: grid;
    gap: 1.25rem 2.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .crm-explain-grid:has(> .crm-explain-col + .crm-explain-col) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.crm-explain-col {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    min-width: 0;
}

.crm-explain-block {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.crm-explain-heading {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--crm-text-label);
    font-weight: 600;
    color: var(--crm-text-strong);
}

.crm-explain-list {
    display: grid;
    gap: 0.375rem;
    padding-left: 1.125rem;
    list-style: disc;
    line-height: 1.5;
    max-width: 72ch;
}

.crm-explain-list li::marker {
    color: var(--crm-text-faint);
}

.crm-explain-steps {
    list-style: decimal;
}

.crm-explain-name {
    font-weight: 500;
    color: var(--crm-text-strong);
}

.crm-explain-defs {
    display: grid;
    gap: 0.625rem;
}

.crm-explain-def dt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.5rem;
}

.crm-explain-def dd {
    margin: 0.125rem 0 0;
    line-height: 1.5;
    max-width: 72ch;
}

.crm-explain-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

.crm-explain-direction-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.crm-explain-healthy {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

.crm-explain-section {
    padding-top: 1rem;
    border-top: 1px solid var(--crm-border-subtle);
}

.crm-explain-ai {
    display: grid;
    gap: 0.625rem;
    padding-top: 1rem;
    border-top: 1px solid var(--crm-border-subtle);
}

.crm-explain-ai-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.crm-explain-ai-icon {
    width: 1rem;
    height: 1rem;
    color: var(--crm-info-text);
}

.crm-explain-ai-text {
    max-width: 72ch;
    font-size: var(--crm-text-body);
}

.crm-explain-note {
    font-size: var(--crm-text-meta);
    color: var(--crm-muted);
}

.crm-explain-error {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: var(--crm-text-meta);
    color: var(--crm-danger-text);
}

.crm-explain-error-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
}

/* The "i" beside a number card's label (a written card meaning): quiet until hovered or focused. */
.crm-number-card-label-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.crm-number-card-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.125rem 0;
    border-radius: 999px;
    color: var(--crm-text-faint);
}

.crm-number-card-info:hover {
    color: var(--crm-text);
    background: var(--crm-surface-sunken);
}

.crm-number-card-info:focus-visible {
    outline: none;
    color: var(--crm-text);
    box-shadow: var(--crm-focus-ring);
}

.crm-number-card-info-icon {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 639px) {
    .crm-explain-head {
        padding: 0.625rem 0.5rem 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .crm-explain-icon {
        display: none;
    }

    .crm-explain-body {
        padding: 0.25rem 0.75rem 1rem;
    }

    .crm-explain-summary {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-explain-chevron {
        transition: none;
    }
}

/* The AI's headings sit at the panel's own heading size, not the prose scale. */
.crm-explain-ai-text :is(h1, h2, h3, h4) {
    margin: 0.75rem 0 0.25rem;
    font-size: var(--crm-text-section);
    font-weight: 600;
    color: var(--crm-text-strong);
}

.crm-explain-ai-text > :first-child {
    margin-top: 0;
}


/* ── Tables on phones: each row is a card of "label  value" lines ──────────
   resources/js/list-pages.js copies each column heading onto its cells (data-label), marks the
   row's first column as its title (data-primary) and empty cells (data-empty). Sorting stays in
   the filters panel; bulk selection is a desktop task. */
@media (max-width: 639px) {
    .fi-page .fi-ta-content-ctn .fi-ta-table,
    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody {
        display: block;
        width: 100%;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row {
        display: grid;
        gap: 0.25rem;
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--crm-border-subtle);
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        min-width: 0;
        padding: 0;
        border: 0;
        position: static;
        box-shadow: none;
        background: none;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        font-size: var(--crm-text-label);
        font-weight: 500;
        color: var(--crm-muted);
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td[data-primary] {
        order: -1;
        padding-bottom: 0.25rem;
        font-size: var(--crm-text-section);
    }

    /* Lines of a card sit close together; the card itself carries the padding. */
    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row .fi-ta-text:not(.fi-inline),
    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td {
        padding-block: 0;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row .fi-ta-text {
        padding-inline: 0;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td[data-primary]::before,
    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td[data-empty]:not([data-primary]),
    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell,
    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td:has(> .fi-ta-record-checkbox) {
        display: none;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td[data-primary]::before {
        content: none;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td > :is(.fi-ta-col, .fi-ta-text, .fi-ta-cell-content) {
        padding: 0;
        min-width: 0;
        text-align: end;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td[data-primary] > :is(.fi-ta-col, .fi-ta-text, .fi-ta-cell-content) {
        text-align: start;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table .fi-ta-text:not(.fi-wrapped) .fi-ta-text-item {
        max-width: 60vw;
    }

    /* Row actions: one line at the foot of the card, easy to reach with a thumb. */
    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td:has(> .fi-ta-actions),
    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td:has(.fi-ta-actions) {
        justify-content: flex-end;
        padding-top: 0.375rem;
    }

    .fi-page .fi-ta-content-ctn .fi-ta-table > tbody > tr.fi-ta-row > td .fi-ta-actions {
        padding: 0;
    }

    /* Quick-filter chips: one row that scrolls sideways instead of four wrapped rows. */
    .fi-ta-header-ctn:has(.crm-chip) {
        padding: 0.625rem 1rem;
    }

    .fi-ta-header-ctn:has(.crm-chip) > .fi-ta-header {
        flex-basis: 100%;
    }

    .fi-ta-header-ctn:has(.crm-chip) > .fi-ta-header .fi-ta-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.125rem;
    }

    .fi-ta-header-ctn:has(.crm-chip) > .fi-ta-header .fi-ta-actions > * {
        flex: none;
    }
}

/* Single-entry repeaters used as a plain group of fields (the primary contact on customer and
   vendor forms): no card inside the card. */
.crm-flat-repeater .fi-fo-repeater-item {
    border: 0;
    box-shadow: none;
    background: transparent;
    --tw-ring-shadow: 0 0 #0000;
}

.crm-flat-repeater .fi-fo-repeater-item-content {
    padding: 0;
}

.crm-flat-repeater .fi-fo-repeater-item-header {
    display: none;
}

/* Approve dialog: the deal as an enterprise review table (app/Modules/Workflow/Resources/views/filament/actions/approval-review.blade.php). */
.crm-review { overflow-x: auto; border: 1px solid var(--crm-border); border-radius: var(--crm-radius-control); background: var(--crm-surface); }
.crm-review table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--crm-text-meta); font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-review th, .crm-review td { padding: 0.5rem 0.5rem; white-space: nowrap; border-top: 1px solid var(--crm-border-subtle); vertical-align: middle; }
.crm-review thead th { border-top: 0; background: var(--crm-surface-muted); color: var(--crm-text-faint); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.crm-review thead tr.crm-review-groups th { text-align: center; border-bottom: 1px solid var(--crm-border); color: var(--crm-text); }
.crm-review thead tr.crm-review-groups th + th { border-inline-start: 1px solid var(--crm-border); }
.crm-review thead tr.crm-review-cols th { border-top: 0; }
.crm-review .crm-review-num { text-align: end; }
.crm-review .crm-review-group-start { border-inline-start: 1px solid var(--crm-border-subtle); }
.crm-review th:first-child, .crm-review td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--crm-surface); text-align: start; font-weight: 500; color: var(--crm-text-strong); }
.crm-review thead th:first-child { background: var(--crm-surface-muted); z-index: 2; }
/* The item name wraps so the numeric columns and the floor badge fit the dialog width. */
.crm-review td:first-child { white-space: normal; min-width: 9rem; max-width: 13rem; }
.crm-review .crm-review-sub { display: block; font-size: 0.6875rem; font-weight: 400; color: var(--crm-text-faint); }
.crm-review tfoot td { border-top: 2px solid var(--crm-border-strong); font-weight: 700; color: var(--crm-text-strong); background: var(--crm-surface-muted); }
.crm-review tfoot td:first-child { background: var(--crm-surface-muted); }
.crm-review-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--crm-radius-pill); font-size: 0.75rem; font-weight: 600; background: var(--crm-surface-sunken); color: var(--crm-text); }
.crm-review-badge-danger { background: var(--crm-danger-bg); color: var(--crm-danger-text); }

/* ── Busy buttons and progress (UX-SAFE-01; resources/js/crm-busy.js) ──────────────────
   - #crm-progress: the thin top bar for page loads and Livewire requests slower than 150 ms.
   - [data-crm-busy]: a control whose request is running; its clicks are ignored and it shows a spinner
     (Filament's own buttons show theirs, .fi-loading-indicator).
   - .fi-ta-table-loading-ctn: a deferred table (reports, outstanding) shows placeholder rows
     until its records arrive.
   Motion is dropped for people who ask for reduced motion. */
#crm-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1031;
    height: var(--crm-progress-height);
    background: var(--crm-progress-color);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
}

#crm-progress.is-active {
    opacity: 1;
    animation: crm-progress-grow 8s cubic-bezier(0.1, 0.6, 0.2, 1) forwards;
}

#crm-progress.is-done {
    transform: scaleX(1);
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}

@keyframes crm-progress-grow {
    0% { transform: scaleX(0.08); }
    100% { transform: scaleX(0.92); }
}

/* Clicks are swallowed by the script, not by pointer-events: none, so they never fall through to
   a clickable row behind the control. */
[data-crm-busy] {
    cursor: progress;
}

/* Busy controls are aria-disabled, not disabled (that would drop the keyboard focus); Filament's own
   disabled buttons are already dimmed by Filament. */
[data-crm-busy]:not(:disabled) {
    opacity: var(--crm-busy-opacity);
}

/* The spinner is out of the flow, so a busy control keeps its size and nothing next to it moves;
   the script makes a static control its containing block with .crm-busy-anchor. */
.crm-busy-anchor {
    position: relative;
}

.crm-busy-spinner {
    position: absolute;
    inset-inline-end: 0.5em;
    inset-block-start: 50%;
    width: 0.875em;
    height: 0.875em;
    margin: -0.4375em 0 0 0;
    pointer-events: none;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 9999px;
    animation: crm-busy-spin 0.7s linear infinite;
}

@keyframes crm-busy-spin {
    to { transform: rotate(360deg); }
}

.fi-ta-table-loading-ctn {
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.75rem;
    height: auto !important;
    min-height: 8rem;
    padding: 1rem;
}

.fi-ta-table-loading-ctn::before {
    content: '';
    display: block;
    height: 7.5rem;
    border-radius: var(--crm-radius-pill);
    /* Five placeholder rows of 1rem with 0.625rem gaps. */
    background: repeating-linear-gradient(
        to bottom,
        var(--crm-surface-sunken) 0 1rem,
        transparent 1rem 1.625rem
    );
    animation: crm-skeleton-pulse 1.4s ease-in-out infinite;
}

.fi-ta-table-loading-ctn > .fi-loading-indicator {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    #crm-progress.is-active {
        animation: none;
        transform: scaleX(0.6);
    }
    #crm-progress.is-done {
        transition: none;
    }
    .crm-busy-spinner {
        animation: none;
        border-inline-end-color: currentColor;
        opacity: 0.6;
    }
    .fi-ta-table-loading-ctn::before {
        animation: none;
    }
}