/* ============================================================
   Qanciye POS/ERP — GLOBAL UI/UX DESIGN SYSTEM  (Light + Dark)
   -----------------------------------------------------------------
   ONE centralized theme consumed by EVERY page in the application.

   Loaded AFTER style.css + responsive.css (see files/head.php),
   login.php and the static layout pages, so every rule in this file
   safely overrides the legacy template palette (orange/indigo).

   Palette:
     Sidebar ........ #0F172A navy (light) / #080F1D (dark)
     Primary ........ #2563EB / hover #1D4ED8
     Page bg ........ #F5F7FA (light) / #0B1220 (dark)
     Card ........... #FFFFFF (light) / #111827 (dark)
     Text ........... #0F172A / #475569 / #64748B
     Borders ........ #D9E1EC / input #CBD5E1
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS — LIGHT
   ============================================================ */
:root,
[data-theme="light"] {
    /* Brand — primary action blue */
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-dark: #1D4ED8;
    --primary-light: #DBEAFE;
    --primary-rgb: 37, 99, 235;

    /* Semantic */
    --success: #10B981;
    --success-hover: #059669;
    --success-light: #ECFDF5;
    --success-dark: #047857;
    --success-rgb: 16, 185, 129;

    --warning: #F59E0B;
    --warning-hover: #D97706;
    --warning-light: #FFFBEB;
    --warning-dark: #B45309;
    --warning-rgb: 245, 158, 11;

    --danger: #EF4444;
    --danger-hover: #DC2626;
    --danger-light: #FEF2F2;
    --danger-dark: #B91C1C;
    --danger-rgb: 239, 68, 68;

    --info: #3B82F6;
    --info-hover: #2563EB;
    --info-light: #DBEAFE;
    --info-dark: #1D4ED8;
    --info-rgb: 59, 130, 246;

    --secondary: #64748B;
    --secondary-dark: #475569;
    --secondary-light: #F1F5F9;

    /* Legacy extra semantic name kept for any remaining consumers */
    --purple: #7C3AED;
    --purple-light: #F5F3FF;

    /* Neutral surfaces / text */
    --bg: #F5F7FA;          /* page background — soft gray, not pure white */
    --page-bg: #F5F7FA;
    --surface: #FFFFFF;     /* cards / panels */
    --card-bg: #FFFFFF;
    --surface-2: #F8FAFC;   /* soft secondary fills */
    --text: #0F172A;        /* primary text */
    --text-primary: #0F172A;
    --text-2: #475569;      /* secondary text */
    --text-secondary: #475569;
    --muted: #64748B;       /* muted / helper text */
    --border: #D9E1EC;      /* hairlines */
    --border-light: #E7ECF3;
    --border-2: #CBD5E1;    /* stronger hairlines */
    --input-bg: #FFFFFF;
    --input-border: #CBD5E1;/* clearly visible input edge */
    --table-bg: #FFFFFF;
    --table-text: #0F172A;
    --table-muted: #475569;
    --table-border: #D9E1EC;
    --table-row-alt: #F8FAFC;
    --table-row-hover: #EFF6FF;
    --table-hover: rgba(37, 99, 235, 0.06);

    /* Sidebar — navy identity */
    --sidebar-bg: #0F172A;
    --sidebar-surface: #1E293B;
    --sidebar-hover: #172554;
    --sidebar-active-bg: #1E293B;
    --sidebar-active-text: #FFFFFF;
    --sidebar-border: #24324A;

    --sidebar-text: #CBD5E1;
    --sidebar-text-hover: #FFFFFF;
    --sidebar-text-muted: #94A3B8;

    --sidebar-icon: #94A3B8;
    --sidebar-icon-hover: #FFFFFF;
    --sidebar-accent: #2563EB;       /* active indicator */
    --sidebar-accent-rgb: 37, 99, 235;
    --sidebar-active-icon: #60A5FA;  /* active menu icon */

    /* Navy scale (legacy names kept for page-level CSS) */
    --navy-900: #0F172A;
    --navy-800: #1E293B;
    --navy-700: #172554;

    /* Logo */
    --logo-width: 130px;
    --logo-height: 48px;
    --logo-max-width: 130px;
    --logo-max-height: 48px;

    /* Bootstrap variable remap (used by utilities + JS widgets) */
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --bs-success: #10B981;
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: #F59E0B;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #EF4444;
    --bs-danger-rgb: 239, 68, 68;
    --bs-info: #3B82F6;
    --bs-info-rgb: 59, 130, 246;
    --bs-secondary: #64748B;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-body-bg: #F5F7FA;
    --bs-body-color: #0F172A;
    --bs-emphasis-color: #0F172A;
    --bs-border-color: #D9E1EC;
    --bs-link-color: #2563EB;
    --bs-link-hover-color: #1D4ED8;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color-rgb: 29, 78, 216;

    /* Legacy alias used by some template color pickers */
    --primary-rgb-picr: 37, 99, 235;

    color-scheme: light;
}

/* ============================================================
   2. DESIGN TOKENS — DARK  (readable, never inverted)
   ============================================================ */
[data-theme="dark"] {
    /* Brand */
    --primary: #3B82F6;
    --primary-hover: #60A5FA;
    --primary-dark: #2563EB;
    --primary-light: rgba(29, 78, 216, 0.18);
    --primary-rgb: 59, 130, 246;

    /* Semantic */
    --success: #22C55E;
    --success-hover: #16A34A;
    --success-light: rgba(22, 163, 74, 0.18);
    --success-dark: #86EFAC;
    --success-rgb: 34, 197, 94;

    --warning: #FBBF24;
    --warning-hover: #F59E0B;
    --warning-light: rgba(245, 158, 11, 0.16);
    --warning-dark: #FCD34D;
    --warning-rgb: 251, 191, 36;

    --danger: #F87171;
    --danger-hover: #EF4444;
    --danger-light: rgba(220, 38, 38, 0.18);
    --danger-dark: #FCA5A5;
    --danger-rgb: 248, 113, 113;

    --info: #38BDF8;
    --info-hover: #0EA5E9;
    --info-light: rgba(2, 132, 199, 0.18);
    --info-dark: #7DD3FC;
    --info-rgb: 56, 189, 248;

    --secondary: #94A3B8;
    --secondary-dark: #CBD5E1;
    --secondary-light: #1E293B;

    --purple: #A78BFA;
    --purple-light: rgba(124, 58, 237, 0.16);

    /* Neutral surfaces / text */
    --bg: #0B1220;
    --page-bg: #0B1220;
    --surface: #111827;
    --card-bg: #111827;
    --surface-2: #172033;
    --text: #F8FAFC;
    --text-primary: #F8FAFC;
    --text-2: #CBD5E1;
    --text-secondary: #CBD5E1;
    --muted: #94A3B8;
    --border: #263449;
    --border-light: #1E293B;
    --border-2: #475569;
    --input-bg: #111827;
    --input-border: #334155;/* dark input border per spec */
    --table-bg: #111827;
    --table-text: #F8FAFC;
    --table-muted: #CBD5E1;
    --table-border: #263449;
    --table-row-alt: #172033;
    --table-row-hover: #1E293B;
    --table-hover: rgba(37, 99, 235, 0.06);

    /* Sidebar — deepest navy */
    --sidebar-bg: #080F1D;
    --sidebar-surface: #101C33;
    --sidebar-hover: #172554;
    --sidebar-active-bg: #1E293B;
    --sidebar-active-text: #FFFFFF;
    --sidebar-border: #1E2B45;

    --sidebar-text: #CBD5E1;
    --sidebar-text-hover: #FFFFFF;
    --sidebar-text-muted: #94A3B8;

    --sidebar-icon: #94A3B8;
    --sidebar-icon-hover: #FFFFFF;
    --sidebar-accent: #2563EB;       /* active indicator */
    --sidebar-accent-rgb: 37, 99, 235;
    --sidebar-active-icon: #60A5FA;  /* active menu icon */

    --navy-900: #080F1D;
    --navy-800: #101C33;
    --navy-700: #172554;

    --logo-width: 130px;
    --logo-height: 48px;
    --logo-max-width: 130px;
    --logo-max-height: 48px;

    --bs-primary: #3B82F6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-success: #22C55E;
    --bs-success-rgb: 34, 197, 94;
    --bs-warning: #FBBF24;
    --bs-warning-rgb: 251, 191, 36;
    --bs-danger: #F87171;
    --bs-danger-rgb: 248, 113, 113;
    --bs-info: #38BDF8;
    --bs-info-rgb: 56, 189, 248;
    --bs-secondary: #94A3B8;
    --bs-secondary-rgb: 148, 163, 184;
    --bs-body-bg: #0B1220;
    --bs-body-color: #F8FAFC;
    --bs-emphasis-color: #F8FAFC;
    --bs-border-color: #263449;
    --bs-link-color: #60A5FA;
    --bs-link-hover-color: #93C5FD;
    --bs-link-color-rgb: 96, 165, 250;
    --bs-link-hover-color-rgb: 147, 197, 253;

    --primary-rgb-picr: 59, 130, 246;

    color-scheme: dark;
}

/* Legacy vars used by template color selectors */
[data-color="primary"] {
    --primary-rgb-picr: var(--primary-rgb);
}

/* ============================================================
   3. FONT + BASE (one global font family, dark readable text)
   ============================================================ */
html {
    font-size: 100%;
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
}
h1, .h1 { font-size: 1.75rem; }   /* 28px — page titles */
h2, .h2 { font-size: 1.375rem; }  /* 22px — section titles */
h3, .h3 { font-size: 1.1875rem; } /* 19px */
h4, .h4 { font-size: 1.0625rem; } /* 17px — card titles */
h5, .h5 { font-size: 0.9375rem; } /* 15px */
h6, .h6 { font-size: 0.875rem; }  /* 14px */

p, li, td, th, span, div, label, .form-label, small, a, button, input, select, textarea {
    letter-spacing: 0;
}

/* Selection matches the blue brand (replaces legacy orange) */
::selection {
    background: #2563EB;
    color: #FFFFFF;
    text-shadow: none;
}
[data-theme="dark"] ::selection {
    background: #3B82F6;
    color: #FFFFFF;
}

/* ------------------------------------------------------------------
   Links — always primary blue, never orange/yellow
   ------------------------------------------------------------------ */
a {
    color: var(--primary);
    text-decoration: none;
}
a:hover,
a:focus {
    color: var(--primary-hover);
}
a.text-muted,
a.text-secondary {
    color: var(--muted) !important;
}
a.text-muted:hover,
a.text-secondary:hover {
    color: var(--primary) !important;
}

/* ============================================================
   4. PAGE HEADERS + BREADCRUMBS
   ============================================================ */
.page-header {
    background: transparent;
    border: 0;
    padding: 4px 0 18px;
}
.page-header .page-title {
    color: var(--text);
    font-size: 1.5rem;        /* 24px */
    font-weight: 700;
    letter-spacing: -0.01em;
}
.page-header h3.page-title,
.page-header h4.page-title {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
}
.page-header .page-title i {
    color: var(--primary);
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    margin: 2px 0 0;
}
.breadcrumb .breadcrumb-item {
    color: var(--muted);
    font-size: 0.8125rem;     /* 13px */
}
.breadcrumb .breadcrumb-item a {
    color: var(--muted);
}
.breadcrumb .breadcrumb-item a:hover {
    color: var(--primary);
}
.breadcrumb .breadcrumb-item.active,
.breadcrumb-item.active {
    color: var(--primary) !important;
    font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #CBD5E1;
}

/* Headings of module toolbar sections */
.content > .page-header {
    background: transparent !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
}

/* ============================================================
   5. SIDEBAR — dark navy, blue active, consistent menu items
   ============================================================ */
.sidebar,
.settings-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 991.98px) {
    .sidebar,
    .settings-sidebar {
        background: var(--sidebar-bg) !important;
    }
}

/* Logo area separated from navigation */
.sidebar-logo,
.settings-sidebar .sidebar-logo {
    border-bottom: 1px solid var(--sidebar-border) !important;
    background: transparent !important;
}
/* Sidebar logo: centred horizontally + vertically, never stretched/cropped */
.sidebar .sidebar-logo,
.settings-sidebar .sidebar-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
}
/* Sidebar collapse toggle — replace legacy orange circle with blue */
.sidebar .sidebar-logo #toggle_btn {
    background: #2563EB !important;
    border: 2px solid var(--sidebar-bg) !important;
    color: #FFFFFF !important;
    border-radius: 50%;
}
.sidebar .sidebar-logo #toggle_btn:hover {
    background: #1D4ED8 !important;
    color: #FFFFFF !important;
}
.sidebar .sidebar-logo #toggle_btn svg {
    color: #FFFFFF !important;
}

/* ----- menu container spacing ----- */
.sidebar .sidebar-menu {
    padding: 14px 8px 24px;
}
.sidebar .sidebar-menu > ul > li {
    margin-bottom: 2px;
}

/* ----- top-level links ----- */
.sidebar .sidebar-menu li > a,
.settings-sidebar .sidebar-menu li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    height: 44px !important;
    margin: 2px 8px 4px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    color: var(--sidebar-text) !important;
    background: transparent !important;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease !important;
}

/* ----- icons 18-20px, fixed width, vertically aligned ----- */
.sidebar .sidebar-menu li > a > i,
.settings-sidebar .sidebar-menu li > a > i {
    width: 20px !important;
    flex: none !important;
    text-align: center;
    font-size: 18px !important;
    line-height: 1;
    color: var(--sidebar-icon) !important;
    transition: color 150ms ease !important;
}

/* Icons always spaced by flex gap only (kill legacy utility margins) */
.sidebar .sidebar-menu li > a > i,
.settings-sidebar .sidebar-menu li > a > i {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ----- labels follow the link colour ----- */
.sidebar .sidebar-menu li > a > span,
.settings-sidebar .sidebar-menu li > a > span {
    color: inherit !important;
}
.sidebar .sidebar-menu li > a > span.badge,
.settings-sidebar .sidebar-menu li > a > span.badge {
    color: #FFFFFF !important;
}

/* ----- hover ----- */
.sidebar .sidebar-menu li > a:hover,
.settings-sidebar .sidebar-menu li > a:hover {
    background: var(--sidebar-hover) !important;
    color: var(--sidebar-text-hover) !important;
}
.sidebar .sidebar-menu li > a:hover > i,
.settings-sidebar .sidebar-menu li > a:hover > i {
    color: var(--sidebar-icon-hover) !important;
}
.sidebar .sidebar-menu li > a:hover > span:not(.badge),
.settings-sidebar .sidebar-menu li > a:hover > span:not(.badge) {
    color: #FFFFFF !important;
}

/* ----- ACTIVE state: lighter navy block, white text, blue icon + indicator ----- */
.sidebar .sidebar-menu li > a.active,
.sidebar .sidebar-menu li.active > a,
.settings-sidebar .sidebar-menu li > a.active,
.sidebar .sidebar-menu li.submenu li > a.active,
.settings-sidebar .sidebar-menu li.submenu li > a.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 600 !important;
}
.sidebar .sidebar-menu li > a.active > i,
.sidebar .sidebar-menu li.active > a > i,
.settings-sidebar .sidebar-menu li > a.active > i,
.sidebar .sidebar-menu li.submenu li > a.active > i,
.settings-sidebar .sidebar-menu li.submenu li > a.active > i {
    color: var(--sidebar-active-icon) !important;
}
.sidebar .sidebar-menu li > a.active > span:not(.badge),
.sidebar .sidebar-menu li.active > a > span:not(.badge),
.settings-sidebar .sidebar-menu li > a.active > span:not(.badge) {
    color: #FFFFFF !important;
}
.sidebar .sidebar-menu li > a.active::before,
.sidebar .sidebar-menu li.active > a::before,
.settings-sidebar .sidebar-menu li > a.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--sidebar-accent) !important;   /* blue indicator */
    border-radius: 0 4px 4px 0;
}

/* ----- children of expandable groups ----- */
.sidebar .sidebar-menu li.submenu li > a,
.settings-sidebar .sidebar-menu li.submenu li > a {
    font-size: 13px !important;
    height: 38px !important;
    margin: 1px 8px 1px 4px !important;
    padding-left: 38px !important;
    font-weight: 500 !important;
    color: var(--sidebar-text-muted) !important;
    gap: 10px !important;
}
.sidebar .sidebar-menu li.submenu li > a > i,
.settings-sidebar .sidebar-menu li.submenu li > a > i {
    font-size: 15px !important;
    width: 16px !important;
    color: var(--sidebar-icon) !important;
}
.sidebar .sidebar-menu li.submenu li > a:hover,
.settings-sidebar .sidebar-menu li.submenu li > a:hover {
    background: var(--sidebar-hover) !important;
    color: #FFFFFF !important;
}
.sidebar .sidebar-menu li.submenu li > a:hover > i,
.settings-sidebar .sidebar-menu li.submenu li > a:hover > i {
    color: #FFFFFF !important;
}
/* No heavy indicator inside children rows */
.sidebar .sidebar-menu li.submenu li > a.active::before,
.settings-sidebar .sidebar-menu li.submenu li > a.active::before {
    display: none;
}

/* ----- section labels ("MAIN") ----- */
.sidebar .sidebar-menu .submenu-hdr,
.settings-sidebar .sidebar-menu .submenu-hdr {
    color: var(--sidebar-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    margin: 18px 10px 8px !important;
    padding: 0 6px;
}

/* ----- chevrons (clean, no circles, blue when open/active) ----- */
.sidebar .sidebar-menu li > a .menu-arrow,
.sidebar .sidebar-menu li > a .menu-arrow::before,
.settings-sidebar .sidebar-menu li > a .menu-arrow,
.settings-sidebar .sidebar-menu li > a .menu-arrow::before {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
.sidebar .sidebar-menu li > a .menu-arrow::before,
.settings-sidebar .sidebar-menu li > a .menu-arrow::before {
    border-right-color: var(--sidebar-text-muted) !important;
    border-bottom-color: var(--sidebar-text-muted) !important;
}
.sidebar .sidebar-menu li > a:hover .menu-arrow::before,
.settings-sidebar .sidebar-menu li > a:hover .menu-arrow::before {
    border-right-color: #CBD5E1 !important;
    border-bottom-color: #CBD5E1 !important;
}
.sidebar .sidebar-menu li > a.active .menu-arrow::before,
.sidebar .sidebar-menu li.submenu-open > a .menu-arrow::before,
.settings-sidebar .sidebar-menu li > a.active .menu-arrow::before {
    border-right-color: var(--sidebar-accent) !important;
    border-bottom-color: var(--sidebar-accent) !important;
}

/* ----- sidebar tabs (Menu / Chats / Inbox) ----- */
.sidebar .sidebar-nav .nav-tabs .nav-link,
.settings-sidebar .sidebar-nav .nav-tabs .nav-link {
    color: var(--sidebar-text-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 0 !important;
    background: transparent !important;
}
.sidebar .sidebar-nav .nav-tabs .nav-link.active,
.settings-sidebar .sidebar-nav .nav-tabs .nav-link.active {
    color: #FFFFFF !important;
    background: var(--sidebar-active-bg) !important;
}

/* ----- sidebar user chip: no bright orange/borders ----- */
.sidebar .user-profile,
.sidebar .sidebar-profile {
    background: var(--sidebar-hover) !important;
    border: 0 !important;
}
.sidebar .user-profile h6,
.sidebar .sidebar-profile h6 {
    color: #FFFFFF !important;
}
.sidebar .user-profile p,
.sidebar .sidebar-profile p {
    color: var(--sidebar-text-muted) !important;
}

/* ----- scrollbar subtle ----- */
.sidebar,
.settings-sidebar,
.sidebar .slimScrollDiv,
.sidebar .sidebar-inner {
    scrollbar-width: thin;
    scrollbar-color: #263449 transparent;
}
.sidebar ::-webkit-scrollbar,
.settings-sidebar ::-webkit-scrollbar {
    width: 5px;
}
.sidebar ::-webkit-scrollbar-thumb,
.settings-sidebar ::-webkit-scrollbar-thumb {
    background: #263449;
    border-radius: 6px;
}

/* ============================================================
   6. TOP HEADER — clean white bar, blue actions
   ============================================================ */
.header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
}
.header .main-header {
    background: transparent !important;
}
.header .header-left {
    background: transparent !important;
}

/* header action icon boxes (fullscreen, theme, notifications) */
.header .nav-item-box > a {
    background: var(--surface) !important;
    color: #475569 !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.header .nav-item-box > a:hover {
    background: var(--surface-2) !important;
    color: #111827 !important;
    border-color: var(--border-2) !important;
}

/* "Add New" / primary header buttons — blue */
.header .link-nav .btn-primary,
.header .user-menu .btn-primary,
.header .btn-added {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
}
.header .link-nav .btn-primary:hover,
.header .user-menu .btn-primary:hover,
.header .btn-added:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* POS button — deep navy/blue */
.header .pos-nav .btn-dark {
    background-color: #0F172A !important;
    border-color: #0F172A !important;
    color: #FFFFFF !important;
}
.header .pos-nav .btn-dark:hover {
    background-color: #172554 !important;
    border-color: #172554 !important;
}

/* Top search box — keep white with visible edge */
.top-nav-search form,
.top-nav-search input {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.top-nav-search input::placeholder {
    color: var(--muted);
}

/* Dropdown carets in the header */
.header .nav.user-menu > li > a {
    color: #263449 !important;
}
.header .nav.user-menu > li > a:hover {
    color: var(--primary) !important;
}

/* Notification / recent message links in the header dropdowns */
.header .notification-list a,
.header .notification-item a,
.header .recent-msg {
    color: #263449 !important;
}
.header .notification-list a:hover,
.header .notification-item a:hover,
.header .recent-msg:hover {
    color: var(--primary) !important;
}

/* "Add New" dropdown quick links — blue accents */
.link-item {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    border-radius: 10px !important;
}
.link-item .link-icon {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    border-radius: 10px !important;
}
.link-item p {
    color: #263449 !important;
}
.link-item:hover {
    background: var(--primary-light) !important;
    border-color: #CFE0FF !important;
}
.link-item:hover .link-icon {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .link-item {
    background: #172033 !important;
    border-color: #263449 !important;
}
[data-theme="dark"] .link-item p {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .link-item:hover {
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: #3B82F6 !important;
}

/* ============================================================
   7. LOGO — controlled centrally via CSS, source stays in markup
   (sizing only; never hard-code width/height into markup)
   ============================================================ */
.logo img,
.logo-small img {
    display: inline-block;
    height: auto;
    max-height: var(--logo-max-height);
    max-width: var(--logo-max-width);
    width: auto;
    object-fit: contain;
}

/* Force auto sizing inside sidebar + header (never stretch brand logos) */
.sidebar .sidebar-logo .logo img,
.sidebar .sidebar-logo .logo-white img,
.header .header-left .logo img,
.header .header-left .logo-white img {
    width: auto !important;
    max-width: var(--logo-max-width) !important;
    max-height: var(--logo-max-height) !important;
    object-fit: contain;
}
.sidebar .sidebar-logo .logo-small img,
.sidebar .sidebar-logo .logo-small-white img,
.header .header-left .logo-small img,
.header .header-left .logo-small-white img {
    width: auto !important;
    max-width: 40px !important;
    max-height: 34px !important;
    object-fit: contain;
}

/* Sidebar sits on the dark navy, so always show a readable logo */
.sidebar-logo .logo-normal,
.sidebar-logo .logo-small {
    display: none !important;
}
.sidebar-logo .logo-white {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.sidebar-logo .logo-small-white {
    display: none !important;
}
.sidebar-logo .logo-white img,
.sidebar-logo .logo-small-white img {
    max-height: var(--logo-max-height);
    max-width: var(--logo-max-width);
}
/* Header logo: style.css already swaps normal/white for light/dark.
   Sizing is handled by the shared .logo img rule above. */

/* ============================================================
   8. BUTTONS — consistent height, radius, weight, spacing
   ============================================================ */
.btn {
    border-radius: 8px;
    font-weight: 600;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    padding: 0.5rem 1rem;         /* ≈ 40px height */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.btn i,
.btn .ti,
.btn .fa {
    font-size: 1em;
    line-height: 1;
}
.btn-sm {
    min-height: 34px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 7px;
}
.btn-lg {
    min-height: 46px;
    padding: 0.6rem 1.2rem;
    border-radius: 9px;
}
.btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    min-height: 38px;
    justify-content: center;
}
.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.12);
}

/* ----- Primary (blue) ----- */
.btn-primary,
.btn-added,
.btn-save,
.page-header .btn-added,
.btn-new,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
}
.btn-primary:hover,
.btn-added:hover,
.btn-save:hover,
.page-header .btn-added:hover,
.btn-new:hover,
.btn-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.25);
}
.btn-primary:disabled,
.btn-added:disabled,
.btn-save:disabled {
    background-color: #94A3B8 !important;
    border-color: #94A3B8 !important;
    color: #F1F5F9 !important;
}

/* ----- Outline primary ----- */
.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
}

/* ----- Secondary (neutral) ----- */
.btn-secondary {
    background-color: #F8FAFC !important;
    border-color: #D9E1EC !important;
    color: #0F172A !important;
}
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):hover {
    background-color: #E7ECF3 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
}
.btn-outline-secondary:hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
    color: #1E293B !important;
}

/* ----- Dark (navy) ----- */
.btn-dark {
    background-color: #0F172A !important;
    border-color: #0F172A !important;
    color: #FFFFFF !important;
}
.btn-dark:hover,
.btn-dark:not(:disabled):not(.disabled):hover {
    background-color: #172554 !important;
    border-color: #172554 !important;
    color: #FFFFFF !important;
}
.btn-light {
    background-color: #F8FAFC !important;
    border-color: #D9E1EC !important;
    color: #475569 !important;
}
.btn-light:hover {
    background-color: #E7ECF3 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

/* ----- Semantic: success / danger / warning / info ----- */
.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: var(--success-hover);
    --bs-btn-hover-border-color: var(--success-hover);
    --bs-btn-active-bg: var(--success-hover);
    --bs-btn-color: #FFFFFF;
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #FFFFFF !important;
}
.btn-success:hover { background-color: var(--success-hover) !important; border-color: var(--success-hover) !important; color: #FFFFFF !important; }
.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-hover);
    --bs-btn-hover-border-color: var(--danger-hover);
    --bs-btn-active-bg: var(--danger-hover);
    --bs-btn-color: #FFFFFF;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #FFFFFF !important;
}
.btn-danger:hover { background-color: var(--danger-hover) !important; border-color: var(--danger-hover) !important; color: #FFFFFF !important; }
.btn-warning {
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-bg: var(--warning-hover);
    --bs-btn-hover-border-color: var(--warning-hover);
    --bs-btn-active-bg: var(--warning-hover);
    --bs-btn-color: #FFFFFF;
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #FFFFFF !important;
}
.btn-warning:hover { background-color: var(--warning-hover) !important; border-color: var(--warning-hover) !important; color: #FFFFFF !important; }
.btn-info {
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-bg: var(--info-hover);
    --bs-btn-hover-border-color: var(--info-hover);
    --bs-btn-active-bg: var(--info-hover);
    --bs-btn-color: #FFFFFF;
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: #FFFFFF !important;
}
.btn-info:hover { background-color: var(--info-hover) !important; border-color: var(--info-hover) !important; color: #FFFFFF !important; }

/* Kill legacy orange/yellow utility buttons */
.btn-warning,
.btn-close-white,
[class*="btn-"].text-orange,
.btn.bg-warning,
.btn-warning-light {
    /* semantic overrides only (warning stays amber) */
}
a.btn-warning { color: #FFFFFF !important; }

/* ============================================================
   9. FORMS — visible borders, blue focus, readable labels
   ============================================================ */
.form-control,
.form-select,
textarea.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="url"],
select.form-select,
select.form-control,
.form-control-plaintext {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text) !important;
    border-radius: 8px !important;
    min-height: 42px;
    padding: 9px 12px;
    font-size: 0.875rem;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.form-control::placeholder {
    color: var(--muted) !important;
    opacity: 1;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10) !important;
    outline: 0 !important;
}
.form-control:disabled,
.form-select:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    border-color: var(--border-2) !important;
    cursor: not-allowed;
}
.form-control[readonly] {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
}

/* Labels — dark, medium weight */
.form-label,
label,
.col-form-label,
.form-group label,
.modal .form-label {
    color: #263449 !important;
    font-size: 0.8125rem;
    font-weight: 600 !important;
    margin-bottom: 6px;
}
.form-check-label {
    color: var(--text-2) !important;
    font-weight: 500 !important;
}
.required,
.text-danger,
label .required {
    color: var(--danger) !important;
}
.required::after,
label.required::after {
    content: " *";
    color: var(--danger) !important;
}

/* Checkboxes / radio accent */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Input groups */
.input-group-text {
    background: var(--surface-2);
    border-color: var(--input-border);
    color: var(--text-2);
    border-radius: 8px;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ============================================================
   10. CARDS — white surfaces, transparent headers, hairline border
   ============================================================ */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    color: var(--text);
}
.card .card-body {
    color: #263449;
    font-size: 0.875rem;
}
.card .card-body h6,
.card .card-body h5,
.card .card-body h4 {
    color: var(--text);
}
.card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}
.card .card-header .card-title,
.card .card-header h4,
.card .card-header h5 {
    color: var(--text);
    font-size: 1rem;             /* 16px card titles */
    font-weight: 700;
    margin: 0;
}
.card .card-header p,
.card .card-header .fs-13,
.card .card-header small {
    color: var(--muted);
}
.card .card-footer {
    background: transparent;
    border-top: 1px solid var(--border);
    color: var(--text-2);
}
.card-title {
    color: var(--text) !important;
    font-weight: 700;
}
.card-subtitle,
.card-text small,
.card .text-secondary {
    color: var(--muted) !important;
}

/* section/card heading helpers used by modules */
.card-header .card-title i,
.card-header h5 i,
.title-icon {
    color: var(--primary);
}
.section-header h4,
.section-header h5,
.module-header h5 {
    color: var(--text);
    font-weight: 700;
}

/* ============================================================
   11. DASHBOARD STAT / KPI CARDS — one design system
   Colors carry meaning (semantic) — never random bright tints
   ============================================================ */
/* Filled KPI cards — semantic: sales primary blue, returns navy, purchase teal/success */
.sale-widget {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.sale-widget.bg-primary,
.sale-widget.bg-primary-300 {
    background-color: #2563EB !important;   /* Total Sales */
}
.sale-widget.bg-secondary {
    background-color: #1E293B !important;   /* Sales Return — navy */
}
.sale-widget.bg-teal,
.sale-widget.bg-indigo {
    background-color: #0D9488 !important;   /* Total Purchase — teal */
}
.sale-widget.bg-info {
    background-color: #2563EB !important;   /* Purchase Return — primary blue */
}
.sale-widget .sale-icon {
    border-radius: 12px;
}
.sale-widget .sale-icon.text-primary { color: #2563EB !important; }
.sale-widget .sale-icon.text-teal,
.sale-widget .sale-icon.text-indigo { color: #0D9488 !important; }
.sale-widget p,
.sale-widget h4 {
    color: #FFFFFF !important;
}

/* White revenue widgets with semantic icon chips */
.revenue-widget {
    border-radius: 12px !important;
}
.revenue-widget h4 {
    color: var(--text) !important;
    font-weight: 700;
}
.revenue-widget p {
    color: var(--muted) !important;
}
.revenue-widget .revenue-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
}

/* Semantic chips (profit green / due amber / expenses red / receipts blue) */
.revenue-icon.bg-success-transparent { background: var(--success-light); color: var(--success); }
.revenue-icon.bg-cyan-transparent { background: var(--info-light); color: #0284C7; }
.revenue-icon.bg-cyan { background: var(--info); color: #fff; }
.revenue-icon.bg-orange-transparent { background: var(--warning-light); color: #D97706; }
.revenue-icon.bg-indigo-transparent { background: var(--primary-light); color: var(--primary); }
.revenue-icon.bg-danger-transparent { background: var(--danger-light); color: var(--danger); }

/* Legacy utility aliases used by module pages — kept semantic */
.text-orange { color: #EA580C !important; }         /* warning orange only for semantic warnings */
.bg-orange { background-color: #F97316 !important; color: #FFF !important; }
.bg-orange-transparent { background: var(--warning-light) !important; color: #B45309 !important; }
.bg-soft-orange { background: var(--warning-light) !important; color: #B45309 !important; }
.text-cyan { color: #0891B2 !important; }
.bg-cyan-transparent { background: var(--info-light) !important; color: #0E7490 !important; }
.text-indigo { color: #4F46E5 !important; }
.bg-indigo-transparent { background: var(--primary-light) !important; color: var(--primary-dark) !important; }
.text-teal { color: #0D9488 !important; }
.bg-teal-transparent { background: rgba(13, 148, 136, 0.12) !important; color: #0F766E !important; }
.text-pink { color: #DB2777 !important; }
.bg-pink { background-color: #DB2777 !important; color: #fff !important; }
.bg-soft-pink { background: rgba(219, 39, 119, 0.12) !important; color: #BE185D !important; }
.text-purple { color: #7C3AED !important; }
.bg-soft-purple { background: rgba(124, 58, 237, 0.12) !important; color: #6D28D9 !important; }

/* Global text colour utilities honour the new palette */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: #F59E0B !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--muted) !important; }

/* Soft fills */
.bg-soft-primary { background-color: var(--primary-light) !important; color: var(--primary-dark) !important; }
.bg-soft-success { background-color: var(--success-light) !important; color: var(--success-dark) !important; }
.bg-soft-warning { background-color: var(--warning-light) !important; color: var(--warning-dark) !important; }
.bg-soft-danger { background-color: var(--danger-light) !important; color: var(--danger-dark) !important; }
.bg-soft-info { background-color: var(--info-light) !important; color: var(--info-dark) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }

/* Template default "bg-light" panels remain neutral */
.bg-light {
    background-color: var(--surface-2) !important;
}

/* Bootstrap "subtle" utility chips follow the centralized tokens */
.bg-primary-subtle { background-color: var(--primary-light) !important; }
.bg-success-subtle { background-color: var(--success-light) !important; }
.bg-danger-subtle { background-color: var(--danger-light) !important; }
.bg-warning-subtle { background-color: var(--warning-light) !important; }
.bg-info-subtle { background-color: var(--info-light) !important; }
.text-primary-emphasis { color: var(--primary-dark) !important; }
.text-success-emphasis { color: var(--success-dark) !important; }
.text-danger-emphasis { color: var(--danger-dark) !important; }
.text-warning-emphasis { color: var(--warning-dark) !important; }
.text-info-emphasis { color: var(--info-dark) !important; }
.border-primary-subtle { border-color: #BFDBFE !important; }
.border-success-subtle { border-color: #A7F3D0 !important; }
.border-danger-subtle { border-color: #FECACA !important; }
.border-warning-subtle { border-color: #FCD34D !important; }
.border-info-subtle { border-color: #BFDBFE !important; }

/* ============================================================
   12. TABLES — transparent headers, clear dark text, hairline rows
   ============================================================ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: rgba(100, 116, 139, 0.04);
    --bs-table-hover-bg: #F8FAFC;
    color: var(--text);
    font-size: 0.8125rem;         /* 13px */
    background: transparent;
}
.table thead th {
    background: transparent !important;
    color: var(--text) !important;
    font-size: 0.75rem;           /* 12px */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border) !important;
    border-top: 0 !important;
    padding: 12px 14px;
    white-space: nowrap;
}
.table tbody td {
    color: var(--text);
    border-bottom: 1px solid var(--border-light) !important;
    border-top: 0 !important;
    padding: 11px 14px;
    vertical-align: middle;
}
.table tbody tr:last-child td {
    border-bottom: 0 !important;
}
.table tbody tr:hover {
    background: var(--table-hover) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(148, 163, 184, 0.06);
}
.table-striped > tbody > tr:nth-of-type(odd):hover {
    background: var(--table-hover);
}
.table .text-muted,
.table .text-secondary {
    color: var(--muted) !important;
}

/* Actions inside table rows — semantic colour-coded icon chips */
.table .action-btn,
.table .btn-action {
    border-radius: 8px !important;
    min-width: 30px;
}
.table .btn-edit,
.table a[title*="Edit"],
.table .action-edit {
    background: var(--success-light) !important;
    border: 1px solid #A7F3D0 !important;
    color: #059669 !important;
}
.table .btn-delete,
.table a[title*="Delete"],
.table .action-delete {
    background: var(--danger-light) !important;
    border: 1px solid #FECACA !important;
    color: var(--danger) !important;
}
.table .btn-view,
.table a[title*="View"],
.table .action-view {
    background: var(--primary-light) !important;
    border: 1px solid #BFDBFE !important;
    color: var(--primary) !important;
}
.table .dropdown-toggle,
.table .btn-more {
    background: transparent !important;
    color: #64748B !important;
}

/* Avatar / product thumbnails */
.table .product-img,
.table .avatar,
.table img.avatar,
.table .rounded {
    border-radius: 8px !important;
}

/* ============================================================
   13. DATA TABLES + PAGINATION
   ============================================================ */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.table-search input,
.dt-search input,
#DataTables_Table_0_filter input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    min-height: 38px;
    padding: 6px 12px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10) !important;
}
.dataTables_wrapper .dataTables_length select {
    margin: 0 6px;
}
.dataTables_wrapper .dataTables_info {
    color: var(--muted);
    font-size: 0.8125rem;
}
.dataTables_wrapper .dataTables_filter label {
    color: var(--muted);
}

/* Pagination */
.page-item .page-link {
    color: var(--primary) !important;
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: 8px !important;
    margin: 0 3px;
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.page-item .page-link:hover {
    background-color: var(--primary-light) !important;
    border-color: var(--border-2) !important;
    color: var(--primary-dark) !important;
}
.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
}
.page-item.disabled .page-link {
    color: #94A3B8 !important;
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

/* DataTables buttons (export etc.) */
.dt-buttons .btn,
.dataTables_wrapper .dt-buttons .btn,
.dt-button,
div.dt-buttons .btn-secondary {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    color: #263449 !important;
    border-radius: 8px !important;
}
.dt-buttons .btn:hover,
.dt-button:hover,
div.dt-buttons .btn:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.dataTables_wrapper table.dataTable {
    border: 0 !important;
}
.dataTables_wrapper .dataTables_scrollHead table.dataTable thead th {
    background: #FFFFFF !important;
}

/* ============================================================
   14. BADGES + STATUS PILLS (semantic)
   ============================================================ */
.badge {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.2;
}
.badge.bg-primary,
.badge.text-bg-primary { background-color: var(--primary) !important; color: #FFFFFF !important; }
.badge.bg-success,
.badge.text-bg-success { background-color: var(--success) !important; color: #FFFFFF !important; }
.badge.bg-danger,
.badge.text-bg-danger { background-color: var(--danger) !important; color: #FFFFFF !important; }
.badge.bg-warning,
.badge.text-bg-warning { background-color: var(--warning) !important; color: #FFFFFF !important; }
.badge.bg-info,
.badge.text-bg-info { background-color: var(--info) !important; color: #FFFFFF !important; }
.badge.bg-secondary { background-color: var(--secondary) !important; color: #FFFFFF !important; }

/* Soft status pills */
.badge.bg-soft-success,
.bg-soft-success { background-color: var(--success-light) !important; color: var(--success-dark) !important; }
.badge.bg-soft-warning,
.bg-soft-warning { background-color: var(--warning-light) !important; color: var(--warning-dark) !important; }
.badge.bg-soft-danger,
.bg-soft-danger { background-color: var(--danger-light) !important; color: var(--danger-dark) !important; }
.badge.bg-soft-info,
.bg-soft-info { background-color: var(--info-light) !important; color: var(--info-dark) !important; }
.badge.bg-soft-primary,
.bg-soft-primary { background-color: var(--primary-light) !important; color: var(--primary-dark) !important; }
.badge.bg-light { background-color: var(--surface-2) !important; color: var(--text-2) !important; }

/* ============================================================
   15. ALERTS — semantic tints with strong text
   ============================================================ */
.alert {
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.875rem;
}
.alert-success {
    background-color: var(--success-light) !important;
    border-color: #A7F3D0 !important;
    color: #047857 !important;
}
.alert-warning {
    background-color: var(--warning-light) !important;
    border-color: #FCD34D !important;
    color: #92400E !important;
}
.alert-danger {
    background-color: var(--danger-light) !important;
    border-color: #FECACA !important;
    color: #B91C1C !important;
}
.alert-info {
    background-color: var(--info-light) !important;
    border-color: #BFDBFE !important;
    color: #1E40AF !important;
}
.alert-primary {
    background-color: var(--primary-light) !important;
    border-color: #CFE0FF !important;
    color: var(--primary-dark) !important;
}
.alert .btn-close {
    filter: none;
    opacity: 0.6;
}

/* ============================================================
   16. MODALS — white content, transparent header, light footer
   ============================================================ */
.modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    color: var(--text);
}
.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    padding: 16px 20px;
}
.modal-header .modal-title,
.modal-title {
    color: #111827;
    font-size: 1.0625rem;
    font-weight: 700;
}
.modal-header .modal-title i,
.modal-title i {
    color: var(--primary);
}
.modal-header .btn-close {
    color: #64748B;
    opacity: 0.8;
}
.modal-body {
    color: #263449;
    padding: 20px;
    font-size: 0.875rem;
}
.modal-footer {
    background: var(--bg) !important;
    border-top: 1px solid var(--border);
    border-radius: 0 0 14px 14px;
    padding: 14px 20px;
}

/* ============================================================
   17. DROPDOWNS + POPOVERS
   ============================================================ */
.dropdown-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    color: var(--text);
}
.dropdown-menu .dropdown-header {
    color: var(--muted);
}
.dropdown-item {
    color: #263449 !important;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 7px;
}
.dropdown-item i {
    color: var(--primary);
    width: 18px;
    text-align: center;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}
.dropdown-menu .dropdown-divider {
    border-color: var(--border);
}
.dropdown-toggle::after {
    color: inherit;
}
.popover {
    background-color: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text);
}
.popover .popover-header {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text);
}
.popover .popover-body {
    color: var(--text-2);
}

/* ============================================================
   18. TABS / NAV-TABS
   ============================================================ */
.nav-tabs {
    border-bottom-color: var(--border);
}
.nav-tabs .nav-link {
    color: var(--muted) !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 16px;
}
.nav-tabs .nav-link:hover {
    color: var(--primary) !important;
}
.nav-tabs .nav-link.active {
    color: var(--primary) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--primary) !important;
}
.nav-pills .nav-link {
    color: var(--text-2) !important;
}
.nav-pills .nav-link.active {
    background-color: var(--primary) !important;
    color: #FFFFFF !important;
}

/* ============================================================
   19. SELECT2 + SWEETALERT + PLUGIN CONTROLS
   ============================================================ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
    min-height: 42px;
    color: var(--text);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text);
    line-height: 40px;
    padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--primary-light) !important;
    border-color: #CFE0FF !important;
    color: var(--primary-dark) !important;
    border-radius: 6px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10);
}
.select2-dropdown {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.select2-container--default .select2-results__option {
    color: var(--text-2);
    padding: 8px 12px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

/* SweetAlert2 — align with the design system */
.swal2-popup {
    border-radius: 16px !important;
    border: 1px solid var(--border);
}
.swal2-title {
    color: var(--text) !important;
}
.swal2-html-container {
    color: var(--text-2) !important;
}
.swal2-confirm {
    border-radius: 8px !important;
}
.swal2-cancel {
    border-radius: 8px !important;
}

/* Daterangepicker */
.daterangepicker {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text);
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background: var(--primary-light) !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}
.daterangepicker .ranges li.active {
    background: var(--primary) !important;
    color: #fff !important;
}
.daterangepicker .calendar-table {
    background: transparent !important;
}

/* Toastr */
#toast-container > div {
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15) !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
#toast-container > .toast-success { background-color: var(--success); }
#toast-container > .toast-error { background-color: var(--danger); }
#toast-container > .toast-warning { background-color: var(--warning); }
#toast-container > .toast-info { background-color: var(--info); }

/* ============================================================
   20. LAYOUT + UTILITIES (no heavy coloured headers, white content)
   ============================================================ */
.main-wrapper,
.page-wrapper,
.content {
    background-color: var(--bg);
    color: var(--text);
}
.content {
    padding-bottom: 24px;
}
.page-wrapper {
    background: var(--bg);
}

/* Keep tables scrollable instead of breaking the layout */
.table-responsive,
.dataTables_wrapper,
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Generic strong text helpers (fix faint/light-grey content) */
.text-default { color: var(--text) !important; }
.fs-12, .fs-13, .fs-14, .fs-15, .fs-16 { line-height: 1.5; }
.muted, .text-muted { color: var(--muted) !important; }
small, .small { color: var(--muted); }

/* Card/section paragraph text */
.card p,
.card-body p,
.section-description,
.help-text {
    color: var(--text-2);
}

/* Horizontal rule */
hr,
.border-top,
.border-bottom {
    border-color: var(--border) !important;
}
.border { border-color: var(--border) !important; }
.border-2 { border-color: var(--border-2) !important; }

/* Legacy floating theme customizer — always hidden (theme lives in header only) */
.sidebar-themesettings,
#preview.sidebar-themesettings,
.theme-customizer,
#customizer,
.customizer-panel,
.offcanvas.sidebar-themesettings,
.settings-panel {
    display: none !important;
}

/* Mini/collapsed sidebar (desktop) — keep icons centered */
@media (min-width: 992px) {
    body.mini-sidebar .sidebar .sidebar-menu li > a {
        justify-content: center !important;
        padding: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 44px;
    }
    body.mini-sidebar .sidebar .sidebar-menu li > a > span,
    body.mini-sidebar .sidebar .sidebar-menu li > a .menu-arrow,
    body.mini-sidebar .sidebar .sidebar-menu .submenu-hdr {
        display: none !important;
    }
    body.mini-sidebar .sidebar .sidebar-menu li > a.active::before {
        left: -4px;
    }
    body.mini-sidebar .sidebar .sidebar-logo .logo-white {
        display: none !important;
    }
    body.mini-sidebar .sidebar .sidebar-logo .logo-small-white {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    body.mini-sidebar.expand-menu .sidebar .sidebar-logo .logo-white {
        display: inline-flex !important;
    }
    body.mini-sidebar.expand-menu .sidebar .sidebar-logo .logo-small-white {
        display: none !important;
    }
}

/* Mobile top header — compact actions always visible */
@media (max-width: 991.98px) {
    .header .main-header {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .header .header-left {
        position: relative !important;
        width: auto !important;
        flex: 0 0 auto;
        float: none;
        padding: 0 6px 0 52px;
        text-align: left;
        min-width: 0;
    }
    .header .header-left .logo,
    .header .header-left .logo-normal {
        display: none !important;
    }
    .header .header-left .logo-small-white,
    .header .header-left .logo-small {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .header .nav.user-menu {
        margin-right: 2px;
        flex-wrap: nowrap;
    }
    #qThemeToggle {
        width: 34px;
        height: 34px;
    }
    .header .q-menu-label {
        display: none;
    }
    .header .link-nav .btn,
    .header .pos-nav .btn {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
        font-size: 0;
        min-height: 38px;
    }
    .header .link-nav .btn i,
    .header .pos-nav .btn i {
        font-size: 18px;
        margin-right: 0 !important;
    }
}

/* ============================================================
   21. DARK MODE — full component coverage (never inverted)
   ============================================================ */
[data-theme="dark"] body,
[data-theme="dark"] .main-wrapper,
[data-theme="dark"] .page-wrapper,
[data-theme="dark"] .content {
    background: #0B1220 !important;
    color: #F8FAFC !important;
}
[data-theme="dark"] ::selection {
    background: #3B82F6;
    color: #FFFFFF;
}

/* Header */
[data-theme="dark"] .header {
    background: #111827 !important;
    border-bottom-color: #263449 !important;
}
[data-theme="dark"] .header .main-header,
[data-theme="dark"] .header .header-left {
    background: transparent !important;
}
[data-theme="dark"] .header .nav-item-box > a {
    background: #172033 !important;
    border-color: #263449 !important;
    color: #CBD5E1 !important;
}
[data-theme="dark"] .header .nav-item-box > a:hover {
    background: #1E293B !important;
    color: #FFFFFF !important;
    border-color: #475569 !important;
}
[data-theme="dark"] .top-nav-search form,
[data-theme="dark"] .top-nav-search input {
    background: #172033 !important;
    border-color: #263449 !important;
    color: #F8FAFC !important;
}
[data-theme="dark"] .header .nav.user-menu > li > a,
[data-theme="dark"] .header .notification-list a,
[data-theme="dark"] .header .notification-item a,
[data-theme="dark"] .header .recent-msg {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .header .pos-nav .btn-dark {
    background: #0B1220 !important;
    border-color: #0B1220 !important;
}

/* Sidebar stays deepest navy */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .settings-sidebar {
    background: #080F1D !important;
    border-right-color: #1E2B45 !important;
}
[data-theme="dark"] .sidebar .sidebar-menu li > a:hover,
[data-theme="dark"] .settings-sidebar .sidebar-menu li > a:hover {
    background: #172554 !important;
}

/* Headings + text */
[data-theme="dark"] h1, [data-theme="dark"] .h1,
[data-theme="dark"] h2, [data-theme="dark"] .h2,
[data-theme="dark"] h3, [data-theme="dark"] .h3,
[data-theme="dark"] h4, [data-theme="dark"] .h4,
[data-theme="dark"] h5, [data-theme="dark"] .h5,
[data-theme="dark"] h6, [data-theme="dark"] .h6 {
    color: #F8FAFC !important;
}
[data-theme="dark"] .page-header .page-title,
[data-theme="dark"] .page-header h3.page-title,
[data-theme="dark"] .page-header h4.page-title,
[data-theme="dark"] .page-header .page-title i {
    color: #F8FAFC !important;
}
[data-theme="dark"] .page-header .page-title i {
    color: #60A5FA !important;
}
[data-theme="dark"] .card {
    color: #CBD5E1;
}
[data-theme="dark"] .card p,
[data-theme="dark"] .card-body p,
[data-theme="dark"] .section-description {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .small,
[data-theme="dark"] .muted {
    color: #94A3B8 !important;
}

/* Cards */
[data-theme="dark"] .card {
    background: #111827 !important;
    border-color: #263449 !important;
    box-shadow: none;
    color: #F8FAFC !important;
}
[data-theme="dark"] .card .card-header {
    background: transparent !important;
    border-bottom-color: #263449 !important;
}
[data-theme="dark"] .card .card-header .card-title,
[data-theme="dark"] .card .card-header h4,
[data-theme="dark"] .card .card-header h5,
[data-theme="dark"] .card-title,
[data-theme="dark"] .section-header h4,
[data-theme="dark"] .module-header h5 {
    color: #F8FAFC !important;
}
[data-theme="dark"] .card .card-body,
[data-theme="dark"] .card-body {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .card .card-footer {
    background: transparent;
    border-top-color: #263449 !important;
    color: #CBD5E1;
}
[data-theme="dark"] .card .card-header p,
[data-theme="dark"] .card .card-header small {
    color: #94A3B8 !important;
}
[data-theme="dark"] .bg-light {
    background-color: #172033 !important;
}
[data-theme="dark"] .bg-white {
    background-color: #111827 !important;
    color: #F8FAFC;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] hr {
    border-color: #263449 !important;
}

/* Links */
[data-theme="dark"] a {
    color: #60A5FA !important;
}
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: #93C5FD !important;
}
[data-theme="dark"] .breadcrumb .breadcrumb-item,
[data-theme="dark"] .breadcrumb .breadcrumb-item a {
    color: #94A3B8 !important;
}
[data-theme="dark"] .breadcrumb .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item.active {
    color: #60A5FA !important;
}

/* Forms in dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] select,
[data-theme="dark"] select.form-select,
[data-theme="dark"] select.form-control {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #F8FAFC !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: #94A3B8 !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: #60A5FA !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled {
    background: #0B1220 !important;
    color: #94A3B8 !important;
    border-color: #1E293B !important;
}
[data-theme="dark"] .form-label,
[data-theme="dark"] label,
[data-theme="dark"] .col-form-label,
[data-theme="dark"] .form-group label {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .form-check-label {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .input-group-text {
    background: var(--surface-2);
    border-color: var(--input-border);
    color: #94A3B8;
}

/* Tables in dark mode */
[data-theme="dark"] .table {
    color: #CBD5E1;
}
[data-theme="dark"] .table thead th {
    background: #111827 !important;
    color: #E2E8F0 !important;
    border-bottom: 1px solid #263449 !important;
}
[data-theme="dark"] .table tbody td {
    color: #CBD5E1;
    border-bottom: 1px solid #263449 !important;
}
[data-theme="dark"] .table tbody tr:hover {
    background: var(--table-hover) !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(148, 163, 184, 0.06);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd):hover {
    background: var(--table-hover);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: #F8FAFC !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: #94A3B8;
}
[data-theme="dark"] .dataTables_wrapper table.dataTable,
[data-theme="dark"] .dataTables_scrollHead table.dataTable thead th {
    background: #111827 !important;
}
[data-theme="dark"] .table .btn-edit,
[data-theme="dark"] .table a[title*="Edit"],
[data-theme="dark"] .table .action-edit {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: #0F766E !important;
    color: #6EE7B7 !important;
}
[data-theme="dark"] .table .btn-view,
[data-theme="dark"] .table a[title*="View"],
[data-theme="dark"] .table .action-view {
    background: rgba(37, 99, 235, 0.16) !important;
    border-color: #1E3A5F !important;
    color: #93C5FD !important;
}
[data-theme="dark"] .table .btn-delete,
[data-theme="dark"] .table a[title*="Delete"],
[data-theme="dark"] .table .action-delete {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: #5B1F1F !important;
    color: #FCA5A5 !important;
}

/* Pagination */
[data-theme="dark"] .page-item .page-link {
    background: #172033 !important;
    border-color: #263449 !important;
    color: #93C5FD !important;
}
[data-theme="dark"] .page-item .page-link:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    border-color: #3B82F6 !important;
    color: #93C5FD !important;
}
[data-theme="dark"] .page-item.active .page-link {
    background: #3B82F6 !important;
    border-color: #3B82F6 !important;
    color: #FFFFFF !important;
}

/* Modals / dropdowns / popovers in dark */
[data-theme="dark"] .modal-content {
    background: #111827 !important;
    border-color: #263449 !important;
    color: #F8FAFC;
}
[data-theme="dark"] .modal-header {
    border-bottom-color: #263449 !important;
}
[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal-title i {
    color: #F8FAFC !important;
}
[data-theme="dark"] .modal-title i {
    color: #60A5FA !important;
}
[data-theme="dark"] .modal-body {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .modal-footer {
    background: #0B1220 !important;
    border-top-color: #263449 !important;
}
[data-theme="dark"] .dropdown-menu {
    background: #111827 !important;
    border-color: #263449 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .dropdown-item {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .dropdown-item.active {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #F8FAFC !important;
}
[data-theme="dark"] .dropdown-divider,
[data-theme="dark"] .modal .dropdown-divider {
    border-color: #263449 !important;
}
[data-theme="dark"] .popover {
    background: #111827 !important;
    border-color: #263449 !important;
    color: #CBD5E1;
}
[data-theme="dark"] .popover .popover-header {
    background: #172033 !important;
    color: #F8FAFC;
}

/* Remaining dark component refinements */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: #263449;
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: #94A3B8 !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: #93C5FD !important;
    border-bottom-color: #3B82F6 !important;
}
[data-theme="dark"] .badge.bg-soft-success,
[data-theme="dark"] .bg-soft-success { background: rgba(22, 163, 74, 0.2) !important; color: #86EFAC !important; }
[data-theme="dark"] .badge.bg-soft-warning,
[data-theme="dark"] .bg-soft-warning { background: rgba(245, 158, 11, 0.18) !important; color: #FCD34D !important; }
[data-theme="dark"] .badge.bg-soft-danger,
[data-theme="dark"] .bg-soft-danger { background: rgba(220, 38, 38, 0.2) !important; color: #FCA5A5 !important; }
[data-theme="dark"] .badge.bg-soft-info,
[data-theme="dark"] .bg-soft-info { background: rgba(2, 132, 199, 0.2) !important; color: #7DD3FC !important; }
[data-theme="dark"] .badge.bg-soft-primary,
[data-theme="dark"] .bg-soft-primary { background: rgba(29, 78, 216, 0.24) !important; color: #93C5FD !important; }

[data-theme="dark"] .alert-success {
    background: rgba(22, 163, 74, 0.14) !important;
    border-color: #1F5B3A !important;
    color: #86EFAC !important;
}
[data-theme="dark"] .alert-warning {
    background: #29200B !important;
    border-color: #785B10 !important;
    color: #FCD34D !important;
}
[data-theme="dark"] .alert-danger {
    background: rgba(220, 38, 38, 0.14) !important;
    border-color: #6B2A2A !important;
    color: #FCA5A5 !important;
}
[data-theme="dark"] .alert-info {
    background: rgba(2, 132, 199, 0.14) !important;
    border-color: #124A66 !important;
    color: #7DD3FC !important;
}
[data-theme="dark"] .alert-primary {
    background: rgba(29, 78, 216, 0.16) !important;
    border-color: #1E3A5F !important;
    color: #93C5FD !important;
}
[data-theme="dark"] .alert-light {
    background: #172033 !important;
    border-color: #263449 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .text-success { color: #4ADE80 !important; }
[data-theme="dark"] .text-danger { color: #F87171 !important; }
[data-theme="dark"] .text-warning { color: #FBBF24 !important; }
[data-theme="dark"] .text-info { color: #38BDF8 !important; }
[data-theme="dark"] .text-primary { color: #60A5FA !important; }
[data-theme="dark"] .text-secondary { color: #94A3B8 !important; }

[data-theme="dark"] .bg-success { background-color: #10B981 !important; }
[data-theme="dark"] .bg-danger { background-color: #EF4444 !important; }
[data-theme="dark"] .bg-warning { background-color: #D97706 !important; }
[data-theme="dark"] .bg-info { background-color: #3B82F6 !important; }
[data-theme="dark"] .bg-primary { background-color: #2563EB !important; }

/* Semantic utility chips kept readable in dark */
[data-theme="dark"] .text-orange { color: #FDBA74 !important; }
[data-theme="dark"] .text-cyan { color: #67E8F9 !important; }
[data-theme="dark"] .text-teal { color: #2DD4BF !important; }
[data-theme="dark"] .text-indigo { color: #A5B4FC !important; }
[data-theme="dark"] .bg-orange-transparent,
[data-theme="dark"] .bg-soft-orange { background: rgba(245, 158, 11, 0.16) !important; color: #FCD34D !important; }
[data-theme="dark"] .bg-cyan-transparent { background: rgba(6, 182, 212, 0.16) !important; color: #67E8F9 !important; }
[data-theme="dark"] .bg-teal-transparent { background: rgba(20, 184, 166, 0.16) !important; color: #2DD4BF !important; }
[data-theme="dark"] .bg-indigo-transparent { background: rgba(59, 130, 246, 0.16) !important; color: #93C5FD !important; }

/* Select2 + plugins in dark */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background: #172033 !important;
    border-color: #475569 !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #F8FAFC !important;
}
[data-theme="dark"] .select2-dropdown {
    background: #111827 !important;
    border-color: #263449 !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #F8FAFC !important;
}
[data-theme="dark"] .daterangepicker {
    background: #111827 !important;
    border-color: #263449 !important;
    color: #CBD5E1;
}
[data-theme="dark"] .daterangepicker .off,
[data-theme="dark"] .daterangepicker .off.available,
[data-theme="dark"] .daterangepicker td.available {
    color: #64748B;
}
[data-theme="dark"] .swal2-popup {
    background: #111827 !important;
    border-color: #263449;
}
[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container {
    color: #F8FAFC !important;
}

/* Dark export/table buttons */
[data-theme="dark"] .dt-buttons .btn,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn,
[data-theme="dark"] .dt-button {
    background: #172033 !important;
    border-color: #263449 !important;
    color: #CBD5E1 !important;
}
[data-theme="dark"] .dt-buttons .btn:hover,
[data-theme="dark"] .dt-button:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93C5FD !important;
    border-color: #3B82F6 !important;
}

/* ------------------------------------------------------------------
   PRINT — light surfaces so receipts/invoices keep clean look
   ------------------------------------------------------------------ */
@media print {
    body,
    .main-wrapper,
    .page-wrapper,
    .content,
    .card {
        background: #FFFFFF !important;
        color: #111827 !important;
    }
    .sidebar,
    .header,
    .copyright-footer {
        display: none !important;
    }
}

/* ============================================================
   FINAL THEME GUARANTEES — override page/legacy leftovers.
   These rules use ONLY the centralized tokens. They are loaded
   last on purpose so tables/forms/cards can never be forced
   into white text, purple headers, orange rows or invisible
   borders by any page-specific style.
   ============================================================ */

/* -------------------------- TABLES -------------------------- */
.table,
table,
.table.dataTable,
table.dataTable,
.table.dataTable.no-footer {
    color: var(--table-text) !important;
    background: var(--table-bg) !important;
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--table-text);
    --bs-table-border-color: var(--table-border);
    border-color: var(--table-border) !important;
}
.table thead th,
table thead th,
.dataTables_scrollHead table thead th {
    background: transparent !important;
    color: var(--table-text) !important;
    border-bottom: 1px solid var(--table-border) !important;
    border-top: 0 !important;
}
.table tbody td,
table tbody td,
.dataTables_scrollBody table tbody td {
    color: var(--table-text) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--table-border) !important;
    border-top: 0 !important;
}
.table tfoot th,
table tfoot th {
    color: var(--table-text) !important;
    background: transparent !important;
    border-top: 1px solid var(--table-border) !important;
}
/* Zebra */
.table-striped > tbody > tr:nth-of-type(odd),
.table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: var(--table-row-alt) !important;
    color: var(--table-text) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) td,
table tbody tr:nth-child(even) td {
    color: var(--table-text) !important;
}
/* Hover */
.table-hover tbody tr:hover,
.table tbody tr:hover,
table tbody tr:hover,
.table.dataTable tbody tr:hover {
    background: var(--table-row-hover) !important;
    color: var(--table-text) !important;
}
.table tbody tr:hover td,
table tbody tr:hover td {
    color: var(--table-text) !important;
}
/* Muted cells inside tables always stay readable */
.table .text-muted,
table .text-muted {
    color: var(--table-muted) !important;
}
/* DataTables empty/selected states must not become invisible */
.table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected {
    background: var(--table-row-hover) !important;
    color: var(--table-text) !important;
}

/* -------------------------- FORMS --------------------------- */
.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
}
.form-control::placeholder,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])::placeholder,
textarea::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
}
.form-control:focus,
.form-select:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
    outline: 0 !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: #60A5FA !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
}


/* ------------------------- SURFACES ------------------------- */
body {
    background: var(--bg) !important;
    color: var(--text-primary) !important;
}
.card,
.content-card,
.panel {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .panel {
    border-color: var(--border) !important;
}
/* Card text should always be readable — never white-on-white */
.card .card-body,
.content-card .card-body,
.panel .card-body {
    color: var(--text-secondary) !important;
}
.card-title,
.card .card-title {
    color: var(--text-primary) !important;
}

/* ------------------------ SIDEBAR LOGO ----------------------- */
.sidebar .sidebar-logo {
    height: 74px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
}
.sidebar .sidebar-logo .logo-white img,
.sidebar .sidebar-logo a.logo > img {
    width: auto !important;
    height: 52px !important;
    max-height: 52px !important;
    max-width: 130px !important;
    object-fit: contain !important;
}
/* Small/collapsed logo keeps its own compact sizing (see logo rules above) */
body.mini-sidebar .sidebar .sidebar-logo {
    height: 74px !important;
}

/* ------------------------ TOP HEADER ------------------------- */
.header .nav.user-menu {
    align-items: center !important;
    gap: 8px !important;
}
.header .nav.user-menu > li {
    display: inline-flex !important;
    align-items: center !important;
}
.header .nav.user-menu .btn,
.header .nav.user-menu .nav-item-box > a,
.header .link-nav > a.btn,
.header .pos-nav > a.btn {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
}
.header .link-nav .btn-primary,
.header .user-menu .btn-primary,
.header .btn-added {
    background: #2563EB !important;
    border: 1px solid #2563EB !important;
    color: #FFFFFF !important;
}
.header .link-nav .btn-primary:hover,
.header .user-menu .btn-primary:hover,
.header .btn-added:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}
.header .pos-nav .btn-dark {
    background: #0F172A !important;
    border: 1px solid #0F172A !important;
    color: #FFFFFF !important;
}
.header .pos-nav .btn-dark:hover {
    background: #172554 !important;
    border-color: #172554 !important;
}
.header .nav-item-box > a {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: #475569 !important;
    background: var(--card-bg) !important;
}
.header .nav-item-box > a:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.header .nav-item-box > a i,
.header .link-nav .btn i,
.header .pos-nav .btn i {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Always readable page text — utilities keep their intent */
.content .text-white,
.page-wrapper .text-white {
    color: #FFFFFF !important;
}
.content a.text-primary {
    color: var(--primary) !important;
}