/* Line-item repeater colours, light and dark. */
:root {
    --crm-compact-bg: #ffffff;
    --crm-compact-border: #e5e7eb;
}

.dark {
    --crm-compact-bg: transparent;
    --crm-compact-border: rgb(255 255 255 / 0.1);
}

.filament-compact .fi-fo-repeater-item {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: 1px solid var(--crm-compact-border) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: var(--crm-compact-bg) !important;
}

.filament-compact .fi-fo-repeater-item:last-child {
    border-bottom: none !important;
}

.filament-compact .fi-fo-repeater-item>.grid {
    flex: 1 !important;
    gap: 0 !important;
    display: grid !important;
    grid-auto-flow: column;
}

.filament-compact .fi-fo-repeater-item>.grid>div {
    border-right: 1px solid var(--crm-compact-border) !important;
    padding: 10px !important;
    margin: 0 !important;
}

.filament-compact .fi-fo-repeater-item>.grid>div:last-child {
    border-right: none !important;
}

.filament-compact .fi-fo-repeater-item-header {
    order: 2 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important;
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.filament-compact .fi-fo-repeater-item-header-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    margin: 0 !important;
}

.filament-compact [data-action="add-item-below"],
.filament-compact .fi-fo-repeater-delete-action {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.filament-compact [data-action="add-item-below"] {
    color: var(--primary-600) !important;
}

.filament-compact .fi-fo-repeater-delete-action {
    color: var(--danger-600) !important;
}

.filament-compact .fi-fo-repeater-item:not(:first-child) .fi-fo-field-label-col {
    display: none !important;
}

.invoice-past {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: var(--danger-600);
    border-radius: 9999px;
    line-height: 1;
    margin-right: 6px
}

.trix-content ul li::marker,
.fi-fo-rich-editor ul li::marker,
.prose ul li::marker {
    color: currentColor;
}

.trix-content ol li::marker,
.fi-fo-rich-editor ol li::marker,
.prose ol li::marker {
    color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — filament-compact repeater
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── lg / small laptop  (1024 – 1279 px, 6 cols) ─────────────────────────
   Switch auto-flow to row so the 6-col grid wraps into two readable rows
   instead of squishing every field into one narrow horizontal strip.        */
@media (min-width: 1024px) and (max-width: 1279px) {
    .filament-compact .fi-fo-repeater-item > .grid {
        grid-auto-flow: row !important;
    }

    .filament-compact .fi-fo-repeater-item-header {
        align-items: flex-start !important;
        padding-top: 10px !important;
    }
}

/* ── sm / tablet  (640 – 1023 px, 4 cols) ───────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
    .filament-compact .fi-fo-repeater-item > .grid {
        grid-auto-flow: row !important;
    }

    .filament-compact .fi-fo-repeater-item > .grid > div {
        padding: 8px !important;
    }

    .filament-compact .fi-fo-repeater-item-header {
        align-items: flex-start !important;
        padding-top: 8px !important;
    }
}

/* ── mobile  (< 640 px) ─────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .filament-compact .fi-fo-repeater-item {
        flex-direction: column !important;
    }

    .filament-compact .fi-fo-repeater-item > .grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .filament-compact .fi-fo-repeater-item > .grid > div {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--crm-compact-border) !important;
        padding: 8px 10px !important;
    }

    .filament-compact .fi-fo-repeater-item > .grid > div:last-child {
        border-bottom: none !important;
    }

    .filament-compact .fi-fo-repeater-item-header {
        order: 0 !important;
        width: 100% !important;
        justify-content: flex-end !important;
        padding: 6px 10px !important;
        border-bottom: 1px solid var(--crm-compact-border) !important;
    }

    .filament-compact .fi-fo-repeater-item:not(:first-child) .fi-fo-field-label-col {
        display: block !important;
    }
}
/* Customer status on list rows: leads (indigo), dormant (amber), churned (red). */
.fi-ta-row.crm-row-lead > td:first-child { box-shadow: inset 4px 0 0 var(--primary-400); }
.fi-ta-row.crm-row-dormant > td:first-child { box-shadow: inset 4px 0 0 var(--warning-500); }
.fi-ta-row.crm-row-dormant { background-color: rgba(245, 158, 11, 0.06); }
.fi-ta-row.crm-row-churned > td:first-child { box-shadow: inset 4px 0 0 var(--danger-500); }
.fi-ta-row.crm-row-churned { background-color: rgba(239, 68, 68, 0.06); }
.fi-ta-row.crm-row-lost > td:first-child { box-shadow: inset 4px 0 0 var(--gray-400); }
.fi-ta-row.crm-row-lost { opacity: 0.75; }

/* ── single-line items (ItemsRepeater::singleLine(), the quote form) ─────────
   Rows stay in normal flow (a span-based grid, never auto-flow by column). When the repeater is
   at least 80rem wide it is one line per item (24 columns): tighter cells, and a long selected
   value is cut with an ellipsis instead of wrapping letter by letter. */
.filament-compact--single .fi-fo-repeater-item .fi-grid.fi-sc {
    grid-auto-flow: row !important;
}

@container (min-width: 80rem) {
    .filament-compact--single .fi-fo-repeater-item .fi-grid.fi-sc > div {
        padding: 6px !important;
    }

    .filament-compact--single .fi-select-input-value-ctn,
    .filament-compact--single .fi-select-input-value-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}