/* ============================================================================
 * INYO Member Panel Theme
 * Production-ready styling for the member panel
 *
 * Uses Filament v4 CSS classes with INYO brand identity
 * Relies on branding-vars.css for CSS custom properties
 *
 * Brand variables (auto-switch in dark mode):
 *   --brand-primary, --brand-primary-rgb
 *   --brand-secondary, --brand-secondary-rgb
 *   --brand-background, --brand-surface
 *   --brand-text, --brand-text_secondary, --brand-text_tertiary
 *   --brand-border, --brand-border_hover
 *   --brand-success, --brand-warning, --brand-danger
 *
 * Dark mode: Filament uses html.dark class (CSS variables switch automatically)
 * ============================================================================ */

/* ============================================================================
 * 1. BASE
 * ============================================================================ */

html {
    font-family:
        var(--font-body),
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
}

.fi-layout {
    font-family:
        var(--font-body),
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif !important;
    background-color: var(--brand-background) !important;
}

.fi-main {
    background-color: var(--brand-background) !important;
}

.fi-layout h1,
.fi-layout h2,
.fi-layout h3,
.fi-layout h4,
.fi-layout h5,
.fi-layout h6,
.fi-header-heading {
    font-family:
        var(--font-heading),
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif !important;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.fi-header-heading {
    color: var(--brand-text) !important;
    font-weight: 700 !important;
}

.fi-header-subheading {
    color: var(--brand-text_secondary) !important;
}

/* ============================================================================
 * 2. LAYOUT - SIDEBAR & TOPBAR
 * ============================================================================ */

.fi-sidebar {
    background-color: var(--brand-surface) !important;
    border-right: 1px solid var(--brand-border) !important;
    box-shadow: none !important;
}

/* Sidebar Header */
.fi-sidebar-header {
    background-color: var(--brand-surface) !important;
    border-bottom: 1px solid var(--brand-border) !important;
    padding: 1rem !important;
}

/* Topbar - same gradient as sidebar header */
.fi-topbar {
    background: radial-gradient(
        circle at center,
        var(--brand-primary) 0%,
        var(--brand-primary) 35%,
        var(--brand-secondary) 100%
    ) !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding: 1rem 1.5rem !important;
    min-height: auto !important;
}

html.dark .fi-topbar {
    background: radial-gradient(
        circle at center,
        var(--brand-secondary) 0%,
        var(--brand-secondary) 35%,
        var(--brand-primary) 100%
    ) !important;
}

.fi-topbar-ctn {
    box-shadow: none !important;
}

.fi-topbar-end {
    column-gap: 1rem !important;
}

.fi-topbar-start {
    align-items: center !important;
}

/* Logo - light on gradient topbar only */
.fi-topbar .fi-logo,
.fi-topbar .fi-logo-ctn,
.fi-topbar .fi-logo img,
.fi-topbar .fi-logo-ctn img {
    filter: brightness(0) invert(1) !important;
    transition: filter 0.2s ease-out !important;
}

.fi-topbar .fi-logo:hover,
.fi-topbar .fi-logo-ctn:hover,
.fi-topbar .fi-logo img:hover,
.fi-topbar .fi-logo-ctn img:hover {
    filter: brightness(1) invert(0) !important;
}

/* Logo - primary (dark) in sidebar header */
.fi-sidebar-header .fi-logo,
.fi-sidebar-header .fi-logo-ctn,
.fi-sidebar-header .fi-logo img,
.fi-sidebar-header .fi-logo-ctn img {
    filter: none !important;
}

/* Logo - primary (dark) in light mode for other places */
.fi-logo,
.fi-logo-ctn,
.fi-logo img,
.fi-logo-ctn img {
    /* Primary color logo */
}

/* Logo - white in dark mode */
html.dark .fi-logo,
html.dark .fi-logo-ctn,
html.dark .fi-logo img,
html.dark .fi-logo-ctn img {
    filter: brightness(0) invert(1) !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header .fi-logo-ctn,
.fi-topbar .fi-logo {
    max-height: 3rem !important;
    height: 3rem !important;
    width: auto !important;
}

/* Topbar items */
.fi-topbar-item-label,
.fi-topbar-item-btn {
    color: var(--brand-text) !important;
    font-family:
        var(--font-body), ui-sans-serif, system-ui, sans-serif !important;
}

.fi-topbar-item-btn:hover {
    background-color: rgb(var(--brand-primary-rgb) / 0.15) !important;
}

/* Mobile sidebar hamburger trigger */
.fi-topbar-open-sidebar-btn,
.fi-sidebar-open-btn {
    color: var(--brand-primary) !important;
}

.fi-topbar-open-sidebar-btn:hover,
.fi-sidebar-open-btn:hover {
    color: rgb(var(--brand-primary-rgb) / 0.8) !important;
}

.fi-topbar-open-sidebar-btn .fi-icon,
.fi-sidebar-open-btn .fi-icon,
.fi-topbar-open-sidebar-btn svg,
.fi-sidebar-open-btn svg {
    color: inherit !important;
}

html.dark .fi-topbar-open-sidebar-btn,
html.dark .fi-sidebar-open-btn {
    color: var(--brand-secondary) !important;
}

html.dark .fi-topbar-open-sidebar-btn:hover,
html.dark .fi-sidebar-open-btn:hover {
    color: rgb(var(--brand-secondary-rgb) / 0.8) !important;
}

/* Site-nav globe button — layout: icon + label + chevron */
/* Both light and dark mode: secondary brand colour background */
.site-nav-globe-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 9999px !important;
    background-color: var(--brand-secondary) !important;
    border: 1px solid var(--brand-secondary) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.site-nav-globe-btn:hover {
    background-color: rgb(var(--brand-secondary-rgb) / 0.85) !important;
    border-color: rgb(var(--brand-secondary-rgb) / 0.85) !important;
}

/* Globe icon colour */
.fi-topbar .site-nav-globe-btn .site-nav-globe-icon {
    color: var(--brand-primary) !important;
    flex-shrink: 0 !important;
}

/* Visible text label next to the globe icon */
.site-nav-globe-label {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--brand-primary) !important;
    white-space: nowrap !important;
    /* Hide on very narrow topbars (mobile) */
    display: inline !important;
}

@media (max-width: 640px) {
    .site-nav-globe-label {
        display: none !important;
    }
}

/* Site-nav dropdown panel — slightly wider to fit all items */
.site-nav-dropdown-panel {
    min-width: 14rem !important;
}

/* Dropdown header with hint text */
.site-nav-dropdown-header {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--brand-border) !important;
}

.site-nav-dropdown-header-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    color: var(--brand-text) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}
/* Dropdown list items */
.site-nav-dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
}

.site-nav-dropdown-item-inner {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.site-nav-dropdown-item-icon {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
    opacity: 0.55 !important;
}

/* External link arrow — hidden by default, shown on hover */

.site-nav-dropdown-item:hover .site-nav-dropdown-item-icon {
    opacity: 0.85 !important;
}

/* Language switcher trigger — primary in light, secondary in dark */
.fi-panel-member .language-switch-trigger {
    color: var(--brand-primary) !important;
    background-color: transparent !important;
}

html.dark .fi-panel-member .language-switch-trigger {
    color: var(--brand-secondary) !important;
    background-color: transparent !important;
}

/* User menu */
.fi-topbar .fi-user-menu-trigger {
    background-color: transparent !important;
    transition: opacity 0.2s ease !important;
}

.fi-topbar .fi-user-menu-trigger:hover {
    opacity: 0.75 !important;
}

/* Sidebar group labels */
.fi-sidebar-group-label {
    color: var(--brand-text_tertiary) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    padding: 0.5rem 1.25rem !important;
    font-family:
        var(--font-body), ui-sans-serif, system-ui, sans-serif !important;
}

/* ============================================================================
 * 3. NAVIGATION ITEMS
 * ============================================================================ */

.fi-sidebar-item-btn {
    color: var(--brand-text) !important;
}

.fi-sidebar-item-btn:hover {
    background-color: rgb(var(--brand-primary-rgb) / 0.08) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(var(--brand-primary-rgb) / 0.12) !important;
    color: var(--brand-text) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background-color: rgb(var(--brand-primary-rgb) / 0.2) !important;
}

.fi-sidebar-item-icon {
    color: var(--brand-text) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--brand-primary) !important;
}

html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--brand-primary) !important;
}

/* ============================================================================
 * 4. BUTTONS
 * ============================================================================ */

.fi-btn {
    border-radius: 9999px !important;
    font-weight: 500 !important;
    font-family:
        var(--font-body), ui-sans-serif, system-ui, sans-serif !important;
    transition: all 0.3s ease !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined),
.fi-btn.fi-color-primary:not(.fi-outlined).fi-bg-color-400,
.fi-btn.fi-color-primary:not(.fi-outlined).fi-bg-color-600,
button.fi-btn.fi-color-primary:not(.fi-outlined),
button.fi-btn.fi-color-primary:not(.fi-outlined).fi-bg-color-400,
button.fi-btn.fi-color-primary:not(.fi-outlined).fi-bg-color-600 {
    background-color: var(--brand-primary) !important;
    color: var(--brand-secondary) !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined) span,
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-btn-label,
button.fi-btn.fi-color-primary:not(.fi-outlined) span {
    color: var(--brand-secondary) !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.fi-color-primary:not(.fi-outlined).fi-bg-color-400:hover,
.fi-btn.fi-color-primary:not(.fi-outlined).fi-bg-color-600:hover {
    background-color: var(--brand-secondary) !important;
    color: var(--brand-primary) !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover span,
.fi-btn.fi-color-primary:not(.fi-outlined):hover .fi-btn-label {
    color: var(--brand-primary) !important;
}

.fi-btn.fi-color-primary.fi-outlined {
    background-color: transparent !important;
    border: 2px solid var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

.fi-btn.fi-color-primary.fi-outlined:hover {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text_secondary) !important;
}

.fi-btn.fi-color-gray:not(.fi-outlined) {
    background-color: var(--brand-secondary) !important;
    color: var(--brand-primary) !important;
}

.fi-btn.fi-color-gray:not(.fi-outlined):hover {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text_secondary) !important;
}

.fi-btn.fi-link {
    color: var(--brand-primary) !important;
    font-weight: 500 !important;
}

.fi-btn.fi-link:hover {
    color: var(--brand-primary) !important;
    filter: brightness(0.8);
}

.member-register-login-link {
    text-decoration: underline !important;
    text-underline-offset: 0.14em !important;
}

/* ============================================================================
 * 5. CARDS & SECTIONS
 * ============================================================================ */

.fi-section {
    background-color: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
}

.fi-section:hover {
    border-color: var(--brand-border_hover) !important;
}

.fi-section-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--brand-border) !important;
    padding: 1.25rem 1.5rem !important;
}

.fi-section-header-heading {
    color: var(--brand-text) !important;
    font-weight: 600 !important;
}

.fi-section-content {
    padding: 1.5rem !important;
}

/* ============================================================================
 * 6. FORM INPUTS
 * ============================================================================ */

.fi-input-wrp {
    background-color: var(--brand-background) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgb(var(--brand-primary-rgb) / 0.1) !important;
}

.fi-input {
    color: var(--brand-text) !important;
}

.fi-input::placeholder {
    color: var(--brand-text_tertiary) !important;
}

.fi-fo-field-wrp-label {
    color: var(--brand-text) !important;
    font-weight: 500 !important;
}

/* Form element font consistency */
.fi-btn,
.fi-input,
.fi-tabs-item,
.fi-sidebar-item-label,
.fi-section-header-heading,
.fi-fo-field-wrp-label {
    font-family:
        var(--font-body), ui-sans-serif, system-ui, sans-serif !important;
}

/* ============================================================================
 * 7. TABLES
 * ============================================================================ */

.fi-ta {
    background-color: transparent !important;
    border-radius: 1rem !important;
}

.fi-ta-content {
    overflow: hidden !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.fi-ta-header-cell {
    background-color: var(--brand-surface) !important;
    color: var(--brand-text) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
    border-bottom: 1px solid var(--brand-border) !important;
}

.fi-ta-row {
    background-color: var(--brand-surface) !important;
    border-bottom: 1px solid var(--brand-border) !important;
    transition: background-color 0.2s ease !important;
}

.fi-ta-row:hover {
    background-color: var(--brand-surface_hover) !important;
}

.fi-ta-cell {
    color: var(--brand-text) !important;
}

.fi-ta-empty-state-icon {
    color: var(--brand-text_tertiary) !important;
}

.fi-ta-empty-state-heading {
    color: var(--brand-text) !important;
}

.fi-ta-empty-state-description {
    color: var(--brand-text_secondary) !important;
}

/* ============================================================================
 * 8. BADGES
 * ============================================================================ */

.fi-badge {
    border-radius: 9999px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
}

.fi-badge.fi-color-primary {
    background-color: rgb(var(--brand-primary-rgb) / 0.1) !important;
    color: var(--brand-primary) !important;
}

.fi-badge.fi-color-success {
    background-color: rgb(var(--brand-success-rgb) / 0.1) !important;
    color: var(--brand-success) !important;
}

.fi-badge.fi-color-warning {
    background-color: rgb(var(--brand-warning-rgb) / 0.1) !important;
    color: var(--brand-warning) !important;
}

.fi-badge.fi-color-danger {
    background-color: rgb(var(--brand-danger-rgb) / 0.1) !important;
    color: var(--brand-danger) !important;
}

/* ============================================================================
 * 9. TABS
 * ============================================================================ */

.fi-tabs-item {
    border-radius: 9999px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.fi-tabs-item.fi-active {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text_secondary) !important;
}

.fi-tabs-item:not(.fi-active):hover {
    background-color: rgb(var(--brand-primary-rgb) / 0.1) !important;
    color: var(--brand-primary) !important;
}

/* ============================================================================
 * 10. PAGINATION
 * ============================================================================ */

.fi-pagination-item-btn {
    border-radius: 9999px !important;
    transition: all 0.2s ease !important;
}

.fi-pagination-item-btn.fi-active {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text_secondary) !important;
}

.fi-pagination-item-btn:not(.fi-active):hover {
    background-color: rgb(var(--brand-primary-rgb) / 0.1) !important;
    color: var(--brand-primary) !important;
}

/* ============================================================================
 * 11. NOTIFICATIONS
 * ============================================================================ */

.fi-notification {
    background-color: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================================
 * 11a. NOTIFICATIONS (Toast)
 * ============================================================================ */

.fi-no-notification {
    background-color: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15) !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.fi-no-notification-icon {
    flex-shrink: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.fi-no-notification.fi-status-success .fi-no-notification-icon {
    color: var(--brand-success) !important;
}

.fi-no-notification.fi-status-warning .fi-no-notification-icon {
    color: var(--brand-warning) !important;
}

.fi-no-notification.fi-status-danger .fi-no-notification-icon {
    color: var(--brand-danger) !important;
}

.fi-no-notification.fi-status-info .fi-no-notification-icon,
.fi-no-notification.fi-status-primary .fi-no-notification-icon {
    color: var(--brand-primary) !important;
}

.fi-no-notification-main {
    flex: 1 !important;
    min-width: 0 !important;
}

.fi-no-notification-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.fi-no-notification-title {
    color: var(--brand-text) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    font-family:
        var(--font-body), ui-sans-serif, system-ui, sans-serif !important;
}

.fi-no-notification-close-btn {
    color: var(--brand-text_secondary) !important;
    padding: 0.25rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
}

.fi-no-notification-close-btn:hover {
    background-color: rgb(var(--brand-primary-rgb) / 0.1) !important;
    color: var(--brand-text) !important;
}

.fi-dropdown-panel {
    background-color: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.fi-dropdown-list-item {
    transition: background-color 0.2s ease !important;
}

.fi-dropdown-list-item:hover {
    background-color: rgb(var(--brand-primary-rgb) / 0.1) !important;
    color: var(--brand-primary) !important;
}

/* ============================================================================
 * 12. LOGIN PAGE
 * ============================================================================ */

.fi-simple-main {
    background-color: transparent !important;
}

.fi-simple-header .fi-logo,
.fi-simple-header .fi-logo-ctn,
.fi-simple-header .fi-logo img,
.fi-simple-header .fi-logo-ctn img {
    margin-bottom: 2.5rem !important;
    height: 5rem !important;
    width: auto !important;
    max-height: 5rem !important;
}

.fi-simple-main .fi-section {
    background-color: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

.fi-simple-header-heading {
    color: var(--brand-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

/* ============================================================================
 * 13. SCROLLBARS
 * ============================================================================ */

.fi-sidebar::-webkit-scrollbar,
.fi-main::-webkit-scrollbar {
    width: 6px;
}

.fi-sidebar::-webkit-scrollbar-track,
.fi-main::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar::-webkit-scrollbar-thumb,
.fi-main::-webkit-scrollbar-thumb {
    background-color: var(--brand-border);
    border-radius: 3px;
}

.fi-main::-webkit-scrollbar {
    width: 8px;
}

.fi-main::-webkit-scrollbar-thumb {
    border-radius: 4px;
}

/* ============================================================================
 * 13a. INYO MODAL STYLES
 * Applied via extraModalWindowAttributes(['class' => 'inyo-modal'])
 * Minimal styling to match INYO design system
 * ============================================================================ */

.fi-modal-window.inyo-modal {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
}

.fi-modal-window.inyo-modal .fi-modal-header {
    border-bottom-color: var(--brand-border);
}

.fi-modal-window.inyo-modal .fi-modal-heading {
    color: var(--brand-text);
    font-family: var(--font-heading), ui-sans-serif, system-ui, sans-serif;
}

.fi-modal-window.inyo-modal .fi-modal-description {
    color: var(--brand-text_secondary);
}

.fi-modal-window.inyo-modal .fi-modal-footer {
    border-top-color: var(--brand-border);
}

.fi-modal-window.inyo-modal .fi-modal-icon {
    color: var(--brand-primary);
}

.fi-modal-window.inyo-modal .fi-modal-icon.fi-color-danger {
    color: var(--brand-danger);
}

/* ============================================================================
 * 14. LOGIN BUTTON - Uses existing .fi-btn.fi-color-primary styles
 * ============================================================================ */

/* ============================================================================
 * 15. INYO TABLE WRAPPER - Enhanced table styling for PaymentResource
 * ============================================================================ */

.inyo-table-wrapper .fi-ta {
    background-color: transparent !important;
    border-radius: 1rem !important;
    border: 1px solid var(--brand-border) !important;
}

.inyo-table-wrapper .fi-ta-header-cell {
    background-color: var(--brand-surface) !important;
    color: var(--brand-text) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
    border-bottom: 1px solid var(--brand-border) !important;
}

.inyo-table-wrapper .fi-ta-row {
    background-color: var(--brand-surface) !important;
    border-bottom: 1px solid var(--brand-border) !important;
    transition: background-color 0.2s ease !important;
}

.inyo-table-wrapper .fi-ta-row:hover {
    background-color: var(--brand-surface_hover) !important;
}

.inyo-table-wrapper .fi-ta-cell {
    color: var(--brand-text) !important;
}

.inyo-table-wrapper .fi-ta-empty-state {
    background-color: var(--brand-surface) !important;
}

.inyo-table-wrapper .fi-ta-empty-state-icon {
    color: var(--brand-text_tertiary) !important;
}

.inyo-table-wrapper .fi-ta-empty-state-heading {
    color: var(--brand-text) !important;
}

.inyo-table-wrapper .fi-ta-empty-state-description {
    color: var(--brand-text_secondary) !important;
}

/* Ensure badges in tables follow brand colors */
.inyo-table-wrapper .fi-badge {
    border-radius: 9999px !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    font-size: 0.6875rem !important;
    padding: 0.25rem 0.625rem !important;
}

.inyo-table-wrapper .fi-badge.fi-color-success {
    background-color: rgba(var(--brand-success-rgb), 0.1) !important;
    color: var(--brand-success) !important;
}

.inyo-table-wrapper .fi-badge.fi-color-warning {
    background-color: rgba(var(--brand-warning-rgb), 0.1) !important;
    color: var(--brand-warning) !important;
}

.inyo-table-wrapper .fi-badge.fi-color-danger {
    background-color: rgba(var(--brand-danger-rgb), 0.1) !important;
    color: var(--brand-danger) !important;
}

.inyo-table-wrapper .fi-badge.fi-color-info {
    background-color: rgba(var(--brand-primary-rgb), 0.1) !important;
    color: var(--brand-primary) !important;
}

.inyo-table-wrapper .fi-badge.fi-color-gray {
    background-color: rgba(var(--brand-text_tertiary-rgb), 0.1) !important;
    color: var(--brand-text_secondary) !important;
}

/* ============================================================================
 * 16. WIDGET CARDS - Stats Overview & Table Widgets
 * ============================================================================ */

/* Dashboard Widget Grid Container - No background, widgets are separate cards */
.fi-sc.fi-sc-has-gap.fi-grid {
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Individual grid columns - transparent */
.fi-grid-col {
    background-color: transparent !important;
}

/* Stats Overview Widget Wrapper - Same styling as table widget */
.fi-wi-stats-overview {
    background-color: var(
        --brand-surface
    ) !important; /* #ededed in light, #1D1934 in dark */
    border: 1px solid var(--brand-border) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
}

/* Stats Overview Widget Card - No additional background since wrapper handles it */
.fi-wi-stats-overview-stat {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1.5rem !important; /* Add back padding for content */
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
    /* Remove Filament's default ring (creates border-like appearance) */
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-wi-stats-overview-stat:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-wi-stats-overview-stat-content {
    border: none !important;
    background-color: transparent !important;
}

.fi-wi-stats-overview-stat-label {
    color: var(--brand-text_secondary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    font-family:
        var(--font-body), ui-sans-serif, system-ui, sans-serif !important;
}

.fi-wi-stats-overview-stat-value {
    color: var(--brand-text) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-family:
        var(--font-heading), ui-sans-serif, system-ui, sans-serif !important;
}

.fi-wi-stats-overview-stat-description {
    color: var(--brand-text_secondary) !important;
    font-size: 0.875rem !important;
}

/* Table Widget - Entire widget container */
.fi-wi-table {
    background-color: var(
        --brand-surface
    ) !important; /* #ededed in light, #1D1934 in dark */
    border: 1px solid var(--brand-border) !important;
    border-radius: 1rem !important;
}

/* Table Widget Header - Match stats widget wrapper background */
.fi-ta-header {
    background-color: var(
        --brand-surface
    ) !important; /* Same as stats widget wrapper: #ededed in light, #1D1934 in dark */
    border: none !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid var(--brand-border) !important;
}

.fi-ta-header-heading {
    color: var(--brand-text) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    font-family:
        var(--font-heading), ui-sans-serif, system-ui, sans-serif !important;
}

.fi-ta-header-description {
    color: var(--brand-text_secondary) !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* Widget Container */
.fi-wi {
    background-color: transparent !important;
}

/* ============================================================================
 * 17. INYO TABLE PAGINATION - Footer styling for PaymentResource
 * ============================================================================ */

.inyo-table-wrapper .fi-pagination {
    background-color: var(--brand-surface) !important;
    border-top: 1px solid var(--brand-border) !important;
    padding: 1rem !important;
}

.inyo-table-wrapper .fi-pagination-overview {
    color: var(--brand-text_secondary) !important;
    font-size: 0.875rem !important;
}

.inyo-table-wrapper .fi-pagination-records-per-page-select-ctn {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.inyo-table-wrapper .fi-pagination-records-per-page-select {
    color: var(--brand-text) !important;
}

.inyo-table-wrapper .fi-pagination-records-per-page-select .fi-input-wrp {
    background-color: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.5rem !important;
}

.inyo-table-wrapper .fi-pagination-records-per-page-select .fi-input-wrp:hover {
    border-color: var(--brand-border_hover) !important;
}

.inyo-table-wrapper .fi-pagination-records-per-page-select .fi-select-input {
    color: var(--brand-text) !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem 2rem 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
}

.inyo-table-wrapper
    .fi-pagination-records-per-page-select
    .fi-select-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.inyo-table-wrapper .fi-pagination-records-per-page-select .fi-input-wrp-label {
    color: var(--brand-text_secondary) !important;
    font-size: 0.875rem !important;
}

/* Pagination buttons (if present) */
.inyo-table-wrapper .fi-pagination-item {
    background-color: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    color: var(--brand-text) !important;
    border-radius: 0.5rem !important;
}

.inyo-table-wrapper .fi-pagination-item:hover {
    background-color: var(--brand-surface_hover) !important;
    border-color: var(--brand-border_hover) !important;
}

.inyo-table-wrapper .fi-pagination-item.fi-active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text_secondary) !important;
}

.inyo-table-wrapper .fi-pagination-item.fi-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Compact mode styling */
.inyo-table-wrapper
    .fi-pagination-records-per-page-select.fi-compact
    .fi-input-wrp {
    padding: 0.25rem 1.5rem 0.25rem 0.5rem !important;
}

.inyo-table-wrapper
    .fi-pagination-records-per-page-select.fi-compact
    .fi-select-input {
    padding: 0.25rem !important;
    font-size: 0.75rem !important;
}

/* ============================================================================
 * 18. COLLAPSIBLE WIDGET CONTENT - Remove padding from section content
 * ============================================================================ */

/* Remove padding from collapsible section content in widgets */
.fi-wi-widget .fi-section-content {
    padding: 0 !important;
}

/* Also remove padding from the content container */
.fi-wi-widget .fi-section-content-ctn {
    padding: 0 !important;
}

/* ============================================================================
 * 19. TABLE WIDGET LINKS - Style for "View All" links in table descriptions
 * ============================================================================ */

/* Force underline on table description links */
.fi-ta-header-description a {
    text-decoration: underline !important;
    text-underline-offset: 0.17em !important;
}

/* ============================================================================
 * 20. TABLE HEADER AND SEARCH COMPONENTS - Fix table header styling
 * ============================================================================ */

/* Table header container */
.inyo-table-wrapper .fi-ta-header-ctn {
    background-color: var(--brand-surface) !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    border: 1px solid var(--brand-border) !important;
    border-bottom: none !important;
}

/* Table header toolbar */
.inyo-table-wrapper .fi-ta-header-toolbar {
    background-color: transparent !important;
    padding: 1rem !important;
    border-bottom: 1px solid var(--brand-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

.inyo-table-wrapper .fi-ta-header-toolbar > div:last-child {
    margin-left: auto !important;
}

/* Search field container */
.inyo-table-wrapper .fi-ta-search-field {
    width: 100% !important;
}

/* Search field input wrapper */
.inyo-table-wrapper .fi-ta-search-field .fi-input-wrp {
    background-color: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.inyo-table-wrapper .fi-ta-search-field .fi-input-wrp:hover {
    border-color: var(--brand-border_hover) !important;
}

.inyo-table-wrapper .fi-ta-search-field .fi-input-wrp:focus-within {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), 0.1) !important;
}

/* Search field input */
.inyo-table-wrapper .fi-ta-search-field .fi-input {
    background-color: transparent !important;
    color: var(--brand-text) !important;
    border: none !important;
}

.inyo-table-wrapper .fi-ta-search-field .fi-input::placeholder {
    color: var(--brand-text_secondary) !important;
}

/* Search field prefix icon */
.inyo-table-wrapper .fi-ta-search-field .fi-input-wrp-prefix {
    color: var(--brand-text_secondary) !important;
}

/* Actions container */
.inyo-table-wrapper .fi-ta-actions {
    gap: 0.5rem !important;
}

@media (max-width: 640px) {
    .inyo-table-wrapper .fi-ta-header-toolbar {
        align-items: stretch !important;
    }

    .inyo-table-wrapper .fi-ta-header-toolbar > div:last-child {
        margin-left: 0 !important;
        align-self: flex-end !important;
    }
}

/* Action buttons */
.inyo-table-wrapper .fi-ta-actions .fi-btn {
    background-color: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

.inyo-table-wrapper .fi-ta-actions .fi-btn:hover {
    background-color: var(--brand-surface_hover) !important;
    border-color: var(--brand-border_hover) !important;
}

/* Fix for table content when search is active */
.inyo-table-wrapper .fi-ta-content {
    border-top: none !important;
}

/* ============================================================================
 * 21. TABLE FILTER INDICATORS - Style for active filter badges and controls
 * ============================================================================ */

/* Filter indicators container */
.inyo-table-wrapper .fi-ta-filter-indicators {
    background-color: var(--brand-surface) !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Override Filament's default color classes for filter badges - Light mode */
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge.fi-color-primary,
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge.fi-color,
.inyo-table-wrapper .fi-ta-filter-indicators .fi-color.fi-badge {
    background-color: var(--brand-primary) !important;
    color: var(--brand-secondary) !important;
    border-color: var(--brand-primary) !important;
}

/* Override Filament's default color classes for filter badges - Dark mode */
html.dark
    .inyo-table-wrapper
    .fi-ta-filter-indicators
    .fi-badge.fi-color-primary,
html.dark .inyo-table-wrapper .fi-ta-filter-indicators .fi-badge.fi-color,
html.dark .inyo-table-wrapper .fi-ta-filter-indicators .fi-color.fi-badge {
    background-color: var(--brand-primary) !important;
    color: var(--brand-secondary) !important;
    border-color: var(--brand-primary) !important;
}

/* Override dark mode text color classes specifically */
html.dark
    .inyo-table-wrapper
    .fi-ta-filter-indicators
    .fi-badge.fi-text-color-200,
html.dark
    .inyo-table-wrapper
    .fi-ta-filter-indicators
    .fi-badge.dark\:fi-text-color-200,
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge.fi-text-color-700,
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge.dark\:fi-text-color-200 {
    color: var(--brand-secondary) !important;
}

/* Force text color for badge content - Light mode */
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge .fi-badge-label,
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge .fi-badge-label-ctn {
    color: var(--brand-secondary) !important;
}

/* Force text color for badge content - Dark mode */
html.dark
    .inyo-table-wrapper
    .fi-ta-filter-indicators
    .fi-badge
    .fi-badge-label,
html.dark
    .inyo-table-wrapper
    .fi-ta-filter-indicators
    .fi-badge
    .fi-badge-label-ctn {
    color: var(--brand-secondary) !important;
}

/* Badge delete button hover - Light mode */
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge-delete-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Badge delete button hover - Dark mode */
html.dark
    .inyo-table-wrapper
    .fi-ta-filter-indicators
    .fi-badge-delete-btn:hover {
    background-color: rgba(var(--brand-secondary-rgb), 0.2) !important;
}

/* Ensure X icon is visible - Light mode */
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge-delete-btn svg,
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge-delete-btn .fi-icon {
    color: var(--brand-secondary) !important;
    fill: white !important;
    opacity: 1 !important;
}

/* Ensure X icon is visible - Dark mode */
html.dark .inyo-table-wrapper .fi-ta-filter-indicators .fi-badge-delete-btn svg,
html.dark
    .inyo-table-wrapper
    .fi-ta-filter-indicators
    .fi-badge-delete-btn
    .fi-icon {
    color: var(--brand-secondary) !important;
    fill: var(--brand-secondary) !important;
}

/* Additional override for any remaining Filament color classes - Dark mode */
html.dark .inyo-table-wrapper .fi-ta-filter-indicators .fi-badge *,
.inyo-table-wrapper .fi-ta-filter-indicators .fi-badge[class*="fi-text-color"],
.inyo-table-wrapper
    .fi-ta-filter-indicators
    .fi-badge[class*="dark:fi-text-color"] {
    color: var(--brand-secondary) !important;
}

/* Remove all filters button */
.inyo-table-wrapper .fi-ta-filter-indicators .fi-icon-btn {
    background-color: var(--brand-surface) !important;
    color: var(--brand-text_secondary) !important;
    border: 1px solid var(--brand-border) !important;
}

.inyo-table-wrapper .fi-ta-filter-indicators .fi-icon-btn:hover {
    background-color: var(--brand-primary) !important;
    color: white !important;
    border-color: var(--brand-primary) !important;
}

/* Remove all filters button hover - Dark mode */
html.dark .inyo-table-wrapper .fi-ta-filter-indicators .fi-icon-btn:hover {
    background-color: var(--brand-primary) !important;
    color: var(--brand-secondary) !important;
    border-color: var(--brand-primary) !important;
}