/*
 * Kashiery Admin – Premium ERP Edition (v5)
 * ─────────────────────────────────────────────────────────────────
 * Design language inspired by Gymove (light) but engineered for an
 * enterprise-grade ERP feel:
 *   • Mesh-gradient page surface with depth
 *   • Tinted icon badges + tabular numbers on every KPI tile
 *   • Sidebar with pill-style active states
 *   • Frosted, layered topbar
 *   • Glossy primary CTA with brand glow
 *   • Refined tables with slate header
 *   • Floating-label-style inputs
 *   • Premium login canvas
 *
 * Brand:  primary #2A52E6 / danger #EE4932 / ink #0F172A
 * Fonts:  Cairo (Arabic) + Poppins (Latin)
 * Targets: Filament v3 Admin Panel (/admin) — light only
 * RTL:    fully supported
 * ─────────────────────────────────────────────────────────────────
 */

/* ─── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
    /* Brand */
    --k-primary:        #2A52E6;
    --k-primary-mid:    #1e46cc;
    --k-primary-dark:   #1535a8;
    --k-primary-deep:   #0e2783;
    --k-primary-light:  #c4d3ff;
    --k-primary-soft:   #eaf0ff;
    --k-primary-soft-2: #f3f6ff;
    --k-primary-bg:     rgba(42, 82, 230, 0.07);

    --k-accent:         #7C3AED;     /* violet — second-brand accent */
    --k-accent-soft:    #ede9fe;

    --k-red:            #EE4932;
    --k-red-soft:       #fde6e3;

    /* Neutrals — deeper inks for ERP gravitas */
    --k-ink:            #0F172A;
    --k-ink-2:          #1E293B;
    --k-ink-3:          #334155;
    --k-muted:          #64748B;
    --k-muted-2:        #94A3B8;
    --k-muted-soft:     #CBD5E1;

    /* Semantic */
    --k-success:        #10B981;
    --k-success-soft:   #D1FAE5;
    --k-success-deep:   #047857;
    --k-warning:        #F59E0B;
    --k-warning-soft:   #FEF3C7;
    --k-warning-deep:   #B45309;
    --k-danger:         #EF4444;
    --k-danger-soft:    #FEE2E2;
    --k-danger-deep:    #B91C1C;
    --k-info:           #0EA5E9;
    --k-info-soft:      #E0F2FE;
    --k-info-deep:      #0369A1;

    /* Surfaces */
    --k-surface:        #ffffff;
    --k-surface-2:      #F8FAFF;
    --k-surface-3:      #F1F5FB;

    /* Mesh gradient page bg — multiple soft blobs */
    --k-page-bg:
        radial-gradient(1200px 500px at 12% -10%, rgba(42, 82, 230, 0.08), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(124, 58, 237, 0.05), transparent 55%),
        radial-gradient(800px 400px at 50% 110%, rgba(14, 165, 233, 0.05), transparent 60%),
        linear-gradient(180deg, #F4F7FC 0%, #EEF2FA 100%);

    /* Borders */
    --k-border:         rgba(42, 82, 230, 0.14);
    --k-border-soft:    rgba(120, 130, 140, 0.14);
    --k-border-strong:  rgba(15, 23, 42, 0.10);
    --k-line:           rgba(42, 82, 230, 0.08);
    --k-line-soft:      rgba(15, 23, 42, 0.06);

    /* Layered shadows (premium depth) */
    --k-shadow-xs:      0 1px 2px rgba(15, 23, 42, 0.04);
    --k-shadow-sm:      0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
    --k-shadow-md:      0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --k-shadow-lg:      0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --k-shadow-xl:      0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    --k-shadow-2xl:     0 25px 50px -12px rgba(15, 23, 42, 0.18);
    --k-shadow-glow:    0 8px 24px rgba(42, 82, 230, 0.28);
    --k-shadow-glow-sm: 0 4px 12px rgba(42, 82, 230, 0.20);
    --k-shadow-side:    0 4px 24px -2px rgba(15, 23, 42, 0.06);

    /* Radii — refined ERP scale */
    --k-r-xs:           6px;
    --k-r-sm:           10px;
    --k-r-md:           14px;
    --k-r-lg:           18px;
    --k-r-xl:           22px;
    --k-r-2xl:          28px;
    --k-r-pill:         999px;

    /* Layout */
    --k-sidebar-w:      17rem;
    --k-sidebar-w-md:   16rem;
    --k-topbar-h:       4.75rem;

    /* Typography */
    --k-font-latin:     'Inter', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --k-font-arabic:    'Cairo', 'Tajawal', 'Segoe UI', sans-serif;
    --k-font-base:      var(--k-font-arabic), var(--k-font-latin);
    --k-font-num:       var(--k-font-latin);   /* tabular numerals */

    /* Motion */
    --k-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --k-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── BASE / BODY ────────────────────────────────────────────── */
html, body, .fi-body {
    font-family: var(--k-font-base) !important;
    background: var(--k-page-bg) !important;
    background-attachment: fixed !important;
    color: var(--k-ink) !important;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fi-layout { background: transparent !important; }

/* Tabular numerals everywhere numbers matter */
.fi-wi-stats-overview-stat-value,
.fi-ta-cell,
.fi-ta-text,
.fi-input,
input[type="number"],
input[type="text"],
.fi-badge,
.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
}

/* Smoother scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(42, 82, 230, 0.25) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(42, 82, 230, 0.30), rgba(42, 82, 230, 0.20));
    border-radius: 999px;
}
*::-webkit-scrollbar-track { background: transparent; }

/* Keyframes */
@keyframes k-fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes k-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ─── SIDEBAR (premium white with active pills) ─────────────── */
.fi-sidebar {
    background: var(--k-surface) !important;
    border: 0 !important;
    box-shadow: var(--k-shadow-side) !important;
    width: var(--k-sidebar-w) !important;
    position: relative;
}
.fi-sidebar::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--k-line), transparent);
}
[dir="ltr"] .fi-sidebar::after { right: 0; }
[dir="rtl"] .fi-sidebar::after { left: 0; }

@media (max-width: 90rem) {
    .fi-sidebar { width: var(--k-sidebar-w-md) !important; }
}

.fi-sidebar-header {
    background: var(--k-surface) !important;
    border-bottom: 1px solid var(--k-line) !important;
    height: var(--k-topbar-h) !important;
    padding: 0.85rem 1.25rem !important;
    box-shadow: none !important;
    position: relative;
}
.fi-sidebar-header img.fi-logo,
.fi-sidebar-header .fi-logo {
    max-height: 2.1rem !important;
    width: auto !important;
    filter: drop-shadow(0 1px 2px rgba(42, 82, 230, 0.12));
}

/* Nav scroller */
.fi-sidebar-nav {
    padding: 0.75rem 0 1.5rem !important;
    background: transparent !important;
}

/* Group labels — refined caps */
.fi-sidebar-group {
    padding-bottom: 0.4rem !important;
}
.fi-sidebar-group-label {
    color: var(--k-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    padding: 1.1rem 1.5rem 0.45rem !important;
    margin: 0 !important;
    position: relative;
}

/* Nav items */
.fi-sidebar-item {
    margin: 3px 0.75rem !important;
}

.fi-sidebar-item-button {
    border-radius: var(--k-r-md) !important;
    padding: 0.65rem 0.9rem !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: var(--k-ink-3) !important;
    background: transparent !important;
    transition: all 0.20s var(--k-ease) !important;
    gap: 0.75rem !important;
    border: 0 !important;
    position: relative !important;
    overflow: hidden;
}

.fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-button svg {
    color: var(--k-muted) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    transition: transform 0.20s var(--k-ease), color 0.20s var(--k-ease) !important;
}

.fi-sidebar-item-button:hover {
    background: var(--k-primary-soft) !important;
    color: var(--k-primary) !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover svg {
    color: var(--k-primary) !important;
    transform: scale(1.08);
}

/* Active item — full gradient pill with cap */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(135deg, var(--k-primary) 0%, var(--k-primary-mid) 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: var(--k-shadow-glow-sm) !important;
    position: relative;
}
/* Force white text on EVERY descendant of an active button */
.fi-sidebar-item.fi-active .fi-sidebar-item-button *,
.fi-sidebar-item.fi-active .fi-sidebar-item-button span,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-button svg {
    color: #fff !important;
}

/* Cap on the start side of the active pill */
.fi-sidebar-item.fi-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 18%;
    width: 3px;
    background: var(--k-primary-deep);
    border-radius: 999px;
    box-shadow: 0 0 8px var(--k-primary-light);
}
[dir="ltr"] .fi-sidebar-item.fi-active .fi-sidebar-item-button::before { left: -0.75rem; }
[dir="rtl"] .fi-sidebar-item.fi-active .fi-sidebar-item-button::before { right: -0.75rem; }

/* Sub-items */
.fi-sidebar-sub-group-list .fi-sidebar-item-button {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.9rem !important;
}

/* Item badges (numeric counters in sidebar) */
.fi-sidebar-item-badge,
.fi-sidebar .fi-badge {
    background: var(--k-primary-soft) !important;
    color: var(--k-primary) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 999px !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-badge,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-badge {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* Sidebar collapsed (mini) tweaks */
.fi-sidebar.fi-sidebar-collapsible-on-desktop:not(.fi-sidebar-open) .fi-sidebar-item-button {
    justify-content: center !important;
}

/* ─── TOPBAR (frosted, layered) ─────────────────────────────── */
.fi-topbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
    border-bottom: 1px solid var(--k-line) !important;
    box-shadow: var(--k-shadow-xs) !important;
    height: var(--k-topbar-h) !important;
    min-height: var(--k-topbar-h) !important;
}
.fi-topbar > nav,
.fi-topbar > div {
    height: 100% !important;
    align-items: center !important;
}

/* Global search input — pill, prominent */
.fi-global-search-field {
    background: var(--k-surface-2) !important;
    border: 1px solid var(--k-border-soft) !important;
    border-radius: var(--k-r-pill) !important;
    height: 2.6rem !important;
    color: var(--k-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transition: all 0.18s var(--k-ease);
    min-width: 280px;
}
.fi-global-search-field input {
    background: transparent !important;
    border: 0 !important;
    color: var(--k-ink) !important;
    font-size: 0.9rem;
}
.fi-global-search-field:focus-within {
    border-color: var(--k-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(42, 82, 230, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Topbar action buttons */
.fi-topbar-item-button,
.fi-topbar .fi-icon-btn,
.fi-dropdown-trigger > button {
    border-radius: var(--k-r-pill) !important;
    transition: all 0.18s var(--k-ease) !important;
    color: var(--k-ink-3) !important;
}
.fi-topbar-item-button:hover,
.fi-topbar .fi-icon-btn:hover {
    background: var(--k-primary-soft) !important;
    color: var(--k-primary) !important;
}

/* Notification dot indicator */
.fi-topbar-database-notifications-trigger,
.fi-topbar [aria-label*="notification" i] {
    position: relative !important;
}

/* User menu trigger */
.fi-user-menu-trigger {
    border-radius: var(--k-r-pill) !important;
    background: linear-gradient(180deg, #ffffff, var(--k-surface-2)) !important;
    padding: 0.3rem 0.85rem 0.3rem 0.3rem !important;
    border: 1px solid var(--k-border-soft) !important;
    box-shadow: var(--k-shadow-xs) !important;
    transition: all 0.18s var(--k-ease) !important;
}
.fi-user-menu-trigger:hover {
    border-color: var(--k-primary-light) !important;
    box-shadow: var(--k-shadow-sm) !important;
}
[dir="rtl"] .fi-user-menu-trigger {
    padding: 0.3rem 0.3rem 0.3rem 0.85rem !important;
}

/* Avatar — gradient ring */
.fi-avatar {
    background: linear-gradient(135deg, var(--k-primary) 0%, var(--k-accent) 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--k-primary-light);
}

/* ─── PAGE / MAIN CONTENT ────────────────────────────────────── */
.fi-main { background: transparent !important; }

.fi-page {
    padding: 1.75rem 2rem !important;
    background: transparent !important;
    animation: k-fadeUp 0.36s var(--k-ease) both;
}
@media (max-width: 768px) {
    .fi-page { padding: 1rem !important; }
}

/* Page header */
.fi-page-header,
.fi-header {
    margin-bottom: 1.5rem !important;
}
.fi-header-heading,
.fi-page-header-heading,
h1.fi-header-heading {
    font-family: var(--k-font-base) !important;
    color: var(--k-ink) !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2;
}
.fi-header-subheading {
    color: var(--k-muted) !important;
    font-weight: 400 !important;
    margin-top: 0.35rem !important;
    font-size: 0.95rem;
}

/* Breadcrumbs */
.fi-breadcrumbs a,
.fi-breadcrumbs-item a { color: var(--k-muted) !important; font-weight: 500; }
.fi-breadcrumbs a:hover { color: var(--k-primary) !important; }

/* ─── WELCOME / ACCOUNT WIDGET (gradient hero) ───────────────── */
.fi-account-widget,
.fi-account-widget > div,
.fi-account-widget .fi-section,
.fi-section.fi-account-widget {
    background:
        radial-gradient(600px 300px at 0% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
        radial-gradient(500px 250px at 100% 100%, rgba(124, 58, 237, 0.30), transparent 55%),
        linear-gradient(135deg, var(--k-primary) 0%, var(--k-primary-mid) 55%, var(--k-primary-dark) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 12px 32px -8px rgba(42, 82, 230, 0.40) !important;
    border-radius: var(--k-r-2xl) !important;
    overflow: hidden;
    position: relative;
}
.fi-account-widget::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 600 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08'%3E%3Ccircle cx='540' cy='40' r='80'/%3E%3Ccircle cx='540' cy='40' r='130'/%3E%3Ccircle cx='540' cy='40' r='180'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top;
    pointer-events: none;
}
[dir="rtl"] .fi-account-widget::before {
    transform: scaleX(-1);
}
.fi-account-widget .fi-section-content,
.fi-account-widget .fi-section-content-ctn,
.fi-account-widget > div > div {
    background: transparent !important;
    color: #fff !important;
    padding: 1.5rem 1.75rem !important;
    position: relative;
    z-index: 1;
}
.fi-account-widget .fi-section-content *:not(.fi-btn):not(.fi-btn *):not(.fi-avatar):not(.fi-avatar *):not(svg):not(svg *):not(path) {
    color: #fff !important;
}
.fi-account-widget .fi-avatar {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30) !important;
    background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%) !important;
    color: var(--k-primary) !important;
}
.fi-account-widget .fi-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(8px);
}
.fi-account-widget .fi-btn:hover {
    background: rgba(255, 255, 255, 0.26) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

/* ─── CARDS / SECTIONS ──────────────────────────────────────── */
.fi-section,
.fi-fo-section,
.fi-card,
.fi-wi-stats-overview-stat,
.fi-wi-chart {
    background: var(--k-surface) !important;
    border: 1px solid var(--k-border-soft) !important;
    border-radius: var(--k-r-xl) !important;
    box-shadow: var(--k-shadow-md) !important;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.20s var(--k-ease), transform 0.20s var(--k-ease);
}

/* Subtle gradient stripe on top of section cards */
.fi-section::before,
.fi-wi-chart::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--k-primary-light), transparent);
    opacity: 0.5;
}
.fi-account-widget::before { /* keep account widget's own bg pattern */ }

.fi-section-header,
.fi-fo-section-header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid var(--k-line) !important;
    background: var(--k-surface) !important;
}
.fi-section-header-heading {
    color: var(--k-ink) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.01em;
}
.fi-section-header-description {
    color: var(--k-muted) !important;
    font-size: 0.85rem !important;
    margin-top: 0.2rem !important;
}

.fi-section-content,
.fi-fo-section-content {
    padding: 1.5rem !important;
    background: var(--k-surface) !important;
}
.fi-section-content-ctn { padding: 0 !important; }

/* ─── KPI / STATS OVERVIEW (premium) ────────────────────────── */
.fi-wi-stats-overview-stat {
    padding: 1.5rem 1.5rem 1.4rem !important;
    transition: all 0.24s var(--k-ease);
    cursor: default;
    overflow: hidden;
    position: relative;
}
.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--k-primary), var(--k-accent), var(--k-info));
    opacity: 0;
    transition: opacity 0.24s var(--k-ease);
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--k-shadow-xl) !important;
    border-color: var(--k-primary-light) !important;
}
.fi-wi-stats-overview-stat:hover::before { opacity: 1; }

.fi-wi-stats-overview-stat-label {
    color: var(--k-muted) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}

.fi-wi-stats-overview-stat-value {
    font-family: var(--k-font-num) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--k-ink) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1;
    font-feature-settings: "tnum" 1, "zero" 1;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.8rem !important;
    margin-top: 0.6rem !important;
    color: var(--k-muted-2) !important;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.fi-wi-stats-overview-stat-description-icon {
    width: 1rem !important;
    height: 1rem !important;
}

/* Tinted icon badge (Filament renders icon inside the stat).
   IMPORTANT: only target the explicit icon class; never the
   sparkline SVG that Filament also renders inside the tile. */
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0.5rem !important;
    border-radius: var(--k-r-md) !important;
    background: var(--k-primary-soft) !important;
    color: var(--k-primary) !important;
    flex-shrink: 0;
}
/* Make sure stat text/value is always readable */
.fi-wi-stats-overview-stat *,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    position: relative;
    z-index: 1;
}

/* Color variants for stat description */
.fi-wi-stats-overview-stat-description.fi-color-success,
.fi-color-success { color: var(--k-success-deep) !important; }
.fi-color-danger  { color: var(--k-danger-deep)  !important; }
.fi-color-warning { color: var(--k-warning-deep) !important; }
.fi-color-info    { color: var(--k-info-deep)    !important; }

/* Charts container polish */
.fi-wi-chart {
    padding: 1.25rem 1.5rem 1.5rem !important;
}
.fi-wi-chart-chart canvas {
    border-radius: var(--k-r-md);
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.fi-btn,
.fi-link {
    border-radius: var(--k-r-md) !important;
    font-weight: 600 !important;
    font-family: var(--k-font-base) !important;
    transition: all 0.20s var(--k-ease) !important;
    letter-spacing: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Primary CTA — glossy gradient + brand glow + shimmer on hover */
.fi-btn-color-primary,
.fi-btn-color-primary.fi-btn-size-md,
button.fi-btn-color-primary {
    background: linear-gradient(135deg, var(--k-primary) 0%, var(--k-primary-mid) 60%, var(--k-primary-dark) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow:
        var(--k-shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
.fi-btn-color-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.20) 50%, transparent 70%);
    background-size: 200% 100%;
    background-position: -200% 0;
    pointer-events: none;
    transition: background-position 0.6s var(--k-ease);
}
.fi-btn-color-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 28px rgba(42, 82, 230, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.fi-btn-color-primary:hover::after {
    background-position: 200% 0;
}
.fi-btn-color-primary:active {
    transform: translateY(0);
}

.fi-btn-color-danger {
    background: linear-gradient(135deg, var(--k-red) 0%, #d63d28 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(238, 73, 50, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.fi-btn-color-danger:hover {
    box-shadow: 0 8px 22px rgba(238, 73, 50, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px);
}

.fi-btn-color-success {
    background: linear-gradient(135deg, var(--k-success) 0%, #059669 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.30) !important;
}

.fi-btn-color-warning {
    background: linear-gradient(135deg, var(--k-warning) 0%, #d97706 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.30) !important;
}

.fi-btn-color-gray,
.fi-btn-outlined {
    background: var(--k-surface) !important;
    color: var(--k-ink-3) !important;
    border: 1px solid var(--k-border-soft) !important;
    box-shadow: var(--k-shadow-xs) !important;
}
.fi-btn-color-gray:hover,
.fi-btn-outlined:hover {
    background: var(--k-surface-2) !important;
    border-color: var(--k-primary) !important;
    color: var(--k-primary) !important;
    box-shadow: var(--k-shadow-sm) !important;
}

.fi-icon-btn { border-radius: var(--k-r-pill) !important; }

/* ─── INPUTS / FORMS (floating-label feel) ──────────────────── */
.fi-input,
.fi-input-wrp,
.fi-fo-text-input input,
.fi-fo-textarea textarea,
.fi-fo-select select,
.fi-input-wrp input,
.fi-input-wrp textarea {
    background: var(--k-surface) !important;
    border: 1px solid var(--k-border-soft) !important;
    border-radius: var(--k-r-md) !important;
    color: var(--k-ink) !important;
    transition: all 0.18s var(--k-ease) !important;
    font-size: 0.92rem !important;
}
.fi-input-wrp { padding: 0 !important; }
.fi-input-wrp input,
.fi-input-wrp textarea { border: 0 !important; box-shadow: none !important; }

.fi-input:focus,
.fi-input-wrp:focus-within,
.fi-fo-text-input input:focus,
.fi-fo-textarea textarea:focus {
    border-color: var(--k-primary) !important;
    box-shadow: 0 0 0 4px rgba(42, 82, 230, 0.12) !important;
    outline: none !important;
}

.fi-fo-field-wrp-label,
.fi-fo-field-label,
label {
    color: var(--k-ink-2) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    margin-bottom: 0.4rem !important;
}

.fi-fo-field-wrp-hint,
.fi-fo-field-hint {
    color: var(--k-muted) !important;
    font-size: 0.78rem !important;
}

/* Toggle / Switch */
.fi-fo-toggle button[role="switch"][aria-checked="true"] {
    background: linear-gradient(135deg, var(--k-primary), var(--k-primary-mid)) !important;
}

/* Select / dropdown trigger */
.fi-fo-select-trigger {
    border-radius: var(--k-r-md) !important;
    border: 1px solid var(--k-border-soft) !important;
}

/* ─── TABLES ────────────────────────────────────────────────── */
.fi-ta {
    background: var(--k-surface) !important;
    border-radius: var(--k-r-xl) !important;
    border: 1px solid var(--k-border-soft) !important;
    box-shadow: var(--k-shadow-md) !important;
    overflow: hidden;
    position: relative;
}
.fi-ta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--k-primary-light), transparent);
    opacity: 0.5;
}

.fi-ta-header {
    background: var(--k-surface) !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid var(--k-line) !important;
}
.fi-ta-header-heading {
    color: var(--k-ink) !important;
    font-weight: 700 !important;
    font-size: 1.05rem;
}

.fi-ta-content { background: var(--k-surface) !important; }

.fi-ta thead tr,
.fi-ta-header-cell {
    background: var(--k-surface-3) !important;
    color: var(--k-ink-3) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--k-line) !important;
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
}

.fi-ta tbody tr {
    transition: background 0.15s var(--k-ease), box-shadow 0.15s var(--k-ease);
    border-bottom: 1px solid var(--k-line-soft) !important;
}
.fi-ta tbody tr:hover {
    background: var(--k-primary-soft) !important;
}
.fi-ta tbody tr:last-child { border-bottom: 0 !important; }

.fi-ta-cell {
    color: var(--k-ink) !important;
    font-size: 0.9rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    vertical-align: middle !important;
}
.fi-ta-text { color: var(--k-ink) !important; }

/* Table empty / pagination */
.fi-ta-empty-state { padding: 3.5rem 1.5rem !important; }
.fi-ta-empty-state-heading {
    color: var(--k-ink) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}
.fi-ta-empty-state-description { color: var(--k-muted) !important; }
.fi-ta-empty-state-icon-bg {
    background: linear-gradient(135deg, var(--k-primary-soft), var(--k-accent-soft)) !important;
    border-radius: var(--k-r-pill) !important;
}

.fi-pagination {
    background: var(--k-surface) !important;
    border-top: 1px solid var(--k-line) !important;
    padding: 0.85rem 1.25rem !important;
}
.fi-pagination-item button {
    border-radius: var(--k-r-sm) !important;
    border: 1px solid var(--k-border-soft) !important;
}
.fi-pagination-item button[aria-current="page"] {
    background: linear-gradient(135deg, var(--k-primary), var(--k-primary-mid)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--k-shadow-glow-sm);
}

/* Table filters / search */
.fi-ta-filters,
.fi-ta-toolbar {
    padding: 0.85rem 1.25rem !important;
    background: var(--k-surface-2) !important;
    border-bottom: 1px solid var(--k-line) !important;
}

/* ─── BADGES ────────────────────────────────────────────────── */
.fi-badge {
    border-radius: var(--k-r-pill) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    padding: 0.28rem 0.75rem !important;
    letter-spacing: 0.02em !important;
    border: 1px solid transparent !important;
}
.fi-badge-color-primary  { background: var(--k-primary-soft)  !important; color: var(--k-primary)      !important; border-color: rgba(42, 82, 230, 0.18) !important; }
.fi-badge-color-success  { background: var(--k-success-soft)  !important; color: var(--k-success-deep) !important; border-color: rgba(16, 185, 129, 0.20) !important; }
.fi-badge-color-warning  { background: var(--k-warning-soft)  !important; color: var(--k-warning-deep) !important; border-color: rgba(245, 158, 11, 0.20) !important; }
.fi-badge-color-danger   { background: var(--k-danger-soft)   !important; color: var(--k-danger-deep)  !important; border-color: rgba(239, 68, 68, 0.20)  !important; }
.fi-badge-color-info     { background: var(--k-info-soft)     !important; color: var(--k-info-deep)    !important; border-color: rgba(14, 165, 233, 0.20) !important; }
.fi-badge-color-gray     { background: #EEF2F7 !important; color: var(--k-ink-2) !important; border-color: var(--k-border-soft) !important; }

/* ─── DROPDOWNS / MENUS ─────────────────────────────────────── */
.fi-dropdown-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid var(--k-border-soft) !important;
    border-radius: var(--k-r-lg) !important;
    box-shadow: var(--k-shadow-2xl) !important;
    overflow: hidden;
    padding: 0.4rem !important;
}
.fi-dropdown-list-item-button {
    border-radius: var(--k-r-sm) !important;
    transition: background 0.15s var(--k-ease), color 0.15s var(--k-ease);
    padding: 0.5rem 0.75rem !important;
    font-size: 0.88rem !important;
}
.fi-dropdown-list-item-button:hover {
    background: var(--k-primary-soft) !important;
    color: var(--k-primary) !important;
}

/* ─── MODALS ────────────────────────────────────────────────── */
.fi-modal-window {
    background: var(--k-surface) !important;
    border-radius: var(--k-r-2xl) !important;
    box-shadow: var(--k-shadow-2xl) !important;
    border: 0 !important;
    overflow: hidden;
}
.fi-modal-header,
.fi-modal-heading {
    color: var(--k-ink) !important;
    font-weight: 700 !important;
}

/* ─── TABS ──────────────────────────────────────────────────── */
.fi-tabs {
    background: var(--k-surface-3) !important;
    border-radius: var(--k-r-md) !important;
    padding: 0.3rem !important;
    border: 1px solid var(--k-border-soft) !important;
}
.fi-tabs-item {
    border-radius: var(--k-r-sm) !important;
    color: var(--k-muted) !important;
    font-weight: 600 !important;
    transition: all 0.18s var(--k-ease) !important;
    padding: 0.5rem 0.95rem !important;
}
.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] {
    background: linear-gradient(180deg, #fff, var(--k-surface-2)) !important;
    color: var(--k-primary) !important;
    box-shadow: var(--k-shadow-sm) !important;
}

/* ─── NOTIFICATIONS ─────────────────────────────────────────── */
.fi-no-notification {
    background: var(--k-surface) !important;
    border: 1px solid var(--k-border-soft) !important;
    border-radius: var(--k-r-lg) !important;
    box-shadow: var(--k-shadow-2xl) !important;
}
.fi-no-notification-title { color: var(--k-ink) !important; font-weight: 700 !important; }

/* ─── LOGIN / SIMPLE PAGES (premium canvas) ─────────────────── */
.fi-simple-layout,
.fi-simple-main {
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(42, 82, 230, 0.18), transparent 55%),
        radial-gradient(800px 500px at 100% 100%, rgba(124, 58, 237, 0.14), transparent 55%),
        linear-gradient(135deg, #EEF2FA 0%, #E8EEF9 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

.fi-simple-page {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: var(--k-r-2xl) !important;
    box-shadow:
        0 24px 64px -12px rgba(15, 23, 42, 0.18),
        0 8px 24px -8px rgba(42, 82, 230, 0.18) !important;
    padding: 2.75rem 2.5rem !important;
    position: relative;
    overflow: hidden;
}
.fi-simple-page::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--k-primary), var(--k-accent), var(--k-info));
}

.fi-simple-header-logo { margin-bottom: 1.25rem !important; }
.fi-simple-header-heading {
    color: var(--k-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-size: 1.5rem !important;
}
.fi-simple-header-subheading { color: var(--k-muted) !important; }

/* ─── ICONS / MISC ──────────────────────────────────────────── */
.fi-icon { color: inherit; }

a, .fi-link { color: var(--k-primary); }
.fi-link:hover, a:hover { color: var(--k-primary-mid); }

::selection {
    background: rgba(42, 82, 230, 0.20);
    color: var(--k-primary-deep);
}

/* ─── ACTIONS HEADER / RESOURCE PAGES ───────────────────────── */
.fi-resource-list-records-page .fi-header,
.fi-resource-page .fi-header {
    padding-bottom: 0.5rem;
}

/* The "Create" / primary action bar */
.fi-header-actions .fi-btn-color-primary {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.92rem !important;
}

/* ─── RTL ADJUSTMENTS ───────────────────────────────────────── */
[dir="rtl"] body,
[dir="rtl"] .fi-body {
    font-family: var(--k-font-arabic), var(--k-font-latin) !important;
}
[dir="rtl"] .fi-sidebar-item-button { text-align: right !important; }
[dir="rtl"] .fi-header-heading { letter-spacing: 0 !important; }
[dir="rtl"] .fi-wi-stats-overview-stat-value { letter-spacing: 0 !important; }

/* ─── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* End of file */