/* Glitch Artistry — Filament panel UX fixes */

/* ── Global scrollbars — same as website ── */
html,
body,
.fi-body {
    scrollbar-width: thin;
    scrollbar-color: #E91E8C #1a1f26;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #E91E8C #1a1f26;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1f26;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #E91E8C, #E0563F);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #E0563F, #E91E8C);
}

::-webkit-scrollbar-corner {
    background: #1a1f26;
}

.fi-body,
.fi-main-ctn {
    overflow-x: hidden;
}

/* iPhone/Safari: keep topbar above page; never force position:absolute on
   dropdown panels — that breaks Floating UI / teleport and buries the menu. */
.fi-topbar {
    position: sticky;
    top: 0;
    z-index: 50 !important;
}

.ga-user-menu-panel.fi-dropdown-panel {
    position: fixed !important;
    z-index: 2147483646 !important;
}

.fi-main,
.fi-main-ctn,
.fi-page,
.fi-wi-widget,
.fi-section {
    position: relative;
    z-index: 0;
}

@media (max-width: 1024px) {
    .fi-body,
    .fi-main-ctn {
        overflow-x: clip;
    }

    .fi-topbar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        z-index: 100 !important;
    }
}

/* Scroll only inside table, not whole page */
.fi-ta-ctn {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
}

.fi-ta-table {
    min-width: 100%;
}

/* Keep action column compact — dropdown instead of wide buttons */
.fi-ta-actions-cell {
    width: 4rem;
    white-space: nowrap;
}

.fi-ta-actions {
    justify-content: flex-end;
    gap: 0.25rem;
}

/* Sidebar: hide scrollbar, keep scroll */
.fi-sidebar-nav {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-gutter: auto !important;
}

.fi-sidebar-nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Mobile: full-width content, readable tables */
@media (max-width: 1024px) {
    .fi-main {
        padding-inline: 0.75rem;
    }

    .fi-ta-header-cell,
    .fi-ta-cell {
        padding-inline: 0.5rem;
        font-size: 0.8125rem;
    }

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

@media (max-width: 640px) {
    .fi-ta-search-field {
        width: 100%;
    }

    .fi-fo-component-ctn {
        grid-column: span 1 / span 1 !important;
    }
}

/* Form sections — clearer on dark theme */
.fi-section-header-heading {
    font-weight: 600;
}

/* Status badges easier to read */
.fi-badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Order detail modal — brand spacing & colors */
.fi-modal-content {
    padding-inline: 1rem;
}

.fi-btn.fi-color-primary {
    --c-400: 233 30 140;
    --c-500: 233 30 140;
    --c-600: 224 86 63;
}

/* ── SPA navigation progress bar — website brand gradient ── */
:root {
    --livewire-progress-bar-color: #e91e8c;
}

#nprogress .bar {
    background: linear-gradient(90deg, #e91e8c 0%, #E0563F 100%) !important;
    height: 3px !important;
}

#nprogress .peg {
    box-shadow: 0 0 12px #e91e8c, 0 0 6px #E0563F !important;
}

#nprogress .spinner-icon {
    border-top-color: #e91e8c !important;
    border-left-color: #E0563F !important;
}