/*
    Grove — the panel's look (docs/design/grove-v2, docs/tasks/grove-redesign.md).

    A plain stylesheet, linked after Filament's (AdminPanelProvider, the
    STYLES_AFTER hook): the production image has no Node step, and nothing
    here needs one. Filament's CSS sits in cascade layers and this file does
    not, so a rule here beats Filament's whatever their specificity — no
    !important needed, and none used.

    Two halves:

    1. Tokens (`--g-*`), light on :root and dark under `.dark`, which Filament
       puts on <html>. Every colour our own views draw reads one of these, so
       dark mode is the same CSS. Filament's own components take the same
       colours from the palettes in App\Filament\Theme\GrovePalette.

    2. Filament's components brought to the design: radii, borders instead
       of shadows, type, the table head, pills, segmented tabs, inputs.

    The selectors are Filament's `fi-*` classes, which a Filament upgrade can
    move. Those this file depends on, so a bump can be checked against them:
    fi-body fi-main fi-header fi-header-heading fi-breadcrumbs fi-section
    fi-ta-ctn fi-ta-header-cell fi-ta-cell fi-ta-row fi-btn fi-input-wrp
    fi-badge fi-tabs fi-tabs-item fi-modal-window fi-dropdown-panel
    fi-checkbox-input fi-toggle fi-no-notification fi-wi-stats-overview-stat
    fi-pagination fi-fo-field-label-content fi-tenant-menu-trigger
    fi-user-menu-trigger fi-avatar fi-main-ctn fi-layout-sidebar-toggle-btn-ctn
    fi-sidebar-close-overlay.
*/

/* ------------------------------------------------------------------ tokens */

:root {
    --g-bg: #F3F4F1;
    --g-surface: #FFFFFF;
    --g-surface-2: #F2F4F0;
    --g-input-bg: #FFFFFF;
    --g-border: #DCE0D8;
    --g-border-soft: #ECEFE9;
    --g-border-strong: #B8C0B4;
    --g-text: #111813;
    --g-muted: #5D6A60;
    --g-accent: #1F6F4A;
    --g-accent-text: #FFFFFF;
    --g-accent-soft: #E2F0E8;
    --g-ok: #1F6F4A;
    --g-ok-soft: #E2F0E8;
    --g-warn: #A15C00;
    --g-warn-soft: #FFF1DB;
    --g-danger: #B3261E;
    --g-danger-soft: #FCE8E6;
    --g-info: #2457A6;
    --g-info-soft: #E6EEFA;
    --g-rail-bg: #10261B;
    --g-rail-text: #C6D8CC;
    --g-rail-muted: #7E9C89;
    --g-rail-active-bg: #1E3D2C;
    --g-rail-border: #2E5A40;
    --g-sub-bg: #FAFBF9;
    --g-toggle-off: #D3D9D0;
    --g-skeleton: #E7EBE4;
    --g-overlay: rgba(16, 38, 27, .32);
    --g-shadow: 0 18px 50px rgba(16, 38, 27, .18);
    --g-inverse-bg: #10261B;
    --g-inverse-text: #E6F0EA;
    --g-brand: #E0337A;
    --g-focus: rgba(82, 201, 143, .45);

    --g-font: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --g-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --g-radius-card: 6px;
    --g-radius-control: 4px;
    --g-radius-overlay: 8px;

    --g-rail-width: 76px;
    --g-sub-width: 232px;
    --g-bar-height: 56px;

    /*
        Filament's own radii, which every component reads: buttons, inputs and
        pills at 4, cards at 6. Overlays are set one by one below.
    */
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 6px;
}

.dark {
    --g-bg: #0C120F;
    --g-surface: #131B16;
    --g-surface-2: #19231D;
    --g-input-bg: #0F1612;
    --g-border: #25322A;
    --g-border-soft: #1C271F;
    --g-border-strong: #3B4C41;
    --g-text: #E4ECE6;
    --g-muted: #93A79A;
    --g-accent: #52C98F;
    --g-accent-text: #06120B;
    --g-accent-soft: rgba(82, 201, 143, .13);
    --g-ok: #52C98F;
    --g-ok-soft: rgba(82, 201, 143, .13);
    --g-warn: #F2B45A;
    --g-warn-soft: rgba(242, 180, 90, .13);
    --g-danger: #F28B82;
    --g-danger-soft: rgba(242, 139, 130, .14);
    --g-info: #86AEF5;
    --g-info-soft: rgba(134, 174, 245, .14);
    --g-rail-bg: #070D0A;
    --g-rail-text: #B5C9BB;
    --g-rail-muted: #68836F;
    --g-rail-active-bg: #17291E;
    --g-rail-border: #2A4535;
    --g-sub-bg: #0F1712;
    --g-toggle-off: #2C3A31;
    --g-skeleton: #1C2721;
    --g-overlay: rgba(0, 0, 0, .55);
    --g-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    --g-inverse-bg: #E4ECE6;
    --g-inverse-text: #0C120F;
}

/* -------------------------------------------------------------------- page */

.fi-body {
    background-color: var(--g-bg);
    color: var(--g-text);
    font-feature-settings: 'kern';
}

/* Numbers line up: SKUs, codes, counts. */
.font-mono,
code,
kbd,
.g-mono {
    font-family: var(--g-mono);
    font-variant-numeric: tabular-nums;
}

/* Main: 28px above, 64 below, 20 between the header and what follows. */
.fi-page-header-main-ctn {
    padding-block: 28px 64px;
    row-gap: 20px;
}

.fi-page-content {
    row-gap: 20px;
}

@media (min-width: 1024px) {
    .fi-main {
        padding-inline: 32px;
    }
}

/* Page header: breadcrumb 13 muted → H1 28/600. */
.fi-breadcrumbs {
    font-size: 13px;
}

.fi-breadcrumbs a,
.fi-breadcrumbs span {
    color: var(--g-muted);
}

.fi-header-heading {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--g-text);
}

.fi-header-subheading {
    font-size: 14px;
    color: var(--g-muted);
}

/* Section and eyebrow labels. */
.g-eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g-muted);
}

/* ------------------------------------------------------------------- cards */

/*
    Cards: surface, one 1px border, radius 6, no shadow. Filament draws its
    border as a ring (box-shadow), so the ring takes the border colour and the
    drop shadow goes.
*/
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-tabs:not(.fi-contained),
.fi-dropdown-panel,
.fi-modal-window {
    --tw-shadow: 0 0 #0000;
    --tw-ring-color: var(--g-border);
    background-color: var(--g-surface);
}

.fi-section-header {
    padding: 16px 20px;
}

.fi-section-header-heading {
    font-size: 15px;
    font-weight: 600;
}

.fi-section-header-description {
    color: var(--g-muted);
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn {
    border-color: var(--g-border-soft);
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    border-color: var(--g-border-soft);
}

/* Dashboard stat cards: an eyebrow label, then a 30/500 value (Grove R4). */
.fi-wi-stats-overview-stat-label {
    color: var(--g-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Dashboard side column (Grove R4): Workflow and Connections cards. */
.pim-side-card {
    overflow: hidden;
    border-radius: var(--g-radius-card);
    background: var(--g-surface);
    box-shadow: inset 0 0 0 1px var(--g-border);
}

.pim-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--g-border-soft);
}

.pim-side-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--g-text);
}

.pim-side-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--g-accent);
}

.pim-side-body {
    padding: 16px 20px;
}

.pim-side-empty {
    padding: 16px 20px;
    font-size: 13px;
    color: var(--g-muted);
}

.pim-wf-sentence {
    margin: 8px 0 12px;
    font-size: 14px;
    color: var(--g-text);
}

.pim-wf-bar {
    display: flex;
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--g-surface-2);
}

.pim-wf-seg { display: block; height: 100%; }
.pim-wf-draft { background: var(--g-border-strong); }
.pim-wf-in_review { background: var(--g-info); }
.pim-wf-ready { background: var(--g-ok); }

.pim-wf-legend {
    display: grid;
    gap: 2px;
    margin-top: 12px;
}

.pim-wf-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 14px;
    color: var(--g-text);
}

.pim-wf-item:hover { color: var(--g-accent); }
.pim-wf-key { width: 8px; height: 8px; border-radius: 2px; }

.pim-wf-count {
    font-family: var(--g-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.pim-conn-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--g-border-soft);
    color: var(--g-text);
}

.pim-side-head + .pim-conn-row { border-top: 0; }
a.pim-conn-row:hover { background: var(--g-surface-2); }
.pim-conn-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.pim-conn-dot-ok { background: var(--g-ok); }
.pim-conn-dot-off { background: var(--g-border-strong); }
.pim-conn-dot-bad { background: var(--g-danger); }
.pim-conn-text { display: grid; gap: 1px; min-width: 0; }
.pim-conn-name { font-size: 14px; overflow-wrap: anywhere; }
.pim-conn-line { font-size: 12px; color: var(--g-muted); }
.pim-conn-row[data-state="bad"] .pim-conn-line { color: var(--g-danger); }

/* Recently changed (Grove R4): SKU · name · pill · who · when. */
.pim-recent-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) minmax(0, 320px) minmax(0, 140px) 110px;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-top: 1px solid var(--g-border-soft);
    font-size: 14px;
    color: var(--g-text);
}

.pim-side-head + .pim-recent-row { border-top: 0; }
a.pim-recent-row:hover { background: var(--g-surface-2); }
.pim-recent-sku { font-family: var(--g-mono); font-size: 13px; color: var(--g-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pim-recent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pim-recent-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--g-muted); }
.pim-recent-when { text-align: right; font-size: 13px; color: var(--g-muted); white-space: nowrap; }

.pim-recent-pill {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.pim-recent-pill-cell { min-width: 0; }
.pim-recent-pill-count { background: var(--g-surface-2); color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-border); }

.pim-recent-detail {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--g-mono);
    font-size: 11.5px;
    color: var(--g-muted);
}

.pim-recent-pill-neutral { background: var(--g-surface-2); color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-border); font-family: var(--g-mono); }
.pim-recent-pill-success { background: var(--g-ok-soft); color: var(--g-ok); }
.pim-recent-pill-danger { background: var(--g-danger-soft); color: var(--g-danger); }
.pim-recent-pill-warning { background: var(--g-warn-soft); color: var(--g-warn); }
.pim-recent-pill-info { background: var(--g-info-soft); color: var(--g-info); }

@media (max-width: 639px) {
    .pim-recent-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
    }

    .pim-recent-sku { grid-column: 1; }
    .pim-recent-when { grid-column: 2; grid-row: 1; }
    .pim-recent-name { grid-column: 1 / -1; }
    .pim-recent-pill-cell { grid-column: 1; }
    .pim-recent-who { grid-column: 2; text-align: right; }
}

/* "Categories 2,054", "Assets 44,848 · 11.7 GB": a page's count in mono beside its title (Grove R5). */
.pim-heading-count {
    margin-left: 8px;
    font-family: var(--g-mono);
    font-size: 15px;
    font-weight: 400;
    color: var(--g-muted);
}

/*
 * A 250px card beside the table (Grove R5): the asset library's Folders and
 * the attributes' groups share it — `.pim-folders` / `.pim-folder` are the
 * card and its rows in both.
 */
.pim-asset-list > .fi-sc,
.pim-attribute-list > .fi-sc {
    gap: 16px;
}

@media (min-width: 1024px) {
    .pim-asset-list > .fi-sc,
    .pim-attribute-list > .fi-sc {
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: start;
    }
}

.pim-attribute-set { display: grid; gap: 6px; padding: 4px 2px 10px; }
.pim-attribute-set-label { padding: 0 8px; }

/* The generic list's "strong" cell (Grove `G`): a title over a mono line. */
.pim-cell-strong .fi-ta-text-description {
    font-family: var(--g-mono);
    font-size: 12px;
    color: var(--g-muted);
}
/* …and when the line beneath is a sentence, not a code (an automation's summary). */
.pim-cell-strong-prose .fi-ta-text-description { font-family: inherit; font-size: 13px; }
.pim-attribute-list .fi-ta-cell-code .fi-ta-text-item { font-size: 13px; }

/* Imports & exports (Grove R6): a job's status — pill, 4px bar while it runs, note. */
.pim-job-status { display: grid; gap: 6px; justify-items: start; min-width: 140px; }
.pim-job-track { position: relative; width: 120px; height: 4px; overflow: hidden; border-radius: 99px; background: var(--g-surface-2); }
.pim-job-fill { height: 100%; border-radius: 99px; background: var(--g-info); }
/* No total to measure against (an export counts as it writes): a sliding third. */
.pim-job-track-sliding .pim-job-fill { position: absolute; width: 33%; animation: pim-job-slide 1.4s ease-in-out infinite; }
@keyframes pim-job-slide { from { left: -33%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .pim-job-track-sliding .pim-job-fill { animation: none; left: 0; width: 100%; opacity: .5; }
}
.pim-job-note { max-width: 260px; font-size: 12.5px; line-height: 1.35; color: var(--g-muted); white-space: normal; }

/*
 * Toggle buttons as chips (Grove R7: the New API key modal's abilities and
 * languages). The primary button rule above would paint every one of them
 * filled, so an unpicked chip is the surface with a border and a picked one
 * the accent's soft fill — the design's chip states.
 */
.fi-fo-toggle-buttons-input + .fi-btn.fi-color-primary:not(.fi-outlined) {
    min-height: 30px;
    padding: 4px 10px;
    font-family: var(--g-mono);
    font-size: 12.5px;
    font-weight: 500;
    background: var(--g-surface);
    color: var(--g-text);
    box-shadow: inset 0 0 0 1px var(--g-border);
}
.fi-fo-toggle-buttons-input:checked + .fi-btn.fi-color-primary:not(.fi-outlined) {
    background: var(--g-accent-soft);
    color: var(--g-accent);
    box-shadow: inset 0 0 0 1px var(--g-accent);
}
.fi-fo-toggle-buttons-input:focus-visible + .fi-btn { outline: 2px solid var(--g-accent); outline-offset: 2px; }

/*
 * Company settings (Grove R7): one card of setting rows — label and what it
 * does on the left, the control on the right — divided by hairlines.
 */
.pim-settings .fi-section-content { padding-top: 4px; padding-bottom: 4px; }
.pim-settings .fi-section-content,
.pim-settings .fi-section-content .fi-sc { row-gap: 0; }
/* Hairlines between rows, however deep the form sits (System notice wraps it in a Form). */
.pim-settings .fi-section-content > .fi-grid-col + .fi-grid-col,
.pim-settings .fi-section-content .fi-sc > .fi-grid-col + .fi-grid-col { border-top: 1px solid var(--g-border); }
.pim-settings .fi-fo-field { padding: 16px 0; }
.pim-settings .fi-fo-field-label-content { font-weight: 600; }
.pim-settings .fi-fo-field-label-col { align-content: start; gap: 4px; }
/* A list setting (Pinned attributes): its rows are fields too, but not setting rows. */
.pim-settings .fi-fo-simple-repeater .fi-fo-field { padding: 0; }
.pim-settings .fi-fo-simple-repeater-items { gap: 8px; }

/* The product-page fields as toggle cards: a bordered tile per option. */
.pim-toggle-cards .fi-fo-checkbox-list-option {
    padding: 10px 12px;
    border-radius: var(--g-radius-control);
    box-shadow: inset 0 0 0 1px var(--g-border);
    background: var(--g-surface);
}
.pim-toggle-cards .fi-fo-checkbox-list-option:has(input:checked) {
    box-shadow: inset 0 0 0 1px var(--g-accent);
    background: var(--g-accent-soft);
}

/* A share in a list (Locales: products with a name): 6px bar, count in mono. */
.pim-share { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.pim-share-track { flex: 1 1 auto; max-width: 140px; height: 6px; overflow: hidden; border-radius: 99px; background: var(--g-surface-2); }
.pim-share-fill { height: 100%; border-radius: 99px; background: var(--g-warn); }
.pim-share-full { background: var(--g-accent); }
.pim-share-count { font-family: var(--g-mono); font-size: 13px; }
.pim-share-none { color: var(--g-muted); }

/* System notice (Grove R7b): the notice as it stands, in its own card. */
.pim-notice-card {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border-radius: var(--g-radius-card);
    background: var(--g-surface);
    box-shadow: inset 0 0 0 1px var(--g-border);
}
.pim-notice-head { display: flex; align-items: center; gap: 10px; }
.pim-notice-kind { font-family: var(--g-mono); font-size: 12px; color: var(--g-muted); }
.pim-notice-message { margin: 0; font-size: 15px; font-weight: 600; color: var(--g-text); }
.pim-notice-window { margin: 0; font-size: 13px; color: var(--g-muted); }
.pim-notice-empty { display: grid; gap: 4px; justify-items: start; color: var(--g-muted); font-size: 14px; }
.pim-notice-empty strong { color: var(--g-text); font-size: 15px; }

/* Cards stacked with the page's rhythm (API & MCP → Keys: the keys, then the connectors). */
.pim-stack { display: grid; gap: 24px; }

/* "Bulk edits running: n · Open" above the jobs. */
.pim-job-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 14px;
    border-radius: var(--g-radius-card);
    background: var(--g-info-soft);
    color: var(--g-info);
    font-size: 14px;
}
.pim-job-banner a { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.pim-folders {
    display: grid;
    gap: 2px;
    padding: 12px 8px;
    border-radius: var(--g-radius-card);
    background: var(--g-surface);
    box-shadow: inset 0 0 0 1px var(--g-border);
}

.pim-folders-head { padding: 4px 10px 8px; }

.pim-folder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--g-radius-control);
    background: none;
    color: var(--g-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.pim-folder:hover { background: var(--g-surface-2); }
.pim-folder-on { background: var(--g-accent-soft); color: var(--g-accent); font-weight: 600; }
.pim-folder-count { font-family: var(--g-mono); font-size: 12px; color: var(--g-muted); }
.pim-folder-on .pim-folder-count { color: var(--g-accent); }

.pim-asset-toolbar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--g-border-soft);
}

/* Filament centres a tab strip; here one sits left and the other right. */
.pim-asset-toolbar .fi-tabs { margin: 0; }

.pim-tile { display: grid; gap: 4px; width: 100%; min-width: 0; }

/* A tile is the whole card: the selection checkbox floats in its top-right corner rather than taking a column. */
.pim-asset-list .fi-ta-record:has(.pim-tile) { position: relative; padding: 10px; }
.pim-asset-list .fi-ta-record:has(.pim-tile) > .fi-ta-record-checkbox { position: absolute; top: 18px; right: 18px; z-index: 2; margin: 0; }
.pim-asset-list .fi-ta-record:has(.pim-tile) > .fi-ta-record-content-ctn { flex: 1 1 auto; width: 100%; padding: 0; }
.pim-asset-list .fi-ta-record .fi-ta-col,
.pim-asset-list .fi-ta-record .fi-ta-col > div { width: 100%; }

.pim-tile-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--g-radius-control);
    background: var(--g-surface-2);
}

.pim-tile-image img { width: 100%; height: 100%; object-fit: cover; }
.pim-tile-type { font-family: var(--g-mono); font-size: 13px; color: var(--g-muted); }

.pim-tile-usage {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--g-surface);
    color: var(--g-text);
    font-size: 11.5px;
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--g-border);
}

.pim-tile-unused { background: var(--g-warn-soft); color: var(--g-warn); }

.pim-tile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--g-mono);
    font-size: 12.5px;
    color: var(--g-text);
}

.pim-tile-meta { font-size: 12px; color: var(--g-muted); }

/* "Good afternoon, Michael" above the dashboard's heading, styled as the breadcrumb it stands in for. */
.pim-greeting {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--g-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 30px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ tables */

.fi-ta-ctn,
.fi-ta-content-ctn,
.fi-ta-header,
.fi-ta-header-toolbar {
    border-color: var(--g-border-soft);
}

.fi-ta-header-cell,
.fi-ta-header-group-cell,
.fi-ta-empty-header-cell,
.fi-ta-selection-cell:is(th) {
    background-color: var(--g-surface-2);
}

.fi-ta-header-cell {
    padding-block: 9px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g-muted);
}

.fi-ta-header-cell-sort-btn {
    letter-spacing: inherit;
    text-transform: inherit;
}

.fi-ta-row {
    border-color: var(--g-border-soft);
}

.fi-ta-table > :is(thead, tbody) {
    --tw-divide-opacity: 1;
}

.fi-ta-table > tbody > tr,
.fi-ta-table > thead > tr {
    border-color: var(--g-border-soft);
}

.fi-ta-cell {
    font-size: 14px;
}

.fi-ta-row.fi-selected,
.fi-ta-row.fi-selected > td {
    background-color: var(--g-accent-soft);
}

.fi-ta-selection-indicator {
    background-color: var(--g-accent-soft);
}

.fi-pagination-overview {
    color: var(--g-muted);
}

/* ----------------------------------------------------------------- buttons */

.fi-btn {
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 18px;
}

.fi-btn.fi-size-xs,
.fi-btn.fi-size-sm {
    padding: 5px 10px;
    font-size: 12.5px;
}

/* Primary: accent fill, accent border, 600. */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    background-color: var(--g-accent);
    color: var(--g-accent-text);
    font-weight: 600;
    --tw-ring-color: var(--g-accent);
}

.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon {
    color: var(--g-accent-text);
}

/* Danger (in a modal) and warning buttons as solid fills in the design's colours; Filament
   would pick a pale shade with dark text for them. */
.fi-btn.fi-color-danger:not(.fi-outlined),
.fi-btn.fi-color-warning:not(.fi-outlined) {
    color: var(--g-accent-text);
    font-weight: 600;
}

.fi-btn.fi-color-danger:not(.fi-outlined) {
    background-color: var(--g-danger);
    --tw-ring-color: var(--g-danger);
}

.fi-btn.fi-color-warning:not(.fi-outlined) {
    background-color: var(--g-warn);
    --tw-ring-color: var(--g-warn);
}

.fi-btn.fi-color-danger:not(.fi-outlined) .fi-icon,
.fi-btn.fi-color-warning:not(.fi-outlined) .fi-icon {
    color: var(--g-accent-text);
}

.fi-btn:is(.fi-color-primary, .fi-color-danger, .fi-color-warning):not(.fi-outlined):hover {
    filter: brightness(1.08);
}

/*
    On a page, danger is an outline: deleting is a way out, not the thing the
    page is for, and a solid red block was the loudest thing in the editor.
    In a confirmation modal, where it is the answer to the question, it stays solid.
*/
.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-modal .fi-btn) {
    background-color: transparent;
    color: var(--g-danger);
    --tw-ring-color: var(--g-danger);
    box-shadow: inset 0 0 0 1px var(--g-danger);
    font-weight: 500;
}

.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-modal .fi-btn) .fi-icon {
    color: var(--g-danger);
}

.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-modal .fi-btn):hover {
    background-color: var(--g-danger-soft);
    filter: none;
}

/* Secondary (Filament's grey): surface + border. */
.fi-btn:not(.fi-color):not(.fi-outlined),
.fi-btn.fi-color-gray:not(.fi-outlined) {
    background-color: var(--g-surface);
    --tw-ring-color: var(--g-border);
    --tw-shadow: 0 0 #0000;
    color: var(--g-text);
}

.fi-btn:not(.fi-color):not(.fi-outlined):hover,
.fi-btn.fi-color-gray:not(.fi-outlined):hover {
    background-color: var(--g-surface-2);
}

.fi-link {
    font-weight: 500;
}

/* ------------------------------------------------------------------ inputs */

.fi-input-wrp {
    --tw-shadow: 0 0 #0000;
    --tw-ring-color: var(--g-border);
    background-color: var(--g-input-bg);
}

.fi-input-wrp:focus-within {
    --tw-ring-color: var(--g-accent);
    outline: 2px solid var(--g-focus);
    outline-offset: 0;
}

.fi-input,
.fi-select-input-btn,
.fi-input-wrp-content-ctn > input,
.fi-input-wrp textarea {
    min-height: 36px;
    font-size: 14px;
}

.fi-input::placeholder {
    color: var(--g-muted);
}

.fi-fo-field-label-content {
    font-size: 13px;
    font-weight: 500;
    color: var(--g-text);
}

/* Checkbox: 16×16, radius 3, 1.5px strong border; checked = accent. */
.fi-checkbox-input {
    border-radius: 3px;
    --tw-shadow: 0 0 #0000;
    --tw-ring-color: var(--g-border-strong);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    background-color: var(--g-input-bg);
}

.fi-checkbox-input:checked,
.fi-checkbox-input:indeterminate {
    background-color: var(--g-accent);
    --tw-ring-color: var(--g-accent);
}

/* Toggle track: off grey, on accent. */
.fi-toggle.fi-toggle-off {
    background-color: var(--g-toggle-off);
}

.fi-toggle.fi-toggle-on {
    background-color: var(--g-accent);
}

/* ------------------------------------------------------------------- pills */

/* Pills: 3px 8px, 12/500, radius 4, soft background, strong text, no ring. */
.fi-badge {
    padding: 3px 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    --tw-ring-color: transparent;
}

.fi-badge:not(.fi-color),
.fi-badge.fi-color-gray {
    background-color: var(--g-surface-2);
    --tw-ring-color: var(--g-border);
    color: var(--g-muted);
}

.fi-badge.fi-color-primary,
.fi-badge.fi-color-success {
    background-color: var(--g-ok-soft);
    color: var(--g-ok);
}

.fi-badge.fi-color-warning {
    background-color: var(--g-warn-soft);
    color: var(--g-warn);
}

.fi-badge.fi-color-danger {
    background-color: var(--g-danger-soft);
    color: var(--g-danger);
}

.fi-badge.fi-color-info {
    background-color: var(--g-info-soft);
    color: var(--g-info);
}

/* ---------------------------------------------------------- tabs (segmented) */

/*
    Tabs as the design's segmented control: a surface-2 trough with 3px
    padding, the active item lifted onto the surface.
*/
.fi-tabs:not(.fi-contained) {
    background-color: var(--g-surface-2);
    padding: 3px;
    --tw-ring-color: transparent;
    gap: 2px;
}

.fi-tabs-item {
    padding: 5px 11px;
    font-size: 12.5px;
    color: var(--g-muted);
}

.fi-tabs-item.fi-active {
    background-color: var(--g-surface);
    color: var(--g-text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.dark .fi-tabs-item.fi-active {
    box-shadow: inset 0 0 0 1px var(--g-border);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: var(--g-text);
}

/* -------------------------------------------------------- overlays, toasts */

.fi-modal-window {
    border-radius: var(--g-radius-overlay);
    --tw-shadow: var(--g-shadow);
    box-shadow: var(--g-shadow), 0 0 0 1px var(--g-border);
}

.fi-modal-slide-over .fi-modal-window {
    border-radius: 0;
}

.fi-modal-close-overlay {
    background-color: var(--g-overlay);
}

.fi-modal-header,
.fi-modal-footer {
    border-color: var(--g-border-soft);
}

.fi-dropdown-panel {
    border-radius: var(--g-radius-card);
    --tw-shadow: var(--g-shadow);
}

.fi-dropdown-list-item {
    font-size: 13.5px;
}

.fi-no-notification {
    border-radius: var(--g-radius-overlay);
    --tw-ring-color: var(--g-border);
    background-color: var(--g-surface);
}

/*
    Toasts sit bottom right (AppServiceProvider), clear of the header's
    actions. On a phone the bottom is the tab bar and the editor's Save bar,
    so there they come from the top, as Filament's own start alignment does.
*/
@media (max-width: 639px) {
    .fi-no.fi-vertical-align-end {
        flex-direction: column-reverse;
        justify-content: flex-end;
    }
}

/* ------------------------------------------------------------------ touch */

/*
    Fingers need 40px. Only where the pointer is coarse: a mouse keeps the
    design's density.
*/
@media (pointer: coarse) {
    .fi-btn,
    .fi-icon-btn,
    .fi-tabs-item,
    .fi-dropdown-list-item,
    .fi-pagination-item-btn,
    .fi-input-wrp {
        min-height: 40px;
    }

    .fi-icon-btn {
        min-width: 40px;
    }

    .fi-checkbox-input {
        margin: 12px;
    }

    .fi-ta-selection-cell .fi-checkbox-input {
        margin: 0;
        outline: 12px solid transparent;
    }
}

/* ------------------------------------------------------------------ shell */

/*
    The rail and the sub-panel (resources/views/filament/grove/shell.blade.php).
    ≥ 1200: side by side. 1024–1199: the sub-panel is a drawer. 640–1023: the
    rail is a top bar. < 640: the groups are a bottom tab bar as well.
*/

/* Filament's own toggle and overlay belong to the sidebar this replaces. */
.fi-layout-sidebar-toggle-btn-ctn,
.fi-sidebar-close-overlay {
    display: none;
}

.g-shell {
    position: sticky;
    top: 0;
    display: flex;
    flex-shrink: 0;
    height: 100dvh;
    z-index: 30;
}

.g-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: var(--g-rail-width);
    padding: 14px 0;
    background-color: var(--g-rail-bg);
    color: var(--g-rail-text);
    overflow-y: auto;
    scrollbar-width: none;
}

.g-rail::-webkit-scrollbar {
    display: none;
}

.g-rail-groups {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.g-rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 68px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--g-rail-muted);
    text-align: center;
    text-decoration: none;
}

.g-rail-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--g-rail-text);
}

.g-rail-icon {
    width: 20px;
    height: 20px;
}

.g-rail-group:hover .g-rail-tile {
    background-color: var(--g-rail-active-bg);
}

.g-rail-group.g-active {
    color: #FFFFFF;
    font-weight: 600;
}

.g-rail-group.g-active .g-rail-tile {
    background-color: var(--g-rail-active-bg);
    border-color: var(--g-rail-border);
    color: #FFFFFF;
}

.g-rail-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.g-rail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--g-rail-border);
    border-radius: var(--g-radius-card);
    color: var(--g-rail-text);
}

.g-rail-btn .fi-icon {
    width: 18px;
    height: 18px;
}

.g-rail-btn:hover {
    background-color: var(--g-rail-active-bg);
}

.g-theme-light,
.dark .g-theme-dark {
    display: none;
}

.dark .g-theme-light {
    display: block;
}

/* Only where the sub-panel is a drawer. */
.g-rail-menu,
.g-sub-close {
    display: none;
}

/*
    The company switcher as the logo tile: the company's logo, or its
    initials, at 38×38. The name is in the menu it opens.
*/
.g-rail-brand .fi-tenant-menu-trigger,
.g-rail-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background-color: var(--g-brand);
    color: #FFFFFF;
    font-weight: 700;
    overflow: hidden;
}

.g-rail-brand .fi-tenant-menu-trigger .fi-avatar,
.g-rail-brand .fi-tenant-menu-trigger .fi-tenant-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 13px;
}

.g-rail-brand .fi-tenant-menu-trigger-text,
.g-rail-brand .fi-tenant-menu-trigger > .fi-icon:last-child {
    display: none;
}

/* The avatar alone opens the user menu. */
.g-rail-end .fi-user-menu-trigger {
    padding: 0;
    border-radius: 999px;
}

.g-rail-end .fi-user-menu-trigger .fi-avatar {
    width: 32px;
    height: 32px;
}

.g-rail-end .fi-user-menu-trigger-text,
.g-rail-end .fi-user-menu-trigger > .fi-icon:last-child {
    display: none;
}

/* The sub-panel. */
.g-sub {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: var(--g-sub-width);
    padding: 18px 12px;
    background-color: var(--g-sub-bg);
    border-inline-end: 1px solid var(--g-border);
    overflow-y: auto;
}

.g-sub-company {
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 6px;
}

.g-sub-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--g-text);
}

.g-sub-search {
    padding: 0 0 8px;
}

.g-sub-search .fi-input {
    font-size: 13px;
}

.g-sub-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.g-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--g-radius-control);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--g-text);
    text-decoration: none;
}

.g-sub-item:hover {
    background-color: var(--g-surface-2);
}

.g-sub-item.g-active {
    background-color: var(--g-accent-soft);
    color: var(--g-accent);
    font-weight: 600;
}

.g-sub-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--g-muted);
}

.g-sub-item.g-active .g-sub-icon {
    color: var(--g-accent);
}

.g-sub-label {
    flex: 1;
    min-width: 0;
}

.g-sub-count {
    font-family: var(--g-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--g-muted);
}

.g-sub-queues {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 18px;
}

.g-sub-queues .g-eyebrow {
    padding: 0 10px;
}

.g-sub-queue {
    font-size: 13px;
}

.g-sub-queue .g-sub-label {
    line-height: 1.3;
}

.g-sub-queue .g-sub-count {
    color: var(--g-warn);
}

.g-sub .g-sub-close {
    border-color: var(--g-border);
    color: var(--g-muted);
}

.g-sub .g-sub-close:hover {
    background-color: var(--g-surface-2);
}

.g-sub-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    background-color: var(--g-overlay);
}

/* 1024–1199: the sub-panel slides in beside the rail. */
@media (max-width: 1199px) {
    .g-rail-menu,
    .g-sub-close {
        display: flex;
    }

    .g-sub {
        position: fixed;
        top: 0;
        bottom: 0;
        left: var(--g-rail-width);
        z-index: 40;
        visibility: hidden;
        transform: translateX(-12px);
        opacity: 0;
        transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
        box-shadow: var(--g-shadow);
    }

    .g-sub.g-sub-open {
        visibility: visible;
        transform: none;
        opacity: 1;
        transition: opacity .15s ease, transform .15s ease;
    }

    .g-rail {
        position: relative;
        z-index: 45;
    }
}

/* 640–1023: the rail is a top bar, and the drawer opens below it. */
@media (max-width: 1023px) {
    .g-shell {
        position: fixed;
        inset: 0 0 auto 0;
        height: var(--g-bar-height);
    }

    .fi-main-ctn {
        padding-top: var(--g-bar-height);
    }

    .g-rail {
        flex-direction: row;
        width: 100%;
        height: var(--g-bar-height);
        padding: 0 12px;
        gap: 10px;
        overflow: visible;
    }

    .g-rail-groups {
        flex-direction: row;
        gap: 4px;
    }

    .g-rail-group {
        width: auto;
    }

    .g-rail-label {
        display: none;
    }

    .g-rail-tile {
        width: 40px;
        height: 40px;
    }

    .g-rail-end {
        flex-direction: row;
        margin-top: 0;
        margin-left: auto;
    }

    .g-rail-btn {
        width: 40px;
        height: 40px;
    }

    .g-sub {
        top: var(--g-bar-height);
        left: 0;
        width: 280px;
    }
}

/* < 640: the groups are a bottom tab bar, and the drawer is a full sheet. */
@media (max-width: 639px) {
    .fi-main-ctn {
        padding-bottom: calc(var(--g-bar-height) + env(safe-area-inset-bottom));
    }

    .g-rail-groups {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 45;
        justify-content: space-around;
        height: calc(var(--g-bar-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background-color: var(--g-rail-bg);
    }

    .g-rail-group {
        flex: 1;
        gap: 2px;
    }

    .g-rail-label {
        display: block;
        font-size: 10px;
    }

    .g-rail-tile {
        width: 32px;
        height: 28px;
        border-radius: 8px;
    }

    .g-sub {
        bottom: calc(var(--g-bar-height) + env(safe-area-inset-bottom));
        width: 100%;
    }

    .g-sub-item {
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------ flags */

/*
    A language's flag (App\Filament\Theme\Flag) wherever an icon slot takes
    one: 4:3 at 18px wide, radius 2, a hairline so a white flag keeps an edge.
*/
img.fi-icon[src*="/flags/"],
.g-flag {
    width: 18px;
    height: 13.5px;
    object-fit: cover;
    border-radius: 2px;
    outline: 1px solid rgba(0, 0, 0, .12);
    outline-offset: -1px;
}

/* ------------------------------------------------------------ product list */

/*
    Facets beside the table (resources/views/filament/products/facets.blade.php).
    Under 1024px the card sits above the table; the phone drawer comes with
    the phone layout.
*/
.pim-product-list > .fi-sc {
    gap: 16px;
}

@media (min-width: 1024px) {
    .pim-product-list > .fi-sc {
        grid-template-columns: 230px minmax(0, 1fr);
        align-items: start;
    }
}

.pim-facets {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background-color: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-card);
}

@media (min-width: 1024px) {
    .pim-facets {
        position: sticky;
        top: 16px;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }
}

.pim-facets-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pim-facets-clear {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--g-accent);
}

.pim-facets-caption {
    margin-top: -10px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--g-muted);
}

.pim-facet {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--g-border-soft);
    padding-top: 12px;
}

.pim-facet-label {
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--g-text);
}

.pim-facet-value {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    margin-inline: -6px;
    border-radius: var(--g-radius-control);
    font-size: 13.5px;
    color: var(--g-text);
    cursor: pointer;
}

.pim-facet-value:hover {
    background-color: var(--g-surface-2);
}

.pim-facet-value .fi-checkbox-input {
    margin: 0;
}

.pim-facet-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pim-facet-count {
    font-family: var(--g-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--g-muted);
}

.pim-facet-value.pim-active .pim-facet-name {
    font-weight: 500;
}

/* Active filters as the design's chips: accent-soft, × to remove. */
.fi-ta-filter-indicators {
    border-color: var(--g-border-soft);
}

.fi-ta-filter-indicators .fi-badge {
    background-color: var(--g-accent-soft);
    color: var(--g-accent);
    --tw-ring-color: transparent;
}

/*
    "More filters" carries Filament's count of every active filter, facets
    included, which reads as "2 more filters are on" when the chips already
    name them. The chips are the count.
*/
.pim-product-list .fi-ta-header-toolbar .fi-btn .fi-btn-badge-ctn {
    display: none;
}

/*
    The bulk bar (resources/views/filament/products/bulk-bar.blade.php):
    Filament's selection indicator, carrying the bulk actions, pinned to the
    bottom of the window while rows are ticked. Inverted: dark on light, light
    on dark. Its actions are hidden from the table's header toolbar.
*/
.pim-product-list .fi-ta-selection-indicator {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 25;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 8px 10px 8px 16px;
    border-radius: var(--g-radius-overlay);
    background-color: var(--g-inverse-bg);
    color: var(--g-inverse-text);
    box-shadow: var(--g-shadow);
    font-size: 13.5px;
}

@media (min-width: 1200px) {
    .pim-product-list .fi-ta-selection-indicator {
        left: calc(50% + (var(--g-rail-width) + var(--g-sub-width)) / 2);
    }
}

.pim-product-list .fi-ta-selection-indicator > div:first-child span {
    color: var(--g-inverse-text);
    font-family: var(--g-mono);
    font-variant-numeric: tabular-nums;
}

.pim-product-list .fi-ta-selection-indicator > div:last-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pim-bulk-bar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in srgb, var(--g-inverse-text) 25%, transparent);
}

.pim-bulk-bar-actions > .fi-btn:not(:first-child),
.pim-bulk-bar-actions > .fi-dropdown .fi-btn {
    background-color: transparent;
    color: var(--g-inverse-text);
    --tw-ring-color: color-mix(in srgb, var(--g-inverse-text) 30%, transparent);
}

.pim-bulk-bar-actions > .fi-btn:not(:first-child) .fi-icon,
.pim-bulk-bar-actions > .fi-dropdown .fi-btn .fi-icon {
    color: var(--g-inverse-text);
}

/* Edit attributes, the bar's primary: the bright accent on the dark bar. */
.pim-bulk-bar-actions > .fi-btn:first-child {
    background-color: #52C98F;
    color: #06120B;
    --tw-ring-color: #52C98F;
    font-weight: 600;
}

.pim-bulk-bar-actions > .fi-btn:first-child .fi-icon {
    color: #06120B;
}

.dark .pim-bulk-bar-actions > .fi-btn:first-child {
    background-color: #1F6F4A;
    color: #FFFFFF;
    --tw-ring-color: #1F6F4A;
}

.dark .pim-bulk-bar-actions > .fi-btn:first-child .fi-icon {
    color: #FFFFFF;
}

.pim-product-list .fi-ta-selection-indicator .fi-link {
    color: var(--g-inverse-text);
    opacity: .8;
}

.pim-product-list .fi-ta-header-toolbar > .fi-ta-actions {
    display: none;
}

/* Paste SKUs' result (resources/views/filament/products/sku-list-result.blade.php). */
.pim-sku-result {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pim-sku-result-line {
    font-size: 13.5px;
    color: var(--g-muted);
}

.pim-sku-result-line.g-mono {
    color: var(--g-text);
}

.pim-sku-result-error {
    color: var(--g-danger);
}

.pim-sku-missing {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-control);
    background: var(--g-surface-2);
}

.pim-sku-missing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--g-border-soft);
}

.pim-sku-missing pre {
    max-height: 9rem;
    overflow: auto;
    margin: 0;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--g-warn);
    white-space: pre;
}

/* The quick view (resources/views/filament/products/quick-view.blade.php). */
.pim-quick-view {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pim-quick-view-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--g-radius-card);
    background-color: var(--g-surface-2);
    color: var(--g-muted);
    font-size: 13px;
}

.pim-quick-view-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pim-quick-view-sku {
    font-size: 12.5px;
    color: var(--g-muted);
}

.pim-quick-view-name {
    margin-top: 2px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.pim-quick-view-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.pim-quick-view-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pim-quick-view-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.pim-quick-view-track {
    height: 6px;
    border-radius: 99px;
    background-color: var(--g-surface-2);
    overflow: hidden;
}

.pim-quick-view-track > div {
    height: 100%;
    border-radius: 99px;
    background-color: var(--g-accent);
}

.pim-quick-view-gap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}

.pim-quick-view-gap > span:nth-child(2) {
    flex: 1;
}

.pim-quick-view-gap .g-mono {
    font-size: 12px;
    color: var(--g-warn);
}

.pim-quick-view-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--g-warn);
}

.pim-quick-view-none {
    font-size: 13px;
    color: var(--g-muted);
}

.pim-quick-view-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    padding-top: 14px;
    border-top: 1px solid var(--g-border-soft);
    font-size: 13.5px;
}

.pim-quick-view-facts dt {
    color: var(--g-muted);
}

/* The row's ⋯ menu and the Edit link: quiet until hovered. */
.pim-product-list .fi-ta-actions .fi-icon-btn {
    color: var(--g-muted);
}

/* The whole row opens the quick view. */
.pim-product-list .fi-ta-row {
    cursor: pointer;
}

/*
    The list's language as flags (ListProducts::languageSwitch()): a
    segmented group, the shown language lifted.
*/
.fi-btn-group:has(> [data-locale]) {
    gap: 2px;
    padding: 3px;
    border-radius: var(--g-radius-card);
    background-color: var(--g-surface-2);
    --tw-ring-color: transparent;
    box-shadow: none;
}

.fi-btn-group:has(> [data-locale]) .fi-btn {
    padding: 6px 9px;
    background-color: transparent;
    --tw-ring-color: transparent;
    box-shadow: none;
    color: var(--g-muted);
}

.fi-btn-group:has(> [data-locale]) .fi-btn.pim-flag-current {
    background-color: var(--g-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    color: var(--g-text);
}

.dark .fi-btn-group:has(> [data-locale]) .fi-btn.pim-flag-current {
    box-shadow: inset 0 0 0 1px var(--g-border);
}

.fi-btn-group:has(> [data-locale]) .fi-btn:not(.pim-flag-current) img.fi-icon {
    opacity: .7;
}

/* The views menu: the current view ticked, the others aligned with it. */
.fi-dropdown-list-item.pim-view .fi-icon {
    visibility: hidden;
}

.fi-dropdown-list-item.pim-view-current {
    font-weight: 600;
}

.fi-dropdown-list-item.pim-view-current .fi-icon {
    color: var(--g-accent);
}

/* "View changed · Update": a warn pill, not a button. */
.fi-btn.pim-view-changed {
    padding: 4px 10px;
    background-color: var(--g-warn-soft);
    color: var(--g-warn);
    --tw-ring-color: transparent;
    font-size: 12.5px;
    font-weight: 500;
}

/* ---------------------------------------------------------------- palette */

/* The sub-panel's search: a button that opens ⌘K. */
.g-sub-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-control);
    background-color: var(--g-input-bg);
    color: var(--g-muted);
    font-size: 13px;
}

.g-sub-search-btn .fi-icon {
    width: 16px;
    height: 16px;
}

.g-sub-search-btn span {
    flex: 1;
    text-align: left;
}

.g-sub-search-btn kbd {
    padding: 1px 5px;
    border-radius: 3px;
    background-color: var(--g-surface-2);
    font-size: 11px;
}

/* ⌘K (resources/views/filament/grove/palette.blade.php): centred 620px, 12vh down. */
.g-palette {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background-color: var(--g-overlay);
}

.g-palette-box {
    display: flex;
    flex-direction: column;
    width: min(620px, 100%);
    max-height: 70vh;
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-overlay);
    background-color: var(--g-surface);
    box-shadow: var(--g-shadow);
}

.g-palette-input {
    width: 100%;
    padding: 16px 18px;
    border: 0;
    border-bottom: 1px solid var(--g-border-soft);
    background: transparent;
    color: var(--g-text);
    font-size: 16px;
    outline: none;
}

.g-palette-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
}

.g-palette-section {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.g-palette-section .g-eyebrow {
    padding: 4px 10px;
}

.g-palette-section:not(:has([data-palette-item]:not([style*="display: none"]))) {
    display: none;
}

.g-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--g-radius-control);
    color: var(--g-text);
    font-size: 14px;
    text-decoration: none;
}

.g-palette-item:hover,
.g-palette-item.g-palette-active {
    background-color: var(--g-accent-soft);
}

.g-palette-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g-palette-details {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--g-muted);
}

/* A field in "Fields in this product" that is still a hole. */
.g-palette-empty {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--g-warn-soft);
    color: var(--g-warn);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.g-palette-hint {
    padding: 6px 10px;
    font-size: 12.5px;
    color: var(--g-muted);
}

.g-palette-foot {
    padding: 8px 16px;
    border-top: 1px solid var(--g-border-soft);
    font-size: 11.5px;
    color: var(--g-muted);
}

@media (max-width: 639px) {
    .g-palette {
        padding: 0;
    }

    .g-palette-box {
        max-height: none;
        height: 100%;
        border-radius: 0;
    }
}

/* Facets: a drawer behind "Filters · n" below 1024px. */
.pim-facets-toggle,
.pim-facets-close,
.pim-facets-overlay {
    display: none;
}

@media (max-width: 1023px) {
    .pim-facets-toggle {
        display: inline-flex;
        background-color: var(--g-surface);
        --tw-ring-color: var(--g-border);
        color: var(--g-text);
    }

    .pim-facets-toggle .fi-icon {
        width: 16px;
        height: 16px;
        color: var(--g-muted);
    }

    .pim-facets {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: min(320px, 100%);
        overflow-y: auto;
        border-radius: 0;
        box-shadow: var(--g-shadow);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .15s ease, visibility 0s linear .15s;
    }

    .pim-facets.pim-facets-open {
        transform: none;
        visibility: visible;
        transition: transform .15s ease;
    }

    .pim-facets-close {
        display: flex;
        margin-left: 8px;
        color: var(--g-muted);
    }

    .pim-facets-close .fi-icon {
        width: 20px;
        height: 20px;
    }

    .pim-facets-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background-color: var(--g-overlay);
    }

    .pim-facets-overlay[style*="display: none"] {
        display: none;
    }
}

/*
    Inline cells (KEEP/DROP Q2): the grid's text, select and number inputs at
    the design's input size, so a row of them reads as a row, not a form.
*/
.pim-product-list .fi-ta-cell .fi-input-wrp {
    min-height: 32px;
}

.pim-product-list .fi-ta-cell .fi-input,
.pim-product-list .fi-ta-cell .fi-select-input-btn {
    min-height: 32px;
    padding-block: 5px;
    font-size: 13.5px;
}

/* While the table reloads: rows dim, the way the design's skeleton does. */
.pim-product-list .fi-ta-content[wire\:loading\.class] {
    transition: opacity .15s ease;
}

/*
    On a phone the rows are cards: thumb, SKU, name, pills, image count.
    Read-only (Q2: inline editing stays on desktop and tablet); the whole
    card opens the quick view through the SKU cell's button.
*/
@media (max-width: 639px) {
    .pim-product-list .fi-ta-table thead {
        display: none;
    }

    .pim-product-list .fi-ta-table,
    .pim-product-list .fi-ta-table > tbody {
        display: block;
        min-width: 0;
    }

    .pim-product-list .fi-ta-row {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        margin: 0 0 8px;
        padding: 12px 12px 12px 44px;
        border: 1px solid var(--g-border);
        border-radius: var(--g-radius-card);
        background-color: var(--g-surface);
    }

    .pim-product-list .fi-ta-row > td {
        display: block;
        padding: 0;
        border: 0;
    }

    /* What a card shows; every other column waits for a wider screen. */
    .pim-product-list .fi-ta-row > td:not(.fi-ta-selection-cell, .fi-ta-cell-sku, .fi-ta-cell-attr-name, .fi-ta-cell-status, .fi-ta-cell-is-enabled, .fi-ta-cell-gallery-entries-count, :has(img)) {
        display: none;
    }

    .pim-product-list .fi-ta-row > .fi-ta-selection-cell {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
    }

    .pim-product-list .fi-ta-row > td:has(img) {
        order: -2;
    }

    .pim-product-list .fi-ta-row > .fi-ta-cell-attr-name {
        order: -1;
        flex-basis: 100%;
    }

    /* The name as text, not a field. */
    .pim-product-list .fi-ta-cell-attr-name .fi-input-wrp {
        --tw-ring-color: transparent;
        background: transparent;
        outline: none;
    }

    .pim-product-list .fi-ta-cell-attr-name .fi-input {
        min-height: 0;
        padding: 0;
        font-size: 15px;
        font-weight: 600;
        pointer-events: none;
    }

    .pim-product-list .fi-ta-cell-sku .fi-ta-col {
        position: static;
        font-family: var(--g-mono);
    }

    /* The SKU's button covers the card: a tap anywhere opens the quick view. */
    .pim-product-list .fi-ta-cell-sku .fi-ta-col::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .pim-product-list .fi-ta-content-ctn {
        overflow: visible;
    }

    .pim-product-list .fi-ta-ctn {
        background: transparent;
        --tw-ring-color: transparent;
    }

    /* The bulk bar sits above the bottom tab bar. */
    .pim-product-list .fi-ta-selection-indicator {
        left: 50%;
        bottom: calc(var(--g-bar-height) + env(safe-area-inset-bottom) + 12px);
    }
}

@media (max-width: 639px) {
    .pim-product-list .fi-ta-row > td .fi-ta-col,
    .pim-product-list .fi-ta-row > td .fi-ta-text,
    .pim-product-list .fi-ta-row > td .fi-ta-text-input,
    .pim-product-list .fi-ta-row > td .fi-ta-image {
        padding: 0;
    }

    /* A card has no columns to pick. */
    .pim-product-list .fi-ta-header-toolbar .fi-ta-col-manager-dropdown,
    .pim-product-list .fi-ta-header-toolbar .fi-dropdown:has(.fi-ta-col-manager) {
        display: none;
    }

    .pim-product-list .fi-ta-header-toolbar .fi-ta-search-field {
        flex: 1;
    }
}

@media (max-width: 639px) {
    /* The bar spans the screen: count and clear above, the actions in one scrolling row. */
    .pim-product-list .fi-ta-selection-indicator {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        transform: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }

    .pim-product-list .fi-ta-selection-indicator > div:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .pim-bulk-bar-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-left: 0;
        border-left: 0;
        scrollbar-width: none;
    }

    .pim-bulk-bar-actions .fi-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .pim-product-list .fi-ta-selection-indicator-actions-ctn {
        justify-content: space-between;
    }

    /* A ticked card is ticked as a whole. */
    .pim-product-list .fi-ta-row.fi-selected {
        background-color: var(--g-accent-soft);
        border-color: var(--g-accent);
    }

    .pim-product-list .fi-ta-row.fi-selected > td {
        background-color: transparent;
    }
}

@media (max-width: 639px) {
    .pim-product-list .fi-ta-selection-indicator > div,
    .pim-bulk-bar-actions,
    .pim-product-list .fi-ta-selection-indicator-actions-ctn {
        min-width: 0;
        max-width: 100%;
    }
}

/* The Product column (resources/views/filament/tables/product-cell.blade.php). */
.pim-product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    padding-block: 2px;
    text-align: start;
}

.pim-product-cell-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--g-radius-control);
    background-color: var(--g-surface-2);
    box-shadow: inset 0 0 0 1px var(--g-border-soft);
}

.pim-product-cell-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pim-product-cell-text {
    min-width: 0;
}

.pim-product-cell-name {
    display: -webkit-box;
    overflow: hidden;
    max-width: 320px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--g-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pim-product-cell-sku {
    margin-top: 1px;
    font-size: 12px;
    color: var(--g-muted);
}

@media (max-width: 639px) {
    /* A card leads with the Product column: thumb, name, SKU. */
    .pim-product-list .fi-ta-row > td.fi-ta-cell-product {
        display: block;
        order: -1;
        flex-basis: 100%;
    }

    .pim-product-list .fi-ta-cell-product .pim-product-cell-name {
        max-width: none;
        font-size: 15px;
        font-weight: 600;
        white-space: normal;
    }

    /* The Product cell's button covers the card: a tap anywhere opens the quick view. */
    .pim-product-list .fi-ta-cell-product .fi-ta-col {
        position: static;
    }

    .pim-product-list .fi-ta-cell-product .fi-ta-col::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }
}

.pim-product-list .fi-ta-cell-product .fi-ta-col,
.pim-product-list .fi-ta-cell-product .fi-ta-col * {
    white-space: normal;
}

/* Environment pill — "DEV" under the logo on anything that is not production
   (resources/views/filament/environment-pill.blade.php). Warning colours, so
   it reads as a caution on the dark rail rather than as navigation. */
.pim-env-pill {
    display: block;
    width: fit-content;
    margin: 6px auto 0;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--g-warn-soft);
    color: var(--g-warn);
    box-shadow: inset 0 0 0 1px var(--g-warn);
    font-family: var(--g-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}