/* Shopajy admin theme overrides — app brand palette: mint #00E8AE, navy #000A2D, purple #8200DB */

:root {
    --shopajy-bg: #f4f8f7;
    --shopajy-surface: #ffffff;
    --shopajy-border: #e2eae8;
    --shopajy-border-strong: #cfdbd8;
    --shopajy-ink: #000a2d;
    --shopajy-ink-soft: #2b3553;
    --shopajy-muted: #6b7689;
    --shopajy-primary: #00e8ae;
    --shopajy-primary-soft: #d8fff3;
    --shopajy-primary-strong: #00b88c;
    --shopajy-navy: #000a2d;
    --shopajy-navy-2: #001142;
    --shopajy-purple: #8200db;
}

/* App background */
.fi-body, .fi-main, .fi-page {
    background: var(--shopajy-bg) !important;
}

/* ---- Sidebar — dark navy brand ---- */
.fi-sidebar {
    background: linear-gradient(180deg, #001142 0%, #000a2d 100%) !important;
    border-right: 0 !important;
    color: #cfd8ee !important;
    box-shadow: none !important;
}
/* Brand logo is navy-on-transparent — render it white on the dark sidebar. */
.fi-sidebar .fi-logo,
.fi-sidebar-header .fi-logo {
    filter: brightness(0) invert(1) !important;
}
.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 1.1rem 1.25rem !important;
}
.fi-sidebar .fi-logo,
.fi-sidebar h1,
.fi-sidebar-header .fi-logo {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}
.fi-sidebar-nav { padding: 0.75rem 0 !important; }
.fi-sidebar-group + .fi-sidebar-group { margin-top: 0.5rem; }
.fi-sidebar-group-label {
    color: #94a3c4 !important;
    text-transform: uppercase;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.25rem 0.35rem !important;
}
.fi-sidebar-item-button {
    color: #e6ecf8 !important;
    border-radius: 0.6rem !important;
    margin: 0.1rem 0.6rem !important;
    padding: 0.55rem 0.75rem !important;
    font-weight: 500 !important;
    transition: background-color 150ms ease, color 150ms ease;
    background: transparent !important;
}
.fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item-button span { color: #e6ecf8 !important; }
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover span {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"],
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label {
    background: rgba(0,232,174,0.16) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #00e8ae !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon {
    color: #ffffff !important;
}
.fi-sidebar-item-icon { width: 1.15rem !important; height: 1.15rem !important; color: #b8c4de !important; }
.fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: #ffffff !important; }
.fi-sidebar-group-button .fi-sidebar-group-label,
.fi-sidebar-group-button .fi-icon-btn { color: #b8c4de !important; }
.fi-sidebar-group-button:hover .fi-icon-btn { color: #ffffff !important; }
.fi-sidebar .fi-icon-btn { color: #e6ecf8 !important; }
.fi-sidebar .fi-icon-btn:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.fi-sidebar-group-icon { color: #94a3c4 !important; }

/* Sidebar nav badge (e.g. new-order count) — keep readable on the dark sidebar */
.fi-sidebar-item .fi-badge {
    background: #f43f5e !important;
    color: #ffffff !important;
}

/* ---- Topbar ---- */
.fi-topbar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--shopajy-border) !important;
    box-shadow: none !important;
}

/* ---- Headings ---- */
.fi-header-heading, .fi-page-header-heading, h1.fi-header-heading {
    color: var(--shopajy-ink) !important;
    letter-spacing: -0.02em;
    font-weight: 700 !important;
}

/* ---- Sections / cards ---- */
.fi-section, .fi-wi, .fi-fo-section {
    border-radius: 0.85rem !important;
    border: 1px solid var(--shopajy-border) !important;
    background: var(--shopajy-surface) !important;
    box-shadow: 0 1px 2px rgba(15, 30, 80, 0.03) !important;
}
.fi-section-header {
    border-bottom: 1px solid var(--shopajy-border) !important;
    padding: 1rem 1.25rem !important;
}
.fi-section-content { padding: 1.25rem !important; }

/* ---- Stats / widgets ---- */
.fi-stats-overview-stat {
    border-radius: 0.85rem !important;
    background: var(--shopajy-surface) !important;
    border: 1px solid var(--shopajy-border) !important;
    box-shadow: 0 1px 2px rgba(15, 30, 80, 0.03) !important;
}
.fi-stats-overview-stat-value {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--shopajy-ink) !important;
}
.fi-stats-overview-stat-label { color: var(--shopajy-muted) !important; font-weight: 500 !important; }

/* ---- Buttons ---- */
.fi-btn-color-primary {
    box-shadow: 0 1px 2px rgba(0, 232, 174, 0.25);
    background: var(--shopajy-primary) !important;
    color: var(--shopajy-navy) !important;
}
.fi-btn-color-primary .fi-btn-label,
.fi-btn-color-primary .fi-icon { color: var(--shopajy-navy) !important; }
.fi-btn-color-primary:hover { background: var(--shopajy-primary-strong) !important; }

/* ---- Tables ---- */
.fi-ta-table thead {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--shopajy-border) !important;
}
.fi-ta-header-cell-label { color: var(--shopajy-muted) !important; font-weight: 600 !important; font-size: 0.6875rem !important; letter-spacing: 0.03em; text-transform: uppercase; }
.fi-ta-row { border-bottom: 1px solid var(--shopajy-border) !important; }
.fi-ta-row:hover { background: #f8fafc !important; }
/* Condensed rows so wide tables fit without a horizontal scrollbar. */
.fi-ta-cell { padding: 0.4rem 0.4rem !important; font-size: 0.8125rem !important; }
.fi-ta-header-cell { padding: 0.45rem 0.4rem !important; }
/* Let cell text wrap at spaces (not mid-token, so money/SKUs/invoice numbers
   stay intact) so many-column tables shrink toward the container width. */
.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-ta-text-item,
.fi-ta-cell .fi-ta-text-item-label { white-space: normal !important; }
/* Allow status/shipping badges to wrap too so they don't pin a column wide. */
.fi-ta-cell .fi-badge { white-space: normal !important; }

/* ---- Forms ---- */
.fi-fo-field-wrp-label { color: var(--shopajy-ink-soft) !important; font-weight: 500 !important; }
.fi-input, .fi-input-wrp, .fi-select-input, textarea {
    border-radius: 0.55rem !important;
    border-color: var(--shopajy-border-strong) !important;
}
.fi-input:focus, textarea:focus { border-color: var(--shopajy-primary) !important; }

/* ---- Badges ---- */
.fi-badge { border-radius: 999px !important; font-weight: 600 !important; }

/* ---- Login / simple page ----
   In this Filament version the DOM nests as:
     .fi-simple-layout > .fi-simple-main-ctn > .fi-simple-main (white card)
       > .fi-simple-page (the login component, INSIDE the card)
   So the full-viewport gradient must live on the layout wrapper, and the
   inner .fi-simple-page must stay transparent (otherwise the gradient fills
   the form area inside the white card). */
.fi-simple-layout {
    background: linear-gradient(135deg, #000a2d 0%, #00715a 70%, #00e8ae 130%) !important;
    min-height: 100vh !important;
}
.fi-simple-page {
    background: transparent !important;
}
.fi-simple-main {
    background: #ffffff !important;
    border-radius: 1rem !important;
    box-shadow: 0 25px 80px rgba(6, 17, 47, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
}
.dark .fi-simple-main {
    background: var(--shopajy-surface) !important;
    border-color: var(--shopajy-border) !important;
}

/* ---- Dark mode ---- */
.dark {
    --shopajy-bg: #0a1426;
    --shopajy-surface: #0f1c33;
    --shopajy-border: #1c2a4a;
    --shopajy-border-strong: #243358;
    --shopajy-ink: #f1f5fb;
    --shopajy-ink-soft: #c7d1e3;
    --shopajy-muted: #8aa0c4;
}
.dark .fi-sidebar,
.dark .fi-topbar { background: var(--shopajy-surface) !important; border-color: var(--shopajy-border) !important; }
.dark .fi-sidebar-item-button:hover { background: rgba(255,255,255,0.04) !important; }
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button { background: rgba(0,232,174,0.18) !important; color: #b7ffe9 !important; }
.dark .fi-section, .dark .fi-wi, .dark .fi-stats-overview-stat { background: var(--shopajy-surface) !important; border-color: var(--shopajy-border) !important; }
.dark .fi-ta-table thead { background: #122145 !important; }
.dark .fi-ta-row:hover { background: rgba(255,255,255,0.025) !important; }

/* ---- Topbar language switcher (EN | ع) ---- */
.shopajy-locale-switcher {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--shopajy-border-strong);
    border-radius: 999px;
    overflow: hidden;
    background: var(--shopajy-surface);
    margin-inline-end: 0.5rem;
}
.shopajy-locale-switcher__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--shopajy-muted);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}
.shopajy-locale-switcher__item:hover { background: rgba(0,232,174,0.10); color: var(--shopajy-ink); }
.shopajy-locale-switcher__item--active {
    background: var(--shopajy-primary);
    color: var(--shopajy-navy);
}
.shopajy-locale-switcher__item--active:hover { background: var(--shopajy-primary); color: var(--shopajy-navy); }

/* ---- Arabic typography: Cairo (Google font, loaded only when locale=ar) ----
   Filament sets --font-family: 'Inter' via var(); we override it under RTL so
   every component using var(--font-family) picks up Cairo. Latin keeps Inter. */
html[dir="rtl"] {
    --font-family: 'Cairo', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}
html[dir="rtl"] body,
html[dir="rtl"] .fi-body,
html[dir="rtl"] .fi-sidebar,
html[dir="rtl"] .fi-topbar,
html[dir="rtl"] .fi-main {
    font-family: 'Cairo', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* ---- RTL polish (Arabic) — Filament flips direction automatically at locale=ar ---- */
/* Active sidebar item: the accent bar must sit on the inline-start edge in both directions. */
[dir="rtl"] .fi-sidebar-item.fi-active .fi-sidebar-item-button,
[dir="rtl"] .fi-sidebar-item-button[aria-current="page"],
[dir="rtl"] .fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label,
[dir="rtl"] .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label {
    box-shadow: inset -3px 0 0 #00e8ae !important;
}
/* Group label letter-spacing hurts Arabic legibility; drop it in RTL. */
[dir="rtl"] .fi-sidebar-group-label,
[dir="rtl"] .fi-ta-header-cell-label {
    letter-spacing: normal !important;
}