/*
 * BCI Member Panel — Brand Theme
 * Colors: Navy (#003366), Gold (#ECAC00), Dark (#2A2A2A)
 * Matches admin-theme.css compact layout
 * v2.0.0
 */
@import url('/fonts/bci/bci-fonts.css');

/* ============================================
   SIDEBAR — Dark Navy Background
   ============================================ */

:root {
    --sidebar-width: 15rem !important;
    --collapsed-sidebar-width: 0rem !important;
}

.fi-sidebar {
    background-color: #003366 !important;
    border-right: 1px solid #002244 !important;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
}

.fi-sidebar-header {
    background-color: #002244 !important;
    border-bottom: 2px solid #ECAC00 !important;
    padding: 0.4rem 0.5rem !important;
}

.fi-sidebar-header a {
    color: #ffffff !important;
}

.fi-sidebar-header a img,
.fi-sidebar-header .fi-logo img {
    height: 28px !important;
    width: auto !important;
}

.fi-sidebar-nav {
    background-color: #003366 !important;
}

/* Group labels — Gold uppercase */
.fi-sidebar-group-label {
    color: #ECAC00 !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 0.25rem 0.5rem 0.1rem !important;
    margin-top: 0.2rem !important;
}

.fi-sidebar-group-button {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.15rem 0.5rem !important;
    font-size: 0.7rem !important;
    min-height: unset !important;
}

/* Sidebar nav items — Filament 4 uses .fi-sidebar-item-btn + .fi-active */
.fi-sidebar-item a,
.fi-sidebar-item .fi-sidebar-item-btn {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: all 0.15s ease !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.7rem !important;
    gap: 0.35rem !important;
    min-height: unset !important;
    background-color: transparent !important;
    border-left: 3px solid transparent !important;
}

.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
}

.fi-sidebar-item a:hover,
.fi-sidebar-item .fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.fi-sidebar-item a:hover .fi-sidebar-item-label,
.fi-sidebar-item .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #ffffff !important;
}

.fi-sidebar-item a:hover .fi-sidebar-item-icon,
.fi-sidebar-item a:hover .fi-icon,
.fi-sidebar-item .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item .fi-sidebar-item-btn:hover .fi-icon {
    color: #ECAC00 !important;
}

/* Active — Filament 4 .fi-active applies bg-gray-100; keep gold on navy */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn,
.fi-sidebar-item-active a,
.fi-sidebar-item-active > a {
    background-color: rgba(236, 172, 0, 0.15) !important;
    color: #ECAC00 !important;
    border-left: 3px solid #ECAC00 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #ECAC00 !important;
    font-weight: 600 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #ECAC00 !important;
}

.fi-sidebar-item-icon,
.fi-sidebar-item .fi-icon {
    color: rgba(255, 255, 255, 0.5) !important;
    width: 14px !important;
    height: 14px !important;
}

.fi-sidebar-group-collapse-button,
.fi-sidebar-group-collapse-btn {
    color: rgba(255, 255, 255, 0.5) !important;
    width: 14px !important;
    height: 14px !important;
}

.fi-sidebar-group-collapse-button:hover,
.fi-sidebar-group-collapse-btn:hover {
    color: #ECAC00 !important;
}

.fi-sidebar-close-button,
.fi-sidebar-close-button svg {
    color: rgba(255, 255, 255, 0.7) !important;
}

.fi-sidebar-close-button {
    width: 20px !important;
    height: 20px !important;
}

.fi-sidebar-footer {
    background-color: #002244 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.3rem 0.5rem !important;
}

/* Sidebar nav spacing */
.fi-sidebar-nav ul {
    gap: 0 !important;
}
.fi-sidebar-nav > ul > li {
    margin-bottom: 0 !important;
}

/* Sidebar item inner padding overrides */
.fi-sidebar-item > a > div,
.fi-sidebar-item a > span {
    padding: 0 !important;
}
.fi-sidebar-item .py-2 {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}
.fi-sidebar-item .px-3 {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}
.fi-sidebar-item .gap-x-3 {
    column-gap: 0.3rem !important;
}

/* Sidebar scrollbar */
.fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Content area — let Filament use --sidebar-width */
.fi-main-ctn {
    margin-inline-start: unset !important;
    max-width: 100% !important;
}
.fi-sidebar-open .fi-main-ctn {
    margin-inline-start: unset !important;
}

/* ============================================
   TOPBAR — Navy gradient
   ============================================ */

.fi-topbar {
    background: linear-gradient(135deg, #003366, #002244) !important;
    height: auto !important;
}

.fi-topbar nav {
    background: transparent !important;
    border-bottom: 2px solid #ECAC00 !important;
    min-height: 1.8rem !important;
    padding: 0 0.4rem !important;
    gap: 0.3rem !important;
}

.fi-topbar .fi-breadcrumbs a,
.fi-topbar .fi-breadcrumbs li,
.fi-topbar .fi-breadcrumbs svg {
    color: rgba(255, 255, 255, 0.8) !important;
    fill: rgba(255, 255, 255, 0.8) !important;
}
.fi-topbar .fi-icon-btn svg {
    color: #ffffff !important;
}
.fi-topbar .fi-user-menu button span,
.fi-topbar .fi-user-menu-trigger-text {
    color: #ffffff !important;
}
.fi-topbar .fi-breadcrumbs ol li a:hover {
    color: #ECAC00 !important;
}

.fi-user-menu img {
    width: 26px !important;
    height: 26px !important;
}

/* Topbar overflow fix */
.fi-topbar nav > div {
    overflow-x: auto !important;
}

/* ============================================
   GLOBAL — Gold Primary Accents
   ============================================ */

.fi-ta-header-cell {
    background-color: rgba(0, 51, 102, 0.04) !important;
}

.fi-ta-header-cell-label {
    color: #003366 !important;
    font-weight: 600 !important;
}

.fi-link:hover {
    color: #ECAC00 !important;
}

.fi-wi-stats-overview-stat-value {
    color: #003366 !important;
}

.fi-header-heading {
    color: #003366 !important;
}

/* ============================================
   BUTTONS — Gold primary
   ============================================ */

.fi-btn-primary,
button.fi-btn[style*="primary"],
.fi-btn.fi-color-primary {
    background-color: #ECAC00 !important;
    border-color: #ECAC00 !important;
    color: #003366 !important;
    font-weight: 600 !important;
}

.fi-btn-primary:hover,
.fi-btn.fi-color-primary:hover {
    background-color: #D49B00 !important;
    border-color: #D49B00 !important;
}

.fi-btn {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
    gap: 0.25rem !important;
}
.fi-btn-icon {
    width: 14px !important;
    height: 14px !important;
}
.fi-icon-btn {
    width: 28px !important;
    height: 28px !important;
}

/* ============================================
   FORM INPUTS — Gold Focus Rings
   ============================================ */

.fi-input-wrp:focus-within {
    --tw-ring-color: #ECAC00 !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 0 0 transparent), var(--tw-ring-shadow), var(--tw-shadow, 0 0 0 0 transparent) !important;
}

.fi-fo-toggle input:checked + div {
    background-color: #ECAC00 !important;
}

.fi-fo-checkbox-list input[type="checkbox"],
input.fi-checkbox-input,
input[type="checkbox"].fi-checkbox-input {
    border: 2px solid #999 !important;
    background-color: #fff !important;
}
.fi-fo-checkbox-list input[type="checkbox"]:checked,
input.fi-checkbox-input:checked,
input[type="checkbox"].fi-checkbox-input:checked {
    background-color: #ECAC00 !important;
    border-color: #ECAC00 !important;
}

.fi-fo-rich-editor .ProseMirror:focus {
    --tw-ring-color: #ECAC00 !important;
}

/* ============================================
   COMPACT LAYOUT — Match admin density
   ============================================ */

/* Base font size */
body .fi-body,
.fi-main {
    font-size: 0.7rem !important;
}

/* Main content area */
.fi-main {
    padding: 0.2rem 0.4rem !important;
}
.fi-page {
    padding: 0 !important;
    gap: 0.25rem !important;
}

/* Page header */
.fi-header {
    padding: 0.15rem 0 !important;
    margin-bottom: 0.15rem !important;
    gap: 0.15rem !important;
}
.fi-header-heading {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
}
.fi-header-subheading {
    font-size: 0.7rem !important;
}

/* Breadcrumbs */
.fi-breadcrumbs,
.fi-breadcrumbs * {
    font-size: 0.6rem !important;
}
.fi-breadcrumbs ol li svg,
.fi-breadcrumbs ol li .fi-breadcrumbs-item-separator {
    color: #ECAC00 !important;
}
.fi-breadcrumbs ol li span:not(a) {
    color: #003366 !important;
}

/* ============================================
   TABLES — Compact
   ============================================ */

.fi-ta-header-cell {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.7rem !important;
}
.fi-ta-header-cell-label {
    font-size: 0.7rem !important;
}
.fi-ta-cell {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
}
.fi-ta-row {
    min-height: unset !important;
}
.fi-ta-text-item {
    font-size: 0.7rem !important;
}

/* Table cell text — match */
.fi-ta-cell,
.fi-ta-cell *,
.fi-ta-text-item,
.fi-ta-header-cell-label,
.fi-ta-header-cell button {
    font-size: 0.7rem !important;
}

/* Table search/filter bar */
.fi-ta-header-toolbar {
    padding: 0.15rem 0.3rem !important;
    gap: 0.2rem !important;
}
.fi-ta-search-field input {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.3rem !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Table row hover */
.fi-ta-row:hover {
    background-color: rgba(0, 51, 102, 0.03) !important;
}
.fi-ta-row:nth-child(even) {
    background-color: rgba(0, 51, 102, 0.015);
}
.fi-ta-row:nth-child(even):hover {
    background-color: rgba(0, 51, 102, 0.05) !important;
}

/* Table container */
.fi-ta-ctn {
    border-radius: 0.3rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Table cell inner div overrides */
.fi-ta-cell > div {
    padding: 0.2rem 0.4rem !important;
}
.fi-ta-header-cell > div,
.fi-ta-header-cell > button {
    padding: 0.2rem 0.4rem !important;
}
.fi-ta-selection-cell > div {
    padding: 0.15rem 0.3rem !important;
}

/* Table Tailwind overrides */
.fi-ta .py-4 {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}
.fi-ta .py-3 {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}
.fi-ta .px-3 {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}
.fi-ta .px-4 {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}
.fi-ta .gap-4 {
    gap: 0.3rem !important;
}
.fi-ta .gap-3 {
    gap: 0.2rem !important;
}

/* Table action buttons */
.fi-ta-actions {
    gap: 0.15rem !important;
}
.fi-ta-actions .fi-icon-btn {
    width: 24px !important;
    height: 24px !important;
}
.fi-ta-actions .fi-icon-btn svg {
    width: 14px !important;
    height: 14px !important;
}
.fi-ta-actions .fi-link {
    color: #003366 !important;
}
.fi-ta-actions .fi-link:hover {
    color: #ECAC00 !important;
}

/* Filter/toggle column buttons */
.fi-ta-header-toolbar .fi-icon-btn {
    width: 26px !important;
    height: 26px !important;
}

/* Select/checkbox column — scope ONLY to Filament's bulk-select cell.
   (Was `td:first-child` which crushed the first DATA column to 32px on
   any table without a checkbox, causing columns to overlap/collapse.) */
.fi-ta-selection-cell {
    width: 32px !important;
    max-width: 32px !important;
}

/* ============================================
   PAGINATION — Compact + Gold Active
   ============================================ */

.fi-ta-pagination {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.7rem !important;
}
.fi-ta-pagination,
.fi-ta-pagination * {
    font-size: 0.65rem !important;
}
.fi-ta-pagination > div {
    padding: 0.2rem 0.4rem !important;
}
.fi-ta-pagination .gap-x-3 {
    column-gap: 0.15rem !important;
}
.fi-pagination-items button {
    font-size: 0.65rem !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0.15rem 0.35rem !important;
}
.fi-pagination-items button[aria-current="page"],
.fi-pagination-items .fi-pagination-item-active {
    background-color: #ECAC00 !important;
    color: #2A2A2A !important;
    font-weight: 600 !important;
    border-color: #ECAC00 !important;
}
.fi-pagination-items button:hover {
    background-color: rgba(236, 172, 0, 0.1) !important;
    color: #003366 !important;
}
.fi-pagination-previous-btn:hover,
.fi-pagination-next-btn:hover {
    color: #ECAC00 !important;
}
.fi-ta-pagination select {
    padding: 0.1rem 0.2rem !important;
    font-size: 0.6rem !important;
    height: auto !important;
    min-height: 0 !important;
}
.fi-ta-pagination .px-3,
.fi-ta-pagination .py-3 {
    padding: 0.2rem 0.4rem !important;
}

/* ============================================
   FORMS — Compact
   ============================================ */

.fi-fo-field-wrp {
    gap: 0.2rem !important;
}
.fi-fo-field-wrp label,
.fi-input,
select.fi-select-input {
    font-size: 0.7rem !important;
}
.fi-input {
    padding: 0.35rem 0.5rem !important;
    min-height: unset !important;
}
.fi-fo-field-wrp .fi-fo-helper-text {
    font-size: 0.6rem !important;
}

/* Form sections */
.fi-fo-component-ctn {
    gap: 0.5rem !important;
}
.fi-section {
    border-radius: 0.3rem !important;
    gap: 0 !important;
}
.fi-section .rounded-xl {
    border-radius: 0.3rem !important;
}
.fi-section > div {
    gap: 0.3rem !important;
}
.fi-section-header {
    padding: 0.2rem 0.4rem !important;
}
.fi-section-header-heading {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
}
.fi-section-content {
    padding: 0.5rem 0.6rem !important;
}
.fi-section-content-ctn {
    padding: 0 !important;
}
.fi-section .p-6 {
    padding: 0.5rem !important;
}

/* ============================================
   STATS WIDGETS — Compact + Gold Accent
   ============================================ */

.fi-widgets {
    gap: 0.5rem !important;
}
.fi-wi-stats-overview {
    padding: 0 !important;
    gap: 0.25rem !important;
}
.fi-wi-stats-overview .gap-4,
.fi-wi-stats-overview .gap-6 {
    gap: 0.25rem !important;
}
.fi-wi-stats-overview-stats-ctn {
    gap: 0.25rem !important;
}
.fi-wi-stats-overview .gap-y-4,
.fi-wi-stats-overview .gap-y-6 {
    row-gap: 0.25rem !important;
}
.fi-wi-stats-overview-stat {
    padding: 0.3rem 0.4rem !important;
    border-radius: 0.3rem !important;
    border-left: 2px solid #ECAC00 !important;
}
.fi-wi-stats-overview-stat > div {
    padding: 0 !important;
    gap: 0.15rem !important;
}
.fi-wi-stats-overview-stat .gap-y-2 {
    gap: 0.1rem !important;
}
.fi-wi-stats-overview-stat .gap-x-2 {
    column-gap: 0.2rem !important;
}
.fi-wi-stats-overview-stat .p-6 {
    padding: 0.5rem !important;
}
.fi-wi-stats-overview-stat .px-6 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.fi-wi-stats-overview-stat .py-6 {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}
.fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat .text-3xl {
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
}
.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat .text-sm {
    color: #003366 !important;
    font-weight: 600 !important;
    font-size: 0.6rem !important;
    line-height: 1.2 !important;
}
.fi-wi-stats-overview-stat-description,
.fi-wi-stats-overview-stat .text-xs {
    color: #666 !important;
    font-size: 0.55rem !important;
}
.fi-wi-stats-overview-stat-description-icon,
.fi-wi-stats-overview-stat .gap-x-1 img,
.fi-wi-stats-overview-stat .gap-x-1 svg {
    width: 12px !important;
    height: 12px !important;
}
.fi-wi-stats-overview-stat-icon {
    color: #ECAC00 !important;
}

/* ============================================
   USER MENU — Styled Dropdown
   ============================================ */

.fi-user-menu > button:hover,
.fi-user-menu-trigger:hover {
    background-color: rgba(236, 172, 0, 0.08) !important;
    border-radius: 0.5rem;
}
.fi-dropdown-panel {
    border-top: 2px solid #ECAC00 !important;
}
.fi-dropdown-list-item-label {
    color: #2A2A2A !important;
}
.fi-dropdown-list-item:hover {
    background-color: rgba(0, 51, 102, 0.04) !important;
}
.fi-dropdown-list-item:hover .fi-dropdown-list-item-label {
    color: #003366 !important;
}
.fi-dropdown-list-item {
    padding: 0.3rem 0.5rem !important;
}
.fi-dropdown-list-item-label {
    font-size: 0.7rem !important;
}

/* ============================================
   TABS — Gold Active
   ============================================ */

.fi-tabs-item[data-active] button,
.fi-tabs-item-active button {
    border-color: #ECAC00 !important;
    color: #ECAC00 !important;
}
.fi-tabs-item button:hover {
    color: #003366 !important;
    border-color: rgba(0, 51, 102, 0.3) !important;
}
.fi-tabs-item button {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.7rem !important;
}
.fi-tabs-item[data-active] .fi-tabs-item-icon,
.fi-tabs-item-active .fi-tabs-item-icon {
    color: #ECAC00 !important;
}
.fi-tabs-item[data-active] .fi-badge {
    background-color: rgba(236, 172, 0, 0.1) !important;
    color: #ECAC00 !important;
}

/* ============================================
   BADGES — Compact
   ============================================ */

.fi-badge {
    font-size: 0.55rem !important;
    padding: 0.05rem 0.3rem !important;
    line-height: 1.3 !important;
}

/* ============================================
   MODALS — Gold Accent
   ============================================ */

.fi-modal-window {
    border-top: 3px solid #ECAC00 !important;
}
.fi-modal-heading {
    color: #003366 !important;
    font-size: 0.9rem !important;
}
.fi-modal-description {
    color: #666 !important;
    font-size: 0.7rem !important;
}
.fi-modal-close-btn:hover {
    color: #ECAC00 !important;
}

/* ============================================
   NOTIFICATIONS — Gold Accents
   ============================================ */

.fi-no-close-btn:hover {
    color: #ECAC00 !important;
}
.fi-no-icon-color-success {
    color: var(--success-500) !important;
}
.fi-no .fi-link {
    color: #ECAC00 !important;
}
.fi-no .fi-link:hover {
    color: #D49B00 !important;
}
.fi-no {
    font-size: 0.7rem !important;
}

/* ============================================
   EMPTY STATE — BCI Branded
   ============================================ */

.fi-ta-empty-state-icon {
    color: #003366 !important;
}
.fi-ta-empty-state-heading {
    color: #003366 !important;
}
.fi-ta-empty-state-description {
    color: #666 !important;
}

/* ============================================
   LOADING — Gold Spinner
   ============================================ */

.fi-loading-indicator {
    color: #ECAC00 !important;
}
[wire\:loading] .fi-loading-indicator,
.fi-loading-indicator svg {
    color: #ECAC00 !important;
}
.fi-ta-loading-overlay {
    color: #ECAC00 !important;
}
[x-ref="bar"] {
    background-color: #ECAC00 !important;
}

/* ============================================
   WELCOME WIDGET — BCI Branded
   ============================================ */

.bci-welcome-widget {
    background: linear-gradient(135deg, #003366 0%, #014990 100%);
    border-radius: 0.3rem;
    padding: 0.4rem 0.6rem !important;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.4rem !important;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.15);
}
.bci-welcome-logo img {
    height: 24px !important;
    width: auto;
}
.bci-welcome-title {
    font-size: 0.75rem !important;
    font-weight: 700;
}
.bci-welcome-subtitle {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.7);
}
.bci-welcome-divider {
    height: 2px;
    background-color: #ECAC00;
    border: none;
    margin: 0.2rem 0 !important;
    width: 60px;
}
.bci-welcome-actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.4rem !important;
    background-color: rgba(236, 172, 0, 0.15);
    border: 1px solid rgba(236, 172, 0, 0.3);
    border-radius: 0.25rem !important;
    color: #ECAC00;
    font-size: 0.6rem !important;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.bci-welcome-actions a:hover {
    background-color: rgba(236, 172, 0, 0.25);
    border-color: #ECAC00;
}
.bci-welcome-widget > div {
    gap: 0.3rem !important;
}
.bci-welcome-widget .gap-6 {
    gap: 0.5rem !important;
}

@media (max-width: 640px) {
    .bci-welcome-widget {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .bci-welcome-divider {
        margin: 0.5rem auto;
    }
}

/* ============================================
   FOOTER
   ============================================ */

.bci-admin-footer {
    text-align: center;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.6rem !important;
    color: #9ca3af;
    border-top: 1px solid #e5e7eb;
}

/* ============================================
   GLOBAL COMPACT OVERRIDES
   All Filament rounded-xl, shadows, gaps, padding
   ============================================ */

.fi-body .rounded-xl {
    border-radius: 0.3rem !important;
}
.fi-body .shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Content area gaps */
.fi-main .gap-6 { gap: 0.25rem !important; }
.fi-main .gap-5 { gap: 0.25rem !important; }
.fi-main .gap-4 { gap: 0.2rem !important; }
.fi-main .gap-3 { gap: 0.15rem !important; }
.fi-main .gap-y-6 { row-gap: 0.25rem !important; }
.fi-main .gap-y-4 { row-gap: 0.2rem !important; }
.fi-main .gap-x-6 { column-gap: 0.25rem !important; }
.fi-main .gap-x-4 { column-gap: 0.2rem !important; }

/* Content area padding */
.fi-main .p-6 { padding: 0.3rem !important; }
.fi-main .p-4 { padding: 0.2rem !important; }
.fi-main .px-6 { padding-left: 0.3rem !important; padding-right: 0.3rem !important; }
.fi-main .px-4 { padding-left: 0.2rem !important; padding-right: 0.2rem !important; }
.fi-main .py-6 { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
.fi-main .py-4 { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; }
.fi-main .py-3 { padding-top: 0.1rem !important; padding-bottom: 0.1rem !important; }
.fi-main .py-2 { padding-top: 0.05rem !important; padding-bottom: 0.05rem !important; }
.fi-main .px-3 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }

/* Page gaps */
.fi-page .gap-6 {
    gap: 0.4rem !important;
}
.fi-page .gap-y-6 {
    row-gap: 0.4rem !important;
}
.fi-page .p-6 {
    padding: 0.5rem !important;
}
.fi-page > * + * {
    margin-top: 0.4rem !important;
}

/* Header area padding */
.fi-header .py-6,
.fi-header .py-4 {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1023px) {
    .fi-main-ctn {
        margin-inline-start: 0 !important;
    }
    .fi-sidebar {
        background-color: #003366 !important;
        width: var(--sidebar-width) !important;
    }
    .fi-topbar nav,
    .fi-topbar {
        z-index: 40 !important;
        position: relative !important;
    }
}