/**
 * Bootstrap 5 Theme Customizations and CSS Variables
 * This file provides comprehensive Bootstrap 5 theme support with proper colors, backgrounds, and contrast
 */

:root {
    /* Primary Colors */
    --bs-primary: #3097D1;
    --bs-primary-rgb: 48, 151, 209;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #2ab27b;
    --bs-success-rgb: 42, 178, 123;
    --bs-info: #8eb4cb;
    --bs-info-rgb: 142, 180, 203;
    --bs-warning: #cbb956;
    --bs-warning-rgb: 203, 185, 86;
    --bs-danger: #bf5329;
    --bs-danger-rgb: 191, 83, 41;
    --bs-light: #f5f8fa;
    --bs-light-rgb: 245, 248, 250;
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;

    /* Body and Background */
    --bs-body-bg: #f5f8fa;
    --bs-body-color: #333;
    --bs-body-font-family: Raleway, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.6;

    /* Borders */
    --bs-border-color: #ddd;
    --bs-border-width: 1px;

    /* Forms */
    --bs-form-control-bg: #fff;
    --bs-form-control-border-color: #ddd;
    --bs-form-control-focus-bg: #fff;
    --bs-form-control-focus-border-color: #80bdff;

    /* Buttons */
    --bs-btn-font-size: 0.875rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.75rem;

    /* Theme Color Variables (user-selectable, defaults to blue) */
    --theme-primary-dark: #2a7cb4;
    --theme-primary-light: #e8f4fd;

    /* Sidebar & Background Variables (overridden per theme) */
    --theme-sidebar-bg: #fff;
    --theme-sidebar-text: #333;
    --theme-sidebar-hover-bg: #f5f8fa;
    --theme-sidebar-active-bg: #edf2f7;
    --theme-sidebar-border: #ddd;
    --theme-header-bg: #fff;
    --theme-content-bg: #f5f8fa;
}

/* ========================================
   USER THEME COLORS
   Overrides --bs-primary per user's selected theme
   from User Settings > Interface > Theme Color
   ======================================== */

body.theme-blue {
    --bs-primary: #3097D1;
    --bs-primary-rgb: 48, 151, 209;
    --theme-primary-dark: #2a7cb4;
    --theme-primary-light: #e8f4fd;
    --theme-sidebar-bg: #1e3a5f;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #264a7a;
    --theme-sidebar-active-bg: #2d5a93;
    --theme-sidebar-border: #264a7a;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #eef4f9;
}

body.theme-black {
    --bs-primary: #343a40;
    --bs-primary-rgb: 52, 58, 64;
    --theme-primary-dark: #23272b;
    --theme-primary-light: #e9ecef;
    --theme-sidebar-bg: #1a1a2e;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #252540;
    --theme-sidebar-active-bg: #2e2e4a;
    --theme-sidebar-border: #252540;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #ecedf0;
}

body.theme-purple {
    --bs-primary: #6f42c1;
    --bs-primary-rgb: 111, 66, 193;
    --theme-primary-dark: #5a32a3;
    --theme-primary-light: #f0ebf8;
    --theme-sidebar-bg: #2d1b4e;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #3d2768;
    --theme-sidebar-active-bg: #4a3080;
    --theme-sidebar-border: #3d2768;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #f3eff8;
}

body.theme-green {
    --bs-primary: #28a745;
    --bs-primary-rgb: 40, 167, 69;
    --theme-primary-dark: #1e7e34;
    --theme-primary-light: #e6f5eb;
    --theme-sidebar-bg: #1a3c28;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #245236;
    --theme-sidebar-active-bg: #2d6842;
    --theme-sidebar-border: #245236;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #edf6f0;
}

body.theme-red {
    --bs-primary: #dc3545;
    --bs-primary-rgb: 220, 53, 69;
    --theme-primary-dark: #bd2130;
    --theme-primary-light: #fce4e6;
    --theme-sidebar-bg: #4a1520;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #5e1d2c;
    --theme-sidebar-active-bg: #732438;
    --theme-sidebar-border: #5e1d2c;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #faf0f1;
}

body.theme-yellow {
    --bs-primary: #d4a017;
    --bs-primary-rgb: 212, 160, 23;
    --theme-primary-dark: #b8860b;
    --theme-primary-light: #fdf5e0;
    --theme-sidebar-bg: #3d3213;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #52441b;
    --theme-sidebar-active-bg: #665522;
    --theme-sidebar-border: #52441b;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #faf7ee;
}

body.theme-blue-light {
    --bs-primary: #5bc0de;
    --bs-primary-rgb: 91, 192, 222;
    --theme-primary-dark: #31b0d5;
    --theme-primary-light: #e8f6fa;
    --theme-sidebar-bg: #1b3d4d;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #255366;
    --theme-sidebar-active-bg: #2e6980;
    --theme-sidebar-border: #255366;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #edf7fa;
}

body.theme-black-light {
    --bs-primary: #6c757d;
    --bs-primary-rgb: 108, 117, 125;
    --theme-primary-dark: #5a6268;
    --theme-primary-light: #eef0f2;
    --theme-sidebar-bg: #2c2f33;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #3a3e43;
    --theme-sidebar-active-bg: #474c52;
    --theme-sidebar-border: #3a3e43;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #eff0f2;
}

body.theme-purple-light {
    --bs-primary: #9b59b6;
    --bs-primary-rgb: 155, 89, 182;
    --theme-primary-dark: #8344a5;
    --theme-primary-light: #f3eaf7;
    --theme-sidebar-bg: #352145;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #462d5c;
    --theme-sidebar-active-bg: #573872;
    --theme-sidebar-border: #462d5c;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #f5eff8;
}

body.theme-green-light {
    --bs-primary: #5cb85c;
    --bs-primary-rgb: 92, 184, 92;
    --theme-primary-dark: #449d44;
    --theme-primary-light: #eaf5ea;
    --theme-sidebar-bg: #1e3e2a;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #2a5439;
    --theme-sidebar-active-bg: #356a47;
    --theme-sidebar-border: #2a5439;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #eff7f0;
}

body.theme-red-light {
    --bs-primary: #e74c3c;
    --bs-primary-rgb: 231, 76, 60;
    --theme-primary-dark: #cf3625;
    --theme-primary-light: #fde8e6;
    --theme-sidebar-bg: #4a1a1a;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #5e2424;
    --theme-sidebar-active-bg: #732e2e;
    --theme-sidebar-border: #5e2424;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #faf0ef;
}

body.theme-custom-1 {
    --bs-primary: #0047A5;
    --bs-primary-rgb: 0, 71, 165;
    --theme-primary-dark: #003781;
    --theme-primary-light: #e8f0fb;
    --theme-sidebar-bg: #003781;
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #0047A5;
    --theme-sidebar-active-bg: #0055C9;
    --theme-sidebar-border: #002d6b;
    --theme-header-bg: #ffffff;
    --theme-content-bg: #f4f7fc;
}

body.theme-custom-2 {
    /* Custom Theme Color 2 - Final 6-Color Palette */
    --bs-primary: #F57421;
    /* Orange */
    --bs-primary-rgb: 245, 116, 33;
    --bs-accent: #0C799A;
    /* Teal Blue */
    --theme-primary-dark: #0A2E3A;
    /* Deep Navy */
    --theme-primary-light: #E6F4F8;
    /* Soft Teal */
    --theme-sidebar-bg: #0A2E3A;
    /* Deep Navy */
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #0C799A;
    /* Teal Blue */
    --theme-sidebar-active-bg: #F57421;
    /* Orange */
    --theme-sidebar-border: #5F6B73;
    /* Cool Gray */
    --theme-header-bg: #E6F4F8;
    /* Soft Teal */
    --theme-content-bg: #E6F4F8;
    /* Soft Teal */
    --theme-accent: #0C799A;
    /* Teal Blue */
    --theme-soft-accent: #FFD7BF;
    /* Light Orange */
    --theme-neutral: #5F6B73;
    /* Cool Gray */
}

body.theme-custom-3 {
    /* Custom Theme Color 3 - Muted Teal & Coral Palette */
    --bs-primary: #556970;
    /* Slate Teal - buttons, links, active states */
    --bs-primary-rgb: 85, 105, 112;
    --bs-accent: #F08A5D;
    /* Coral - CTA buttons */
    --theme-primary-dark: #3B4C52;
    /* Dark Slate - sidebar, navbar, footer */
    --theme-primary-light: #F4F6F7;
    /* Light Gray - page background */
    --theme-sidebar-bg: #3B4C52;
    /* Dark Slate */
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-hover-bg: #7FA8A3;
    /* Sage Green - hover states */
    --theme-sidebar-active-bg: #556970;
    /* Slate Teal */
    --theme-sidebar-border: #3B4C52;
    /* Dark Slate */
    --theme-header-bg: #ffffff;
    --theme-content-bg: #F4F6F7;
    /* Light Gray */
    --theme-accent: #F08A5D;
    /* Coral - CTA */
    --theme-soft-accent: #7FA8A3;
    /* Sage Green - badges, hover */
    --theme-neutral: #6B8C9D;
    /* Steel Blue - icons, secondary buttons */
}

/* Theme-aware header accent bar */
[class*="theme-"] .main-header,
[class*="theme-"] .main-header[role="banner"] {
    border-top: 3px solid var(--bs-primary) !important;
}

/* Theme-aware logo/brand area */
[class*="theme-"] .main-header .logo {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    transition: background-color 0.3s ease;
}

[class*="theme-"] .main-header .logo .logo-lg,
[class*="theme-"] .main-header .logo .logo-mini {
    color: #fff !important;
}

/* ========================================
   OVERRIDE ADMINLTE CONFLICTS
   ======================================== */

/* Force correct backgrounds */
.skin-blue-light,
.skin-blue-dark,
.skin-black,
.skin-black-light,
.skin-green,
.skin-green-light,
.skin-purple,
.skin-purple-light,
.skin-red,
.skin-red-light,
.skin-yellow,
.skin-yellow-light {
    background-color: var(--bs-body-bg) !important;
}

/* Main wrapper background */
.wrapper {
    background-color: var(--theme-content-bg, var(--bs-body-bg)) !important;
}

.content-wrapper {
    background-color: var(--theme-content-bg, var(--bs-body-bg)) !important;
}

/* Header styling */
.main-header {
    background-color: var(--theme-header-bg, #fff) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
}

/* Sidebar styling */
.main-sidebar {
    background-color: var(--theme-sidebar-bg, #fff) !important;
    border-right: 1px solid var(--theme-sidebar-border, var(--bs-border-color)) !important;
}

.sidebar {
    background-color: var(--theme-sidebar-bg, #fff) !important;
}

/* Ensure text color is readable */
body,
body .text-muted {
    color: var(--bs-body-color) !important;
}

/* ========================================
   BODY AND GLOBAL STYLES
   ======================================== */

body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ========================================
   CONTAINER AND LAYOUT
   ======================================== */

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    background-color: transparent;
}

.content,
main {
    flex: 1;
    background-color: var(--bs-body-bg);
}

/* ========================================
   NAVBAR AND HEADER
   ======================================== */

.navbar {
    background-color: #fff;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
}

.navbar-dark {
    background-color: var(--bs-dark);
}

/* ===== Module Navbar Tabs — global theme-aware ===== */
.navbar-light .navbar-brand {
    color: var(--bs-primary) !important;
    font-weight: 600 !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #4c5258;
    font-weight: 500;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    border-bottom: 3px solid transparent;
    border-radius: 0 !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--bs-primary) !important;
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--bs-primary) !important;
    font-weight: 700 !important;
    border-bottom: 3px solid var(--bs-primary) !important;
    border-radius: 0 !important;
    padding-bottom: calc(0.5rem - 3px) !important;
}

/* Navbar button and content alignment */
.navbar .btn,
.navbar a.btn {
    align-self: center;
    margin: 0 0.5rem;
}

.navbar .d-flex {
    align-items: center;
}

/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb {
    background-color: #fff;
    padding: 0.75rem 0;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

/* ========================================
   CARDS
   ======================================== */

.card {
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: #fff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    background-color: var(--theme-primary-light, #f5f8fa);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    font-weight: 600;
}

.card-footer {
    background-color: var(--theme-primary-light, #f5f8fa);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* Report Filter Card — theme-aware header accent */
.card.box-solid>.card-header,
.card.radius-10.box-solid>.card-header {
    background-color: var(--theme-primary-light, #f0f4f8);
    border-bottom: 2px solid rgba(var(--bs-primary-rgb, 48, 151, 209), 0.2);
    color: var(--theme-primary-dark, #2a4a6c);
}

.card.box-solid>.card-header .card-title,
.card.radius-10.box-solid>.card-header .card-title {
    color: var(--theme-primary-dark, #2a4a6c);
}

.card.box-solid>.card-header .fa-filter,
.card.radius-10.box-solid>.card-header .fa-filter,
.card.box-solid>.card-header .bi-chevron-down,
.card.radius-10.box-solid>.card-header .bi-chevron-down {
    color: var(--bs-primary, #3097D1);
}

/* Widget card header — subtle theme tint */
.card.radius-10>.card-header .card-title {
    color: var(--theme-primary-dark, #2a4a6c);
}

/* Override legacy bg-light-blue (used on filter bar input-group icons) */
.bg-light-blue {
    background-color: var(--bs-primary, #3c8dbc) !important;
    color: #fff !important;
}

/* ===== Page Headings — theme-aware ===== */
.content-header>h1,
section.content-header>h1 {
    color: var(--theme-primary-dark, #4c5258) !important;
}

.breadcrumb-title {
    color: var(--theme-primary-dark, #4c5258) !important;
}

.box .box-header,
.box-header {
    color: var(--theme-primary-dark, #4c5258) !important;
}

.box .box-header .box-title,
.box-header .box-title {
    color: var(--theme-primary-dark, #4c5258) !important;
}

.info-box-new-style .info-box-number {
    color: var(--theme-primary-dark, #4c5258) !important;
}

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

.btn {
    font-size: var(--bs-btn-font-size) !important;
    font-weight: 500 !important;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
    border-radius: 0.375rem !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #333 !important;
}

.btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* ========================================
   FORMS AND INPUTS
   ======================================== */

.form-control,
.form-select,
textarea.form-control {
    background-color: var(--bs-form-control-bg);
    border: var(--bs-border-width) solid var(--bs-form-control-border-color);
    color: var(--bs-body-color);
    font-size: var(--bs-body-font-size);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    background-color: var(--bs-form-control-focus-bg);
    border-color: var(--bs-form-control-focus-border-color);
    color: var(--bs-body-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    outline: 0;
}

.form-control::placeholder {
    color: #999;
    opacity: 0.7;
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color);
}

/* ========================================
   INPUT GROUP (Icon + Select + Button)
   ======================================== */

.input-group {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

/* Leading icon button (e.g. the user icon) */
.input-group>.input-group-text,
.input-group>.input-group-addon,
.input-group>.input-group-btn>.btn,
.input-group>.input-group-prepend>.input-group-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px;
    height: auto !important;
    padding: 0.45rem 0.65rem !important;
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border: 1px solid var(--bs-primary) !important;
    border-radius: 0.375rem 0 0 0.375rem !important;
    font-size: 0.9rem !important;
    transition: all 0.15s ease-in-out;
}

.input-group>.input-group-text i,
.input-group>.input-group-addon i,
.input-group>.input-group-prepend>.input-group-text i {
    color: #fff !important;
    font-size: 0.9rem;
}

/* Trailing icon button (right side icon groups) */
.input-group>.input-group-append>.input-group-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px;
    padding: 0.45rem 0.65rem !important;
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border: 1px solid var(--bs-primary) !important;
    border-radius: 0 0.375rem 0.375rem 0 !important;
    font-size: 0.9rem !important;
}

.input-group>.input-group-append>.input-group-text i {
    color: #fff !important;
}

/* Form controls inside input groups */
.input-group>.form-control,
.input-group>.form-select,
.input-group>select.form-control {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-height: 38px !important;
    border-radius: 0 !important;
    border: 1px solid var(--bs-border-color) !important;
    font-size: var(--bs-body-font-size) !important;
    padding: 0.45rem 0.75rem !important;
}

/* BS3 .input-group-btn compat for BS5 input-group flex layout */
.input-group>.input-group-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.input-group>.input-group-btn>.btn {
    border-radius: 0;
}

/* When form-control is first child (no prepend icon) */
.input-group>.form-control:first-child,
.input-group>.form-select:first-child,
.input-group>select.form-control:first-child {
    border-radius: 0.375rem 0 0 0.375rem !important;
}

/* When form-control is last child (no append) */
.input-group>.form-control:last-child,
.input-group>.form-select:last-child,
.input-group>select.form-control:last-child {
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* Quick-add / plus button at end of input group */
.input-group>.btn:last-child,
.input-group>.input-group-btn:last-child>.btn,
.input-group>span.input-group-btn>.btn,
.input-group>.btn.btn-modal,
.input-group>.btn.add_new_supplier,
.input-group>.btn.add_new_customer,
.input-group>.btn.quick_add_unit {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px;
    height: 38px !important;
    min-height: 38px;
    padding: 0.45rem 0.5rem !important;
    background-color: #fff !important;
    color: var(--bs-primary) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-left: none !important;
    border-radius: 0 0.375rem 0.375rem 0 !important;
    transition: all 0.15s ease-in-out;
    flex: 0 0 auto !important;
    box-shadow: none !important;
}

.input-group>.btn:last-child:hover,
.input-group>.input-group-btn:last-child>.btn:hover,
.input-group>span.input-group-btn>.btn:hover {
    background-color: var(--bs-light) !important;
    border-color: var(--bs-primary) !important;
}

.input-group>.btn:last-child i,
.input-group>.input-group-btn:last-child>.btn i,
.input-group>span.input-group-btn>.btn i {
    color: var(--bs-primary) !important;
    font-size: 1.1rem;
}

/* input-group-btn wrapper alignment */
.input-group>.input-group-btn,
.input-group>span.input-group-btn {
    display: flex;
    align-items: stretch !important;
    flex: 0 0 auto !important;
}

/* ========================================
   SELECT2 DROPDOWNS
   ======================================== */

/* Container - full width inside form groups */
.select2-container {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Inside input-group: flex-grow to fill space */
.input-group .select2-container {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    position: relative !important;
}

/* Single selection box */
.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    outline: none !important;
    padding: 0 !important;
    display: block !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Inside input-group: remove right border-radius so it connects to suffix button */
.input-group .select2-container .select2-selection--single {
    border-radius: 0.375rem 0 0 0.375rem !important;
    border-right: none !important;
}

/* Inside input-group: when there's a prepend/addon before the select2 */
.input-group .input-group-text+select+.select2-container .select2-selection--single,
.input-group .input-group-prepend+select+.select2-container .select2-selection--single,
.input-group .input-group-addon+select+.select2-container .select2-selection--single,
.input-group .input-group-text~.select2-container .select2-selection--single {
    border-radius: 0 !important;
    border-right: none !important;
}

/* Inside input-group: when select2 is only element (no suffix button) - restore right radius & border */
.input-group .select2-container:last-child .select2-selection--single {
    border-radius: 0.375rem !important;
    border-right: 1px solid var(--bs-border-color) !important;
}

/* Inside input-group: select2 after prepend, no suffix */
.input-group .input-group-text~.select2-container:last-child .select2-selection--single {
    border-radius: 0 0.375rem 0.375rem 0 !important;
    border-right: 1px solid var(--bs-border-color) !important;
}

/* Rendered text inside the selection */
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block !important;
    line-height: 38px !important;
    height: 38px !important;
    padding-left: 12px !important;
    padding-right: 30px !important;
    color: var(--bs-body-color) !important;
    font-size: var(--bs-body-font-size) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Placeholder text */
.select2-container .select2-selection--single .select2-selection__placeholder {
    color: #999 !important;
}

/* Dropdown arrow */
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    width: 30px !important;
    top: 0 !important;
    right: 1px !important;
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #6c757d transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    border-style: solid !important;
    width: 0 !important;
    height: 0 !important;
    position: static !important;
    margin: 0 !important;
}

/* Focus state */
.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* Multiple selection */
.select2-container .select2-selection--multiple {
    min-height: 38px !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    padding: 3px 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.input-group .select2-container .select2-selection--multiple {
    border-radius: 0.375rem 0 0 0.375rem !important;
    border-right: none !important;
}

.input-group .select2-container:last-child .select2-selection--multiple {
    border-radius: 0.375rem !important;
    border-right: 1px solid var(--bs-border-color) !important;
}

/* Multiple selection tags */
.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-primary) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0.25rem !important;
    padding: 2px 8px !important;
    margin: 2px 4px 2px 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-right: 4px !important;
    font-weight: bold !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
}

/* Dropdown panel */
.select2-dropdown {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0 0 0.375rem 0.375rem !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
    background-color: #fff !important;
    z-index: 1060 !important;
}

/* Search input inside dropdown */
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.25rem !important;
    padding: 0.4rem 0.75rem !important;
    font-size: var(--bs-body-font-size) !important;
    outline: none !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* Dropdown results */
.select2-results__option {
    padding: 0.45rem 0.75rem !important;
    font-size: var(--bs-body-font-size) !important;
    color: var(--bs-body-color) !important;
    transition: background-color 0.1s ease;
}

/* Highlighted option (hover/keyboard) */
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Selected option */
.select2-results__option[aria-selected="true"] {
    background-color: var(--theme-primary-light, #e8f4fd) !important;
    color: var(--bs-primary) !important;
    font-weight: 500;
}

/* No results message */
.select2-results__message {
    color: #6c757d !important;
    font-size: var(--bs-body-font-size) !important;
    padding: 0.5rem 0.75rem !important;
}

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

.table {
    border-collapse: collapse;
    background-color: #fff;
}

.table thead th {
    background-color: var(--theme-primary-light, #e8eef4) !important;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
    font-weight: 600;
    color: var(--theme-primary-dark, #3a4a5c);
    padding: 0.75rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* App-wide table-th-skin class used on most DataTables */
.table-th-skin thead th,
.table-th-skin>thead>th,
.table-th-skin>thead>tr>th {
    background-color: var(--theme-primary-light, #e8eef4) !important;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
    color: var(--theme-primary-dark, #3a4a5c) !important;
    font-weight: 600 !important;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.65rem 0.75rem !important;
    white-space: nowrap;
}

/* DataTables-specific header styling */
.dataTables_wrapper .dataTable thead th,
.dataTables_wrapper .dataTable thead td {
    background-color: var(--theme-primary-light, #e8eef4) !important;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
    color: var(--theme-primary-dark, #3a4a5c) !important;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.65rem 0.75rem !important;
}

/* DataTables sorting icon contrast */
.dataTables_wrapper .dataTable thead th.sorting,
.dataTables_wrapper .dataTable thead th.sorting_asc,
.dataTables_wrapper .dataTable thead th.sorting_desc {
    background-color: var(--theme-primary-light, #e8eef4) !important;
    color: var(--theme-primary-dark, #3a4a5c) !important;
}

/* DataTables sorting arrow icons — match theme color */
.dataTables_wrapper .dataTable thead th.sorting_asc::before,
.dataTables_wrapper .dataTable thead th.sorting_desc::after {
    color: var(--bs-primary, #3097D1) !important;
    opacity: 1 !important;
}

.dataTables_wrapper .dataTable thead th.sorting::before,
.dataTables_wrapper .dataTable thead th.sorting::after {
    color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.35) !important;
    opacity: 1 !important;
}

/* table-th-skin on tfoot (used in some payment views) */
.table-th-skin tfoot th,
.table-th-skin tfoot td,
tr.table-th-skin th,
tr.table-th-skin td,
tfoot.table-th-skin th,
tfoot.table-th-skin td {
    background-color: var(--theme-primary-light, #e8eef4) !important;
    color: var(--theme-primary-dark, #3a4a5c) !important;
    font-weight: 600 !important;
    font-size: 0.82rem;
    border-top: 2px solid rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
}

/* ========================================
   DATATABLE FOOTER BULK-ACTION BUTTONS
   ======================================== */

/* Wrapper: tfoot td > div flex container */
table tfoot td>div[style*="display: flex"],
table tfoot td>div[style*="display:flex"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.6rem 0.25rem !important;
}

/* Remove   spacing (gap handles it now) */
table tfoot td>div[style*="display: flex"]>br,
table tfoot td>div[style*="display:flex"]>br {
    display: none;
}

/* Make inline forms flex-friendly */
table tfoot td form {
    display: inline-flex !important;
    margin: 0 !important;
}

/* Uniform button sizing in tfoot */
table tfoot td .btn {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border-radius: 0.3rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    vertical-align: middle !important;
    border: 1px solid transparent !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

table tfoot td .btn:hover {
    opacity: 0.88;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

table tfoot td .btn i {
    font-size: 0.78rem !important;
}

/* AdminLTE bg-navy fallback (not in BS5) */
.bg-navy {
    background-color: #001f3f !important;
    color: #fff !important;
    border-color: #001f3f !important;
}

.bg-navy:hover {
    background-color: #003366 !important;
}

.table tbody td {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    padding: 0.75rem;
    color: var(--bs-body-color);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

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

.badge {
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.25rem;
}

.badge-primary {
    background-color: var(--bs-primary);
    color: #fff;
}

.badge-secondary {
    background-color: var(--bs-secondary);
    color: #fff;
}

.badge-success {
    background-color: var(--bs-success);
    color: #fff;
}

.badge-danger {
    background-color: var(--bs-danger);
    color: #fff;
}

.badge-warning {
    background-color: var(--bs-warning);
    color: #333;
}

.badge-info {
    background-color: var(--bs-info);
    color: #fff;
}

/* ========================================
   ALERTS
   ======================================== */

.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: var(--bs-border-width) solid transparent;
    border-radius: 0.375rem;
}

.alert-primary {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* ========================================
   BACKGROUNDS
   ======================================== */

.bg-light {
    background-color: var(--bs-light) !important;
}

.bg-dark {
    background-color: var(--bs-dark) !important;
    color: #fff;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: #fff;
}

.bg-success {
    background-color: var(--bs-success) !important;
    color: #fff;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
    color: #fff;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #333;
}

.bg-info {
    background-color: var(--bs-info) !important;
    color: #fff;
}

.bg-white {
    background-color: #fff !important;
}

/* ========================================
   TEXT COLORS
   ======================================== */

.text-primary {
    color: var(--bs-primary);
}

.text-secondary {
    color: var(--bs-secondary);
}

.text-success {
    color: var(--bs-success);
}

.text-danger {
    color: var(--bs-danger);
}

.text-warning {
    color: var(--bs-warning);
}

.text-info {
    color: var(--bs-info);
}

.text-dark {
    color: var(--bs-dark);
}

.text-muted {
    color: #6c757d;
}

/* ========================================
   BORDERS
   ======================================== */

.border {
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

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

.pagination {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.page-link {
    color: var(--bs-primary);
    background-color: #fff;
    border: var(--bs-border-width) solid var(--bs-border-color);
    padding: 0.375rem 0.75rem;
    text-decoration: none;
}

.page-link:hover {
    background-color: var(--bs-light);
    border-color: var(--bs-border-color);
    color: var(--theme-primary-dark);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: var(--bs-border-color);
}

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

.dropdown-menu {
    background-color: #fff;
    border: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    min-width: 10rem;
    padding: 0.5rem 0;
    margin-top: 0.125rem;
}

/* ========================================
   DATEPICKER / DATETIMEPICKER / DATERANGEPICKER
   Bootstrap 5 hides .dropdown-menu by default (display:none).
   The Eonasdan datetimepicker creates its widget as
   .bootstrap-datetimepicker-widget.dropdown-menu — must override.
   ======================================== */

/* Force datetimepicker widget visible when shown */
.bootstrap-datetimepicker-widget.dropdown-menu {
    display: block !important;
    z-index: 11001 !important;
    padding: 0 !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18) !important;
    background-color: #fff !important;
    min-width: 280px !important;
    max-width: 320px !important;
}

/* Datepicker table header (month/year navigation) */
.bootstrap-datetimepicker-widget .datepicker-days thead tr:first-child th,
.bootstrap-datetimepicker-widget .datepicker-months thead tr:first-child th,
.bootstrap-datetimepicker-widget .datepicker-years thead tr:first-child th,
.bootstrap-datetimepicker-widget .datepicker-decades thead tr:first-child th {
    cursor: pointer;
    padding: 0.5rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.bootstrap-datetimepicker-widget .datepicker-days thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget .datepicker-months thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget .datepicker-years thead tr:first-child th:hover {
    background-color: var(--bs-light);
    border-radius: 0.25rem;
}

/* Day-of-week header row */
.bootstrap-datetimepicker-widget .datepicker-days thead tr:last-child th {
    font-weight: 600;
    font-size: 0.8rem;
    color: #6c757d;
    padding: 0.35rem;
    text-transform: uppercase;
}

/* Day cells */
.bootstrap-datetimepicker-widget table td {
    padding: 0.4rem;
    text-align: center;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.8;
    transition: background-color 0.1s ease;
}

.bootstrap-datetimepicker-widget table td:hover {
    background-color: var(--bs-light);
}

/* Today highlight */
.bootstrap-datetimepicker-widget table td.today {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    color: var(--bs-primary) !important;
    font-weight: 600;
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--bs-primary) !important;
}

/* Active/selected day */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    font-weight: 600;
    text-shadow: none !important;
}

/* Disabled days (greyed out) */
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    color: #ccc !important;
    cursor: not-allowed;
    background-color: transparent !important;
}

/* Old/new month days */
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: #adb5bd;
}

/* Month/year picker cells */
.bootstrap-datetimepicker-widget .datepicker-months td span,
.bootstrap-datetimepicker-widget .datepicker-years td span,
.bootstrap-datetimepicker-widget .datepicker-decades td span {
    display: inline-block;
    padding: 0.5rem;
    margin: 2px;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.bootstrap-datetimepicker-widget .datepicker-months td span:hover,
.bootstrap-datetimepicker-widget .datepicker-years td span:hover {
    background-color: var(--bs-light);
}

.bootstrap-datetimepicker-widget .datepicker-months td span.active,
.bootstrap-datetimepicker-widget .datepicker-years td span.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Timepicker styling */
.bootstrap-datetimepicker-widget .timepicker td {
    padding: 0.25rem;
    text-align: center;
}

.bootstrap-datetimepicker-widget .timepicker td a {
    color: var(--bs-primary) !important;
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    display: inline-block;
    border-radius: 0.25rem;
}

.bootstrap-datetimepicker-widget .timepicker td a:hover {
    background-color: var(--bs-light);
}

.bootstrap-datetimepicker-widget .timepicker td span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* Picker toggle buttons (date/time switch) */
.bootstrap-datetimepicker-widget .picker-switch {
    cursor: pointer;
    font-weight: 600;
    color: var(--bs-body-color);
}

.bootstrap-datetimepicker-widget .picker-switch td span {
    padding: 0.5rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.bootstrap-datetimepicker-widget .picker-switch td span:hover,
.bootstrap-datetimepicker-widget .picker-switch:hover {
    background-color: var(--bs-light);
}

/* Collapse transition for switching views */
.bootstrap-datetimepicker-widget .collapse {
    display: none;
}

.bootstrap-datetimepicker-widget .collapse.in,
.bootstrap-datetimepicker-widget .collapse.show {
    display: block;
}

.bootstrap-datetimepicker-widget .collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

/* Separator between date and time */
.bootstrap-datetimepicker-widget .separator {
    padding: 0 0.25rem;
    color: #6c757d;
}

/* Bootstrap-datepicker (standalone, non-Eonasdan) */
.datepicker {
    z-index: 9999 !important;
}

.datepicker-dropdown {
    z-index: 9999 !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18) !important;
    padding: 0.25rem !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    color: var(--bs-primary) !important;
}

/* Daterangepicker widget */
.daterangepicker {
    z-index: 9999 !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18) !important;
    background-color: #fff !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.daterangepicker td.in-range {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.daterangepicker .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.daterangepicker .ranges li.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.dropdown-item {
    color: var(--bs-body-color);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: inherit;
    background-color: transparent;
    border: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bs-light);
    color: var(--bs-primary);
    text-decoration: none;
}

.dropdown-item.active {
    background-color: var(--bs-primary);
    color: #fff;
}

.dropdown-item i,
.dropdown-item .fas,
.dropdown-item .far,
.dropdown-item .fab,
.dropdown-item .fa {
    width: 1.2em;
    text-align: center;
    font-size: 0.85rem;
    color: #6c757d;
    flex-shrink: 0;
}

.dropdown-item:hover i,
.dropdown-item:hover .fas,
.dropdown-item:hover .far,
.dropdown-item:hover .fa {
    color: var(--bs-primary);
}

/* ========================================
   ACTION BUTTON DROPDOWNS (DataTables)
   Bootstrap 3 pattern: ul>li>a with btn-group
   ======================================== */

/* btn-xs (Bootstrap 3 class not in Bootstrap 5) */
.btn-xs {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    border-radius: 0.25rem !important;
}

/* Action dropdown trigger button */
.btn-group .btn.dropdown-toggle.btn-xs {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Hide BS3 caret span (BS5 adds its own via ::after) */
.btn-group .btn.dropdown-toggle .caret {
    display: none;
}

/* Action dropdown menu positioning & styling */
.btn-group>.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1050 !important;
    min-width: 12rem !important;
    padding: 0.35rem 0 !important;
    margin-top: 0.15rem !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.12) !important;
    background-color: #fff !important;
}

/* When detached to body by JS (table overflow fix) */
body>.dropdown-menu {
    z-index: 1050 !important;
    min-width: 12rem !important;
    padding: 0.35rem 0 !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.12) !important;
    background-color: #fff !important;
}

/* DataTables Column Visibility dropdown — must sit above the
   dt-button-background overlay (z-index 2001) so items are clickable.
   The generic body>.dropdown-menu rule above sets 1050 !important which
   pushes the colvis list behind the backdrop; override it here. */
body > .dt-button-collection.dropdown-menu {
    z-index: 2100 !important;
    display: block !important;
}

/* Ensure the dt-button-background backdrop stays just below the collection */
div.dt-button-background {
    z-index: 2001 !important;
}

/* Right-align if near edge */
.btn-group>.dropdown-menu-right,
.btn-group>.dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
}

/* Style li>a items as dropdown-items (BS3 pattern)
   Works both inside btn-group and when detached to body */
.dropdown-menu>li>a:not(.btn) {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    color: var(--bs-body-color) !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 0.1s ease, color 0.1s ease !important;
}

.dropdown-menu>li>a:not(.btn):hover,
.dropdown-menu>li>a:not(.btn):focus {
    background-color: var(--bs-light) !important;
    color: var(--bs-primary) !important;
}

.dropdown-menu>li>a i,
.dropdown-menu>li>a .fas,
.dropdown-menu>li>a .far,
.dropdown-menu>li>a .fa {
    width: 1.2em !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    color: #6c757d !important;
    flex-shrink: 0 !important;
}

.dropdown-menu>li>a:hover i,
.dropdown-menu>li>a:hover .fas,
.dropdown-menu>li>a:hover .far,
.dropdown-menu>li>a:hover .fa {
    color: var(--bs-primary) !important;
}

/* Divider (BS3 li.divider) */
.dropdown-menu>li.divider,
.dropdown-menu>.dropdown-divider {
    height: 0 !important;
    margin: 0.3rem 0 !important;
    overflow: hidden !important;
    border-top: 1px solid var(--bs-border-color) !important;
    padding: 0 !important;
}

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

/* z-index for .modal, .modal-backdrop, .select2 inside modals,
   and datepickers inside modals is handled in app.css
   (single source of truth — do NOT add z-index rules here). */

.modal-content {
    background-color: #fff;
    border: var(--bs-border-width) solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
    background-color: #f5f8fa;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    padding: 1rem;
}

.modal-title {
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
}

.modal-body {
    padding: 1rem;
    color: var(--bs-body-color);
}

.modal-footer {
    background-color: #f5f8fa;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    padding: 1rem;
}

/* ========================================
   LIST GROUPS
   ======================================== */

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--bs-body-color);
    background-color: #fff;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.list-group-item:hover {
    background-color: var(--bs-light);
    color: var(--bs-primary);
    cursor: pointer;
}

.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #fff;
    border-radius: 0.375rem;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.breadcrumb-item {
    display: flex;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding: 0 0.5rem;
    content: "/";
    color: #6c757d;
}

.breadcrumb-item.active {
    color: #6c757d;
}

.breadcrumb-item a {
    color: var(--bs-primary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--theme-primary-dark);
    text-decoration: underline;
}

/* ========================================
   SPINNERS
   ======================================== */

.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   UTILITY SPACING
   ======================================== */

.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 1rem;
}

.m-4 {
    margin: 1.5rem;
}

.m-5 {
    margin: 3rem;
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 1rem;
}

.p-4 {
    padding: 1.5rem;
}

.p-5 {
    padding: 3rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mt-5 {
    margin-top: 3rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 1rem;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 1rem;
}

/* ========================================
   DISPLAY AND VISIBILITY
   ======================================== */

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ========================================
   FLEX UTILITIES
   ======================================== */

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-stretch {
    align-items: stretch;
}

/* ========================================
   SIZING
   ======================================== */

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

.h-25 {
    height: 25%;
}

.h-50 {
    height: 50%;
}

.h-75 {
    height: 75%;
}

.h-100 {
    height: 100%;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 576px) {
    .d-sm-none {
        display: none;
    }

    .d-sm-block {
        display: block;
    }

    .d-sm-flex {
        display: flex;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .d-md-none {
        display: none;
    }

    .d-md-block {
        display: block;
    }

    .d-md-flex {
        display: flex;
    }
}

@media (min-width: 768px) {
    .d-lg-none {
        display: none;
    }

    .d-lg-block {
        display: block;
    }

    .d-lg-flex {
        display: flex;
    }
}

/* ========================================
   SIDEBAR AND NAVIGATION
   ======================================== */

.sidebar,
.main-sidebar {
    background-color: var(--theme-sidebar-bg, #fff) !important;
    border-right: var(--bs-border-width) solid var(--theme-sidebar-border, var(--bs-border-color)) !important;
    transition: background-color 0.3s ease !important;
}

.sidebar-menu,
.sidebar-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sidebar-menu>li>a,
.main-sidebar .sidebar-menu>li>a {
    color: var(--theme-sidebar-text, var(--bs-body-color)) !important;
    background: transparent !important;
    padding: 0.75rem 1rem !important;
    display: block !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
}

.sidebar-menu>li>a:hover,
.main-sidebar .sidebar-menu>li>a:hover {
    background-color: var(--theme-sidebar-hover-bg, var(--bs-light)) !important;
    border-left-color: #fff !important;
    color: #fff !important;
}

.sidebar-menu>li>a.active,
.sidebar-menu>li.active>a,
.main-sidebar .sidebar-menu>li>a.active {
    background-color: var(--theme-sidebar-active-bg, var(--bs-light)) !important;
    border-left-color: #fff !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Sidebar menu icons inherit link color */
.sidebar-menu>li>a>i,
.sidebar-menu>li>a>.fa,
.sidebar-menu>li>a>.fas,
.sidebar-menu>li>a>.far,
.sidebar-menu>li>a>.fab {
    color: inherit !important;
    margin-right: 0.5rem;
}

/* Sidebar treeview arrows and pull-right badges */
.sidebar-menu .fa-angle-left,
.sidebar-menu .fa-angle-right,
.sidebar-menu .fa-angle-down,
.sidebar-menu .pull-right-container,
.sidebar-menu .pull-right-container .fa,
.sidebar-menu .badge,
.sidebar-menu .label {
    color: var(--theme-sidebar-text, var(--bs-body-color)) !important;
}

/* Treeview submenu icons */
.treeview-menu>li>a>i,
.treeview-menu>li>a>.fa,
.treeview-menu>li>a>.fas,
.treeview-menu>li>a>.far {
    color: inherit !important;
}

/* Sidebar section headers */
.sidebar-menu .header {
    color: var(--theme-sidebar-text, #6c757d) !important;
    opacity: 0.7;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem 0.5rem !important;
}

/* Sidebar user panel */
.sidebar .user-panel {
    border-bottom: 1px solid var(--theme-sidebar-border, var(--bs-border-color)) !important;
}

.sidebar .user-panel .info {
    color: var(--theme-sidebar-text, var(--bs-body-color)) !important;
}

/* AdminLTE treeview styling */
.treeview-menu {
    background-color: rgba(0, 0, 0, 0.12) !important;
}

.treeview-menu>li>a {
    padding-left: 2rem !important;
    color: var(--theme-sidebar-text, var(--bs-body-color)) !important;
    background: transparent !important;
}

.treeview-menu>li>a:hover {
    background-color: var(--theme-sidebar-hover-bg, rgba(0, 0, 0, 0.05)) !important;
    color: #fff !important;
}

.treeview-menu>li.active>a {
    background-color: var(--theme-sidebar-active-bg, rgba(0, 0, 0, 0.05)) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ========================================
   WRAPPER AND CONTENT
   ======================================== */

.wrapper {
    background-color: var(--theme-content-bg, var(--bs-body-bg));
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
    padding: 1rem;
    background-color: var(--theme-content-bg, var(--bs-body-bg));
}

.main-content {
    background-color: var(--theme-content-bg, var(--bs-body-bg));
}

/* ========================================
   HEADER AND FOOTER
   ======================================== */

.main-header,
[role="banner"] {
    background-color: var(--theme-header-bg, #fff);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    min-height: 60px;
    display: flex;
    align-items: center;
}

.main-footer,
[role="contentinfo"] {
    background-color: var(--theme-content-bg, #f5f8fa);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    color: var(--bs-body-color);
    padding: 0.5rem;
}

/* ========================================
   HELP TEXT AND VALIDATION
   ======================================== */

.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #6c757d;
}

.invalid-feedback,
.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
}

.is-invalid~.invalid-feedback {
    display: block;
    color: var(--bs-danger);
}

.is-valid~.valid-feedback {
    display: block;
    color: var(--bs-success);
}

.is-invalid,
.form-control.is-invalid {
    border-color: var(--bs-danger);
}

.is-valid,
.form-control.is-valid {
    border-color: var(--bs-success);
}

/* ========================================
   CHECKBOXES AND RADIO BUTTONS
   ======================================== */

.form-check {
    display: block;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Base form-check-input: inline alignment (safe default).
   The float/negative-margin trick is re-applied ONLY inside .form-check below. */
.form-check-input {
    accent-color: var(--bs-primary);
    vertical-align: middle;
    margin-top: 0;
    margin-right: 0.4rem;
    cursor: pointer;
}

/* Inside a proper .form-check wrapper, use the BS5 float layout */
.form-check>.form-check-input,
.form-check>label>.form-check-input {
    float: left;
    margin-left: -1.5rem;
    margin-top: 0.3em;
    margin-right: 0;
}

.form-check-label {
    margin-bottom: 0;
    color: var(--bs-body-color);
    cursor: pointer;
}

.form-switch .form-check-input {
    width: 2.5em;
    margin-left: -3.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    border-radius: 2.5em;
}

.form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}

/* ========================================
   LEGACY .checkbox/.radio WRAPPER COMPAT
   Fixes alignment when form-check-input is
   used inside Bootstrap-3-style wrappers:
     <div class="checkbox"><label>...</label></div>
   ======================================== */

/* Give the legacy wrappers consistent spacing */
.checkbox,
.radio {
    position: relative;
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Override legacy absolute-positioning from old BS3 CSS */
.checkbox label .form-check-input,
.radio label .form-check-input {
    position: static !important;
    float: none !important;
    margin: 0 0.4rem 0 0 !important;
    vertical-align: middle;
}

/* Remove old padding-left that compensated for position:absolute */
.checkbox>label,
.radio>label {
    padding-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
}

/* Inline radio/checkbox groups (e.g., Show / Hide) */
.form-inline .radio>label,
.form-inline .checkbox>label {
    padding-left: 0;
}

/* ========================================
   STANDALONE LABEL + FORM-CHECK-INPUT
   Handles: <label class="form-check-label">
              <input class="form-check-input"> Text
            </label>
   (without .form-check or .checkbox wrapper)
   ======================================== */

label.form-check-label>.form-check-input {
    position: static;
    float: none;
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
}

label.form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* Re-apply correct positioning inside .form-check */
.form-check label.form-check-label>.form-check-input {
    float: left;
    margin-left: -1.5rem;
    margin-right: 0;
    margin-top: 0.3em;
}

.form-check label.form-check-label {
    display: block;
}

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

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: 0.75rem;
    background-color: var(--bs-light);
    border-radius: 0.375rem;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-primary);
    transition: width 0.6s ease;
}

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

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1070;
    display: none;
    max-width: 276px;
    padding: 1px;
    margin-top: 0.5rem;
    background-color: #fff;
    background-clip: padding-box;
    border: var(--bs-border-width) solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.popover-header {
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: var(--bs-body-font-size);
    font-weight: 600;
    color: var(--bs-body-color);
    background-color: var(--bs-light);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: calc(0.375rem - var(--bs-border-width));
}

.popover-body {
    padding: 1rem;
    color: var(--bs-body-color);
}

/* ========================================
   JUMBOTRON/HERO
   ======================================== */

.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 0;
    background-color: var(--bs-light);
}

.jumbotron p:last-child {
    margin-bottom: 0;
}

.jumbotron h1 {
    font-weight: 300;
    line-height: 1;
}

/* ========================================
   LEGACY BOOTSTRAP 3/4 COMPATIBILITY
   ======================================== */

/* btn-default (BS3) → acts like btn-light */
.btn-default {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: var(--bs-border-color) !important;
}

.btn-default:hover,
.btn-default:focus {
    color: #212529 !important;
    background-color: #f8f9fa !important;
    border-color: #bdc0c4 !important;
}

.btn-default:active,
.btn-default.active {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* btn-flat (AdminLTE) → transparent flat style */
.btn-flat {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* btn-outline-default (non-standard) → outline-secondary equivalent */
.btn-outline-default {
    color: #6c757d !important;
    background-color: transparent !important;
    border-color: var(--bs-border-color) !important;
}

.btn-outline-default:hover,
.btn-outline-default:focus {
    color: #212529 !important;
    background-color: #f8f9fa !important;
    border-color: #bdc0c4 !important;
}

/* Inside input-groups: override btn-default/btn-flat to match group styling */
.input-group .btn-default,
.input-group .btn-flat,
.input-group .btn-outline-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.input-group .btn-default:last-child,
.input-group .btn-flat:last-child,
.input-group .btn-outline-default:last-child,
.input-group .input-group-btn:last-child .btn-default,
.input-group .input-group-btn:last-child .btn-flat,
.input-group .input-group-btn:last-child .btn-outline-default {
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* input-group-addon (BS3) used as prepend — already handled for first-child,
   add support when it's the last child (append position) */
.input-group>.input-group-addon:last-child {
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* input-group-prepend / input-group-append (BS4) → transparent wrappers */
.input-group>.input-group-prepend,
.input-group>.input-group-append {
    display: flex !important;
    align-items: stretch !important;
}

.input-group>.input-group-prepend>.input-group-text {
    border-radius: 0.375rem 0 0 0.375rem !important;
}

.input-group>.input-group-append>.input-group-text {
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* Fix: input-group-btn children should not break flex flow */
.input-group>.input-group-btn {
    display: flex;
    align-items: stretch !important;
    flex: 0 0 auto !important;
}

.input-group>.input-group-btn>.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px;
    min-height: 38px;
    padding: 0.45rem 0.5rem !important;
    border-radius: 0 !important;
    border: 1px solid var(--bs-border-color) !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.input-group>.input-group-btn:first-child>.btn {
    border-radius: 0.375rem 0 0 0.375rem !important;
    border-right: none !important;
}

.input-group>.input-group-btn:last-child>.btn {
    border-radius: 0 0.375rem 0.375rem 0 !important;
    border-left: none !important;
}

/* Fix Select2 inside input-group: ensure the hidden select doesn't break layout */
.input-group>select.form-control[style*="width: 70%"],
.input-group>select.form-control[style*="width: 100%"] {
    width: 1% !important;
    flex: 1 1 auto !important;
}

/* Fix: button directly inside input-group (not wrapped in input-group-btn) */
.input-group>.btn.add_new_customer,
.input-group>.btn.add_new_supplier,
.input-group>.btn.quick_add_unit,
.input-group>.btn.btn-modal {
    flex: 0 0 auto !important;
    border-left: none !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

    .no-print,
    .navbar,
    .sidebar {
        display: none !important;
    }

    body {
        background-color: white;
        color: black;
    }
}

/* ========================================
   DARK MODE OVERRIDES
   Comprehensive dark theme support.
   These rules must be in this file because
   bootstrap5-theme.css loads LAST with !important
   values that override dark-theme.css.
   ======================================== */

/* ---------- CSS Variable Overrides ---------- */
html.dark-theme {
    --bs-body-bg: #1a2232;
    --bs-body-color: #e4e5e6;
    --bs-border-color: rgba(255, 255, 255, 0.12);
    --bs-form-control-bg: #1a2232;
    --bs-form-control-border-color: rgba(255, 255, 255, 0.18);
    --bs-form-control-focus-bg: #202a40;
    --bs-form-control-focus-border-color: rgba(0, 140, 255, 0.5);
    --bs-light: #1b2336;
    --bs-light-rgb: 27, 35, 54;
    --bs-dark: #e4e5e6;
    --bs-dark-rgb: 228, 229, 230;
    --theme-sidebar-bg: #1a2232;
    --theme-sidebar-text: #e4e5e6;
    --theme-sidebar-hover-bg: #29344d;
    --theme-sidebar-active-bg: #2e394e;
    --theme-sidebar-border: rgba(255, 255, 255, 0.12);
    --theme-header-bg: #1a2232;
    --theme-content-bg: #1a2232;
}

/* ---------- Body & Global ---------- */
html.dark-theme body {
    color: #e4e5e6 !important;
    background-color: #1a2232 !important;
}

/* ---------- Text Utilities ---------- */
html.dark-theme .text-dark {
    color: #e4e5e6 !important;
}

html.dark-theme .text-muted {
    color: #8b95a5 !important;
}

html.dark-theme body .text-muted {
    color: #8b95a5 !important;
}

html.dark-theme .text-secondary {
    color: #8c949c !important;
}

html.dark-theme .text-body {
    color: #e4e5e6 !important;
}

html.dark-theme a {
    color: #6db3f2;
}

html.dark-theme a:hover {
    color: #93c9f7;
}

/* ---------- Background Utilities ---------- */
html.dark-theme .bg-white {
    background-color: #202a40 !important;
}

html.dark-theme .bg-light {
    background-color: #1b2336 !important;
}

html.dark-theme .bg-body {
    background-color: #1a2232 !important;
}

/* ---------- Cards ---------- */
html.dark-theme .card {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2) !important;
}

html.dark-theme .card-header {
    background-color: #1b2538 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e5e6 !important;
}

/* Dark mode: filter card header accent */
html.dark-theme .card.box-solid>.card-header,
html.dark-theme .card.radius-10.box-solid>.card-header {
    background-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.1) !important;
    border-bottom-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
    color: #e4e5e6 !important;
}

html.dark-theme .card.box-solid>.card-header .card-title,
html.dark-theme .card.radius-10.box-solid>.card-header .card-title {
    color: #e4e5e6 !important;
}

html.dark-theme .card.box-solid>.card-header .fa-filter,
html.dark-theme .card.radius-10.box-solid>.card-header .fa-filter,
html.dark-theme .card.box-solid>.card-header .bi-chevron-down,
html.dark-theme .card.radius-10.box-solid>.card-header .bi-chevron-down {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .card-footer {
    background-color: #1b2538 !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e5e6 !important;
}

html.dark-theme .card-body {
    color: #e4e5e6 !important;
}

html.dark-theme .card-title {
    color: #e4e5e6 !important;
}

/* ---------- Navbar & Header ---------- */
html.dark-theme .navbar {
    background-color: #1a2232 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dark mode: Module Navbar Tabs — global */
html.dark-theme .navbar-light .navbar-brand {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .navbar-light .navbar-nav .nav-link {
    color: #a0a4a8 !important;
    border-bottom: 3px solid transparent;
}

html.dark-theme .navbar-light .navbar-nav .nav-link:hover,
html.dark-theme .navbar-light .navbar-nav .nav-link:focus {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .navbar-light .navbar-nav .nav-link.active {
    color: var(--bs-primary, #6db3f2) !important;
    font-weight: 700 !important;
    border-bottom: 3px solid var(--bs-primary, #6db3f2) !important;
}

/* ---------- Breadcrumb ---------- */
html.dark-theme .breadcrumb {
    background-color: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .breadcrumb-item {
    color: #8b95a5 !important;
}

html.dark-theme .breadcrumb-item a {
    color: #6db3f2 !important;
}

html.dark-theme .breadcrumb-item.active {
    color: #8b95a5 !important;
}

html.dark-theme .breadcrumb-item+.breadcrumb-item::before {
    color: #8b95a5 !important;
}

/* ---------- Form Controls ---------- */
html.dark-theme .form-control,
html.dark-theme .form-select {
    color: #e4e5e6 !important;
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark-theme .form-control:focus,
html.dark-theme .form-select:focus {
    color: #fcfcfc !important;
    background-color: #202a40 !important;
    border-color: rgba(0, 140, 255, 0.5) !important;
    box-shadow: 0 0 0 0.15rem rgba(0, 140, 255, 0.15) !important;
}

html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
    background-color: #2c364a !important;
    color: #a0a4a8 !important;
}

html.dark-theme .form-select:disabled {
    background-color: #2c364a !important;
    color: #a0a4a8 !important;
}

html.dark-theme .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

html.dark-theme label,
html.dark-theme .form-label,
html.dark-theme .control-label,
html.dark-theme .col-form-label {
    color: #d0d4dc !important;
}

html.dark-theme .form-check-label {
    color: #d0d4dc !important;
}

html.dark-theme .form-text {
    color: #8b95a5 !important;
}

html.dark-theme .input-group-text {
    color: #e4e5e6 !important;
    background-color: #313c53 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ---------- Select2 ---------- */
html.dark-theme .select2-container .select2-selection--single {
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark-theme .select2-container .select2-selection--single .select2-selection__rendered {
    color: #e4e5e6 !important;
}

html.dark-theme .select2-container .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

html.dark-theme .select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #8b95a5 transparent transparent transparent !important;
}

html.dark-theme .select2-container .select2-selection--multiple {
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark-theme .select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #313c53 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #e4e5e6 !important;
}

html.dark-theme .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #e4e5e6 !important;
}

html.dark-theme .select2-dropdown {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark-theme .select2-search--dropdown .select2-search__field {
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #e4e5e6 !important;
}

html.dark-theme .select2-results__option {
    color: #e4e5e6 !important;
}

html.dark-theme .select2-results__option--highlighted,
html.dark-theme .select2-results__option[aria-selected="true"] {
    background-color: #29344d !important;
    color: #fff !important;
}

html.dark-theme .select2-results__message {
    color: #8b95a5 !important;
}

/* ---------- Tables ---------- */
html.dark-theme .table {
    color: #e4e5e6 !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    --bs-table-bg: transparent;
    --bs-table-striped-color: #e4e5e6;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
}

html.dark-theme .table thead th {
    background-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.12) !important;
    border-bottom-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
    color: #c0c8d4 !important;
}

html.dark-theme .table-th-skin thead th,
html.dark-theme .table-th-skin>thead>th,
html.dark-theme .table-th-skin>thead>tr>th {
    background-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.12) !important;
    border-bottom-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
    color: #c0c8d4 !important;
}

html.dark-theme .table td,
html.dark-theme .table th {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e4e5e6;
}

html.dark-theme .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #e4e5e6 !important;
}

html.dark-theme .table-hover>tbody>tr:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

html.dark-theme .table-light {
    --bs-table-bg: rgba(255, 255, 255, 0.05);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.08);
    color: #e4e5e6 !important;
}

/* ---------- DataTables ---------- */
html.dark-theme .dataTables_wrapper .dataTables_length,
html.dark-theme .dataTables_wrapper .dataTables_filter,
html.dark-theme .dataTables_wrapper .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: #c0c8d4 !important;
}

html.dark-theme .dataTables_wrapper .dataTables_length select,
html.dark-theme .dataTables_wrapper .dataTables_filter input {
    color: #e4e5e6 !important;
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #c0c8d4 !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background: var(--bs-primary, #313c53) !important;
    border-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.4) !important;
}

html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    background: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.2) !important;
    border-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.3) !important;
}

html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #555e6d !important;
}

/* Dark-mode DataTable header overrides (theme-tinted) */
html.dark-theme .dataTables_wrapper .dataTable thead th,
html.dark-theme .dataTables_wrapper .dataTable thead td {
    background-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.12) !important;
    border-bottom-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
    color: #c0c8d4 !important;
}

/* Dark-mode tfoot skin */
html.dark-theme .table-th-skin tfoot th,
html.dark-theme .table-th-skin tfoot td,
html.dark-theme tr.table-th-skin th,
html.dark-theme tr.table-th-skin td,
html.dark-theme tfoot.table-th-skin th,
html.dark-theme tfoot.table-th-skin td {
    background-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.12) !important;
    color: #c0c8d4 !important;
    border-top-color: rgba(var(--bs-primary-rgb, 48, 151, 209), 0.25) !important;
}

/* ---------- Buttons ---------- */
html.dark-theme .btn-default,
html.dark-theme .btn-outline-default {
    color: #e4e5e6 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background-color: transparent !important;
}

html.dark-theme .btn-default:hover,
html.dark-theme .btn-outline-default:hover {
    background-color: #29344d !important;
    color: #fff !important;
}

html.dark-theme .btn-light {
    color: #e4e5e6 !important;
    background-color: #313c53 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .btn-white {
    color: #e4e5e6 !important;
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .btn-dark {
    color: #fff !important;
    background-color: #101821 !important;
    border-color: #101821 !important;
}

html.dark-theme .btn-outline-dark {
    color: #b1b6bb !important;
    border-color: #7f868d !important;
}

/* Input group buttons (quick-add / plus) */
html.dark-theme .input-group>.btn:last-child,
html.dark-theme .input-group>.input-group-btn:last-child>.btn,
html.dark-theme .input-group>span.input-group-btn>.btn,
html.dark-theme .input-group>.btn.btn-modal,
html.dark-theme .input-group>.btn.add_new_supplier,
html.dark-theme .input-group>.btn.add_new_customer,
html.dark-theme .input-group>.btn.quick_add_unit {
    background-color: #313c53 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #6db3f2 !important;
}

html.dark-theme .input-group>.btn:last-child:hover,
html.dark-theme .input-group>.input-group-btn:last-child>.btn:hover,
html.dark-theme .input-group>span.input-group-btn>.btn:hover {
    background-color: #29344d !important;
    border-color: rgba(0, 140, 255, 0.4) !important;
}

html.dark-theme .input-group>.btn:last-child i,
html.dark-theme .input-group>.input-group-btn:last-child>.btn i,
html.dark-theme .input-group>span.input-group-btn>.btn i {
    color: #6db3f2 !important;
}

/* input-group-btn > .btn generic */
html.dark-theme .input-group>.input-group-btn>.btn {
    background-color: #313c53 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #6db3f2 !important;
}

/* ---------- Dropdowns ---------- */
html.dark-theme .dropdown-menu {
    color: #e4e5e6 !important;
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3) !important;
}

html.dark-theme .dropdown-item {
    color: #e4e5e6 !important;
}

html.dark-theme .dropdown-item:hover,
html.dark-theme .dropdown-item:focus {
    color: #fff !important;
    background-color: #29344d !important;
}

html.dark-theme .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Modals ---------- */
html.dark-theme .modal-content {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e5e6;
}

html.dark-theme .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e5e6;
}

html.dark-theme .modal-header .modal-title,
html.dark-theme .modal-header h4,
html.dark-theme .modal-header h5 {
    color: #e4e5e6 !important;
}

html.dark-theme .modal-body {
    color: #e4e5e6 !important;
}

html.dark-theme .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* ---------- Alerts ---------- */
html.dark-theme .alert-primary {
    background-color: rgba(48, 151, 209, 0.15) !important;
    border-color: rgba(48, 151, 209, 0.3) !important;
    color: #93c9f7 !important;
}

html.dark-theme .alert-success {
    background-color: rgba(42, 178, 123, 0.15) !important;
    border-color: rgba(42, 178, 123, 0.3) !important;
    color: #5fd4a0 !important;
}

html.dark-theme .alert-danger {
    background-color: rgba(191, 83, 41, 0.15) !important;
    border-color: rgba(191, 83, 41, 0.3) !important;
    color: #e47d50 !important;
}

html.dark-theme .alert-warning {
    background-color: rgba(203, 185, 86, 0.15) !important;
    border-color: rgba(203, 185, 86, 0.3) !important;
    color: #e0d177 !important;
}

html.dark-theme .alert-info {
    background-color: rgba(142, 180, 203, 0.15) !important;
    border-color: rgba(142, 180, 203, 0.3) !important;
    color: #a5c8dd !important;
}

/* ---------- Pagination ---------- */
html.dark-theme .page-link {
    color: #c0c8d4 !important;
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .page-link:hover {
    color: #fff !important;
    background-color: #29344d !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-theme .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

html.dark-theme .page-item.disabled .page-link {
    color: #555e6d !important;
    background-color: #181f2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Tabs & Navs ---------- */

/* Light mode: Bootstrap nav-tabs — theme-aware active state */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--bs-primary, #3097D1) !important;
    border-bottom-color: var(--bs-primary, #3097D1) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--bs-primary, #3097D1) !important;
}

/* Light mode: Bootstrap nav-pills — theme-aware active state */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--bs-primary, #3097D1) !important;
    color: #fff !important;
}

/* Legacy nav-tabs-custom — theme-aware active tab */
.nav-tabs-custom>.nav-tabs>li.active>a,
.nav-tabs-custom>.nav-tabs>li>a.active {
    color: var(--bs-primary, #3097D1) !important;
    border-top: none !important;
}

.nav-tabs-custom>.nav-tabs>li>a:hover,
.nav-tabs-custom>.nav-tabs>li>a:focus {
    color: var(--theme-primary-dark, #2a7cb4) !important;
}

/* Dark mode */
html.dark-theme .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .nav-tabs .nav-link {
    color: #c0c8d4 !important;
}

html.dark-theme .nav-tabs .nav-link.active,
html.dark-theme .nav-tabs .nav-item.show .nav-link {
    color: var(--bs-primary, #6db3f2) !important;
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) #1a2232 !important;
    border-bottom-color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .nav-tabs .nav-link:hover,
html.dark-theme .nav-tabs .nav-link:focus {
    border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

html.dark-theme .nav-pills .nav-link {
    color: #c0c8d4 !important;
}

html.dark-theme .nav-pills .nav-link.active {
    background-color: var(--bs-primary, #3097D1) !important;
    color: #fff !important;
}

/* Legacy nav-tabs-custom */
html.dark-theme .nav-tabs-custom {
    background-color: #202a40 !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2) !important;
}

html.dark-theme .nav-tabs-custom>.nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .nav-tabs-custom>.nav-tabs>li>a {
    color: #c0c8d4 !important;
}

html.dark-theme .nav-tabs-custom>.nav-tabs>li.active>a,
html.dark-theme .nav-tabs-custom>.nav-tabs>li>a.active {
    color: var(--bs-primary, #6db3f2) !important;
    background-color: #202a40 !important;
}

html.dark-theme .nav-tabs-custom>.tab-content {
    color: #e4e5e6 !important;
    background-color: #202a40 !important;
}

/* ---------- List Groups ---------- */
html.dark-theme .list-group-item {
    color: #e4e5e6 !important;
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .list-group-item:hover {
    background-color: #29344d !important;
}

html.dark-theme .list-group-item.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* ---------- Borders ---------- */
html.dark-theme .border {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .border-top {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .border-start {
    border-left-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .border-end {
    border-right-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Legacy Box widgets ---------- */
html.dark-theme .box {
    background-color: #202a40 !important;
    color: #e4e5e6 !important;
}

html.dark-theme .box .box-header {
    color: #e4e5e6 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .box .box-header .box-title {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .box .box-body {
    color: #e4e5e6 !important;
}

html.dark-theme .box .box-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    color: #e4e5e6 !important;
}

html.dark-theme .box-success {
    border-top-color: var(--bs-success) !important;
}

html.dark-theme .box-primary {
    border-top-color: var(--bs-primary) !important;
}

html.dark-theme .box-warning {
    border-top-color: var(--bs-warning) !important;
}

html.dark-theme .box-danger {
    border-top-color: var(--bs-danger) !important;
}

/* ---------- Info boxes ---------- */
html.dark-theme .info-box,
html.dark-theme .info-box-new-style {
    background-color: #202a40 !important;
    color: #e4e5e6 !important;
}

html.dark-theme .info-box-new-style .info-box-text {
    color: #a0a4a8 !important;
}

html.dark-theme .small-box {
    background-color: #202a40 !important;
}

html.dark-theme .small-box h3,
html.dark-theme .small-box p {
    color: #e4e5e6 !important;
}

/* ---------- Content Header ---------- */
html.dark-theme .content-header>h1,
html.dark-theme section.content-header>h1 {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .breadcrumb-title {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .box .box-header,
html.dark-theme .box-header {
    color: #e4e5e6 !important;
}

html.dark-theme .box .box-header .box-title,
html.dark-theme .box-header .box-title {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .info-box-new-style .info-box-number {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .content-header-custom {
    background-color: #202a40 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Panels (Legacy) ---------- */
html.dark-theme .panel {
    background-color: #202a40 !important;
    color: #e4e5e6 !important;
}

html.dark-theme .panel-heading {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .panel-default>.panel-heading {
    background-color: #1b2538 !important;
    color: #e4e5e6 !important;
}

html.dark-theme .panel-body {
    color: #e4e5e6 !important;
}

html.dark-theme .panel-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    background-color: #1b2538 !important;
}

html.dark-theme .panel-title {
    color: #e4e5e6 !important;
}

/* ---------- Sidebar ---------- */
html.dark-theme .sidebar,
html.dark-theme .main-sidebar {
    background-color: #1a2232 !important;
    border-right-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Footer ---------- */
html.dark-theme .footer,
html.dark-theme .main-footer {
    color: #c0c8d4 !important;
    background-color: #1a2232 !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Headings ---------- */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme .h1,
html.dark-theme .h2,
html.dark-theme .h3,
html.dark-theme .h4,
html.dark-theme .h5,
html.dark-theme .h6 {
    color: #e4e5e6 !important;
}

/* ---------- Paragraphs & generic text ---------- */
html.dark-theme p {
    color: #aeb3c5;
}

html.dark-theme strong,
html.dark-theme b {
    color: #e4e5e6;
}

html.dark-theme small,
html.dark-theme .small {
    color: #8b95a5;
}

/* ---------- Help block ---------- */
html.dark-theme .help-block {
    color: #8b95a5 !important;
}

/* ---------- Accordion ---------- */
html.dark-theme .accordion-item {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e5e6 !important;
}

html.dark-theme .accordion-button {
    color: #e4e5e6 !important;
    background-color: #202a40 !important;
}

html.dark-theme .accordion-button:not(.collapsed) {
    color: #fff !important;
    background-color: #1b2538 !important;
}

html.dark-theme .accordion-body {
    color: #e4e5e6 !important;
}

/* ---------- Toast ---------- */
html.dark-theme .toast {
    background-color: #202a40 !important;
    color: #e4e5e6 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .toast-header {
    background-color: #1b2538 !important;
    color: #e4e5e6 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Tooltip & Popover ---------- */
html.dark-theme .tooltip-inner {
    background-color: #313c53 !important;
    color: #fff !important;
}

html.dark-theme .popover {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .popover-header {
    background-color: #1b2538 !important;
    color: #e4e5e6 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .popover-body {
    color: #e4e5e6 !important;
}

/* ---------- Progress Bar ---------- */
html.dark-theme .progress {
    background-color: #313c53 !important;
}

/* ---------- Offcanvas ---------- */
html.dark-theme .offcanvas {
    background-color: #1a2232 !important;
    color: #e4e5e6 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- btn-close ---------- */
html.dark-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* ---------- Checkbox & Radio custom ---------- */
html.dark-theme .form-check-input {
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

html.dark-theme .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* ---------- TinyMCE / rich text editors ---------- */
html.dark-theme .tox .tox-edit-area__iframe {
    background-color: #1a2232 !important;
}

html.dark-theme .tox .tox-toolbar,
html.dark-theme .tox .tox-toolbar__primary,
html.dark-theme .tox .tox-toolbar__overflow,
html.dark-theme .tox .tox-menubar {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .tox .tox-tbtn {
    color: #e4e5e6 !important;
}

html.dark-theme .tox .tox-tbtn svg {
    fill: #e4e5e6 !important;
}

html.dark-theme .tox .tox-statusbar {
    background-color: #202a40 !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    color: #8b95a5 !important;
}

html.dark-theme .tox .tox-statusbar__text-container {
    color: #8b95a5 !important;
}

html.dark-theme .tox .tox-statusbar a {
    color: #6db3f2 !important;
}

/* ---------- Picker (date/time) ---------- */
html.dark-theme .picker__holder {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .picker__day,
html.dark-theme .picker__month,
html.dark-theme .picker__year {
    color: #e4e5e6 !important;
}

html.dark-theme .picker__day:hover {
    background-color: #29344d !important;
}

html.dark-theme .picker__day--today {
    color: var(--bs-primary) !important;
}

html.dark-theme .picker__button--today,
html.dark-theme .picker__button--clear,
html.dark-theme .picker__button--close {
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e5e6 !important;
}

/* ---------- Bootstrap-tagsinput ---------- */
html.dark-theme .bootstrap-tagsinput {
    color: #e4e5e6 !important;
    background-color: #1a2232 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark-theme .bootstrap-tagsinput .tag {
    background-color: #313c53 !important;
    color: #e4e5e6 !important;
}

/* ---------- Scrollbar ---------- */
html.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-theme ::-webkit-scrollbar-track {
    background: #1a2232;
}

html.dark-theme ::-webkit-scrollbar-thumb {
    background-color: #313c53;
    border-radius: 4px;
}

html.dark-theme ::-webkit-scrollbar-thumb:hover {
    background-color: #3e4c66;
}

/* ---------- Miscellaneous ---------- */
html.dark-theme hr {
    border-color: rgba(255, 255, 255, 0.12) !important;
    opacity: 1;
}

html.dark-theme code {
    color: #e47d50;
    background-color: rgba(228, 125, 80, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
}

html.dark-theme pre {
    color: #e4e5e6;
    background-color: #161d2d;
    border-color: rgba(255, 255, 255, 0.12);
}

html.dark-theme .well {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e5e6 !important;
}

html.dark-theme .btn-app {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e5e6 !important;
}

/* File upload areas */
html.dark-theme .ff_fileupload_wrap .ff_fileupload_dropzone,
html.dark-theme .imageuploadify {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: #202a40 !important;
    color: #e4e5e6 !important;
}

/* Pos-tab-content (used in settings pages) */
html.dark-theme .pos-tab-content {
    background-color: #202a40 !important;
    color: #e4e5e6 !important;
}

/* Dark mode: pos-tab-menu active state */
html.dark-theme .pos-tab-container {
    background-color: #202a40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .pos-tab-menu .list-group-item,
html.dark-theme .pos-tab-menu .list-group>a {
    background-color: #202a40 !important;
    color: #c0c8d4 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .pos-tab-menu .list-group>a .glyphicon,
html.dark-theme .pos-tab-menu .list-group>a .fa {
    color: var(--bs-primary, #6db3f2) !important;
}

html.dark-theme .pos-tab-menu .list-group>a.active,
html.dark-theme .pos-tab-menu .list-group>a.active .glyphicon,
html.dark-theme .pos-tab-menu .list-group>a.active .fa {
    background-color: var(--bs-primary, #3097D1) !important;
    color: #fff !important;
    border-color: var(--bs-primary, #3097D1) !important;
}

html.dark-theme .pos-tab-menu .list-group>a:hover:not(.active) {
    background-color: #29344d !important;
    color: #fff !important;
}

/* Dark mode: accounting-transactions-tabs */
html.dark-theme .accounting-transactions-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .accounting-transactions-tabs>li>a {
    background-color: #1a2232 !important;
    color: #c0c8d4 !important;
}

html.dark-theme .accounting-transactions-tabs>li>a:hover {
    background-color: #29344d !important;
    color: #fff !important;
}

html.dark-theme .accounting-transactions-tabs>li.active>a,
html.dark-theme .accounting-transactions-tabs>li.active>a:hover {
    background-color: #202a40 !important;
    color: var(--bs-primary, #6db3f2) !important;
    border-bottom-color: var(--bs-primary, #6db3f2) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    border-left-color: rgba(255, 255, 255, 0.12) !important;
    border-right-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .accounting-tab-content {
    background-color: #202a40 !important;
    color: #e4e5e6 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Direct table row background fixes for striped variants */
html.dark-theme .table>tbody>tr>td,
html.dark-theme .table>tbody>tr>th {
    color: #e4e5e6;
}