/* ============================================
   SHARED FILAMENT THEME - BASE STYLES
   All niches use these selectors with their own color variables
   ============================================ */

/* Required CSS Variables (defined per-niche):
   --niche-bg, --niche-bg-accent
   --niche-primary, --niche-primary-dark, --niche-primary-light
   --niche-accent, --niche-accent-light
   --niche-cream, --niche-text, --niche-border
   --niche-sidebar-bg, --niche-sidebar-dark
   --niche-font-heading (optional - defaults to sans)
   --niche-font-body (defaults to system sans)
*/

html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
    max-width: 100vw;
}

:root {
    --niche-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --niche-font-body: var(--niche-font-sans);
    --niche-font-heading: var(--niche-font-body);
}

/* ============================================
   GLOBAL SANS-SERIF ENFORCEMENT FOR FORM ELEMENTS
   These MUST be sans-serif for readability
   ============================================ */

/* Form inputs - MANDATORY sans-serif */
.fi-input,
.fi-textarea,
.fi-select,
.fi-select-input,
.fi-input-wrp input,
input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    font-family: var(--niche-font-sans) !important;
}

/* Buttons - MANDATORY sans-serif */
button,
.fi-btn,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"] {
    font-family: var(--niche-font-sans) !important;
}

/* Table cells and headers - MANDATORY sans-serif */
table,
thead,
tbody,
tfoot,
tr,
th,
td,
.fi-ta-table,
.fi-ta-table *,
.fi-ta-ctn *,
.fi-ta-cell,
.fi-ta-header-cell {
    font-family: var(--niche-font-sans) !important;
}

/* Form component containers */
.fi-fo-component-ctn input,
.fi-fo-component-ctn select,
.fi-fo-component-ctn textarea,
.fi-fo-component-ctn button,
.fi-fo-component-ctn .fi-input,
.fi-fo-component-ctn .fi-select,
.fi-fo-component-ctn .fi-textarea {
    font-family: var(--niche-font-sans) !important;
}

/* Badges and pills */
.fi-badge {
    font-family: var(--niche-font-sans) !important;
}

/* ============================================
   BODY & BACKGROUND
   ============================================ */

.fi-body {
    background: linear-gradient(135deg, var(--niche-bg) 0%, var(--niche-bg-accent) 100%) !important;
    background-attachment: fixed !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

.fi-sidebar {
    background: linear-gradient(180deg, var(--niche-sidebar-bg) 0%, var(--niche-sidebar-dark) 100%) !important;
    border-right: 3px solid var(--niche-accent) !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15) !important;
}

.fi-sidebar-nav-groups {
    padding: 1rem !important;
}

.fi-sidebar-item {
    border-radius: 6px !important;
    margin-bottom: 4px !important;
}

.fi-sidebar-item-button {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.2s ease !important;
}

.fi-sidebar-item-icon {
    color: var(--niche-accent-light) !important;
    opacity: 0.9 !important;
}

.fi-sidebar-item-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--niche-accent-light) !important;
    opacity: 1 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button:hover {
    background: linear-gradient(135deg, var(--niche-accent) 0%, var(--niche-accent-light) 100%) !important;
    color: var(--niche-sidebar-dark) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--niche-sidebar-dark) !important;
    opacity: 1 !important;
}

.fi-sidebar-header {
    border-bottom: 2px solid var(--niche-accent) !important;
    padding: 1.25rem !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.fi-sidebar-header a {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* Ensure all sidebar text is light */
.fi-sidebar span,
.fi-sidebar div,
.fi-sidebar a,
.fi-sidebar button,
.fi-sidebar p,
.fi-sidebar-nav span,
.fi-sidebar-nav div,
.fi-sidebar-nav a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.fi-sidebar [class*="text-gray"],
.fi-sidebar [class*="text-black"] {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.fi-main {
    background: transparent !important;
    overflow-x: clip;
}

.fi-main-ctn {
    background: linear-gradient(180deg, var(--niche-cream) 0%, var(--niche-bg) 100%) !important;
    min-height: 100vh;
}

/* ============================================
   SECTIONS & CONTAINERS
   ============================================ */

.fi-ta-ctn {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.fi-section {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.fi-section-header {
    border-bottom: 2px solid var(--niche-primary) !important;
    background: linear-gradient(135deg, rgba(var(--niche-primary-rgb, 0, 0, 0), 0.08) 0%, transparent 100%) !important;
    padding: 0.875rem 1.25rem !important;
}

.fi-section-header-heading {
    color: var(--niche-primary-dark) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    font-family: var(--niche-font-heading) !important;
}

.fi-section-content {
    padding: 1.25rem !important;
    background: transparent !important;
    border: none !important;
}

/* Remove nested borders */
.fi-fieldset,
.fi-fo-fieldset,
fieldset {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fi-fo-component-ctn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.fi-fo-grid,
.fi-section-content > div {
    border: none !important;
    background: transparent !important;
}

/* ============================================
   FORM LABELS
   ============================================ */

.fi-fo-field-wrp label,
.fi-input-wrp label,
.fi-fo-field-wrp-label,
label.fi-fo-field-wrp-label {
    font-family: var(--niche-font-heading) !important;
    color: var(--niche-primary-dark) !important;
    font-weight: 500 !important;
}

/* ============================================
   FORM INPUTS
   ============================================ */

.fi-input,
.fi-select-input,
.fi-input-wrp input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 8px !important;
    color: var(--niche-text) !important;
    font-family: var(--niche-font-body) !important;
}

.fi-textarea,
textarea {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 8px !important;
    color: var(--niche-text) !important;
    font-family: var(--niche-font-body) !important;
}

select,
.fi-select {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 8px !important;
    color: var(--niche-text) !important;
    font-family: var(--niche-font-body) !important;
}

.fi-input-wrp {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.fi-input-wrp .fi-input-wrp-input {
    border: none !important;
    background: transparent !important;
}

/* Input focus states */
.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus,
textarea:focus,
input:focus {
    border-color: var(--niche-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--niche-primary-rgb, 0, 0, 0), 0.15) !important;
    outline: none !important;
}

/* Disabled inputs */
.fi-input:disabled,
.fi-textarea:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--niche-bg-accent) !important;
    opacity: 0.8 !important;
}

/* ============================================
   SEARCH & FILTER
   ============================================ */

.fi-ta-search-field {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.fi-ta-search-field input {
    background: transparent !important;
    border: none !important;
}

.fi-ta-search-field:focus-within {
    border-color: var(--niche-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--niche-primary-rgb, 0, 0, 0), 0.15) !important;
}

.fi-ta-filters-btn,
[class*="fi-ta-"] button[type="button"] {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 8px !important;
    color: var(--niche-text) !important;
    transition: all 0.2s ease !important;
}

.fi-ta-filters-btn:hover {
    background: var(--niche-primary) !important;
    border-color: var(--niche-primary) !important;
    color: white !important;
}

/* ============================================
   TABLES
   ============================================ */

.fi-ta-table {
    border-radius: 0 !important;
    overflow: hidden !important;
    font-family: var(--niche-font-body) !important;
}

.fi-ta-ctn .fi-ta-table thead tr,
.fi-ta-table thead tr,
thead tr {
    background: var(--niche-sidebar-bg) !important;
    background-image: linear-gradient(180deg, var(--niche-sidebar-bg) 0%, var(--niche-sidebar-dark) 100%) !important;
}

.fi-ta-header-cell,
.fi-ta-ctn .fi-ta-header-cell,
th.fi-ta-header-cell,
.fi-ta-table th,
thead th {
    background: var(--niche-sidebar-bg) !important;
    background-image: linear-gradient(180deg, var(--niche-sidebar-bg) 0%, var(--niche-sidebar-dark) 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    padding: 0.875rem 1rem !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fi-ta-ctn .fi-ta-table thead th *,
.fi-ta-ctn .fi-ta-header-cell *,
.fi-ta-table thead th *,
.fi-ta-header-cell *,
thead th *,
[role="columnheader"] *,
[role="columnheader"] button,
[role="columnheader"] span,
[role="columnheader"] div {
    color: white !important;
}

.fi-ta-ctn .fi-ta-table thead th svg,
.fi-ta-header-cell svg,
thead th svg,
[role="columnheader"] svg {
    color: var(--niche-accent-light) !important;
}

.fi-ta-header-cell:last-child,
.fi-ta-table th:last-child,
thead th:last-child {
    border-right: none !important;
}

.fi-ta-row {
    border-bottom: 1px solid var(--niche-border) !important;
}

.fi-ta-row:hover {
    background: rgba(var(--niche-primary-rgb, 0, 0, 0), 0.05) !important;
}

.fi-ta-row:nth-child(even) {
    background: rgba(var(--niche-border-rgb, 200, 200, 200), 0.15) !important;
}

.fi-ta-row:nth-child(even):hover {
    background: rgba(var(--niche-primary-rgb, 0, 0, 0), 0.05) !important;
}

.fi-ta-cell {
    padding: 0.875rem 1rem !important;
    color: var(--niche-text) !important;
    font-family: var(--niche-font-body) !important;
}

.fi-ta-header-cell {
    font-family: var(--niche-font-body) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

.fi-btn-primary,
button[type="submit"].fi-btn {
    background: linear-gradient(180deg, var(--niche-primary) 0%, var(--niche-primary-dark) 100%) !important;
    border: none !important;
    color: white !important;
    font-family: var(--niche-font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 8px !important;
    padding: 0.625rem 1.25rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
}

.fi-btn-primary svg,
button[type="submit"].fi-btn svg {
    color: white !important;
}

.fi-btn-primary:hover,
button[type="submit"].fi-btn:hover {
    background: linear-gradient(180deg, var(--niche-primary-light) 0%, var(--niche-primary) 100%) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px) !important;
}

.fi-btn-gray,
.fi-btn:not(.fi-btn-primary):not(.fi-btn-danger):not(.fi-btn-success):not(.fi-btn-warning) {
    background: linear-gradient(180deg, var(--niche-cream) 0%, var(--niche-bg-accent) 100%) !important;
    border: 1px solid var(--niche-border) !important;
    color: var(--niche-text) !important;
    font-family: var(--niche-font-body) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.fi-btn-gray svg,
.fi-btn:not(.fi-btn-primary):not(.fi-btn-danger):not(.fi-btn-success):not(.fi-btn-warning) svg {
    color: var(--niche-text) !important;
}

.fi-btn-gray:hover,
.fi-btn:not(.fi-btn-primary):not(.fi-btn-danger):not(.fi-btn-success):not(.fi-btn-warning):hover {
    background: var(--niche-primary) !important;
    border-color: var(--niche-primary) !important;
    color: white !important;
}

.fi-btn-danger {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
}

.fi-btn-success {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
}

.fi-btn-warning {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%) !important;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.fi-header {
    border-bottom: 3px solid var(--niche-primary) !important;
    padding-bottom: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    background: linear-gradient(180deg, transparent 0%, rgba(var(--niche-primary-rgb, 0, 0, 0), 0.02) 100%) !important;
}

.fi-header-heading {
    color: var(--niche-primary-dark) !important;
    font-weight: 700 !important;
    font-family: var(--niche-font-heading) !important;
}

/* ============================================
   BADGES
   ============================================ */

.fi-badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 0.25rem 0.625rem !important;
    border-width: 1px !important;
    border-style: solid !important;
    font-family: var(--niche-font-body) !important;
}

.fi-badge-success {
    background: rgba(22, 163, 74, 0.1) !important;
    border-color: #16a34a !important;
    color: #15803d !important;
}

.fi-badge-danger {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #dc2626 !important;
    color: #b91c1c !important;
}

.fi-badge-warning {
    background: rgba(217, 119, 6, 0.1) !important;
    border-color: #d97706 !important;
    color: #b45309 !important;
}

.fi-badge-primary {
    background: rgba(var(--niche-primary-rgb, 0, 0, 0), 0.1) !important;
    border-color: var(--niche-primary) !important;
    color: var(--niche-primary-dark) !important;
}

.fi-badge-secondary,
.fi-badge-gray {
    background: rgba(100, 116, 139, 0.1) !important;
    border-color: #94a3b8 !important;
    color: #475569 !important;
}

.fi-badge-info {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: #0ea5e9 !important;
    color: #0284c7 !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.fi-breadcrumbs {
    color: var(--niche-text) !important;
    font-family: var(--niche-font-heading) !important;
}

.fi-breadcrumbs a {
    color: var(--niche-primary) !important;
    font-weight: 500 !important;
    font-family: var(--niche-font-heading) !important;
}

.fi-breadcrumbs a:hover {
    color: var(--niche-primary-light) !important;
}

.fi-breadcrumbs li,
.fi-breadcrumbs span {
    font-family: var(--niche-font-heading) !important;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.fi-ac-btn-action {
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

/* Table action icons */
.fi-ta-actions a,
.fi-ta-cell a[href] {
    color: var(--niche-text) !important;
}

.fi-ta-actions a svg,
.fi-ta-cell a svg,
.fi-link svg {
    color: var(--niche-text) !important;
    transition: color 0.2s ease !important;
}

.fi-ta-actions a:hover,
.fi-ta-actions a:hover svg,
.fi-ta-cell a:hover svg,
.fi-link:hover svg {
    color: var(--niche-primary) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.fi-pagination-items {
    gap: 0.25rem !important;
}

.fi-pagination-item {
    border-radius: 6px !important;
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    color: var(--niche-text) !important;
    transition: all 0.2s ease !important;
}

.fi-pagination-item:hover {
    background: var(--niche-primary) !important;
    border-color: var(--niche-primary) !important;
    color: white !important;
}

.fi-pagination-item-active,
.fi-pagination-item[aria-current="page"] {
    background: linear-gradient(180deg, var(--niche-primary) 0%, var(--niche-primary-dark) 100%) !important;
    border-color: var(--niche-primary) !important;
    color: white !important;
    font-weight: 600 !important;
}

.fi-pagination select {
    background: var(--niche-cream) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 6px !important;
    padding: 0.25rem 0.5rem !important;
}

/* ============================================
   MODAL
   ============================================ */

.fi-modal-content {
    border: 2px solid var(--niche-primary) !important;
    border-radius: 12px !important;
    background: var(--niche-cream) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   STATS WIDGETS
   ============================================ */

.fi-wi-stats-overview-stat {
    background: linear-gradient(135deg, var(--niche-cream) 0%, var(--niche-bg-accent) 100%) !important;
    border: 1px solid var(--niche-border) !important;
    border-radius: 12px !important;
}

/* ============================================
   TOAST NOTIFICATIONS
   Styled for visibility and niche theming
   ============================================ */

/* Notification container - ensure top-right positioning */
.fi-no {
    z-index: 9999 !important;
}

/* Individual notification styling */
.fi-no-notification {
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    border-left: 5px solid var(--niche-primary) !important;
    background: var(--niche-cream) !important;
    font-family: var(--niche-font-sans) !important;
    pointer-events: auto !important;
}

/* Success notification - green themed */
.fi-no-notification.fi-color-success,
.fi-no-notification.fi-status-success {
    border-left-color: #16a34a !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}

.fi-no-notification.fi-color-success .fi-no-notification-icon,
.fi-no-notification.fi-status-success .fi-no-notification-icon {
    color: #16a34a !important;
    background: rgba(22, 163, 74, 0.15) !important;
    border-radius: 50% !important;
    padding: 0.5rem !important;
}

.fi-no-notification.fi-color-success .fi-no-notification-title,
.fi-no-notification.fi-status-success .fi-no-notification-title {
    color: #15803d !important;
}

/* Danger/Error notification - red themed */
.fi-no-notification.fi-color-danger,
.fi-no-notification.fi-status-danger {
    border-left-color: #dc2626 !important;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
}

.fi-no-notification.fi-color-danger .fi-no-notification-icon,
.fi-no-notification.fi-status-danger .fi-no-notification-icon {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.15) !important;
    border-radius: 50% !important;
    padding: 0.5rem !important;
}

.fi-no-notification.fi-color-danger .fi-no-notification-title,
.fi-no-notification.fi-status-danger .fi-no-notification-title {
    color: #b91c1c !important;
}

/* Warning notification - amber/orange themed */
.fi-no-notification.fi-color-warning,
.fi-no-notification.fi-status-warning {
    border-left-color: #d97706 !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}

.fi-no-notification.fi-color-warning .fi-no-notification-icon,
.fi-no-notification.fi-status-warning .fi-no-notification-icon {
    color: #d97706 !important;
    background: rgba(217, 119, 6, 0.15) !important;
    border-radius: 50% !important;
    padding: 0.5rem !important;
}

.fi-no-notification.fi-color-warning .fi-no-notification-title,
.fi-no-notification.fi-status-warning .fi-no-notification-title {
    color: #b45309 !important;
}

/* Info notification - uses niche primary color */
.fi-no-notification.fi-color-info,
.fi-no-notification.fi-status-info,
.fi-no-notification.fi-color-primary {
    border-left-color: var(--niche-primary) !important;
    background: linear-gradient(135deg, var(--niche-cream) 0%, rgba(var(--niche-primary-rgb, 0, 0, 0), 0.08) 100%) !important;
}

.fi-no-notification.fi-color-info .fi-no-notification-icon,
.fi-no-notification.fi-status-info .fi-no-notification-icon,
.fi-no-notification.fi-color-primary .fi-no-notification-icon {
    color: var(--niche-primary) !important;
    background: rgba(var(--niche-primary-rgb, 0, 0, 0), 0.15) !important;
    border-radius: 50% !important;
    padding: 0.5rem !important;
}

.fi-no-notification.fi-color-info .fi-no-notification-title,
.fi-no-notification.fi-status-info .fi-no-notification-title,
.fi-no-notification.fi-color-primary .fi-no-notification-title {
    color: var(--niche-primary-dark) !important;
}

/* Gray/default notification */
.fi-no-notification.fi-color-gray {
    border-left-color: #64748b !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.fi-no-notification.fi-color-gray .fi-no-notification-icon {
    color: #64748b !important;
    background: rgba(100, 116, 139, 0.15) !important;
    border-radius: 50% !important;
    padding: 0.5rem !important;
}

.fi-no-notification.fi-color-gray .fi-no-notification-title {
    color: #475569 !important;
}

/* Notification title styling */
.fi-no-notification-title {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
}

/* Notification body styling */
.fi-no-notification-body {
    color: var(--niche-text) !important;
    font-size: 0.875rem !important;
    opacity: 0.85 !important;
    line-height: 1.5 !important;
}

/* Close button styling */
.fi-no-notification-close-btn {
    opacity: 0.5 !important;
    transition: opacity 0.2s ease !important;
}

.fi-no-notification-close-btn:hover {
    opacity: 1 !important;
}

/* Icon sizing */
.fi-no-notification-icon svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Notification actions */
.fi-no-notification-actions {
    margin-top: 0.75rem !important;
}

.fi-no-notification-actions .fi-btn {
    font-size: 0.8rem !important;
    padding: 0.375rem 0.75rem !important;
}

/* ============================================
   TABS
   ============================================ */

.fi-tabs-tab {
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.2s ease !important;
}

.fi-tabs-tab-active {
    background: var(--niche-primary) !important;
    color: white !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */

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

::-webkit-scrollbar-track {
    background: var(--niche-bg-accent);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--niche-border) 0%, #bfb5a5 100%);
    border-radius: 5px;
    border: 2px solid var(--niche-bg-accent);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--niche-primary);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.fi-ta-empty-state {
    background: var(--niche-cream) !important;
    border: 2px dashed var(--niche-border) !important;
    border-radius: 12px !important;
    padding: 3rem !important;
}

/* ============================================
   LOADING STATES
   ============================================ */

.fi-loading-indicator {
    color: var(--niche-primary) !important;
}

/* ============================================
   LINKS
   ============================================ */

.fi-link {
    color: var(--niche-primary) !important;
}

.fi-link:hover {
    color: var(--niche-primary-dark) !important;
}

/* ============================================
   SIDEBAR DESCRIPTION (shared component)
   ============================================ */

.fi-sidebar-description {
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    margin-top: 1rem !important;
}

.sidebar-description-hr {
    border-color: var(--niche-accent) !important;
    opacity: 0.4 !important;
}

.sidebar-description-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--niche-font-body) !important;
    line-height: 1.5 !important;
}

.sidebar-info-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--niche-accent-light) !important;
    border: 1px solid var(--niche-accent) !important;
}

.sidebar-info-btn:hover {
    background: var(--niche-accent) !important;
    color: white !important;
}

/* ============================================
   ADMINISTRATION GROUP - TOP DIVIDER
   ============================================ */

/* Style the Administration navigation group to have a divider below */
.fi-sidebar-group[data-group-label="Administration"] {
    padding-bottom: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   MOBILE SIDEBAR FIX
   Filament sidebar and close overlay are z-30, but our
   niche-header is z-100 and covers the backdrop overlay.
   Bump both above the header on mobile so tapping the
   backdrop actually closes the sidebar.
   ============================================ */

@media (max-width: 1023px) {
    .fi-sidebar {
        z-index: 150 !important;
    }
    .fi-sidebar-close-overlay {
        z-index: 140 !important;
    }
}

/* ============================================
   END OF SHARED STYLES
   Individual niche themes add their own heading fonts
   via --niche-font-heading variable
   ============================================ */