/**
 * ERP Sidebar: reuse admin panel sidebar layout/behavior,
 * but keep ERP's existing primary color palette.
 *
 * This file is a copy of the admin sidebar stylesheet with the
 * root color overrides removed so ERP colors stay as configured
 * in the ERP AdminPanelProvider.
 */

/* No logo / brand block in sidebar header */
.fi-sidebar .fi-sidebar-header-logo-ctn {
    display: none !important;
}

/* Shell — uses Filament primary palette (--primary-* from AdminPanelProvider colors) */
.fi-sidebar.fi-main-sidebar {
    background-color: var(--primary-800) !important;
    border-inline-end: 1px solid rgb(255 255 255 / 0.14);
    border-start-end-radius: 1.25rem;
    border-end-end-radius: 1.25rem;
}

/*
 * Collapsed desktop rail: Filament does not pin width to --collapsed-sidebar-width, so the
 * rail + icon column width drift with scrollbar-gutter and default px-6 nav padding. That
 * changes Floating UI’s reference rect on wide vs short viewports. Lock the rail and use
 * compact horizontal padding only while collapsed.
 */
@media (min-width: 1024px) {
    .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar.fi-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width);
        min-width: var(--collapsed-sidebar-width);
        max-width: var(--collapsed-sidebar-width);
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        scrollbar-gutter: auto !important;
        padding-inline: 6px !important;
        box-sizing: border-box;
    }
}

/* Navigation items — inactive */
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn {
    background-color: transparent !important;
}

.fi-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: rgb(255 255 255) !important;
}

/* Hover only for non-active links */
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.1) !important;
}

/* Active row — white pill + primary type */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255) !important;
    border-radius: 0.75rem !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--primary-700) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--primary-700) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:focus-visible > .fi-sidebar-item-label {
    color: var(--primary-700) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:focus-visible > .fi-icon {
    color: var(--primary-700) !important;
}

/* Sidebar global search layout */
.fi-sidebar .fi-global-search-ctn {
    position: relative;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: calc(var(--spacing) * 2) !important;
}

.fi-sidebar .fi-global-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-sidebar .fi-global-search-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-sidebar .fi-global-search-field .fi-input-wrp {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-sidebar .fi-global-search-results-ctn {
    z-index: 50;
    width: 100% !important;
    max-width: none !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    box-sizing: border-box;
}

/* Flat dropdown — no “Pages” / “Resources” headings */
.fi-sidebar .fi-global-search-result-group-header {
    display: none !important;
}

.fi-sidebar .fi-global-search-field .fi-input {
    color: var(--gray-950);
}

.fi-sidebar .fi-global-search-field .fi-input-wrp-suffix {
    color: var(--gray-500);
}

.fi-sidebar .fi-global-search-field .fi-input-wrp-suffix .fi-icon {
    color: var(--gray-500) !important;
}

.fi-sidebar .fi-global-search-field input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    margin-inline-start: calc(var(--spacing) * 1);
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
}

/* Nested item connectors */
.fi-sidebar .fi-sidebar-item-grouped-border-part {
    background-color: rgb(255 255 255 / 0.55) !important;
}

.fi-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar .fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgb(255 255 255 / 0.35) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-grouped-border-part {
    background-color: var(--primary-700) !important;
}

/*
 * Sidebar density: Filament defaults py-8 + gap-y-7 on .fi-sidebar-nav add a lot of
 * vertical slack (extra scroll). Tighten padding/gaps above Dashboard and before footer.
 */
.fi-sidebar .fi-sidebar-nav {
    padding-block: calc(var(--spacing) * 2) !important;
    row-gap: calc(var(--spacing) * 2) !important;
}

/* Navigation groups */
.fi-sidebar .fi-sidebar-nav-groups {
    gap: calc(var(--spacing) * 2) !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
    gap: calc(var(--spacing) * 1) !important;
}

.fi-sidebar .fi-sidebar-group-label {
    color: rgb(255 255 255 / 0.88) !important;
}

.fi-sidebar .fi-sidebar-group-btn > .fi-icon {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-group-collapse-btn .fi-icon {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn {
    background-color: transparent !important;
}

.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.1) !important;
}

.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: rgb(255 255 255) !important;
}

/*
 * Collapsed sidebar: keep overflow-x visible on the <aside> so the ::after flyout bridge (below) can sit
 * beside the rail. Do NOT set overflow-x: visible on .fi-sidebar-nav — with overflow-y: auto the spec
 * forces overflow-x to auto and a horizontal scrollbar appears when any child is wider than the nav
 * (e.g. old negative-margin dropdown hacks).
 */
.fi-sidebar:not(.fi-sidebar-open) {
    overflow-x: visible;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
    overflow-x: hidden;
}

/*
 * Gap between the rail and the flyout is empty DOM space — pointer leaves <aside>, sidebar mouseleave runs,
 * menu closes. JS toggles .nx-sidebar-flyout-open while a panel is visible; this invisible strip keeps the
 * pointer “inside” the sidebar until it reaches the panel (bridge z-index below panel so links stay clickable).
 */
.fi-sidebar:not(.fi-sidebar-open).nx-sidebar-flyout-open::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 100%;
    width: 8rem;
    z-index: 35;
    pointer-events: auto;
    background: transparent;
}

[dir='rtl'] .fi-sidebar:not(.fi-sidebar-open).nx-sidebar-flyout-open::after {
    inset-inline-start: auto;
    inset-inline-end: 100%;
}

/* Flyout panel chrome — position comes from Floating UI + dropdown offset only (no extra margin). */
.fi-sidebar .fi-sidebar-group .fi-dropdown-panel {
    background-color: var(--primary-700) !important;
    border: 1px solid rgb(255 255 255 / 0.14) !important;
    z-index: 60;
}

.fi-sidebar .fi-sidebar-group .fi-dropdown-panel .fi-dropdown-header {
    color: rgb(255 255 255) !important;
    font-weight: var(--font-weight-semibold, 600);
    border-bottom: 1px solid rgb(255 255 255 / 0.22);
    padding-bottom: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 1);
}

.fi-sidebar .fi-sidebar-group .fi-dropdown-panel .fi-dropdown-header span {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-group .fi-dropdown-list-item {
    color: rgb(255 255 255) !important;
}

/* Labels use .fi-dropdown-list-item-label + fi-color CSS vars; force legible text on dark panel */
.fi-sidebar .fi-sidebar-group .fi-dropdown-panel .fi-dropdown-list-item .fi-dropdown-list-item-label {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-group .fi-dropdown-panel .fi-dropdown-list-item.fi-color {
    --text: rgb(255 255 255);
    --hover-text: rgb(255 255 255);
    --dark-text: rgb(255 255 255);
    --dark-hover-text: rgb(255 255 255);
}

.fi-sidebar .fi-sidebar-group .fi-dropdown-list-item .fi-icon {
    color: rgb(255 255 255 / 0.86) !important;
}

.fi-sidebar .fi-sidebar-group .fi-dropdown-list-item:hover,
.fi-sidebar .fi-sidebar-group .fi-dropdown-list-item:focus-visible {
    background-color: rgb(255 255 255 / 0.12) !important;
}

/* Hide default Filament collapse icon-buttons (replaced by nx-sidebar-collapse-controls) */
.fi-sidebar .fi-sidebar-header .fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar .fi-sidebar-header .fi-sidebar-close-collapse-sidebar-btn {
    display: none !important;
}

/* Header stacks collapse row above hidden logo slot */
.fi-sidebar .fi-sidebar-header {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    row-gap: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 1);
}

/*
 * Collapsed rail: align header with nav (6px gutters) and make every row + hover fill
 * the full inner width so the hamburger matches centered icons and hovers are not “inset”.
 */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
    padding-inline: 6px !important;
}

/* Filament uses -mx-2 here; when collapsed it offsets rows vs header and shrinks hover bars */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
    margin-inline: 0 !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups > li {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > .fi-sidebar-item-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/*
 * Group icon sits inside .fi-dropdown > .fi-dropdown-trigger > button (not direct child of .fi-sidebar-group),
 * so a ">" selector never matched — hover stayed a small chip. Stretch the whole chain to full rail width.
 */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .fi-dropdown {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .fi-dropdown-trigger {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .fi-sidebar-group-dropdown-trigger-btn {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    box-sizing: border-box;
}

/* Custom collapse / expand controls */
.fi-sidebar .nx-sidebar-collapse-controls {
    width: 100%;
}

.fi-sidebar .nx-sidebar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: rgb(255 255 255);
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    transition-property: background-color, color;
    transition-duration: 150ms;
}

.fi-sidebar .nx-sidebar-btn:hover,
.fi-sidebar .nx-sidebar-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.1);
}

.fi-sidebar .nx-sidebar-btn-collapse {
    width: 100%;
    justify-content: flex-start;
}

.fi-sidebar .nx-sidebar-btn-expand {
    margin-inline: auto;
    background-color: transparent;
    padding: calc(var(--spacing) * 2);
}

.fi-sidebar:not(.fi-sidebar-open) .nx-sidebar-btn-expand {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    justify-content: center;
    box-sizing: border-box;
}

.fi-sidebar .nx-sidebar-btn-expand:hover,
.fi-sidebar .nx-sidebar-btn-expand:focus-visible {
    background-color: rgb(255 255 255 / 0.1);
}

.fi-sidebar .nx-sidebar-btn-icon {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    flex-shrink: 0;
}

.fi-sidebar .nx-sidebar-collapse-glyph {
    display: inline-flex;
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
}

/* Footer — logout only */
.fi-sidebar .nx-sidebar-footer-logout-only.fi-sidebar-footer {
    margin-inline: calc(var(--spacing) * 4);
    margin-block: calc(var(--spacing) * 1);
    padding-top: calc(var(--spacing) * 2);
    border-top: 1px solid rgb(255 255 255 / 0.14);
}

.fi-sidebar .nx-sidebar-logout-form {
    margin: 0;
}

.fi-sidebar .nx-sidebar-logout-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: rgb(255 215 215);
    background-color: transparent;
    cursor: pointer;
    outline: none;
    transition-property: background-color, color;
    transition-duration: 150ms;
}

.fi-sidebar .nx-sidebar-logout-btn:hover,
.fi-sidebar .nx-sidebar-logout-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.1);
    color: rgb(255 235 235);
}

.fi-sidebar .nx-sidebar-logout-icon {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    flex-shrink: 0;
}

.fi-sidebar:not(.fi-sidebar-open) .nx-sidebar-logout-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

.fi-sidebar:not(.fi-sidebar-open) .nx-sidebar-footer-logout-only.fi-sidebar-footer {
    margin-inline: 6px !important;
}

/* Tab badges: readable counts when primary palette uses a single shade */
.fi-tabs-item .fi-badge.fi-color {
    color: rgb(75, 85, 99) !important;
    background-color: rgb(243, 244, 246) !important;
    --tw-ring-color: rgb(75 85 99 / 0.1) !important;
}

/* Table active filter badges: centralized style for all pages */
.fi-ta-filter-indicators .fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color {
    color: rgb(var(--primary-800)) !important;
    background-color: rgb(var(--primary-50)) !important;
    border: 1px solid rgb(var(--primary-200)) !important;
}

.fi-ta-filter-indicators .fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color .fi-badge-delete-btn > .fi-icon {
    color: rgb(var(--primary-700) / 0.75) !important;
}

/* MultiSelect selected badges: centralized style for all pages */
.fi-select-input .fi-select-input-value-badges-ctn .fi-badge.fi-color {
    color: rgb(var(--primary-800)) !important;
    background-color: rgb(var(--primary-50)) !important;
    border: 1px solid rgb(var(--primary-200)) !important;
}

.fi-select-input .fi-select-input-value-badges-ctn .fi-badge.fi-color .fi-badge-delete-btn > .fi-icon {
    color: rgb(var(--primary-700) / 0.75) !important;
}

/* ==========================================================================
   Fullscreen iframe pages
   --------------------------------------------------------------------------
   Many custom ERP pages embed a legacy controller view via an <iframe> as
   the first child of the page slot. Filament v4 wraps the slot inside a
   CSS grid (.fi-page-content) and adds horizontal padding on .fi-main, so
   the iframe naturally collapses to a single grid column with side gutters.

   These rules detect the iframe layout via :has() and stretch every
   ancestor to give the iframe the full visible area.
   ========================================================================== */

/* Keep horizontal gutters (main sidebar → content, content → viewport edge). */
.fi-main:has(.fi-page-content > div > iframe) {
    max-width: 100% !important;
    padding-inline: clamp(1rem, 3vw, 2rem) !important;
}

.fi-main:has(.fi-page-content > div > iframe) .fi-page,
.fi-main:has(.fi-page-content > div > iframe) .fi-page-header-main-ctn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: min(100vh, 100dvh) !important;
    overflow: hidden;
}

.fi-main:has(.fi-page-content > div > iframe) .fi-page-main {
    padding: 0 !important;
    margin: 0 !important;
    /* Space between Filament sub-navigation column and embedded page */
    gap: clamp(1rem, 2.5vw, 1.75rem) !important;
    height: 100% !important;
    width: 100% !important;
}

.fi-main:has(.fi-page-content > div > iframe) .fi-page-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
    row-gap: 0 !important;
}

.fi-main:has(.fi-page-content > div > iframe) .fi-page-content > div {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: min(100vh, 100dvh) !important;
    max-height: min(100vh, 100dvh) !important;
}

.fi-main:has(.fi-page-content > div > iframe) .fi-page-content > div > iframe {
    display: block;
    width: 100% !important;
    min-height: min(100vh, 100dvh) !important;
    height: 100% !important;
}

/* Custom panel pages (Filament Page / App\Filament\Pages — not resource CRUD): left/right inset */
.fi-page:not([class*='fi-resource-']) .fi-page-header-main-ctn {
    padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Iframe pages: outer gutters come from .fi-main; avoid double inset here */
.fi-main:has(.fi-page-content > div > iframe) .fi-page-header-main-ctn {
    padding-inline: 0 !important;
}

/* Activity log export dropdown: compact rows, neutral (no green/red) */
.fi-ac-export-dropdown-compact .fi-dropdown-list {
    gap: 0;
    padding: 0.125rem;
}

.fi-ac-export-dropdown-compact .fi-dropdown-list-item {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.25;
}

.fi-ac-export-dropdown-compact .fi-dropdown-list-item > .fi-icon {
    color: rgb(107 114 128);
}

.fi-ac-export-dropdown-compact .fi-dropdown-list-item-label {
    color: rgb(55 65 81);
}

.fi-ac-export-dropdown-compact .fi-dropdown-list-item.fi-color:hover,
.fi-ac-export-dropdown-compact .fi-dropdown-list-item.fi-color:focus-visible {
    background-color: rgb(249 250 251);
}

/* Bulk Import/Export dropdown */
.fi-ac-bulk-import-export-dropdown .fi-dropdown-list {
    gap: 0;
    padding: 0.25rem;
    min-width: 11rem;
}

.fi-ac-bulk-import-export-dropdown .fi-dropdown-list-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.fi-ac-bulk-import-export-dropdown .fi-dropdown-list-item > .fi-icon {
    color: rgb(107 114 128);
}

/* Customer import slide-over wizard */
.customer-import-helper-text {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
    line-height: 1.5;
}

.customer-import-sample-link {
    color: rgb(37 99 235);
    font-weight: 600;
    text-decoration: none;
}

.customer-import-sample-link:hover {
    text-decoration: underline;
}

.customer-import-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.customer-import-map-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: rgb(17 24 39);
}

.customer-import-map-subtitle {
    margin: 0;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

.customer-import-map-row {
    align-items: center;
    border-bottom: 1px solid rgb(243 244 246);
    padding-bottom: 0.5rem;
}

.customer-import-field-label .fi-fo-placeholder-content {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55 65 81);
}

.customer-import-summary-card {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    padding: 1.25rem;
    background: rgb(255 255 255);
}

.customer-import-summary-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: rgb(17 24 39);
}

.customer-import-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.customer-import-summary-stat {
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.customer-import-summary-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(75 85 99);
}

.customer-import-summary-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.customer-import-summary-stat--total {
    background: rgb(255 255 255);
    border: 1px solid rgb(229 231 235);
    color: rgb(17 24 39);
}

.customer-import-summary-stat--duplicate {
    background: rgb(254 252 232);
    color: rgb(217 119 6);
}

.customer-import-summary-stat--invalid {
    background: rgb(254 242 242);
    color: rgb(220 38 38);
}

.customer-import-summary-stat--valid {
    background: rgb(240 253 244);
    color: rgb(22 163 74);
}

.customer-import-summary-note {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

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