/*
 * theme-filament.css
 * Filament v3 design language overlay for AdminLTE 3.2
 *
 * Palette
 * -------
 * --tf-primary:       #f59e0b   (amber-400)
 * --tf-primary-hover: #d97706   (amber-500)
 * --tf-primary-soft:  #fffbeb   (amber-50)
 * --tf-primary-text:  #b45309   (amber-700)
 * --tf-primary-ring:  rgba(245,158,11,0.35)
 *
 * --tf-success:       #16a34a   --tf-success-soft: #f0fdf4  --tf-success-dark: #15803d
 * --tf-info:          #0ea5e9   --tf-info-soft:    #f0f9ff  --tf-info-dark:    #0369a1
 * --tf-warning:       #f59e0b   (shares primary)
 * --tf-danger:        #dc2626   --tf-danger-soft:  #fef2f2  --tf-danger-dark:  #b91c1c
 *
 * --tf-gray-50:  #f9fafb  --tf-gray-100: #f3f4f6  --tf-gray-200: #e5e7eb
 * --tf-gray-400: #9ca3af  --tf-gray-500: #6b7280  --tf-gray-700: #374151
 * --tf-gray-900: #111827
 */

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */
:root {
    --tf-primary:        #f59e0b;
    --tf-primary-hover:  #d97706;
    --tf-primary-soft:   #fffbeb;
    --tf-primary-text:   #b45309;
    --tf-primary-ring:   rgba(245, 158, 11, 0.35);

    --tf-success:        #16a34a;
    --tf-success-soft:   #f0fdf4;
    --tf-success-dark:   #15803d;

    --tf-info:           #0ea5e9;
    --tf-info-soft:      #f0f9ff;
    --tf-info-dark:      #0369a1;

    --tf-warning:        #f59e0b;
    --tf-warning-soft:   #fffbeb;
    --tf-warning-dark:   #b45309;

    --tf-danger:         #dc2626;
    --tf-danger-soft:    #fef2f2;
    --tf-danger-dark:    #b91c1c;

    --tf-gray-50:        #f9fafb;
    --tf-gray-100:       #f3f4f6;
    --tf-gray-200:       #e5e7eb;
    --tf-gray-300:       #d1d5db;
    --tf-gray-400:       #9ca3af;
    --tf-gray-500:       #6b7280;
    --tf-gray-700:       #374151;
    --tf-gray-900:       #111827;

    --tf-radius-sm:      0.375rem;
    --tf-radius:         0.5rem;
    --tf-radius-lg:      0.75rem;
    --tf-shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tf-shadow:         0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   TYPOGRAPHY — Inter
   ============================================================ */
body,
.wrapper,
.content-wrapper,
.main-header,
.main-sidebar,
.main-footer,
.modal,
.popover,
.tooltip-inner {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 0.9375rem;
    color: var(--tf-gray-700);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--tf-gray-900);
    font-weight: 600;
}

/* ============================================================
   BODY / BACKGROUND
   ============================================================ */
body {
    background-color: var(--tf-gray-50) !important;
}

.content-wrapper {
    background-color: var(--tf-gray-50) !important;
}

/* ============================================================
   NAVBAR (top)
   ============================================================ */
.main-header.navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--tf-gray-200) !important;
    box-shadow: none !important;
}

.main-header .navbar-nav .nav-link,
.main-header .nav-link {
    color: var(--tf-gray-500) !important;
    transition: color 0.15s ease;
}

.main-header .navbar-nav .nav-link:hover,
.main-header .nav-link:hover {
    color: var(--tf-gray-900) !important;
}

.main-header .navbar-brand,
.main-header .brand-link {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--tf-gray-200) !important;
    color: var(--tf-gray-900) !important;
}

/* search box in navbar */
.main-header .navbar-search input.form-control,
.main-header form.form-inline input.form-control {
    border-radius: var(--tf-radius) !important;
    border: 1px solid var(--tf-gray-300) !important;
    box-shadow: var(--tf-shadow-sm) !important;
}

/* ============================================================
   SIDEBAR — Filament white sidebar
   ============================================================ */
.main-sidebar,
.sidebar-light-warning .main-sidebar,
.sidebar-light-primary .main-sidebar,
.sidebar-dark-primary .main-sidebar,
.sidebar-dark-warning .main-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid var(--tf-gray-200) !important;
    box-shadow: none !important;
}

/* Override sidebar dark classes at the wrapper level */
.main-sidebar {
    background-color: #ffffff !important;
}

.sidebar-dark-primary .main-sidebar,
.sidebar-dark-warning .main-sidebar,
.sidebar-light-warning .main-sidebar,
.sidebar-light-primary .main-sidebar {
    background-color: #ffffff !important;
}

/* Brand link area */
.brand-link,
.main-sidebar .brand-link {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--tf-gray-200) !important;
    color: var(--tf-gray-900) !important;
}

.brand-link .brand-text,
.brand-link b {
    color: var(--tf-gray-900) !important;
}

/* Sidebar body */
.sidebar,
.os-content,
.sidebar-wrapper {
    background-color: #ffffff !important;
}

/* Section headers */
.nav-sidebar .nav-header {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--tf-gray-400) !important;
    padding: 0.75rem 1rem 0.25rem !important;
}

/* Nav items */
.nav-sidebar .nav-item .nav-link {
    color: var(--tf-gray-700) !important;
    border-radius: var(--tf-radius) !important;
    margin: 1px 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 500 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    white-space: nowrap !important;
}

.nav-sidebar .nav-item .nav-link:hover {
    background-color: var(--tf-gray-100) !important;
    color: var(--tf-gray-900) !important;
}

/* Active nav item */
.nav-sidebar .nav-item .nav-link.active,
.sidebar-light-warning .nav-sidebar .nav-item .nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-item .nav-link.active,
.sidebar-dark-warning .nav-sidebar .nav-item .nav-link.active {
    background-color: var(--tf-primary-soft) !important;
    color: var(--tf-primary-text) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.nav-sidebar .nav-item .nav-link.active .nav-icon,
.sidebar-light-warning .nav-sidebar .nav-item .nav-link.active .nav-icon,
.sidebar-dark-primary .nav-sidebar .nav-item .nav-link.active .nav-icon {
    color: var(--tf-primary-text) !important;
}

/* Nav icons for non-active */
.nav-sidebar .nav-item .nav-link .nav-icon {
    color: var(--tf-gray-400) !important;
    transition: color 0.15s ease !important;
}

.nav-sidebar .nav-item .nav-link:hover .nav-icon {
    color: var(--tf-gray-700) !important;
}

/* Sidebar user panel */
.sidebar .user-panel {
    border-bottom: 1px solid var(--tf-gray-200) !important;
}

.sidebar .user-panel .info a {
    color: var(--tf-gray-700) !important;
}

/* ============================================================
   CONTENT HEADER / PAGE TITLE
   ============================================================ */
.content-header h1 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--tf-gray-900) !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
}

.breadcrumb-item a {
    color: var(--tf-gray-400) !important;
    text-decoration: none !important;
}

.breadcrumb-item a:hover {
    color: var(--tf-gray-700) !important;
}

.breadcrumb-item.active {
    color: var(--tf-gray-700) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--tf-gray-400) !important;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background-color: #ffffff !important;
    border-radius: var(--tf-radius-lg) !important;
    border: 1px solid rgba(3, 7, 18, 0.05) !important;
    box-shadow: var(--tf-shadow-sm) !important;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--tf-gray-200) !important;
    border-radius: var(--tf-radius-lg) var(--tf-radius-lg) 0 0 !important;
    padding: 1rem 1.25rem !important;
}

.card-header .card-title {
    font-weight: 600 !important;
    color: var(--tf-gray-900) !important;
    font-size: 0.9375rem !important;
}

.card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--tf-gray-200) !important;
    border-radius: 0 0 var(--tf-radius-lg) var(--tf-radius-lg) !important;
}

/* Kill the colored left/top borders on .card-* variants, add subtle accent top */
.card-primary,
.card-secondary,
.card-success,
.card-danger,
.card-warning,
.card-info,
.card-dark,
.card-light {
    border-top: 2px solid var(--tf-gray-200) !important;
}

.card-primary { border-top-color: var(--tf-info) !important; }
.card-success  { border-top-color: var(--tf-success) !important; }
.card-warning  { border-top-color: var(--tf-warning) !important; }
.card-danger   { border-top-color: var(--tf-danger) !important; }
.card-info     { border-top-color: var(--tf-info) !important; }

/* Card-outline variants: replace thick left border with thin top accent */
.card-outline.card-primary,
.card-outline.card-success,
.card-outline.card-warning,
.card-outline.card-danger,
.card-outline.card-info {
    border: 1px solid rgba(3, 7, 18, 0.05) !important;
}

.card-outline.card-primary  { border-top: 2px solid var(--tf-info) !important; }
.card-outline.card-success  { border-top: 2px solid var(--tf-success) !important; }
.card-outline.card-warning  { border-top: 2px solid var(--tf-warning) !important; }
.card-outline.card-danger   { border-top: 2px solid var(--tf-danger) !important; }
.card-outline.card-info     { border-top: 2px solid var(--tf-info) !important; }

/* Card colored headers: AdminLTE adds .bg-* to .card-header on some variants */
.card-primary .card-header,
.card-success .card-header,
.card-info .card-header,
.card-warning .card-header,
.card-danger .card-header {
    background-color: transparent !important;
    color: var(--tf-gray-900) !important;
}

.card-primary .card-header .card-title,
.card-success .card-header .card-title,
.card-info .card-header .card-title,
.card-warning .card-header .card-title,
.card-danger .card-header .card-title {
    color: var(--tf-gray-900) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    border-radius: var(--tf-radius) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    box-shadow: var(--tf-shadow-sm) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-xs {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.75rem !important;
}

.btn-sm {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.8125rem !important;
}

/* Primary → amber */
.btn-primary {
    background-color: var(--tf-primary) !important;
    border-color: var(--tf-primary) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tf-primary-hover) !important;
    border-color: var(--tf-primary-hover) !important;
    box-shadow: 0 0 0 3px var(--tf-primary-ring) !important;
}

/* Success */
.btn-success {
    background-color: var(--tf-success) !important;
    border-color: var(--tf-success) !important;
    color: #ffffff !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--tf-success-dark) !important;
    border-color: var(--tf-success-dark) !important;
}

/* Info */
.btn-info {
    background-color: var(--tf-info) !important;
    border-color: var(--tf-info) !important;
    color: #ffffff !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: var(--tf-info-dark) !important;
    border-color: var(--tf-info-dark) !important;
}

/* Warning */
.btn-warning {
    background-color: var(--tf-warning) !important;
    border-color: var(--tf-warning) !important;
    color: #ffffff !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--tf-primary-hover) !important;
    border-color: var(--tf-primary-hover) !important;
}

/* Danger */
.btn-danger {
    background-color: var(--tf-danger) !important;
    border-color: var(--tf-danger) !important;
    color: #ffffff !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--tf-danger-dark) !important;
    border-color: var(--tf-danger-dark) !important;
}

/* Outline variants */
.btn-outline-primary {
    color: var(--tf-primary) !important;
    border-color: var(--tf-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--tf-primary-soft) !important;
    color: var(--tf-primary-text) !important;
}

.btn-outline-warning {
    color: var(--tf-warning) !important;
    border-color: var(--tf-warning) !important;
}
.btn-outline-warning:hover {
    background-color: var(--tf-warning-soft) !important;
    color: var(--tf-warning-dark) !important;
}

.btn-outline-success {
    color: var(--tf-success) !important;
    border-color: var(--tf-success) !important;
}
.btn-outline-success:hover {
    background-color: var(--tf-success-soft) !important;
    color: var(--tf-success-dark) !important;
}

.btn-outline-danger {
    color: var(--tf-danger) !important;
    border-color: var(--tf-danger) !important;
}
.btn-outline-danger:hover {
    background-color: var(--tf-danger-soft) !important;
    color: var(--tf-danger-dark) !important;
}

/* ============================================================
   BADGES — soft Filament style
   ============================================================ */
.badge {
    border-radius: var(--tf-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    padding: 0.25em 0.55em !important;
}

.badge.bg-primary,
.badge-primary {
    background-color: var(--tf-info-soft) !important;
    color: var(--tf-info-dark) !important;
}

.badge.bg-success,
.badge-success {
    background-color: var(--tf-success-soft) !important;
    color: var(--tf-success-dark) !important;
}

.badge.bg-info,
.badge-info {
    background-color: var(--tf-info-soft) !important;
    color: var(--tf-info-dark) !important;
}

.badge.bg-warning,
.badge-warning {
    background-color: var(--tf-warning-soft) !important;
    color: var(--tf-warning-dark) !important;
}

.badge.bg-danger,
.badge-danger {
    background-color: var(--tf-danger-soft) !important;
    color: var(--tf-danger-dark) !important;
}

.badge.bg-secondary,
.badge-secondary {
    background-color: var(--tf-gray-100) !important;
    color: var(--tf-gray-700) !important;
}

.badge.bg-dark,
.badge-dark {
    background-color: var(--tf-gray-900) !important;
    color: #ffffff !important;
}

/* ============================================================
   ALERTS — soft Filament style
   ============================================================ */
.alert {
    border-radius: var(--tf-radius) !important;
    border: 1px solid transparent !important;
    font-size: 0.875rem !important;
}

.alert-success {
    background-color: var(--tf-success-soft) !important;
    border-color: #bbf7d0 !important;
    color: var(--tf-success-dark) !important;
}

.alert-danger,
.alert-error {
    background-color: var(--tf-danger-soft) !important;
    border-color: #fecaca !important;
    color: var(--tf-danger-dark) !important;
}

.alert-warning {
    background-color: var(--tf-warning-soft) !important;
    border-color: #fde68a !important;
    color: var(--tf-warning-dark) !important;
}

.alert-info {
    background-color: var(--tf-info-soft) !important;
    border-color: #bae6fd !important;
    color: var(--tf-info-dark) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.table thead th {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--tf-gray-900) !important;
    border-bottom: 1px solid var(--tf-gray-200) !important;
    border-top: none !important;
    background-color: #ffffff !important;
    padding: 0.75rem 1rem !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--tf-gray-100) !important;
}

.table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
    color: var(--tf-gray-700) !important;
    border-top: none !important;
}

.table-hover tbody tr:hover {
    background-color: var(--tf-gray-50) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--tf-gray-50) !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control {
    border-radius: var(--tf-radius) !important;
    border: 1px solid var(--tf-gray-300) !important;
    box-shadow: var(--tf-shadow-sm) !important;
    color: var(--tf-gray-700) !important;
    font-size: 0.9375rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus {
    border-color: var(--tf-primary) !important;
    box-shadow: 0 0 0 3px var(--tf-primary-ring) !important;
    outline: none !important;
}

.form-control.is-invalid {
    border-color: var(--tf-danger) !important;
}

.form-control::placeholder {
    color: var(--tf-gray-400) !important;
}

label,
.form-label {
    font-weight: 500 !important;
    color: var(--tf-gray-700) !important;
    font-size: 0.875rem !important;
}

.input-group-text {
    border-radius: var(--tf-radius) !important;
    border: 1px solid var(--tf-gray-300) !important;
    background-color: var(--tf-gray-100) !important;
    color: var(--tf-gray-500) !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-append > .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Custom select */
select.form-control {
    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");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* ============================================================
   SELECT2 (v4.0.3 bootstrap4 theme) — match form-control look
   ============================================================ */
.select2-container--bootstrap4 .select2-selection--single {
    height: calc(2.25rem + 2px) !important;
    border: 1px solid var(--tf-gray-300) !important;
    border-radius: var(--tf-radius) !important;
    box-shadow: var(--tf-shadow-sm) !important;
    padding: 0.375rem 2rem 0.375rem 0.75rem !important;
    font-size: 0.9375rem !important;
    color: var(--tf-gray-700) !important;
    background-color: #ffffff !important;
    line-height: 1.5 !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--open .select2-selection--single {
    border-color: var(--tf-primary) !important;
    box-shadow: 0 0 0 3px var(--tf-primary-ring) !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--tf-gray-700) !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--tf-gray-400) !important;
}

.select2-container--bootstrap4 .select2-selection--multiple {
    border: 1px solid var(--tf-gray-300) !important;
    border-radius: var(--tf-radius) !important;
    box-shadow: var(--tf-shadow-sm) !important;
    min-height: calc(2.25rem + 2px) !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple {
    border-color: var(--tf-primary) !important;
    box-shadow: 0 0 0 3px var(--tf-primary-ring) !important;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tf-primary-soft) !important;
    border-color: var(--tf-primary) !important;
    color: var(--tf-primary-text) !important;
    border-radius: var(--tf-radius-sm) !important;
}

.select2-container--bootstrap4 .select2-dropdown {
    border: 1px solid var(--tf-gray-200) !important;
    border-radius: var(--tf-radius) !important;
    box-shadow: var(--tf-shadow) !important;
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tf-primary-soft) !important;
    color: var(--tf-primary-text) !important;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background-color: var(--tf-gray-100) !important;
    color: var(--tf-gray-700) !important;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--tf-gray-300) !important;
    border-radius: var(--tf-radius-sm) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--tf-primary) !important;
    box-shadow: 0 0 0 3px var(--tf-primary-ring) !important;
    outline: none !important;
}

/* ============================================================
   DATATABLES — pagination and filter inputs
   ============================================================ */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--tf-radius-sm) !important;
    border: 1px solid var(--tf-gray-200) !important;
    color: var(--tf-gray-700) !important;
    padding: 0.25rem 0.65rem !important;
    margin: 0 2px !important;
    background: #ffffff !important;
    font-size: 0.875rem !important;
    transition: background-color 0.15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--tf-gray-100) !important;
    color: var(--tf-gray-900) !important;
    border-color: var(--tf-gray-200) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tf-primary) !important;
    border-color: var(--tf-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--tf-gray-400) !important;
    cursor: not-allowed !important;
    background: #ffffff !important;
    border-color: var(--tf-gray-200) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--tf-radius) !important;
    border: 1px solid var(--tf-gray-300) !important;
    box-shadow: var(--tf-shadow-sm) !important;
    padding: 0.3rem 0.65rem !important;
    font-size: 0.875rem !important;
    color: var(--tf-gray-700) !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--tf-primary) !important;
    box-shadow: 0 0 0 3px var(--tf-primary-ring) !important;
    outline: none !important;
}

/* ============================================================
   SMALL-BOX (dashboard stat cards)
   Restyle into Filament stat-card: white, dark number, gray label
   ============================================================ */
.small-box {
    border-radius: var(--tf-radius-lg) !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(3, 7, 18, 0.05) !important;
    box-shadow: var(--tf-shadow-sm) !important;
    color: var(--tf-gray-700) !important;
}

/* Remove the colored backgrounds */
.small-box.bg-success,
.small-box.bg-info,
.small-box.bg-warning,
.small-box.bg-danger,
.small-box.bg-primary,
.small-box.bg-secondary {
    background-color: #ffffff !important;
    color: var(--tf-gray-700) !important;
}

.small-box .inner h3 {
    color: var(--tf-gray-900) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.small-box .inner p {
    color: var(--tf-gray-500) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}

/* Icon: small soft-colored square */
.small-box .icon {
    font-size: 2rem !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
}

.small-box .icon i {
    font-size: 2rem !important;
    transition: none !important;
}

/* Color-specific icon colors */
.small-box.bg-success .icon i { color: var(--tf-success) !important; }
.small-box.bg-info    .icon i { color: var(--tf-info) !important; }
.small-box.bg-warning .icon i { color: var(--tf-warning) !important; }
.small-box.bg-danger  .icon i { color: var(--tf-danger) !important; }
.small-box.bg-primary .icon i { color: var(--tf-info) !important; }

/* Icon background: soft-colored pill */
.small-box.bg-success .icon { background-color: var(--tf-success-soft) !important; border-radius: 0.5rem; padding: 0.5rem; }
.small-box.bg-info    .icon { background-color: var(--tf-info-soft) !important;    border-radius: 0.5rem; padding: 0.5rem; }
.small-box.bg-warning .icon { background-color: var(--tf-warning-soft) !important; border-radius: 0.5rem; padding: 0.5rem; }
.small-box.bg-danger  .icon { background-color: var(--tf-danger-soft) !important;  border-radius: 0.5rem; padding: 0.5rem; }
.small-box.bg-primary .icon { background-color: var(--tf-info-soft) !important;    border-radius: 0.5rem; padding: 0.5rem; }

/* Footer */
.small-box-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--tf-gray-200) !important;
    color: var(--tf-gray-500) !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 1rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.small-box-footer:hover {
    background-color: var(--tf-gray-50) !important;
    color: var(--tf-gray-700) !important;
    text-decoration: none !important;
}

/* Override the hover zoom on the icon */
.small-box:hover .icon i {
    font-size: 2rem !important;
}

/* ============================================================
   INFO-BOX (dashboard metric boxes)
   ============================================================ */
.info-box {
    background-color: #ffffff !important;
    border-radius: var(--tf-radius-lg) !important;
    border: 1px solid rgba(3, 7, 18, 0.05) !important;
    box-shadow: var(--tf-shadow-sm) !important;
    min-height: 70px !important;
}

.info-box-icon {
    border-radius: var(--tf-radius) !important;
    width: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 5px !important;
    font-size: 1.5rem !important;
}

/* Remap bg-* on .info-box-icon to soft colors */
.info-box-icon.bg-success {
    background-color: var(--tf-success-soft) !important;
    color: var(--tf-success) !important;
}
.info-box-icon.bg-info {
    background-color: var(--tf-info-soft) !important;
    color: var(--tf-info) !important;
}
.info-box-icon.bg-warning {
    background-color: var(--tf-warning-soft) !important;
    color: var(--tf-warning) !important;
}
.info-box-icon.bg-danger {
    background-color: var(--tf-danger-soft) !important;
    color: var(--tf-danger) !important;
}
.info-box-icon.bg-primary {
    background-color: var(--tf-info-soft) !important;
    color: var(--tf-info) !important;
}
.info-box-icon.bg-secondary,
.info-box-icon.elevation-1 {
    box-shadow: none !important;
}

.info-box-text {
    color: var(--tf-gray-500) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    white-space: normal !important;
}

.info-box-number {
    color: var(--tf-gray-900) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* ============================================================
   TEXT COLOR UTILITIES — remap to Filament hues
   ============================================================ */
.text-primary { color: var(--tf-info) !important; }
.text-success  { color: var(--tf-success) !important; }
.text-info     { color: var(--tf-info) !important; }
.text-warning  { color: var(--tf-warning) !important; }
.text-danger   { color: var(--tf-danger) !important; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
    border-radius: var(--tf-radius-lg) !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.modal-header {
    border-bottom: 1px solid var(--tf-gray-200) !important;
    border-radius: var(--tf-radius-lg) var(--tf-radius-lg) 0 0 !important;
}

.modal-footer {
    border-top: 1px solid var(--tf-gray-200) !important;
    border-radius: 0 0 var(--tf-radius-lg) var(--tf-radius-lg) !important;
}

.modal-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--tf-gray-900) !important;
}

/* ============================================================
   SWEETALERT2 (v11)
   ============================================================ */
.swal2-popup {
    border-radius: var(--tf-radius-lg) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    padding: 1.75rem !important;
}

.swal2-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--tf-gray-900) !important;
}

.swal2-html-container {
    font-size: 0.9375rem !important;
    color: var(--tf-gray-500) !important;
}

.swal2-confirm {
    background-color: var(--tf-danger) !important;
    border-radius: var(--tf-radius) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: var(--tf-shadow-sm) !important;
}

.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35) !important;
}

.swal2-cancel {
    background-color: var(--tf-gray-100) !important;
    color: var(--tf-gray-700) !important;
    border-radius: var(--tf-radius) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: var(--tf-shadow-sm) !important;
}

.swal2-cancel:hover {
    background-color: var(--tf-gray-200) !important;
}

.swal2-icon {
    margin-bottom: 1rem !important;
}

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.dropdown-menu {
    border-radius: var(--tf-radius) !important;
    border: 1px solid var(--tf-gray-200) !important;
    box-shadow: var(--tf-shadow) !important;
    padding: 0.25rem 0 !important;
}

.dropdown-item {
    font-size: 0.875rem !important;
    color: var(--tf-gray-700) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--tf-gray-100) !important;
    color: var(--tf-gray-900) !important;
}

.dropdown-divider {
    border-color: var(--tf-gray-200) !important;
}

/* ============================================================
   MAIN FOOTER
   ============================================================ */
.main-footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--tf-gray-200) !important;
    color: var(--tf-gray-500) !important;
    font-size: 0.875rem !important;
}

/* ============================================================
   ELEVATION HELPERS — flatten all AdminLTE elevation classes
   ============================================================ */
.elevation-1,
.elevation-2,
.elevation-3,
.elevation-4 {
    box-shadow: var(--tf-shadow-sm) !important;
}

/* ============================================================
   MISCELLANEOUS ADMINLTE OVERRIDES
   ============================================================ */

/* Flat tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-color: var(--tf-gray-200) var(--tf-gray-200) #ffffff !important;
    color: var(--tf-gray-900) !important;
    font-weight: 600 !important;
}

.nav-tabs .nav-link {
    color: var(--tf-gray-500) !important;
    border-radius: var(--tf-radius) var(--tf-radius) 0 0 !important;
}

.nav-tabs .nav-link:hover {
    color: var(--tf-gray-900) !important;
    border-color: var(--tf-gray-200) var(--tf-gray-200) var(--tf-gray-200) !important;
}

/* Pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--tf-primary) !important;
    color: #ffffff !important;
    border-radius: var(--tf-radius) !important;
}

.nav-pills .nav-link {
    border-radius: var(--tf-radius) !important;
    color: var(--tf-gray-700) !important;
}

/* Progress bars */
.progress-bar.bg-primary { background-color: var(--tf-info) !important; }
.progress-bar.bg-success { background-color: var(--tf-success) !important; }
.progress-bar.bg-warning { background-color: var(--tf-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--tf-danger) !important; }

/* Close button */
button.close {
    color: var(--tf-gray-500) !important;
    opacity: 0.7 !important;
}
button.close:hover {
    color: var(--tf-gray-900) !important;
    opacity: 1 !important;
}

/* Sidebar mini overlay */
.sidebar-mini .main-sidebar:hover {
    box-shadow: 4px 0 8px rgba(0,0,0,0.06) !important;
}

/* ============================================================
   DARK MODE — Filament v3 dark palette
   Scoped under body.dark-mode (AdminLTE's own class).
   AdminLTE's built-in dark styles act as graceful fallback;
   these rules override with the Filament palette on top.

   Two-level FOUC prevention approach:
     1. html.dark-mode covers body background before DOM is ready
        (set by the inline head script via classList on <html>).
     2. body.dark-mode covers all component-level overrides
        (body class is synced on DOMContentLoaded, which fires
        before first paint because CSS is render-blocking).
   ============================================================ */

/* ---- FOUC guard: body bg from <html> class (head script sets this) ---- */
html.dark-mode body {
    background-color: #030712 !important;
    color: #d1d5db !important;
}

/* ---- Palette var overrides under body.dark-mode ---- */
body.dark-mode {
    background-color: #030712 !important;
    color: #d1d5db !important;
}

/* ---- Typography ---- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .h1,
body.dark-mode .h2,
body.dark-mode .h3,
body.dark-mode .h4,
body.dark-mode .h5,
body.dark-mode .h6 {
    color: #f9fafb !important;
}

body.dark-mode,
body.dark-mode .wrapper,
body.dark-mode .content-wrapper,
body.dark-mode .main-header,
body.dark-mode .main-sidebar,
body.dark-mode .main-footer,
body.dark-mode .modal,
body.dark-mode .popover,
body.dark-mode .tooltip-inner {
    color: #d1d5db;
}

/* ---- Content wrapper ---- */
body.dark-mode .content-wrapper {
    background-color: #030712 !important;
}

/* ---- Navbar ---- */
body.dark-mode .main-header.navbar {
    background-color: #111827 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

body.dark-mode .main-header .navbar-nav .nav-link,
body.dark-mode .main-header .nav-link {
    color: #9ca3af !important;
}

body.dark-mode .main-header .navbar-nav .nav-link:hover,
body.dark-mode .main-header .nav-link:hover {
    color: #f9fafb !important;
}

body.dark-mode .main-header .navbar-brand,
body.dark-mode .main-header .brand-link {
    background-color: #111827 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f9fafb !important;
}

body.dark-mode .main-header .navbar-search input.form-control,
body.dark-mode .main-header form.form-inline input.form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #e5e7eb !important;
}

/* ---- Sidebar ---- */
body.dark-mode .main-sidebar,
body.dark-mode .sidebar-light-warning .main-sidebar,
body.dark-mode .sidebar-light-primary .main-sidebar,
body.dark-mode .sidebar-dark-primary .main-sidebar,
body.dark-mode .sidebar-dark-warning .main-sidebar {
    background-color: #111827 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

body.dark-mode .brand-link,
body.dark-mode .main-sidebar .brand-link {
    background-color: #111827 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f9fafb !important;
}

body.dark-mode .brand-link .brand-text,
body.dark-mode .brand-link b {
    color: #f9fafb !important;
}

body.dark-mode .sidebar,
body.dark-mode .os-content,
body.dark-mode .sidebar-wrapper {
    background-color: #111827 !important;
}

body.dark-mode .nav-sidebar .nav-header {
    color: #6b7280 !important;
}

body.dark-mode .nav-sidebar .nav-item .nav-link {
    color: #d1d5db !important;
}

body.dark-mode .nav-sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #f9fafb !important;
}

body.dark-mode .nav-sidebar .nav-item .nav-link.active,
body.dark-mode .sidebar-light-warning .nav-sidebar .nav-item .nav-link.active,
body.dark-mode .sidebar-dark-primary .nav-sidebar .nav-item .nav-link.active,
body.dark-mode .sidebar-dark-warning .nav-sidebar .nav-item .nav-link.active {
    background-color: rgba(245, 158, 11, 0.10) !important;
    color: #fbbf24 !important;
}

body.dark-mode .nav-sidebar .nav-item .nav-link.active .nav-icon,
body.dark-mode .sidebar-light-warning .nav-sidebar .nav-item .nav-link.active .nav-icon,
body.dark-mode .sidebar-dark-primary .nav-sidebar .nav-item .nav-link.active .nav-icon {
    color: #fbbf24 !important;
}

body.dark-mode .nav-sidebar .nav-item .nav-link .nav-icon {
    color: #6b7280 !important;
}

body.dark-mode .nav-sidebar .nav-item .nav-link:hover .nav-icon {
    color: #d1d5db !important;
}

body.dark-mode .sidebar .user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .sidebar .user-panel .info a {
    color: #d1d5db !important;
}

/* ---- Content header / page title ---- */
body.dark-mode .content-header h1 {
    color: #f9fafb !important;
}

/* ---- Breadcrumbs ---- */
body.dark-mode .breadcrumb-item a {
    color: #6b7280 !important;
}

body.dark-mode .breadcrumb-item a:hover {
    color: #d1d5db !important;
}

body.dark-mode .breadcrumb-item.active {
    color: #d1d5db !important;
}

body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #6b7280 !important;
}

/* ---- Cards ---- */
body.dark-mode .card {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .card-header .card-title {
    color: #f9fafb !important;
}

body.dark-mode .card-footer {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .card-primary .card-header,
body.dark-mode .card-success .card-header,
body.dark-mode .card-info .card-header,
body.dark-mode .card-warning .card-header,
body.dark-mode .card-danger .card-header {
    background-color: transparent !important;
    color: #f9fafb !important;
}

body.dark-mode .card-primary .card-header .card-title,
body.dark-mode .card-success .card-header .card-title,
body.dark-mode .card-info .card-header .card-title,
body.dark-mode .card-warning .card-header .card-title,
body.dark-mode .card-danger .card-header .card-title {
    color: #f9fafb !important;
}

/* ---- Buttons (amber primary unchanged; other variants stay) ---- */
body.dark-mode .btn-primary {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35) !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #d1d5db !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .btn-outline-primary {
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: rgba(245, 158, 11, 0.10) !important;
    color: #fbbf24 !important;
}

body.dark-mode .btn-outline-secondary {
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .btn-outline-warning {
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}

body.dark-mode .btn-outline-warning:hover {
    background-color: rgba(251, 191, 36, 0.10) !important;
    color: #fbbf24 !important;
}

/* ---- Soft badges — Filament dark style ---- */
body.dark-mode .badge.bg-success,
body.dark-mode .badge-success {
    background-color: rgba(74, 222, 128, 0.10) !important;
    color: #4ade80 !important;
}

body.dark-mode .badge.bg-info,
body.dark-mode .badge-info {
    background-color: rgba(56, 189, 248, 0.10) !important;
    color: #38bdf8 !important;
}

body.dark-mode .badge.bg-danger,
body.dark-mode .badge-danger {
    background-color: rgba(248, 113, 113, 0.10) !important;
    color: #f87171 !important;
}

body.dark-mode .badge.bg-warning,
body.dark-mode .badge-warning,
body.dark-mode .badge.bg-primary,
body.dark-mode .badge-primary {
    background-color: rgba(251, 191, 36, 0.10) !important;
    color: #fbbf24 !important;
}

body.dark-mode .badge.bg-secondary,
body.dark-mode .badge-secondary {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

body.dark-mode .badge.bg-dark,
body.dark-mode .badge-dark {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #f9fafb !important;
}

/* ---- Alerts ---- */
body.dark-mode .alert-success {
    background-color: rgba(74, 222, 128, 0.10) !important;
    border-color: rgba(74, 222, 128, 0.25) !important;
    color: #4ade80 !important;
}

body.dark-mode .alert-danger,
body.dark-mode .alert-error {
    background-color: rgba(248, 113, 113, 0.10) !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
    color: #f87171 !important;
}

body.dark-mode .alert-warning {
    background-color: rgba(251, 191, 36, 0.10) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
    color: #fbbf24 !important;
}

body.dark-mode .alert-info {
    background-color: rgba(56, 189, 248, 0.10) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
}

/* ---- Tables ---- */
body.dark-mode .table thead th {
    color: #f9fafb !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: #111827 !important;
}

body.dark-mode .table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .table tbody td {
    color: #d1d5db !important;
    border-top: none !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ---- Forms ---- */
body.dark-mode .form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #e5e7eb !important;
}

body.dark-mode .form-control:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
}

body.dark-mode .form-control::placeholder {
    color: #6b7280 !important;
}

body.dark-mode label,
body.dark-mode .form-label {
    color: #d1d5db !important;
}

body.dark-mode .input-group-text {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #9ca3af !important;
}

body.dark-mode select.form-control {
    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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ---- Select2 dark ---- */
body.dark-mode .select2-container--bootstrap4 .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #e5e7eb !important;
}

body.dark-mode .select2-container--bootstrap4.select2-container--focus .select2-selection--single,
body.dark-mode .select2-container--bootstrap4.select2-container--open .select2-selection--single {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35) !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: #e5e7eb !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-top-color: #6b7280 !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--multiple {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(245, 158, 11, 0.10) !important;
    border-color: rgba(245, 158, 11, 0.30) !important;
    color: #fbbf24 !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-dropdown {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-results__option {
    color: #d1d5db !important;
    background-color: transparent !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(245, 158, 11, 0.10) !important;
    color: #fbbf24 !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #e5e7eb !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #e5e7eb !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35) !important;
}

/* ---- DataTables pagination ---- */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #9ca3af !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f9fafb !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #4b5563 !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #e5e7eb !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter label,
body.dark-mode .dataTables_wrapper .dataTables_length label,
body.dark-mode .dataTables_wrapper .dataTables_info {
    color: #9ca3af !important;
}

/* ---- Small-box stat cards ---- */
body.dark-mode .small-box,
body.dark-mode .small-box.bg-success,
body.dark-mode .small-box.bg-info,
body.dark-mode .small-box.bg-warning,
body.dark-mode .small-box.bg-danger,
body.dark-mode .small-box.bg-primary,
body.dark-mode .small-box.bg-secondary {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #d1d5db !important;
}

body.dark-mode .small-box .inner h3 {
    color: #f9fafb !important;
}

body.dark-mode .small-box .inner p {
    color: #9ca3af !important;
}

/* Icon backgrounds: 10% color in dark mode */
body.dark-mode .small-box.bg-success .icon { background-color: rgba(74, 222, 128, 0.10) !important; }
body.dark-mode .small-box.bg-info    .icon { background-color: rgba(56, 189, 248, 0.10) !important; }
body.dark-mode .small-box.bg-warning .icon { background-color: rgba(251, 191, 36, 0.10) !important; }
body.dark-mode .small-box.bg-danger  .icon { background-color: rgba(248, 113, 113, 0.10) !important; }
body.dark-mode .small-box.bg-primary .icon { background-color: rgba(56, 189, 248, 0.10) !important; }

body.dark-mode .small-box-footer {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

body.dark-mode .small-box-footer:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #d1d5db !important;
}

/* ---- Info-box metric cards ---- */
body.dark-mode .info-box {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .info-box-icon.bg-success {
    background-color: rgba(74, 222, 128, 0.10) !important;
    color: #4ade80 !important;
}

body.dark-mode .info-box-icon.bg-info {
    background-color: rgba(56, 189, 248, 0.10) !important;
    color: #38bdf8 !important;
}

body.dark-mode .info-box-icon.bg-warning {
    background-color: rgba(251, 191, 36, 0.10) !important;
    color: #fbbf24 !important;
}

body.dark-mode .info-box-icon.bg-danger {
    background-color: rgba(248, 113, 113, 0.10) !important;
    color: #f87171 !important;
}

body.dark-mode .info-box-icon.bg-primary {
    background-color: rgba(56, 189, 248, 0.10) !important;
    color: #38bdf8 !important;
}

body.dark-mode .info-box-icon.bg-secondary {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #9ca3af !important;
}

body.dark-mode .info-box-text {
    color: #9ca3af !important;
}

body.dark-mode .info-box-number {
    color: #f9fafb !important;
}

/* ---- Modals ---- */
body.dark-mode .modal-content {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .modal-title {
    color: #f9fafb !important;
}

body.dark-mode .modal-body {
    color: #d1d5db !important;
}

/* ---- Dropdown menus ---- */
body.dark-mode .dropdown-menu {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .dropdown-item {
    color: #d1d5db !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #f9fafb !important;
}

body.dark-mode .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- SweetAlert2 dark ---- */
body.dark-mode .swal2-popup {
    background-color: #111827 !important;
    color: #d1d5db !important;
}

body.dark-mode .swal2-title {
    color: #f9fafb !important;
}

body.dark-mode .swal2-html-container {
    color: #9ca3af !important;
}

body.dark-mode .swal2-cancel {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #d1d5db !important;
}

body.dark-mode .swal2-cancel:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---- Tabs ---- */
body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-item.show .nav-link {
    border-color: rgba(255, 255, 255, 0.10) rgba(255, 255, 255, 0.10) #111827 !important;
    color: #f9fafb !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: #9ca3af !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    color: #f9fafb !important;
    border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) !important;
}

/* ---- Main footer ---- */
body.dark-mode .main-footer {
    background-color: #111827 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #6b7280 !important;
}

/* ---- Close button ---- */
body.dark-mode button.close {
    color: #9ca3af !important;
}

body.dark-mode button.close:hover {
    color: #f9fafb !important;
}

/* ---- Text utilities ---- */
body.dark-mode .text-muted {
    color: #6b7280 !important;
}

/* ---- Misc: progress bars, pills (amber active unchanged) ---- */
body.dark-mode .nav-pills .nav-link {
    color: #9ca3af !important;
}

/* ---- Sidebar mini overlay ---- */
body.dark-mode .sidebar-mini .main-sidebar:hover {
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.40) !important;
}

/* ============================================================
   TABLES v2 — full Filament v3 table aesthetic
   Extends/refines the base ".table thead th / tbody" rules above
   (~L563-593) with: thead-dark/thead-light neutralization, roomier
   Filament-style padding, softened striped/bordered variants,
   tfoot summary-row styling, table-responsive corner fix inside
   cards, and DataTables (Yajra Bootstrap4) input/pagination styling.
   Light rules first, body.dark-mode parity block at the end.
   ============================================================ */

/* ---- thead: neutralize AdminLTE's thead-dark/thead-light, Filament look ---- */
.table thead th,
.table thead.thead-dark th,
.table > thead.thead-dark > tr > th,
.table thead.thead-light th {
    background-color: var(--tf-gray-50) !important;
    color: var(--tf-gray-500) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border: none !important;
    border-bottom: 1px solid var(--tf-gray-200) !important;
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
}

/* thead-dark ships with a border-color utility on <thead>; strip it */
.table thead.thead-dark,
.table > thead.thead-dark {
    border-color: var(--tf-gray-200) !important;
}

/* ---- tbody: comfortable padding + hairline row dividers ---- */
.table tbody tr {
    border-bottom: 1px solid var(--tf-gray-100) !important;
    transition: background-color 0.15s ease !important;
}

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

.table tbody td {
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
    color: var(--tf-gray-700) !important;
    border-top: none !important;
    font-size: 0.875rem !important;
}

/* ---- table-hover: subtle gray-50 wash ---- */
.table-hover tbody tr:hover {
    background-color: var(--tf-gray-50) !important;
}

/* ---- table-striped: soften to a barely-there stripe ---- */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--tf-gray-50) !important;
}

.table-striped.table-hover tbody tr:nth-of-type(odd):hover,
.table-striped tbody tr:nth-of-type(odd):hover {
    background-color: var(--tf-gray-100) !important;
}

/* ---- table-bordered: drop the heavy grid, keep hairline outer + header rule ---- */
.table-bordered,
.table-bordered thead th,
.table-bordered tbody td,
.table-bordered tfoot td,
.table-bordered tfoot th {
    border: none !important;
}

.table-bordered {
    border: 1px solid var(--tf-gray-200) !important;
    border-radius: var(--tf-radius) !important;
}

.table-bordered thead th {
    border-bottom: 1px solid var(--tf-gray-200) !important;
}

.table-bordered tbody tr {
    border-bottom: 1px solid var(--tf-gray-100) !important;
}

/* table-sm: tighter but still roomier than raw Bootstrap */
.table-sm thead th {
    padding: 0.5rem 0.75rem !important;
}

.table-sm tbody td {
    padding: 0.5rem 0.75rem !important;
}

/* ---- tfoot: Filament summary-row treatment ---- */
.table tfoot {
    border-top: 2px solid var(--tf-gray-200) !important;
}

.table tfoot tr,
.table tfoot tr.table-success,
.table tfoot tr.table-warning,
.table tfoot tr.table-info,
.table tfoot tr.table-danger,
.table tfoot tr.font-weight-bold {
    background-color: var(--tf-gray-50) !important;
}

.table tfoot td,
.table tfoot th {
    padding: 0.85rem 1rem !important;
    font-weight: 600 !important;
    color: var(--tf-gray-900) !important;
    border-top: none !important;
    border-bottom: none !important;
    vertical-align: middle !important;
}

/* Keep a subtle brand tint on contextual tfoot rows instead of solid Bootstrap colors */
.table tfoot tr.table-success td {
    background-color: var(--tf-success-soft) !important;
    color: var(--tf-success-dark) !important;
}

.table tfoot tr.table-warning td {
    background-color: var(--tf-warning-soft) !important;
    color: var(--tf-warning-dark) !important;
}

.table tfoot tr.table-info td {
    background-color: var(--tf-info-soft) !important;
    color: var(--tf-info-dark) !important;
}

.table tfoot tr.table-danger td {
    background-color: var(--tf-danger-soft) !important;
    color: var(--tf-danger-dark) !important;
}

/* ---- table-responsive inside cards: keep rounded corners flush ---- */
.card > .table-responsive,
.card-body.table-responsive,
.card-body.p-0 > .table-responsive {
    border-radius: 0 0 var(--tf-radius-lg) var(--tf-radius-lg) !important;
    overflow: hidden !important;
}

.card > .table-responsive > .table,
.card-body.table-responsive > .table,
.card-body.p-0 > .table-responsive > .table {
    margin-bottom: 0 !important;
}

/* ---- DataTables (Yajra Bootstrap4 wrapper): Filament inputs + pagination ---- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--tf-radius-lg) !important;
    border: 1px solid var(--tf-gray-300) !important;
    box-shadow: var(--tf-shadow-sm) !important;
    padding: 0.4rem 0.75rem !important;
    color: var(--tf-gray-700) !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--tf-primary) !important;
    box-shadow: 0 0 0 3px var(--tf-primary-ring) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    color: var(--tf-gray-500) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

.dataTables_wrapper .dataTables_info {
    color: var(--tf-gray-500) !important;
    font-size: 0.8125rem !important;
    padding-top: 0.75rem !important;
}

/* Pagination pills: rounded-md, white bg + ring, amber active */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.5rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .pagination .page-link {
    border-radius: var(--tf-radius) !important;
    border: 1px solid var(--tf-gray-200) !important;
    color: var(--tf-gray-700) !important;
    background: #ffffff !important;
    padding: 0.35rem 0.75rem !important;
    margin-left: 3px !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background: var(--tf-gray-50) !important;
    color: var(--tf-gray-900) !important;
    border-color: var(--tf-gray-300) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--tf-primary) !important;
    border-color: var(--tf-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: var(--tf-gray-400) !important;
    background: #ffffff !important;
    border-color: var(--tf-gray-200) !important;
}

/* ============================================================
   TABLES v2 — DARK MODE parity
   ============================================================ */

/* ---- thead ---- */
body.dark-mode .table thead th,
body.dark-mode .table thead.thead-dark th,
body.dark-mode .table > thead.thead-dark > tr > th,
body.dark-mode .table thead.thead-light th {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #9ca3af !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .table thead.thead-dark,
body.dark-mode .table > thead.thead-dark {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- tbody ---- */
body.dark-mode .table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .table tbody tr:last-child {
    border-bottom: none !important;
}

body.dark-mode .table tbody td {
    color: #d1d5db !important;
    border-top: none !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .table-striped.table-hover tbody tr:nth-of-type(odd):hover,
body.dark-mode .table-striped tbody tr:nth-of-type(odd):hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ---- table-bordered ---- */
body.dark-mode .table-bordered,
body.dark-mode .table-bordered thead th,
body.dark-mode .table-bordered tbody td,
body.dark-mode .table-bordered tfoot td,
body.dark-mode .table-bordered tfoot th {
    border: none !important;
}

body.dark-mode .table-bordered {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .table-bordered thead th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .table-bordered tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ---- tfoot ---- */
body.dark-mode .table tfoot {
    border-top: 2px solid rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .table tfoot tr,
body.dark-mode .table tfoot tr.table-success,
body.dark-mode .table tfoot tr.table-warning,
body.dark-mode .table tfoot tr.table-info,
body.dark-mode .table tfoot tr.table-danger,
body.dark-mode .table tfoot tr.font-weight-bold {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .table tfoot td,
body.dark-mode .table tfoot th {
    color: #f9fafb !important;
    border-top: none !important;
    border-bottom: none !important;
}

body.dark-mode .table tfoot tr.table-success td {
    background-color: rgba(74, 222, 128, 0.08) !important;
    color: #4ade80 !important;
}

body.dark-mode .table tfoot tr.table-warning td {
    background-color: rgba(251, 191, 36, 0.08) !important;
    color: #fbbf24 !important;
}

body.dark-mode .table tfoot tr.table-info td {
    background-color: rgba(56, 189, 248, 0.08) !important;
    color: #38bdf8 !important;
}

body.dark-mode .table tfoot tr.table-danger td {
    background-color: rgba(248, 113, 113, 0.08) !important;
    color: #f87171 !important;
}

/* ---- DataTables controls ---- */
body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #e5e7eb !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input:focus,
body.dark-mode .dataTables_wrapper .dataTables_length select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button,
body.dark-mode .dataTables_wrapper .pagination .page-link {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #9ca3af !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.dark-mode .dataTables_wrapper .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f9fafb !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
body.dark-mode .dataTables_wrapper .pagination .page-item.active .page-link {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
body.dark-mode .dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: #4b5563 !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}