@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --font-family: 'Source Sans 3', sans-serif;
}

body,
.fi-body,
.fi-main,
.fi-sidebar,
.fi-topbar {
    font-family: var(--font-family) !important;
}

/* ── Premium Background ────────────────────────────────────── */
.fi-main-ctn {
    position: relative;
    background-image: url('/images/dashboard-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

.fi-main-ctn::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(248, 250, 252, 0.93);
    /* Glassy overlay for readability */
    backdrop-filter: blur(8px);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content sits above the overlay */
.fi-main {
    position: relative;
    z-index: 1;
}

.dark .fi-main-ctn::before {
    background: rgba(15, 23, 42, 0.9);
}

/* Custom admin styles for Curator Modal - AGGRESSIVE FIX */

/* Force the main container to be horizontal (split view) */
div.curator-panel>div[class*="flex-1"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: calc(100vh - 80px) !important;
}

/* Left side: Gallery images */
.curator-panel-gallery {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
    background: #fff !important;
}

/* Right side: Upload Section (Sidebar) */
.curator-panel-sidebar {
    width: 450px !important;
    min-width: 450px !important;
    max-width: 450px !important;
    border-left: 1px solid #e0e0e0 !important;
    background-color: #f7f7f7 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

/* Ensure the library images are in a nice grid */
.curator-picker-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 15px !important;
    padding-bottom: 50px !important;
    /* Leave space for Load More if any */
}

.curator-picker-grid li img {
    width: 130px !important;
    height: 130px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
}

/* Fix "Add Files" title and dropzone in the sidebar */
.curator-panel-sidebar h4 {
    margin-top: 1rem !important;
    padding-left: 1rem !important;
    color: #333 !important;
}

.curator-panel-sidebar .flex-1 {
    padding: 1rem !important;
}

/* Dark mode support */
.dark div.curator-panel>div[class*="flex-1"] {
    background: #000 !important;
}

.dark .curator-panel-sidebar {
    background-color: #1a1a1a !important;
    border-color: #333 !important;
}

.dark .curator-panel-gallery {
    background: #000 !important;
}

/* FORCE MEDIA ACTIONS VISIBILITY */
.fi-ta-content-grid-item .fi-ta-actions {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0.5rem !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.fi-ta-content-grid-item>div {
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem !important;
}

.fi-ta-content-grid-item .fi-ta-actions {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 0.75rem !important;
}

/* Reduce login page logo height and overall height */
.fi-simple-main {
    padding-top: 0.5rem !important;
}

.fi-simple-header img {
    max-height: 140px !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

.fi-simple-header {
    margin-bottom: 0.5rem !important;
}

.fi-simple-card {
    margin-top: 0 !important;
}

/* Hide language switcher in admin panel */
.fi-user-menu~div>div>button[class*="filament-language-switch"] {
    display: none !important;
}

/* General selector for the language switcher if the above is too specific */
[class*="filament-language-switch"] {
    display: none !important;
}

/* ─── Dashboard stat cards — PREMIUM REDESIGN ──────────────── */
.migrantdb-stat-card {
    position: relative;
    background: #ffffff;
    border: none !important;
    border-radius: 1.25rem !important;
    padding: 1.75rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 130px !important;
}

.migrantdb-stat-card .stat-content {
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.migrantdb-stat-card .stat-icon-wrapper {
    background: #f8fafc;
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.migrantdb-stat-card.migrant:hover .stat-icon-wrapper {
    background: #e0e7ff;
    color: var(--primary-700, var(--primary-600, #015f82));
    transform: scale(1.1) rotate(5deg);
}

.migrantdb-stat-card.helpline:hover .stat-icon-wrapper {
    background: #dcfce7;
    color: #059669;
    transform: scale(1.1) rotate(-5deg);
}

.migrantdb-stat-card.activity:hover .stat-icon-wrapper {
    background: #fef3c7;
    color: #d97706;
    transform: scale(1.1) rotate(5deg);
}

.stat-widget-icon {
    width: 28px !important;
    height: 28px !important;
    color: #94a3b8;
}

.migrantdb-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.migrantdb-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}

.migrantdb-stat-card.migrant::before {
    background: linear-gradient(to bottom, var(--primary-600, #02729D), #818cf8);
}

.migrantdb-stat-card.helpline::before {
    background: linear-gradient(to bottom, #10b981, #34d399);
}

.migrantdb-stat-card.activity::before {
    background: linear-gradient(to bottom, #f59e0b, #f97316);
}

.migrantdb-stat-card dt {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
}

.migrantdb-stat-card dd {
    margin: 0 !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}

.migrantdb-stat-card.migrant dd {
    background: linear-gradient(135deg, var(--primary-700, var(--primary-600, #015f82)) 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.migrantdb-stat-card.helpline dd {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.migrantdb-stat-card.activity dd {
    background: linear-gradient(135deg, #d97706 0%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Dark mode adjustments */
.dark .migrantdb-stat-card {
    background: #1e1e1e !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

.dark .migrantdb-stat-card dt {
    color: #9ca3af !important;
}

/* ─── Dashboard Layout ─────────────────────────────────────── */
.dashboard-section {
    position: relative;
    padding-top: 2.5rem;
}

.dashboard-section:first-child {
    padding-top: 0;
}

.dashboard-section-title {
    font-size: 1.375rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 2rem !important;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, #e2e8f0, transparent);
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ─── Registration wizard — circular progress layout ───────── */
ol.fi-sc-wizard-header {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    gap: 3.5rem !important;
    padding-top: 3.5rem !important;
    padding-bottom: 95px !important;
    margin-bottom: 2.5rem !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    counter-reset: wizard-step !important;
}

/* Hide default separator slanted SVGs */
.fi-sc-wizard-header-step-separator {
    display: none !important;
}

.fi-sc-wizard-header-step {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Horizontal connecting lines between steps, attached to the step icon container */
.fi-sc-wizard-header-step:not(:last-child) .fi-sc-wizard-header-step-icon-ctn::after {
    content: "" !important;
    position: absolute !important;
    left: 38px !important;
    /* Starts near the right edge of the 40px circle */
    width: 42px !important;
    /* Spans the gap to the next step */
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 2px !important;
    background-color: #e5e7eb !important;
    z-index: 0 !important;
}

.fi-sc-wizard-header-step.fi-completed:not(:last-child) .fi-sc-wizard-header-step-icon-ctn::after {
    background-color: var(--primary-600, #02729D) !important;
}

.fi-sc-wizard-header-step-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 10 !important;
    background: transparent !important;
    cursor: pointer !important;
    position: static !important;
}

/* Circular step container styling */
.fi-sc-wizard-header-step-icon-ctn {
    counter-increment: wizard-step !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #d1d5db !important;
    background-color: #fff !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    z-index: 20 !important;
    position: relative !important;
}

/* Force hiding checkmark icons and original padded numbers */
.fi-sc-wizard-header-step-icon-ctn * {
    display: none !important;
}

/* Inject single-digit counter value */
.fi-sc-wizard-header-step-icon-ctn::before {
    content: counter(wizard-step) !important;
    display: block !important;
}

/* Active step styling */
.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--primary-600, #02729D) !important;
    color: var(--primary-600, #02729D) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-600, #02729D) 20%, transparent) !important;
    background-color: #fff !important;
}

/* Completed step styling */
.fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--primary-600, #02729D) !important;
    color: var(--primary-600, #02729D) !important;
    background-color: #fff !important;
}

/* Hide step label/description by default */
.fi-sc-wizard-header-step-text {
    display: none !important;
}

/* Absolutely center active step text below the entire indicators list */
.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-text {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 90px !important;
    width: 800px !important;
    text-align: center !important;
    z-index: 30 !important;
}

.fi-sc-wizard-header-step-label {
    display: block !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 2px !important;
    margin-top: 20px;
}

.fi-sc-wizard-header-step-description {
    display: block !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    /* Show description in one line as requested */
}

/* ─── Nav group labels match index.html ─────────────────── */
.fi-sidebar-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7280;
}

/* ─── Premium Form Controls: Checkbox lists, Radio groups, and Toggles ─── */
.fi-fo-checkbox-list,
.fi-fo-radio {
    gap: 0.75rem !important;
}

/* Make checkboxes and radios look like cards */
.fi-fo-checkbox-list label,
.fi-fo-radio label {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 0px !important;
}

/* Hover effect */
.fi-fo-checkbox-list label:hover,
.fi-fo-radio label:hover {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* Selected state: highlight card with theme colors */
.fi-fo-checkbox-list label:has(input[type="checkbox"]:checked),
.fi-fo-radio label:has(input[type="radio"]:checked) {
    background-color: color-mix(in oklab, var(--primary-600, #02729D) 8%, white) !important;
    /* Very light purple/indigo background */
    border-color: var(--primary-600, #02729D) !important;
    /* Brand indigo border */
    box-shadow: 0 0 0 1px var(--primary-600, #02729D), 0 2px 4px color-mix(in oklab, var(--primary-600, #02729D) 5%, transparent) !important;
}

/* Adjust the native checkboxes and radio input alignment slightly */
.fi-fo-checkbox-list label input[type="checkbox"],
.fi-fo-radio label input[type="radio"] {
    margin: 0 !important;
    cursor: pointer !important;
}

/* Premium toggle design */
.fi-fo-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 0.75rem 1rem !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.fi-fo-toggle:hover {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}

.fi-fo-toggle:has(button[aria-checked="true"]) {
    background-color: color-mix(in oklab, var(--primary-600, #02729D) 8%, white) !important;
    border-color: var(--primary-600, #02729D) !important;
    box-shadow: 0 0 0 1px var(--primary-600, #02729D), 0 2px 4px color-mix(in oklab, var(--primary-600, #02729D) 5%, transparent) !important;
}

/* ─── Migrant List Header Styles ────────────────────────── */
.migrant-list-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    padding: 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: #ffffff !important;
}

.migrant-primary-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.migrant-search-container {
    position: relative !important;
    width: 280px !important;
    flex: 0 0 280px !important;
}

.migrant-search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9ca3af !important;
    pointer-events: none !important;
}

.migrant-search-input {
    width: 100% !important;
    padding: 0.375rem 0.75rem 0.375rem 2.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    outline: none !important;
    background-color: #ffffff !important;
}

.migrant-actions-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
}

.migrant-inline-filter,
.migrant-region-select {
    width: 160px !important;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    outline: none !important;
    background-color: #ffffff !important;
}

.migrant-inline-filter {
    flex: 0 0 160px !important;
}

.migrant-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem 1rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background-color: var(--primary-700, var(--primary-600, #015f82)) !important;
    border-radius: 0.375rem !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
}

.migrant-add-btn:hover {
    background-color: var(--primary-700, var(--primary-600, #015f82)) !important;
}

.custom-migrant-table .fi-ta-filters-above-content-ctn {
    padding: 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: #ffffff !important;
}

.custom-migrant-table .fi-ta-filters {
    display: flex !important;
    align-items: end !important;
    gap: 0.75rem !important;
}

.custom-migrant-table .fi-ta-filters-header {
    display: none !important;
}

.custom-migrant-table .fi-ta-filters form,
.custom-migrant-table .fi-ta-filters .fi-sc,
.custom-migrant-table .fi-ta-filters .fi-grid {
    flex: 1 1 auto !important;
}

.custom-migrant-table .fi-ta-filters .fi-grid {
    gap: 0.75rem !important;
}

.custom-migrant-table .fi-ta-filters .fi-fo-field-wrp-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.helpline-cases-table .fi-ta-filters-above-content-ctn,
.helpline-cases-table .fi-ta-filters,
.helpline-cases-table .fi-ta-filters form,
.helpline-cases-table .fi-ta-filters .fi-sc,
.helpline-cases-table .fi-ta-filters .fi-grid {
    background: #f3f4f6 !important;
}

.helpline-cases-table .fi-ta-filters-header>div:last-child {
    display: none !important;
}

/* ─── Migrant List Table Name Column Styles ─────────────── */
.migrant-name-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.migrant-avatar-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 9999px !important;
    background-color: #eef2ff !important;
    color: var(--primary-700, var(--primary-600, #015f82)) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    border: 1px solid #e0e7ff !important;
    flex-shrink: 0 !important;
}

.migrant-name-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

.migrant-name-title {
    font-weight: 600 !important;
    color: #111827 !important;
}

.migrant-name-subtitle {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
}

/* ─── Migrant Detail View Custom Fields ──────────────────── */
/* 1. Bold labels */
.migrant-details-infolist .fi-in-entry-label {
    font-weight: 700 !important;
    color: #374151 !important;
    font-size: 0.8125rem !important;
    margin-bottom: 0.375rem !important;
}

/* 2. Format the value container as a read-only input box */
.migrant-details-infolist .fi-in-entry-content {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    /* Reduced size slightly */
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    background-color: #f9fafb !important;
    /* Light gray box background to look like disabled/readonly input */
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    color: #1f2937 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    min-height: 2.25rem !important;
}

/* If it contains a badge, icon, or svg, remove the input box styling */
.migrant-details-infolist .fi-in-entry-content:has(.fi-badge),
.migrant-details-infolist .fi-in-entry-content:has(.fi-in-icon),
.migrant-details-infolist .fi-in-entry-content:has(svg) {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
}

/* Make sure the container takes full width */
.migrant-details-infolist .fi-in-entry-content-ctn {
    width: 100% !important;
}

/* ─── Fix select dropdown z-index overlap with wizard footer buttons ─── */
.fi-dropdown-panel {
    z-index: 9999 !important;
}

.fi-sc-wizard-step.fi-active {
    position: relative !important;
    z-index: 10 !important;
}

.migrant-edit-wizard .fi-sc-wizard-footer>div:last-child.fi-hidden {
    display: block !important;
}

.migrant-edit-wizard .fi-sc-wizard-footer {
    justify-content: flex-end !important;
}

.migrant-edit-wizard .fi-sc-wizard-footer>div:first-child {
    order: 1;
    margin-right: auto !important;
}

.migrant-edit-wizard .fi-sc-wizard-footer>div:nth-child(3) {
    order: 3;
}

.migrant-edit-wizard .fi-sc-wizard-footer>div:last-child {
    order: 2;
}

/* ─── Premium Toggle Switches: Bright Blue Active and Gray Inactive ─── */
.fi-toggle.fi-toggle-on {
    background-color: #3b82f6 !important;
    /* Bright blue when active (ON) */
}

.fi-toggle.fi-toggle-off {
    background-color: #d1d5db !important;
    /* Clearly visible gray when inactive (OFF) */
}

/* Ensure the white circle knob inside the toggle switch stands out sharply */
.fi-toggle>span {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}



/* ═══════════════════════════════════════════════════════════════
   HELPLINE DESK — Tab-based Dashboard / Registration / Resolved
   ═══════════════════════════════════════════════════════════════ */

/* ── Animation ─────────────────────────────────────────────── */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Tab Navigation ────────────────────────────────────────── */
.helpdesk-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.75rem;
}

.helpdesk-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.helpdesk-tab:hover {
    color: #374151;
    background: #f9fafb;
}

.helpdesk-tab.active {
    color: var(--primary-700, var(--primary-600, #015f82));
    border-bottom-color: var(--primary-700, var(--primary-600, #015f82));
}

.helpdesk-tab svg {
    flex-shrink: 0;
}

/* ── Stats Grid ────────────────────────────────────────────── */
.helpdesk-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.helpdesk-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: #ffffff;
    border: none;
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.helpdesk-stat-content {
    display: flex;
    flex-direction: column;
}

.helpdesk-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.helpdesk-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    flex-shrink: 0;
    font-size: 1.5rem;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.helpdesk-stat-label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.helpdesk-stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* ── Table Card ────────────────────────────────────────────── */
.helpdesk-table-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.helpdesk-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.helpdesk-table-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.125rem;
}

.helpdesk-table-subtitle {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin: 0;
}

/* ── Table ─────────────────────────────────────────────────── */
.helpdesk-table {
    width: 100%;
    border-collapse: collapse;
}

.helpdesk-table thead th {
    padding: 0.75rem 1.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    white-space: nowrap;
}

.helpdesk-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

.helpdesk-table tbody tr:last-child {
    border-bottom: none;
}

.helpdesk-table tbody tr:hover {
    background: #f9fafb;
}

.helpdesk-table tbody td {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    color: #374151;
    vertical-align: middle;
}

.helpdesk-case-link {
    font-weight: 600;
    color: var(--primary-700, var(--primary-600, #015f82));
    text-decoration: none;
    transition: color 0.15s ease;
}

.helpdesk-case-link:hover {
    color: #3730a3;
    text-decoration: underline;
}

.helpdesk-worker-name {
    font-weight: 500;
    color: #1f2937;
}

/* ── Badges ────────────────────────────────────────────────── */
.helpdesk-badge {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
    white-space: nowrap;
    line-height: 1.3;
}

.helpdesk-badge.info {
    background: #ede9fe;
    color: #5b21b6;
}

.helpdesk-badge.success {
    background: #d1fae5;
    color: #065f46;
}

.helpdesk-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.helpdesk-badge.danger {
    background: #fee2e2;
    color: #991b1b;
}

.helpdesk-badge.gray {
    background: #f3f4f6;
    color: #6b7280;
}

/* ── Action Link ───────────────────────────────────────────── */
.helpdesk-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s ease;
}

.helpdesk-action-link:hover {
    color: var(--primary-700, var(--primary-600, #015f82));
}

/* ── Button ────────────────────────────────────────────────── */
.helpdesk-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-600, #02729D) 0%, var(--primary-700, var(--primary-600, #015f82)) 100%);
    border: none;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px color-mix(in oklab, var(--primary-600, #02729D) 30%, transparent);
}

.helpdesk-btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-700, var(--primary-600, #015f82)) 0%, var(--primary-700, var(--primary-600, #015f82)) 100%);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--primary-600, #02729D) 35%, transparent);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

/* ── Register Tab Card ─────────────────────────────────────── */
.helpdesk-register-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: #ffffff;
    border: 2px dashed #e5e7eb;
    border-radius: 0.75rem;
    text-align: center;
}

.helpdesk-register-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #eef2ff;
    margin-bottom: 1.25rem;
}

/* ── Resolved Banner ───────────────────────────────────────── */
.helpdesk-resolved-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* ── Form Container ────────────────────────────────────────── */
.helpdesk-form-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1.25rem;
    padding: 3.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .helpdesk-stats-grid {
        grid-template-columns: 1fr;
    }

    .helpdesk-tabs {
        overflow-x: auto;
    }

    .helpdesk-tab {
        white-space: nowrap;
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
    }
}

/* ─── Custom Global Footer Styling ────────────────────────── */
.fixed-footer {
    margin-top: auto !important;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    z-index: 10 !important;
    padding: 1rem 2rem !important;
}

.dark .fixed-footer {
    background: rgba(15, 23, 42, 0.45) !important;
    border-top: 1px solid rgba(51, 65, 85, 0.5) !important;
}

.fixed-footer span,
.fixed-footer a {
    color: #64748b !important;
    font-weight: 400;
}

.dark .fixed-footer span,
.dark .fixed-footer a {
    color: #94a3b8 !important;
}

.fixed-footer a:hover {
    color: var(--primary-700, var(--primary-600, #015f82)) !important;
    text-decoration: underline !important;
}

.dark .fixed-footer a:hover {
    color: #818cf8 !important;
}

/* ── Custom Light Blue Page Header Background (Reduced Spacing) ── */
.fi-header {
    background: linear-gradient(135deg, #f0f8ff 0%, #e0f2fe 100%) !important;
    /* Premium light blue gradient */
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 4px 6px -1px color-mix(in oklab, var(--primary-600, #02729D) 5%, transparent) !important;
    margin-bottom: 1rem !important;
}

/* Dark mode: switch header to dark background so title text is visible */
.dark .fi-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: color-mix(in oklab, var(--primary-600, #02729D) 30%, transparent) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode: make page title & breadcrumb text white/light */
.dark .fi-header h1,
.dark .fi-header .fi-page-heading-heading,
.dark .fi-header [class*="heading"],
.dark .fi-header [class*="title"] {
    color: #f1f5f9 !important;
}

.dark .fi-header .fi-breadcrumbs,
.dark .fi-header .fi-breadcrumbs a,
.dark .fi-header .fi-breadcrumbs span,
.dark .fi-header .fi-breadcrumbs li {
    color: #94a3b8 !important;
}

.fi-header .fi-breadcrumbs {
    margin-bottom: 0.25rem !important;
}

/* ── Reduce Vertical Spacing ── */
.fi-main {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* ── Custom Royal Blue Topbar Menu ── */
.fi-topbar {
    background-color: var(--primary-800, var(--primary-700, #003f5c)) !important;
    border-bottom: 1px solid var(--primary-800, var(--primary-700, #003f5c)) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure links and icons inside topbar navigation items are white / readable */
.fi-topbar-nav-item a,
.fi-topbar-nav-item span,
.fi-topbar-nav-item svg,
.fi-topbar a,
.fi-topbar button,
.fi-topbar span:not(.fi-badge-label),
.fi-topbar svg,
.fi-topbar-group-label {
    color: #ffffff !important;
}

/* Ensure navigation badges remain readable and don't get forced to white text */
.fi-topbar .fi-badge,
.fi-topbar .fi-badge * {
    color: var(--primary-600, #02729D) !important;
    font-weight: 700 !important;
}

/* Make sure active navigation items have a nice light semi-transparent background */
.fi-topbar-item.fi-active .fi-topbar-item-btn,
.fi-topbar-item.fi-active .fi-topbar-item-btn span,
.fi-topbar-item.fi-active .fi-topbar-item-btn svg,
.fi-topbar-item .fi-topbar-item-btn:hover,
.fi-topbar-item .fi-topbar-item-btn:hover span,
.fi-topbar-item .fi-topbar-item-btn:hover svg {
    background-color: #ffffff !important;
    /* Semi-white background */
    color: #000000 !important;
    /* Black text */
    border-radius: 0.375rem !important;
}

/* Fix search input inside topbar */
.fi-topbar input[type="search"],
.fi-topbar input {
    background-color: #ffffff !important;
    border-color: #e0f2fe !important;
    color: var(--primary-600, #02729D) !important;
}

.fi-topbar input[type="search"]::placeholder,
.fi-topbar input::placeholder {
    color: color-mix(in oklab, var(--primary-600, #02729D) 50%, transparent) !important;
}

.fi-topbar-search-icon,
.fi-topbar .fi-topbar-search-icon svg {
    color: var(--primary-600, #02729D) !important;
}

/* Also show table search place text in the blue color */
.fi-ta-search-field input,
.fi-ta-search-field input[type="search"] {
    color: var(--primary-600, #02729D) !important;
}

.fi-ta-search-field input::placeholder {
    color: color-mix(in oklab, var(--primary-600, #02729D) 50%, transparent) !important;
}

/* Members list row PDF action */
.member-pdf-download-action {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border: 1px solid #fecaca !important;
    border-radius: 0.375rem !important;
    background-color: #fff7f7 !important;
    color: #dc2626 !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.12) !important;
}

.member-pdf-download-action:hover {
    background-color: #fee2e2 !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
}

.member-pdf-download-action svg {
    width: 20px !important;
    height: 20px !important;
    color: currentColor !important;
}

/* Member view top summary card */
.member-profile-summary-card {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    padding: 1.25rem !important;
}

/* Report pages: lift PDF/CSV export actions into the top title band */
.report-table-page {
    position: relative !important;
}

.report-table-page .fi-ta-header {
    position: absolute !important;
    top: -88px !important;
    right: 1.5rem !important;
    z-index: 30 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.report-table-page .fi-ta-header .fi-ta-actions {
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

.report-table-page .fi-ta-row .fi-ta-actions .fi-btn-color-danger {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border: 1px solid #fecaca !important;
    border-radius: 0.375rem !important;
    background-color: #fff7f7 !important;
    color: #dc2626 !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.12) !important;
}

.report-table-page .fi-ta-row .fi-ta-actions .fi-btn-color-danger:hover {
    background-color: #fee2e2 !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
}

.report-table-page .fi-ta-row .fi-ta-actions .fi-btn-color-danger svg {
    width: 20px !important;
    height: 20px !important;
    color: currentColor !important;
}

/* Force primary buttons to match royal blue branding */
.fi-btn-color-primary,
.fi-btn-color-primary button,
.fi-ac-btn-action,
.fi-ac-action-button,
button[type="submit"].fi-btn,
.fi-btn[class*="color-primary"] {
    background-color: var(--primary-800, var(--primary-700, #003f5c)) !important;
    color: #ffffff !important;
}

.fi-btn-color-primary:hover,
.fi-ac-btn-action:hover,
button[type="submit"].fi-btn:hover,
.fi-btn[class*="color-primary"]:hover {
    background-color: var(--primary-700, var(--primary-600, #015f82)) !important;
}

/* Force icons inside primary and success buttons (like Export CSV) to be white */
.fi-btn-color-primary svg,
.fi-btn-color-success svg,
.fi-btn[class*="color-success"] svg,
.fi-btn[class*="color-primary"] svg,
.fi-btn svg {
    color: #ffffff !important;
}


/* ── Prevent Dropdowns and child elements from having white text (light mode) ── */
.fi-topbar .fi-dropdown-panel a,
.fi-topbar .fi-dropdown-panel button,
.fi-topbar .fi-dropdown-panel span,
.fi-topbar .fi-dropdown-list-item a,
.fi-topbar .fi-dropdown-list-item button,
.fi-topbar .fi-dropdown-list-item span,
.fi-topbar .fi-dropdown-list-item *,
.fi-topbar [role="menu"] a,
.fi-topbar [role="menu"] button,
.fi-topbar [role="menu"] span,
.fi-topbar [role="menu"] *,
.fi-dropdown-list-item,
.fi-dropdown-list-item *,
.fi-dropdown-header,
.fi-dropdown-header *,
.fi-dropdown-list,
.fi-dropdown-list * {
    color: rgb(55, 65, 81) !important;
    /* Reset to slate-700 in light mode */
}

/* Dark mode: dropdown menu items should be light/white text */
.dark .fi-topbar .fi-dropdown-panel a,
.dark .fi-topbar .fi-dropdown-panel button,
.dark .fi-topbar .fi-dropdown-panel span,
.dark .fi-topbar .fi-dropdown-list-item a,
.dark .fi-topbar .fi-dropdown-list-item button,
.dark .fi-topbar .fi-dropdown-list-item span,
.dark .fi-topbar .fi-dropdown-list-item *,
.dark .fi-topbar [role="menu"] a,
.dark .fi-topbar [role="menu"] button,
.dark .fi-topbar [role="menu"] span,
.dark .fi-topbar [role="menu"] *,
.dark .fi-dropdown-list-item,
.dark .fi-dropdown-list-item *,
.dark .fi-dropdown-header,
.dark .fi-dropdown-header *,
.dark .fi-dropdown-list,
.dark .fi-dropdown-list * {
    color: #e2e8f0 !important;
    /* Light gray text for dark mode */
}

/* Hover highlights for dropdown items — light mode */
.fi-topbar .fi-dropdown-list-item:hover,
.fi-topbar .fi-dropdown-list-item:hover *,
.fi-topbar [role="menu"] a:hover,
.fi-topbar [role="menu"] button:hover,
.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:hover * {
    color: var(--primary-600, #02729D) !important;
    /* Theme blue on hover */
    background-color: rgb(249, 250, 251) !important;
}

/* Hover highlights for dropdown items — dark mode */
.dark .fi-topbar .fi-dropdown-list-item:hover,
.dark .fi-topbar .fi-dropdown-list-item:hover *,
.dark .fi-topbar [role="menu"] a:hover,
.dark .fi-topbar [role="menu"] button:hover,
.dark .fi-dropdown-list-item:hover,
.dark .fi-dropdown-list-item:hover * {
    color: #7dd3fc !important;
    /* Light blue on hover in dark mode */
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Increase border radius of status radio buttons and cards */
.fi-fo-radio-option,
.fi-fo-radio-option label,
.fi-fo-radio-option>label,
.fi-fo-radio-option-card,
[class*="fi-fo-radio"] label,
[class*="fi-fo-radio"] button,
.fi-fo-radio-option>div {
    border-radius: 50px !important;
}

/* Increase border radius of the Toggle switch track and handle/knob */
.fi-toggle,
.fi-toggle button,
.fi-toggle div,
.fi-toggle>div,
.fi-toggle span,
.fi-fo-toggle,
[class*="fi-toggle"],
[class*="fi-toggle"] div,
[class*="fi-toggle"] span {
    border-radius: 50px !important;
}

/* Reduce table search input field width and position search */
.fi-ta-search-field {
    max-width: 240px !important;
    order: 2 !important;
}

/* Filter section — position anchor for Filter button */
.fi-ta-filters-above-content-ctn {
    position: relative !important;
}

/* Filter button — styled and positioned */
.fi-ta-filters-trigger,
button[wire:click*="Filter"],
button.fi-ta-filters-trigger {
    position: absolute !important;
    right: 260px !important;
    bottom: -50px !important;
    z-index: 50 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--primary-600, #02729D) !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    height: 38px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.fi-ta-filters-trigger:hover,
button[wire:click*="Filter"]:hover {
    background-color: var(--primary-700, var(--primary-600, #015f82)) !important;
}

/* UI Switcher modal: keep the settings slideover readable.
   The switcher is mounted from the topbar render hook, so broad .fi-topbar
   color rules above can otherwise turn modal labels/icons white on white. */
#ui-switcher-modal,
#ui-switcher-modal p,
#ui-switcher-modal h2,
#ui-switcher-modal h3,
#ui-switcher-modal span,
#ui-switcher-modal button,
#ui-switcher-modal label,
#ui-switcher-modal input {
    color: #111827 !important;
}

#ui-switcher-modal .fi-modal-window,
#ui-switcher-modal .fi-modal-content {
    background-color: #ffffff !important;
}

#ui-switcher-modal .fi-modal-heading,
#ui-switcher-modal h2,
#ui-switcher-modal h3 {
    font-weight: 700 !important;
}

#ui-switcher-modal svg {
    color: currentColor !important;
}

#ui-switcher-modal button:not([style*="background-color"]):hover {
    background-color: #f9fafb !important;
}

#ui-switcher-modal button[class*="bg-primary-50"],
#ui-switcher-modal button[class*="border-primary-500"] {
    background-color: color-mix(in oklab, var(--primary-600, #02729D) 8%, transparent) !important;
    border-color: var(--primary-600, #02729D) !important;
}

#ui-switcher-modal button[style*="background-color"] {
    color: #ffffff !important;
}

#ui-switcher-modal button[style*="background-color"] svg {
    color: #ffffff !important;
}

#ui-switcher-modal .ui-switcher-slider {
    color: var(--primary-600, #02729D) !important;
}

.dark #ui-switcher-modal,
.dark #ui-switcher-modal p,
.dark #ui-switcher-modal h2,
.dark #ui-switcher-modal h3,
.dark #ui-switcher-modal span,
.dark #ui-switcher-modal button,
.dark #ui-switcher-modal label,
.dark #ui-switcher-modal input {
    color: #e5e7eb !important;
}

.dark #ui-switcher-modal .fi-modal-window,
.dark #ui-switcher-modal .fi-modal-content {
    background-color: #111827 !important;
}

.dark #ui-switcher-modal button:not([style*="background-color"]):hover {
    background-color: #1f2937 !important;
}

/* UI Switcher component layout. The package view depends on Tailwind utility
   classes, but this panel does not compile the package source into the active
   theme, so we recreate the needed layout only inside this modal. */
#ui-switcher-modal .fi-modal-window {
    width: min(390px, calc(100vw - 2rem)) !important;
    max-width: min(390px, calc(100vw - 2rem)) !important;
    border-radius: 0 !important;
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.16) !important;
}

#ui-switcher-modal .fi-modal-header,
#ui-switcher-modal .fi-modal-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

#ui-switcher-modal .fi-modal-header {
    padding-top: 1.25rem !important;
    padding-bottom: 0.75rem !important;
}

#ui-switcher-modal .fi-modal-content {
    padding-bottom: 1.5rem !important;
}

#ui-switcher-modal .flex {
    display: flex !important;
}

#ui-switcher-modal .grid {
    display: grid !important;
}

#ui-switcher-modal .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#ui-switcher-modal .items-center {
    align-items: center !important;
}

#ui-switcher-modal .justify-center {
    justify-content: center !important;
}

#ui-switcher-modal .justify-between {
    justify-content: space-between !important;
}

#ui-switcher-modal .flex-col {
    flex-direction: column !important;
}

#ui-switcher-modal .flex-wrap {
    flex-wrap: wrap !important;
}

#ui-switcher-modal .gap-0\.5 {
    gap: 0.125rem !important;
}

#ui-switcher-modal .gap-2 {
    gap: 0.5rem !important;
}

#ui-switcher-modal .gap-3 {
    gap: 0.75rem !important;
}

#ui-switcher-modal .mb-1 {
    margin-bottom: 0.25rem !important;
}

#ui-switcher-modal .mb-2 {
    margin-bottom: 0.5rem !important;
}

#ui-switcher-modal .mb-3 {
    margin-bottom: 0.75rem !important;
}

#ui-switcher-modal .mt-3 {
    margin-top: 0.75rem !important;
}

#ui-switcher-modal .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

#ui-switcher-modal .p-3 {
    padding: 0.75rem !important;
}

#ui-switcher-modal .p-4 {
    padding: 1rem !important;
}

#ui-switcher-modal .space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.75rem !important;
}

#ui-switcher-modal h3 {
    display: block !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    color: #111827 !important;
}

#ui-switcher-modal h3 > span {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#ui-switcher-modal h3 svg {
    width: 1rem !important;
    height: 1rem !important;
}

#ui-switcher-modal .fi-modal-heading {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    color: #111827 !important;
}

#ui-switcher-modal .fi-theme-switcher {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
}

#ui-switcher-modal .fi-theme-switcher-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.75rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    background-color: #ffffff !important;
    color: #111827 !important;
}

#ui-switcher-modal .fi-theme-switcher-btn.fi-active,
#ui-switcher-modal .fi-theme-switcher-btn[aria-pressed="true"] {
    border-color: var(--primary-600, #02729D) !important;
    background-color: color-mix(in oklab, var(--primary-600, #02729D) 8%, white) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary-600, #02729D) 25%, transparent) !important;
}

#ui-switcher-modal .fi-theme-switcher-btn svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

#ui-switcher-modal button[wire\:click*="setLayout"] {
    position: relative !important;
    display: flex !important;
    min-height: 5.5rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    text-align: center !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

#ui-switcher-modal button[wire\:click*="setLayout"]:hover {
    border-color: var(--primary-400, var(--primary-600, #02729D)) !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

#ui-switcher-modal button[wire\:click*="setLayout"][class*="border-primary-500"] {
    border-color: var(--primary-600, #02729D) !important;
    background-color: color-mix(in oklab, var(--primary-600, #02729D) 8%, white) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary-600, #02729D) 22%, transparent) !important;
}

#ui-switcher-modal button[wire\:click*="setLayout"] span {
    display: block !important;
    font-size: 0.75rem !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

#ui-switcher-modal button[wire\:click*="setLayout"] div[class*="w-"] {
    background-color: #d1d5db !important;
}

#ui-switcher-modal button[wire\:click*="setLayout"] div[class*="bg-gray-400"] {
    background-color: #9ca3af !important;
}

#ui-switcher-modal .w-14 {
    width: 3.5rem !important;
}

#ui-switcher-modal .w-12 {
    width: 3rem !important;
}

#ui-switcher-modal .w-10 {
    width: 2.5rem !important;
}

#ui-switcher-modal .w-6 {
    width: 1.5rem !important;
}

#ui-switcher-modal .w-5 {
    width: 1.25rem !important;
}

#ui-switcher-modal .w-3\.5 {
    width: 0.875rem !important;
}

#ui-switcher-modal .w-1\.5 {
    width: 0.375rem !important;
}

#ui-switcher-modal .h-10 {
    height: 2.5rem !important;
}

#ui-switcher-modal .h-8 {
    height: 2rem !important;
}

#ui-switcher-modal .h-7 {
    height: 1.75rem !important;
}

#ui-switcher-modal .h-6,
#ui-switcher-modal .h-6\.5 {
    height: 1.5rem !important;
}

#ui-switcher-modal .h-5 {
    height: 1.25rem !important;
}

#ui-switcher-modal .h-4 {
    height: 1rem !important;
}

#ui-switcher-modal .h-1,
#ui-switcher-modal .h-1\.5 {
    height: 0.375rem !important;
}

#ui-switcher-modal .rounded,
#ui-switcher-modal .rounded-lg {
    border-radius: 0.5rem !important;
}

#ui-switcher-modal button[wire\:click*="setColor"] {
    position: relative !important;
    width: 2rem !important;
    height: 2rem !important;
    flex: 0 0 2rem !important;
    border: 2px solid transparent !important;
    border-radius: 0.45rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
}

#ui-switcher-modal button[wire\:click*="setColor"]:hover {
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18) !important;
}

#ui-switcher-modal button[wire\:click*="setColor"][class*="ring"] {
    border-color: #ffffff !important;
    outline: 2px solid var(--primary-600, #02729D) !important;
    outline-offset: 2px !important;
}

#ui-switcher-modal button[wire\:click*="setColor"] svg {
    position: absolute !important;
    inset: 0 !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin: auto !important;
    color: #ffffff !important;
}

#ui-switcher-modal button[wire\:click*="setFont"] {
    position: relative !important;
    display: flex !important;
    min-height: 4.75rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    background-color: #ffffff !important;
    text-align: center !important;
}

#ui-switcher-modal button[wire\:click*="setFont"]:hover {
    border-color: var(--primary-400, var(--primary-600, #02729D)) !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

#ui-switcher-modal button[wire\:click*="setFont"][class*="border-primary-500"] {
    border-color: var(--primary-600, #02729D) !important;
    background-color: color-mix(in oklab, var(--primary-600, #02729D) 8%, white) !important;
}

#ui-switcher-modal button[wire\:click*="setFont"] span:first-of-type {
    margin-bottom: 0.25rem !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
}

#ui-switcher-modal button[wire\:click*="setFont"] span:last-of-type {
    font-size: 0.6875rem !important;
    line-height: 1.1 !important;
    color: #4b5563 !important;
}

#ui-switcher-modal button[wire\:click*="setFont"] svg {
    position: absolute !important;
    top: 0.35rem !important;
    right: 0.35rem !important;
    width: 1rem !important;
    height: 1rem !important;
    color: var(--primary-600, #02729D) !important;
}

#ui-switcher-modal input[type="range"].ui-switcher-slider {
    display: block !important;
    width: 100% !important;
    height: 6px !important;
    margin-top: 0.75rem !important;
    border-radius: 999px !important;
}

#ui-switcher-modal span[x-text] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.5rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    background-color: #f3f4f6 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.dark #ui-switcher-modal h3,
.dark #ui-switcher-modal .fi-modal-heading {
    color: #f9fafb !important;
}

.dark #ui-switcher-modal .fi-theme-switcher-btn,
.dark #ui-switcher-modal button[wire\:click*="setLayout"],
.dark #ui-switcher-modal button[wire\:click*="setFont"] {
    border-color: #374151 !important;
    background-color: #111827 !important;
    color: #e5e7eb !important;
}

.dark #ui-switcher-modal .fi-theme-switcher-btn.fi-active,
.dark #ui-switcher-modal .fi-theme-switcher-btn[aria-pressed="true"],
.dark #ui-switcher-modal button[wire\:click*="setLayout"][class*="border-primary-500"],
.dark #ui-switcher-modal button[wire\:click*="setFont"][class*="border-primary-500"] {
    border-color: var(--primary-400, var(--primary-600, #02729D)) !important;
    background-color: color-mix(in oklab, var(--primary-600, #02729D) 18%, transparent) !important;
}

.dark #ui-switcher-modal button[wire\:click*="setLayout"] span,
.dark #ui-switcher-modal button[wire\:click*="setFont"] span:last-of-type {
    color: #d1d5db !important;
}