/*
 * Geex Modern Admin Dashboard theme — Lance ERP (app.linkyiwu.com).
 *
 * Layout ported from the roveerp stack's geex-theme.css (Figma
 * 8jXrL1MENrsUFOUPCcIGoB); colours are the Lance Fresh UI palette, each placed
 * in the Figma colour role it replaces (Light→Grey 1, Grey 2→Grey 2, Grey 3→
 * Grey 3, Grey 5/6→Grey 4/5, Body→Body). Light mode uses no colour outside that
 * palette. Dark mode is the one designed extension: the palette has no dark
 * surfaces, so it adds a few deeper greys on the neutrals' own cool hue. Both themes are drawn from the same tokens below, so every rule
 * in this file applies in light and dark alike and only the token values move.
 *
 * The palette seeds and the gray ramp live in AdminPanelProvider, so Filament's
 * own components (dropdowns, toggles, focus rings, empty states) follow too.
 * Dark mode: #161A1B page, Dark #242A2B cards, palette greys for text.
 *
 * This file is not in a cascade layer and Filament's stylesheet is, so a rule
 * here wins over Filament's wherever the two disagree, whatever the specificity.
 */

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

.fi-body {
    /* Primary: fills for buttons, active tabs, focus rings — the same in both themes. */
    --geex-primary: #ff4655;
    --geex-primary-hover: #f03345;              /* Hover */
    /*
     * Primary as text or a glyph — links, the active menu item. #FF4655 is too
     * light to read as text on white, so this is the palette's Text Link.
     */
    --geex-primary-text: #c6283b;               /* Text Link */
    --geex-primary-soft: rgba(255, 70, 85, 0.12); /* Transparent Primary, 12% */
    --geex-on-primary: #fff;

    --geex-secondary: #b9dcf5;
    --geex-tertiary: #f7b8ae;
    --geex-quaternary: #f2e7bc;

    --geex-heading: #242a2b;                    /* Dark */
    --geex-text: #454b4d;                       /* Body */
    --geex-text-muted: #767e80;                 /* Grey 5 */
    --geex-text-faint: #b3b9ba;                 /* Grey 4 */

    --geex-canvas: #f2f3f2;                     /* Grey 2 */
    --geex-surface: #fafaf8;                    /* Grey 1 */
    --geex-raised: #f2f3f2;                     /* Grey 2 */
    --geex-field: #ffffff;                      /* White */
    --geex-line: #dee2e3;                       /* Grey 3 */

    /* The Info seed, not the 600 Filament derives from it. */
    --geex-info: #55bde5;
    /* Info as a button fill, with a white label. */
    --geex-info-fill: #55bde5;

    --geex-radius-card: 24px;
    --geex-radius-control: 8px;
    --geex-radius-chip: 12px;
    --geex-radius-pill: 60px;

    --geex-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.04);
    --geex-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06);

    /*
     * Type scale: Filament's body text is 0.875rem, this panel wants 0.75rem.
     * The ratio is unitless because Firefox rejects length ÷ length. Redeclaring
     * Tailwind's own tokens is what makes every `text-sm` in Filament follow.
     */
    --geex-type-scale: calc(0.75 / 0.875);

    --text-xs: calc(0.75rem * var(--geex-type-scale));
    --text-sm: calc(0.875rem * var(--geex-type-scale));
    --text-base: calc(1rem * var(--geex-type-scale));
    --text-lg: calc(1.125rem * var(--geex-type-scale));
    --text-xl: calc(1.25rem * var(--geex-type-scale));
    --text-2xl: calc(1.5rem * var(--geex-type-scale));
    --text-3xl: calc(1.875rem * var(--geex-type-scale));
}

/*
 * Dark. The palette stops at Dark #242A2B, so that is the card, and the page
 * sits one step deeper; raised surfaces, insets and hairlines are further steps
 * on the same cool grey. Text is the palette's own Grey 1/3/4/5. The red stays
 * Primary for fills and text (4.4:1 on the card); its tint goes up to 16%
 * because 12% all but vanishes on a dark surface. Edges are hairlines, since a
 * drop shadow is invisible on a dark page.
 */
html.dark {
    color-scheme: dark;
}

html.dark .fi-body {
    --geex-primary-text: #ff4655;               /* Primary */
    --geex-primary-soft: rgba(255, 70, 85, 0.16);

    --geex-heading: #fafaf8;                    /* Grey 1 */
    --geex-text: #dee2e3;                       /* Grey 3 */
    --geex-text-muted: #b3b9ba;                 /* Grey 4 */
    --geex-text-faint: #767e80;                 /* Grey 5 */

    --geex-canvas: #161a1b;                     /* page, a step below Dark */
    --geex-surface: #242a2b;                    /* Dark: cards, sidebar, topbar */
    --geex-raised: #2e3536;                     /* hover, dropdown rows, gray buttons */
    --geex-field: #1c2122;                      /* inputs, inset into the card */
    --geex-line: #343b3d;                       /* hairlines */

    --geex-shadow-md: 0 0 0 1px #343b3d;
    --geex-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px #343b3d;
}

/* The menu is read at a glance, so it keeps 14px labels while the body drops to 12px. */
.fi-sidebar {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
}

/*
 * Controls follow the type down. Buttons, tabs, badges and icons take their
 * padding and icon size from `--spacing`; scaling it on the controls alone
 * keeps the page's own gutters where the layout puts them.
 */
.fi-btn,
.fi-icon-btn,
.fi-tabs-item,
.fi-badge,
.fi-icon {
    --spacing: calc(0.25rem * var(--geex-type-scale));
}

/* View tabs sit at the start of the table toolbar; push search to the far end. */
.fi-ta-header-toolbar .fi-ta-view-tabs {
    margin-inline-end: auto;
}

/* ---------------------------------------------------------------- surfaces */

.fi-body,
.fi-main-ctn {
    background-color: var(--geex-canvas);
}

.fi-body {
    color: var(--geex-text);
}

/* Cards float on the canvas: no hard border, a soft shadow and a large radius. */
.fi-section,
.fi-sc-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-simple-main {
    background-color: var(--geex-surface);
    border-color: transparent;
    border-radius: var(--geex-radius-card);
    box-shadow: var(--geex-shadow-md);
    --tw-ring-color: transparent;
}

.fi-section-header,
.fi-section-content-ctn,
.fi-ta-header,
.fi-ta-header-toolbar,
.fi-ta-footer,
.fi-ta-content-ctn,
.fi-pagination {
    border-color: var(--geex-line);
}

.fi-section-header-heading,
.fi-simple-header-heading {
    color: var(--geex-heading);
}

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

/* Floating layers sit a step above the card they open from. */
.fi-dropdown-panel,
.fi-modal-window,
.fi-no-notification {
    border-radius: var(--geex-radius-card);
}

html.dark .fi-dropdown-panel,
html.dark .fi-modal-window,
html.dark .fi-no-notification {
    background-color: var(--geex-surface);
    box-shadow: var(--geex-shadow-lg);
    --tw-ring-color: transparent;
}

html.dark .fi-dropdown-list,
html.dark .fi-dropdown-header,
html.dark .fi-modal-header,
html.dark .fi-modal-footer {
    border-color: var(--geex-line);
}

html.dark .fi-dropdown-list-item:hover,
html.dark .fi-dropdown-list-item:focus-visible {
    background-color: var(--geex-raised);
}

/* ----------------------------------------------------------------- sidebar */

.fi-sidebar,
.fi-topbar,
.fi-topbar-ctn {
    background-color: var(--geex-surface);
    border-color: transparent;
    box-shadow: none;
}

html.dark .fi-sidebar {
    border-inline-end: 1px solid var(--geex-line);
}

html.dark .fi-topbar,
html.dark .fi-topbar-ctn {
    border-block-end: 1px solid var(--geex-line);
}

.fi-topbar-start .fi-logo {
    margin-inline-start: calc(var(--spacing) * 1);
}

/* The reference keeps the groups as one dense column. */
.fi-sidebar-nav-groups {
    row-gap: calc(var(--spacing) * 1);
}

/* Nav rows are pills, not full-bleed rectangles. */
.fi-sidebar-item-btn,
.fi-sidebar-group-btn {
    border-radius: var(--geex-radius-pill);
    padding-inline: 1.5rem;
}

/* Children line their labels up with the group label, which sits after an icon. */
.fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-inline-start: 60px;
}

.fi-sidebar-item-label,
.fi-sidebar-group-label {
    color: var(--geex-text);
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: var(--geex-text-muted);
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: var(--geex-primary-soft);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-icon,
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-icon {
    color: var(--geex-primary-text);
}

/* Filament's dotted connector down a grouped sidebar cuts through the pills. */
.fi-sidebar-item-grouped-border {
    display: none;
}

/* Cluster sub-navigation rail: hug the labels instead of a fixed 18rem. */
.fi-page-sub-navigation-sidebar-ctn {
    width: max-content;
    max-width: 18rem;
}

.fi-page-sub-navigation-sidebar-ctn .fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-inline: 0.75rem;
}

/* Collapsed-sidebar flyout: narrower than the 14rem Filament gives every dropdown. */
.fi-sidebar-group .fi-dropdown-panel {
    max-width: calc(14rem * 4 / 5) !important;
}

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

/*
 * The heading is folded away on pages with breadcrumbs (they already name the
 * page) and the buttons come up onto the breadcrumb line, so a dense table
 * starts a fifth of a viewport higher. Folded, not deleted: it is still the
 * page's <h1> for screen readers and find-on-page.
 */
.fi-page-header-main-ctn {
    padding-block: calc(var(--spacing) * 2.5);
    row-gap: calc(var(--spacing) * 2.5);
}

.fi-main {
    padding-inline: 0.5rem;
}

@media (min-width: 768px) {
    .fi-main {
        padding-inline: 0.75rem;
    }
}

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

.fi-header-has-breadcrumbs {
    align-items: center;
}

.fi-header-has-breadcrumbs .fi-header-heading {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.fi-header-has-breadcrumbs .fi-breadcrumbs {
    margin-block-end: 0;
}

.fi-header-has-breadcrumbs .fi-header-actions-ctn {
    flex-wrap: wrap;
    margin-block-start: 0;
    row-gap: 0.5rem;
}

/* -------------------------------------------------------------- typography */

.fi-header-heading {
    color: var(--geex-heading);
    font-weight: 600;
    letter-spacing: 0;
}

.fi-header-subheading,
.fi-breadcrumbs-item-label {
    color: var(--geex-text-muted);
}

/* ---------------------------------------------------------------- controls */

.fi-input-wrp,
.fi-fo-file-upload-dropzone {
    border-radius: var(--geex-radius-control);
}

.fi-input-wrp {
    background-color: var(--geex-field);
    --tw-ring-color: var(--geex-line);
}

.fi-input-wrp:focus-within,
html.dark .fi-input-wrp:focus-within {
    --tw-ring-color: var(--geex-primary);
}

.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    border-color: var(--geex-line);
}

.fi-input,
.fi-select-input {
    color: var(--geex-text);
}

.fi-input::placeholder,
.fi-select-input::placeholder {
    color: var(--geex-text-faint);
}

.fi-fo-field-label-content {
    color: var(--geex-text);
}

.fi-fo-field-wrp-hint,
.fi-sc-text {
    color: var(--geex-text-muted);
}

.fi-checkbox-input,
.fi-fo-toggle-buttons .fi-btn {
    border-radius: 5px;
}

html.dark .fi-checkbox-input:not(:checked) {
    background-color: var(--geex-field);
}

/* --------------------------------------------------- text on filled colour */

/*
 * Filament can pair a brand colour with a pale 400 fill and dark text. Keep the
 * reference: solid brand red, white label, in both themes — Lance's rule is
 * brand red for primary actions.
 */
.fi-text-color-0,
.fi-text-color-0:hover {
    color: #fff;
}

:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600) {
    background-color: var(--geex-primary);
}

:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600):hover {
    background-color: var(--geex-primary-hover);
}

:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600),
:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600):hover,
:is(.fi-btn, .fi-icon-btn).fi-color-primary:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600) .fi-icon {
    color: #fff;
}

/* Info fills: solid Info with a white label and icon, in both themes. */
:is(.fi-btn, .fi-icon-btn).fi-color-info:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600) {
    background-color: var(--geex-info-fill);
}

:is(.fi-btn, .fi-icon-btn).fi-color-info:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600):hover {
    background-color: var(--geex-info-fill); /* the palette has no Info hover */
}

:is(.fi-btn, .fi-icon-btn).fi-color-info:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600),
:is(.fi-btn, .fi-icon-btn).fi-color-info:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600):hover,
:is(.fi-btn, .fi-icon-btn).fi-color-info:is(.fi-bg-color-300, .fi-bg-color-400, .fi-bg-color-500, .fi-bg-color-600) .fi-icon {
    color: #fff;
}

/* Info as a glyph or badge text keeps the seed. */

.fi-badge.fi-color-info,
.fi-icon.fi-color-info,
.fi-sc-icon.fi-color-info {
    color: var(--geex-info);
}

/*
 * Primary as text — links, icons, badges — is Text Link in light and a lifted
 * red in dark; the fill colour itself does not read as text in either.
 */
.fi-link.fi-color-primary,
.fi-icon.fi-color-primary,
.fi-badge.fi-color-primary,
.fi-ta-icon-item.fi-color-primary {
    color: var(--geex-primary-text);
}

/* ------------------------------------------------ toggle button selection */

/*
 * The fill above would paint every option in a toggle group red, chosen or
 * not. Unpicked options fall back to a tint; the picked one keeps the fill.
 */
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary:hover {
    background-color: var(--geex-primary-soft);
    color: var(--geex-primary-text);
}

.fi-fo-toggle-buttons:not(.fi-btn-group) .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--geex-primary) 24%, transparent);
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary:hover {
    background-color: color-mix(in oklab, var(--geex-primary) 26%, transparent);
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary .fi-icon {
    color: inherit;
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:checked + label.fi-btn.fi-color-primary,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:checked + label.fi-btn.fi-color-primary:hover {
    background-color: var(--geex-primary);
    color: #fff;
}

.fi-fo-toggle-buttons:not(.fi-btn-group) .fi-fo-toggle-buttons-input:checked + label.fi-btn.fi-color-primary {
    box-shadow: none;
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:checked + label.fi-btn.fi-color-primary .fi-icon {
    color: #fff;
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn.fi-color-primary.fi-disabled {
    opacity: 0.55;
}

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

.fi-btn {
    border-radius: var(--geex-radius-control);
    font-weight: 500;
    letter-spacing: 0.4px;
}

.fi-icon-btn {
    border-radius: var(--geex-radius-control);
}

.fi-btn.fi-size-xs,
.fi-btn.fi-size-sm {
    border-radius: var(--geex-radius-chip);
}

/* Gray (secondary) buttons: a raised chip on the card instead of a white box. */
html.dark .fi-btn.fi-color-gray:not(.fi-outlined) {
    background-color: var(--geex-raised);
    --tw-ring-color: var(--geex-line);
}

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

.fi-ta-header-cell {
    background-color: transparent;
    color: var(--geex-text-muted);
    font-weight: 500;
}

.fi-ta-table thead tr,
.fi-ta-table tbody tr {
    border-color: var(--geex-line);
}

.fi-ta-text-item-label,
.fi-ta-record-checkbox + * {
    color: var(--geex-text);
}

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

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

/* ------------------------------------------------------- record grid cards */

/*
 * Grid records — the plugin catalogue, contact cards — are Geex cards: a
 * 30px-padded panel on the canvas. Filament's per-record padding would stack on
 * top, so it is cleared and the spacing left to the card.
 */
.fi-ta-content-grid {
    background-color: transparent;
}

.fi-ta-content-grid .fi-ta-record {
    background-color: var(--geex-surface);
    border-radius: var(--geex-radius-card);
    box-shadow: var(--geex-shadow-md);
    padding: 30px;
    position: relative;
    --tw-ring-color: transparent;
}

.fi-ta-content-grid .fi-ta-record-content-ctn,
.fi-ta-content-grid .fi-ta-record-content {
    padding: 0;
    gap: 0;
}

.fi-ta-content-grid .fi-ta-image,
.fi-ta-content-grid .fi-ta-image img {
    border-radius: var(--geex-radius-chip);
    object-fit: cover;
}

.fi-ta-content-grid .fi-ta-text-item {
    color: var(--geex-text);
}

.fi-ta-content-grid .fi-ta-text-item .fi-icon {
    width: calc(1.5rem * var(--geex-type-scale));
    height: calc(1.5rem * var(--geex-type-scale));
}

/* ------------------------------------------------------------------ chrome */

.fi-badge {
    border-radius: 5px;
    font-weight: 500;
}

html.dark .fi-pagination-item,
html.dark .fi-pagination-records-per-page-select .fi-input-wrp {
    background-color: var(--geex-field);
}

/* -------------------------------------------------------------- tab strips */

/*
 * A free-standing tab strip (a list page's status tabs) starts where the
 * content under it does instead of floating centred above it.
 */
.fi-tabs:not(.fi-contained) {
    background-color: var(--geex-surface);
    border-radius: var(--geex-radius-control);
    box-shadow: var(--geex-shadow-md);
    margin-inline: 0;
    --tw-ring-color: transparent;
}

.fi-tabs-item {
    border-radius: var(--geex-radius-chip);
}

.fi-tabs-item:not(.fi-active) .fi-tabs-item-label {
    color: var(--geex-text-muted);
}

.fi-tabs-item:not(.fi-active):hover {
    background-color: var(--geex-primary-soft);
}

/* The selected tab is filled, not tinted — which tab you are on is the one thing the strip says. */
.fi-tabs-item.fi-active {
    background-color: var(--geex-primary);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon {
    color: var(--geex-on-primary);
}

.fi-tabs-item.fi-active .fi-badge {
    background-color: color-mix(in oklab, var(--geex-on-primary) 22%, transparent);
    color: var(--geex-on-primary);
    --tw-ring-color: transparent;
}