/*
 * Tenant admin theme (loyalty dashboard).
 * Loaded after style.css to restyle the Purple Admin shell and the shared components
 * (topbar, sidebar, cards, forms, tables/DataTables, modals...) with a calm, low-contrast look.
 * Markup and behaviour are untouched: removing the <link> in partials/header reverts the look.
 */

:root {
    --fl-font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fl-bg: #f4f5f7;
    --fl-surface: #ffffff;
    --fl-surface-muted: #f8f9fb;
    --fl-surface-hover: #f3f4f6;
    --fl-border: #e6e8ec;
    --fl-border-soft: #eef0f3;
    --fl-text: #1f2937;
    --fl-text-strong: #111827;
    --fl-text-muted: #6b7280;
    --fl-text-soft: #9ca3af;
    --fl-text-secondary: #374151;   /* labels, secondary text */
    --fl-text-subtle: #4b5563;      /* sidebar links */
    --fl-border-strong: #d1d5db;    /* hover borders, dashed boxes */
    --fl-on-accent: #fff;           /* text on solid colored fills */

    --fl-primary: #6d5dfc;
    --fl-primary-hover: #5b4ae8;
    --fl-primary-strong: #4c3fd1;   /* text on --fl-primary-soft */
    --fl-primary-text: #6d5dfc;     /* links and primary text on surfaces */
    --fl-primary-soft: #f1efff;
    --fl-primary-border: #ddd8fe;

    /* -hover: hover fill, also used as text on the -soft tints; -strong: alert text */
    --fl-success: #16a34a;
    --fl-success-hover: #15803d;
    --fl-success-strong: #166534;
    --fl-success-soft: #ecfdf3;
    --fl-success-border: #c6f0d5;
    --fl-info: #0ea5e9;
    --fl-info-hover: #0284c7;
    --fl-info-strong: #075985;
    --fl-info-soft: #f0f9ff;
    --fl-info-border: #c7e7fb;
    --fl-warning: #f59e0b;
    --fl-warning-hover: #d97706;
    --fl-warning-text: #b45309;     /* text on --fl-warning-soft */
    --fl-warning-strong: #92400e;
    --fl-warning-soft: #fffaeb;
    --fl-warning-border: #fde7b0;
    --fl-danger: #e11d48;
    --fl-danger-hover: #be123c;
    --fl-danger-strong: #9f1239;
    --fl-danger-soft: #fff1f3;
    --fl-danger-border: #fbd0d9;

    --fl-radius-lg: 14px;
    --fl-radius: 12px;
    --fl-radius-sm: 8px;
    --fl-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --fl-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);
    --fl-shadow-modal: 0 24px 48px rgba(16, 24, 40, 0.18);
    --fl-ring: 0 0 0 3px rgba(109, 93, 252, 0.14);

    /* Hover fill of solid buttons (kept apart from -hover, which is also used for text) */
    --fl-primary-fill-hover: var(--fl-primary-hover);
    --fl-success-fill-hover: var(--fl-success-hover);
    --fl-info-fill-hover: var(--fl-info-hover);
    --fl-warning-fill-hover: var(--fl-warning-hover);
    --fl-danger-fill-hover: var(--fl-danger-hover);

    /* Component tokens (the dark palette below overrides them) */
    --fl-scrollbar: #d1d5db;
    --fl-backdrop: #0f172a;
    --fl-table-stripe: #fafbfc;
    --fl-table-hover: #f6f5ff;
    --fl-switch-bg: #e5e7eb;
    --fl-switch-border: #d9dce1;
    --fl-gold-soft: #fff4dc;
    --fl-plan-bg: linear-gradient(135deg, #fffbf0, #fff4dc);
    --fl-plan-icon-bg: #ffffff;
    --fl-action-icon-bg: rgba(255, 255, 255, 0.75);
    /* Dashboard chart (read by admin-home's Chart.js script) */
    --fl-chart-grid: var(--fl-border-soft);
    --fl-chart-tick: var(--fl-text-soft);
    --fl-chart-earn: var(--fl-success);
    --fl-chart-earn-fill: rgba(22, 163, 74, 0.18);
    --fl-chart-spend: var(--fl-info);
}

/* ======================================================================
   Base & typography
   ====================================================================== */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn,
.badge,
.card .card-title,
.card .card-subtitle,
.card .card-description,
.form-control,
.table thead th,
.navbar,
.sidebar,
.footer,
.font-weight-light,
.font-weight-normal,
.font-weight-bold,
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.tooltip,
.popover {
    font-family: var(--fl-font);
}

body {
    background: var(--fl-bg);
    color: var(--fl-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fl-text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.font-weight-bold {
    font-weight: 600;
}

a {
    color: var(--fl-primary-text);
}

a:hover {
    color: var(--fl-primary-hover);
}

.text-muted,
.text-secondary {
    color: var(--fl-text-muted) !important;
}

::selection {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--fl-scrollbar) transparent;
}

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

::-webkit-scrollbar-thumb {
    background: var(--fl-scrollbar);
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Rules that used to live in the topbar's inline <style>, still needed by other pages */
.new_campaign .form-group {
    display: flow-root;
}

.warning-details-card i {
    font-size: 20px;
}

.warning-details-card .preview-thumbnail {
    padding: 5px;
}

.warning-details-card .preview-subject {
    margin-left: 5px;
}

.dropdown-menu[data-bs-popper] {
    left: -90px;
}

/* ======================================================================
   Layout
   ====================================================================== */
.container-scroller,
.page-body-wrapper,
.main-panel {
    background: var(--fl-bg);
}

.content-wrapper {
    background: var(--fl-bg);
    padding: 1.75rem 2rem;
}

.grid-margin {
    margin-bottom: 1.25rem;
}

.padding-bottom-30 {
    padding-bottom: 1.25rem;
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 1.25rem;
}

.page-header .page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    margin: 0;
}

.page-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 4px 0 0;
    font-size: 0.8125rem;
}

.page-header .breadcrumb .breadcrumb-item,
.page-header .breadcrumb .breadcrumb-item a {
    color: var(--fl-text-muted);
    text-decoration: none;
}

.page-header .breadcrumb .breadcrumb-item a:hover {
    color: var(--fl-primary-text);
}

.page-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--fl-text-soft);
}

.page-header .breadcrumb .breadcrumb-item.active {
    color: var(--fl-text-muted);
}

.page-header .page-subtitle {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

.page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.footer {
    background: transparent;
    border-top: 1px solid var(--fl-border);
    padding: 1rem 2rem;
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

/* ======================================================================
   Topbar
   ====================================================================== */
.navbar.default-layout-navbar {
    background: var(--fl-surface);
    border-bottom: 1px solid var(--fl-border);
    box-shadow: none;
}

.navbar .navbar-brand-wrapper {
    background: var(--fl-surface);
    border-inline-end: 1px solid var(--fl-border);
}

.navbar .navbar-menu-wrapper {
    color: var(--fl-text-muted);
    gap: 20px;
}

.navbar .navbar-menu-wrapper .navbar-toggler {
    color: var(--fl-text);
}

.navbar .navbar-menu-wrapper .navbar-nav-right {
    gap: 8px;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
    color: var(--fl-text-muted);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .nav-link.count-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-top: auto;
    margin-bottom: auto;
    border: 1px solid var(--fl-border);
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .nav-link.count-indicator:hover {
    background: var(--fl-surface-muted);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .nav-link.count-indicator::after {
    display: none;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator i {
    font-size: 1.15rem;
    margin: 0;
    color: var(--fl-text);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count-symbol {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--fl-surface);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    color: var(--fl-on-accent);
    text-align: center;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count-symbol:empty {
    display: none;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count-symbol.bg-warning:empty {
    display: block;
    min-width: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    top: -3px;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    margin-top: auto;
    margin-bottom: auto;
    padding: 4px 12px 4px 4px;
    padding-inline: 4px 12px;
    border: 1px solid var(--fl-border);
    border-radius: 10px;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-img {
    width: 30px;
    height: 30px;
    margin: 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-img img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-text {
    margin: 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-profile-text p {
    color: var(--fl-text-strong);
    font-weight: 500;
    font-size: 0.875rem;
}

.navbar .navbar-dropdown,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    min-width: 280px;
    padding: 6px;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow-lg);
}

.navbar .navbar-dropdown .dropdown-item {
    border-radius: var(--fl-radius-sm);
    padding: 9px 12px;
    font-size: 0.875rem;
    color: var(--fl-text);
}

.navbar .navbar-dropdown .dropdown-item:hover {
    background: var(--fl-surface-muted);
}

.navbar .navbar-dropdown .dropdown-item.preview-item .preview-thumbnail .preview-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.navbar .navbar-dropdown .dropdown-item.preview-item .preview-subject {
    font-size: 0.8125rem;
    color: var(--fl-text);
    white-space: normal;
}

.navbar .navbar-dropdown .dropdown-item.preview-item p {
    font-size: 0.75rem;
}

.topbar-dropdown__title {
    padding: 8px 12px 6px;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.navbar .navbar-dropdown .dropdown-item.topbar-dropdown__footer {
    justify-content: center;
    text-align: center;
    margin-top: 4px;
    border-top: 1px solid var(--fl-border-soft);
    border-radius: 0 0 var(--fl-radius-sm) var(--fl-radius-sm);
    color: var(--fl-primary-text);
    font-weight: 500;
    font-size: 0.8125rem;
}

.topbar-dropdown__empty {
    padding: 16px 12px;
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--fl-text-soft);
}

/* Topbar dropdowns open from the button's outer edge in both directions
   (the legacy ".dropdown-menu[data-bs-popper] { left: -90px }" pushed them off-screen in RTL) */
.navbar .navbar-nav-right .dropdown-menu[data-bs-popper] {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* Notification bell */
.topbar-alerts-menu {
    width: 340px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.topbar-dropdown__title--section {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--fl-border-soft);
}

.navbar .navbar-dropdown .dropdown-item.topbar-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    white-space: normal;
}

.topbar-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 1rem;
}

.dropdown-menu .dropdown-item .topbar-alert__icon i.mdi {
    margin: 0;
    color: inherit;
}

.topbar-alert__icon--danger { background: var(--fl-danger-soft); color: var(--fl-danger); }
.topbar-alert__icon--warning { background: var(--fl-warning-soft); color: var(--fl-warning); }
.topbar-alert__icon--info { background: var(--fl-info-soft); color: var(--fl-info); }
.topbar-alert__icon--success { background: var(--fl-success-soft); color: var(--fl-success); }

.topbar-alert__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.topbar-alert__body strong {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.topbar-alert__body small {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--fl-text-muted);
}

.topbar-alerts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 12px 18px;
    text-align: center;
}

.topbar-alerts-empty i {
    font-size: 1.6rem;
    color: var(--fl-success);
}

.topbar-alerts-empty span {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.topbar-alerts-empty small {
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.topbar-profile-menu {
    min-width: 220px !important;
}

.topbar-profile-menu__head {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--fl-border-soft);
}

.topbar-profile-menu__head strong {
    font-size: 0.875rem;
    color: var(--fl-text-strong);
}

.topbar-profile-menu__head small {
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

/* Light / dark / system switch (partials/topbar-theme) */
.fl-theme-menu {
    min-width: 210px !important;
}

.navbar .navbar-dropdown .dropdown-item.fl-theme-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: start;
}

.navbar .navbar-dropdown .dropdown-item.fl-theme-menu__item i.mdi {
    margin: 0;
    font-size: 1.05rem;
    color: var(--fl-text-soft);
}

.navbar .navbar-dropdown .dropdown-item.fl-theme-menu__item.is-active {
    color: var(--fl-primary-strong);
    font-weight: 600;
}

.navbar .navbar-dropdown .dropdown-item.fl-theme-menu__item.is-active i.mdi {
    color: var(--fl-primary-text);
}

.navbar .navbar-dropdown .dropdown-item.fl-theme-menu__item .fl-theme-menu__check {
    margin-inline-start: auto;
    visibility: hidden;
}

.navbar .navbar-dropdown .dropdown-item.fl-theme-menu__item.is-active .fl-theme-menu__check {
    visibility: visible;
}

.fl-theme-menu__hint {
    margin: 4px 0 0;
    padding: 8px 12px 4px;
    border-top: 1px solid var(--fl-border-soft);
    font-size: 0.72rem;
    color: var(--fl-text-soft);
}

/* Customer search */
.topbar-search {
    position: relative;
    width: min(440px, 40vw);
}

.topbar-search__icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 12px;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--fl-text-soft);
    pointer-events: none;
}

.topbar-search__input {
    width: 100%;
    height: 40px;
    padding-inline: 38px 36px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--fl-surface-muted);
    color: var(--fl-text);
    font-size: 0.875rem;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.topbar-search__input::placeholder {
    color: var(--fl-text-soft);
}

.topbar-search__input:focus {
    background: var(--fl-surface);
    border-color: var(--fl-primary);
    box-shadow: var(--fl-ring);
}

.topbar-search__kbd {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
    padding: 1px 7px;
    border: 1px solid var(--fl-border);
    border-radius: 6px;
    background: var(--fl-surface);
    color: var(--fl-text-soft);
    font-family: var(--fl-font);
    font-size: 11px;
    box-shadow: none;
}

.topbar-search__input:focus ~ .topbar-search__kbd {
    display: none;
}

.topbar-search__results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    z-index: 1050;
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow-lg);
}

.topbar-search__results.is-open {
    display: block;
}

.topbar-search__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--fl-radius-sm);
    color: var(--fl-text) !important;
    font-size: 0.8125rem;
    text-decoration: none !important;
}

.topbar-search__item i {
    font-size: 1.2rem;
    color: var(--fl-text-soft);
}

.topbar-search__item:hover,
.topbar-search__item:focus {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong) !important;
}

.topbar-search__empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--fl-text-soft);
}

@media (max-width: 767px) {
    .topbar-search {
        display: none;
    }
}

/* ======================================================================
   Sidebar
   ====================================================================== */
.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--fl-surface);
    border-inline-end: 1px solid var(--fl-border);
    overflow: hidden;
}

.sidebar > .nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 0;
    padding: 8px 12px 16px;
}

.sidebar .nav .nav-item {
    padding: 0;
    margin-bottom: 2px;
    border-radius: var(--fl-radius-sm);
}

.sidebar .nav .nav-item:hover,
.sidebar .nav .nav-item.active {
    background: transparent;
}

/* Section titles */
.sidebar .nav .nav-item.nav-section {
    padding: 18px 12px 6px;
    margin: 0;
    pointer-events: none;
}

.sidebar .nav .nav-item.nav-section:first-child {
    padding-top: 8px;
}

.sidebar .nav .nav-section-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fl-text-soft);
}

/* Top level links */
.sidebar .nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--fl-radius-sm);
    color: var(--fl-text-subtle);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav .nav-item .nav-link i.menu-icon {
    order: -1;
    flex-shrink: 0;
    width: 20px;
    margin: 0 !important;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--fl-text-soft);
    transition: color 0.15s ease;
}

.sidebar .nav .nav-item .nav-link .menu-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.sidebar .nav .nav-item .nav-link i.menu-arrow {
    order: 2;
    margin: 0 !important;
    font-size: 1rem;
    color: var(--fl-text-soft);
    transition: transform 0.2s ease;
}

.sidebar .nav .nav-item .nav-link i.menu-arrow:before {
    content: "\f142";
}

[dir="rtl"] .sidebar .nav .nav-item .nav-link i.menu-arrow:before {
    content: "\f141";
}

.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow:before {
    content: "\f140";
}

.sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-section):not(.nav-profile) > .nav-link {
    background: var(--fl-surface-hover);
    color: var(--fl-text-strong);
}

.sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-section) > .nav-link i.menu-icon {
    color: var(--fl-text);
}

.sidebar .nav .nav-item .nav-link[aria-expanded="true"] {
    color: var(--fl-text-strong);
}

.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-icon {
    color: var(--fl-text);
}

.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link,
.sidebar .nav:not(.sub-menu) > .nav-item.active:hover > .nav-link {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
}

.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav:not(.sub-menu) > .nav-item.active:hover > .nav-link i.menu-icon {
    color: var(--fl-primary-strong) !important;
    font-weight: 600;
}

.sidebar .nav .nav-item.active > .nav-link i.menu-arrow {
    color: var(--fl-primary-text) !important;
}

/* Sub menus: indented list with a guide line */
.sidebar .nav.sub-menu {
    margin: 2px 0 6px;
    margin-inline-start: 21px;
    padding: 0;
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--fl-border);
}

.sidebar .nav.sub-menu .nav-item {
    margin-bottom: 1px;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    padding: 7px 10px;
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

.sidebar .nav.sub-menu .nav-item .nav-link:before {
    display: none;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
    background: var(--fl-surface-muted);
    color: var(--fl-text-strong);
}

.sidebar .nav.sub-menu .nav-item.active > .nav-link,
.sidebar .nav.sub-menu .nav-item .nav-link.active {
    background: transparent;
    color: var(--fl-primary-strong);
    font-weight: 600;
    position: relative;
}

.sidebar .nav.sub-menu .nav-item.active > .nav-link::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: -16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fl-primary);
    box-shadow: 0 0 0 3px var(--fl-surface);
    transform: translateY(-50%);
}

.sidebar .nav.sub-menu .nav-item.active > .nav-link .menu-title {
    font-weight: 600;
}

.sidebar .nav.sub-menu .nav.sub-menu {
    margin-inline-start: 10px;
}

/* Sub menus open in a flyout next to the sidebar on desktop (script in partials/sidebar) */
@media (min-width: 992px) {
    .sidebar > .nav > .nav-item > .collapse {
        display: none !important;
    }

    .sidebar > .nav > .nav-item > .nav-link[data-bs-toggle="collapse"] i.menu-arrow:before,
    .sidebar > .nav > .nav-item > .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] i.menu-arrow:before {
        content: "\f142";
    }

    [dir="rtl"] .sidebar > .nav > .nav-item > .nav-link[data-bs-toggle="collapse"] i.menu-arrow:before,
    [dir="rtl"] .sidebar > .nav > .nav-item > .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] i.menu-arrow:before {
        content: "\f141";
    }

    .sidebar > .nav > .nav-item.is-flyout-open:not(.active) > .nav-link {
        background: var(--fl-surface-hover);
        color: var(--fl-text-strong);
    }

    .sidebar > .nav > .nav-item.is-flyout-open > .nav-link i.menu-arrow {
        color: var(--fl-primary-text);
    }
}

.sidebar-flyout {
    position: fixed;
    z-index: 1040;
    top: 80px;
    width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}

[dir="rtl"] .sidebar-flyout {
    transform: translateX(6px);
}

.sidebar-flyout.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* Pointer towards the item that opened the flyout */
.sidebar-flyout::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: var(--fl-arrow-top, 18px);
    left: -6px;
    width: 11px;
    height: 11px;
    background: var(--fl-surface);
    border-left: 1px solid var(--fl-border);
    border-bottom: 1px solid var(--fl-border);
    transform: rotate(45deg);
}

[dir="rtl"] .sidebar-flyout::before {
    left: auto;
    right: -6px;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid var(--fl-border);
    border-top: 1px solid var(--fl-border);
}

.sidebar-flyout__inner {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 8px;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow-lg);
}

.sidebar-flyout__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--fl-border-soft);
}

.sidebar-flyout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--fl-primary-soft);
    color: var(--fl-primary-text);
    font-size: 1rem;
}

.sidebar-flyout__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.sidebar-flyout .collapse {
    display: block !important;
    height: auto !important;
}

.sidebar-flyout .nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none;
}

.sidebar-flyout .nav-item {
    margin: 0 0 2px;
    padding: 0;
}

.sidebar-flyout .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--fl-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.sidebar-flyout .nav-link::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fl-border-strong);
    transition: background-color 0.12s ease;
}

.sidebar-flyout .nav-link:hover,
.sidebar-flyout .nav-link:focus-visible {
    background: var(--fl-surface-hover);
    color: var(--fl-text-strong);
    outline: none;
}

.sidebar-flyout .nav-link:hover::before,
.sidebar-flyout .nav-link:focus-visible::before {
    background: var(--fl-text-muted);
}

.sidebar-flyout .nav-item.active > .nav-link {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
    font-weight: 600;
}

.sidebar-flyout .nav-item.active > .nav-link::before {
    background: var(--fl-primary);
}

.sidebar-flyout .nav-link i.menu-arrow,
.sidebar-flyout .nav-link i.menu-icon {
    display: none;
}

/* Nested groups inside a flyout: the group link becomes a small label above its links */
.sidebar-flyout .sub-menu .nav-link[data-bs-toggle="collapse"] {
    padding: 10px 10px 4px;
    color: var(--fl-text-soft);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
}

.sidebar-flyout .sub-menu .nav-link[data-bs-toggle="collapse"]::before {
    display: none;
}

.sidebar-flyout .sub-menu .nav-link[data-bs-toggle="collapse"]:hover {
    background: transparent;
    color: var(--fl-text-soft);
}

.sidebar-flyout .sub-menu .sub-menu {
    margin-inline-start: 10px !important;
    padding-inline-start: 6px !important;
    border-inline-start: 1px solid var(--fl-border) !important;
}

/* Sidebar footer: plan + current admin */
.sidebar-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--fl-border);
    background: var(--fl-surface);
}

.sidebar-plan {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--fl-warning-border);
    border-radius: var(--fl-radius);
    background: var(--fl-plan-bg);
}

.sidebar-plan__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--fl-plan-icon-bg);
    color: var(--fl-warning);
    font-size: 1rem;
}

.sidebar-plan__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-plan__text strong {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-plan__text small {
    font-size: 0.6875rem;
    color: var(--fl-warning-strong);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--fl-radius);
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}

.sidebar-user:hover {
    background: var(--fl-surface-muted);
}

.sidebar-user__avatar {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

.sidebar-user__avatar img,
.sidebar-user__initial {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
}

.sidebar-user__initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
    font-weight: 600;
}

.sidebar-user__avatar .login-status {
    position: absolute;
    bottom: -2px;
    inset-inline-end: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--fl-surface);
    background: var(--fl-success);
}

.sidebar-user__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-user__text strong {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user__text small {
    font-size: 0.75rem;
    color: var(--fl-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user__arrow {
    color: var(--fl-text-soft);
}

[dir="rtl"] .sidebar-user__arrow {
    transform: scaleX(-1);
}

/* ======================================================================
   Cards & page sections
   ====================================================================== */
.card {
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-lg);
    box-shadow: var(--fl-shadow-xs);
}

.card .card-body {
    padding: 1.5rem;
}

.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--fl-border-soft);
    padding: 1rem 1.5rem;
}

.card .card-footer {
    background: var(--fl-surface-muted);
    border-top: 1px solid var(--fl-border-soft);
}

.card .card-title {
    color: var(--fl-text-strong);
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 1rem;
}

.card .card-description,
.card .card-subtitle {
    color: var(--fl-text-muted);
}

.header-wrap.d-flex {
    align-items: center;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--fl-border-soft);
}

.header-wrap .header-title,
.header-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    margin: 0;
}

.msg-content:empty {
    display: none;
}

/* ======================================================================
   Buttons
   ====================================================================== */
.btn {
    border-radius: var(--fl-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 0.55rem 1rem;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:focus,
.btn:focus-visible {
    box-shadow: var(--fl-ring);
}

.btn.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
}

.btn.btn-lg {
    padding: 0.7rem 1.25rem;
    font-size: 0.9rem;
}

.btn-primary,
.btn-gradient-primary {
    background: var(--fl-primary);
    border-color: var(--fl-primary);
    color: var(--fl-on-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-gradient-primary:hover,
.btn-gradient-primary:focus {
    background: var(--fl-primary-fill-hover);
    border-color: var(--fl-primary-fill-hover);
    color: var(--fl-on-accent);
}

.btn-info,
.btn-gradient-info {
    background: var(--fl-info);
    border-color: var(--fl-info);
    color: var(--fl-on-accent);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-gradient-info:hover {
    background: var(--fl-info-fill-hover);
    border-color: var(--fl-info-fill-hover);
    color: var(--fl-on-accent);
}

.btn-success,
.btn-gradient-success {
    background: var(--fl-success);
    border-color: var(--fl-success);
    color: var(--fl-on-accent);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-gradient-success:hover {
    background: var(--fl-success-fill-hover);
    border-color: var(--fl-success-fill-hover);
    color: var(--fl-on-accent);
}

.btn-danger,
.btn-gradient-danger {
    background: var(--fl-danger);
    border-color: var(--fl-danger);
    color: var(--fl-on-accent);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-gradient-danger:hover {
    background: var(--fl-danger-fill-hover);
    border-color: var(--fl-danger-fill-hover);
    color: var(--fl-on-accent);
}

.btn-warning,
.btn-gradient-warning {
    background: var(--fl-warning);
    border-color: var(--fl-warning);
    color: var(--fl-on-accent);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-gradient-warning:hover {
    background: var(--fl-warning-fill-hover);
    border-color: var(--fl-warning-fill-hover);
    color: var(--fl-on-accent);
}

.btn-secondary,
.btn-light {
    background: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-light:hover,
.btn-light:focus {
    background: var(--fl-surface-hover);
    border-color: var(--fl-border-strong);
    color: var(--fl-text-strong);
}

.btn-dark {
    background: var(--fl-text-strong);
    border-color: var(--fl-text-strong);
}

.btn-outline-primary {
    color: var(--fl-primary-text);
    border-color: var(--fl-primary-border);
}

.btn-outline-primary:hover {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
    border-color: var(--fl-primary);
}

.btn-outline-danger {
    color: var(--fl-danger);
    border-color: var(--fl-danger-border);
}

.btn-outline-danger:hover {
    background: var(--fl-danger-soft);
    color: var(--fl-danger-hover);
    border-color: var(--fl-danger);
}

.btn-outline-success {
    color: var(--fl-success);
    border-color: var(--fl-success-border);
}

.btn-outline-success:hover {
    background: var(--fl-success-soft);
    color: var(--fl-success-hover);
    border-color: var(--fl-success);
}

.btn-outline-info {
    color: var(--fl-info-hover);
    border-color: var(--fl-info-border);
}

.btn-outline-info:hover {
    background: var(--fl-info-soft);
    color: var(--fl-info-hover);
    border-color: var(--fl-info);
}

.btn-outline-secondary,
.btn-outline-dark {
    color: var(--fl-text);
    border-color: var(--fl-border);
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover {
    background: var(--fl-surface-hover);
    color: var(--fl-text-strong);
    border-color: var(--fl-border-strong);
}

/* Secondary actions in page headers: soft variants so the main (primary) action stands out */
.header-wrap .btn-info,
.header-wrap .btn-success,
.header-wrap .btn-warning {
    border-width: 1px;
}

.header-wrap .btn-info {
    background: var(--fl-info-soft);
    border-color: var(--fl-info-border);
    color: var(--fl-info-hover);
}

.header-wrap .btn-success {
    background: var(--fl-success-soft);
    border-color: var(--fl-success-border);
    color: var(--fl-success-hover);
}

.header-wrap .btn-warning {
    background: var(--fl-warning-soft);
    border-color: var(--fl-warning-border);
    color: var(--fl-warning-text);
}

.header-wrap .btn-info:hover,
.header-wrap .btn-info:focus {
    background: var(--fl-info);
    border-color: var(--fl-info);
    color: var(--fl-on-accent);
}

.header-wrap .btn-success:hover,
.header-wrap .btn-success:focus {
    background: var(--fl-success);
    border-color: var(--fl-success);
    color: var(--fl-on-accent);
}

.header-wrap .btn-warning:hover,
.header-wrap .btn-warning:focus {
    background: var(--fl-warning);
    border-color: var(--fl-warning);
    color: var(--fl-on-accent);
}

/* Row action buttons inside tables: soft, square icon buttons */
.table .btn.btn-xs,
.table .btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    vertical-align: middle;
}

.table .btn.btn-xs i,
.table .btn.btn-sm i {
    font-size: 1rem;
    margin: 0;
}

.table td .btn.mb-3 {
    margin-bottom: 0.125rem !important;
    margin-top: 0.125rem;
}

.table .btn-primary.btn-xs {
    background: var(--fl-primary-soft);
    border-color: var(--fl-primary-border);
    color: var(--fl-primary-strong);
}

.table .btn-primary.btn-xs:hover {
    background: var(--fl-primary);
    border-color: var(--fl-primary);
    color: var(--fl-on-accent);
}

.table .btn-info.btn-xs {
    background: var(--fl-info-soft);
    border-color: var(--fl-info-border);
    color: var(--fl-info-hover);
}

.table .btn-info.btn-xs:hover {
    background: var(--fl-info);
    border-color: var(--fl-info);
    color: var(--fl-on-accent);
}

.table .btn-success.btn-xs {
    background: var(--fl-success-soft);
    border-color: var(--fl-success-border);
    color: var(--fl-success-hover);
}

.table .btn-success.btn-xs:hover {
    background: var(--fl-success);
    border-color: var(--fl-success);
    color: var(--fl-on-accent);
}

.table .btn-danger.btn-xs {
    background: var(--fl-danger-soft);
    border-color: var(--fl-danger-border);
    color: var(--fl-danger-hover);
}

.table .btn-danger.btn-xs:hover {
    background: var(--fl-danger);
    border-color: var(--fl-danger);
    color: var(--fl-on-accent);
}

.table .btn-warning.btn-xs {
    background: var(--fl-warning-soft);
    border-color: var(--fl-warning-border);
    color: var(--fl-warning-text);
}

.table .btn-warning.btn-xs:hover {
    background: var(--fl-warning);
    border-color: var(--fl-warning);
    color: var(--fl-on-accent);
}

/* ======================================================================
   Forms
   ====================================================================== */
label,
.form-label,
.form-group label {
    color: var(--fl-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.form-group {
    margin-bottom: 1.1rem;
}

.form-control,
.form-select,
.typeahead,
.tt-query,
.tt-hint {
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    background-color: var(--fl-surface);
    color: var(--fl-text);
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.55rem 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.form-control,
select.form-control,
.form-select {
    height: 40px;
}

select.form-control,
.form-select {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    /* style.css greys out the selected value (select.form-control { color: #c9c8c8 }) */
    color: var(--fl-text);
}

textarea.form-control {
    height: auto;
    min-height: 90px;
}

input[type="file"].form-control {
    padding: 0.45rem 0.8rem;
}

.form-control::placeholder {
    color: var(--fl-text-soft);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fl-primary);
    box-shadow: var(--fl-ring);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--fl-surface-muted);
    color: var(--fl-text-muted);
}

small.info-text,
.info-text {
    color: var(--fl-text-muted) !important;
    font-size: 0.75rem;
}

.input-group-text {
    background: var(--fl-surface-muted);
    border: 1px solid var(--fl-border);
    color: var(--fl-text-muted);
    font-size: 0.8125rem;
}

.form-check-input:checked {
    background-color: var(--fl-primary);
    border-color: var(--fl-primary);
}

.form-check-input:focus {
    border-color: var(--fl-primary);
    box-shadow: var(--fl-ring);
}

/* Yes/No and Show/Hide switches (x-fields.switcher) */
.switch .slider {
    border-radius: 999px;
    background: var(--fl-switch-bg);
    border: 1px solid var(--fl-switch-border);
}

.switch .slider:before {
    border-radius: 999px;
    color: var(--fl-text-muted);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.15);
    bottom: 3px;
    left: 3px;
}

.switch input:checked + .slider {
    background: var(--fl-primary);
    border-color: var(--fl-primary);
}

.switch input:checked + .slider:before {
    color: var(--fl-primary-strong);
}

.switch input:focus + .slider {
    box-shadow: var(--fl-ring);
}

/* nice-select */
.nice-select {
    height: 40px;
    line-height: 38px;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    font-size: 0.875rem;
    color: var(--fl-text);
}

.nice-select:hover,
.nice-select.open,
.nice-select:focus {
    border-color: var(--fl-primary);
}

.nice-select .list {
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    box-shadow: var(--fl-shadow-lg);
}

.nice-select .option.selected,
.nice-select .option:hover,
.nice-select .option.focus {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    color: var(--fl-text);
    padding-inline: 0.8rem 2rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--fl-primary);
    box-shadow: var(--fl-ring);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--fl-primary-soft);
    border: 1px solid var(--fl-primary-border);
    border-radius: 6px;
    color: var(--fl-primary-strong);
}

.select2-dropdown {
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    box-shadow: var(--fl-shadow-lg);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--fl-primary);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--fl-border);
    border-radius: 6px;
}

/* Summernote editor frame */
.note-editor.note-frame {
    border: 1px solid var(--fl-border) !important;
    border-radius: var(--fl-radius-sm);
    overflow: hidden;
}

.note-editor .note-toolbar {
    background: var(--fl-surface-muted);
    border-bottom: 1px solid var(--fl-border);
}

/* Bulk action bar */
.bulk-delete-wrapper .select-box-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-delete-wrapper select {
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    background: var(--fl-surface);
    color: var(--fl-text);
    font-size: 0.8125rem;
}

/* ======================================================================
   Tables & DataTables
   ====================================================================== */
table thead {
    background-color: transparent;
    color: inherit;
    font-weight: inherit;
}

.table {
    --bs-table-striped-bg: var(--fl-table-stripe);
    --bs-table-hover-bg: var(--fl-table-hover);
    color: var(--fl-text);
    font-size: 0.8125rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
}

.table > :not(caption) > * > *,
.table th,
.table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-color: var(--fl-border-soft);
}

.table.table-bordered > :not(caption) > * > *,
table.dataTable.table-bordered th,
table.dataTable.table-bordered td {
    border-width: 0 0 1px 0;
}

.table > :not(:first-child) {
    border-top: 0;
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.table thead th,
table thead.text-white th,
table thead.text-white td,
table.dataTable thead th {
    background: var(--fl-surface-muted);
    color: var(--fl-text-muted) !important;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--fl-border) !important;
}

.table thead tr:first-child > th:first-child {
    border-start-start-radius: var(--fl-radius);
}

.table thead tr:first-child > th:last-child {
    border-start-end-radius: var(--fl-radius);
}

.table > tbody > tr:last-child > td:first-child {
    border-end-start-radius: var(--fl-radius);
}

.table > tbody > tr:last-child > td:last-child {
    border-end-end-radius: var(--fl-radius);
}

.table tbody tr {
    transition: background-color 0.12s ease;
}

.table tbody tr:hover > * {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
}

table.dataTable,
table.dataTable.no-footer {
    border-bottom: 1px solid var(--fl-border);
}

table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: transparent;
}

table.dataTable tbody tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--fl-primary-soft) !important;
    color: var(--fl-primary-strong);
}

.table-responsive,
.table-wrap {
    border-radius: var(--fl-radius);
}

.dataTables_wrapper {
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dt-buttons {
    margin-bottom: 14px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--fl-text-muted);
    font-weight: 500;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 36px !important;
    min-height: 0 !important;
    border: 1px solid var(--fl-border) !important;
    border-radius: var(--fl-radius-sm) !important;
    background-color: var(--fl-surface);
    color: var(--fl-text);
    padding: 0 0.7rem;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 240px;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--fl-primary) !important;
    box-shadow: var(--fl-ring);
}

.dataTables_wrapper .dataTables_info {
    padding-top: 16px !important;
    color: var(--fl-text-muted);
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_processing {
    top: 40% !important;
    height: auto !important;
    padding: 12px 16px !important;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    background: var(--fl-surface) !important;
    box-shadow: var(--fl-shadow-lg);
    color: var(--fl-text);
    font-weight: 500;
}

/* Pagination (DataTables + Laravel links) */
.pagination {
    gap: 4px;
    flex-wrap: wrap;
}

.page-link,
.pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm) !important;
    background: var(--fl-surface);
    color: var(--fl-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

.page-link:hover {
    background: var(--fl-surface-hover);
    color: var(--fl-text-strong);
    border-color: var(--fl-border-strong);
}

.page-link:focus {
    box-shadow: var(--fl-ring);
}

.page-item.active .page-link {
    background: var(--fl-primary);
    border-color: var(--fl-primary);
    color: var(--fl-on-accent);
}

.page-item.disabled .page-link {
    background: var(--fl-surface-muted);
    color: var(--fl-text-soft);
}

/* ======================================================================
   Badges & alerts
   ====================================================================== */
.badge {
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.35em 0.7em;
}

.badge.badge-success,
.badge.badge-outline-success {
    background: var(--fl-success-soft);
    color: var(--fl-success-hover);
    border: 1px solid var(--fl-success-border);
}

.badge.badge-danger,
.badge.badge-outline-danger {
    background: var(--fl-danger-soft);
    color: var(--fl-danger-hover);
    border: 1px solid var(--fl-danger-border);
}

.badge.badge-warning,
.badge.badge-outline-warning {
    background: var(--fl-warning-soft);
    color: var(--fl-warning-text);
    border: 1px solid var(--fl-warning-border);
}

.badge.badge-info,
.badge.badge-outline-info {
    background: var(--fl-info-soft);
    color: var(--fl-info-hover);
    border: 1px solid var(--fl-info-border);
}

.badge.badge-primary,
.badge.badge-outline-primary {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
    border: 1px solid var(--fl-primary-border);
}

.alert {
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    padding: 12px 16px;
}

.alert-success {
    background: var(--fl-success-soft);
    border-color: var(--fl-success-border);
    color: var(--fl-success-strong);
}

.alert-danger {
    background: var(--fl-danger-soft);
    border-color: var(--fl-danger-border);
    color: var(--fl-danger-strong);
}

.alert-warning {
    background: var(--fl-warning-soft);
    border-color: var(--fl-warning-border);
    color: var(--fl-warning-strong);
}

.alert-info {
    background: var(--fl-info-soft);
    border-color: var(--fl-info-border);
    color: var(--fl-info-strong);
}

.alert-primary {
    background: var(--fl-primary-soft);
    border-color: var(--fl-primary-border);
    color: var(--fl-primary-strong);
}

.alert .btn-close {
    padding: 14px 16px;
    font-size: 0.7rem;
}

/* ======================================================================
   Tabs, pills, dropdowns, modals
   ====================================================================== */
.nav-tabs {
    gap: 4px;
    border-bottom: 1px solid var(--fl-border);
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--fl-text-muted);
    font-weight: 500;
    font-size: 0.875rem;
}

.nav-tabs .nav-link:hover {
    color: var(--fl-text-strong);
    border-bottom-color: var(--fl-border);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--fl-primary-strong);
    background: transparent;
    border-bottom-color: var(--fl-primary);
}

/* style.css pushes every .tab-content 45px down */
.tab-content {
    margin-top: 1rem;
}

.nav-pills {
    gap: 4px;
}

.nav-pills .nav-link {
    border-radius: var(--fl-radius-sm);
    color: var(--fl-text-muted);
    font-weight: 500;
    font-size: 0.875rem;
}

.nav-pills .nav-link:hover {
    background: var(--fl-surface-hover);
    color: var(--fl-text-strong);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
}

.dropdown-menu {
    border: 1px solid var(--fl-border);
    border-radius: 10px;
    box-shadow: var(--fl-shadow-lg);
    padding: 6px;
    font-size: 0.875rem;
}

.dropdown-item,
.dropdown-menu .dropdown-item {
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--fl-text);
    font-size: 0.875rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--fl-surface-muted);
    color: var(--fl-text-strong);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
}

.dropdown-divider {
    border-top-color: var(--fl-border-soft);
    margin: 4px 0;
}

.modal-backdrop {
    background-color: var(--fl-backdrop);
}

.modal-backdrop.show {
    opacity: 0.4;
}

.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--fl-shadow-modal);
    overflow: hidden;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fl-border-soft);
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--fl-border-soft);
    background: var(--fl-surface-muted);
}

.list-group-item {
    border-color: var(--fl-border-soft);
}

.progress {
    height: 8px;
    border-radius: 999px;
    background: var(--fl-surface-hover);
}

/* SweetAlert2 dialogs */
.swal2-popup {
    border-radius: 16px !important;
    font-family: var(--fl-font) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--fl-primary) !important;
    border-radius: var(--fl-radius-sm) !important;
}

.swal2-styled.swal2-cancel {
    border-radius: var(--fl-radius-sm) !important;
}

/* ======================================================================
   Dashboard widgets (admin-home)
   ====================================================================== */
.fl-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fl-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.fl-kpi {
    display: flex;
    flex-direction: column;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    padding: 1rem 1.125rem;
}

.fl-kpi__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--fl-text-secondary);
}

.fl-kpi__label i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--fl-surface-muted);
    border: 1px solid var(--fl-border-soft);
    font-size: 0.95rem;
    color: var(--fl-text-muted);
}

.fl-kpi__value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    margin: 0.875rem 0 0.25rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.fl-kpi__hint {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--fl-text-soft);
}

.fl-kpi__hint strong {
    color: var(--fl-success);
    font-weight: 500;
}

/* Loyalty health row */
.fl-health {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.fl-health__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1rem 1.125rem;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
}

.fl-health__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.2rem;
}

.fl-health__icon--primary { background: var(--fl-primary-soft); color: var(--fl-primary); }
.fl-health__icon--warning { background: var(--fl-warning-soft); color: var(--fl-warning); }
.fl-health__icon--success { background: var(--fl-success-soft); color: var(--fl-success); }
.fl-health__icon--info { background: var(--fl-info-soft); color: var(--fl-info); }

.fl-health__label {
    display: block;
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

.fl-health__value {
    display: block;
    margin: 2px 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fl-text-strong);
    font-variant-numeric: tabular-nums;
}

.fl-health__hint {
    display: block;
    font-size: 0.72rem;
    color: var(--fl-text-soft);
}

.fl-health__link {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--fl-text-muted);
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fl-health__link:hover {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
}

/* Change vs previous period */
.fl-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
}

.fl-delta i {
    font-size: 0.85rem;
}

.fl-delta--up { color: var(--fl-success); }
.fl-delta--down { color: var(--fl-danger); }
.fl-delta--flat { color: var(--fl-text-soft); }

.fl-snapshot__item .fl-delta {
    display: flex;
}

.fl-snapshot__compare {
    margin: 0.5rem 0 0;
    font-size: 0.6875rem;
    color: var(--fl-text-soft);
}

/* Redemption rate bar */
.fl-redemption {
    margin-top: 0.875rem;
    padding: 0.625rem;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
}

.fl-redemption__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--fl-text-muted);
}

.fl-redemption__head b {
    font-size: 0.875rem;
    color: var(--fl-text-strong);
}

.fl-redemption__bar {
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--fl-surface-hover);
    overflow: hidden;
}

.fl-redemption__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--fl-info), var(--fl-primary));
    transition: width 0.3s ease;
}

/* Top members */
.fl-leaderboard {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fl-leaderboard li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.55rem 0;
}

.fl-leaderboard li + li {
    border-top: 1px dashed var(--fl-border);
}

.fl-leaderboard__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--fl-surface-hover);
    color: var(--fl-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.fl-leaderboard li:first-child .fl-leaderboard__rank {
    background: var(--fl-gold-soft);
    color: var(--fl-warning-text);
}

.fl-leaderboard__body {
    flex: 1;
    min-width: 0;
}

.fl-leaderboard__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    text-decoration: none;
}

a.fl-leaderboard__name:hover {
    color: var(--fl-primary-text);
}

.fl-leaderboard__meta {
    display: block;
    font-size: 0.72rem;
    color: var(--fl-text-soft);
}

.fl-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.fl-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fl-panel {
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    padding: 1.125rem;
}

.fl-panel__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    margin: 0;
}

.fl-panel__subtitle {
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
    margin: 0.25rem 0 1rem;
}

.fl-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.fl-action {
    display: block;
    border: 1px solid;
    border-radius: var(--fl-radius);
    padding: 1rem;
    min-height: 118px;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fl-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06);
}

.fl-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--fl-action-icon-bg);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.fl-action__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fl-text-strong);
}

.fl-action__desc {
    display: block;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-action--blue { background: var(--fl-info-soft); border-color: var(--fl-info-border); }
.fl-action--blue .fl-action__icon { color: var(--fl-info); }
.fl-action--purple { background: var(--fl-primary-soft); border-color: var(--fl-primary-border); }
.fl-action--purple .fl-action__icon { color: var(--fl-primary); }
.fl-action--green { background: var(--fl-success-soft); border-color: var(--fl-success-border); }
.fl-action--green .fl-action__icon { color: var(--fl-success); }
.fl-action--amber { background: var(--fl-warning-soft); border-color: var(--fl-warning-border); }
.fl-action--amber .fl-action__icon { color: var(--fl-warning); }

.fl-performance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 0.75rem;
}

.fl-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.fl-panel__head .fl-panel__subtitle {
    margin-bottom: 0;
}

/* Segmented control (e.g. Weekly / Monthly / Yearly) */
.fl-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--fl-border);
    border-radius: 10px;
    background: var(--fl-surface-muted);
}

.fl-segmented__btn {
    padding: 5px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--fl-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

a.fl-segmented__btn {
    display: inline-block;
    text-decoration: none !important;
}

.fl-segmented__btn:hover {
    color: var(--fl-text-strong);
}

.fl-segmented__btn.is-active {
    background: var(--fl-surface);
    color: var(--fl-primary-strong);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.fl-segmented__btn:focus-visible {
    outline: none;
    box-shadow: var(--fl-ring);
}

.fl-performance {
    transition: opacity 0.2s ease;
}

.fl-performance.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.fl-chart-box {
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    padding: 0.875rem;
}

.fl-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
    margin-bottom: 0.5rem;
}

.fl-legend__item {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.fl-legend__item[aria-pressed="false"] {
    opacity: 0.45;
    text-decoration: line-through;
}

.fl-legend__item::before,
.fl-legend span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-inline-end: 6px;
    vertical-align: -1px;
    background: var(--dot);
}

.fl-chart-canvas {
    position: relative;
    height: 240px;
}

.fl-snapshot {
    background: var(--fl-surface-muted);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    padding: 0.875rem;
}

.fl-snapshot h6 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.fl-snapshot__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.fl-snapshot__item {
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    padding: 0.625rem;
}

.fl-snapshot__item small {
    display: block;
    font-size: 0.6875rem;
    color: var(--fl-text-muted);
    margin-bottom: 0.5rem;
}

.fl-snapshot__item b {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    font-variant-numeric: tabular-nums;
}

.fl-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fl-feed li {
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem 0;
}

.fl-feed li + li {
    border-top: 1px dashed var(--fl-border);
}

.fl-feed__avatar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.fl-feed__avatar--earn { background: var(--fl-success-soft); color: var(--fl-success); }
.fl-feed__avatar--spend { background: var(--fl-primary-soft); color: var(--fl-primary); }

.fl-feed__body {
    flex: 1;
    min-width: 0;
}

.fl-feed__title {
    font-size: 0.8125rem;
    color: var(--fl-text);
    margin: 0;
}

.fl-feed__meta {
    font-size: 0.75rem;
    color: var(--fl-text-soft);
    margin: 0.125rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fl-feed__time {
    font-size: 0.6875rem;
    color: var(--fl-text-soft);
    white-space: nowrap;
}

.fl-notice {
    border: 1px solid var(--fl-warning-border);
    background: var(--fl-warning-soft);
    border-radius: var(--fl-radius);
    padding: 0.875rem;
}

.fl-notice--danger {
    border-color: var(--fl-danger-border);
    background: var(--fl-danger-soft);
}

.fl-notice--success {
    border-color: var(--fl-success-border);
    background: var(--fl-success-soft);
}

.fl-notice__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fl-text-strong);
}

.fl-notice__tag {
    font-size: 0.6875rem;
    color: var(--fl-warning);
}

.fl-notice--danger .fl-notice__tag { color: var(--fl-danger); }
.fl-notice--success .fl-notice__tag { color: var(--fl-success); }

.fl-notice p {
    font-size: 0.75rem;
    color: var(--fl-text-muted);
    margin: 0.375rem 0 0.75rem;
}

.fl-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fl-on-accent) !important;
    background: var(--fl-warning);
    text-decoration: none !important;
}

.fl-empty {
    font-size: 0.8125rem;
    color: var(--fl-text-soft);
    text-align: center;
    padding: 1.5rem 0;
}

/* ======================================================================
   Page kit: building blocks for inner pages
   (components: x-admin.card, x-admin.form-section, x-admin.stat, x-admin.empty-state;
    PHP: App\Helpers\AdminUi for DataTables cells)
   ====================================================================== */
.fl-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fl-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.fl-page-grid--sidebar {
    grid-template-columns: 280px minmax(0, 1fr);
}

/* Card */
.fl-card {
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-lg);
    box-shadow: var(--fl-shadow-xs);
    min-width: 0;
}

.fl-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fl-border-soft);
}

.fl-card__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.fl-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--fl-primary-soft);
    color: var(--fl-primary-text);
    font-size: 1.15rem;
}

.fl-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.fl-card__subtitle {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

.fl-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fl-card__actions > .btn,
.fl-card__actions .btn.mb-3 {
    margin: 0 !important;
}

.fl-card__body {
    padding: 1.25rem;
}

.fl-card__body--flush {
    padding: 0;
}

.fl-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--fl-border-soft);
    background: var(--fl-surface-muted);
    border-radius: 0 0 var(--fl-radius-lg) var(--fl-radius-lg);
}

/* Toolbar row (bulk actions, filters, secondary controls) */
.fl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1rem;
}

.fl-toolbar__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fl-toolbar .bulk-delete-wrapper {
    margin: 0 !important;
}

/* Chips: soft pills for values/statuses inside tables and details */
.fl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fl-chip i {
    font-size: 0.85rem;
}

.fl-chip--neutral { background: var(--fl-surface-hover); border-color: var(--fl-border); color: var(--fl-text-secondary); }
.fl-chip--primary { background: var(--fl-primary-soft); border-color: var(--fl-primary-border); color: var(--fl-primary-strong); }
.fl-chip--success { background: var(--fl-success-soft); border-color: var(--fl-success-border); color: var(--fl-success-hover); }
.fl-chip--danger { background: var(--fl-danger-soft); border-color: var(--fl-danger-border); color: var(--fl-danger-hover); }
.fl-chip--warning { background: var(--fl-warning-soft); border-color: var(--fl-warning-border); color: var(--fl-warning-text); }
.fl-chip--info { background: var(--fl-info-soft); border-color: var(--fl-info-border); color: var(--fl-info-hover); }

/* Clickable chips (e.g. template variables, report filters) */
button.fl-chip,
a.fl-chip,
.fl-chip[role="button"] {
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

button.fl-chip:hover,
a.fl-chip:hover,
.fl-chip[role="button"]:hover {
    filter: brightness(0.96);
    box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.10);
}

button.fl-chip:focus-visible,
a.fl-chip:focus-visible,
.fl-chip[role="button"]:focus-visible {
    outline: none;
    box-shadow: var(--fl-ring);
}

/* Bootstrap accordion (send-message modals, FAQs) */
.accordion-item {
    border: 1px solid var(--fl-border);
    background: var(--fl-surface);
}

.accordion-item:first-of-type {
    border-top-left-radius: var(--fl-radius);
    border-top-right-radius: var(--fl-radius);
}

.accordion-item:last-of-type {
    border-bottom-left-radius: var(--fl-radius);
    border-bottom-right-radius: var(--fl-radius);
}

.accordion-button {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fl-text-strong);
    background: var(--fl-surface);
    padding: 0.85rem 1rem;
}

.accordion-button:not(.collapsed) {
    color: var(--fl-primary-strong);
    background: var(--fl-primary-soft);
    box-shadow: inset 0 -1px 0 var(--fl-border-soft);
}

.accordion-button:focus {
    border-color: var(--fl-primary);
    box-shadow: var(--fl-ring);
}

.accordion-body {
    font-size: 0.875rem;
}

/* Icon buttons: row actions */
.fl-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.fl-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--fl-border);
    border-radius: 8px;
    background: var(--fl-surface);
    color: var(--fl-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fl-icon-btn:hover {
    background: var(--fl-surface-hover);
    color: var(--fl-text-strong);
}

.fl-icon-btn:disabled,
.fl-icon-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fl-icon-btn--primary { background: var(--fl-primary-soft); border-color: var(--fl-primary-border); color: var(--fl-primary-strong); }
.fl-icon-btn--primary:hover { background: var(--fl-primary); border-color: var(--fl-primary); color: var(--fl-on-accent); }
.fl-icon-btn--success { background: var(--fl-success-soft); border-color: var(--fl-success-border); color: var(--fl-success-hover); }
.fl-icon-btn--success:hover { background: var(--fl-success); border-color: var(--fl-success); color: var(--fl-on-accent); }
.fl-icon-btn--danger { background: var(--fl-danger-soft); border-color: var(--fl-danger-border); color: var(--fl-danger-hover); }
.fl-icon-btn--danger:hover { background: var(--fl-danger); border-color: var(--fl-danger); color: var(--fl-on-accent); }
.fl-icon-btn--warning { background: var(--fl-warning-soft); border-color: var(--fl-warning-border); color: var(--fl-warning-text); }
.fl-icon-btn--warning:hover { background: var(--fl-warning); border-color: var(--fl-warning); color: var(--fl-on-accent); }
.fl-icon-btn--info { background: var(--fl-info-soft); border-color: var(--fl-info-border); color: var(--fl-info-hover); }
.fl-icon-btn--info:hover { background: var(--fl-info); border-color: var(--fl-info); color: var(--fl-on-accent); }

/* Stats (x-admin.stat) */
.fl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.fl-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
}

.fl-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.2rem;
    background: var(--fl-primary-soft);
    color: var(--fl-primary-text);
}

.fl-stat--success .fl-stat__icon { background: var(--fl-success-soft); color: var(--fl-success); }
.fl-stat--danger .fl-stat__icon { background: var(--fl-danger-soft); color: var(--fl-danger); }
.fl-stat--warning .fl-stat__icon { background: var(--fl-warning-soft); color: var(--fl-warning); }
.fl-stat--info .fl-stat__icon { background: var(--fl-info-soft); color: var(--fl-info); }
.fl-stat--neutral .fl-stat__icon { background: var(--fl-surface-hover); color: var(--fl-text-muted); }

.fl-stat__label {
    display: block;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-stat__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.fl-stat__hint {
    display: block;
    font-size: 0.72rem;
    color: var(--fl-text-soft);
}

/* Key/value details */
.fl-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    margin: 0;
    border: 1px solid var(--fl-border-soft);
    border-radius: var(--fl-radius);
    overflow: hidden;
}

.fl-details__item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--fl-border-soft);
    border-inline-end: 1px solid var(--fl-border-soft);
    margin: 0;
}

.fl-details dt,
.fl-details__label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--fl-text-muted);
    margin-bottom: 4px;
}

.fl-details dd,
.fl-details__value {
    margin: 0;
    font-size: 0.875rem;
    color: var(--fl-text-strong);
    word-break: break-word;
}

/* Form sections (x-admin.form-section) */
.fl-form-section {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--fl-border-soft);
}

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

.fl-form-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fl-form-section__title {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.fl-form-section__desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

.fl-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.fl-form-grid > .fl-span-2 {
    grid-column: 1 / -1;
}

.fl-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--fl-border-soft);
}

/* Empty state (x-admin.empty-state) */
.fl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 2.5rem 1rem;
    color: var(--fl-text-muted);
}

.fl-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: var(--fl-surface-hover);
    color: var(--fl-text-soft);
    font-size: 1.5rem;
}

.fl-empty-state__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.fl-empty-state__text {
    margin: 0;
    font-size: 0.8125rem;
}

/* Avatar with initials */
.fl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
    font-weight: 600;
}

.fl-avatar--lg {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.25rem;
}

/* Dropdown menu with grouped actions (x-admin.send-messages-dropdown) */
.fl-menu-group-title {
    padding: 8px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fl-text-soft);
}

.dropdown-menu .dropdown-item i.mdi {
    margin-inline-end: 8px;
    color: var(--fl-text-soft);
}

/* Provider picker (SMS / WhatsApp providers pages): cards that act as the provider tabs */
.fl-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.fl-provider-grid .fl-provider-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    background: var(--fl-surface);
    color: var(--fl-text);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.fl-provider-grid .fl-provider-card:hover {
    border-color: var(--fl-primary-border);
    background: var(--fl-surface-muted);
    color: var(--fl-text-strong);
}

.fl-provider-grid .fl-provider-card.active {
    border-color: var(--fl-primary);
    background: var(--fl-primary-soft);
    box-shadow: var(--fl-ring);
}

.fl-provider-grid .fl-provider-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
    font-size: 1.25rem;
}

.fl-provider-grid .fl-provider-card.active .fl-provider-card__icon {
    background: var(--fl-primary);
    color: var(--fl-on-accent);
}

.fl-provider-grid .fl-provider-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.fl-provider-grid .fl-provider-card__name {
    font-weight: 600;
    color: var(--fl-text-strong);
}

.fl-provider-grid .fl-provider-card__action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fl-text-muted);
    white-space: nowrap;
}

.fl-provider-grid .fl-provider-card.active .fl-provider-card__action {
    color: var(--fl-primary-strong);
}

/* Roles page: note about hidden permissions of unused modules */
.fl-perm-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

/* Upload drop zone look for plain file inputs */
.fl-upload {
    padding: 1.25rem;
    border: 1px dashed var(--fl-border-strong);
    border-radius: var(--fl-radius);
    background: var(--fl-surface-muted);
}

/* Filters: hide the "Applied filters" row until a filter is applied */
.applied-filters-container:has(#appliedFilterTags:empty) {
    display: none;
}

.filter-container {
    padding: 0 0 1rem !important;
}

@media (max-width: 1199px) {
    .fl-page-grid,
    .fl-page-grid--sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .fl-form-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .fl-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ======================================================================
   RTL (rtl.css loads after this file, so these need the extra [dir] weight)
   ====================================================================== */
/* Directional icons (chevrons/arrows) that should point the other way in RTL */
[dir="rtl"] .fl-flip-rtl {
    display: inline-block;
    transform: scaleX(-1);
}

[dir="rtl"] .sidebar-offcanvas > .nav {
    padding: 8px 12px 16px;
}

[dir="rtl"] .sidebar .nav.sub-menu {
    padding-right: 12px;
    padding-left: 0;
}

[dir="rtl"] .sidebar .nav .nav-item .nav-link i.menu-arrow {
    transform: none;
}

[dir="rtl"] .sidebar .nav .nav-item .nav-link i.menu-icon {
    margin: 0 !important;
}

.page-header .breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-inline-start: 0.5rem;
}

.page-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    float: none;
    display: inline-block;
    padding-right: 0;
    padding-inline-end: 0.5rem;
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1199px) {
    .fl-grid,
    .fl-performance {
        grid-template-columns: minmax(0, 1fr);
    }

    .fl-kpis,
    .fl-health {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .sidebar-offcanvas {
        box-shadow: var(--fl-shadow-lg);
    }
}

@media (max-width: 767px) {
    .content-wrapper {
        padding: 1rem;
    }

    .card .card-body {
        padding: 1rem;
    }

    .fl-kpis,
    .fl-health {
        grid-template-columns: minmax(0, 1fr);
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }
}

/* ======================================================================
   Performance pages (scorecard, impact, points liability)
   ====================================================================== */
.fl-perf-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 1rem;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    background: var(--fl-surface);
}

.fl-perf-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--fl-radius-sm);
    color: var(--fl-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fl-perf-tabs__item .mdi {
    font-size: 1.05rem;
}

.fl-perf-tabs__item:hover {
    background: var(--fl-surface-hover);
    color: var(--fl-text-strong);
}

.fl-perf-tabs__item.is-active {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-text);
}

.fl-perf-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.75rem;
    margin-bottom: 1rem;
}

.fl-perf-filters .fl-segmented {
    flex-wrap: wrap;
}

.fl-perf-filters__custom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.fl-perf-filters__custom.d-none {
    display: none !important;
}

.fl-perf-filters__field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-perf-filters__field .form-control,
.fl-perf-filters__field .form-select {
    min-width: 140px;
}

.fl-perf-filters__channel .form-select {
    min-width: 190px;
}

.fl-perf-filters__range {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-inline-start: auto;
    font-size: 0.8125rem;
    color: var(--fl-text);
}

.fl-perf-filters__range .mdi {
    color: var(--fl-text-soft);
}

.fl-perf-filters__compare {
    color: var(--fl-text-soft);
    font-size: 0.75rem;
}

.fl-stat__change {
    display: block;
    margin-top: 2px;
}

.fl-stat__change .fl-delta {
    font-size: 0.72rem;
}

.fl-perf-kpis {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.fl-perf-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.fl-perf-grid--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fl-perf-grid > .fl-card {
    margin-bottom: 0;
}

.fl-perf-chart {
    position: relative;
    height: 300px;
}

.fl-perf-chart--sm {
    height: 240px;
}

.fl-perf-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.875rem 0 0;
    font-size: 0.8125rem;
    color: var(--fl-text-muted);
}

.fl-perf-note .mdi {
    color: var(--fl-info);
    line-height: 1.35;
}

.fl-perf-notes {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fl-perf-notes .fl-perf-note {
    margin: 0;
}

/* Funnel */
.fl-funnel {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fl-funnel__step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.fl-funnel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--fl-primary-soft);
    color: var(--fl-primary-text);
    font-size: 1rem;
}

.fl-funnel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 0.8125rem;
}

.fl-funnel__label {
    color: var(--fl-text-strong);
    font-weight: 500;
}

.fl-funnel__count {
    color: var(--fl-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fl-funnel__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--fl-surface-muted);
    overflow: hidden;
}

.fl-funnel__bar span {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: var(--fl-primary);
}

.fl-funnel__step--last .fl-funnel__bar span {
    background: var(--fl-success);
}

.fl-funnel__rate {
    min-width: 88px;
    font-size: 0.72rem;
    color: var(--fl-text-soft);
    text-align: end;
    line-height: 1.35;
}

.fl-funnel__rate b {
    display: block;
    font-size: 0.8125rem;
    color: var(--fl-text-strong);
    font-weight: 600;
}

/* Side by side comparison */
.fl-compare {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.fl-compare th,
.fl-compare td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--fl-border-soft);
    vertical-align: middle;
}

.fl-compare thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fl-text-muted);
    background: var(--fl-surface-muted);
    white-space: nowrap;
}

.fl-compare thead th:first-child {
    border-start-start-radius: var(--fl-radius-sm);
}

.fl-compare thead th:last-child {
    border-start-end-radius: var(--fl-radius-sm);
}

.fl-compare tbody th {
    font-weight: 500;
    color: var(--fl-text);
}

.fl-compare .is-num {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--fl-text-strong);
}

.fl-compare .is-highlight {
    background: var(--fl-primary-soft);
}

.fl-compare tbody tr:last-child th,
.fl-compare tbody tr:last-child td {
    border-bottom: 0;
}

/* Before / after */
.fl-before-after {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.fl-before-after__side {
    padding: 14px;
    border: 1px solid var(--fl-border-soft);
    border-radius: var(--fl-radius);
    background: var(--fl-surface-muted);
    text-align: center;
}

.fl-before-after__side--after {
    border-color: var(--fl-primary-border);
    background: var(--fl-primary-soft);
}

.fl-before-after__label {
    display: block;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-before-after__value {
    display: block;
    margin: 4px 0 2px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--fl-text-strong);
    font-variant-numeric: tabular-nums;
}

.fl-before-after__hint {
    display: block;
    font-size: 0.72rem;
    color: var(--fl-text-soft);
}

.fl-before-after__arrow {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--fl-text-soft);
    font-size: 1.4rem;
}

[dir="rtl"] .fl-before-after__arrow .mdi {
    transform: scaleX(-1);
}

/* Opportunity callout */
.fl-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 1rem;
    border: 1px solid var(--fl-warning-border);
    border-radius: var(--fl-radius);
    background: var(--fl-warning-soft);
}

.fl-callout--info {
    border-color: var(--fl-info-border);
    background: var(--fl-info-soft);
}

.fl-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--fl-surface);
    color: var(--fl-warning);
    font-size: 1.25rem;
}

.fl-callout--info .fl-callout__icon {
    color: var(--fl-info);
}

.fl-callout__body {
    flex: 1;
    min-width: 220px;
}

.fl-callout__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.fl-callout__text {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--fl-text);
}

.fl-callout__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Share bar (e.g. identified sales) */
.fl-share {
    display: flex;
    height: 10px;
    margin: 10px 0 6px;
    border-radius: 999px;
    background: var(--fl-surface-muted);
    overflow: hidden;
}

.fl-share span {
    display: block;
    height: 100%;
}

.fl-share__primary {
    background: var(--fl-primary);
}

.fl-share__muted {
    background: var(--fl-text-soft);
    opacity: 0.45;
}

.fl-share-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-share-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: 6px;
    border-radius: 50%;
    vertical-align: middle;
}

.fl-perf-bands .is-muted th,
.fl-perf-bands .is-muted td {
    color: var(--fl-text-soft);
}

@media (max-width: 1199.98px) {
    .fl-perf-grid,
    .fl-perf-grid--even {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .fl-perf-filters__range {
        margin-inline-start: 0;
    }

    .fl-perf-filters__field,
    .fl-perf-filters__field .form-control,
    .fl-perf-filters__field .form-select {
        width: 100%;
        min-width: 0;
    }

    .fl-before-after {
        grid-template-columns: minmax(0, 1fr);
    }

    .fl-before-after__arrow {
        transform: rotate(90deg);
    }

    .fl-funnel__rate {
        min-width: 64px;
    }
}

/* ======================================================================
   Campaigns (list, form, campaign page)
   ====================================================================== */
.fl-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.fl-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    background: var(--fl-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.fl-choice:hover {
    border-color: var(--fl-border-strong);
}

.fl-choice.is-selected {
    border-color: var(--fl-primary);
    background: var(--fl-primary-soft);
    box-shadow: 0 0 0 1px var(--fl-primary) inset;
}

.fl-choice__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fl-choice:focus-within {
    box-shadow: var(--fl-ring);
}

.fl-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--fl-surface-muted);
    color: var(--fl-text-muted);
    font-size: 1.05rem;
}

.fl-choice.is-selected .fl-choice__icon {
    background: var(--fl-surface);
    color: var(--fl-primary-text);
}

.fl-choice__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fl-choice__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.fl-choice__text {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--fl-text-muted);
}

.fl-audience-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding: 12px 14px;
    border: 1px dashed var(--fl-border-strong);
    border-radius: var(--fl-radius);
}

.fl-audience-fields.d-none {
    display: none !important;
}

.fl-audience-fields__field {
    min-width: 200px;
}

.fl-audience-fields__field .form-label {
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-reach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    margin-top: 1rem;
    padding: 12px 14px;
    border-radius: var(--fl-radius);
    background: var(--fl-surface-muted);
    transition: opacity 0.2s ease;
}

.fl-reach.is-loading {
    opacity: 0.55;
}

.fl-reach__main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fl-reach__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--fl-success-soft);
    color: var(--fl-success);
    font-size: 1.2rem;
}

.fl-reach__label,
.fl-reach__hint {
    display: block;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-reach__value {
    display: block;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--fl-text-strong);
    font-variant-numeric: tabular-nums;
}

.fl-reach__reasons {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: var(--fl-text-muted);
}

.fl-reach__reasons li::before {
    content: "•";
    margin-inline-end: 6px;
    color: var(--fl-warning);
}

.fl-reach__reasons li.is-info::before {
    color: var(--fl-info);
}

.fl-channel-panel.d-none,
.fl-variables.d-none {
    display: none !important;
}

.fl-variables {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 0.25rem;
}

.fl-variables__label {
    margin-inline-end: 4px;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-variables .fl-chip {
    border: 0;
    cursor: pointer;
}

.fl-variables .fl-chip:hover {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-text);
}

.fl-counter {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--fl-text-soft);
}

.fl-message-preview {
    padding: 12px 14px;
    border: 1px solid var(--fl-border-soft);
    border-radius: var(--fl-radius);
    background: var(--fl-surface-muted);
}

.fl-message-preview__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--fl-text-muted);
}

.fl-message-preview__body {
    margin: 0;
    font-size: 0.875rem;
    color: var(--fl-text);
    white-space: pre-line;
    word-break: break-word;
}

.fl-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--fl-surface-muted);
    overflow: hidden;
}

.fl-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fl-primary);
    transition: width 0.4s ease;
}

.fl-progress__legend {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-lift {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 16px;
    border: 1px solid var(--fl-primary-border);
    border-radius: var(--fl-radius);
    background: var(--fl-primary-soft);
    text-align: center;
}

.fl-lift__label,
.fl-lift__hint {
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-lift__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.fl-lift__value.is-up {
    color: var(--fl-success);
}

.fl-lift__value.is-down {
    color: var(--fl-danger);
}

.fl-lift__extra {
    margin-top: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fl-text-strong);
}

.fl-quick-starts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.fl-quick-start {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--fl-border);
    border-radius: 999px;
    background: var(--fl-surface);
    color: var(--fl-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none !important;
}

.fl-quick-start:hover {
    border-color: var(--fl-primary);
    color: var(--fl-primary-text);
}

.fl-quick-start .mdi {
    color: var(--fl-primary);
}

.fl-callout--danger {
    border-color: var(--fl-danger-border);
    background: var(--fl-danger-soft);
}

.fl-callout--danger .fl-callout__icon {
    color: var(--fl-danger);
}

.fl-recipients-filter {
    width: auto;
    min-width: 170px;
}

.fl-campaign-table td {
    vertical-align: middle;
}

.fl-campaign-table .fl-row-actions form {
    margin: 0;
}

.fl-card__actions form {
    margin: 0;
}

.fl-segmented label.fl-segmented__btn {
    margin: 0;
}

.fl-segmented .fl-segmented__btn:focus-within {
    box-shadow: var(--fl-ring);
}

@media (max-width: 575.98px) {
    .fl-audience-fields__field {
        min-width: 0;
        width: 100%;
    }
}

/* Automations */
.fl-choice--link {
    text-decoration: none !important;
    color: inherit;
}

.fl-choice--link:hover {
    border-color: var(--fl-primary);
    background: var(--fl-primary-soft);
}

.fl-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fl-text-muted);
}

/* Access tokens */
.fl-token-secret {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    background: var(--fl-surface);
    color: var(--fl-text-strong);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    word-break: break-all;
    direction: ltr;
    text-align: left;
    user-select: all;
}

.fl-token-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.fl-code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    direction: ltr;
    unicode-bidi: isolate;
    word-break: break-all;
}

.fl-scope-table th,
.fl-scope-table td {
    vertical-align: middle;
}

.fl-scope-table .fl-scope-table__check {
    width: 110px;
    text-align: center;
}

.fl-scope-table .form-check-input {
    float: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
}

.fl-scope-table__area {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fl-scope-table__area > .mdi {
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--fl-primary);
}

.fl-scope-table__hint {
    display: block;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
}

.fl-scope-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ======================================================================
   Dark mode
   partials/theme-boot sets <html data-theme="light|dark"> before this file loads
   (Light / Dark / System, saved per browser by the topbar toggle).
   Dark = the palette below + fixes for the Purple Admin / Bootstrap / plugin
   styles that hard-code light colors. Two prefixes are used:
   - :where(html[data-theme="dark"]) X  same specificity as X: wins over style.css and the
     plugin CSS loaded before this file, loses to the more specific theme rules;
   - html[data-theme="dark"] X          one class + one tag more: wins over the CSS loaded
     after this file (DataTables, SweetAlert, summernote, page <style> blocks).
   ====================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;

    --fl-bg: #0f1117;
    --fl-surface: #171a23;
    --fl-surface-muted: #1d212c;
    --fl-surface-hover: #232836;
    --fl-border: #2a2f3b;
    --fl-border-soft: #222631;
    --fl-border-strong: #3a4150;
    --fl-text: #e5e7eb;
    --fl-text-strong: #f3f4f6;
    --fl-text-secondary: #d1d5db;
    --fl-text-subtle: #b8bec9;
    --fl-text-muted: #9ca3af;
    --fl-text-soft: #7d8595;
    --fl-on-accent: #fff;

    --fl-primary: #7466ff;
    --fl-primary-hover: #b8afff;
    --fl-primary-strong: #b8afff;
    --fl-primary-text: #a497ff;
    --fl-primary-soft: rgba(116, 102, 255, 0.16);
    --fl-primary-border: rgba(139, 127, 255, 0.36);

    --fl-success: #16a34a;
    --fl-success-hover: #4ade80;
    --fl-success-strong: #86efac;
    --fl-success-soft: rgba(34, 197, 94, 0.12);
    --fl-success-border: rgba(34, 197, 94, 0.3);
    --fl-info: #0ea5e9;
    --fl-info-hover: #38bdf8;
    --fl-info-strong: #7dd3fc;
    --fl-info-soft: rgba(14, 165, 233, 0.12);
    --fl-info-border: rgba(56, 189, 248, 0.3);
    --fl-warning: #f59e0b;
    --fl-warning-hover: #fbbf24;
    --fl-warning-text: #fbbf24;
    --fl-warning-strong: #fcd34d;
    --fl-warning-soft: rgba(245, 158, 11, 0.12);
    --fl-warning-border: rgba(251, 191, 36, 0.3);
    --fl-danger: #f43f5e;
    --fl-danger-hover: #fb7185;
    --fl-danger-strong: #fda4af;
    --fl-danger-soft: rgba(244, 63, 94, 0.12);
    --fl-danger-border: rgba(251, 113, 133, 0.32);

    --fl-primary-fill-hover: #6454f5;
    --fl-success-fill-hover: #15803d;
    --fl-info-fill-hover: #0284c7;
    --fl-warning-fill-hover: #d97706;
    --fl-danger-fill-hover: #e11d48;

    --fl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --fl-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --fl-shadow-modal: 0 24px 56px rgba(0, 0, 0, 0.6);
    --fl-ring: 0 0 0 3px rgba(139, 127, 255, 0.3);

    --fl-scrollbar: #3a4150;
    --fl-backdrop: #000;
    --fl-table-stripe: rgba(255, 255, 255, 0.02);
    --fl-table-hover: rgba(139, 127, 255, 0.07);
    --fl-switch-bg: #2f3542;
    --fl-switch-border: #3a4150;
    --fl-gold-soft: rgba(245, 158, 11, 0.18);
    --fl-plan-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.05));
    --fl-plan-icon-bg: rgba(245, 158, 11, 0.16);
    --fl-action-icon-bg: rgba(255, 255, 255, 0.06);
    --fl-chart-earn: #22c55e;
    --fl-chart-earn-fill: rgba(34, 197, 94, 0.16);
    --fl-chart-spend: #38bdf8;

    /* Bootstrap 5.1 */
    --bs-body-bg: var(--fl-bg);
    --bs-body-color: var(--fl-text);
}

/* Switching themes: no staggered colour transitions (class set for a frame by theme-boot) */
html.fl-theme-switching *,
html.fl-theme-switching *::before,
html.fl-theme-switching *::after {
    transition: none !important;
}

/* ---------- Base ---------- */
:where(html[data-theme="dark"]) body {
    background: var(--fl-bg);
    color: var(--fl-text);
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .main-panel,
html[data-theme="dark"] .page-body-wrapper,
html[data-theme="dark"] .container-scroller {
    background: var(--fl-bg);
}

html[data-theme="dark"] hr {
    border-color: var(--fl-border);
    opacity: 1;
}

html[data-theme="dark"] mark,
html[data-theme="dark"] .mark {
    background: rgba(245, 158, 11, 0.25);
    color: inherit;
}

html[data-theme="dark"] .page-title,
html[data-theme="dark"] .breadcrumb .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .breadcrumb {
    border-color: var(--fl-border);
}

html[data-theme="dark"] code {
    color: #f472b6;
}

html[data-theme="dark"] kbd {
    background: var(--fl-surface-hover);
    color: var(--fl-text);
}

html[data-theme="dark"] .img-thumbnail {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
}

/* Utilities that hard-code light surfaces or dark text */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body {
    background-color: var(--fl-surface) !important;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-gray-light,
html[data-theme="dark"] .bg-secondary.bg-opacity-10 {
    background-color: var(--fl-surface-muted) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body {
    color: var(--fl-text-strong) !important;
}

html[data-theme="dark"] .text-black-50 {
    color: var(--fl-text-muted) !important;
}

html[data-theme="dark"] .text-gray {
    color: var(--fl-text-muted) !important;
}

html[data-theme="dark"] .text-primary {
    color: var(--fl-primary-text) !important;
}

html[data-theme="dark"] .text-success {
    color: var(--fl-success-hover) !important;
}

html[data-theme="dark"] .text-danger {
    color: var(--fl-danger-hover) !important;
}

html[data-theme="dark"] .text-info {
    color: var(--fl-info-hover) !important;
}

html[data-theme="dark"] .text-warning {
    color: var(--fl-warning-hover) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-light {
    border-color: var(--fl-border) !important;
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm {
    box-shadow: var(--fl-shadow-xs) !important;
}

html[data-theme="dark"] .shadow-lg {
    box-shadow: var(--fl-shadow-lg) !important;
}

/* ---------- Topbar ---------- */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.default-layout-navbar,
html[data-theme="dark"] .navbar .navbar-brand-wrapper {
    background: var(--fl-surface);
}

html[data-theme="dark"] .navbar .navbar-brand-wrapper .navbar-brand {
    color: var(--fl-text-strong);
}

/* The tenant logo is dark on transparent: give it a light plate so it stays readable */
html[data-theme="dark"] .navbar .navbar-brand-wrapper .navbar-brand img,
html[data-theme="dark"] .fl-auth__brand img {
    padding: 4px 10px;
    border-radius: 8px;
    background: #f3f4f6;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini img {
    padding: 3px;
}

html[data-theme="dark"] .navbar .navbar-menu-wrapper .count-indicator .count-symbol,
html[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-img .availability-status {
    border-color: var(--fl-surface);
}

html[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-toggler,
html[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-toggler .mdi {
    color: var(--fl-text);
}

html[data-theme="dark"] .navbar .navbar-dropdown,
html[data-theme="dark"] .dropdown-menu.navbar-dropdown {
    background: var(--fl-surface);
}

html[data-theme="dark"] li.nav-item.nav-profile.dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .navbar .navbar-dropdown .dropdown-item.preview-item .preview-thumbnail .preview-icon i {
    color: var(--fl-on-accent);
}

/* Language switcher (partials/topbar-language, its <style> is pushed after this file) */
html[data-theme="dark"] .navbar .navbar-dropdown .dropdown-item.topbar-language__item.is-active,
html[data-theme="dark"] .navbar .navbar-dropdown .dropdown-item.topbar-language__item .mdi {
    color: var(--fl-primary-text);
}

/* ---------- Sidebar ---------- */
html[data-theme="dark"] .sidebar .nav .nav-item .nav-link .menu-title {
    color: inherit;
}

html[data-theme="dark"] .sidebar-plan__text small {
    color: var(--fl-warning-text);
}

/* ---------- Lists, accordions ---------- */
:where(html[data-theme="dark"]) .list-group-item {
    background-color: var(--fl-surface);
    border-color: var(--fl-border-soft);
    color: var(--fl-text);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--fl-surface-hover);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .list-group-item.active {
    background-color: var(--fl-primary-soft);
    border-color: var(--fl-primary-border);
    color: var(--fl-primary-strong);
}

html[data-theme="dark"] .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ca3af'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b8afff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ---------- Buttons ---------- */
/* Plain .btn (no colour variant): style.css paints it #343a40 */
:where(html[data-theme="dark"]) .btn:where(:not([class*="btn-primary"], [class*="btn-success"], [class*="btn-info"], [class*="btn-warning"], [class*="btn-danger"], [class*="btn-dark"], [class*="btn-outline"], [class*="btn-link"], [class*="btn-gradient"], .filter-toggle, .btn-apply)),
:where(html[data-theme="dark"]) .btn:where(:not([class*="btn-primary"], [class*="btn-success"], [class*="btn-info"], [class*="btn-warning"], [class*="btn-danger"], [class*="btn-dark"], [class*="btn-outline"], [class*="btn-link"], [class*="btn-gradient"], .filter-toggle, .btn-apply)):hover {
    color: var(--fl-text);
}

/* style.css paints the pressed / disabled states of the light buttons #f9fafb / #cfcaca with black text */
:where(html[data-theme="dark"]) .btn-light:active,
:where(html[data-theme="dark"]) .btn-light.active,
:where(html[data-theme="dark"]) .show > .btn-light.dropdown-toggle,
:where(html[data-theme="dark"]) .btn-secondary:active,
:where(html[data-theme="dark"]) .btn-secondary.active,
:where(html[data-theme="dark"]) .show > .btn-secondary.dropdown-toggle,
:where(html[data-theme="dark"]) .btn-secondary:not(.btn-light):focus,
:where(html[data-theme="dark"]) .btn-secondary:not(.btn-light):active {
    background: var(--fl-surface-hover);
    border-color: var(--fl-border-strong);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .btn-light:disabled,
html[data-theme="dark"] .btn-light.disabled,
html[data-theme="dark"] .btn-secondary:disabled,
html[data-theme="dark"] .btn-secondary.disabled {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text-soft);
}

/* style.css turns active/disabled coloured buttons' text black */
:where(html[data-theme="dark"]) .btn-primary:active,
:where(html[data-theme="dark"]) .btn-primary.active,
:where(html[data-theme="dark"]) .btn-primary:disabled,
:where(html[data-theme="dark"]) .btn-primary.disabled,
:where(html[data-theme="dark"]) .show > .btn-primary.dropdown-toggle,
:where(html[data-theme="dark"]) .btn-success:active,
:where(html[data-theme="dark"]) .btn-success.active,
:where(html[data-theme="dark"]) .btn-success:disabled,
:where(html[data-theme="dark"]) .btn-success.disabled,
:where(html[data-theme="dark"]) .show > .btn-success.dropdown-toggle,
:where(html[data-theme="dark"]) .btn-info:active,
:where(html[data-theme="dark"]) .btn-info.active,
:where(html[data-theme="dark"]) .btn-info:disabled,
:where(html[data-theme="dark"]) .btn-info.disabled,
:where(html[data-theme="dark"]) .show > .btn-info.dropdown-toggle,
:where(html[data-theme="dark"]) .btn-danger:active,
:where(html[data-theme="dark"]) .btn-danger.active,
:where(html[data-theme="dark"]) .btn-danger:disabled,
:where(html[data-theme="dark"]) .btn-danger.disabled,
:where(html[data-theme="dark"]) .show > .btn-danger.dropdown-toggle,
:where(html[data-theme="dark"]) .btn-warning:active,
:where(html[data-theme="dark"]) .btn-warning.active,
:where(html[data-theme="dark"]) .btn-warning:disabled,
:where(html[data-theme="dark"]) .btn-warning.disabled {
    color: var(--fl-on-accent);
}

:where(html[data-theme="dark"]) .btn-dark,
:where(html[data-theme="dark"]) .btn-dark:hover,
:where(html[data-theme="dark"]) .btn-dark:focus {
    background: var(--fl-text-strong);
    border-color: var(--fl-text-strong);
    color: var(--fl-bg);
}

:where(html[data-theme="dark"]) .btn-outline-danger:focus,
:where(html[data-theme="dark"]) .btn-outline-danger:active,
:where(html[data-theme="dark"]) .btn-outline-danger.active,
:where(html[data-theme="dark"]) .btn-outline-danger.dropdown-toggle.show {
    background: var(--fl-danger-soft);
    border-color: var(--fl-danger);
    color: var(--fl-danger-hover);
}

:where(html[data-theme="dark"]) .btn-link {
    color: var(--fl-primary-text);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .close,
html[data-theme="dark"] .close:hover {
    color: var(--fl-text);
    text-shadow: none;
}

/* ---------- Forms ---------- */
/* components/filter paints every .form-label #6b7280 after this file */
html[data-theme="dark"] .form-label,
:where(html[data-theme="dark"]) .col-form-label {
    color: var(--fl-text-secondary);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .typeahead,
html[data-theme="dark"] .tt-query,
html[data-theme="dark"] .tt-hint,
html[data-theme="dark"] input[type="text"]:not([class]),
html[data-theme="dark"] input[type="number"]:not([class]),
html[data-theme="dark"] input[type="email"]:not([class]),
html[data-theme="dark"] input[type="search"]:not([class]),
html[data-theme="dark"] input[type="password"]:not([class]),
html[data-theme="dark"] textarea:not([class]),
html[data-theme="dark"] select:not([class]) {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] select.form-control {
    outline-color: transparent;
    color: var(--fl-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] select.form-control:focus {
    background-color: var(--fl-surface);
    border-color: var(--fl-primary);
    color: var(--fl-text-strong);
    outline-color: transparent;
}

html[data-theme="dark"] .form-control.is-invalid,
html[data-theme="dark"] .form-select.is-invalid,
html[data-theme="dark"] .was-validated .form-control:invalid,
html[data-theme="dark"] .was-validated .form-select:invalid {
    border-color: var(--fl-danger);
}

html[data-theme="dark"] .form-control.is-valid,
html[data-theme="dark"] .form-select.is-valid,
html[data-theme="dark"] .was-validated .form-control:valid,
html[data-theme="dark"] .was-validated .form-select:valid {
    border-color: var(--fl-success);
}

html[data-theme="dark"] .invalid-feedback {
    color: var(--fl-danger-hover);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--fl-text-soft);
    opacity: 1;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
    background-color: var(--fl-surface-muted);
    color: var(--fl-text-muted);
}

html[data-theme="dark"] .form-select:not([multiple]):not([size]),
html[data-theme="dark"] .form-select[size="1"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background-color: var(--fl-surface);
    color: var(--fl-text);
}

html[data-theme="dark"] .form-control::file-selector-button {
    background-color: var(--fl-surface-hover);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .form-control::-webkit-file-upload-button {
    background-color: var(--fl-surface-hover);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--fl-border);
}

html[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--fl-border);
}

html[data-theme="dark"] .input-group-text {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text-muted);
}

:where(html[data-theme="dark"]) .form-check-input {
    background-color: var(--fl-surface-muted);
    border-color: var(--fl-border-strong);
}

html[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.35%29'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .form-text,
html[data-theme="dark"] small.info-text,
html[data-theme="dark"] .info-text {
    color: var(--fl-text-muted) !important;
}

html[data-theme="dark"] input[type="color"] {
    border-color: var(--fl-border);
    background-color: var(--fl-surface);
}

/* x-fields.switcher knob */
html[data-theme="dark"] .switch .slider:before {
    background-color: #e5e7eb;
}

/* Bulk action select (components/bulk-action) */
html[data-theme="dark"] .select-box-wrap select,
html[data-theme="dark"] .bulk-delete-wrapper select {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

/* Chrome autofill keeps a light fill otherwise */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fl-text);
    -webkit-box-shadow: 0 0 0 1000px var(--fl-surface-muted) inset;
    box-shadow: 0 0 0 1000px var(--fl-surface-muted) inset;
    caret-color: var(--fl-text);
}

/* nice-select */
html[data-theme="dark"] .nice-select {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .nice-select:after {
    border-color: var(--fl-text-muted);
}

html[data-theme="dark"] .nice-select.disabled {
    border-color: var(--fl-border);
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .nice-select .list {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .nice-select .option {
    color: var(--fl-text);
}

html[data-theme="dark"] .nice-select .option.selected.focus,
html[data-theme="dark"] .nice-select .option:hover,
html[data-theme="dark"] .nice-select .option.focus {
    background-color: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
}

/* select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-container .select2-selection--single {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--fl-text);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--fl-text-muted) transparent transparent transparent;
}

html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--fl-text-muted) transparent;
}

html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--fl-primary);
}

html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--fl-surface-muted);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--fl-primary-soft);
    border-color: var(--fl-primary-border);
    color: var(--fl-primary-strong);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--fl-primary-strong);
    border-color: var(--fl-primary-border);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    background-color: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .select2-results__option {
    color: var(--fl-text);
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--fl-surface-hover);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--fl-primary);
    color: var(--fl-on-accent);
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled="true"],
html[data-theme="dark"] .select2-container--default .select2-results__group,
html[data-theme="dark"] .select2-results__message {
    color: var(--fl-text-soft);
}

/* Summernote (lite) */
html[data-theme="dark"] .note-editor.note-frame,
html[data-theme="dark"] .note-editor.note-airframe,
html[data-theme="dark"] .note-frame {
    border-color: var(--fl-border) !important;
    background: var(--fl-surface);
    color: var(--fl-text);
}

html[data-theme="dark"] .note-editor .note-toolbar,
html[data-theme="dark"] .note-toolbar {
    background-color: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .note-editor .note-editing-area .note-editable,
html[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable {
    background-color: var(--fl-surface);
    color: var(--fl-text);
}

html[data-theme="dark"] .note-editor .note-editing-area .note-editable a {
    color: var(--fl-primary-text);
}

html[data-theme="dark"] .note-editor .note-editing-area .note-editable table td,
html[data-theme="dark"] .note-editor .note-editing-area .note-editable table th {
    border-color: var(--fl-border);
}

html[data-theme="dark"] .note-editor .note-placeholder,
html[data-theme="dark"] .note-placeholder {
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .note-editor.note-frame .note-statusbar,
html[data-theme="dark"] .note-editor.note-airframe .note-statusbar {
    background-color: var(--fl-surface-muted);
    border-top-color: var(--fl-border);
}

html[data-theme="dark"] .note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar {
    border-top-color: var(--fl-border-strong);
}

html[data-theme="dark"] .note-editor.note-frame .note-status-output,
html[data-theme="dark"] .note-editor.note-airframe .note-status-output {
    border-top-color: var(--fl-border);
}

html[data-theme="dark"] .note-btn {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .note-btn:hover,
html[data-theme="dark"] .note-btn:focus,
html[data-theme="dark"] .note-btn.focus,
html[data-theme="dark"] .note-btn:active,
html[data-theme="dark"] .note-btn.active {
    background-color: var(--fl-surface-hover);
    border-color: var(--fl-border-strong);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .note-btn.disabled:focus,
html[data-theme="dark"] .note-btn[disabled]:focus,
html[data-theme="dark"] .note-btn.disabled.focus,
html[data-theme="dark"] .note-btn[disabled].focus,
html[data-theme="dark"] fieldset[disabled] .note-btn:focus,
html[data-theme="dark"] fieldset[disabled] .note-btn.focus {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .note-btn-primary,
html[data-theme="dark"] .note-btn-primary:hover,
html[data-theme="dark"] .note-btn-primary:focus {
    background-color: var(--fl-primary);
    border-color: var(--fl-primary);
    color: var(--fl-on-accent);
}

html[data-theme="dark"] .note-dropdown-menu,
html[data-theme="dark"] .note-popover .note-popover-content,
html[data-theme="dark"] .note-popover-content {
    background: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
    box-shadow: var(--fl-shadow-lg);
}

html[data-theme="dark"] .note-popover {
    background: var(--fl-surface);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .note-popover.bottom .note-popover-arrow:after { border-bottom-color: var(--fl-surface); }
html[data-theme="dark"] .note-popover.top .note-popover-arrow:after { border-top-color: var(--fl-surface); }
html[data-theme="dark"] .note-popover.right .note-popover-arrow:after { border-right-color: var(--fl-surface); }
html[data-theme="dark"] .note-popover.left .note-popover-arrow:after { border-left-color: var(--fl-surface); }

html[data-theme="dark"] a.note-dropdown-item,
html[data-theme="dark"] a.note-dropdown-item:hover,
html[data-theme="dark"] .note-dropdown-item {
    color: var(--fl-text);
}

html[data-theme="dark"] .note-dropdown-item:hover {
    background-color: var(--fl-surface-hover);
}

html[data-theme="dark"] .note-modal-content {
    background: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
    box-shadow: var(--fl-shadow-modal);
}

html[data-theme="dark"] .note-modal-header,
html[data-theme="dark"] .note-modal-footer {
    border-color: var(--fl-border);
}

html[data-theme="dark"] .note-modal-title,
html[data-theme="dark"] .note-form-label {
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .note-modal .note-help-block {
    color: var(--fl-text-muted);
}

html[data-theme="dark"] .note-modal-footer a,
html[data-theme="dark"] .note-modal-footer a:hover,
html[data-theme="dark"] .note-modal-footer a:focus {
    color: var(--fl-primary-text);
}

html[data-theme="dark"] .note-input {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .note-input::placeholder {
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .note-editor .note-dropzone {
    background-color: var(--fl-surface);
    border-color: var(--fl-primary-border);
    color: var(--fl-primary-text);
}

/* ---------- Tables & DataTables ---------- */
html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-color: var(--fl-text);
    --bs-table-active-color: var(--fl-text);
    --bs-table-active-bg: var(--fl-surface-hover);
    --bs-table-hover-color: var(--fl-text);
    color: var(--fl-text);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .table > :not(:last-child) > :last-child > * {
    border-bottom-color: var(--fl-border);
}

html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table > thead.table-light > tr > * {
    --bs-table-bg: var(--fl-surface-muted);
    color: var(--fl-text-muted);
}

html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.even,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover {
    background-color: transparent;
}

html[data-theme="dark"] table.dataTable tbody tr {
    border-bottom-color: var(--fl-border-soft);
}

html[data-theme="dark"] table.dataTable tbody th,
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable.row-border tbody th,
html[data-theme="dark"] table.dataTable.row-border tbody td,
html[data-theme="dark"] table.dataTable.display tbody th,
html[data-theme="dark"] table.dataTable.display tbody td {
    border-color: var(--fl-border-soft);
}

html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_3,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_3 {
    background-color: rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: var(--fl-border-soft);
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td,
html[data-theme="dark"] table.dataTable tfoot th,
html[data-theme="dark"] table.dataTable tfoot td {
    border-color: var(--fl-border);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--fl-text-muted);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: var(--fl-surface);
    border-color: var(--fl-border) !important;
    color: var(--fl-text);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--fl-text) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--fl-text-soft) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    background: var(--fl-surface) !important;
    border-color: var(--fl-border);
    color: var(--fl-text);
}

/* Column visibility (buttons.dataTables + components/datatable) */
html[data-theme="dark"] button.dt-button,
html[data-theme="dark"] div.dt-button,
html[data-theme="dark"] a.dt-button,
html[data-theme="dark"] input.dt-button,
html[data-theme="dark"] .dt-button.buttons-colvis {
    background: var(--fl-surface) !important;
    border: 1px solid var(--fl-border) !important;
    color: var(--fl-text) !important;
    box-shadow: none;
}

html[data-theme="dark"] button.dt-button:hover:not(.disabled),
html[data-theme="dark"] div.dt-button:hover:not(.disabled),
html[data-theme="dark"] a.dt-button:hover:not(.disabled),
html[data-theme="dark"] button.dt-button:focus:not(.disabled),
html[data-theme="dark"] div.dt-button:focus:not(.disabled),
html[data-theme="dark"] a.dt-button:focus:not(.disabled),
html[data-theme="dark"] .dt-button.buttons-colvis:hover {
    background: var(--fl-surface-hover) !important;
    border-color: var(--fl-border-strong) !important;
    color: var(--fl-text-strong) !important;
    text-shadow: none;
}

html[data-theme="dark"] div.dt-button-collection,
html[data-theme="dark"] .dt-button-collection {
    background: var(--fl-surface) !important;
    border: 1px solid var(--fl-border) !important;
    box-shadow: var(--fl-shadow-lg) !important;
    color: var(--fl-text);
}

html[data-theme="dark"] .dt-button-collection h4,
html[data-theme="dark"] div.dt-button-collection-title {
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .dt-button-collection .dt-button,
html[data-theme="dark"] div.dt-button-collection button.dt-button,
html[data-theme="dark"] div.dt-button-collection a.dt-button,
html[data-theme="dark"] div.dt-button-collection div.dt-button {
    background: transparent !important;
    border: 0 !important;
    color: var(--fl-text-muted) !important;
}

html[data-theme="dark"] .dt-button-collection .dt-button.dt-button-active,
html[data-theme="dark"] .dt-button-collection .dt-button.active,
html[data-theme="dark"] div.dt-button-collection button.dt-button.active:not(.disabled),
html[data-theme="dark"] div.dt-button-collection button.dt-button:active:not(.disabled),
html[data-theme="dark"] div.dt-button-collection a.dt-button.active:not(.disabled),
html[data-theme="dark"] div.dt-button-collection a.dt-button:active:not(.disabled),
html[data-theme="dark"] div.dt-button-collection div.dt-button.active:not(.disabled),
html[data-theme="dark"] div.dt-button-collection div.dt-button:active:not(.disabled) {
    background: var(--fl-surface-hover) !important;
    color: var(--fl-text-strong) !important;
    box-shadow: none;
}

html[data-theme="dark"] .dt-button-collection .dt-button:hover {
    background: var(--fl-surface-muted) !important;
    color: var(--fl-text-strong) !important;
}

html[data-theme="dark"] div.dt-button-background {
    background: rgba(0, 0, 0, 0.35);
}

/* ---------- Pagination ---------- */
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .pagination .page-item .page-link {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .page-link:focus {
    background-color: var(--fl-surface-hover);
    border-color: var(--fl-border-strong);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--fl-primary);
    border-color: var(--fl-primary);
    color: var(--fl-on-accent);
}

html[data-theme="dark"] .page-item.disabled .page-link,
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text-soft);
}

/* ---------- Badges & alerts ---------- */
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.badge-light,
html[data-theme="dark"] .badge.bg-secondary,
html[data-theme="dark"] .badge.badge-secondary {
    background: var(--fl-surface-hover) !important;
    color: var(--fl-text) !important;
}

html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-dark {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .alert .alert-link {
    color: inherit;
}

/* x-status-span pills (custom-style.css) */
html[data-theme="dark"] .status-pill--success { background: var(--fl-success-soft); border-color: var(--fl-success-border); color: var(--fl-success-hover); }
html[data-theme="dark"] .status-pill--danger { background: var(--fl-danger-soft); border-color: var(--fl-danger-border); color: var(--fl-danger-hover); }
html[data-theme="dark"] .status-pill--warning { background: var(--fl-warning-soft); border-color: var(--fl-warning-border); color: var(--fl-warning-text); }
html[data-theme="dark"] .status-pill--info { background: var(--fl-info-soft); border-color: var(--fl-info-border); color: var(--fl-info-hover); }

/* ---------- Tabs, dropdowns, modals, tooltips, popovers ---------- */
:where(html[data-theme="dark"]) .nav-link {
    color: var(--fl-primary-text);
}

:where(html[data-theme="dark"]) .nav-link:hover,
:where(html[data-theme="dark"]) .nav-link:focus {
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .nav-tabs .nav-link:focus {
    border-color: transparent;
}

:where(html[data-theme="dark"]) .dropdown-menu {
    background-color: var(--fl-surface);
    color: var(--fl-text);
}

/* style.css: .dropdown .dropdown-menu .dropdown-item:hover { background: #f8f9fa; color: #000 } */
:where(html[data-theme="dark"]) .dropdown .dropdown-menu .dropdown-item:hover {
    background-color: var(--fl-surface-hover);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger,
html[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger i {
    color: var(--fl-danger-hover) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-item.disabled,
html[data-theme="dark"] .dropdown-menu .dropdown-item:disabled {
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .dropdown-header {
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .modal-content {
    background-color: var(--fl-surface);
    color: var(--fl-text);
    box-shadow: var(--fl-shadow-modal), 0 0 0 1px var(--fl-border);
}

html[data-theme="dark"] .modal-backdrop.show {
    opacity: 0.6;
}

html[data-theme="dark"] .tooltip-inner {
    background-color: #2f3542;
    color: var(--fl-text-strong);
    box-shadow: var(--fl-shadow-lg);
}

html[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #2f3542; }
html[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #2f3542; }
html[data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #2f3542; }
html[data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #2f3542; }

html[data-theme="dark"] .popover {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    box-shadow: var(--fl-shadow-lg);
}

html[data-theme="dark"] .popover-header {
    background-color: var(--fl-surface-muted);
    border-bottom-color: var(--fl-border);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .popover-body {
    color: var(--fl-text);
}

html[data-theme="dark"] .bs-popover-top > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: var(--fl-surface); }
html[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: var(--fl-surface); }
html[data-theme="dark"] .bs-popover-start > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { border-left-color: var(--fl-surface); }
html[data-theme="dark"] .bs-popover-end > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { border-right-color: var(--fl-surface); }

html[data-theme="dark"] .bs-popover-top > .popover-arrow::before,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before { border-top-color: var(--fl-border); }
html[data-theme="dark"] .bs-popover-bottom > .popover-arrow::before,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before { border-bottom-color: var(--fl-border); }
html[data-theme="dark"] .bs-popover-start > .popover-arrow::before,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before { border-left-color: var(--fl-border); }
html[data-theme="dark"] .bs-popover-end > .popover-arrow::before,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before { border-right-color: var(--fl-border); }

html[data-theme="dark"] .bs-popover-bottom .popover-header::before,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] .popover-header::before {
    border-bottom-color: var(--fl-border);
}

/* Tag inputs: bootstrap-tagsinput and tagify */
html[data-theme="dark"] .bootstrap-tagsinput {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
    box-shadow: none;
}

html[data-theme="dark"] .bootstrap-tagsinput input {
    color: var(--fl-text);
}

html[data-theme="dark"] .tagify {
    --tags-border-color: var(--fl-border);
    --tags-hover-border-color: var(--fl-border-strong);
    --tags-focus-border-color: var(--fl-primary);
    --tag-bg: var(--fl-primary-soft);
    --tag-hover: rgba(116, 102, 255, 0.24);
    --tag-text-color: var(--fl-primary-strong);
    --tag-text-color--edit: var(--fl-text);
    --tag-remove-btn-color: var(--fl-primary-strong);
    --tag-remove-bg: var(--fl-danger-soft);
    --input-color: var(--fl-text);
    --placeholder-color: var(--fl-text-soft);
    --placeholder-color-focus: var(--fl-text-muted);
    background-color: var(--fl-surface);
}

html[data-theme="dark"] .tagify__dropdown,
html[data-theme="dark"] .tagify__dropdown__wrapper {
    --tagify-dd-bg-color: var(--fl-surface);
    --tagify-dd-text-color: var(--fl-text);
    --tagify-dd-color-primary: var(--fl-primary);
    background: var(--fl-surface);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

/* fontawesome-iconpicker */
html[data-theme="dark"] .iconpicker-popover.popover,
html[data-theme="dark"] .iconpicker-popover.popover .popover-title,
html[data-theme="dark"] .iconpicker-popover .popover-footer {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .iconpicker .iconpicker-items {
    background: var(--fl-surface);
}

html[data-theme="dark"] .iconpicker .iconpicker-item {
    box-shadow: 0 0 0 1px var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .iconpicker .iconpicker-item:hover:not(.iconpicker-selected) {
    background-color: var(--fl-surface-hover);
}

html[data-theme="dark"] .iconpicker .iconpicker-item.iconpicker-selected {
    background: var(--fl-primary);
    color: var(--fl-on-accent);
}

/* spectrum colour picker (components/colorpicker) and jquery.timepicker */
html[data-theme="dark"] .sp-container {
    background-color: var(--fl-surface);
    border-color: var(--fl-border);
    box-shadow: var(--fl-shadow-lg);
}

html[data-theme="dark"] .sp-picker-container,
html[data-theme="dark"] .sp-palette-container {
    border-color: var(--fl-border);
}

html[data-theme="dark"] .sp-input {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .sp-replacer {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .sp-replacer:hover,
html[data-theme="dark"] .sp-replacer.sp-active {
    border-color: var(--fl-primary);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .ui-timepicker-wrapper {
    background: var(--fl-surface);
    border-color: var(--fl-border);
    box-shadow: var(--fl-shadow-lg);
}

html[data-theme="dark"] .ui-timepicker-list li {
    color: var(--fl-text);
}

html[data-theme="dark"] .ui-timepicker-list li.ui-timepicker-selected,
html[data-theme="dark"] .ui-timepicker-list li:hover {
    background: var(--fl-primary);
    color: var(--fl-on-accent);
}

/* ---------- flatpickr ---------- */
html[data-theme="dark"] .flatpickr-calendar {
    background: var(--fl-surface);
    box-shadow: 0 0 0 1px var(--fl-border), var(--fl-shadow-lg);
    color: var(--fl-text);
}

html[data-theme="dark"] .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--fl-border); }
html[data-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--fl-surface); }
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:before { border-top-color: var(--fl-border); }
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: var(--fl-surface); }

html[data-theme="dark"] .flatpickr-calendar.hasTime .flatpickr-time {
    border-top-color: var(--fl-border);
}

html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month,
html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--fl-text-strong);
    fill: var(--fl-text-strong);
}

html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--fl-primary-text);
}

html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--fl-surface);
}

html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
html[data-theme="dark"] .flatpickr-current-month span.cur-month:hover,
html[data-theme="dark"] .numInputWrapper:hover {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .flatpickr-current-month .numInputWrapper span.arrowUp:after,
html[data-theme="dark"] .flatpickr-time .numInputWrapper span.arrowUp:after,
html[data-theme="dark"] .numInputWrapper span.arrowUp:after { border-bottom-color: var(--fl-text-muted); }
html[data-theme="dark"] .flatpickr-current-month .numInputWrapper span.arrowDown:after,
html[data-theme="dark"] .flatpickr-time .numInputWrapper span.arrowDown:after,
html[data-theme="dark"] .numInputWrapper span.arrowDown:after { border-top-color: var(--fl-text-muted); }

html[data-theme="dark"] .numInputWrapper span {
    border-color: var(--fl-border);
}

html[data-theme="dark"] span.flatpickr-weekday {
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .flatpickr-day {
    color: var(--fl-text);
}

html[data-theme="dark"] .flatpickr-day:hover,
html[data-theme="dark"] .flatpickr-day:focus,
html[data-theme="dark"] .flatpickr-day.prevMonthDay:hover,
html[data-theme="dark"] .flatpickr-day.nextMonthDay:hover,
html[data-theme="dark"] .flatpickr-day.prevMonthDay:focus,
html[data-theme="dark"] .flatpickr-day.nextMonthDay:focus,
html[data-theme="dark"] .flatpickr-day.inRange,
html[data-theme="dark"] .flatpickr-day.prevMonthDay.inRange,
html[data-theme="dark"] .flatpickr-day.nextMonthDay.inRange,
html[data-theme="dark"] .flatpickr-day.today.inRange,
html[data-theme="dark"] .flatpickr-day.prevMonthDay.today.inRange,
html[data-theme="dark"] .flatpickr-day.nextMonthDay.today.inRange {
    background: var(--fl-surface-hover);
    border-color: var(--fl-surface-hover);
}

html[data-theme="dark"] .flatpickr-day.inRange {
    box-shadow: -5px 0 0 var(--fl-surface-hover), 5px 0 0 var(--fl-surface-hover);
}

html[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--fl-text-soft);
}

html[data-theme="dark"] .flatpickr-day.today:hover,
html[data-theme="dark"] .flatpickr-day.today:focus {
    background: var(--fl-text-soft);
    border-color: var(--fl-text-soft);
    color: var(--fl-bg);
}

html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange,
html[data-theme="dark"] .flatpickr-day.selected:hover,
html[data-theme="dark"] .flatpickr-day.startRange:hover,
html[data-theme="dark"] .flatpickr-day.endRange:hover,
html[data-theme="dark"] .flatpickr-day.selected:focus,
html[data-theme="dark"] .flatpickr-day.startRange:focus,
html[data-theme="dark"] .flatpickr-day.endRange:focus {
    background: var(--fl-primary);
    border-color: var(--fl-primary);
    color: var(--fl-on-accent);
}

html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover,
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay,
html[data-theme="dark"] .flatpickr-day.notAllowed {
    color: rgba(229, 231, 235, 0.3);
}

html[data-theme="dark"] .dayContainer + .dayContainer {
    box-shadow: -1px 0 0 var(--fl-border);
}

html[data-theme="dark"] .flatpickr-time input,
html[data-theme="dark"] .flatpickr-time .flatpickr-time-separator,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--fl-text);
}

html[data-theme="dark"] .flatpickr-time input:hover,
html[data-theme="dark"] .flatpickr-time input:focus,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--fl-surface-hover);
}

/* ---------- SweetAlert2 (injected after this file) and sweetalert 1 ---------- */
html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .swal2-modal {
    background: var(--fl-surface);
    color: var(--fl-text);
    box-shadow: var(--fl-shadow-modal), 0 0 0 1px var(--fl-border);
}

html[data-theme="dark"] .swal2-popup .swal2-title,
html[data-theme="dark"] .swal2-title {
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .swal2-popup .swal2-content,
html[data-theme="dark"] .swal2-popup .swal2-html-container,
html[data-theme="dark"] .swal2-popup .swal2-footer,
html[data-theme="dark"] .swal2-popup .swal2-select,
html[data-theme="dark"] .swal2-popup .swal2-checkbox,
html[data-theme="dark"] .swal2-popup .swal2-radio {
    color: var(--fl-text-muted);
}

html[data-theme="dark"] .swal2-popup .swal2-footer {
    border-top-color: var(--fl-border);
}

html[data-theme="dark"] .swal2-popup .swal2-input,
html[data-theme="dark"] .swal2-popup .swal2-file,
html[data-theme="dark"] .swal2-popup .swal2-textarea,
html[data-theme="dark"] .swal2-popup .swal2-select {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .swal2-popup .swal2-input:focus,
html[data-theme="dark"] .swal2-popup .swal2-file:focus,
html[data-theme="dark"] .swal2-popup .swal2-textarea:focus {
    border-color: var(--fl-primary);
    box-shadow: var(--fl-ring);
}

html[data-theme="dark"] .swal2-popup .swal2-validation-message,
html[data-theme="dark"] .swal2-validation-message {
    background: var(--fl-surface-muted);
    color: var(--fl-text-muted);
}

html[data-theme="dark"] .swal2-popup .swal2-close {
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .swal2-styled.swal2-cancel {
    background-color: var(--fl-surface-hover) !important;
    color: var(--fl-text) !important;
}

/* Success icon: the white shapes mask the animated circle */
html[data-theme="dark"] .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix {
    background-color: var(--fl-surface) !important;
}

html[data-theme="dark"] .swal2-container.swal2-backdrop-show,
html[data-theme="dark"] .swal2-container.swal2-shown {
    background: rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .sweet-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .sweet-alert {
    background-color: var(--fl-surface);
    color: var(--fl-text);
}

html[data-theme="dark"] .sweet-alert h2 {
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .sweet-alert p {
    color: var(--fl-text-muted);
}

html[data-theme="dark"] .sweet-alert input,
html[data-theme="dark"] .sweet-alert input:focus {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .sweet-alert .sa-error-container {
    background-color: var(--fl-surface-muted);
}

html[data-theme="dark"] .sweet-alert .sa-icon.sa-success .sa-fix,
html[data-theme="dark"] .sweet-alert .sa-icon.sa-success::before,
html[data-theme="dark"] .sweet-alert .sa-icon.sa-success::after {
    background-color: var(--fl-surface);
}

html[data-theme="dark"] .sweet-alert button.cancel {
    background-color: var(--fl-surface-hover);
    color: var(--fl-text);
}

/* ---------- toastr (coloured toasts stay as they are, only the glow changes) ---------- */
html[data-theme="dark"] #toast-container > div {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] #toast-container > div:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .toast-close-button:hover,
html[data-theme="dark"] .toast-close-button:focus {
    color: #fff;
}

/* ---------- intro.js (first visit tour) ---------- */
html[data-theme="dark"] .introjs-tooltip {
    background-color: var(--fl-surface);
    color: var(--fl-text);
    box-shadow: var(--fl-shadow-lg), 0 0 0 1px var(--fl-border);
}

html[data-theme="dark"] .introjs-tooltip-title {
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .introjs-tooltipbuttons {
    border-top-color: var(--fl-border);
}

html[data-theme="dark"] .introjs-button {
    background-color: var(--fl-surface-muted);
    border-color: var(--fl-border);
    color: var(--fl-text);
    text-shadow: none;
}

html[data-theme="dark"] .introjs-button:hover,
html[data-theme="dark"] .introjs-button:focus,
html[data-theme="dark"] .introjs-button:active {
    background-color: var(--fl-surface-hover);
    border-color: var(--fl-border-strong);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .introjs-skipbutton,
html[data-theme="dark"] .introjs-skipbutton:hover,
html[data-theme="dark"] .introjs-skipbutton:focus {
    color: var(--fl-text-muted);
}

html[data-theme="dark"] .introjs-bullets ul li a {
    background: var(--fl-border-strong);
}

html[data-theme="dark"] .introjs-bullets ul li a.active {
    background: var(--fl-text-muted);
}

html[data-theme="dark"] .introjs-progress {
    background-color: var(--fl-surface-hover);
}

html[data-theme="dark"] .introjs-arrow.top,
html[data-theme="dark"] .introjs-arrow.top-middle,
html[data-theme="dark"] .introjs-arrow.top-right { border-bottom-color: var(--fl-surface); }
html[data-theme="dark"] .introjs-arrow.bottom,
html[data-theme="dark"] .introjs-arrow.bottom-middle,
html[data-theme="dark"] .introjs-arrow.bottom-right { border-top-color: var(--fl-surface); }
html[data-theme="dark"] .introjs-arrow.left,
html[data-theme="dark"] .introjs-arrow.left-bottom { border-right-color: var(--fl-surface); }
html[data-theme="dark"] .introjs-arrow.right,
html[data-theme="dark"] .introjs-arrow.right-bottom { border-left-color: var(--fl-surface); }

/* ---------- Media uploader modal & dropzone ---------- */
html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .dropzone-form-wrapper form {
    background-color: var(--fl-surface-muted) !important;
    border-color: var(--fl-border-strong);
    color: var(--fl-text);
}

html[data-theme="dark"] .dropzone-form-wrapper form span.xg-accept-files,
html[data-theme="dark"] .dropzone .dz-message {
    color: var(--fl-text-muted) !important;
}

html[data-theme="dark"] .attachment-preview,
html[data-theme="dark"] .all-uploaded-images .image-preloader-wrapper,
html[data-theme="dark"] .media-uploader-image-info .img-wrapper img {
    background-color: var(--fl-surface-hover);
}

html[data-theme="dark"] .attachment-preview .thumbnail .centered .file-icon,
html[data-theme="dark"] .attachment-preview .thumbnail .centered .file-name,
html[data-theme="dark"] .media-uploader-image-info {
    color: var(--fl-text);
}

html[data-theme="dark"] .media-uploader-image-info .img-meta li.imgsrc {
    background-color: var(--fl-surface-muted);
}

html[data-theme="dark"] .main-content-area-wrap #loadmorewrap button {
    background-color: var(--fl-surface-hover);
    color: var(--fl-text);
}

html[data-theme="dark"] .fl-profile .media_upload_form_btn:hover,
html[data-theme="dark"] .fl-profile .media_upload_form_btn:focus,
html[data-theme="dark"] .fl-identity .media_upload_form_btn:hover,
html[data-theme="dark"] .fl-identity .media_upload_form_btn:focus,
html[data-theme="dark"] .fl-staff-form .media_upload_form_btn:hover,
html[data-theme="dark"] .fl-staff-form .media_upload_form_btn:focus {
    border-color: var(--fl-border-strong);
}

/* ---------- Page kit, dashboard and shell pieces that need a dark tweak ---------- */
/* Raised items on a muted track: surface is darker than muted in dark mode */
html[data-theme="dark"] .fl-segmented__btn.is-active {
    background: var(--fl-surface-hover);
    box-shadow: 0 0 0 1px var(--fl-border-strong);
}

html[data-theme="dark"] .fl-snapshot__item {
    background: var(--fl-surface-hover);
}

html[data-theme="dark"] .topbar-search__kbd {
    background: var(--fl-surface-hover);
}

html[data-theme="dark"] .fl-chip--neutral {
    color: var(--fl-text-secondary);
}

html[data-theme="dark"] button.fl-chip:hover,
html[data-theme="dark"] a.fl-chip:hover,
html[data-theme="dark"] .fl-chip[role="button"]:hover {
    filter: brightness(1.15);
}

html[data-theme="dark"] .fl-leaderboard li:first-child .fl-leaderboard__rank {
    color: var(--fl-warning-text);
}

html[data-theme="dark"] #flPerformance .fl-legend__item[data-series="0"] {
    --dot: var(--fl-chart-earn) !important;
}

html[data-theme="dark"] #flPerformance .fl-legend__item[data-series="1"] {
    --dot: var(--fl-chart-spend) !important;
}

/* ---------- Components' and pages' own <style> blocks with light colours ---------- */
/* components/filter */
html[data-theme="dark"] .filter-toggle {
    background: var(--fl-surface);
    border-color: var(--fl-border-strong);
    color: var(--fl-text-secondary);
}

html[data-theme="dark"] .filter-toggle:hover,
html[data-theme="dark"] .filter-toggle[aria-expanded="true"] {
    background: var(--fl-primary-soft);
    border-color: var(--fl-primary);
    color: var(--fl-primary-strong);
}

html[data-theme="dark"] .filter-panel {
    background: var(--fl-surface);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .filter-header,
html[data-theme="dark"] .filter-actions {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .filter-section-title {
    color: var(--fl-text-secondary);
}

html[data-theme="dark"] .btn-reset {
    background: var(--fl-surface-hover);
    border-color: var(--fl-border);
    color: var(--fl-text);
}

html[data-theme="dark"] .btn-reset:hover {
    background: var(--fl-border);
}

html[data-theme="dark"] .range-group {
    background: var(--fl-surface-muted);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .filter-tag {
    background-color: var(--fl-primary-soft);
    border-color: var(--fl-primary-border);
    color: var(--fl-primary-strong);
}

html[data-theme="dark"] .filter-tag:hover {
    background-color: rgba(116, 102, 255, 0.24);
}

html[data-theme="dark"] .filter-tag button {
    color: var(--fl-primary-strong);
}

html[data-theme="dark"] .filter-tag button:hover {
    color: var(--fl-danger-hover);
}

/* components/loaders */
html[data-theme="dark"] #loader-wrapper .loader-section {
    background: rgba(0, 0, 0, 0.35);
}

/* Configurations page (ConfsModule create) */
html[data-theme="dark"] .nav-pills-custom {
    background: var(--fl-surface);
    border-color: var(--fl-border);
}

html[data-theme="dark"] .nav-pills-custom .nav-link {
    color: var(--fl-text-subtle);
}

html[data-theme="dark"] .nav-pills-custom .nav-link i {
    color: var(--fl-text-soft);
}

html[data-theme="dark"] .nav-pills-custom .nav-link:hover {
    background: var(--fl-surface-hover);
    color: var(--fl-text-strong);
}

html[data-theme="dark"] .nav-pills-custom .nav-link.active {
    background: var(--fl-primary-soft);
    color: var(--fl-primary-strong);
}

html[data-theme="dark"] .nav-pills-custom .nav-link.active i {
    color: var(--fl-primary-text);
}

html[data-theme="dark"] .conf-page .numbers-list {
    border-color: var(--fl-border-strong);
}

html[data-theme="dark"] .conf-page .conf-help--warning,
html[data-theme="dark"] .csm-page .csm-filter-btn.active-pending,
html[data-theme="dark"] .er-form .er-hint .hint-head {
    color: var(--fl-warning-text);
}

/* Access token page notice */
html[data-theme="dark"] .fl-token-page .fl-token-notice,
html[data-theme="dark"] .fl-token-page .fl-token-notice h6 {
    color: var(--fl-warning-strong);
}

/* Support tickets */
html[data-theme="dark"] .reply-message-wrap,
html[data-theme="dark"] .gig-message-start-wrap {
    background-color: var(--fl-surface-muted);
}

html[data-theme="dark"] .single-message-item {
    background-color: var(--fl-surface-hover);
    color: var(--fl-text);
}

html[data-theme="dark"] .single-message-item.customer {
    background-color: var(--fl-primary-soft);
}

html[data-theme="dark"] .single-message-item.customer .thumb .title {
    background-color: var(--fl-danger-soft);
}

html[data-theme="dark"] .reply-message-wrap textarea {
    border-color: var(--fl-border);
}

html[data-theme="dark"] .single-message-item .thumb .title {
    background-color: var(--fl-info-soft);
}

html[data-theme="dark"] .anchor-btn {
    color: var(--fl-primary-text);
}

/* Legacy side cards / product boxes (events, appointments, inventory) */
html[data-theme="dark"] .col-lg-4.right-side-card {
    background: var(--fl-surface-muted);
}

html[data-theme="dark"] .singleFlexitem {
    background: var(--fl-surface);
}

/* ---------- Login / password pages (auth/layout's inline styles) ---------- */
html[data-theme="dark"] .fl-auth .form-label {
    color: var(--fl-text-secondary);
}

html[data-theme="dark"] .fl-auth .fl-input-icon .form-control {
    background: var(--fl-surface-muted);
}

html[data-theme="dark"] .fl-auth .fl-input-icon .form-control:focus {
    background: var(--fl-surface);
}

html[data-theme="dark"] .fl-auth__link {
    color: var(--fl-primary-text);
}

html[data-theme="dark"] .fl-auth__link:hover {
    color: var(--fl-primary-hover);
}