/* ================================================================
   FORMONIX POS - Premium Dark Theme v2
   Toggle-able dark UI overlay. Activated via body.formonix-dark class.
   No backend logic, routes, or JS business logic is changed.
   ================================================================ */

/* ========== GOOGLE FONTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ========== GLOBAL FONTS (both themes) ========== */
/* NOTE: Only use body-level font. Do NOT target span/i/div — breaks icon fonts */
/* IMPORTANT: Do NOT apply custom fonts inside #receipt_section / .print_section */
body,
p, label, li,
input, select, textarea,
.btn, .form-control {
    font-family: 'DM Sans', sans-serif;
}
/* Table cells: only apply font outside receipt sections */
td, th {
    font-family: 'DM Sans', sans-serif;
}
#receipt_section td,
#receipt_section th,
.print_section td,
.print_section th,
#receipt_section p,
#receipt_section label,
#receipt_section li,
.print_section p,
.print_section label,
.print_section li {
    font-family: inherit !important;
}
h1, h2, h3, h4, h5, h6,
.box-title,
.content-header > h1,
.modal-title {
    font-family: 'Syne', sans-serif;
}
#receipt_section h1, #receipt_section h2, #receipt_section h3,
#receipt_section h4, #receipt_section h5, #receipt_section h6,
.print_section h1, .print_section h2, .print_section h3,
.print_section h4, .print_section h5, .print_section h6 {
    font-family: inherit !important;
}

/* ========== CSS CUSTOM PROPERTIES ========== */
body.formonix-dark {
    --fm-bg-main: #0b0e1a;
    --fm-bg-sidebar: #0f1225;
    --fm-bg-card: rgba(255,255,255,0.04);
    --fm-bg-card-solid: #111428;
    --fm-bg-card-hover: rgba(255,255,255,0.07);
    --fm-bg-input: rgba(255,255,255,0.06);
    --fm-bg-topbar: rgba(11,14,26,0.75);
    --fm-border: rgba(255,255,255,0.08);
    --fm-border-hover: rgba(255,255,255,0.16);
    --fm-text-primary: #eef0f8;
    --fm-text-secondary: rgba(238,240,248,0.80);
    --fm-text-muted: rgba(238,240,248,0.55);
    --fm-accent-blue: #4f8ef7;
    --fm-accent-green: #1dd1a1;
    --fm-accent-yellow: #ffc64a;
    --fm-accent-pink: #ff6b9d;
    --fm-accent-purple: #a855f7;
    --fm-accent-cyan: #06b6d4;
    --fm-radius-sm: 8px;
    --fm-radius-md: 12px;
    --fm-radius-lg: 18px;
    --fm-transition: 0.22s ease;
    --fm-glow-blue: 0 0 20px rgba(79,142,247,0.2);
    --fm-glow-green: 0 0 20px rgba(29,209,161,0.2);
    --fm-glow-yellow: 0 0 20px rgba(255,198,74,0.2);
    --fm-glow-pink: 0 0 20px rgba(255,107,157,0.2);
    --fm-font-heading: 'Syne', sans-serif;
    --fm-font-body: 'DM Sans', sans-serif;
}

/* ========== BASE / HTML / BODY ========== */
body.formonix-dark {
    background: var(--fm-bg-main) !important;
    color: var(--fm-text-primary) !important;
    font-family: var(--fm-font-body);
}

html.tw-bg-white {
    /* Only override when body has class */
}
body.formonix-dark ~ script,
body.formonix-dark {
    /* Ensure html bg also changes */
}

/* Force html element dark bg */
.formonix-dark-html {
    background: #0b0e1a !important;
}

/* ========== MODAL FIX — Prevent stacking context traps ========== */
/* Kill ALL stacking context creators on wrapper elements so modals are never trapped */
body.formonix-dark .tw-flex.thetop,
body.formonix-dark .wrapper,
body.formonix-dark .content-wrapper {
    z-index: auto !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    isolation: auto !important;
    contain: none !important;
    will-change: auto !important;
}

/* Modals — force highest stacking level */
body.formonix-dark .modal {
    z-index: 1050 !important;
    pointer-events: auto !important;
}
body.formonix-dark .modal-backdrop {
    z-index: 1040 !important;
}
body.formonix-dark .modal-dialog {
    z-index: 1060 !important;
    pointer-events: auto !important;
}
body.formonix-dark .modal-content {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
}
body.formonix-dark .modal.in,
body.formonix-dark .modal.show,
body.formonix-dark .modal.fade.in {
    pointer-events: auto !important;
    display: block !important;
}

body.formonix-dark main,
body.formonix-dark #scrollable-container,
body.formonix-dark .content {
    position: relative;
}

/* ========== TYPOGRAPHY ========== */
body.formonix-dark h1, body.formonix-dark h2, body.formonix-dark h3,
body.formonix-dark h4, body.formonix-dark h5, body.formonix-dark h6,
body.formonix-dark .box-title,
body.formonix-dark .content-header > h1,
body.formonix-dark .modal-title {
    font-family: var(--fm-font-heading) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark p, body.formonix-dark label,
body.formonix-dark td, body.formonix-dark th, body.formonix-dark li,
body.formonix-dark input, body.formonix-dark select,
body.formonix-dark textarea {
    font-family: var(--fm-font-body);
}

/* ========== CUSTOM SCROLLBAR ========== */
body.formonix-dark ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
body.formonix-dark ::-webkit-scrollbar-track {
    background: var(--fm-bg-main);
}
body.formonix-dark ::-webkit-scrollbar-thumb {
    background: rgba(79,142,247,0.3);
    border-radius: 10px;
}
body.formonix-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--fm-accent-blue);
}

/* ========== MAIN CONTENT AREA ========== */
body.formonix-dark main {
    background: var(--fm-bg-main) !important;
}

body.formonix-dark .tw-bg-gray-100 {
    background: var(--fm-bg-main) !important;
}

/* ===================================================================
   GLOBAL CATCH-ALL — Force dark on EVERY white/light background
   Covers ALL pages, popups, modals, forms, tabs, settings, etc.
   =================================================================== */

/* --- Every white/light background element --- */
body.formonix-dark .tw-bg-white,
body.formonix-dark .bg-white,
body.formonix-dark .tw-bg-gray-50,
body.formonix-dark .tw-bg-gray-100,
body.formonix-dark .tw-bg-gray-200,
body.formonix-dark .bg-gray,
body.formonix-dark .content-wrapper,
body.formonix-dark .content,
body.formonix-dark section.content,
body.formonix-dark .content-header,
body.formonix-dark .wrapper {
    background: var(--fm-bg-main) !important;
    background-color: var(--fm-bg-main) !important;
    color: var(--fm-text-primary) !important;
}

/* --- Every card/box/panel/well container --- */
body.formonix-dark .box,
body.formonix-dark .box-default,
body.formonix-dark .box-primary,
body.formonix-dark .box-info,
body.formonix-dark .box-success,
body.formonix-dark .box-warning,
body.formonix-dark .box-danger,
body.formonix-dark .box-solid,
body.formonix-dark .box-header,
body.formonix-dark .box-header.with-border,
body.formonix-dark .box-body,
body.formonix-dark .box-footer,
body.formonix-dark .panel,
body.formonix-dark .panel-default,
body.formonix-dark .panel-primary,
body.formonix-dark .panel-info,
body.formonix-dark .panel-success,
body.formonix-dark .panel-body,
body.formonix-dark .panel-heading,
body.formonix-dark .panel-footer,
body.formonix-dark .panel-default > .panel-heading,
body.formonix-dark .well,
body.formonix-dark .card,
body.formonix-dark .card-body,
body.formonix-dark .card-header,
body.formonix-dark .card-footer {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* --- Tabs (all variants) --- */
body.formonix-dark .nav-tabs-custom,
body.formonix-dark .nav-tabs-custom > .nav-tabs,
body.formonix-dark .tab-content,
body.formonix-dark .tab-pane,
body.formonix-dark .nav-tabs,
body.formonix-dark .nav-pills {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .nav-tabs > li > a,
body.formonix-dark .nav-tabs-custom > .nav-tabs > li > a,
body.formonix-dark .nav-pills > li > a {
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
    border-color: transparent !important;
}

body.formonix-dark .nav-tabs > li.active > a,
body.formonix-dark .nav-tabs > li.active > a:hover,
body.formonix-dark .nav-tabs > li.active > a:focus,
body.formonix-dark .nav-tabs-custom > .nav-tabs > li.active > a,
body.formonix-dark .nav-pills > li.active > a {
    background: transparent !important;
    color: var(--fm-accent-blue) !important;
    border-bottom: 2px solid var(--fm-accent-blue) !important;
}

/* --- Modals / Popups --- */
body.formonix-dark .modal-content {
    background: var(--fm-bg-card-solid) !important;
    background-color: var(--fm-bg-card-solid) !important;
    border: 1px solid var(--fm-border) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .modal-header {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid var(--fm-border) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .modal-header .close,
body.formonix-dark .modal-header .close span {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 24px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative !important;
}

body.formonix-dark .modal-body {
    background: transparent !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .modal-footer {
    background: rgba(255,255,255,0.02) !important;
    border-top: 1px solid var(--fm-border) !important;
}

body.formonix-dark .modal-title {
    color: var(--fm-text-primary) !important;
}

/* --- Forms (inputs, selects, textareas) --- */
body.formonix-dark .form-control,
body.formonix-dark input[type="text"],
body.formonix-dark input[type="email"],
body.formonix-dark input[type="password"],
body.formonix-dark input[type="number"],
body.formonix-dark input[type="tel"],
body.formonix-dark input[type="url"],
body.formonix-dark input[type="search"],
body.formonix-dark input[type="date"],
body.formonix-dark input[type="datetime-local"],
body.formonix-dark select,
body.formonix-dark select.form-control,
body.formonix-dark textarea {
    background: var(--fm-bg-input) !important;
    background-color: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .form-control:focus,
body.formonix-dark input:focus,
body.formonix-dark select:focus,
body.formonix-dark textarea:focus {
    border-color: var(--fm-accent-blue) !important;
    box-shadow: var(--fm-glow-blue) !important;
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .form-group label,
body.formonix-dark label,
body.formonix-dark .control-label {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .input-group-addon {
    background: rgba(255,255,255,0.06) !important;
    color: var(--fm-text-secondary) !important;
    border-color: var(--fm-border) !important;
}

/* --- Select2 --- */
body.formonix-dark .select2-container--default .select2-selection--single,
body.formonix-dark .select2-container--default .select2-selection--multiple {
    background: var(--fm-bg-input) !important;
    border-color: var(--fm-border) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--fm-text-muted) transparent transparent transparent !important;
}

body.formonix-dark .select2-dropdown {
    background: var(--fm-bg-card-solid) !important;
    border-color: var(--fm-border) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .select2-container--default .select2-results__option {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--fm-accent-blue) !important;
    color: #fff !important;
}

body.formonix-dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* --- Dropdowns (Bootstrap) --- */
body.formonix-dark .dropdown-menu {
    background: #1a1e35 !important;
    background-color: #1a1e35 !important;
    border: 1px solid var(--fm-border) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
}

body.formonix-dark .dropdown-menu > li > a {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .dropdown-menu > li > a:hover,
body.formonix-dark .dropdown-menu > li > a:focus {
    background: rgba(79,142,247,0.12) !important;
    color: var(--fm-accent-blue) !important;
}

body.formonix-dark .dropdown-menu .divider {
    background: var(--fm-border) !important;
}

/* --- Tables (ALL variants) --- */
body.formonix-dark table,
body.formonix-dark .table,
body.formonix-dark .table-responsive,
body.formonix-dark .table-striped,
body.formonix-dark .table-bordered,
body.formonix-dark .table-hover,
body.formonix-dark .dataTable,
body.formonix-dark table.dataTable {
    background: transparent !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark table td,
body.formonix-dark table th,
body.formonix-dark table tr,
body.formonix-dark .table > tbody > tr > td,
body.formonix-dark .table > tbody > tr > th,
body.formonix-dark .table > thead > tr > th,
body.formonix-dark .table > thead > tr > td,
body.formonix-dark .table > tfoot > tr > td,
body.formonix-dark .table > tfoot > tr > th,
body.formonix-dark table.dataTable tbody tr,
body.formonix-dark table.dataTable tbody td,
body.formonix-dark table.dataTable tbody th,
body.formonix-dark .table-striped > tbody > tr:nth-of-type(odd),
body.formonix-dark .table-striped > tbody > tr:nth-of-type(even),
body.formonix-dark .table-striped > tbody > tr:nth-of-type(odd) > td,
body.formonix-dark .table-striped > tbody > tr:nth-of-type(even) > td,
body.formonix-dark table.dataTable tbody tr.odd,
body.formonix-dark table.dataTable tbody tr.even,
body.formonix-dark table.dataTable tbody tr.odd td,
body.formonix-dark table.dataTable tbody tr.even td,
body.formonix-dark table.dataTable td.sorting_1 {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .table > thead > tr > th,
body.formonix-dark table.dataTable thead th,
body.formonix-dark table.dataTable thead td {
    background: rgba(255,255,255,0.03) !important;
    color: var(--fm-text-muted) !important;
    border-color: var(--fm-border) !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

body.formonix-dark .table-hover > tbody > tr:hover,
body.formonix-dark .table-hover > tbody > tr:hover > td {
    background: rgba(79,142,247,0.06) !important;
}

/* --- All text colors global --- */
body.formonix-dark .tw-text-black,
body.formonix-dark .tw-text-gray-900,
body.formonix-dark .tw-text-gray-800,
body.formonix-dark .text-black {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .tw-text-gray-700,
body.formonix-dark .tw-text-gray-600,
body.formonix-dark .tw-text-gray-500,
body.formonix-dark .text-muted {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .tw-text-gray-400,
body.formonix-dark .tw-text-gray-300 {
    color: var(--fm-text-muted) !important;
}

/* Preserve white text on colored backgrounds */
body.formonix-dark .tw-text-white,
body.formonix-dark .text-white {
    color: #fff !important;
}

/* --- Borders global --- */
body.formonix-dark .tw-border-gray-200,
body.formonix-dark .tw-border-gray-300,
body.formonix-dark .tw-ring-gray-200,
body.formonix-dark .border,
body.formonix-dark .border-top,
body.formonix-dark .border-bottom,
body.formonix-dark hr {
    border-color: var(--fm-border) !important;
}

body.formonix-dark .tw-ring-gray-200 {
    --tw-ring-color: var(--fm-border) !important;
}

/* --- Shadows on white cards --- */
body.formonix-dark .tw-shadow-sm,
body.formonix-dark .tw-shadow-md,
body.formonix-dark .tw-shadow-lg,
body.formonix-dark .tw-shadow {
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

/* --- SweetAlert / swal popups --- */
body.formonix-dark .swal2-popup,
body.formonix-dark .swal2-modal {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .swal2-title {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .swal2-content,
body.formonix-dark .swal2-html-container {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .swal2-input,
body.formonix-dark .swal2-select,
body.formonix-dark .swal2-textarea {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .swal2-select option {
    background: #ffffff !important;
    color: #333333 !important;
}

/* --- Toastr notifications --- */
body.formonix-dark .toast {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* --- List groups --- */
body.formonix-dark .list-group-item {
    background: transparent !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .list-group-item:hover {
    background: rgba(79,142,247,0.06) !important;
}

body.formonix-dark .list-group-item.active {
    background: var(--fm-accent-blue) !important;
    border-color: var(--fm-accent-blue) !important;
    color: #fff !important;
}

/* --- Settings page: pos-tab-container / pos-tab-content --- */
body.formonix-dark .pos-tab-container,
body.formonix-dark div.pos-tab-container {
    background-color: var(--fm-bg-card-solid) !important;
    background: var(--fm-bg-card-solid) !important;
    border-color: var(--fm-border) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

body.formonix-dark .pos-tab-content,
body.formonix-dark div.pos-tab-content {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .pos-tab-menu .list-group > a {
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .pos-tab-menu .list-group > a:hover {
    background: rgba(79,142,247,0.08) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .pos-tab-menu .list-group > a.active,
body.formonix-dark div.pos-tab-menu div.list-group > a.active {
    background: linear-gradient(135deg, var(--fm-accent-blue), var(--fm-accent-purple)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.formonix-dark .pos-tab-menu .list-group > a.active .glyphicon,
body.formonix-dark .pos-tab-menu .list-group > a.active .fa {
    color: #fff !important;
}

/* --- list-group items global --- */
body.formonix-dark .list-group-item,
body.formonix-dark .list-group > a,
body.formonix-dark a.list-group-item {
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .list-group-item:hover,
body.formonix-dark .list-group > a:hover,
body.formonix-dark a.list-group-item:hover {
    background: rgba(79,142,247,0.08) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .list-group-item.active,
body.formonix-dark .list-group > a.active,
body.formonix-dark a.list-group-item.active {
    background: var(--fm-accent-blue) !important;
    color: #fff !important;
    border-color: var(--fm-accent-blue) !important;
}

/* --- Settings page vertical tabs / nav-stacked --- */
body.formonix-dark .nav-stacked > li > a {
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .nav-stacked > li.active > a,
body.formonix-dark .nav-stacked > li.active > a:hover,
body.formonix-dark .nav-stacked > li.active > a:focus {
    background: var(--fm-accent-blue) !important;
    color: #fff !important;
    border-color: var(--fm-accent-blue) !important;
}

body.formonix-dark .nav-stacked > li > a:hover {
    background: rgba(79,142,247,0.08) !important;
    color: var(--fm-text-primary) !important;
}

/* --- Popover --- */
body.formonix-dark .popover {
    background: var(--fm-bg-card-solid) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .popover-title {
    background: rgba(255,255,255,0.04) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .popover-content {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .popover.bottom > .arrow::after,
body.formonix-dark .popover.top > .arrow::after {
    border-bottom-color: var(--fm-bg-card-solid) !important;
    border-top-color: var(--fm-bg-card-solid) !important;
}

/* --- Tooltip --- */
body.formonix-dark .tooltip-inner {
    background: #1a1e35 !important;
    color: var(--fm-text-primary) !important;
}

/* --- Breadcrumbs --- */
body.formonix-dark .breadcrumb {
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .breadcrumb > li > a {
    color: var(--fm-accent-blue) !important;
}

/* --- Callouts / Alerts --- */
body.formonix-dark .alert,
body.formonix-dark .callout {
    background: rgba(255,255,255,0.04) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* --- Date range picker --- */
body.formonix-dark .daterangepicker {
    background: var(--fm-bg-card-solid) !important;
    border-color: var(--fm-border) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .daterangepicker td.active,
body.formonix-dark .daterangepicker td.active:hover {
    background: var(--fm-accent-blue) !important;
    color: #fff !important;
}

body.formonix-dark .daterangepicker td.available:hover,
body.formonix-dark .daterangepicker th.available:hover {
    background: rgba(79,142,247,0.12) !important;
}

body.formonix-dark .daterangepicker .calendar-table {
    background: transparent !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .daterangepicker td,
body.formonix-dark .daterangepicker th {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .daterangepicker td.off {
    color: var(--fm-text-muted) !important;
}

body.formonix-dark .daterangepicker select.monthselect,
body.formonix-dark .daterangepicker select.yearselect {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* --- Bootstrap switch / checkbox --- */
body.formonix-dark .bootstrap-switch {
    border-color: var(--fm-border) !important;
}

/* --- iCheck --- */
body.formonix-dark .icheckbox_square-blue,
body.formonix-dark .iradio_square-blue {
    border-color: var(--fm-border) !important;
}

/* --- Notification dropdown menus --- */
body.formonix-dark .notifications-menu .dropdown-menu,
body.formonix-dark .messages-menu .dropdown-menu {
    background: #1a1e35 !important;
}

body.formonix-dark .notifications-menu .dropdown-menu li.header,
body.formonix-dark .messages-menu .dropdown-menu li.header {
    background: rgba(255,255,255,0.04) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .notifications-menu .dropdown-menu li.footer a,
body.formonix-dark .messages-menu .dropdown-menu li.footer a {
    background: rgba(255,255,255,0.03) !important;
    color: var(--fm-accent-blue) !important;
}

/* --- Buttons: ensure white text on colored --- */
body.formonix-dark .btn-primary,
body.formonix-dark .btn-success,
body.formonix-dark .btn-info,
body.formonix-dark .btn-danger,
body.formonix-dark .btn-warning,
body.formonix-dark a.btn-primary,
body.formonix-dark a.btn-success,
body.formonix-dark a.btn-info,
body.formonix-dark a.btn-danger,
body.formonix-dark a.btn-warning {
    color: #fff !important;
}

body.formonix-dark .btn-default,
body.formonix-dark .btn-secondary {
    background: rgba(255,255,255,0.06) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .btn-default:hover,
body.formonix-dark .btn-secondary:hover {
    background: rgba(255,255,255,0.12) !important;
    color: var(--fm-text-primary) !important;
}

/* --- DataTables export buttons --- */
body.formonix-dark .dt-buttons .dt-button,
body.formonix-dark .dt-buttons .btn {
    background: rgba(255,255,255,0.06) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .dt-buttons .dt-button:hover,
body.formonix-dark .dt-buttons .btn:hover {
    background: rgba(79,142,247,0.12) !important;
    color: var(--fm-accent-blue) !important;
}

/* DataTables colored export buttons — keep their brand colors */
body.formonix-dark .dt-buttons .btn.btn-success,
body.formonix-dark .dt-buttons .btn.buttons-excel.btn-success {
    background: #198754 !important;
    color: #fff !important;
    border-color: #198754 !important;
}
body.formonix-dark .dt-buttons .btn.btn-success:hover {
    background: #157347 !important;
    color: #fff !important;
}

body.formonix-dark .dt-buttons .btn.btn-danger,
body.formonix-dark .dt-buttons .btn.buttons-pdf.btn-danger {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}
body.formonix-dark .dt-buttons .btn.btn-danger:hover {
    background: #bb2d3b !important;
    color: #fff !important;
}

body.formonix-dark .dt-buttons .btn.btn-info,
body.formonix-dark .dt-buttons .btn.buttons-print.btn-info {
    background: #0dcaf0 !important;
    color: #fff !important;
    border-color: #0dcaf0 !important;
}
body.formonix-dark .dt-buttons .btn.btn-info:hover {
    background: #0bacce !important;
    color: #fff !important;
}

/* --- All gradient bg elements keep white text --- */
body.formonix-dark [class*="tw-bg-gradient-to-"],
body.formonix-dark [class*="tw-bg-gradient-to-"] * {
    color: #fff !important;
}

body.formonix-dark .tw-dw-btn,
body.formonix-dark a.tw-dw-btn,
body.formonix-dark .tw-dw-btn * {
    color: #fff !important;
}

/* --- Pagination (DataTables) --- */
body.formonix-dark .dataTables_paginate .paginate_button,
body.formonix-dark .dataTables_wrapper .dataTables_paginate .paginate_button,
body.formonix-dark .pagination > li > a,
body.formonix-dark .pagination > li > span {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(79,142,247,0.18), rgba(168,85,247,0.12)) !important;
    background-color: transparent !important;
    border: 1px solid rgba(79,142,247,0.3) !important;
    border-radius: 8px !important;
}

body.formonix-dark .dataTables_paginate .paginate_button:hover,
body.formonix-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.formonix-dark .pagination > li > a:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #4f8ef7, #a855f7) !important;
    border-color: #4f8ef7 !important;
    box-shadow: 0 2px 12px rgba(79,142,247,0.35) !important;
}

body.formonix-dark .dataTables_paginate .paginate_button.current,
body.formonix-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.formonix-dark .pagination > .active > a {
    color: #fff !important;
    background: linear-gradient(135deg, #4f8ef7, #a855f7) !important;
    border-color: #4f8ef7 !important;
    box-shadow: 0 2px 12px rgba(79,142,247,0.35) !important;
}

body.formonix-dark .dataTables_paginate .paginate_button.disabled,
body.formonix-dark .dataTables_paginate .paginate_button.disabled:hover,
body.formonix-dark .pagination > .disabled > a {
    color: var(--fm-text-muted) !important;
    background: rgba(255,255,255,0.03) !important;
    opacity: 0.5 !important;
    box-shadow: none !important;
}

/* --- DataTables info/filter text --- */
body.formonix-dark .dataTables_wrapper .dataTables_length label,
body.formonix-dark .dataTables_wrapper .dataTables_filter label,
body.formonix-dark .dataTables_wrapper .dataTables_info,
body.formonix-dark .dataTables_wrapper .dataTables_paginate {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .dataTables_wrapper .dataTables_length select,
body.formonix-dark .dataTables_wrapper .dataTables_filter input {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* --- Progress bars --- */
body.formonix-dark .progress {
    background: rgba(255,255,255,0.06) !important;
}

/* --- View modal --- */
body.formonix-dark .view_modal .modal-content {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
}

/* --- Jumbotron --- */
body.formonix-dark .jumbotron {
    background: rgba(255,255,255,0.04) !important;
    color: var(--fm-text-primary) !important;
}

/* --- Thumbnail / Image wrapper --- */
body.formonix-dark .thumbnail {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--fm-border) !important;
}

/* --- Help block / form hints --- */
body.formonix-dark .help-block {
    color: var(--fm-text-muted) !important;
}

/* ===================================================================
   SIDEBAR NAV — PS DASHBOARD STYLE (Light & Dark)
   =================================================================== */

/* ---- Base Sidebar Layout ---- */
.fm-sidebar-nav {
    flex: 1;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    border-right: 1px solid #e8ecf0;
    scrollbar-width: thin;
}

body.formonix-dark .fm-sidebar-nav {
    border-right: 1px solid var(--fm-border) !important;
    background: var(--fm-bg-sidebar) !important;
}

/* Sidebar aside container override */
body.formonix-dark aside.side-bar {
    background: var(--fm-bg-sidebar) !important;
    border-right: 1px solid var(--fm-border) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
}

/* Sidebar brand/logo area */
body.formonix-dark aside.side-bar > a:first-of-type {
    background: linear-gradient(135deg, #0b0f22 0%, #131740 100%) !important;
    border-bottom: 1px solid var(--fm-border) !important;
    border-right: 1px solid var(--fm-border) !important;
}

body.formonix-dark aside.side-bar > a:first-of-type .side-bar-heading {
    font-family: var(--fm-font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* ---- Nav Headers ---- */
.fm-nav-header {
    padding: 16px 12px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

body.formonix-dark .fm-nav-header {
    color: var(--fm-text-muted) !important;
}

/* ---- Nav Divider ---- */
.fm-nav-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 10px 0;
}

body.formonix-dark .fm-nav-divider {
    background: rgba(255,255,255,0.05) !important;
}

/* ---- Main Nav Buttons (`fm-nav-btn`) ---- */
.fm-nav-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #4b5563;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid transparent;
}

/* Hover State */
.fm-nav-btn:hover {
    background: #f3f4f6;
    color: #111827;
    transform: translateX(4px);
}

/* Dark Mode Nav Button */
body.formonix-dark .fm-nav-btn {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .fm-nav-btn:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--fm-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.02) !important;
}

/* ---- Icons (`fm-nav-icon`) ---- */
.fm-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #9ca3af;
    transition: all 0.25s ease;
}

.fm-nav-icon svg {
    width: 20px;
    height: 20px;
}

.fm-nav-btn:hover .fm-nav-icon {
    color: #4f46e5;
}

body.formonix-dark .fm-nav-icon {
    color: var(--fm-text-muted) !important;
}

body.formonix-dark .fm-nav-btn:hover .fm-nav-icon {
    color: var(--fm-text-primary) !important;
}

/* ---- Text & Arrows ---- */
.fm-nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-nav-arrow {
    display: flex;
    align-items: center;
    color: #9ca3af;
    transition: transform 0.2s;
}

.fm-nav-arrow svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.formonix-dark .fm-nav-arrow,
body.formonix-dark .fm-nav-arrow svg {
    color: var(--fm-text-muted) !important;
}

/* ---- Active State PS Dashboard Style (`fm-active`) ---- */
/* Main active button */
.fm-nav-btn.fm-active {
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.15);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
}

.fm-nav-btn.fm-active .fm-nav-icon {
    color: #4f46e5;
}

/* Dropdown Parent Active Wrapper */
.fm-nav-dropdown-wrapper.fm-active > .fm-nav-btn {
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.15);
}
.fm-nav-dropdown-wrapper.fm-active > .fm-nav-btn .fm-nav-icon {
    color: #4f46e5;
}

/* Dark Mode Active State (Glassmorphism & Neon Glow) */
body.formonix-dark .fm-nav-btn.fm-active,
body.formonix-dark .fm-nav-dropdown-wrapper.fm-active > .fm-nav-btn {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(59, 130, 246, 0.03) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 0 12px rgba(56, 189, 248, 0.05) !important;
}

/* Glowing Icon for Dark Mode Active */
body.formonix-dark .fm-nav-btn.fm-active .fm-nav-icon,
body.formonix-dark .fm-nav-dropdown-wrapper.fm-active > .fm-nav-btn .fm-nav-icon {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6)) !important;
}

/* ---- Sub Nav Menus ---- */
.fm-nav-submenu {
    position: relative;
    margin-top: 4px;
    margin-bottom: 8px;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Vertical Guide Line */
.fm-nav-submenu::before {
    content: '';
    position: absolute;
    left: 25px; /* Aligns with middle of parent icon */
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #e5e7eb;
    border-radius: 2px;
}

body.formonix-dark .fm-nav-submenu::before {
    background: rgba(255,255,255,0.08) !important;
}

/* Sub Nav Button */
.fm-nav-sub-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.fm-nav-sub-btn:hover {
    color: #111827;
    background: #f9fafb;
    transform: translateX(3px);
}

body.formonix-dark .fm-nav-sub-btn {
    color: var(--fm-text-muted) !important;
}

body.formonix-dark .fm-nav-sub-btn:hover {
    color: var(--fm-text-primary) !important;
    background: rgba(255,255,255,0.03) !important;
}

/* Sub Nav Dot Indicator */
.fm-nav-sub-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    transition: all 0.2s;
    position: relative;
    z-index: 2; /* appear above the vertical line */
}

body.formonix-dark .fm-nav-sub-dot {
    background: rgba(255,255,255,0.2) !important;
}

/* Sub Nav Active State */
.fm-nav-sub-btn.fm-active {
    color: #4f46e5;
    font-weight: 600;
}

.fm-nav-sub-btn.fm-active .fm-nav-sub-dot {
    background: #4f46e5;
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

body.formonix-dark .fm-nav-sub-btn.fm-active {
    color: #38bdf8 !important;
}

body.formonix-dark .fm-nav-sub-btn.fm-active .fm-nav-sub-dot {
    background: #38bdf8 !important;
    box-shadow: 0 0 8px #38bdf8, 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

/* ===================================================================
   TOPBAR / HEADER — Sticky blurred dark bar
   =================================================================== */

/* Main header bar — override gradient */
body.formonix-dark > .tw-flex.thetop > main > div.no-print:first-of-type,
body.formonix-dark div[class*="tw-bg-gradient-to-r"][class*="tw-from-"].no-print,
body.formonix-dark .no-print[class*="tw-border-b"][class*="tw-bg-gradient"] {
    background: var(--fm-bg-topbar) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--fm-border) !important;
}

/* Header action buttons — override theme color bg */
body.formonix-dark .no-print button[class*="tw-bg-"][class*="-800"],
body.formonix-dark .no-print summary[class*="tw-bg-"][class*="-800"],
body.formonix-dark .no-print a[class*="tw-bg-"][class*="-800"] {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--fm-border) !important;
}

body.formonix-dark .no-print button[class*="tw-bg-"][class*="-800"]:hover,
body.formonix-dark .no-print summary[class*="tw-bg-"][class*="-800"]:hover,
body.formonix-dark .no-print a[class*="tw-bg-"][class*="-800"]:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: var(--fm-border-hover) !important;
}

/* POS button in header — make it gradient accent */
body.formonix-dark .no-print a[class*="tw-bg-"][class*="-800"][href*="pos/create"] {
    background: linear-gradient(135deg, var(--fm-accent-blue) 0%, var(--fm-accent-purple) 100%) !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(79,142,247,0.3) !important;
}

/* Dropdown z-index — above content but below modals (Bootstrap modal = 1050) */
details.tw-dw-dropdown,
details.tw-dw-dropdown[open],
.tw-dw-dropdown {
    z-index: 200 !important;
    position: relative !important;
}
details.tw-dw-dropdown ul,
details ul.tw-z-10,
.tw-dw-dropdown ul {
    z-index: 200 !important;
}

/* Header dropdown menus (user menu, action menu, details dropdowns) */
body.formonix-dark details ul,
body.formonix-dark details ul.tw-bg-white,
body.formonix-dark details ul[class*="tw-bg-white"],
body.formonix-dark .tw-dw-dropdown ul,
body.formonix-dark .no-print details ul.tw-bg-white,
body.formonix-dark .no-print details ul[class*="tw-bg-white"] {
    background: #1a1e35 !important;
    background-color: #1a1e35 !important;
    border: 1px solid rgba(79,142,247,0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

body.formonix-dark details ul a,
body.formonix-dark .tw-dw-dropdown ul a,
body.formonix-dark .no-print details ul a {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark details ul a:hover,
body.formonix-dark .tw-dw-dropdown ul a:hover,
body.formonix-dark .no-print details ul a:hover {
    color: var(--fm-text-primary) !important;
    background: rgba(79,142,247,0.12) !important;
}

/* "Signed in as" text in user dropdown */
body.formonix-dark details ul p,
body.formonix-dark details ul .tw-text-sm,
body.formonix-dark .no-print details ul .tw-text-sm {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark details ul .tw-text-gray-900,
body.formonix-dark details ul .tw-font-medium,
body.formonix-dark .no-print details ul .tw-text-gray-900 {
    color: var(--fm-text-primary) !important;
}

/* Ring/border override for dropdown */
body.formonix-dark details ul.tw-ring-gray-200,
body.formonix-dark details ul[class*="tw-ring-gray-200"] {
    --tw-ring-color: rgba(79,142,247,0.2) !important;
}

/* ===================================================================
   DASHBOARD — Welcome header & gradient backgrounds
   =================================================================== */

/* Welcome header gradient area */
body.formonix-dark div[class*="tw-pb-6"][class*="tw-bg-gradient-to-r"],
body.formonix-dark div[class*="tw-pb-"][class*="tw-bg-gradient-to-r"][class*="tw-from-"] {
    background: linear-gradient(135deg, rgba(79,142,247,0.08) 0%, rgba(168,85,247,0.05) 50%, var(--fm-bg-main) 100%) !important;
    border-bottom: 1px solid var(--fm-border) !important;
}

/* Welcome text */
body.formonix-dark .text-white {
    color: var(--fm-text-primary) !important;
}

/* SECOND ROW GRADIENT BACKDROP — this is the blue gradient behind purchase cards */
body.formonix-dark .tw-relative > .tw-absolute.tw-inset-0 > div[class*="tw-bg-gradient-to-r"] {
    background: transparent !important;
}

body.formonix-dark .tw-relative > .tw-absolute.tw-inset-0 {
    display: none !important;
}

/* Date filter button */
body.formonix-dark #dashboard_date_filter {
    background: rgba(255,255,255,0.06) !important;
    color: var(--fm-text-primary) !important;
    border: 1px solid var(--fm-border) !important;
}

body.formonix-dark #dashboard_date_filter:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* ===================================================================
   STAT CARDS — Glassmorphism style
   =================================================================== */

body.formonix-dark .tw-bg-white {
    background: var(--fm-bg-card) !important;
    border: 1px solid var(--fm-border) !important;
    /* NOTE: Do NOT use backdrop-filter here — it creates stacking contexts
       that trap modals. .tw-bg-white is too broad a selector. */
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .tw-ring-gray-200 {
    --tw-ring-color: var(--fm-border) !important;
}

body.formonix-dark .tw-shadow-sm {
    box-shadow: 0 2px 16px rgba(0,0,0,0.2) !important;
}

/* Stat card hover */
body.formonix-dark .tw-rounded-xl.tw-ring-1:hover,
body.formonix-dark [class*="hover\:tw-shadow-md"]:hover {
    border-color: var(--fm-border-hover) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

body.formonix-dark .tw-rounded-xl {
    border-radius: var(--fm-radius-lg) !important;
}

/* ---- Text color overrides ---- */
body.formonix-dark .tw-text-gray-900 { color: var(--fm-text-primary) !important; }
body.formonix-dark .tw-text-gray-800 { color: var(--fm-text-primary) !important; }
body.formonix-dark .tw-text-gray-700 { color: var(--fm-text-secondary) !important; }
body.formonix-dark .tw-text-gray-600 { color: var(--fm-text-secondary) !important; }
body.formonix-dark .tw-text-gray-500 { color: var(--fm-text-secondary) !important; }
body.formonix-dark .tw-text-gray-400 { color: var(--fm-text-muted) !important; }

/* ---- Preserve tw-text-white on gradient/colored buttons ---- */
body.formonix-dark .tw-text-white {
    color: #fff !important;
}

body.formonix-dark .tw-dw-btn,
body.formonix-dark a.tw-dw-btn,
body.formonix-dark button.tw-dw-btn {
    color: #fff !important;
}

body.formonix-dark .tw-dw-btn *,
body.formonix-dark a.tw-dw-btn *,
body.formonix-dark button.tw-dw-btn * {
    color: #fff !important;
}

/* Any element with gradient bg — ensure white text */
body.formonix-dark [class*="tw-bg-gradient-to-"] {
    color: #fff !important;
}
body.formonix-dark [class*="tw-bg-gradient-to-"] * {
    color: #fff !important;
}

/* ---- Stat card icon backgrounds — glowing ---- */
body.formonix-dark .tw-bg-sky-100,
body.formonix-dark .bg-sky-100 {
    background: rgba(79,142,247,0.12) !important;
    box-shadow: 0 0 16px rgba(79,142,247,0.15) !important;
}
body.formonix-dark .tw-text-sky-500 { color: var(--fm-accent-blue) !important; }

body.formonix-dark .tw-bg-green-100 {
    background: rgba(29,209,161,0.12) !important;
    box-shadow: 0 0 16px rgba(29,209,161,0.15) !important;
}
body.formonix-dark .tw-text-green-500 { color: var(--fm-accent-green) !important; }

body.formonix-dark .tw-bg-yellow-100 {
    background: rgba(255,198,74,0.12) !important;
    box-shadow: 0 0 16px rgba(255,198,74,0.15) !important;
}
body.formonix-dark .tw-text-yellow-500 { color: var(--fm-accent-yellow) !important; }

body.formonix-dark .tw-bg-red-100 {
    background: rgba(255,107,157,0.12) !important;
    box-shadow: 0 0 16px rgba(255,107,157,0.15) !important;
}
body.formonix-dark .tw-text-red-500 { color: var(--fm-accent-pink) !important; }

body.formonix-dark .tw-bg-purple-100 {
    background: rgba(168,85,247,0.12) !important;
    box-shadow: 0 0 16px rgba(168,85,247,0.15) !important;
}
body.formonix-dark .tw-text-purple-500 { color: var(--fm-accent-purple) !important; }

body.formonix-dark .tw-bg-orange-100 {
    background: rgba(255,198,74,0.12) !important;
    box-shadow: 0 0 16px rgba(255,198,74,0.12) !important;
}

/* ===================================================================
   STAGGERED ENTRANCE ANIMATION
   =================================================================== */

@keyframes fm-fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

body.formonix-dark .tw-grid > .tw-rounded-xl:nth-child(1),
body.formonix-dark .tw-grid > div[class*="tw-ring-1"]:nth-child(1) { animation: fm-fadeUp 0.45s ease both 0.05s; }
body.formonix-dark .tw-grid > .tw-rounded-xl:nth-child(2),
body.formonix-dark .tw-grid > div[class*="tw-ring-1"]:nth-child(2) { animation: fm-fadeUp 0.45s ease both 0.12s; }
body.formonix-dark .tw-grid > .tw-rounded-xl:nth-child(3),
body.formonix-dark .tw-grid > div[class*="tw-ring-1"]:nth-child(3) { animation: fm-fadeUp 0.45s ease both 0.19s; }
body.formonix-dark .tw-grid > .tw-rounded-xl:nth-child(4),
body.formonix-dark .tw-grid > div[class*="tw-ring-1"]:nth-child(4) { animation: fm-fadeUp 0.45s ease both 0.26s; }

/* ===================================================================
   CHARTS — Highcharts dark theme
   =================================================================== */

body.formonix-dark .tw-bg-gray-50 {
    background: var(--fm-bg-card) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .tw-border-gray-200 { border-color: var(--fm-border) !important; }
body.formonix-dark .tw-border-dashed { border-color: var(--fm-border) !important; }
body.formonix-dark .tw-divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fm-border) !important; }

body.formonix-dark .highcharts-background { fill: transparent !important; }
body.formonix-dark .highcharts-title,
body.formonix-dark .highcharts-subtitle { fill: var(--fm-text-primary) !important; }
body.formonix-dark .highcharts-axis-title { fill: var(--fm-text-muted) !important; }
body.formonix-dark .highcharts-axis-labels text { fill: var(--fm-text-muted) !important; }
body.formonix-dark .highcharts-grid-line { stroke: rgba(255,255,255,0.05) !important; }
body.formonix-dark .highcharts-tick { stroke: rgba(255,255,255,0.05) !important; }
body.formonix-dark .highcharts-legend-item text { fill: var(--fm-text-secondary) !important; }
body.formonix-dark .highcharts-tooltip-box {
    fill: var(--fm-bg-card-solid) !important;
    stroke: var(--fm-border) !important;
}
body.formonix-dark .highcharts-tooltip text { fill: var(--fm-text-primary) !important; }
body.formonix-dark .highcharts-legend-box { fill: transparent !important; }
body.formonix-dark .highcharts-plot-border { stroke: var(--fm-border) !important; }

/* ===================================================================
   DATATABLES
   =================================================================== */

body.formonix-dark .table {
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .table > thead > tr > th {
    background: rgba(255,255,255,0.03) !important;
    color: var(--fm-text-muted) !important;
    border-bottom: 1px solid var(--fm-border) !important;
    border-color: var(--fm-border) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 600 !important;
    font-family: var(--fm-font-body) !important;
}

body.formonix-dark .table > tbody > tr > td {
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
    border-color: rgba(255,255,255,0.04) !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .table > tbody > tr:hover > td {
    background: rgba(79,142,247,0.05) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(255,255,255,0.02) !important;
}

body.formonix-dark .table-striped > tbody > tr:nth-of-type(even) > td {
    background: transparent !important;
}

body.formonix-dark .table-bordered,
body.formonix-dark .table-bordered > thead > tr > th,
body.formonix-dark .table-bordered > thead > tr > td,
body.formonix-dark .table-bordered > tbody > tr > th,
body.formonix-dark .table-bordered > tbody > tr > td,
body.formonix-dark .table-bordered > tfoot > tr > th,
body.formonix-dark .table-bordered > tfoot > tr > td {
    border-color: var(--fm-border) !important;
}

body.formonix-dark .table > tfoot > tr > td,
body.formonix-dark .table > tfoot > tr > th {
    background: rgba(255,255,255,0.03) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* DataTables wrapper */
body.formonix-dark .dataTables_wrapper { color: var(--fm-text-secondary) !important; }

body.formonix-dark .dataTables_wrapper .dataTables_length,
body.formonix-dark .dataTables_wrapper .dataTables_filter,
body.formonix-dark .dataTables_wrapper .dataTables_info,
body.formonix-dark .dataTables_wrapper .dataTables_paginate {
    color: var(--fm-text-muted) !important;
}

body.formonix-dark .dataTables_wrapper .dataTables_length select,
body.formonix-dark .dataTables_wrapper .dataTables_filter input {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-sm) !important;
    padding: 6px 12px !important;
}

body.formonix-dark .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--fm-accent-blue) !important;
    box-shadow: var(--fm-glow-blue) !important;
    outline: none !important;
}

body.formonix-dark .dataTables_wrapper .dataTables_paginate .paginate_button,
body.formonix-dark .dataTables_paginate .paginate_button,
body.formonix-dark .dataTables_paginate .paginate_button.previous,
body.formonix-dark .dataTables_paginate .paginate_button.next,
body.formonix-dark .dataTables_paginate > span > .paginate_button,
body.formonix-dark .dataTables_paginate > .paginate_button {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(79,142,247,0.18), rgba(168,85,247,0.12)) !important;
    background-color: transparent !important;
    border: 1px solid rgba(79,142,247,0.3) !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
    padding: 6px 14px !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.formonix-dark .dataTables_paginate .paginate_button:hover,
body.formonix-dark .dataTables_paginate .paginate_button.previous:hover,
body.formonix-dark .dataTables_paginate .paginate_button.next:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--fm-accent-blue), var(--fm-accent-purple)) !important;
    border-color: var(--fm-accent-blue) !important;
    box-shadow: 0 2px 12px rgba(79,142,247,0.35) !important;
}

body.formonix-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.formonix-dark .dataTables_paginate .paginate_button.current,
body.formonix-dark .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--fm-accent-blue), var(--fm-accent-purple)) !important;
    border-color: var(--fm-accent-blue) !important;
    box-shadow: 0 2px 12px rgba(79,142,247,0.35) !important;
    font-weight: 600 !important;
}

body.formonix-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.formonix-dark .dataTables_paginate .paginate_button.disabled,
body.formonix-dark .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--fm-text-muted) !important;
    background: rgba(255,255,255,0.03) !important;
    border-color: var(--fm-border) !important;
    box-shadow: none !important;
    cursor: default !important;
    opacity: 0.5 !important;
}

body.formonix-dark .dataTables_scrollHead { background: var(--fm-bg-card-solid) !important; }

/* ---- AGGRESSIVE table cell overrides ----
   DataTables JS applies inline background-color to cells.
   We need maximum specificity + !important to override them. */
body.formonix-dark table td,
body.formonix-dark table th,
body.formonix-dark table tbody td,
body.formonix-dark table tbody tr td,
body.formonix-dark .table td,
body.formonix-dark .table th,
body.formonix-dark .table tbody td,
body.formonix-dark .table tbody tr td,
body.formonix-dark .table-striped > tbody > tr > td,
body.formonix-dark .table-bordered > tbody > tr > td,
body.formonix-dark .dataTables_wrapper table td,
body.formonix-dark .dataTables_wrapper table tbody td,
body.formonix-dark .dataTables_wrapper .table > tbody > tr > td,
body.formonix-dark .dataTables_wrapper .table > tbody > tr.odd > td,
body.formonix-dark .dataTables_wrapper .table > tbody > tr.even > td,
body.formonix-dark .table > tbody > tr.odd > td,
body.formonix-dark .table > tbody > tr.even > td,
body.formonix-dark table tbody tr td.sorting_1,
body.formonix-dark .table > tbody > tr > td.sorting_1,
body.formonix-dark .dataTables_wrapper table tbody tr td.sorting_1 {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
    border-color: rgba(255,255,255,0.04) !important;
}

body.formonix-dark table tbody tr:hover td,
body.formonix-dark .table > tbody > tr:hover > td,
body.formonix-dark .dataTables_wrapper .table > tbody > tr.odd:hover > td,
body.formonix-dark .dataTables_wrapper .table > tbody > tr.even:hover > td,
body.formonix-dark .dataTables_wrapper table tbody tr:hover td,
body.formonix-dark .dataTables_wrapper table tbody tr:hover td.sorting_1 {
    background-color: rgba(79,142,247,0.05) !important;
    background: rgba(79,142,247,0.05) !important;
    color: var(--fm-text-primary) !important;
}

/* Stripe odd rows slightly visible */
body.formonix-dark .table-striped > tbody > tr:nth-of-type(odd) > td,
body.formonix-dark .dataTables_wrapper .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(255,255,255,0.015) !important;
    background: rgba(255,255,255,0.015) !important;
}

body.formonix-dark .dataTables_empty,
body.formonix-dark td.dataTables_empty,
body.formonix-dark table td.dataTables_empty,
body.formonix-dark .dataTables_wrapper table td.dataTables_empty {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--fm-text-muted) !important;
}

/* Table wrapper/container itself */
body.formonix-dark table,
body.formonix-dark .table,
body.formonix-dark .table-bordered,
body.formonix-dark .table-striped,
body.formonix-dark .dataTables_wrapper table {
    background-color: transparent !important;
    background: transparent !important;
}

/* Export / dt-buttons */
body.formonix-dark .dt-buttons .dt-button,
body.formonix-dark .dt-buttons a.dt-button {
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: 6px !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .dt-buttons .dt-button:hover,
body.formonix-dark .dt-buttons a.dt-button:hover {
    background: rgba(79,142,247,0.08) !important;
    color: var(--fm-accent-blue) !important;
    border-color: var(--fm-accent-blue) !important;
}

body.formonix-dark .dataTables_processing {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-accent-blue) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-md) !important;
}

/* DataTables export button collection dropdown */
body.formonix-dark ul.dt-button-collection,
body.formonix-dark .dt-button-collection {
    background: #1a1e35 !important;
    background-color: #1a1e35 !important;
    border: 1px solid var(--fm-border) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}

body.formonix-dark .dt-button-collection li a,
body.formonix-dark .dt-button-collection li button {
    color: var(--fm-text-secondary) !important;
    background: transparent !important;
}

body.formonix-dark .dt-button-collection li a:hover,
body.formonix-dark .dt-button-collection li button:hover {
    color: var(--fm-text-primary) !important;
    background: rgba(79,142,247,0.12) !important;
}

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

body.formonix-dark .form-control {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-sm) !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .form-control:focus {
    border-color: var(--fm-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(79,142,247,0.15) !important;
    background: rgba(255,255,255,0.08) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .form-control::placeholder { color: var(--fm-text-muted) !important; }

body.formonix-dark .input-group-addon {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--fm-border) !important;
    color: var(--fm-text-secondary) !important;
}

/* ===================================================================
   SELECT2 DARK
   =================================================================== */

body.formonix-dark .select2-container--default .select2-selection--single {
    background: var(--fm-bg-input) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-sm) !important;
    height: 36px !important;
}

body.formonix-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fm-text-primary) !important;
    line-height: 34px !important;
}

body.formonix-dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--fm-text-muted) !important;
}

body.formonix-dark .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

body.formonix-dark .select2-container--default .select2-selection--multiple {
    background: var(--fm-bg-input) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-sm) !important;
}

body.formonix-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--fm-accent-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
}

body.formonix-dark .select2-dropdown {
    background: var(--fm-bg-card-solid) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-sm) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}

body.formonix-dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: 6px !important;
}

body.formonix-dark .select2-container--default .select2-results__option {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--fm-accent-blue) !important;
    color: white !important;
}

body.formonix-dark .select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(79,142,247,0.15) !important;
    color: var(--fm-accent-blue) !important;
}

/* ===================================================================
   BUTTONS — Gradient primary, transparent secondary
   =================================================================== */

body.formonix-dark .btn-primary {
    background: linear-gradient(135deg, var(--fm-accent-blue) 0%, var(--fm-accent-purple) 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: var(--fm-radius-sm) !important;
    transition: all var(--fm-transition) !important;
    box-shadow: 0 2px 8px rgba(79,142,247,0.25) !important;
}

body.formonix-dark .btn-primary:hover,
body.formonix-dark .btn-primary:focus {
    box-shadow: 0 4px 16px rgba(79,142,247,0.4) !important;
    transform: translateY(-1px);
}

body.formonix-dark .btn-default {
    background: transparent !important;
    border: 1px solid var(--fm-border) !important;
    color: var(--fm-text-secondary) !important;
    border-radius: var(--fm-radius-sm) !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .btn-default:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border-hover) !important;
}

body.formonix-dark .btn-success {
    background: var(--fm-accent-green) !important;
    border-color: var(--fm-accent-green) !important;
    color: #0b0e1a !important;
    border-radius: var(--fm-radius-sm) !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .btn-success:hover {
    box-shadow: var(--fm-glow-green) !important;
    transform: translateY(-1px);
}

body.formonix-dark .btn-danger {
    background: var(--fm-accent-pink) !important;
    border-color: var(--fm-accent-pink) !important;
    color: white !important;
    border-radius: var(--fm-radius-sm) !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .btn-danger:hover {
    box-shadow: var(--fm-glow-pink) !important;
    transform: translateY(-1px);
}

body.formonix-dark .btn-warning {
    background: var(--fm-accent-yellow) !important;
    border-color: var(--fm-accent-yellow) !important;
    color: #0b0e1a !important;
    border-radius: var(--fm-radius-sm) !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .btn-warning:hover {
    box-shadow: var(--fm-glow-yellow) !important;
    transform: translateY(-1px);
}

body.formonix-dark .btn-info {
    background: var(--fm-accent-cyan) !important;
    border-color: var(--fm-accent-cyan) !important;
    color: #0b0e1a !important;
    border-radius: var(--fm-radius-sm) !important;
    transition: all var(--fm-transition) !important;
}

/* ===================================================================
   MODALS
   =================================================================== */

body.formonix-dark .modal-content {
    background: var(--fm-bg-card-solid) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-lg) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .modal-header {
    border-bottom: 1px solid var(--fm-border) !important;
    background: rgba(255,255,255,0.03) !important;
    border-radius: var(--fm-radius-lg) var(--fm-radius-lg) 0 0 !important;
}

body.formonix-dark .modal-header .modal-title { color: var(--fm-text-primary) !important; }
body.formonix-dark .modal-header .close { color: #ffffff !important; text-shadow: none !important; opacity: 1 !important; cursor: pointer !important; z-index: 10 !important; position: relative !important; font-size: 24px !important; }

body.formonix-dark .modal-footer {
    border-top: 1px solid var(--fm-border) !important;
    background: rgba(255,255,255,0.02) !important;
    border-radius: 0 0 var(--fm-radius-lg) var(--fm-radius-lg) !important;
}

body.formonix-dark .modal-body { color: var(--fm-text-primary) !important; }
body.formonix-dark .modal-backdrop.in { opacity: 0.6 !important; }

/* Close button hover for modals */
body.formonix-dark .modal-header .close:hover,
body.formonix-dark .modal-header .close:focus {
    color: var(--fm-accent-blue) !important;
    opacity: 1 !important;
}

/* Ensure all modal inner elements are readable */
body.formonix-dark .modal-body p,
body.formonix-dark .modal-body span,
body.formonix-dark .modal-body div,
body.formonix-dark .modal-body td,
body.formonix-dark .modal-body th,
body.formonix-dark .modal-body li,
body.formonix-dark .modal-body h1,
body.formonix-dark .modal-body h2,
body.formonix-dark .modal-body h3,
body.formonix-dark .modal-body h4,
body.formonix-dark .modal-body h5,
body.formonix-dark .modal-body h6 {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .modal-body .text-muted {
    color: var(--fm-text-secondary) !important;
}

/* ===================================================================
   DROPDOWN MENUS
   =================================================================== */

body.formonix-dark .dropdown-menu {
    background: var(--fm-bg-card-solid) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-md) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}

body.formonix-dark .dropdown-menu > li > a {
    color: var(--fm-text-secondary) !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .dropdown-menu > li > a:hover,
body.formonix-dark .dropdown-menu > li > a:focus {
    background: rgba(79,142,247,0.08) !important;
    color: var(--fm-accent-blue) !important;
}

body.formonix-dark .dropdown-menu .divider {
    background: var(--fm-border) !important;
}

/* ===================================================================
   LABELS / BADGES — Pill style
   =================================================================== */

body.formonix-dark .label, body.formonix-dark .badge {
    border-radius: 20px !important;
    padding: 4px 10px !important;
    font-weight: 500 !important;
    font-size: 11px !important;
}

body.formonix-dark .label-success, body.formonix-dark .badge-success {
    background: rgba(29,209,161,0.15) !important;
    color: var(--fm-accent-green) !important;
}

body.formonix-dark .label-danger, body.formonix-dark .badge-danger {
    background: rgba(255,107,157,0.15) !important;
    color: var(--fm-accent-pink) !important;
}

body.formonix-dark .label-warning, body.formonix-dark .badge-warning {
    background: rgba(255,198,74,0.15) !important;
    color: var(--fm-accent-yellow) !important;
}

body.formonix-dark .label-info, body.formonix-dark .badge-info {
    background: rgba(6,182,212,0.15) !important;
    color: var(--fm-accent-cyan) !important;
}

body.formonix-dark .label-primary, body.formonix-dark .badge-primary {
    background: rgba(79,142,247,0.15) !important;
    color: var(--fm-accent-blue) !important;
}

body.formonix-dark .label-default {
    background: rgba(255,255,255,0.08) !important;
    color: var(--fm-text-secondary) !important;
}

/* ===================================================================
   BOX / PANEL / WELL
   =================================================================== */

body.formonix-dark .box,
body.formonix-dark .box-default,
body.formonix-dark .box-primary,
body.formonix-dark .box-info,
body.formonix-dark .box-success,
body.formonix-dark .box-warning,
body.formonix-dark .box-danger,
body.formonix-dark .box-solid {
    background-color: transparent !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-md) !important;
    box-shadow: none !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .box-header,
body.formonix-dark .box-header.with-border {
    background-color: transparent !important;
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid var(--fm-border) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .box-header .box-title { color: var(--fm-text-primary) !important; }

body.formonix-dark .box-body {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .box-footer {
    background-color: transparent !important;
    background: rgba(255,255,255,0.02) !important;
    border-top: 1px solid var(--fm-border) !important;
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .panel,
body.formonix-dark .panel-default,
body.formonix-dark .panel-primary,
body.formonix-dark .panel-info,
body.formonix-dark .panel-success,
body.formonix-dark .panel-warning,
body.formonix-dark .panel-danger,
body.formonix-dark .well {
    background-color: transparent !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--fm-border) !important;
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .panel-heading,
body.formonix-dark .panel-default > .panel-heading,
body.formonix-dark .panel-primary > .panel-heading,
body.formonix-dark .panel-info > .panel-heading {
    background-color: transparent !important;
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid var(--fm-border) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .panel-body {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .panel-footer {
    background-color: transparent !important;
    background: rgba(255,255,255,0.02) !important;
    border-top: 1px solid var(--fm-border) !important;
}

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

body.formonix-dark .nav-tabs {
    border-bottom: 1px solid var(--fm-border) !important;
}

body.formonix-dark .nav-tabs > li > a {
    color: var(--fm-text-muted) !important;
    border: none !important;
    background: transparent !important;
    transition: all var(--fm-transition) !important;
}

body.formonix-dark .nav-tabs > li > a:hover {
    color: var(--fm-accent-blue) !important;
    background: rgba(79,142,247,0.05) !important;
    border-color: transparent !important;
}

body.formonix-dark .nav-tabs > li.active > a,
body.formonix-dark .nav-tabs > li.active > a:hover,
body.formonix-dark .nav-tabs > li.active > a:focus {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-accent-blue) !important;
    border: 1px solid var(--fm-border) !important;
    border-bottom-color: var(--fm-bg-main) !important;
}

body.formonix-dark .tab-content {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-secondary) !important;
}

/* ===================================================================
   POPOVER / TOOLTIP
   =================================================================== */

body.formonix-dark .popover {
    background: var(--fm-bg-card-solid) !important;
    border: 1px solid var(--fm-border) !important;
    color: var(--fm-text-secondary) !important;
    border-radius: var(--fm-radius-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

body.formonix-dark .popover-title {
    background: rgba(255,255,255,0.04) !important;
    color: var(--fm-text-primary) !important;
    border-bottom: 1px solid var(--fm-border) !important;
}

body.formonix-dark .popover-content { color: var(--fm-text-secondary) !important; }

body.formonix-dark .popover.bottom > .arrow::after { border-bottom-color: var(--fm-bg-card-solid) !important; }
body.formonix-dark .popover.top > .arrow::after { border-top-color: var(--fm-bg-card-solid) !important; }
body.formonix-dark .popover.left > .arrow::after { border-left-color: var(--fm-bg-card-solid) !important; }
body.formonix-dark .popover.right > .arrow::after { border-right-color: var(--fm-bg-card-solid) !important; }

body.formonix-dark .tooltip-inner {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: 6px !important;
}

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

body.formonix-dark footer,
body.formonix-dark .main-footer {
    background: rgba(255,255,255,0.02) !important;
    border-top: 1px solid var(--fm-border) !important;
    color: var(--fm-text-muted) !important;
}

/* ===================================================================
   ALERT BOXES
   =================================================================== */

body.formonix-dark .alert { border-radius: var(--fm-radius-md) !important; }

body.formonix-dark .alert-info {
    background: rgba(6,182,212,0.08) !important;
    border-color: rgba(6,182,212,0.2) !important;
    color: var(--fm-accent-cyan) !important;
}

body.formonix-dark .alert-warning {
    background: rgba(255,198,74,0.08) !important;
    border-color: rgba(255,198,74,0.2) !important;
    color: var(--fm-accent-yellow) !important;
}

body.formonix-dark .alert-danger {
    background: rgba(255,107,157,0.08) !important;
    border-color: rgba(255,107,157,0.2) !important;
    color: var(--fm-accent-pink) !important;
}

body.formonix-dark .alert-success {
    background: rgba(29,209,161,0.08) !important;
    border-color: rgba(29,209,161,0.2) !important;
    color: var(--fm-accent-green) !important;
}

/* ===================================================================
   TEXT / MISC OVERRIDES
   =================================================================== */

body.formonix-dark .text-muted { color: var(--fm-text-muted) !important; }
body.formonix-dark .text-primary { color: var(--fm-accent-blue) !important; }
body.formonix-dark .text-info { color: var(--fm-accent-cyan) !important; }
body.formonix-dark .text-success { color: var(--fm-accent-green) !important; }
body.formonix-dark .text-warning { color: var(--fm-accent-yellow) !important; }
body.formonix-dark .text-danger { color: var(--fm-accent-pink) !important; }

body.formonix-dark a { color: var(--fm-accent-blue); transition: color var(--fm-transition); }
body.formonix-dark a:hover { color: #7ab0ff; }
body.formonix-dark .help-block { color: var(--fm-text-muted) !important; }

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

body.formonix-dark .breadcrumb {
    background: rgba(255,255,255,0.03) !important;
    border-radius: var(--fm-radius-sm) !important;
}
body.formonix-dark .breadcrumb > li + li:before { color: var(--fm-text-muted) !important; }
body.formonix-dark .breadcrumb > .active { color: var(--fm-text-muted) !important; }

/* ===================================================================
   PROGRESS BARS
   =================================================================== */

body.formonix-dark .progress {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 20px !important;
}

/* ===================================================================
   CONTENT HEADER
   =================================================================== */

body.formonix-dark .content-header { background: transparent !important; }
body.formonix-dark .content-header > h1 { color: var(--fm-text-primary) !important; }
body.formonix-dark .content-header h1 small { color: var(--fm-text-secondary) !important; }

/* ===================================================================
   NAV-TABS-CUSTOM (AdminLTE tab container — has white bg by default)
   =================================================================== */

body.formonix-dark .nav-tabs-custom {
    background-color: transparent !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-md) !important;
    box-shadow: none !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .nav-tabs-custom > .nav-tabs {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid var(--fm-border) !important;
}

body.formonix-dark .nav-tabs-custom > .nav-tabs > li > a {
    background: transparent !important;
    color: var(--fm-text-secondary) !important;
    border: none !important;
}

body.formonix-dark .nav-tabs-custom > .nav-tabs > li.active > a,
body.formonix-dark .nav-tabs-custom > .nav-tabs > li.active > a:hover,
body.formonix-dark .nav-tabs-custom > .nav-tabs > li.active > a:focus {
    background: transparent !important;
    color: var(--fm-accent-blue) !important;
    border-bottom: 2px solid var(--fm-accent-blue) !important;
}

body.formonix-dark .nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--fm-text-primary) !important;
    background: rgba(255,255,255,0.04) !important;
}

body.formonix-dark .nav-tabs-custom > .tab-content {
    background: transparent !important;
    color: var(--fm-text-primary) !important;
}

/* ===================================================================
   TEXT COLOR OVERRIDES
   =================================================================== */

body.formonix-dark .tw-text-black {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .tw-text-gray-900 {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .tw-text-gray-800 {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .tw-text-gray-600 {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .tw-text-gray-500 {
    color: var(--fm-text-secondary) !important;
}

/* Section.content background */
body.formonix-dark section.content {
    background: transparent !important;
}

/* ===================================================================
   BG OVERRIDES
   =================================================================== */

body.formonix-dark .bg-gray { background: rgba(255,255,255,0.03) !important; }
body.formonix-dark .bg-white { background: var(--fm-bg-card) !important; }

/* Also override tw-bg-gray-200 used in sidebar active states */
body.formonix-dark .tw-bg-gray-200 {
    background: rgba(79,142,247,0.08) !important;
}

body.formonix-dark .tw-bg-gray-100 {
    background: var(--fm-bg-main) !important;
}

/* Override the hover:tw-bg-gray-100 in sidebar and elsewhere */
body.formonix-dark [class*="hover\:tw-bg-gray-100"]:hover {
    background: rgba(79,142,247,0.08) !important;
}

/* Override hover:tw-text-gray-900 */
body.formonix-dark [class*="hover\:tw-text-gray-900"]:hover {
    color: var(--fm-text-primary) !important;
}

/* Override tw-ring-gray-200 */
body.formonix-dark .tw-ring-gray-200,
body.formonix-dark [class*="tw-ring-gray-200"] {
    --tw-ring-color: var(--fm-border) !important;
}

/* Override tw-border-r for sidebar */
body.formonix-dark .tw-border-r {
    border-color: var(--fm-border) !important;
}

body.formonix-dark .tw-border-gray-200 {
    border-color: var(--fm-border) !important;
}

/* The vertical line in sidebar child menu */
body.formonix-dark .chiled .tw-bg-gray-200 {
    background: rgba(79,142,247,0.15) !important;
}

/* ===================================================================
   DATE RANGE PICKER
   =================================================================== */

body.formonix-dark .daterangepicker {
    background: var(--fm-bg-card-solid) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-md) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .daterangepicker .calendar-table {
    background: transparent !important;
    border: none !important;
}

body.formonix-dark .daterangepicker td.off,
body.formonix-dark .daterangepicker td.off.in-range {
    background: transparent !important;
    color: var(--fm-text-muted) !important;
}

body.formonix-dark .daterangepicker td.active,
body.formonix-dark .daterangepicker td.active:hover {
    background: var(--fm-accent-blue) !important;
    color: white !important;
}

body.formonix-dark .daterangepicker td.in-range {
    background: rgba(79,142,247,0.12) !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .daterangepicker th { color: var(--fm-text-secondary) !important; }
body.formonix-dark .daterangepicker td { color: var(--fm-text-primary) !important; }
body.formonix-dark .daterangepicker td:hover { background: rgba(79,142,247,0.15) !important; }

body.formonix-dark .daterangepicker .ranges li { color: var(--fm-text-secondary) !important; }
body.formonix-dark .daterangepicker .ranges li:hover {
    background: rgba(79,142,247,0.08) !important;
    color: var(--fm-accent-blue) !important;
}
body.formonix-dark .daterangepicker .ranges li.active {
    background: var(--fm-accent-blue) !important;
    color: white !important;
}

body.formonix-dark .daterangepicker select.monthselect,
body.formonix-dark .daterangepicker select.yearselect {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border: 1px solid var(--fm-border) !important;
}

/* ===================================================================
   CALENDAR
   =================================================================== */

body.formonix-dark .fc-unthemed th,
body.formonix-dark .fc-unthemed td,
body.formonix-dark .fc-unthemed thead,
body.formonix-dark .fc-unthemed tbody,
body.formonix-dark .fc-unthemed .fc-divider,
body.formonix-dark .fc-unthemed .fc-row {
    border-color: var(--fm-border) !important;
}

body.formonix-dark .fc-unthemed .fc-today {
    background: rgba(79,142,247,0.08) !important;
}

/* ===================================================================
   HR / DIVIDERS
   =================================================================== */

body.formonix-dark hr { border-color: var(--fm-border) !important; }
body.formonix-dark .tw-border-2 { border-color: var(--fm-border) !important; }

/* ===================================================================
   NOTIFICATION DROPDOWN
   =================================================================== */

body.formonix-dark .notifications-menu .dropdown-menu,
body.formonix-dark .messages-menu .dropdown-menu {
    background: var(--fm-bg-card-solid) !important;
}

body.formonix-dark .notifications-menu .dropdown-menu li.header,
body.formonix-dark .messages-menu .dropdown-menu li.header {
    background: rgba(255,255,255,0.04) !important;
    color: var(--fm-text-primary) !important;
    border-bottom: 1px solid var(--fm-border) !important;
}

body.formonix-dark .notifications-menu .dropdown-menu li.footer,
body.formonix-dark .messages-menu .dropdown-menu li.footer {
    background: rgba(255,255,255,0.03) !important;
    border-top: 1px solid var(--fm-border) !important;
}

body.formonix-dark .notifications-menu .dropdown-menu li.footer a,
body.formonix-dark .messages-menu .dropdown-menu li.footer a {
    color: var(--fm-accent-blue) !important;
}

/* ===================================================================
   OVERLAY
   =================================================================== */

body.formonix-dark .overlay {
    background: rgba(11,14,26,0.85) !important;
}

/* ===================================================================
   SCROLL TOP
   =================================================================== */

body.formonix-dark .scrolltop .scroll {
    background: linear-gradient(135deg, var(--fm-accent-blue), var(--fm-accent-purple)) !important;
    color: white !important;
    border-radius: var(--fm-radius-sm) !important;
    box-shadow: var(--fm-glow-blue) !important;
}

/* ===================================================================
   SWEETALERT
   =================================================================== */

body.formonix-dark .swal2-popup {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-lg) !important;
}

body.formonix-dark .swal2-title { color: var(--fm-text-primary) !important; }
body.formonix-dark .swal2-content,
body.formonix-dark .swal2-html-container { color: var(--fm-text-secondary) !important; }

/* ===================================================================
   TOASTR
   =================================================================== */

body.formonix-dark .toast {
    background-color: var(--fm-bg-card-solid) !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

body.formonix-dark .toast-success { 
    background-color: var(--fm-accent-green) !important; 
    border: none !important;
}
body.formonix-dark .toast-error { 
    background-color: var(--fm-accent-pink) !important; 
    border: none !important;
}
body.formonix-dark .toast-warning { 
    background-color: var(--fm-accent-yellow) !important; 
    border: none !important;
}
body.formonix-dark .toast-info { 
    background-color: var(--fm-accent-blue) !important; 
    border: none !important;
}
body.formonix-dark .toast-title { color: #ffffff !important; }
body.formonix-dark .toast-message { color: rgba(255, 255, 255, 0.9) !important; }

/* ===================================================================
   GLOBAL SMOOTH TRANSITIONS
   =================================================================== */

body.formonix-dark .btn,
body.formonix-dark .form-control,
body.formonix-dark .tw-bg-white,
body.formonix-dark .box,
body.formonix-dark .table > tbody > tr > td,
body.formonix-dark .nav-tabs > li > a,
body.formonix-dark .dropdown-menu > li > a {
    transition: all var(--fm-transition) !important;
}

/* ===================================================================
   THEME TOGGLE BUTTON
   =================================================================== */

.formonix-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    transition: all 0.22s ease;
    user-select: none;
    font-size: 13px;
    font-weight: 500;
    color: white;
}

.formonix-theme-toggle:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.formonix-toggle-track {
    position: relative;
    width: 38px;
    height: 20px;
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.formonix-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

body.formonix-dark .formonix-toggle-track {
    background: linear-gradient(135deg, #4f8ef7, #a855f7);
}

body.formonix-dark .formonix-toggle-track::after {
    left: 20px;
}

.formonix-toggle-label {
    font-size: 12px;
    white-space: nowrap;
}

/* Toggle icons */
.formonix-theme-toggle .fm-sun,
.formonix-theme-toggle .fm-moon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.formonix-dark .formonix-theme-toggle .fm-sun { display: none; }
body.formonix-dark .formonix-theme-toggle .fm-moon { display: inline-block; }
body:not(.formonix-dark) .formonix-theme-toggle .fm-sun { display: inline-block; }
body:not(.formonix-dark) .formonix-theme-toggle .fm-moon { display: none; }

/* ===================================================================
   ADDITIONAL TAILWIND COLOR OVERRIDES FOR SIDEBAR
   These specifically target Tailwind utility classes used in the
   AdminlteCustomPresenter.php output
   =================================================================== */

/* tw-text-primary-700 used for active sidebar items */
body.formonix-dark .tw-text-primary-700 {
    color: var(--fm-accent-blue) !important;
}

/* tw-text-gray-600 used for all sidebar item text */
body.formonix-dark #side-bar .tw-text-gray-600 {
    color: var(--fm-text-secondary) !important;
}

/* tw-text-gray-500 used for sidebar chevron icons */
body.formonix-dark #side-bar .tw-text-gray-500 {
    color: var(--fm-text-muted) !important;
}

/* Focus states in sidebar */
body.formonix-dark #side-bar [class*="focus\:tw-bg-gray-100"]:focus {
    background: rgba(79,142,247,0.08) !important;
}

body.formonix-dark #side-bar [class*="focus\:tw-text-gray-900"]:focus {
    color: var(--fm-text-primary) !important;
}

/* ===================================================================
   PRINT — RESET ALL DARK STYLES
   =================================================================== */

@media print {
    body.formonix-dark,
    body.formonix-dark main,
    body.formonix-dark .tw-bg-gray-100,
    body.formonix-dark .tw-bg-white {
        background: white !important;
        color: #333 !important;
    }

    body.formonix-dark::before { display: none !important; }

    body.formonix-dark .tw-text-gray-900 { color: #333 !important; }
    body.formonix-dark .tw-text-gray-500 { color: #777 !important; }

    body.formonix-dark .table > thead > tr > th {
        background: #f5f5f5 !important;
        color: #333 !important;
        border-color: #ddd !important;
    }

    body.formonix-dark .table > tbody > tr > td {
        background: white !important;
        color: #333 !important;
        border-color: #ddd !important;
    }

    body.formonix-dark .box { background: white !important; border-color: #ddd !important; }
    body.formonix-dark .formonix-theme-toggle { display: none !important; }
}

/* ===================================================================
   CATCH-ALL: ANY link/button/element with gradient or colored bg needs white text
   =================================================================== */

/* POS button in header */
body.formonix-dark .no-print a[class*="tw-bg-"][class*="-800"],
body.formonix-dark .no-print a[class*="tw-bg-"][class*="-800"] * {
    color: white !important;
}

/* All .btn with colored variants — ensure white text */
body.formonix-dark .btn-primary,
body.formonix-dark .btn-primary *,
body.formonix-dark .btn-success,
body.formonix-dark .btn-success *,
body.formonix-dark .btn-info,
body.formonix-dark .btn-info *,
body.formonix-dark .btn-danger,
body.formonix-dark .btn-danger *,
body.formonix-dark .btn-warning,
body.formonix-dark .btn-warning * {
    color: white !important;
}

/* Any <a> or <button> with a blue/gradient Tailwind bg */
body.formonix-dark a[class*="tw-bg-blue"],
body.formonix-dark a[class*="tw-bg-primary"],
body.formonix-dark a[class*="tw-bg-green"],
body.formonix-dark a[class*="tw-bg-red"],
body.formonix-dark a[class*="tw-bg-indigo"],
body.formonix-dark a[class*="tw-bg-purple"],
body.formonix-dark button[class*="tw-bg-blue"],
body.formonix-dark button[class*="tw-bg-primary"],
body.formonix-dark button[class*="tw-bg-green"] {
    color: white !important;
}

/* (Duplicate pagination rules removed — consolidated at line ~621) */

/* ===================================================================
   POS - PRODUCT GRID / PRODUCT CARDS
   =================================================================== */

/* Product card */
body.formonix-dark .product_box {
    background-color: var(--fm-bg-card-solid) !important;
    background: var(--fm-bg-card) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: 12px !important;
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .product_box:hover {
    background: var(--fm-bg-card-hover) !important;
    border-color: var(--fm-border-hover) !important;
    box-shadow: var(--fm-glow-blue) !important;
}

/* Product text inside card */
body.formonix-dark .product_box .text,
body.formonix-dark .product_box .text_div,
body.formonix-dark .product_box span,
body.formonix-dark .product_box p,
body.formonix-dark .product_box small,
body.formonix-dark .product_box .qty_display {
    color: var(--fm-text-primary) !important;
}

/* Product image container placeholder */
body.formonix-dark .product_box .image-container {
    background-color: rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
}

/* Product list scrollable body */
body.formonix-dark #product_list_body {
    background: transparent !important;
}

/* POS overall layout */
body.formonix-dark .pos-content,
body.formonix-dark .pos_product_div,
body.formonix-dark #product_list_body,
body.formonix-dark .product_list_body {
    background: transparent !important;
}

/* POS sidebar / right panel */
body.formonix-dark .pos-bill,
body.formonix-dark .pos_product,
body.formonix-dark #pos_header,
body.formonix-dark .pos-header {
    background: var(--fm-bg-main) !important;
    color: var(--fm-text-primary) !important;
}

/* POS table (cart items) */
body.formonix-dark .pos_table,
body.formonix-dark .pos_table td,
body.formonix-dark .pos_table th,
body.formonix-dark .pos_table tr,
body.formonix-dark #pos_table,
body.formonix-dark #pos_table td,
body.formonix-dark #pos_table th {
    background: transparent !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* POS total / bottom bar */
body.formonix-dark .pos-total,
body.formonix-dark .total-div,
body.formonix-dark .pos_total {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* POS input fields */
body.formonix-dark .pos-content input,
body.formonix-dark .pos-content select,
body.formonix-dark .pos-content .form-control {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* Category / Brand buttons in POS */
body.formonix-dark .pos_category,
body.formonix-dark .pos_brand {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* Featured products area */
body.formonix-dark .featured_products .product_box {
    background: var(--fm-bg-card) !important;
    border-color: var(--fm-border) !important;
}

/* POS payment screen */
body.formonix-dark .payment-screen,
body.formonix-dark .payment_modal .modal-content {
    background: var(--fm-bg-main) !important;
    color: var(--fm-text-primary) !important;
}

/* ===================================================================
   SMOOTH THEME TRANSITION
   =================================================================== */

body.formonix-dark-transition {
    transition: background-color 0.4s ease, color 0.4s ease !important;
}

body.formonix-dark-transition * {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* ===================================================================
   MODULE DARK MODE OVERRIDES
   Fixes hardcoded bg-white, color:#000, inline white backgrounds
   across all installed modules.
   =================================================================== */

/* ---------- GLOBAL: Override all inline hardcoded light backgrounds ---------- */
body.formonix-dark [style*="background-color: #ffffff"],
body.formonix-dark [style*="background-color:#ffffff"],
body.formonix-dark [style*="background-color: #fff"],
body.formonix-dark [style*="background-color:#fff"],
body.formonix-dark [style*="background: white"],
body.formonix-dark [style*="background:white"],
body.formonix-dark [style*="background: #ffffff"],
body.formonix-dark [style*="background:#ffffff"],
body.formonix-dark [style*="background: #fff"],
body.formonix-dark [style*="background:#fff"] {
    background-color: var(--fm-bg-card-solid) !important;
    background: var(--fm-bg-card-solid) !important;
}

/* ---------- GLOBAL: Override all inline hardcoded dark text ---------- */
body.formonix-dark [style*="color: #000"],
body.formonix-dark [style*="color:#000"],
body.formonix-dark [style*="color: black"],
body.formonix-dark [style*="color:black"],
body.formonix-dark [style*="color: #333"],
body.formonix-dark [style*="color:#333"],
body.formonix-dark [style*="color: #222"],
body.formonix-dark [style*="color:#222"] {
    color: var(--fm-text-primary) !important;
}

/* ---------- GLOBAL: Tailwind hardcoded classes ---------- */
body.formonix-dark .tw-bg-white,
body.formonix-dark .bg-white,
body.formonix-dark .\!tw-bg-white {
    --tw-bg-opacity: 1 !important;
    background-color: var(--fm-bg-card-solid) !important;
}

body.formonix-dark .tw-text-black,
body.formonix-dark .text-black,
body.formonix-dark .tw-text-gray-900,
body.formonix-dark .tw-text-gray-800,
body.formonix-dark .tw-text-gray-700 {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .tw-text-gray-600,
body.formonix-dark .tw-text-gray-500 {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .tw-text-gray-400 {
    color: var(--fm-text-muted) !important;
}

body.formonix-dark .tw-bg-gray-50,
body.formonix-dark .tw-bg-gray-100,
body.formonix-dark .bg-gray-50,
body.formonix-dark .bg-gray-100 {
    background-color: var(--fm-bg-card) !important;
}

body.formonix-dark .tw-bg-gray-200 {
    background-color: rgba(255,255,255,0.08) !important;
}

body.formonix-dark .tw-border-gray-100,
body.formonix-dark .tw-border-gray-200,
body.formonix-dark .tw-border-gray-300 {
    border-color: var(--fm-border) !important;
}

/* ---------- MODULE NAV TABS (shared pattern across modules) ---------- */
body.formonix-dark .nav-tabs-custom,
body.formonix-dark .nav-tabs-custom > .nav-tabs {
    background: var(--fm-bg-card) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .nav-tabs-custom > .tab-content {
    background: transparent !important;
}

/* ---------- ESSENTIALS MODULE ---------- */
body.formonix-dark .attendance-card,
body.formonix-dark .custom-dashboard-card,
body.formonix-dark .holiday-card {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* Essentials nav */
body.formonix-dark .essentials-nav,
body.formonix-dark .hrm-nav {
    background: var(--fm-bg-card-solid) !important;
    border-color: var(--fm-border) !important;
}

/* ---------- CRM MODULE ---------- */
body.formonix-dark .crm-dashboard .box,
body.formonix-dark .crm-dashboard .info-box,
body.formonix-dark .crm-nav {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .order-request-form,
body.formonix-dark .proposal-view {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
}

/* ---------- REPAIR MODULE ---------- */
body.formonix-dark .job-sheet-form,
body.formonix-dark .repair-form {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
}

/* Tagify (Repair module) */
body.formonix-dark .tagify,
body.formonix-dark .tagify__tag,
body.formonix-dark .tagify__input {
    background: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .tagify__dropdown {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

body.formonix-dark .tagify__dropdown__item {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .tagify__dropdown__item--active {
    background: var(--fm-bg-card-hover) !important;
}

/* Repair dashboard */
body.formonix-dark .repair-dashboard .info-box,
body.formonix-dark .repair-dashboard .box {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* ---------- SUPERADMIN MODULE ---------- */

/* Nav bar — has !tw-bg-white (compiled Tailwind !important) so we need double-class specificity */
body.formonix-dark section.no-print nav.navbar-default,
body.formonix-dark nav.navbar-default.\!tw-bg-white,
body.formonix-dark nav.navbar-default[class*="tw-bg-white"],
body.formonix-dark .navbar-default {
    background: var(--fm-bg-card-solid) !important;
    background-color: var(--fm-bg-card-solid) !important;
    border-color: var(--fm-border) !important;
}

/* Nav links */
body.formonix-dark .navbar-default .navbar-nav > li > a {
    color: var(--fm-text-secondary) !important;
}
body.formonix-dark .navbar-default .navbar-nav > li > a:hover,
body.formonix-dark .navbar-default .navbar-nav > li > a:focus {
    color: var(--fm-text-primary) !important;
    background: var(--fm-bg-card-hover) !important;
}
body.formonix-dark .navbar-default .navbar-nav > li.active > a,
body.formonix-dark .navbar-default .navbar-nav > li.active > a:hover {
    color: var(--fm-accent-blue) !important;
    background: rgba(79,142,247,0.1) !important;
    border-bottom-color: var(--fm-accent-blue) !important;
}

/* Navbar brand */
body.formonix-dark .navbar-default .navbar-brand {
    color: var(--fm-text-primary) !important;
}
body.formonix-dark .navbar-default .navbar-brand:hover {
    color: var(--fm-accent-blue) !important;
}

/* Navbar toggle (mobile) */
body.formonix-dark .navbar-default .navbar-toggle {
    border-color: var(--fm-border) !important;
}
body.formonix-dark .navbar-default .navbar-toggle .icon-bar {
    background-color: var(--fm-text-secondary) !important;
}
body.formonix-dark .navbar-default .navbar-toggle:hover,
body.formonix-dark .navbar-default .navbar-toggle:focus {
    background-color: var(--fm-bg-card-hover) !important;
}
body.formonix-dark .navbar-default .navbar-collapse {
    border-color: var(--fm-border) !important;
}

/* Promotion / package / subscription cards */
body.formonix-dark .package-card,
body.formonix-dark .subscription-card {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* Superadmin content cards (promotions, business, coupons, packages, etc.) */
body.formonix-dark section.content .tw-bg-white,
body.formonix-dark section.content [class*="tw-bg-white"] {
    background: var(--fm-bg-card-solid) !important;
    background-color: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* Ring overrides on cards */
body.formonix-dark section.content .tw-ring-gray-200 {
    --tw-ring-color: var(--fm-border) !important;
}

/* Card image placeholder backgrounds */
body.formonix-dark .tw-bg-gray-100 {
    background: var(--fm-bg-card) !important;
    background-color: var(--fm-bg-card) !important;
}

/* Superadmin settings — list-group tabs */
body.formonix-dark .list-group-item {
    background-color: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-secondary) !important;
    border-color: var(--fm-border) !important;
}
body.formonix-dark .list-group-item.active,
body.formonix-dark .list-group-item.active:hover,
body.formonix-dark .list-group-item.active:focus {
    background-color: var(--fm-accent-blue) !important;
    border-color: var(--fm-accent-blue) !important;
    color: #fff !important;
}
body.formonix-dark .list-group-item:hover:not(.active) {
    background-color: var(--fm-bg-card-hover) !important;
    color: var(--fm-text-primary) !important;
}

/* Superadmin dashboard — pos-tab containers */
body.formonix-dark .pos-tab-container,
body.formonix-dark .pos-tab-menu,
body.formonix-dark .pos-tab {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* DaisyUI badge overrides */
body.formonix-dark .tw-dw-badge-ghost {
    background: var(--fm-bg-card-hover) !important;
    color: var(--fm-text-muted) !important;
}
body.formonix-dark .tw-dw-badge-success {
    background: var(--fm-accent-green) !important;
    color: #fff !important;
}

/* DaisyUI button outline in dark */
body.formonix-dark .tw-dw-btn-outline.tw-dw-btn-primary {
    border-color: var(--fm-accent-blue) !important;
    color: var(--fm-accent-blue) !important;
}
body.formonix-dark .tw-dw-btn-outline.tw-dw-btn-primary:hover {
    background: var(--fm-accent-blue) !important;
    color: #fff !important;
}
body.formonix-dark .tw-dw-btn-outline.tw-dw-btn-error {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}
body.formonix-dark .tw-dw-btn-outline.tw-dw-btn-error:hover {
    background: #ef4444 !important;
    color: #fff !important;
}

/* Gray text in cards (descriptions, color codes) */
body.formonix-dark .tw-text-gray-300 {
    color: var(--fm-text-muted) !important;
}

/* Superadmin widget component */
body.formonix-dark .component-widget,
body.formonix-dark [class*="widget"] .box-body {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
}

/* Filter component */
body.formonix-dark .filters-box,
body.formonix-dark .component-filters {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* ---------- PROJECT MODULE ---------- */
body.formonix-dark .project-card,
body.formonix-dark .project-task-card,
body.formonix-dark .project-board .panel {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .text-black {
    color: var(--fm-text-primary) !important;
}

/* ---------- MANUFACTURING MODULE ---------- */
body.formonix-dark .manufacturing-recipe,
body.formonix-dark .manufacturing-production {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
}

/* ---------- DAILY STOCK HISTORY MODULE ---------- */
body.formonix-dark .stock-history-table,
body.formonix-dark .stock-history-table th,
body.formonix-dark .stock-history-table td {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* Override inline Excel-like styles in stock history */
body.formonix-dark .stock-history-table th[style],
body.formonix-dark .stock-history-table td[style] {
    background-color: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
}

/* ---------- DAMAGE MANAGEMENT MODULE ---------- */
body.formonix-dark .damage-dashboard .modern-card,
body.formonix-dark .damage-record-card {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .damage-print {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
}

/* ---------- DAYBOOK MODULE ---------- */
body.formonix-dark .daybook-card,
body.formonix-dark .cashbook-table,
body.formonix-dark .cashbook-table td,
body.formonix-dark .cashbook-table th {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* ---------- SPREADSHEET MODULE ---------- */
body.formonix-dark .spreadsheet-container {
    background: var(--fm-bg-card-solid) !important;
    color: var(--fm-text-primary) !important;
}

/* ---------- ASSET MANAGEMENT MODULE ---------- */
body.formonix-dark .asset-card,
body.formonix-dark .asset-detail {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* ---------- SEARCHBOX MODULE ---------- */

/* Desktop header search bar */
body.formonix-dark #searchbox-header-bar span[aria-hidden="true"] {
    color: var(--fm-text-secondary) !important;
}
body.formonix-dark #universal_search_input {
    background: var(--fm-bg-input) !important;
    background-color: var(--fm-bg-input) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
    box-shadow: none !important;
}
body.formonix-dark #universal_search_input::placeholder {
    color: var(--fm-text-secondary) !important;
    opacity: 0.7;
}
body.formonix-dark #universal_search_input ~ kbd {
    background: var(--fm-bg-card) !important;
    background-color: var(--fm-bg-card) !important;
    color: var(--fm-text-secondary) !important;
    border-color: var(--fm-border) !important;
}
body.formonix-dark #universal_search_results {
    background: #111428 !important;
    background-color: #111428 !important;
    color: #eef0f8 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Mobile/Desktop search modal overlay */
body.formonix-dark #mobile_search_overlay .modal-content {
    background: #111428 !important;
    background-color: #111428 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
/* Search input row inside modal */
body.formonix-dark #mobile_search_overlay .modal-content > div + div {
    background: #111428 !important;
    background-color: #111428 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
body.formonix-dark #mobile_search_input {
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
    color: #eef0f8 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
body.formonix-dark #mobile_search_input::placeholder {
    color: rgba(238,240,248,0.5) !important;
}
body.formonix-dark #mobile_search_close {
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
    color: #eef0f8 !important;
}
body.formonix-dark #mobile_search_overlay span[aria-hidden="true"] {
    color: rgba(238,240,248,0.5) !important;
}
body.formonix-dark #mobile_search_results {
    background: #111428 !important;
    background-color: #111428 !important;
    color: #eef0f8 !important;
}

/* Search result category headers & items (both desktop & modal) */
body.formonix-dark .universal-search-cat {
    color: rgba(238,240,248,0.6) !important;
    background: rgba(255,255,255,0.04) !important;
    background-color: rgba(255,255,255,0.04) !important;
}
body.formonix-dark .universal-search-hit {
    color: #eef0f8 !important;
    border-color: rgba(255,255,255,0.08) !important;
    background: #111428 !important;
    background-color: #111428 !important;
}
body.formonix-dark .universal-search-hit:hover {
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
}

/* ---------- WOOCOMMERCE MODULE ---------- */
body.formonix-dark .woocommerce-settings,
body.formonix-dark .woocommerce-sync {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
}

/* ---------- PRODUCT CATALOGUE MODULE ---------- */
body.formonix-dark .catalogue-card {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

/* ---------- MODULE: Generic box/card/panel/info-box override ---------- */
/* Catches any module elements using standard AdminLTE/Bootstrap classes */
body.formonix-dark .info-box {
    background: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border-color: var(--fm-border) !important;
}

body.formonix-dark .info-box .info-box-text {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .info-box .info-box-number {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .small-box {
    border-color: var(--fm-border) !important;
}

body.formonix-dark .small-box .inner h3,
body.formonix-dark .small-box .inner h4,
body.formonix-dark .small-box .inner p {
    color: #fff !important;
}

/* ---------- MODULE: Print views (keep light for printing) ---------- */
@media print {
    body.formonix-dark,
    body.formonix-dark .box,
    body.formonix-dark .box-body,
    body.formonix-dark table,
    body.formonix-dark td,
    body.formonix-dark th {
        background: #fff !important;
        color: #000 !important;
        border-color: #ddd !important;
    }
}

/* ================================================================
   DASHBOARD STAT CARDS — fm-stat-card
   Works in both light (default) and dark (body.formonix-dark) themes.
   Each card uses a data-accent attribute to pick unique accent colors.
   ================================================================ */

/* ---- Light theme base card ---- */
.fm-stat-card {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e8ecf0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    overflow: hidden;
}

.fm-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    transition: height 0.22s ease;
}

.fm-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.11);
}

.fm-stat-card:hover::before {
    height: 4px;
}

/* ---- Card inner layout ---- */
.fm-stat-card-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---- Icon container ---- */
.fm-stat-icon-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.fm-stat-card:hover .fm-stat-icon-wrap {
    transform: scale(1.08) rotate(-3deg);
}

/* ---- Text area ---- */
.fm-stat-body {
    flex: 1;
    min-width: 0;
}

.fm-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    font-family: 'DM Sans', 'SF Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ---- Per-accent bar + icon colors (light) ---- */
.fm-stat-card[data-accent="sky"]::before    { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.fm-stat-card[data-accent="green"]::before  { background: linear-gradient(90deg, #10b981, #34d399); }
.fm-stat-card[data-accent="yellow"]::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.fm-stat-card[data-accent="red"]::before    { background: linear-gradient(90deg, #ef4444, #f87171); }
.fm-stat-card[data-accent="indigo"]::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
.fm-stat-card[data-accent="orange"]::before { background: linear-gradient(90deg, #f97316, #fb923c); }
.fm-stat-card[data-accent="teal"]::before   { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.fm-stat-card[data-accent="violet"]::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

.fm-stat-icon-wrap[data-accent="sky"]    { background: linear-gradient(135deg,#e0f2fe,#bae6fd); color:#0284c7; }
.fm-stat-icon-wrap[data-accent="green"]  { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color:#059669; }
.fm-stat-icon-wrap[data-accent="yellow"] { background: linear-gradient(135deg,#fef3c7,#fde68a); color:#d97706; }
.fm-stat-icon-wrap[data-accent="red"]    { background: linear-gradient(135deg,#fee2e2,#fecaca); color:#dc2626; }
.fm-stat-icon-wrap[data-accent="indigo"] { background: linear-gradient(135deg,#e0e7ff,#c7d2fe); color:#4f46e5; }
.fm-stat-icon-wrap[data-accent="orange"] { background: linear-gradient(135deg,#ffedd5,#fed7aa); color:#ea580c; }
.fm-stat-icon-wrap[data-accent="teal"]   { background: linear-gradient(135deg,#ccfbf1,#99f6e4); color:#0d9488; }
.fm-stat-icon-wrap[data-accent="violet"] { background: linear-gradient(135deg,#ede9fe,#ddd6fe); color:#7c3aed; }

/* Hover glows on icons (light) */
.fm-stat-card[data-accent="sky"]:hover    .fm-stat-icon-wrap { box-shadow: 0 0 16px rgba(14,165,233,0.3); }
.fm-stat-card[data-accent="green"]:hover  .fm-stat-icon-wrap { box-shadow: 0 0 16px rgba(16,185,129,0.3); }
.fm-stat-card[data-accent="yellow"]:hover .fm-stat-icon-wrap { box-shadow: 0 0 16px rgba(245,158,11,0.3); }
.fm-stat-card[data-accent="red"]:hover    .fm-stat-icon-wrap { box-shadow: 0 0 16px rgba(239,68,68,0.3); }
.fm-stat-card[data-accent="indigo"]:hover .fm-stat-icon-wrap { box-shadow: 0 0 16px rgba(99,102,241,0.3); }
.fm-stat-card[data-accent="orange"]:hover .fm-stat-icon-wrap { box-shadow: 0 0 16px rgba(249,115,22,0.3); }
.fm-stat-card[data-accent="teal"]:hover   .fm-stat-icon-wrap { box-shadow: 0 0 16px rgba(20,184,166,0.3); }
.fm-stat-card[data-accent="violet"]:hover .fm-stat-icon-wrap { box-shadow: 0 0 16px rgba(139,92,246,0.3); }

/* ================================================================
   DARK THEME OVERRIDES
   ================================================================ */
body.formonix-dark .fm-stat-card {
    background: #13162b !important;
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
}

body.formonix-dark .fm-stat-card:hover {
    background: #161930 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important;
}

body.formonix-dark .fm-stat-label {
    color: rgba(238,240,248,0.55) !important;
}

body.formonix-dark .fm-stat-value {
    color: #eef0f8 !important;
}

/* Dark icon containers */
body.formonix-dark .fm-stat-icon-wrap[data-accent="sky"]    { background: rgba(14,165,233,0.15) !important;   color:#38bdf8 !important; }
body.formonix-dark .fm-stat-icon-wrap[data-accent="green"]  { background: rgba(16,185,129,0.15) !important;   color:#34d399 !important; }
body.formonix-dark .fm-stat-icon-wrap[data-accent="yellow"] { background: rgba(245,158,11,0.15) !important;   color:#fbbf24 !important; }
body.formonix-dark .fm-stat-icon-wrap[data-accent="red"]    { background: rgba(239,68,68,0.15) !important;    color:#f87171 !important; }
body.formonix-dark .fm-stat-icon-wrap[data-accent="indigo"] { background: rgba(99,102,241,0.15) !important;   color:#818cf8 !important; }
body.formonix-dark .fm-stat-icon-wrap[data-accent="orange"] { background: rgba(249,115,22,0.15) !important;   color:#fb923c !important; }
body.formonix-dark .fm-stat-icon-wrap[data-accent="teal"]   { background: rgba(20,184,166,0.15) !important;   color:#2dd4bf !important; }
body.formonix-dark .fm-stat-icon-wrap[data-accent="violet"] { background: rgba(139,92,246,0.15) !important;   color:#a78bfa !important; }

/* Dark hover glows */
body.formonix-dark .fm-stat-card[data-accent="sky"]:hover    .fm-stat-icon-wrap { box-shadow: 0 0 20px rgba(56,189,248,0.35) !important; }
body.formonix-dark .fm-stat-card[data-accent="green"]:hover  .fm-stat-icon-wrap { box-shadow: 0 0 20px rgba(52,211,153,0.35) !important; }
body.formonix-dark .fm-stat-card[data-accent="yellow"]:hover .fm-stat-icon-wrap { box-shadow: 0 0 20px rgba(251,191,36,0.35) !important; }
body.formonix-dark .fm-stat-card[data-accent="red"]:hover    .fm-stat-icon-wrap { box-shadow: 0 0 20px rgba(248,113,113,0.35) !important; }
body.formonix-dark .fm-stat-card[data-accent="indigo"]:hover .fm-stat-icon-wrap { box-shadow: 0 0 20px rgba(129,140,248,0.35) !important; }
body.formonix-dark .fm-stat-card[data-accent="orange"]:hover .fm-stat-icon-wrap { box-shadow: 0 0 20px rgba(251,146,60,0.35) !important; }
body.formonix-dark .fm-stat-card[data-accent="teal"]:hover   .fm-stat-icon-wrap { box-shadow: 0 0 20px rgba(45,212,191,0.35) !important; }
body.formonix-dark .fm-stat-card[data-accent="violet"]:hover .fm-stat-icon-wrap { box-shadow: 0 0 20px rgba(167,139,250,0.35) !important; }

/* Dark hover accent-tinted border glow */
body.formonix-dark .fm-stat-card[data-accent="sky"]:hover    { border-color: rgba(56,189,248,0.22) !important; }
body.formonix-dark .fm-stat-card[data-accent="green"]:hover  { border-color: rgba(52,211,153,0.22) !important; }
body.formonix-dark .fm-stat-card[data-accent="yellow"]:hover { border-color: rgba(251,191,36,0.22) !important; }
body.formonix-dark .fm-stat-card[data-accent="red"]:hover    { border-color: rgba(248,113,113,0.22) !important; }
body.formonix-dark .fm-stat-card[data-accent="indigo"]:hover { border-color: rgba(129,140,248,0.22) !important; }
body.formonix-dark .fm-stat-card[data-accent="orange"]:hover { border-color: rgba(251,146,60,0.22) !important; }
body.formonix-dark .fm-stat-card[data-accent="teal"]:hover   { border-color: rgba(45,212,191,0.22) !important; }
body.formonix-dark .fm-stat-card[data-accent="violet"]:hover { border-color: rgba(167,139,250,0.22) !important; }

/* Bottom padding for the grid section */
.fm-stat-grid {
    padding-bottom: 20px;
}

/* ===================================================================
   RECEIPT / INVOICE LAYOUT PROTECTION
   ===================================================================
   Dark theme must NEVER affect receipt/invoice layouts.
   These rules reset ALL dark theme overrides inside #receipt_section
   and .print_section so invoices render exactly as designed.
   =================================================================== */

/* --- Reset ALL inherited styles inside receipt sections --- */
#receipt_section,
#receipt_section *,
.print_section,
.print_section *,
body.formonix-dark #receipt_section,
body.formonix-dark #receipt_section *,
body.formonix-dark .print_section,
body.formonix-dark .print_section * {
    color: #000000 !important;
    font-family: 'Times New Roman', Times, serif !important;
    background-color: transparent !important;
    background: transparent !important;
    border-color: #242424 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
}

/* --- Tables inside receipts: restore original appearance --- */
body.formonix-dark #receipt_section table,
body.formonix-dark #receipt_section .table,
body.formonix-dark #receipt_section .table-responsive,
body.formonix-dark #receipt_section .table-striped,
body.formonix-dark #receipt_section .table-bordered,
body.formonix-dark #receipt_section .table-hover,
body.formonix-dark .print_section table,
body.formonix-dark .print_section .table,
body.formonix-dark .print_section .table-responsive,
body.formonix-dark .print_section .table-striped,
body.formonix-dark .print_section .table-bordered,
body.formonix-dark .print_section .table-hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    border-color: #ddd !important;
}

/* --- Table cells: restore default styles --- */
body.formonix-dark #receipt_section table td,
body.formonix-dark #receipt_section table th,
body.formonix-dark #receipt_section table tr,
body.formonix-dark #receipt_section .table td,
body.formonix-dark #receipt_section .table th,
body.formonix-dark #receipt_section .table tr,
body.formonix-dark #receipt_section .table > tbody > tr > td,
body.formonix-dark #receipt_section .table > tbody > tr > th,
body.formonix-dark #receipt_section .table > thead > tr > th,
body.formonix-dark #receipt_section .table > thead > tr > td,
body.formonix-dark #receipt_section .table > tfoot > tr > td,
body.formonix-dark #receipt_section .table > tfoot > tr > th,
body.formonix-dark #receipt_section .table-striped > tbody > tr:nth-of-type(odd),
body.formonix-dark #receipt_section .table-striped > tbody > tr:nth-of-type(even),
body.formonix-dark #receipt_section .table-striped > tbody > tr:nth-of-type(odd) > td,
body.formonix-dark #receipt_section .table-striped > tbody > tr:nth-of-type(even) > td,
body.formonix-dark .print_section table td,
body.formonix-dark .print_section table th,
body.formonix-dark .print_section table tr,
body.formonix-dark .print_section .table td,
body.formonix-dark .print_section .table th,
body.formonix-dark .print_section .table tr,
body.formonix-dark .print_section .table > tbody > tr > td,
body.formonix-dark .print_section .table > tbody > tr > th,
body.formonix-dark .print_section .table > thead > tr > th,
body.formonix-dark .print_section .table > thead > tr > td,
body.formonix-dark .print_section .table > tfoot > tr > td,
body.formonix-dark .print_section .table > tfoot > tr > th,
body.formonix-dark .print_section .table-striped > tbody > tr:nth-of-type(odd),
body.formonix-dark .print_section .table-striped > tbody > tr:nth-of-type(even),
body.formonix-dark .print_section .table-striped > tbody > tr:nth-of-type(odd) > td,
body.formonix-dark .print_section .table-striped > tbody > tr:nth-of-type(even) > td {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    border-color: #ddd !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: inherit !important;
}

/* --- Table headers inside receipts: restore size and casing --- */
body.formonix-dark #receipt_section table thead th,
body.formonix-dark #receipt_section table thead td,
body.formonix-dark #receipt_section .table > thead > tr > th,
body.formonix-dark .print_section table thead th,
body.formonix-dark .print_section table thead td,
body.formonix-dark .print_section .table > thead > tr > th {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    border-color: #ddd !important;
    text-transform: none !important;
    font-size: inherit !important;
    letter-spacing: normal !important;
}

/* --- Preserve explicit inline bg colors (e.g. elegant template's blue header rows) --- */
/* The elegant/detailed templates use inline style="background-color: #357ca5 !important; color: white !important"
   Those inline !important styles will win over our CSS !important since they are inline.
   No extra rules needed — inline !important always takes highest priority. */

/* --- Table hover: disable dark theme hover in receipts --- */
body.formonix-dark #receipt_section .table-hover > tbody > tr:hover,
body.formonix-dark #receipt_section .table-hover > tbody > tr:hover > td,
body.formonix-dark #receipt_section table tbody tr:hover td,
body.formonix-dark .print_section .table-hover > tbody > tr:hover,
body.formonix-dark .print_section .table-hover > tbody > tr:hover > td,
body.formonix-dark .print_section table tbody tr:hover td {
    background: transparent !important;
    color: #000000 !important;
}

/* --- Table bordered inside receipts --- */
body.formonix-dark #receipt_section .table-bordered,
body.formonix-dark #receipt_section .table-bordered > thead > tr > th,
body.formonix-dark #receipt_section .table-bordered > thead > tr > td,
body.formonix-dark #receipt_section .table-bordered > tbody > tr > th,
body.formonix-dark #receipt_section .table-bordered > tbody > tr > td,
body.formonix-dark #receipt_section .table-bordered > tfoot > tr > th,
body.formonix-dark #receipt_section .table-bordered > tfoot > tr > td,
body.formonix-dark .print_section .table-bordered,
body.formonix-dark .print_section .table-bordered > thead > tr > th,
body.formonix-dark .print_section .table-bordered > thead > tr > td,
body.formonix-dark .print_section .table-bordered > tbody > tr > th,
body.formonix-dark .print_section .table-bordered > tbody > tr > td,
body.formonix-dark .print_section .table-bordered > tfoot > tr > th,
body.formonix-dark .print_section .table-bordered > tfoot > tr > td {
    border-color: #ddd !important;
}

/* --- Text utilities inside receipts --- */
body.formonix-dark #receipt_section .text-muted,
body.formonix-dark #receipt_section .text-muted-imp,
body.formonix-dark .print_section .text-muted,
body.formonix-dark .print_section .text-muted-imp {
    color: #777 !important;
}

body.formonix-dark #receipt_section .text-center,
body.formonix-dark #receipt_section .text-right,
body.formonix-dark #receipt_section .text-left,
body.formonix-dark .print_section .text-center,
body.formonix-dark .print_section .text-right,
body.formonix-dark .print_section .text-left {
    color: #000000 !important;
}

/* --- Borders inside receipts: restore original look --- */
body.formonix-dark #receipt_section .border-top,
body.formonix-dark .print_section .border-top {
    border-top-color: #242424 !important;
}

body.formonix-dark #receipt_section .border-bottom,
body.formonix-dark .print_section .border-bottom {
    border-bottom-color: #242424 !important;
}

body.formonix-dark #receipt_section hr,
body.formonix-dark .print_section hr {
    border-color: #ddd !important;
}

/* --- Row & Column layout protection --- */
body.formonix-dark #receipt_section .row,
body.formonix-dark #receipt_section .col-xs-1, body.formonix-dark #receipt_section .col-xs-2,
body.formonix-dark #receipt_section .col-xs-3, body.formonix-dark #receipt_section .col-xs-4,
body.formonix-dark #receipt_section .col-xs-5, body.formonix-dark #receipt_section .col-xs-6,
body.formonix-dark #receipt_section .col-xs-7, body.formonix-dark #receipt_section .col-xs-8,
body.formonix-dark #receipt_section .col-xs-9, body.formonix-dark #receipt_section .col-xs-10,
body.formonix-dark #receipt_section .col-xs-11, body.formonix-dark #receipt_section .col-xs-12,
body.formonix-dark #receipt_section .col-md-1, body.formonix-dark #receipt_section .col-md-2,
body.formonix-dark #receipt_section .col-md-3, body.formonix-dark #receipt_section .col-md-4,
body.formonix-dark #receipt_section .col-md-5, body.formonix-dark #receipt_section .col-md-6,
body.formonix-dark #receipt_section .col-md-7, body.formonix-dark #receipt_section .col-md-8,
body.formonix-dark #receipt_section .col-md-9, body.formonix-dark #receipt_section .col-md-10,
body.formonix-dark #receipt_section .col-md-11, body.formonix-dark #receipt_section .col-md-12,
body.formonix-dark .print_section .row,
body.formonix-dark .print_section .col-xs-1, body.formonix-dark .print_section .col-xs-2,
body.formonix-dark .print_section .col-xs-3, body.formonix-dark .print_section .col-xs-4,
body.formonix-dark .print_section .col-xs-5, body.formonix-dark .print_section .col-xs-6,
body.formonix-dark .print_section .col-xs-7, body.formonix-dark .print_section .col-xs-8,
body.formonix-dark .print_section .col-xs-9, body.formonix-dark .print_section .col-xs-10,
body.formonix-dark .print_section .col-xs-11, body.formonix-dark .print_section .col-xs-12,
body.formonix-dark .print_section .col-md-1, body.formonix-dark .print_section .col-md-2,
body.formonix-dark .print_section .col-md-3, body.formonix-dark .print_section .col-md-4,
body.formonix-dark .print_section .col-md-5, body.formonix-dark .print_section .col-md-6,
body.formonix-dark .print_section .col-md-7, body.formonix-dark .print_section .col-md-8,
body.formonix-dark .print_section .col-md-9, body.formonix-dark .print_section .col-md-10,
body.formonix-dark .print_section .col-md-11, body.formonix-dark .print_section .col-md-12 {
    color: #000000 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* --- Flex-box / width utilities used in slim receipt --- */
body.formonix-dark #receipt_section .flex-box,
body.formonix-dark #receipt_section .flex-box p,
body.formonix-dark #receipt_section .width-50,
body.formonix-dark #receipt_section .width-100,
body.formonix-dark #receipt_section .textbox-info,
body.formonix-dark #receipt_section .textbox-info p,
body.formonix-dark #receipt_section .ticket,
body.formonix-dark .print_section .flex-box,
body.formonix-dark .print_section .flex-box p,
body.formonix-dark .print_section .width-50,
body.formonix-dark .print_section .width-100,
body.formonix-dark .print_section .textbox-info,
body.formonix-dark .print_section .textbox-info p,
body.formonix-dark .print_section .ticket {
    color: #000000 !important;
    background: transparent !important;
}

/* --- Bootstrap pull-left/pull-right protection --- */
body.formonix-dark #receipt_section .pull-left,
body.formonix-dark #receipt_section .pull-right,
body.formonix-dark #receipt_section .f-left,
body.formonix-dark #receipt_section .f-right,
body.formonix-dark .print_section .pull-left,
body.formonix-dark .print_section .pull-right,
body.formonix-dark .print_section .f-left,
body.formonix-dark .print_section .f-right {
    color: #000000 !important;
}

/* --- Invoice-specific classes (elegant/detailed templates) --- */
body.formonix-dark #receipt_section .invoice-info,
body.formonix-dark #receipt_section .invoice-col,
body.formonix-dark #receipt_section .font-23,
body.formonix-dark #receipt_section .padding-5,
body.formonix-dark #receipt_section .padding-10,
body.formonix-dark .print_section .invoice-info,
body.formonix-dark .print_section .invoice-col,
body.formonix-dark .print_section .font-23,
body.formonix-dark .print_section .padding-5,
body.formonix-dark .print_section .padding-10 {
    color: #000000 !important;
    background: transparent !important;
}

/* --- bg-light-blue-active used in elegant template --- */
body.formonix-dark #receipt_section .bg-light-blue-active,
body.formonix-dark .print_section .bg-light-blue-active {
    background-color: #d9edf7 !important;
    color: #000000 !important;
}

/* --- Headings & sub-headings inside receipts --- */
body.formonix-dark #receipt_section h1,
body.formonix-dark #receipt_section h2,
body.formonix-dark #receipt_section h3,
body.formonix-dark #receipt_section h4,
body.formonix-dark #receipt_section h5,
body.formonix-dark #receipt_section h6,
body.formonix-dark #receipt_section .headings,
body.formonix-dark #receipt_section .sub-headings,
body.formonix-dark .print_section h1,
body.formonix-dark .print_section h2,
body.formonix-dark .print_section h3,
body.formonix-dark .print_section h4,
body.formonix-dark .print_section h5,
body.formonix-dark .print_section h6,
body.formonix-dark .print_section .headings,
body.formonix-dark .print_section .sub-headings {
    color: #000000 !important;
    font-family: inherit !important;
}

/* --- Small text, bold, strong, links --- */
body.formonix-dark #receipt_section small,
body.formonix-dark #receipt_section b,
body.formonix-dark #receipt_section strong,
body.formonix-dark #receipt_section span,
body.formonix-dark #receipt_section a,
body.formonix-dark #receipt_section p,
body.formonix-dark #receipt_section div,
body.formonix-dark #receipt_section label,
body.formonix-dark .print_section small,
body.formonix-dark .print_section b,
body.formonix-dark .print_section strong,
body.formonix-dark .print_section span,
body.formonix-dark .print_section a,
body.formonix-dark .print_section p,
body.formonix-dark .print_section div,
body.formonix-dark .print_section label {
    color: #000000 !important;
}

/* --- Images in receipts (barcodes, QR codes, logos) --- */
body.formonix-dark #receipt_section img,
body.formonix-dark .print_section img {
    filter: none !important;
    opacity: 1 !important;
}

/* --- Word wrap & misc utility classes --- */
body.formonix-dark #receipt_section .word-wrap,
body.formonix-dark #receipt_section .bw,
body.formonix-dark #receipt_section .color-555,
body.formonix-dark #receipt_section .table-slim,
body.formonix-dark #receipt_section .table-slim td,
body.formonix-dark #receipt_section .table-slim th,
body.formonix-dark #receipt_section .table-f-12,
body.formonix-dark #receipt_section .table-f-12 td,
body.formonix-dark #receipt_section .table-f-12 th,
body.formonix-dark #receipt_section .table-no-top-cell-border,
body.formonix-dark #receipt_section .table-no-side-cell-border,
body.formonix-dark #receipt_section .centered,
body.formonix-dark .print_section .word-wrap,
body.formonix-dark .print_section .bw,
body.formonix-dark .print_section .color-555,
body.formonix-dark .print_section .table-slim,
body.formonix-dark .print_section .table-slim td,
body.formonix-dark .print_section .table-slim th,
body.formonix-dark .print_section .table-f-12,
body.formonix-dark .print_section .table-f-12 td,
body.formonix-dark .print_section .table-f-12 th,
body.formonix-dark .print_section .table-no-top-cell-border,
body.formonix-dark .print_section .table-no-side-cell-border,
body.formonix-dark .print_section .centered,
body.formonix-dark #receipt_section .table-box,
body.formonix-dark #receipt_section .table-box td,
body.formonix-dark #receipt_section .table-box th,
body.formonix-dark .print_section .table-box,
body.formonix-dark .print_section .table-box td,
body.formonix-dark .print_section .table-box th {
    color: #000000 !important;
    background: transparent !important;
    border-color: #242424 !important;
}

/* --- List group items inside receipts (if any) --- */
body.formonix-dark #receipt_section .list-group-item,
body.formonix-dark .print_section .list-group-item {
    background: #fff !important;
    color: #333 !important;
    border-color: #ddd !important;
}

/* --- Delivery note & packing slip protection --- */
body.formonix-dark #receipt_section .delivery_note,
body.formonix-dark #receipt_section .packing_slip,
body.formonix-dark .print_section .delivery_note,
body.formonix-dark .print_section .packing_slip {
    color: #000000 !important;
    background: transparent !important;
}

/* ===================================================================
   NATIVE <select> <option> FIX — Windows renders options with OS native
   light background, so text must be dark to remain readable.
   =================================================================== */
body.formonix-dark select option,
body.formonix-dark select.form-control option,
body.formonix-dark .form-control option,
body.formonix-dark .form-group select option {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

body.formonix-dark select option:checked,
body.formonix-dark select.form-control option:checked {
    background: #4f8ef7 !important;
    background-color: #4f8ef7 !important;
    color: #ffffff !important;
}

body.formonix-dark select option:hover,
body.formonix-dark select.form-control option:hover {
    background: #e8f0fe !important;
    color: #333333 !important;
}

body.formonix-dark select option[disabled],
body.formonix-dark select.form-control option[disabled] {
    color: #999999 !important;
    background: #f5f5f5 !important;
}

/* Also fix daterangepicker month/year select options */
body.formonix-dark .daterangepicker select.monthselect option,
body.formonix-dark .daterangepicker select.yearselect option {
    background: #ffffff !important;
    color: #333333 !important;
}

/* DataTables length dropdown options */
body.formonix-dark .dataTables_wrapper .dataTables_length select option {
    background: #ffffff !important;
    color: #333333 !important;
}

/* ===================================================================
   INVOICE SCHEME — Format selector cards (.option-div)
   =================================================================== */
body.formonix-dark .option-div {
    background-color: var(--fm-bg-card) !important;
    color: var(--fm-text-primary) !important;
    border: 1px solid var(--fm-border) !important;
}

body.formonix-dark .option-div:hover {
    border-color: var(--fm-accent-blue) !important;
}

body.formonix-dark .option-div-group .active .option-div {
    border-color: var(--fm-accent-blue) !important;
    background-color: rgba(79,142,247,0.1) !important;
}

body.formonix-dark .option-div h4 {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .option-div-group .icon {
    color: var(--fm-accent-blue) !important;
}

/* ===================================================================
   INVOICE LAYOUT — Layout cards (.icon-link)
   =================================================================== */
body.formonix-dark .icon-link {
    color: var(--fm-text-primary) !important;
}

body.formonix-dark .icon-link > a {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .icon-link > a:hover {
    color: var(--fm-accent-blue) !important;
}

body.formonix-dark .icon-link .fa {
    color: var(--fm-text-muted) !important;
}

body.formonix-dark .icon-link > a:hover .fa {
    color: var(--fm-accent-blue) !important;
}

body.formonix-dark .link-des {
    color: var(--fm-text-secondary) !important;
}

body.formonix-dark .link-des b {
    color: var(--fm-text-primary) !important;
}

/* --- Receipt section container itself: white background for readability --- */
body.formonix-dark #receipt_section {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 10px !important;
}

/* --- Print mode: ensure receipts remain clean --- */
@media print {
    #receipt_section,
    #receipt_section *,
    .print_section,
    .print_section *,
    body.formonix-dark #receipt_section,
    body.formonix-dark #receipt_section *,
    body.formonix-dark .print_section,
    body.formonix-dark .print_section * {
        color: #000000 !important;
        background: transparent !important;
        background-color: transparent !important;
        border-color: #242424 !important;
        font-family: 'Times New Roman', Times, serif !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        box-shadow: none !important;
        animation: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body.formonix-dark #receipt_section {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
    /* Allow inline styles (e.g. blue header rows) to show their colors in print */
    #receipt_section [style*="background-color"],
    .print_section [style*="background-color"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}