/* ============================================================
   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;
    }
    /* Small/white header logo variants are resolved by the global logo
       visibility contract at the end of this file (exactly ONE visible). */
    .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;
}

/* ============================================================
   16. BLUE / NAVY FILLED BUTTONS, LINKS & CHIPS — white text
   -----------------------------------------------------------------
   Guardrail: any interactive element carrying a SOLID blue / navy
   brand fill (Bootstrap bg-* utilities or brand button classes)
   always shows a white foreground so labels + icons stay readable
   on light/dark themes and on small/mobile screens.
   Soft / subtle / outline fills are intentionally NOT touched.
   ============================================================ */
.btn.bg-primary,
.btn.bg-info,
.btn.bg-cyan,
.btn.bg-dark,
.btn.bg-navy,
.btn.bg-blue,
.btn.bg-primary-300,
.btn.bg-info-600,
button.bg-primary,
button.bg-info,
button.bg-cyan,
button.bg-dark,
button.bg-navy,
button.bg-blue,
button.bg-primary-300,
button.bg-info-600,
a.bg-primary,
a.bg-info,
a.bg-cyan,
a.bg-dark,
a.bg-navy,
a.bg-blue,
a.bg-primary-300,
a.bg-info-600,
.btn-primary-300,
a.btn-primary-300,
button.btn-primary-300 {
    color: #FFFFFF !important;
}
.btn.bg-primary:hover,
.btn.bg-info:hover,
.btn.bg-cyan:hover,
.btn.bg-dark:hover,
.btn.bg-navy:hover,
.btn.bg-blue:hover,
.btn.bg-primary-300:hover,
.btn.bg-info-600:hover,
button.bg-primary:hover,
button.bg-info:hover,
button.bg-cyan:hover,
button.bg-dark:hover,
button.bg-navy:hover,
button.bg-blue:hover,
button.bg-primary-300:hover,
button.bg-info-600:hover,
a.bg-primary:hover,
a.bg-info:hover,
a.bg-cyan:hover,
a.bg-dark:hover,
a.bg-navy:hover,
a.bg-blue:hover,
a.bg-primary-300:hover,
a.bg-info-600:hover,
.btn-primary-300:hover,
a.btn-primary-300:hover,
button.btn-primary-300:hover,
.btn.bg-primary:focus,
.btn.bg-primary:active,
button.bg-primary:focus,
button.bg-primary:active,
a.bg-primary:focus,
a.bg-primary:active,
a.btn-primary-300:focus,
a.btn-primary-300:active,
button.btn-primary-300:focus,
button.btn-primary-300:active {
    color: #FFFFFF !important;
}

/* ============================================================
   17. MODAL HEADERS — restore blue/navy fills + white text
   -----------------------------------------------------------------
   The default .modal-header is intentionally transparent (white
   card), but any modal header that EXPLICITLY carries a solid
   blue / navy fill (bg-primary / bg-info / bg-cyan / bg-dark …)
   must keep that fill and show readable WHITE title text + icons
   (light & dark themes). Light/soft fills stay untouched.
   ============================================================ */
/* --- Restore the fills the transparent default used to hide --- */
.modal-header.bg-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.modal-header.bg-info    { background-color: var(--info) !important;    border-color: var(--info) !important; }
.modal-header.bg-cyan    { background-color: var(--info) !important;    border-color: var(--info) !important; }
.modal-header.bg-blue    { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.modal-header.bg-dark,
.modal-header.bg-navy    { background-color: #0F172A !important;        border-color: #0F172A !important; }
.modal-header.bg-primary-300 { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.modal-header.bg-info-600    { background-color: var(--info) !important;    border-color: var(--info) !important; }

/* --- White foreground for the filled (blue/navy) modal headers --- */
.modal-header.bg-primary,
.modal-header.bg-info,
.modal-header.bg-cyan,
.modal-header.bg-blue,
.modal-header.bg-dark,
.modal-header.bg-navy,
.modal-header.bg-primary-300,
.modal-header.bg-info-600,
.modal-header.text-bg-primary,
.modal-header.text-bg-info,
.modal-header.text-bg-dark {
    color: #FFFFFF !important;
}
.modal-header.bg-primary .modal-title,
.modal-header.bg-info .modal-title,
.modal-header.bg-cyan .modal-title,
.modal-header.bg-blue .modal-title,
.modal-header.bg-dark .modal-title,
.modal-header.bg-navy .modal-title,
.modal-header.bg-primary-300 .modal-title,
.modal-header.bg-info-600 .modal-title,
.modal-header.text-bg-primary .modal-title,
.modal-header.text-bg-info .modal-title,
.modal-header.text-bg-dark .modal-title,
.modal-header.bg-primary h1,
.modal-header.bg-primary h2,
.modal-header.bg-primary h3,
.modal-header.bg-primary h4,
.modal-header.bg-primary h5,
.modal-header.bg-primary h6,
.modal-header.bg-info h1,
.modal-header.bg-info h2,
.modal-header.bg-info h3,
.modal-header.bg-info h4,
.modal-header.bg-info h5,
.modal-header.bg-info h6,
.modal-header.bg-cyan h1,
.modal-header.bg-cyan h2,
.modal-header.bg-cyan h3,
.modal-header.bg-cyan h4,
.modal-header.bg-cyan h5,
.modal-header.bg-cyan h6,
.modal-header.bg-blue h1,
.modal-header.bg-blue h2,
.modal-header.bg-blue h3,
.modal-header.bg-blue h4,
.modal-header.bg-blue h5,
.modal-header.bg-blue h6,
.modal-header.bg-dark h1,
.modal-header.bg-dark h2,
.modal-header.bg-dark h3,
.modal-header.bg-dark h4,
.modal-header.bg-dark h5,
.modal-header.bg-dark h6,
.modal-header.bg-navy h1,
.modal-header.bg-navy h2,
.modal-header.bg-navy h3,
.modal-header.bg-navy h4,
.modal-header.bg-navy h5,
.modal-header.bg-navy h6 {
    color: #FFFFFF !important;
}
/* Icons inside the filled header must also become white (they were
   brand blue in the plain/transparent header design). */
.modal-header.bg-primary .modal-title i,
.modal-header.bg-info .modal-title i,
.modal-header.bg-cyan .modal-title i,
.modal-header.bg-blue .modal-title i,
.modal-header.bg-dark .modal-title i,
.modal-header.bg-navy .modal-title i,
.modal-header.bg-primary-300 .modal-title i,
.modal-header.bg-info-600 .modal-title i,
.modal-header.text-bg-primary .modal-title i,
.modal-header.text-bg-info .modal-title i,
.modal-header.text-bg-dark .modal-title i {
    color: #FFFFFF !important;
}

/* ============================================================
   18. MOBILE NAV DRAWER — one global overlay behaviour
   -----------------------------------------------------------------
   Central mobile layout for the shared sidebar used by every
   Qanciye page (files/sidebar.php). Runs ONLY below the desktop
   breakpoint (<= 991.98px). Desktop layout, colours and collapse
   behaviour are untouched (no desktop rules live in this section).
   ============================================================ */
/* Mobile-only close control: always hidden on desktop */
.sidebar .sidebar-logo #mobile_sidebar_close {
    display: none !important;
}

@media (max-width: 991.98px) {

    /* ---- fixed off-canvas drawer: closed by default, overlays the page ---- */
    .sidebar,
    .sidebar#sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: min(270px, 82vw) !important;
        max-width: 270px;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0;
        overflow: hidden;
        overscroll-behavior: contain;
        transform: translate3d(-100%, 0, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
        transition: transform 0.25s ease;
        -webkit-transition: -webkit-transform 0.25s ease;
        will-change: transform;
        z-index: 1050 !important;
    }
    .sidebar .slimScrollDiv {
        width: 100% !important;
    }

    /* ---- open state: ONLY body.sidebar-open slides the drawer in ---- */
    body.sidebar-open .sidebar,
    body.sidebar-open .sidebar#sidebar {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    /* ---- hamburger turns into an X while the drawer is open ---- */
    body.sidebar-open #mobile_btn .bar-icon span:first-child {
        position: relative;
        top: 10px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    body.sidebar-open #mobile_btn .bar-icon span:nth-child(2) {
        display: none;
    }
    body.sidebar-open #mobile_btn .bar-icon span:last-child {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
    }

    /* ---- dark semi-transparent backdrop over the whole page + header ---- */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1040 !important;
        background: rgba(0, 0, 0, 0.45);
        display: none;
        cursor: pointer;
    }
    body.sidebar-open .sidebar-overlay,
    .sidebar-overlay.opened {
        display: block !important;
    }

    /* ---- lock background scroll while the drawer is open ---- */
    body.sidebar-open {
        overflow: hidden !important;
        height: 100% !important;
    }

    /* ---- logo strip: compact 64px header with centred logo ---- */
    .sidebar .sidebar-logo {
        position: relative;
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 46px 0 12px !important;
        justify-content: center !important;
    }
    .sidebar .sidebar-logo .logo-white {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    .sidebar .sidebar-logo .logo-white img,
    .sidebar .sidebar-logo .logo-normal img {
        width: auto !important;
        height: auto !important;
        max-width: 130px !important;
        max-height: 44px !important;
        object-fit: contain;
    }
    .sidebar .sidebar-logo #toggle_btn {
        display: none !important;
    }
    .sidebar .sidebar-logo #mobile_sidebar_close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        border: 1px solid rgba(203, 213, 225, 0.22);
        background: rgba(255, 255, 255, 0.06);
        color: #CBD5E1 !important;
        font-size: 18px;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
    }
    .sidebar .sidebar-logo #mobile_sidebar_close:hover,
    .sidebar .sidebar-logo #mobile_sidebar_close:focus {
        background: #2563EB;
        border-color: #2563EB;
        color: #FFFFFF !important;
    }
    .sidebar .sidebar-logo #mobile_sidebar_close i {
        pointer-events: none;
        font-size: 18px;
    }

    /* ---- decorative desktop blocks add empty vertical space on phones ---- */
    .sidebar .modern-profile,
    .sidebar .sidebar-header {
        display: none !important;
    }

    /* ---- scrollable navigation area ---- */
    .sidebar .sidebar-inner,
    .sidebar .slimScrollDiv {
        height: calc(100dvh - 64px) !important;
        max-height: calc(100dvh - 64px) !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar .sidebar-menu {
        padding: 6px 6px 30px !important;
    }
    .sidebar .sidebar-menu > ul > li {
        margin-bottom: 0 !important;
    }

    /* ---- compact menu rows (main 42px / submenu 38px) ---- */
    .sidebar .sidebar-menu li > a {
        height: 42px !important;
        min-height: 42px;
        margin: 1px 6px 2px !important;
        padding: 0 12px !important;
        gap: 10px !important;
        font-size: 14px !important;
    }
    .sidebar .sidebar-menu li.submenu li > a {
        height: 38px !important;
        min-height: 38px;
        margin: 0 6px 1px !important;
        padding-left: 28px !important;
        font-size: 13px !important;
        gap: 10px !important;
    }
    .sidebar .sidebar-menu .submenu-hdr {
        margin: 10px 14px 6px !important;
        font-size: 11px !important;
    }
}

/* ---- small-screen top header: compact but complete actions ---- */
@media (max-width: 991.98px) {
    .header .main-header {
        gap: 2px !important;
    }
    .header .nav.user-menu {
        margin-right: 0;
    }
    .header .nav-item-box > a {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 17px;
    }
    .header .link-nav .btn,
    .header .pos-nav .btn {
        width: 36px;
        height: 36px;
        min-height: 36px;
    }
    #qThemeToggle {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 575.98px) {
    .header .nav-item-box > a,
    .header .link-nav .btn,
    .header .pos-nav .btn,
    #qThemeToggle {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        font-size: 16px;
    }
    .header .header-left {
        padding: 0 4px 0 48px !important;
    }
    .header .nav.user-menu > li {
        margin-right: 0 !important;
    }
    .header .profile-nav .nav-link {
        padding: 0 6px;
    }
}

/* ---- mobile nav text polish: long labels never widen the drawer ---- */
@media (max-width: 991.98px) {
    .sidebar .sidebar-menu li > a > span {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar .sidebar-menu li > a .menu-arrow {
        margin-left: auto;
        flex: none;
    }
}

/* ============================================================
   19. FIRST-PAINT LAYOUT LOCK — deterministic initial layout
   -----------------------------------------------------------------
   While the pre-paint bootstrap is running (html.layout-init) all
   sidebar / header / content transitions are disabled. Layout
   classes are applied synchronously before the first paint, and
   the lock is removed right after DOMContentLoaded initializers
   finish — so there is never a visible wrong→correct layout shift.
   ============================================================ */
html.layout-init .sidebar,
html.layout-init .settings-sidebar,
html.layout-init .header,
html.layout-init .header .header-left,
html.layout-init .header .main-header,
html.layout-init .main-wrapper,
html.layout-init .page-wrapper,
html.layout-init .content {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* ============================================================
   20. COMPANY LOGO — SINGLE SOURCE, SINGLE VISIBLE LOGO
   -----------------------------------------------------------------
   Every surface (header-left, sidebar) renders the SAME database
   company-profile logo. The markup keeps the template variant
   anchors (.logo / .logo-white / .logo-small / .logo-small-white)
   but CSS guarantees EXACTLY ONE anchor is visible at a time so a
   DB logo is never rendered next to a hard-coded fallback.
   Light ↔ dark and desktop ↔ mobile are resolved by theme/width.
   ============================================================ */

/* ---- Desktop header: one full logo (variant per theme) ---- */
@media (min-width: 992px) {
    .header .header-left .logo-normal,
    .header .header-left .logo-white,
    .header .header-left .logo-small,
    .header .header-left .logo-small-white {
        display: none !important;
    }
    html[data-theme="light"] body:not(.mini-sidebar) .header .header-left .logo-normal {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    html[data-theme="dark"] body:not(.mini-sidebar) .header .header-left .logo-white {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Mini/collapsed sidebar: header-left switches to the small logo only */
    html[data-theme="light"] body.mini-sidebar .header .header-left .logo-small {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    html[data-theme="dark"] body.mini-sidebar .header .header-left .logo-small-white {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ---- Mobile header: NO logo in the top bar (<= 991px). ----
   The company logo belongs to the sidebar drawer header only, so the
   mobile top bar keeps just the menu button + the required actions.
   This removes the duplicated logo that used to appear in the top bar
   next to the drawer logo. */
@media (max-width: 991.98px) {
    .header .header-left .logo-normal,
    .header .header-left .logo-white,
    .header .header-left .logo-small,
    .header .header-left .logo-small-white {
        display: none !important;
    }
}

/* ---- Sidebar logo: DB logo on the navy strip (single, per mode) ---- */
.sidebar .sidebar-logo .logo-normal,
.sidebar .sidebar-logo .logo-small,
.sidebar .sidebar-logo .logo-small-white,
.sidebar .sidebar-logo .logo-white {
    display: none !important;
}
@media (max-width: 991.98px) {
    .sidebar .sidebar-logo .logo-white {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
}
@media (min-width: 992px) {
    body:not(.mini-sidebar) .sidebar .sidebar-logo .logo-white,
    body.mini-sidebar.expand-menu .sidebar .sidebar-logo .logo-white {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-logo .logo-small-white {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
}

/* Deterministic logo sizing everywhere it is rendered */
.header .header-left .logo img,
.header .header-left .logo-small img,
.sidebar .sidebar-logo .logo-white img,
.sidebar .sidebar-logo .logo-normal img {
    width: auto !important;
    height: auto !important;
    max-width: var(--logo-max-width, 130px) !important;
    max-height: var(--logo-max-height, 48px) !important;
    object-fit: contain;
}

/* ============================================================
   21. DESKTOP SAFETY — mobile drawer state never leaks upward
   -----------------------------------------------------------------
   Everything below runs ONLY >= 992px. It guarantees that a leftover
   body.sidebar-open / overlay.opened class can never hide content,
   lock page scroll or cover the page on a desktop layout.
   ============================================================ */
@media (min-width: 992px) {
    body.sidebar-open {
        overflow: visible !important;
        height: auto !important;
    }
    .sidebar-overlay {
        display: none !important;
    }
}

/* ============================================================
   22. POS ORDERS MODAL TABS — Onhold / Unpaid / Paid
   -----------------------------------------------------------------
   These tabs live inside a `.tabs-sets` chip group (legacy template)
   whose rules fight theme.css (orange fill + 12px vs blue underline).
   The previous winner produced an ACTIVE tab with white text on a
   transparent background — invisible. This scoped block replaces that
   whole rule-set with one consistent Qanciye look:
   - Inter font, 13px / 600, clear readable colors
   - inactive = soft surface chip (dark slate text)
   - active   = solid blue chip with white text (no underline)
   Scoped by the unique modal id so no other tab group is affected.
   ============================================================ */
#ordersTabs {
    border-bottom: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding: 0;
}
#ordersTabs .nav-item {
    margin: 0;
}
#ordersTabs .nav-link {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2) !important;
    background: var(--surface-2) !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 8px 16px;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#ordersTabs .nav-link:hover,
#ordersTabs .nav-link:focus,
#ordersTabs .nav-link:focus-visible {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-color: transparent !important;
    border-bottom-color: transparent !important;
}
#ordersTabs .nav-link.active,
#ordersTabs .nav-link.active:hover,
#ordersTabs .nav-link.active:focus {
    color: #FFFFFF !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

/* ============================================================
   23. FONT HARMONY — theme text always renders in "Inter"
   -----------------------------------------------------------------
   The POS page (poss/pos.php) loads poss/assets/css/style.css which
   pins some interactive surfaces to the template's "Nunito" stack.
   The theme design uses Inter everywhere, so this block brings the
   remaining template surfaces onto the same stack. Icon fonts are
   never touched because each icon element keeps its own font-family.
   ============================================================ */
.dropdown .dropdown-menu,
.dropdown-menu {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dropdown-menu .dropdown-item {
    font-family: inherit;
}

/* ============================================================
   24. BUTTON FOREGROUND GUARD — readable text + icons everywhere
   -----------------------------------------------------------------
   Rule:  DARK/COLORED background  →  WHITE text & icons
          LIGHT background         →  DARK text & icons
   Root cause of invisible labels: legacy rules such as
   `.header .nav.user-menu > li > a { color:#263449 !important; }`
   beat Bootstrap/theme solid-button colors when both use !important.
   These guards are scoped to button elements + their child icons and
   never touch plain navigation links or non-button UI text.
   ============================================================ */
:root {
    --btn-foreground-on-dark: #FFFFFF;
    --btn-foreground-on-dark-hover: #FFFFFF;
    --btn-foreground-on-light: #0F172A;
    --btn-foreground-warning: #0F172A; /* amber bg → dark text */
}

/* ---- child icons always follow the button foreground ---- */
.btn i,
.btn .ti,
.btn .bx,
.btn .fa,
.btn svg,
a.btn i,
button.btn i {
    color: inherit !important;
}

/* ---- solid / colored buttons: white foreground (normal, hover, focus, active) ---- */
.btn-primary,
.btn-added,
.btn-save,
.btn-new,
.btn-dark,
.btn-navy,
.btn-success,
.btn-danger,
.btn-info,
.btn-cyan,
.btn-indigo,
.btn-purple,
.btn-teal,
.btn-blue,
.btn-royalblue,
.btn-darkblue,
a.btn-primary,
a.btn-dark,
a.btn-navy,
a.btn-success,
a.btn-danger,
a.btn-info,
a.btn-cyan,
a.btn-indigo,
a.btn-purple,
a.btn-teal,
a.btn-blue,
button.btn-primary,
button.btn-dark,
button.btn-success,
button.btn-danger,
button.btn-info {
    color: var(--btn-foreground-on-dark) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-added:hover,
.btn-added:focus,
.btn-added:active,
.btn-save:hover,
.btn-save:focus,
.btn-save:active,
.btn-new:hover,
.btn-new:focus,
.btn-new:active,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-navy:hover,
.btn-navy:focus,
.btn-navy:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-cyan:hover,
.btn-cyan:focus,
.btn-cyan:active,
.btn-indigo:hover,
.btn-indigo:focus,
.btn-indigo:active,
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-teal:hover,
.btn-teal:focus,
.btn-teal:active,
.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-darkblue:hover,
.btn-darkblue:focus,
.btn-darkblue:active,
a.btn-dark:hover,
a.btn-dark:focus,
a.btn-dark:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-success:hover,
a.btn-success:focus,
a.btn-success:active,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger:active,
a.btn-info:hover,
a.btn-info:focus,
a.btn-info:active,
button.btn-dark:hover,
button.btn-dark:focus,
button.btn-dark:active {
    color: var(--btn-foreground-on-dark-hover) !important;
}

/* Header (top bar) coloured action buttons must stay readable:
   neutralises `.header .nav.user-menu > li > a` dark-text overrides. */
.header .nav.user-menu > li > a.btn-dark,
.header .nav.user-menu > li > a.btn-primary,
.header .nav.user-menu > li > a.btn-navy,
.header .nav.user-menu > li > a.btn-success,
.header .nav.user-menu > li > a.btn-danger,
.header .nav.user-menu > li > a.btn-info,
.header .nav.user-menu > li > a.btn-cyan,
.header .nav.user-menu > li > a.btn-indigo,
.header .nav.user-menu > li > a.btn-purple,
.header .nav.user-menu > li > a.btn-teal {
    color: var(--btn-foreground-on-dark) !important;
}
.header .nav.user-menu > li > a.btn-dark:hover,
.header .nav.user-menu > li > a.btn-dark:focus,
.header .nav.user-menu > li > a.btn-dark:active,
.header .nav.user-menu > li > a.btn-primary:hover,
.header .nav.user-menu > li > a.btn-primary:focus,
.header .nav.user-menu > li > a.btn-primary:active,
.header .nav.user-menu > li > a.btn-navy:hover,
.header .nav.user-menu > li > a.btn-navy:active,
.header .nav.user-menu > li > a.btn-success:hover,
.header .nav.user-menu > li > a.btn-success:active,
.header .nav.user-menu > li > a.btn-danger:hover,
.header .nav.user-menu > li > a.btn-danger:active,
.header .nav.user-menu > li > a.btn-info:hover,
.header .nav.user-menu > li > a.btn-info:active,
.header .nav.user-menu > li > a.btn-cyan:hover,
.header .nav.user-menu > li > a.btn-cyan:active,
.header .nav.user-menu > li > a.btn-indigo:hover,
.header .nav.user-menu > li > a.btn-indigo:active,
.header .nav.user-menu > li > a.btn-purple:hover,
.header .nav.user-menu > li > a.btn-purple:active,
.header .nav.user-menu > li > a.btn-teal:hover,
.header .nav.user-menu > li > a.btn-teal:active {
    color: var(--btn-foreground-on-dark-hover) !important;
}

/* Warning/amber uses dark foreground for sufficient contrast.
   Keep the parent + its icons consistent. */
.btn-warning,
a.btn-warning,
button.btn-warning,
.btn-orange,
a.btn-orange {
    color: var(--btn-foreground-warning) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active {
    color: var(--btn-foreground-warning) !important;
}