/* ==========================================================================
   R GROUP FINANCE — LUXURY LIGHT GRADIENT THEME (Filament 3)
   Background : Light premium gradient
   Accent     : Orange
   Detail     : Black / charcoal for text and fine lines
   Scope      : body.fi-panel-user-panel
   ========================================================================== */

/* 01 — COLOR SYSTEM ======================================================= */
body.fi-panel-user-panel {
    color-scheme: light;
    --rg-white: #ffffff;
    --rg-ivory: #fffdfa;
    --rg-cream: #fff8f1;
    --rg-surface: rgba(255, 255, 255, 0.82);
    --rg-surface-solid: #ffffff;
    --rg-surface-soft: #fffaf5;
    --rg-line: #ece6df;
    --rg-line-strong: #e1d7cc;
    --rg-black: #161616;
    --rg-text: #292929;
    --rg-muted: #77736d;
    --rg-orange: #f57c00;
    --rg-orange-hover: #e36f00;
    --rg-orange-deep: #bb5900;
    --rg-orange-soft: #fff1e2;
    --rg-orange-glow: rgba(245, 124, 0, 0.15);
    --rg-shadow-sm: 0 8px 24px rgba(17, 17, 17, 0.05);
    --rg-shadow-md: 0 14px 38px rgba(17, 17, 17, 0.08);
    --rg-shadow-lg: 0 22px 60px rgba(17, 17, 17, 0.10);
    --rg-radius: 16px;
    --rg-radius-sm: 12px;

    min-height: 100vh;
    color: var(--rg-text);
    background:
        radial-gradient(circle at 0% 0%, rgba(245, 124, 0, 0.12) 0, rgba(245, 124, 0, 0) 26%),
        radial-gradient(circle at 100% 12%, rgba(255, 188, 117, 0.18) 0, rgba(255, 188, 117, 0) 24%),
        radial-gradient(circle at 50% 100%, rgba(22, 22, 22, 0.035) 0, rgba(22, 22, 22, 0) 28%),
        linear-gradient(135deg, #ffffff 0%, #fff9f3 42%, #fffefb 72%, #fff4e8 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

body.fi-panel-user-panel ::selection {
    background: #ffdcb6;
    color: var(--rg-black);
}

/* 02 — PAGE LAYOUT ======================================================== */
body.fi-panel-user-panel :is(.fi-layout, .fi-main-ctn, .fi-main, .fi-page, .fi-simple-layout) {
    background: transparent !important;
}

body.fi-panel-user-panel .fi-main {
    color: var(--rg-text);
}

body.fi-panel-user-panel :is(
    .fi-header-heading,
    .fi-section-header-heading,
    .fi-ta-header-heading,
    .fi-wi-stats-overview-stat-value,
    .fi-logo
) {
    color: var(--rg-black);
    letter-spacing: -0.03em;
}

body.fi-panel-user-panel :is(
    .fi-header-subheading,
    .fi-section-header-description,
    .fi-ta-header-description,
    .fi-fo-field-wrp-hint,
    .fi-fo-field-wrp-helper-text,
    .fi-wi-stats-overview-stat-description
) {
    color: var(--rg-muted);
}

/* 03 — SIDEBAR ============================================================ */
body.fi-panel-user-panel .fi-sidebar,
body.fi-panel-user-panel .fi-sidebar-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,250,245,0.90) 100%) !important;
    backdrop-filter: blur(18px);
}

body.fi-panel-user-panel .fi-sidebar {
    border-right: 1px solid rgba(22, 22, 22, 0.08);
    box-shadow: 8px 0 28px rgba(22, 22, 22, 0.03);
}

body.fi-panel-user-panel .fi-sidebar-header {
    border-bottom: 1px solid rgba(22, 22, 22, 0.06);
}

body.fi-panel-user-panel .fi-sidebar-group-label {
    color: #8d8379;
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.fi-panel-user-panel .fi-sidebar-item-button {
    margin-block: 3px;
    border-radius: 12px;
    transition: 160ms ease;
}

body.fi-panel-user-panel .fi-sidebar-item-button:hover {
    background: rgba(255,255,255,0.92);
    box-shadow: inset 0 0 0 1px rgba(245, 124, 0, 0.10);
}

body.fi-panel-user-panel :is(
    .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
    .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button,
    .fi-sidebar-item-button[aria-current="page"]
) {
    background: linear-gradient(135deg, #fff4e8 0%, #fff8f2 100%);
    box-shadow:
        inset 3px 0 0 var(--rg-orange),
        0 10px 22px rgba(245, 124, 0, 0.08);
}

body.fi-panel-user-panel :is(
    .fi-sidebar-item.fi-active .fi-sidebar-item-label,
    .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
    .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label,
    .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon
) {
    color: var(--rg-orange-deep);
}

/* 04 — TOPBAR ============================================================= */
body.fi-panel-user-panel .fi-topbar,
body.fi-panel-user-panel .fi-topbar > nav {
    background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,250,245,0.78) 100%) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(22, 22, 22, 0.06);
}

body.fi-panel-user-panel .fi-topbar button:not(.fi-btn),
body.fi-panel-user-panel .fi-sidebar-header button:not(.fi-btn) {
    border-radius: 10px;
}

body.fi-panel-user-panel .fi-topbar button:not(.fi-btn):hover,
body.fi-panel-user-panel .fi-sidebar-header button:not(.fi-btn):hover {
    background: rgba(255,255,255,0.9);
}

/* 05 — PANELS / CARDS / SECTIONS ========================================= */
body.fi-panel-user-panel :is(
    .fi-section,
    .fi-wi-stats-overview-stat,
    .fi-ta-ctn,
    .fi-wi-chart,
    .fi-in-entry-wrp,
    .fi-tabs,
    .fi-infolist
) {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.96) 100%);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: var(--rg-radius);
    box-shadow: var(--rg-shadow-md);
    backdrop-filter: blur(16px);
    /* Form overlays must be able to extend beyond the card. */
    overflow: visible;
}

body.fi-panel-user-panel :is(
    .fi-section,
    .fi-wi-stats-overview-stat,
    .fi-ta-ctn,
    .fi-wi-chart,
    .fi-in-entry-wrp,
    .fi-tabs,
    .fi-infolist
)::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(245,124,0,0.26) 0%, rgba(255,255,255,0.9) 40%, rgba(22,22,22,0.05) 100%);
    pointer-events: none;
}

body.fi-panel-user-panel .fi-section-header {
    border-bottom-color: rgba(22, 22, 22, 0.06);
}

body.fi-panel-user-panel .fi-wi-stats-overview-stat {
    transition: transform 180ms ease, box-shadow 180ms ease;
}

body.fi-panel-user-panel .fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--rg-shadow-lg);
}

body.fi-panel-user-panel .fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
}

/* 06 — TABLES ============================================================= */
body.fi-panel-user-panel .fi-ta-ctn {
    /* Keep horizontal scrolling on .fi-ta-content, not the outer card. */
    overflow: visible;
}

body.fi-panel-user-panel :is(
    .fi-ta-header,
    .fi-ta-content,
    .fi-ta-table,
    .fi-ta-empty-state,
    .fi-ta-pagination
) {
    background: transparent !important;
}

body.fi-panel-user-panel .fi-ta-header-cell {
    background: linear-gradient(180deg, #fff9f4 0%, #fffdfb 100%);
    color: var(--rg-black);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

body.fi-panel-user-panel .fi-ta-header-cell-label {
    color: var(--rg-black);
}

body.fi-panel-user-panel .fi-ta-row {
    background: rgba(255,255,255,0.66);
    transition: background-color 130ms ease, box-shadow 130ms ease;
}

body.fi-panel-user-panel .fi-ta-row:hover {
    background: #fffaf4;
}

body.fi-panel-user-panel .fi-ta-row:has(input[type="checkbox"]:checked) {
    background: #fff3e6;
}

body.fi-panel-user-panel :is(.fi-ta-cell, .fi-ta-header-cell, .fi-ta-record) {
    border-color: rgba(22, 22, 22, 0.06);
}

body.fi-panel-user-panel .fi-ta-pagination {
    border-top-color: rgba(22, 22, 22, 0.06);
}

/* 07 — FORMS / INPUTS ===================================================== */
body.fi-panel-user-panel .fi-fo-field-wrp-label,
body.fi-panel-user-panel .fi-fo-field-wrp-label label {
    color: var(--rg-black);
    font-weight: 650;
}

body.fi-panel-user-panel :is(
    .fi-input-wrp,
    .fi-select-input,
    .fi-fo-textarea,
    .fi-fo-rich-editor,
    .fi-fo-markdown-editor,
    .fi-fo-tags-input,
    .fi-fo-file-upload
) {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(22, 22, 22, 0.10) !important;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.025);
}

body.fi-panel-user-panel .fi-input-wrp:focus-within,
body.fi-panel-user-panel .fi-fo-textarea:focus-within,
body.fi-panel-user-panel .fi-fo-rich-editor:focus-within,
body.fi-panel-user-panel .fi-select-input:focus-within {
    border-color: rgba(245, 124, 0, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(245, 124, 0, 0.11), 0 8px 20px rgba(245, 124, 0, 0.07) !important;
}

body.fi-panel-user-panel :is(.fi-input, .fi-select-input, .fi-fo-textarea textarea) {
    color: var(--rg-black) !important;
    background: transparent !important;
    caret-color: var(--rg-orange);
}

body.fi-panel-user-panel :is(.fi-input, .fi-select-input, textarea)::placeholder {
    color: #aaa39a;
}

body.fi-panel-user-panel :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--rg-orange);
}

/* 08 — BUTTONS ============================================================ */
body.fi-panel-user-panel .fi-btn {
    border-radius: 12px;
    font-weight: 700;
    transition: 160ms ease;
}

body.fi-panel-user-panel .fi-btn-color-primary:not(.fi-btn-outlined) {
    background: linear-gradient(135deg, #ff962c 0%, var(--rg-orange) 52%, #de6500 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(245, 124, 0, 0.22);
}

body.fi-panel-user-panel .fi-btn-color-primary:not(.fi-btn-outlined):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(245, 124, 0, 0.26);
}

body.fi-panel-user-panel .fi-btn-color-primary:not(.fi-btn-outlined) :is(span, svg) {
    color: #fff !important;
}

body.fi-panel-user-panel :is(.fi-btn-outlined, .fi-btn-color-gray) {
    background: rgba(255,255,255,0.76);
    border-color: rgba(22, 22, 22, 0.10) !important;
}

body.fi-panel-user-panel .fi-btn:focus-visible,
body.fi-panel-user-panel a:focus-visible,
body.fi-panel-user-panel button:focus-visible {
    outline: 2px solid rgba(245, 124, 0, 0.55);
    outline-offset: 3px;
}

/* 09 — TABS / DROPDOWN / MODAL =========================================== */
body.fi-panel-user-panel .fi-tabs {
    padding: 6px;
    /* This is the tab navigation, not the form's tab panel. */
    overflow-x: auto;
}

/* RGROUP_FIX_DROPDOWN_GLOBAL_V1
   The glass cards create stacking contexts through backdrop-filter.
   Raise every containing card only while a Choices dropdown is open,
   so a later card cannot cover its options. Keep below the panel topbar
   (z-20); modal layers retain their own Filament stacking context.
   Do not override inactive tabs, collapsed sections or inner scroll areas.
*/
body.fi-panel-user-panel :is(
    .fi-section,
    .fi-wi-stats-overview-stat,
    .fi-ta-ctn,
    .fi-wi-chart,
    .fi-in-entry-wrp,
    .fi-infolist,
    .fi-fo-tabs,
    .fi-fo-wizard
):has(.choices.is-open) {
    position: relative;
    z-index: 10;
}

body.fi-panel-user-panel .fi-tabs-item {
    border-radius: 10px;
}

body.fi-panel-user-panel :is(.fi-tabs-item[aria-selected="true"], .fi-tabs-item.fi-active) {
    background: linear-gradient(135deg, #fff3e6 0%, #fff9f3 100%);
    color: var(--rg-orange-deep);
    box-shadow: inset 0 0 0 1px rgba(245, 124, 0, 0.14);
}

body.fi-panel-user-panel :is(
    .fi-dropdown-panel,
    .fi-dropdown-list,
    .fi-modal-window,
    .fi-fo-select-options,
    .choices__list--dropdown
) {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    color: var(--rg-text);
    box-shadow: var(--rg-shadow-lg);
    backdrop-filter: blur(18px);
}

body.fi-panel-user-panel :is(.fi-dropdown-list-item:hover, .fi-fo-select-option:hover) {
    background: #fff5eb;
}

body.fi-panel-user-panel :is(.fi-modal-header, .fi-modal-footer) {
    border-color: rgba(22, 22, 22, 0.07);
}

body.fi-panel-user-panel .fi-badge {
    border-radius: 999px;
    font-weight: 700;
}

body.fi-panel-user-panel .fi-pagination-item-active {
    background: linear-gradient(135deg, #fff0df 0%, #fff8f0 100%);
    color: var(--rg-orange-deep);
}

/* 10 — LOGIN ============================================================== */
body.fi-panel-user-panel .fi-simple-layout {
    min-height: 100vh;
    align-items: center;
}

body.fi-panel-user-panel .fi-simple-main {
    background: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.94) 100%) !important;
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,0.72);
    border-top: 3px solid var(--rg-orange);
    border-radius: 22px;
    box-shadow: 0 24px 72px rgba(17, 17, 17, 0.12);
    overflow: hidden;
}

body.fi-panel-user-panel .fi-simple-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(245,124,0,0.04) 100%);
    pointer-events: none;
}

body.fi-panel-user-panel .fi-simple-header .fi-logo {
    color: var(--rg-black);
    font-size: 1.65rem;
    letter-spacing: -0.05em;
}

body.fi-panel-user-panel .fi-simple-header .fi-simple-header-heading,
body.fi-panel-user-panel .filament-auth-page-heading {
    display: none;
}

body.fi-panel-user-panel .fi-simple-main .fi-btn-color-primary:not(.fi-btn-outlined) {
    min-height: 44px;
}

/* 11 — LINKS / LOADERS / SCROLLBAR ======================================= */
body.fi-panel-user-panel .fi-loading-indicator {
    color: var(--rg-orange);
}

body.fi-panel-user-panel a:not(.fi-btn):hover {
    text-decoration-color: var(--rg-orange);
}

body.fi-panel-user-panel ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.fi-panel-user-panel ::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.45);
}

body.fi-panel-user-panel ::-webkit-scrollbar-thumb {
    background: #d8d0c8;
    border: 2px solid rgba(255,255,255,0.75);
    border-radius: 999px;
}

body.fi-panel-user-panel ::-webkit-scrollbar-thumb:hover {
    background: #c6bbb1;
}

/* 12 — RESPONSIVE / REDUCED MOTION ======================================= */
@media (max-width: 640px) {
    body.fi-panel-user-panel .fi-simple-main {
        border-radius: 16px;
    }

    body.fi-panel-user-panel .fi-header-heading {
        letter-spacing: -0.035em;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.fi-panel-user-panel .fi-btn,
    body.fi-panel-user-panel .fi-wi-stats-overview-stat,
    body.fi-panel-user-panel .fi-sidebar-item-button,
    body.fi-panel-user-panel .fi-ta-row {
        transition: none !important;
    }
}