/*
|--------------------------------------------------------------------------
| AL HIJRAH COLDSTORE
| Filament Premium UI
|--------------------------------------------------------------------------
*/

:root {
    --ah-radius: 18px;
    --ah-radius-sm: 12px;
    --ah-border: rgba(148, 163, 184, .22);
    --ah-shadow:
        0 10px 30px rgba(15, 23, 42, .05);
}

/* ------------------------------------------------
   PAGE
------------------------------------------------ */

.fi-body {
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(6, 182, 212, .07),
            transparent 28rem
        ),
        #f8fafc;
}

.dark .fi-body {
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(6, 182, 212, .08),
            transparent 30rem
        ),
        #020617;
}

/* ------------------------------------------------
   TOPBAR
------------------------------------------------ */

.fi-topbar nav {
    border-bottom:
        1px solid var(--ah-border);
    background:
        rgba(248, 250, 252, .82);
    backdrop-filter: blur(18px);
}

.dark .fi-topbar nav {
    background:
        rgba(2, 6, 23, .82);
}

/* ------------------------------------------------
   SIDEBAR
------------------------------------------------ */

.fi-sidebar {
    border-right:
        1px solid var(--ah-border);
    background:
        rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
}

.dark .fi-sidebar {
    background:
        rgba(2, 6, 23, .94);
}

.fi-sidebar-header {
    border-bottom:
        1px solid var(--ah-border);
}

.fi-sidebar-group-label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
    opacity: .65;
}

.fi-sidebar-item-button {
    border-radius: 12px;
    transition:
        background .18s ease,
        transform .18s ease;
}

.fi-sidebar-item-button:hover {
    transform: translateX(2px);
}

/* ------------------------------------------------
   PAGE HEADER
------------------------------------------------ */

.fi-header-heading {
    letter-spacing: -.025em;
}

.fi-header-subheading {
    max-width: 760px;
}

/* ------------------------------------------------
   SECTION / CARD
------------------------------------------------ */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border:
        1px solid var(--ah-border);
    border-radius:
        var(--ah-radius) !important;
    box-shadow:
        var(--ah-shadow);
}

.fi-section {
    overflow: hidden;
}

.dark .fi-section,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat {
    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, .14);
}

/* ------------------------------------------------
   STATS
------------------------------------------------ */

.fi-wi-stats-overview-stat {
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px
        rgba(15, 23, 42, .08);
}

/* ------------------------------------------------
   TABLE
------------------------------------------------ */

.fi-ta-header {
    padding-top: 18px;
    padding-bottom: 18px;
}

.fi-ta-row {
    transition:
        background .15s ease;
}

.fi-ta-cell {
    vertical-align: middle;
}

/* ------------------------------------------------
   INPUT
------------------------------------------------ */

.fi-input-wrp {
    border-radius:
        var(--ah-radius-sm) !important;
}

.fi-fo-field-wrp-label {
    font-weight: 650;
}

/* ------------------------------------------------
   BUTTON
------------------------------------------------ */

.fi-btn {
    border-radius:
        11px !important;
    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.fi-btn:hover {
    transform: translateY(-1px);
}

/* ------------------------------------------------
   MODAL
------------------------------------------------ */

.fi-modal-window {
    border-radius:
        22px !important;
    border:
        1px solid var(--ah-border);
}

/* ------------------------------------------------
   BADGE
------------------------------------------------ */

.fi-badge {
    border-radius:
        999px !important;
}

/* ------------------------------------------------
   LOGIN
------------------------------------------------ */

.fi-simple-main {
    border-radius:
        28px !important;
    border:
        1px solid var(--ah-border);
    box-shadow:
        0 30px 80px
        rgba(15, 23, 42, .10);
}

.dark .fi-simple-main {
    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .30);
}

/* ------------------------------------------------
   MOBILE
------------------------------------------------ */

@media (max-width: 768px) {
    .fi-main {
        padding-left: 14px;
        padding-right: 14px;
    }

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

    .fi-section,
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat {
        border-radius:
            15px !important;
    }

    .fi-ta-content {
        overflow-x: auto;
    }

    .fi-btn {
        min-height: 40px;
    }
}

/* ------------------------------------------------
   MOTION ACCESSIBILITY
------------------------------------------------ */

@media (
    prefers-reduced-motion: reduce
) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration:
            .01ms !important;
        animation-duration:
            .01ms !important;
        animation-iteration-count:
            1 !important;
    }
}