/* ============================================================
   Agera FMCG — Custom Panel Stylesheet
   Injected globally to both Admin & Member panels via Filament's
   custom CSS hook. Uses Filament's own CSS variables so it
   always works in both light and dark mode without Tailwind JIT.
   ============================================================ */

/* ─────────────── UNIFIED SIDEBAR & TOPBAR ─────────────── */
/* Seamless background blending between sidebar header and topbar */
.dark .fi-topbar {
    background-color: var(--fi-bg, #0f172a) !important;
    border-bottom: 1px solid color-mix(in sRGB, var(--fi-color-gray-950) 6%, transparent) !important;
    box-shadow: none !important;
}

.dark .fi-sidebar {
    background-color: color-mix(in sRGB, var(--fi-bg, #0f172a) 95%, transparent) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-right: 1px solid color-mix(in sRGB, var(--fi-color-gray-950) 8%, transparent) !important;
    box-shadow: none !important;
}

/* Mobile Sidebar Opaque Overlay & Scroll Fix */
@media (max-width: 1023px) {
    .dark aside.fi-sidebar,
    .dark .fi-sidebar,
    .dark .fi-sidebar-header,
    .dark .fi-sidebar-nav,
    aside.fi-sidebar {
        background-color: #0b1120 !important; /* solid deep dark bg on mobile */
        background: #0b1120 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
        z-index: 99995 !important; /* Ensure sidebar is ON TOP of bottom nav & WA widget */
    }

    /* Generous bottom scroll padding so all items can be scrolled into full view */
    .fi-sidebar-nav {
        padding-bottom: 8rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .fi-sidebar-nav > ul {
        padding-bottom: 4rem !important;
    }
}

/* Mobile Bottom Nav Clearance for Save Buttons, Form Actions, Tables & Pagination */
@media screen and (max-width: 767px) {
    .fi-main,
    .fi-page,
    .fi-form-actions,
    .fi-modal-footer,
    main.fi-main,
    form,
    .fi-section,
    .fi-ta-pagination,
    .filament-main {
        padding-bottom: 6rem !important;
    }
}

/* Print Rules - Hide all floating and interactive panel chrome on Print / PDF */
@media print {
    #agera-mobile-nav,
    .agera-nav-item,
    .agera-wa-widget,
    #ageraWaWidget,
    #ageraWaPopup,
    .agera-sound-notification,
    #agera-global-loader,
    #agera-dev-feedback-root,
    .floating-cart-btn,
    .fi-sidebar,
    .fi-topbar,
    .fi-header,
    aside {
        display: none !important;
        visibility: hidden !important;
    }
    
    body, html {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

.dark .fi-sidebar-header {
    background-color: transparent !important;
    border-bottom: 1px solid color-mix(in sRGB, var(--fi-color-gray-950) 6%, transparent) !important;
}

/* ─────────────── SIDEBAR PADDING & COMPACT SPACING ─────────────── */
.fi-sidebar-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.fi-sidebar-nav {
    padding: 0.25rem 0.5rem !important;
}

.fi-sidebar-nav > ul {
    gap: 0.1rem !important;
}

.fi-sidebar-group-label {
    padding-top: 0.32rem !important;
    padding-bottom: 0.12rem !important;
    padding-left: 0.4rem !important;
    margin-top: 0.25rem !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.08em !important;
    opacity: 0.55 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.fi-sidebar-item-button {
    padding-top: 0.28rem !important;
    padding-bottom: 0.28rem !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    border-radius: 0.45rem !important;
    margin-bottom: 0.05rem !important;
}

.fi-sidebar-item-label {
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 700 !important;
}

.fi-sidebar-group {
    padding: 0 !important;
    margin: 0 !important;
}

.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0.1rem !important;
}

/* ─────────────── CUSTOM FORM INPUT STYLING ─────────────── */
.fi-main .agera-input,
.fi-main input[type="text"].agera-inp,
.fi-main input[type="number"].agera-inp,
.fi-main textarea.agera-inp,
.fi-main select.agera-inp {
    background-color: var(--fi-bg);
    color: var(--fi-color-gray-950);
    border: 1px solid color-mix(in sRGB, var(--fi-color-gray-950) 12%, transparent);
    border-radius: 0.625rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    appearance: none;
}

.fi-main .agera-input:focus,
.fi-main input[type="text"].agera-inp:focus,
.fi-main input[type="number"].agera-inp:focus,
.fi-main textarea.agera-inp:focus,
.fi-main select.agera-inp:focus {
    border-color: var(--fi-primary-500);
    box-shadow: 0 0 0 2px color-mix(in sRGB, var(--fi-primary-500) 20%, transparent);
}

/* ─────────────── PRODUCT CARD DARK MODE ─────────────── */
.agera-product-card {
    background-color: color-mix(in sRGB, var(--fi-color-gray-950) 5%, var(--fi-bg));
    border: 1px solid color-mix(in sRGB, var(--fi-color-gray-950) 8%, transparent);
    border-radius: 0.875rem;
    transition: box-shadow 0.2s, background-color 0.2s;
    overflow: hidden;
}

.agera-product-card:hover {
    box-shadow: 0 4px 16px color-mix(in sRGB, var(--fi-color-gray-950) 8%, transparent);
}

.agera-product-card .agera-img-placeholder {
    background-color: color-mix(in sRGB, var(--fi-color-gray-950) 10%, var(--fi-bg));
}

/* ─────────────── TABLE STYLING ─────────────── */
.agera-table thead tr th {
    color: color-mix(in sRGB, var(--fi-color-gray-950) 50%, transparent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in sRGB, var(--fi-color-gray-950) 8%, transparent);
}

.agera-table tbody tr {
    border-bottom: 1px solid color-mix(in sRGB, var(--fi-color-gray-950) 6%, transparent);
    transition: background-color 0.15s;
}

.agera-table tbody tr:last-child {
    border-bottom: none;
}

.agera-table tbody tr:hover {
    background-color: color-mix(in sRGB, var(--fi-color-gray-950) 4%, transparent);
}

.agera-table tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    color: color-mix(in sRGB, var(--fi-color-gray-950) 80%, transparent);
}

/* ─────────────── FORM SECTION & DROPDOWN Z-INDEX STACKING FIX ─────────────── */
/* Prevent dropdowns (Choices.js, Select, DatePicker, Combobox) from rendering under subsequent section cards */
.fi-section {
    position: relative;
    transition: z-index 0.1s ease;
}

.fi-section:focus-within,
.fi-section:hover,
.fi-section:has(.is-open),
.fi-section:has([aria-expanded="true"]) {
    z-index: 30 !important;
}

.fi-fo-field-wrp {
    position: relative;
}

.fi-fo-field-wrp:focus-within,
.fi-fo-field-wrp:has(.is-open),
.fi-fo-field-wrp:has([aria-expanded="true"]) {
    z-index: 40 !important;
}

.choices {
    position: relative;
}

.choices.is-open,
.choices.is-focused,
.choices[data-type*="select-one"].is-open {
    z-index: 50 !important;
}

.choices__list--dropdown,
.choices .choices__list--dropdown {
    z-index: 100 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
}

/* ─────────────── WIDGET & SECTION BACKGROUND FIX ─────────────── */
.dark .fi-section {
    background-color: color-mix(in sRGB, var(--fi-color-gray-950) 2%, var(--fi-bg)) !important;
    border: 1px solid color-mix(in sRGB, var(--fi-color-gray-950) 8%, transparent) !important;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.02) !important;
}

/* ─────────────── CART ITEM DIVIDER ─────────────── */
.agera-divider {
    border-color: color-mix(in sRGB, var(--fi-color-gray-950) 8%, transparent);
}

/* ─────────────── STAT BADGE STYLING ─────────────── */
.agera-badge-success {
    background-color: color-mix(in sRGB, #10b981 15%, transparent);
    color: #10b981;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.agera-badge-warning {
    background-color: color-mix(in sRGB, #f59e0b 15%, transparent);
    color: #d97706;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.agera-badge-danger {
    background-color: color-mix(in sRGB, #ef4444 15%, transparent);
    color: #ef4444;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
}