/*
 * GD Tableware admin design system.
 *
 * Translates the storefront (see /design) into an admin product language:
 * a dark "ink" shell like the storefront footer, a warm light canvas, white
 * cards with hairline borders, soft grey filled fields, the maroon-to-black
 * call to action, storefront-style pill chips and brand red (#DC2626) accents.
 *
 * Structure: 1 tokens · 2 base & shell · 3 sidebar · 4 topbar · 5 page header
 * · 6 buttons · 7 fields & forms · 8 tables · 9 badges · 10 overlays
 * · 11 empty states · 12 login · 13 dashboard components · 14 responsive.
 *
 * Only Filament's public component classes and render-hook markup are styled;
 * all values come from the tokens below. Logical properties keep RTL native.
 */

/* ======================================================= 1. Design tokens */

:root {
    /* Brand */
    --gd-red: #dc2626;
    --gd-red-strong: #b91c1c;
    --gd-red-soft: #fef2f2;
    --gd-red-tint: rgb(220 38 38 / 0.08);
    --gd-maroon: #2c0606;
    --gd-ink: #171717;
    --gd-ink-deep: #0b0909;

    /* Surfaces */
    --gd-canvas: #f5f4f2;
    --gd-surface: #ffffff;
    --gd-surface-muted: #faf9f7;
    --gd-surface-sunken: #f5f4f2;
    --gd-field: #f3f2ef;
    --gd-field-hover: #eceae6;

    /* Lines */
    --gd-border: #e9e6e2;
    --gd-border-soft: #f1efec;
    --gd-border-strong: #d6d3cf;

    /* Text */
    --gd-text: #171717;
    --gd-text-secondary: #57534e;
    --gd-text-muted: #8a847d;
    --gd-text-on-dark: #f5f5f4;
    --gd-text-on-dark-muted: rgb(245 245 244 / 0.56);

    /* Shell */
    --gd-sidebar-bg: #121010;
    --gd-sidebar-bg-end: #0b0909;
    --gd-sidebar-line: rgb(255 255 255 / 0.07);
    --gd-sidebar-hover: rgb(255 255 255 / 0.05);
    --gd-sidebar-active: rgb(220 38 38 / 0.16);
    --gd-topbar-bg: rgb(245 244 242 / 0.86);

    /* Call to action */
    --gd-cta: linear-gradient(to right, var(--gd-maroon), var(--gd-ink-deep));
    --gd-cta-hover: linear-gradient(to right, #4a0b0b, #1d1515);

    /* Radius scale */
    --gd-radius-xs: 0.5rem;
    --gd-radius-sm: 0.625rem;
    --gd-radius-md: 0.75rem;
    --gd-radius-lg: 1rem;
    --gd-radius-xl: 1.25rem;
    --gd-radius-2xl: 1.75rem;
    --gd-radius-pill: 9999px;

    /* Depth */
    --gd-shadow-xs: 0 1px 2px rgb(23 23 23 / 0.04);
    --gd-shadow-sm: 0 1px 2px rgb(23 23 23 / 0.04), 0 4px 12px -6px rgb(23 23 23 / 0.08);
    --gd-shadow-md: 0 1px 2px rgb(23 23 23 / 0.04), 0 12px 32px -16px rgb(23 23 23 / 0.18);
    --gd-shadow-lg: 0 24px 60px -24px rgb(23 23 23 / 0.35);
    --gd-shadow-cta: 0 10px 22px -12px rgb(44 6 6 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.08);
    --gd-focus: 0 0 0 3px rgb(220 38 38 / 0.18);

    /* Rhythm */
    --gd-control-height: 2.75rem;
    --gd-sidebar-marker: 3px;
}

[dir='rtl'] {
    --gd-cta: linear-gradient(to left, var(--gd-maroon), var(--gd-ink-deep));
    --gd-cta-hover: linear-gradient(to left, #4a0b0b, #1d1515);
}

.dark {
    --gd-canvas: #0f0e0e;
    --gd-surface: #171515;
    --gd-surface-muted: #1c1a1a;
    --gd-surface-sunken: #131111;
    --gd-field: #221f1f;
    --gd-field-hover: #2a2626;
    --gd-border: rgb(255 255 255 / 0.08);
    --gd-border-soft: rgb(255 255 255 / 0.05);
    --gd-border-strong: rgb(255 255 255 / 0.16);
    --gd-text: #f5f5f4;
    --gd-text-secondary: #d6d3d1;
    --gd-text-muted: #a8a29e;
    --gd-red-soft: rgb(220 38 38 / 0.14);
    --gd-topbar-bg: rgb(15 14 14 / 0.86);
    --gd-sidebar-bg: #0b0a0a;
    --gd-sidebar-bg-end: #070606;
    --gd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --gd-shadow-md: 0 12px 32px -16px rgb(0 0 0 / 0.7);
}

/* ======================================================= 2. Base & shell */

.fi-body {
    background-color: var(--gd-canvas);
    color: var(--gd-text);
    letter-spacing: 0;
}

[dir='rtl'] .fi-body {
    line-height: 1.65;
}

.fi-main {
    padding-block: 1.75rem 3rem;
}

/* ============================================================ 3. Sidebar */

.fi-sidebar.fi-main-sidebar {
    background: linear-gradient(180deg, var(--gd-sidebar-bg) 0%, var(--gd-sidebar-bg-end) 100%);
    border-inline-end: 0;
    box-shadow: none;
    color: var(--gd-text-on-dark);
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-header-ctn,
.fi-sidebar.fi-main-sidebar .fi-sidebar-header {
    background: transparent;
    box-shadow: none;
    border: 0;
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-header {
    height: auto;
    min-height: 5.5rem;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--gd-sidebar-line);
}

/* The sidebar is always dark, so it always shows the white-lettered logo. */
.fi-sidebar.fi-main-sidebar .fi-logo.fi-logo-light {
    display: none;
}

.fi-sidebar.fi-main-sidebar .fi-logo.fi-logo-dark {
    display: flex;
}

.fi-sidebar.fi-main-sidebar .fi-logo {
    height: 3.25rem;
}

.fi-sidebar.fi-main-sidebar .fi-icon-btn,
.fi-sidebar.fi-main-sidebar .fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar.fi-main-sidebar .fi-sidebar-close-collapse-sidebar-btn {
    color: var(--gd-text-on-dark-muted);
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-nav {
    padding-block: 1.25rem 1.5rem;
    padding-inline: 0.875rem;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.12) transparent;
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-nav-groups {
    gap: 1.375rem;
    margin-inline: 0;
}

/* Group labels: small, quiet, with a short red rule echoing the logo underline. */
.fi-sidebar.fi-main-sidebar .fi-sidebar-group-btn {
    padding-inline: 0.625rem;
    padding-block: 0.25rem;
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-group-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gd-text-on-dark-muted);
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-group-label::before {
    content: '';
    inline-size: 0.625rem;
    block-size: 2px;
    border-radius: var(--gd-radius-pill);
    background: var(--gd-red);
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-group-collapse-btn,
.fi-sidebar.fi-main-sidebar .fi-sidebar-group-btn .fi-icon {
    color: var(--gd-text-on-dark-muted);
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-group-items {
    gap: 0.125rem;
}

/* Items */
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-btn {
    position: relative;
    min-height: 2.5rem;
    padding-inline: 0.75rem;
    border-radius: var(--gd-radius-md);
    transition: background-color 120ms ease, color 120ms ease;
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: rgb(245 245 244 / 0.42);
    transition: color 120ms ease;
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-item-label {
    color: rgb(245 245 244 / 0.74);
    font-weight: 500;
}

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

.fi-sidebar.fi-main-sidebar .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-btn:hover > .fi-icon {
    color: #fff;
}

/* Active item: a warm red wash fading across, a glowing marker, white label. */
.fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(to right, var(--gd-sidebar-active), transparent 85%);
}

[dir='rtl'] .fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(to left, var(--gd-sidebar-active), transparent 85%);
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: calc(-0.875rem + 0px);
    inline-size: var(--gd-sidebar-marker);
    border-start-end-radius: var(--gd-radius-pill);
    border-end-end-radius: var(--gd-radius-pill);
    background: var(--gd-red);
    box-shadow: 0 0 12px rgb(220 38 38 / 0.7);
}

[dir='rtl'] .fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    border-radius: 0;
    border-start-end-radius: var(--gd-radius-pill);
    border-end-end-radius: var(--gd-radius-pill);
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #f87171;
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #fff;
    font-weight: 700;
}

/* Navigation badges (e.g. pending orders) become compact counters. */
.fi-sidebar.fi-main-sidebar .fi-sidebar-item .fi-badge {
    min-inline-size: 1.5rem;
    justify-content: center;
    padding-inline: 0.4rem;
    background: var(--gd-red);
    color: #fff;
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.18);
}

.fi-sidebar.fi-main-sidebar .fi-sidebar-item .fi-badge::before {
    display: none;
}

/* Administration groups are set apart by sidebar-system-groups.blade.php,
   which matches their localized labels. */

/* Account card in the sidebar footer */
.gd-sidebar-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--gd-radius-lg);
    background: rgb(255 255 255 / 0.04);
    border: 1px solid var(--gd-sidebar-line);
    color: var(--gd-text-on-dark);
}

.gd-sidebar-account-avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--gd-radius-md);
    background: linear-gradient(135deg, #ef4444, var(--gd-maroon));
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
}

.gd-sidebar-account-text {
    min-inline-size: 0;
    flex: 1;
    line-height: 1.35;
}

.gd-sidebar-account-name {
    font-size: 0.8125rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-sidebar-account-role {
    font-size: 0.6875rem;
    color: var(--gd-text-on-dark-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-sidebar-account-action {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--gd-radius-sm);
    color: var(--gd-text-on-dark-muted);
    transition: background-color 120ms ease, color 120ms ease;
}

.gd-sidebar-account-action:hover {
    background: var(--gd-sidebar-hover);
    color: #fff;
}

.gd-sidebar-account-action svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
}

/* Collapsed (icon-only) desktop sidebar */
@media (min-width: 1024px) {
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .gd-sidebar-account {
        justify-content: center;
        margin-inline: 0.5rem;
        padding: 0.5rem;
        background: transparent;
        border-color: transparent;
    }

    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .gd-sidebar-account-text,
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .gd-sidebar-account-action {
        display: none;
    }

    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        justify-content: center;
    }
}

/* ============================================================= 4. Topbar */

.fi-topbar-ctn {
    position: sticky;
    top: 0;
    z-index: 20;
}

.fi-topbar {
    min-height: 4.25rem;
    background-color: var(--gd-topbar-bg);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: none;
    border-block-end: 1px solid var(--gd-border);
    padding-inline: 1.5rem;
}

.fi-topbar .fi-icon-btn {
    border-radius: var(--gd-radius-md);
}

.gd-topbar-context {
    order: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-inline-size: 0;
}

.fi-topbar > .fi-topbar-end {
    order: 2;
}

.gd-topbar-context-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 0.1875rem;
    background: var(--gd-red);
    box-shadow: 0 0 0 4px var(--gd-red-tint);
}

.gd-topbar-context-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gd-text);
    line-height: 1.2;
}

.gd-topbar-context-sub {
    font-size: 0.75rem;
    color: var(--gd-text-muted);
}

/* Controls on the end side become one tidy cluster of soft tiles. */
.fi-topbar-end {
    gap: 0.5rem;
}

.fi-topbar-end > *:not(.fi-user-menu) .fi-icon-btn,
.fi-topbar-end .fi-dropdown-trigger > button:not(.fi-user-menu-trigger) {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--gd-radius-md);
    background: var(--gd-surface);
    border: 1px solid var(--gd-border);
    box-shadow: var(--gd-shadow-xs);
}

.fi-user-menu .fi-avatar,
.fi-topbar .fi-avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--gd-radius-md);
    box-shadow: 0 0 0 2px var(--gd-surface), 0 0 0 3px var(--gd-border-strong);
}

/* ======================================================= 5. Page header */

.fi-header {
    position: relative;
    gap: 1rem;
    padding-block-end: 1.5rem;
    margin-block-end: 0.25rem;
    border-block-end: 1px solid var(--gd-border);
}

.fi-header-heading {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--gd-text);
    letter-spacing: -0.01em;
}

/* A short brand rule under each page title. */
.fi-header-heading::after {
    content: '';
    display: block;
    margin-block-start: 0.625rem;
    inline-size: 2.5rem;
    block-size: 3px;
    border-radius: var(--gd-radius-pill);
    background: linear-gradient(to right, var(--gd-red), rgb(220 38 38 / 0.25));
}

[dir='rtl'] .fi-header-heading::after {
    background: linear-gradient(to left, var(--gd-red), rgb(220 38 38 / 0.25));
}

.fi-header-subheading {
    margin-block-start: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gd-text-secondary);
    max-inline-size: 48rem;
}

.fi-breadcrumbs {
    margin-block-end: 0.5rem;
}

.fi-breadcrumbs ol {
    font-size: 0.8125rem;
}

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

.fi-breadcrumbs li:last-child a,
.fi-breadcrumbs li:last-child span {
    color: var(--gd-text-secondary);
    font-weight: 600;
}

.fi-header-actions-ctn {
    gap: 0.625rem;
}

/* ============================================================ 6. Buttons */

.fi-btn {
    min-height: 2.5rem;
    border-radius: var(--gd-radius-md);
    font-weight: 600;
    transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.fi-btn.fi-size-sm,
.fi-btn.fi-size-xs {
    min-height: 2rem;
    border-radius: var(--gd-radius-sm);
}

.fi-btn.fi-size-lg,
.fi-btn.fi-size-xl {
    min-height: 3rem;
}

/* Primary: the storefront's maroon-to-black call to action. */
.fi-btn.fi-color-primary:not(.fi-outlined):not(label) {
    background-color: var(--gd-ink-deep);
    background-image: var(--gd-cta);
    color: #fff;
    box-shadow: var(--gd-shadow-cta);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(label) > .fi-icon,
.fi-btn.fi-color-primary:not(.fi-outlined):not(label) .fi-loading-indicator {
    color: #fff;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(label):not(.fi-disabled):not([disabled]):hover {
    background-image: var(--gd-cta-hover);
    transform: translateY(-1px);
}

/* Secondary: clean white with a hairline border. */
.fi-btn.fi-color-gray:not(.fi-outlined):not(label),
.fi-btn:not(.fi-color):not(.fi-outlined):not(label) {
    background-color: var(--gd-surface);
    color: var(--gd-text);
    box-shadow: inset 0 0 0 1px var(--gd-border), var(--gd-shadow-xs);
}

.fi-btn.fi-color-gray:not(.fi-outlined):not(label):not(.fi-disabled):not([disabled]):hover,
.fi-btn:not(.fi-color):not(.fi-outlined):not(label):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--gd-surface-muted);
    box-shadow: inset 0 0 0 1px var(--gd-border-strong), var(--gd-shadow-xs);
}

/* Danger: flat semantic red, deliberately unlike the maroon primary. */
.fi-btn.fi-color-danger:not(.fi-outlined):not(label) {
    background-color: var(--gd-red);
    background-image: none;
    color: #fff;
    box-shadow: 0 8px 18px -12px rgb(220 38 38 / 0.9);
}

.fi-btn.fi-color-danger:not(.fi-outlined):not(label):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--gd-red-strong);
}

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

.fi-btn.fi-outlined {
    background-color: var(--gd-surface);
}

.fi-btn:focus-visible {
    box-shadow: var(--gd-focus);
}

/* Ghost / text actions */
.fi-link {
    font-weight: 600;
    text-underline-offset: 4px;
}

.fi-link:hover {
    text-decoration: underline;
}

.fi-icon-btn {
    border-radius: var(--gd-radius-sm);
    transition: background-color 120ms ease, color 120ms ease;
}

/* ===================================================== 7. Fields & forms */

/* Sections are the cards of every form and infolist. */
.fi-section:not(.fi-section-not-contained) {
    background-color: var(--gd-surface);
    border-radius: var(--gd-radius-xl);
    --tw-ring-color: var(--gd-border);
    box-shadow: 0 0 0 1px var(--gd-border), var(--gd-shadow-sm);
}

.fi-section:not(.fi-section-not-contained) > .fi-section-header {
    padding-block: 1.125rem;
    padding-inline: 1.5rem;
    border-block-end: 1px solid var(--gd-border-soft);
    background: linear-gradient(to bottom, var(--gd-surface-muted), var(--gd-surface));
    border-start-start-radius: var(--gd-radius-xl);
    border-start-end-radius: var(--gd-radius-xl);
}

.fi-section-header-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gd-text);
}

.fi-section-header-heading::before {
    content: '';
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 0.1875rem;
    background: var(--gd-red);
    box-shadow: 0 0 0 4px var(--gd-red-tint);
}

.fi-section-header-description {
    margin-block-start: 0.25rem;
    padding-inline-start: 1.125rem;
    font-size: 0.8125rem;
    color: var(--gd-text-muted);
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content {
    padding: 1.5rem;
}

/* A section nested in another section is a quieter, sunken group. */
.fi-section .fi-section:not(.fi-section-not-contained) {
    background-color: var(--gd-surface-muted);
    box-shadow: 0 0 0 1px var(--gd-border-soft);
}

.fi-section .fi-section:not(.fi-section-not-contained) > .fi-section-header {
    background: transparent;
}

/* Labels and help */
.fi-fo-field-label-content {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gd-text);
}

.fi-fo-field-label-required-mark {
    color: var(--gd-red);
}

.fi-fo-field-wrp-error-message {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gd-red);
}

/* Inputs: soft filled surfaces that brighten on focus. */
.fi-input-wrp {
    min-height: var(--gd-control-height);
    border-radius: var(--gd-radius-md);
    background-color: var(--gd-field);
    --tw-ring-color: transparent;
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.fi-input-wrp:not(.fi-disabled):hover {
    background-color: var(--gd-field-hover);
}

.fi-input-wrp:not(.fi-disabled):focus-within {
    background-color: var(--gd-surface);
    --tw-ring-color: transparent;
    box-shadow: inset 0 0 0 1px var(--gd-red), var(--gd-focus);
}

.fi-input-wrp.fi-invalid {
    background-color: var(--gd-red-soft);
    --tw-ring-color: transparent;
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.55);
}

.fi-input-wrp.fi-disabled {
    background-color: var(--gd-surface-sunken);
    opacity: 0.75;
}

.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea {
    background-color: transparent;
}

.fi-input-wrp .fi-input-wrp-prefix:not(.fi-inline),
.fi-input-wrp .fi-input-wrp-suffix:not(.fi-inline) {
    border-color: var(--gd-border);
}

.fi-checkbox-input {
    border-radius: 0.375rem;
}

/* Toggles: brand maroon-ink when on, a soft field tone when off. */
.fi-toggle:not(.fi-toggle-on) {
    background-color: var(--gd-border-strong);
}

.fi-toggle.fi-toggle-on.fi-color-primary {
    background-color: var(--gd-maroon);
    background-image: var(--gd-cta);
}

/* Page form actions (Save / Create / Cancel) become a footer bar. */
.fi-sc-form > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-actions:has(button[type='submit']) {
    padding: 1rem 1.25rem;
    border-radius: var(--gd-radius-xl);
    background-color: var(--gd-surface);
    box-shadow: 0 0 0 1px var(--gd-border), var(--gd-shadow-sm);
}

/* Media upload areas: a calm dashed drop zone. */
.fi-fo-file-upload .filepond--root {
    margin-block-end: 0;
}

.fi-fo-file-upload .filepond--panel-root {
    background-color: var(--gd-surface-muted);
    border: 1.5px dashed var(--gd-border-strong);
    border-radius: var(--gd-radius-lg);
}

.fi-fo-file-upload .filepond--drop-label {
    color: var(--gd-text-muted);
    font-size: 0.8125rem;
}

.fi-fo-file-upload .filepond--drop-label label {
    font-weight: 600;
}

.fi-fo-file-upload .filepond--item-panel {
    border-radius: var(--gd-radius-md);
}

.fi-fo-repeater-item {
    border-radius: var(--gd-radius-lg);
}

/* =========================================================== 8. Tables */

.fi-ta-ctn {
    background-color: var(--gd-surface);
    border-radius: var(--gd-radius-xl);
    --tw-ring-color: transparent;
    box-shadow: 0 0 0 1px var(--gd-border), var(--gd-shadow-md);
}

.fi-ta-ctn .fi-ta-header-toolbar {
    gap: 0.75rem;
    padding-block: 0.875rem;
    padding-inline: 1.25rem;
    border-color: var(--gd-border-soft);
}

/* Search: a soft pill like the storefront search bar. */
.fi-ta-search-field .fi-input-wrp {
    min-height: 2.5rem;
    min-inline-size: min(18rem, 60vw);
    border-radius: var(--gd-radius-pill);
}

/* Filter / column toggles sit as bordered tiles beside the search. */
.fi-ta-header-toolbar .fi-icon-btn {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--gd-radius-md);
    background: var(--gd-surface);
    box-shadow: inset 0 0 0 1px var(--gd-border);
    color: var(--gd-text-secondary);
}

.fi-ta-header-toolbar .fi-icon-btn:hover {
    background: var(--gd-surface-muted);
    color: var(--gd-text);
}

/* Active-filter counter: neutral, so an empty "0" never reads as an alert. */
.fi-ta-header-toolbar .fi-icon-btn .fi-badge {
    background: var(--gd-ink);
    color: #fff;
    box-shadow: 0 0 0 2px var(--gd-surface);
}

.fi-ta-header-toolbar .fi-icon-btn .fi-badge::before {
    display: none;
}

.fi-ta-filters-above-content-ctn {
    background: var(--gd-surface-muted);
    border-color: var(--gd-border-soft);
}

.fi-ta-header-cell,
.fi-ta-table > thead .fi-ta-selection-cell,
.fi-ta-empty-header-cell {
    background-color: var(--gd-surface-muted);
}

.fi-ta-header-cell {
    padding-block: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gd-text-muted);
    border-block-end: 1px solid var(--gd-border);
}

.fi-ta-header-cell-sort-btn {
    color: inherit;
}

.fi-ta-header-cell-sorted,
.fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn {
    color: var(--gd-red);
}

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

.fi-ta-row {
    transition: background-color 100ms ease, box-shadow 100ms ease;
}

.fi-ta-row:hover {
    background-color: #fcf9f8;
}

.dark .fi-ta-row:hover {
    background-color: rgb(255 255 255 / 0.03);
}

.fi-ta-row > td:first-child {
    box-shadow: inset 2px 0 0 transparent;
    transition: box-shadow 100ms ease;
}

[dir='rtl'] .fi-ta-row > td:first-child {
    box-shadow: inset -2px 0 0 transparent;
}

.fi-ta-row:hover > td:first-child {
    box-shadow: inset 2px 0 0 rgb(220 38 38 / 0.45);
}

[dir='rtl'] .fi-ta-row:hover > td:first-child {
    box-shadow: inset -2px 0 0 rgb(220 38 38 / 0.45);
}

.fi-ta-row.fi-selected {
    background-color: var(--gd-red-tint);
}

.fi-ta-row.fi-selected > td:first-child {
    box-shadow: inset 2px 0 0 var(--gd-red);
}

[dir='rtl'] .fi-ta-row.fi-selected > td:first-child {
    box-shadow: inset -2px 0 0 var(--gd-red);
}

.fi-ta-cell {
    padding-block: 0.25rem;
}

.fi-ta-text-item {
    color: var(--gd-text);
}

/* Row actions: compact bordered tiles that warm up on hover. */
.fi-ta-actions .fi-icon-btn,
.fi-ta-row .fi-dropdown-trigger > .fi-icon-btn {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--gd-radius-sm);
    box-shadow: inset 0 0 0 1px var(--gd-border);
    background: var(--gd-surface);
    color: var(--gd-text-muted);
}

.fi-ta-actions .fi-icon-btn:hover,
.fi-ta-row .fi-dropdown-trigger > .fi-icon-btn:hover {
    color: var(--gd-red);
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.35);
    background: var(--gd-red-soft);
}

.fi-ta-image img {
    border-radius: var(--gd-radius-sm);
    box-shadow: 0 0 0 1px var(--gd-border);
}

/* Bulk selection bar */
.fi-ta-selection-indicator {
    background-color: var(--gd-red-soft);
    border-color: rgb(220 38 38 / 0.15);
    color: var(--gd-text);
}

/* Pagination */
.fi-ta-ctn .fi-pagination {
    padding-block: 0.875rem;
    padding-inline: 1.25rem;
    background: var(--gd-surface-muted);
    border-block-start: 1px solid var(--gd-border-soft);
    border-end-start-radius: var(--gd-radius-xl);
    border-end-end-radius: var(--gd-radius-xl);
}

.fi-pagination-overview {
    color: var(--gd-text-muted);
    font-size: 0.8125rem;
}

.fi-pagination-items {
    gap: 0.25rem;
    border-radius: var(--gd-radius-pill);
    box-shadow: none;
    --tw-ring-color: transparent;
    background: transparent;
}

.fi-pagination-item {
    border: 0;
}

.fi-pagination-item-btn {
    min-inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--gd-radius-pill);
    background: var(--gd-surface);
    box-shadow: inset 0 0 0 1px var(--gd-border);
    color: var(--gd-text-secondary);
    font-weight: 600;
}

.fi-pagination-item.fi-active .fi-pagination-item-btn,
.fi-pagination-item.fi-active .fi-pagination-item-label {
    background: var(--gd-ink);
    color: #fff;
    box-shadow: none;
}

.fi-pagination-records-per-page-select .fi-input-wrp {
    border-radius: var(--gd-radius-pill);
    min-height: 2.25rem;
}

/* ============================================================ 9. Badges */

.fi-badge {
    gap: 0.375rem;
    padding-block: 0.1875rem;
    padding-inline: 0.625rem;
    border-radius: var(--gd-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    --tw-ring-color: transparent;
    box-shadow: none;
}

/* A status dot instead of a flat tag. */
.fi-badge:not(:has(.fi-icon))::before {
    content: '';
    flex: none;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: var(--gd-radius-pill);
    background: currentColor;
    opacity: 0.85;
}

/* Brand (primary) badges are the storefront's red outline chip; danger stays a filled
   semantic red, so statuses that share the red family remain distinguishable. */
.fi-badge.fi-color-primary {
    background: var(--gd-surface);
    color: var(--gd-red-strong);
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.45);
}

.fi-badge.fi-color-danger {
    background: var(--gd-red-soft);
    color: var(--gd-red-strong);
}

.fi-badge.fi-color-gray {
    background: var(--gd-surface-sunken);
    color: var(--gd-text-secondary);
    box-shadow: inset 0 0 0 1px var(--gd-border);
}

/* ====================================== 10. Tabs, dropdowns, modals, toasts */

.fi-tabs {
    gap: 0.375rem;
    padding: 0.25rem;
    border-radius: var(--gd-radius-pill);
    background: var(--gd-surface);
    box-shadow: 0 0 0 1px var(--gd-border), var(--gd-shadow-xs);
}

.fi-tabs-item {
    border-radius: var(--gd-radius-pill);
    padding-inline: 1rem;
}

.fi-tabs-item.fi-active {
    background: var(--gd-ink);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: #fff;
}

.fi-tabs-item.fi-active .fi-badge {
    background: var(--gd-red);
    color: #fff;
}

.fi-dropdown-panel {
    border-radius: var(--gd-radius-lg);
    box-shadow: 0 0 0 1px var(--gd-border), var(--gd-shadow-lg);
    --tw-ring-color: transparent;
}

.fi-dropdown-list-item {
    border-radius: var(--gd-radius-sm);
}

/* In menus, everyday actions are neutral ink so only destructive items read as red. */
.fi-dropdown-list-item.fi-color-primary .fi-dropdown-list-item-label {
    color: var(--gd-text);
}

.fi-dropdown-list-item.fi-color-primary > .fi-icon {
    color: var(--gd-text-muted);
}

.fi-dropdown-list-item.fi-color-primary:hover {
    background-color: var(--gd-surface-sunken);
}

.fi-modal-window {
    border-radius: var(--gd-radius-2xl);
    box-shadow: 0 0 0 1px var(--gd-border), var(--gd-shadow-lg);
}

.fi-modal-header {
    border-block-end: 1px solid var(--gd-border-soft);
}

.fi-modal-heading {
    font-weight: 800;
}

.fi-modal-footer {
    background: var(--gd-surface-muted);
    border-block-start: 1px solid var(--gd-border-soft);
    border-end-start-radius: var(--gd-radius-2xl);
    border-end-end-radius: var(--gd-radius-2xl);
}

.fi-modal-close-overlay {
    backdrop-filter: blur(2px);
}

.fi-no-notification {
    border-radius: var(--gd-radius-lg);
    box-shadow: 0 0 0 1px var(--gd-border), var(--gd-shadow-lg);
}

/* ====================================================== 11. Empty states */

.fi-empty-state,
.fi-ta-empty-state {
    padding-block: 3.5rem;
}

/* An intentional empty state: a red-tinted tile inside soft concentric rings. */
.fi-empty-state .fi-empty-state-icon-bg,
.fi-ta-empty-state .fi-ta-empty-state-icon-bg {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    margin-block-end: 1.5rem;
    padding: 0;
    border-radius: var(--gd-radius-xl);
    background: var(--gd-red-soft);
    box-shadow: 0 0 0 8px rgb(220 38 38 / 0.05), 0 0 0 16px rgb(220 38 38 / 0.025);
}

.fi-empty-state .fi-empty-state-icon-bg .fi-icon,
.fi-ta-empty-state .fi-ta-empty-state-icon-bg .fi-icon {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--gd-red);
}

.fi-empty-state-heading,
.fi-ta-empty-state-heading {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--gd-text);
}

.fi-empty-state-description,
.fi-ta-empty-state-description {
    margin-block-start: 0.375rem;
    color: var(--gd-text-muted);
}

.fi-ta-empty-state {
    border-color: var(--gd-border-soft);
}

/* ===================================================== 12. Login portal */

/*
 * One dark scene. The brand cluster and the card share a centered, max-width
 * container; the ring motif is a cropped, low-contrast watermark behind both.
 */
.fi-simple-layout:has(> .gd-auth-aside) {
    --gd-login-gutter: 1rem;

    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: stretch;
    row-gap: 1.5rem;
    padding: 1.75rem var(--gd-login-gutter) 2rem;
    color: var(--gd-text-on-dark);
    background-color: var(--gd-ink-deep);
    background-image:
        radial-gradient(48rem 32rem at 85% -5%, rgb(220 38 38 / 0.2), transparent 62%),
        radial-gradient(36rem 28rem at 0% 105%, rgb(220 38 38 / 0.09), transparent 65%),
        linear-gradient(160deg, #1a1717 0%, var(--gd-ink-deep) 72%);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-simple-main-ctn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-simple-main {
    inline-size: 100%;
    max-inline-size: 26.5rem;
    margin: 0;
    padding: 2rem 1.5rem;
    border-radius: var(--gd-radius-2xl);
    background: var(--gd-surface);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.05),
        0 18px 36px -22px rgb(0 0 0 / 0.55),
        0 48px 90px -36px rgb(0 0 0 / 0.7);
    --tw-ring-color: transparent;
}

.dark .fi-simple-layout:has(> .gd-auth-aside) .fi-simple-main {
    background: linear-gradient(180deg, #1e1b1b 0%, #161313 100%);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.06),
        inset 0 1px 0 rgb(255 255 255 / 0.04),
        0 18px 36px -22px rgb(0 0 0 / 0.6),
        0 48px 90px -36px rgb(0 0 0 / 0.75);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-simple-header {
    margin-block-end: 0;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-simple-page-content {
    row-gap: 1.5rem;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-simple-header-heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-simple-header-subheading {
    color: var(--gd-text-muted);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-fo-field-label {
    font-weight: 600;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-simple-main .fi-sc-form > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-actions:has(button[type='submit']) {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-sc-actions .fi-btn {
    min-block-size: 3rem;
    border-radius: var(--gd-radius-md);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-simple-header .fi-logo {
    display: none;
}

.gd-auth-aside {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    color: var(--gd-text-on-dark);
}

.gd-auth-aside-logo {
    position: relative;
    z-index: 1;
    inline-size: 4.75rem;
    block-size: auto;
}

.gd-auth-aside-copy {
    position: relative;
    z-index: 1;
}

.gd-auth-aside-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fca5a5;
}

.gd-auth-aside-eyebrow::before {
    content: '';
    inline-size: 1.25rem;
    block-size: 2px;
    border-radius: var(--gd-radius-pill);
    background: var(--gd-red);
}

.gd-auth-aside-title {
    margin-block-start: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.gd-auth-aside-title span {
    display: block;
    font-size: 0.88em;
    font-weight: 600;
    color: #e04848;
}

.gd-auth-aside-text {
    display: none;
    margin-block-start: 0.875rem;
    max-inline-size: 24rem;
    color: rgb(245 245 244 / 0.72);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.gd-auth-aside-footer {
    position: relative;
    z-index: 1;
    display: none;
    font-size: 0.75rem;
    color: var(--gd-text-on-dark-muted);
}

/*
 * Ring motif: three layered arcs with fading tails, so rotation is actually
 * visible. Each layer turns at its own slow speed; the red arc orbits fastest.
 */
.gd-auth-aside-rings {
    display: none;
    position: absolute;
    z-index: 0;
    inset-block-start: 50%;
    inset-inline-start: 56%;
    --gd-ring-size: min(60rem, calc(100dvh - 3rem), 88vw);

    inline-size: var(--gd-ring-size);
    block-size: var(--gd-ring-size);
    margin-block-start: calc(var(--gd-ring-size) / -2);
    margin-inline-start: calc(var(--gd-ring-size) / -2);
    pointer-events: none;
}

.gd-ring {
    position: absolute;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--gd-ring-weight)), #000 calc(100% - var(--gd-ring-weight)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--gd-ring-weight)), #000 calc(100% - var(--gd-ring-weight)));
}

.gd-ring-outer {
    --gd-ring-weight: 2px;

    inset: 0;
    background: conic-gradient(rgb(255 255 255 / 0.015) 0 45%, rgb(255 255 255 / 0.085) 100%);
    animation: gd-ring-turn 140s linear infinite;
}

.gd-ring-mid {
    --gd-ring-weight: 2px;

    inset: 11.6667%;
    background: conic-gradient(from 120deg, rgb(255 255 255 / 0.015) 0 40%, rgb(255 255 255 / 0.065) 100%);
    animation: gd-ring-turn 95s linear infinite reverse;
}

.gd-ring-arc {
    --gd-ring-weight: 3px;

    inset: 23.3333%;
    background: conic-gradient(from 40deg, transparent 0 50%, rgb(220 38 38 / 0.72) 100%);
    animation: gd-ring-turn 48s linear infinite;
}

.fi-simple-layout:has(> .gd-auth-aside)::before {
    content: '';
    display: none;
    position: absolute;
    z-index: 0;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 40rem;
    block-size: 40rem;
    margin-block-start: -20rem;
    margin-inline-start: -20rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(220 38 38 / 0.11), transparent);
    pointer-events: none;
}

@keyframes gd-ring-turn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes gd-auth-glow-drift {
    from {
        transform: translate(-7rem, 4rem) scale(0.95);
    }

    to {
        transform: translate(7rem, -4rem) scale(1.08);
    }
}

@media (min-width: 1024px) {
    .fi-simple-layout:has(> .gd-auth-aside)::before {
        display: block;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .fi-simple-layout:has(> .gd-auth-aside)::before {
        animation: gd-auth-glow-drift 26s ease-in-out infinite alternate;
    }
}

/* Login controls: one neutral field system shared by Email and Password. */
.fi-simple-layout:has(> .gd-auth-aside) {
    --gd-login-field: #f5f4f2;
    --gd-login-field-line: #e2dfda;
    --gd-login-field-line-hover: #cfcbc5;
}

.dark .fi-simple-layout:has(> .gd-auth-aside) {
    --gd-login-field: #1f1c1c;
    --gd-login-field-line: rgb(255 255 255 / 0.1);
    --gd-login-field-line-hover: rgb(255 255 255 / 0.2);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-fo-field {
    row-gap: 0.4375rem;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-fo-field-label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--gd-text-secondary);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-fo-field-label-required-mark {
    margin-inline-start: 0.125rem;
    color: var(--gd-red);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp {
    min-height: 2.875rem;
    border-radius: var(--gd-radius-md);
    background-color: var(--gd-login-field);
    --tw-ring-color: transparent;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: inset 0 0 0 1px var(--gd-login-field-line);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp:not(.fi-disabled):hover {
    background-color: var(--gd-login-field);
    box-shadow: inset 0 0 0 1px var(--gd-login-field-line-hover);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp:not(.fi-disabled):focus-within {
    background-color: var(--gd-login-field);
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.85), 0 0 0 4px rgb(220 38 38 / 0.12);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp-content-ctn {
    display: flex;
    align-items: stretch;
    background: transparent;
}

/*
 * The wrapper owns surface, border and focus. The inner input fills it edge to
 * edge with no surface of its own, so no nested rectangle can appear, and the
 * browser autofill tint is painted over with the wrapper's own surface.
 */
.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp .fi-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: auto;
    padding-block: 0;
    padding-inline: 0.875rem;
    border: 0;
    border-radius: inherit;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.9375rem;
    color: var(--gd-text);
    direction: ltr;
    text-align: left;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp .fi-input:focus,
.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp .fi-input:focus-visible {
    outline: 0;
    box-shadow: none;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp .fi-input:-webkit-autofill,
.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp .fi-input:-webkit-autofill:hover,
.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp .fi-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--gd-text);
    caret-color: var(--gd-text);
    box-shadow: 0 0 0 100rem var(--gd-login-field) inset;
    clip-path: inset(1px round calc(var(--gd-radius-md) - 1px));
    transition: background-color 9999s ease-out;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp-suffix {
    padding-inline: 0 0.375rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp-actions {
    align-items: center;
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp-suffix .fi-icon-btn {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--gd-radius-xs);
    color: var(--gd-text-muted);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp-suffix .fi-icon-btn:hover,
.fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp-suffix .fi-icon-btn:focus-visible {
    background-color: rgb(127 127 127 / 0.14);
    color: var(--gd-text);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-checkbox-input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: 0.3125rem;
    background-color: var(--gd-login-field);
    --tw-ring-color: var(--gd-login-field-line-hover);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-checkbox-input:checked {
    background-color: var(--gd-red);
    --tw-ring-color: var(--gd-red);
}

.fi-simple-layout:has(> .gd-auth-aside) .fi-checkbox-input:focus-visible {
    --tw-ring-color: var(--gd-red);
}

/* Login motion: a calm one-time entrance plus soft control transitions. */
@keyframes gd-auth-rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gd-ring {
        animation: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .gd-auth-aside-logo,
    .gd-auth-aside-copy,
    .gd-auth-aside-footer {
        animation: gd-auth-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .gd-auth-aside-copy {
        animation-delay: 0.08s;
    }

    .gd-auth-aside-footer {
        animation-delay: 0.16s;
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-simple-main {
        animation: gd-auth-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-input-wrp,
    .fi-simple-layout:has(> .gd-auth-aside) .fi-checkbox-input,
    .fi-simple-layout:has(> .gd-auth-aside) .fi-icon-btn {
        transition:
            box-shadow 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease;
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-sc-actions .fi-btn {
        transition:
            transform 0.2s ease,
            box-shadow 0.25s ease,
            background-color 0.25s ease,
            filter 0.25s ease;
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-sc-actions .fi-btn:hover,
    .fi-simple-layout:has(> .gd-auth-aside) .fi-sc-actions .fi-btn:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px -12px rgb(44 6 6 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.1);
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-sc-actions .fi-btn:active {
        transform: translateY(0);
        box-shadow: var(--gd-shadow-cta);
    }
}

/* Tablet: brand block and card stacked, centered as one column. */
@media (min-width: 640px) {
    .fi-simple-layout:has(> .gd-auth-aside) {
        --gd-login-gutter: 2rem;

        align-content: center;
        row-gap: 2rem;
        padding-block: 2.5rem;
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-simple-main {
        padding: 2.25rem 2.25rem 2.5rem;
    }

    .gd-auth-aside {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
    }

    .gd-auth-aside-logo {
        inline-size: 6rem;
    }

    .gd-auth-aside-title {
        font-size: 1.5rem;
    }

    .gd-auth-aside-text {
        display: block;
        margin-block-start: 0.5rem;
        font-size: 0.875rem;
    }
}

/* Desktop: compact brand cluster (~45%) beside the card (~55%). */
@media (min-width: 1024px) {
    .fi-simple-layout:has(> .gd-auth-aside) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
        align-content: center;
        align-items: center;
        column-gap: clamp(3rem, 6vw, 6rem);
        padding-inline: max(3rem, calc((100% - 68rem) / 2));
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-simple-main-ctn {
        align-items: center;
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-simple-main {
        padding: 2.75rem 2.5rem;
    }

    .fi-simple-layout:has(> .gd-auth-aside) .fi-simple-page-content {
        row-gap: 1.75rem;
    }

    .gd-auth-aside {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1.75rem;
    }

    .gd-auth-aside-logo {
        inline-size: 8.5rem;
    }

    .gd-auth-aside-title {
        margin-block-start: 0.75rem;
        font-size: 2.5rem;
        line-height: 1.1;
    }

    .gd-auth-aside-text {
        margin-block-start: 1.25rem;
        font-size: 1rem;
    }

    .gd-auth-aside-footer {
        display: block;
        margin-block-start: 0.5rem;
    }

    .gd-auth-aside-rings {
        display: block;
    }
}

/* ============================================ 13. Dashboard components */

.gd-dashboard {
    display: grid;
    gap: 1.75rem;
}

.gd-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: var(--gd-radius-2xl);
    color: var(--gd-text-on-dark);
    background-color: var(--gd-ink);
    background-image:
        radial-gradient(36rem 20rem at 100% 0%, rgb(220 38 38 / 0.32), transparent 62%),
        linear-gradient(135deg, var(--gd-ink) 0%, var(--gd-ink-deep) 100%);
    box-shadow: var(--gd-shadow-md);
}

[dir='rtl'] .gd-hero {
    background-image:
        radial-gradient(36rem 20rem at 0% 0%, rgb(220 38 38 / 0.32), transparent 62%),
        linear-gradient(225deg, var(--gd-ink) 0%, var(--gd-ink-deep) 100%);
}

.gd-hero::after {
    content: '';
    position: absolute;
    inset-block-end: -7rem;
    inset-inline-end: -5rem;
    inline-size: 18rem;
    block-size: 18rem;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.06);
    box-shadow: inset 0 0 0 2.5rem rgb(255 255 255 / 0.015);
    pointer-events: none;
}

.gd-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #fca5a5;
}

.gd-hero-title {
    margin-block-start: 0.375rem;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.3;
}

.gd-hero-title span {
    color: #ef4444;
}

.gd-hero-date {
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
    color: var(--gd-text-on-dark-muted);
}

.gd-hero-attention {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gd-attention {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    min-inline-size: 13rem;
    border-radius: var(--gd-radius-lg);
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.1);
    color: #fff;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.gd-attention:hover {
    background: rgb(255 255 255 / 0.1);
    border-color: rgb(220 38 38 / 0.5);
}

.gd-attention-count {
    display: grid;
    place-items: center;
    min-inline-size: 2.5rem;
    block-size: 2.5rem;
    padding-inline: 0.5rem;
    border-radius: var(--gd-radius-md);
    background: var(--gd-red);
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
}

.gd-attention-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.gd-attention-sub {
    font-size: 0.75rem;
    color: var(--gd-text-on-dark-muted);
}

.gd-attention-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--gd-radius-pill);
    background: rgb(34 197 94 / 0.12);
    color: #86efac;
    font-size: 0.875rem;
    font-weight: 600;
}

.gd-section-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-block-end: 0.875rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--gd-text);
}

.gd-section-title::before {
    content: '';
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 0.1875rem;
    background: var(--gd-red);
    box-shadow: 0 0 0 4px var(--gd-red-tint);
}

.gd-section-title small {
    margin-inline-start: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gd-text-muted);
}

/* Quick access: one card per navigation group, its sections as rows. */
.gd-shortcut-groups {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    align-items: start;
}

.gd-shortcut {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-block-end: 1px solid var(--gd-border-soft);
    transition: background-color 120ms ease;
}

.gd-shortcut:last-child {
    border-block-end: 0;
}

.gd-shortcut:hover {
    background: #fcf9f8;
}

.dark .gd-shortcut:hover {
    background: rgb(255 255 255 / 0.03);
}

.gd-shortcut-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--gd-radius-md);
    background: var(--gd-surface-sunken);
    color: var(--gd-text);
    transition: background 160ms ease, color 160ms ease;
}

.gd-shortcut-icon .fi-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

.gd-shortcut:hover .gd-shortcut-icon {
    background: var(--gd-cta);
    color: #fff;
}

.gd-shortcut-text {
    min-inline-size: 0;
    flex: 1;
}

.gd-shortcut-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gd-text);
}

.gd-shortcut-meta {
    font-size: 0.75rem;
    color: var(--gd-text-muted);
}

.gd-shortcut-badge {
    padding: 0.125rem 0.5rem;
    border-radius: var(--gd-radius-pill);
    background: var(--gd-red);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
}

.gd-shortcut-arrow {
    flex: none;
    color: var(--gd-text-muted);
    transition: color 160ms ease, transform 160ms ease;
}

.gd-shortcut:hover .gd-shortcut-arrow {
    color: var(--gd-red);
    transform: translateX(3px);
}

[dir='rtl'] .gd-shortcut-arrow {
    transform: scaleX(-1);
}

[dir='rtl'] .gd-shortcut:hover .gd-shortcut-arrow {
    transform: scaleX(-1) translateX(3px);
}

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

.gd-panel {
    display: flex;
    flex-direction: column;
    border-radius: var(--gd-radius-xl);
    background: var(--gd-surface);
    box-shadow: 0 0 0 1px var(--gd-border), var(--gd-shadow-sm);
    overflow: hidden;
}

.gd-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-block-end: 1px solid var(--gd-border-soft);
    background: linear-gradient(to bottom, var(--gd-surface-muted), var(--gd-surface));
}

.gd-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--gd-text);
}

.gd-panel-title::before {
    content: '';
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 0.1875rem;
    background: var(--gd-red);
    box-shadow: 0 0 0 4px var(--gd-red-tint);
}

.gd-panel-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gd-red);
}

.gd-panel-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.gd-list-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-block-end: 1px solid var(--gd-border-soft);
    transition: background-color 100ms ease;
}

.gd-list-row:last-child {
    border-block-end: 0;
}

.gd-list-row:hover {
    background: #fcf9f8;
}

.dark .gd-list-row:hover {
    background: rgb(255 255 255 / 0.03);
}

.gd-list-avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--gd-radius-md);
    background: var(--gd-surface-sunken);
    color: var(--gd-text-secondary);
    font-weight: 700;
    font-size: 0.875rem;
}

.gd-list-main {
    min-inline-size: 0;
    flex: 1;
}

.gd-list-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gd-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-list-sub {
    font-size: 0.75rem;
    color: var(--gd-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-list-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex: none;
}

.gd-list-amount {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--gd-text);
    font-variant-numeric: tabular-nums;
}

.gd-panel-empty {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--gd-text-muted);
    font-size: 0.875rem;
}

.gd-panel-empty .fi-icon {
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--gd-border-strong);
}

/* Small shared helpers (Filament ships no general utility classes). */
.gd-icon-sm {
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

[dir='rtl'] .gd-flip-rtl {
    transform: scaleX(-1);
}

.gd-topbar-context-text,
.gd-attention-text {
    min-inline-size: 0;
}

.gd-hero-main {
    position: relative;
    z-index: 1;
}

.gd-attention-label,
.gd-attention-sub,
.gd-list-title,
.gd-list-sub,
.gd-shortcut-label,
.gd-shortcut-meta {
    display: block;
}

.gd-list-time {
    flex: none;
    font-size: 0.75rem;
    color: var(--gd-text-muted);
}

/* ===================================================== Dark mode accents */

/* Ink elements would vanish on the dark canvas, so they switch to red or light. */
.dark .fi-sidebar.fi-main-sidebar {
    border-inline-end: 1px solid rgb(255 255 255 / 0.06);
}

.dark .fi-btn.fi-color-primary:not(.fi-outlined):not(label) {
    background-color: var(--gd-red-strong);
    background-image: linear-gradient(to bottom, #dc2626, #991b1b);
}

.dark .fi-btn.fi-color-primary:not(.fi-outlined):not(label):not(.fi-disabled):not([disabled]):hover {
    background-image: linear-gradient(to bottom, #ef4444, #b91c1c);
}

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

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

.dark .fi-toggle.fi-toggle-on.fi-color-primary {
    background-color: var(--gd-red);
    background-image: none;
}

.dark .fi-pagination-item.fi-active .fi-pagination-item-btn,
.dark .fi-pagination-item.fi-active .fi-pagination-item-label,
.dark .fi-tabs-item.fi-active {
    background: #f5f5f4;
    color: var(--gd-ink);
}

.dark .fi-tabs-item.fi-active .fi-tabs-item-label,
.dark .fi-tabs-item.fi-active .fi-icon {
    color: var(--gd-ink);
}

.dark .fi-ta-header-toolbar .fi-icon-btn .fi-badge {
    background: rgb(255 255 255 / 0.18);
    box-shadow: none;
}

.dark .fi-badge.fi-color-primary {
    color: #fca5a5;
    box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.5);
}

.dark .fi-badge.fi-color-danger {
    color: #fca5a5;
}

/* ===================================================== 14. Responsive */

@media (min-width: 640px) {
    .gd-hero {
        padding: 2.25rem;
    }

    .gd-hero-title {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .gd-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .gd-panels {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .fi-topbar {
        padding-inline: 1rem;
    }

    .gd-topbar-context-sub {
        display: none;
    }

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

    .gd-attention {
        min-inline-size: 100%;
    }
}