/*
 * COD FOUNDERS — UI System 3.1  Light Edition
 * Accent: #16A34A | Body: #F3F4F6 | Sidebar: #F0F9F1
 * Dark toggle: html[data-theme="dark"]
 * ─────────────────────────────────────────────
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════
   1. DESIGN TOKENS — LIGHT THEME (default)
══════════════════════════════════════════════ */
:root {
    /* Brand — Forest Green (#16A34A on white = 7:1 contrast ✓) */
    --primary:          #16A34A;
    --primary-dark:     #15803D;
    --primary-hover:    #166534;
    --primary-light:    rgba(22, 163, 74, 0.12);
    --primary-muted:    rgba(22, 163, 74, 0.06);
    --primary-ring:     rgba(22, 163, 74, 0.25);
    --primary-text:     #FFFFFF;   /* white ON green = 7:1 ✓ */

    /* Sidebar tokens */
    --sidebar-bg:       #F0F9F1;
    --sidebar-border:   rgba(22,163,74,0.12);
    --sidebar-text:     rgba(0,0,0,0.60);
    --sidebar-icon:     rgba(0,0,0,0.35);
    --sidebar-hover:    rgba(22,163,74,0.08);
    --sidebar-active:   #16A34A;
    --sidebar-sub-text: rgba(0,0,0,0.45);

    /* Semantic */
    --success:          #16A34A;
    --success-light:    rgba(22, 163, 74, 0.12);
    --danger:           #DC2626;
    --danger-light:     rgba(220, 38, 38, 0.10);
    --warning:          #D97706;
    --warning-light:    rgba(217, 119, 6, 0.10);
    --info:             #2563EB;
    --info-light:       rgba(37, 99, 235, 0.10);
    --orange:           #EA580C;
    --orange-light:     rgba(234, 88, 12, 0.10);
    --teal:             #0D9488;
    --teal-light:       rgba(13, 148, 136, 0.10);
    --pink:             #DB2777;
    --pink-light:       rgba(219, 39, 119, 0.10);

    /* Neutrals — proper light scale */
    --white:            #FFFFFF;
    --gray-50:          #F9FAFB;
    --gray-100:         #F3F4F6;
    --gray-200:         #E5E7EB;
    --gray-300:         #D1D5DB;
    --gray-400:         #9CA3AF;
    --gray-500:         #6B7280;
    --gray-600:         #4B5563;
    --gray-700:         #374151;
    --gray-800:         #1F2937;
    --gray-900:         #111827;

    /* Light Surfaces */
    --bg-body:          #F3F4F6;
    --bg-sidebar:       #F0F9F1;
    --bg-card:          #FFFFFF;
    --bg-hover:         #F3F4F6;
    --text-main:        #111827;
    --text-secondary:   #374151;
    --text-muted:       #6B7280;
    --text-placeholder: #9CA3AF;
    --border:           #E5E7EB;
    --border-focus:     #16A34A;

    /* Shadows — softer on light bg */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:  0 12px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
    --shadow-xl:  0 24px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
    --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);

    /* Layout */
    --sidebar-width:    224px;
    --header-height:    58px;
    --radius-xs:        4px;
    --radius-sm:        6px;
    --radius:           8px;
    --radius-md:        10px;
    --radius-lg:        14px;
    --radius-xl:        20px;
    --radius-full:      9999px;

    /* Transitions */
    --ease:             cubic-bezier(0.4, 0, 0.2, 1);
    --transition:       all 0.18s var(--ease);
    --transition-slow:  all 0.3s var(--ease);
}

/* ══════════════════════════════════════════════
   1b. DARK THEME OVERRIDE
   Applied when html[data-theme="dark"]
══════════════════════════════════════════════ */
html[data-theme="dark"] {
    /* Brand — Lime Accent (#9BEC00 on dark = 12:1 contrast ✓) */
    --primary:          #9BEC00;
    --primary-dark:     #7EC600;
    --primary-hover:    #62A000;
    --primary-light:    rgba(155, 236, 0, 0.13);
    --primary-muted:    rgba(155, 236, 0, 0.07);
    --primary-ring:     rgba(155, 236, 0, 0.22);
    --primary-text:     #0C1A00;   /* dark text FOR USE ON primary bg */

    /* Sidebar tokens */
    --sidebar-bg:       #080D0A;   /* near-black dark green */
    --sidebar-border:   rgba(155,236,0,0.08);
    --sidebar-text:     rgba(255,255,255,0.55);
    --sidebar-icon:     rgba(255,255,255,0.32);
    --sidebar-hover:    rgba(155,236,0,0.08);
    --sidebar-active:   #9BEC00;
    --sidebar-sub-text: rgba(255,255,255,0.42);

    /* Semantic — adjusted for dark backgrounds */
    --success:          #3FB950;
    --success-light:    rgba(63, 185, 80, 0.16);
    --danger:           #F85149;
    --danger-light:     rgba(248, 81, 73, 0.16);
    --warning:          #D29922;
    --warning-light:    rgba(210, 153, 34, 0.16);
    --info:             #58A6FF;
    --info-light:       rgba(88, 166, 255, 0.16);
    --orange:           #F0883E;
    --orange-light:     rgba(240, 136, 62, 0.16);
    --teal:             #39D353;
    --teal-light:       rgba(57, 211, 83, 0.16);
    --pink:             #DB61A2;
    --pink-light:       rgba(219, 97, 162, 0.16);

    /* Neutrals — Dark-mode scale (light at 900, dark at 50) */
    --white:            #FFFFFF;
    --gray-50:          #161B26;
    --gray-100:         #1C2333;
    --gray-200:         #21262D;
    --gray-300:         #30363D;
    --gray-400:         #484F58;
    --gray-500:         #6E7681;
    --gray-600:         #8B949E;
    --gray-700:         #B1BAC4;
    --gray-800:         #C9D1D9;
    --gray-900:         #E6EDF3;

    /* Dark Surfaces */
    --bg-body:          #0D1117;
    --bg-sidebar:       #080D0A;
    --bg-card:          #161B26;
    --bg-hover:         #1C2333;
    --text-main:        #E6EDF3;
    --text-secondary:   #C9D1D9;
    --text-muted:       #6E7681;
    --text-placeholder: #484F58;
    --border:           #21262D;
    --border-focus:     #9BEC00;

    /* Shadows — stronger on dark bg */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg:  0 12px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
    --shadow-xl:  0 24px 40px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4);
    --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════════════════
   2. BASE RESET
══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html { scroll-behavior: smooth; }

body {
    background: var(--bg-body) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--text-main) !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

a { text-decoration: none !important; transition: var(--transition) !important; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* ══════════════════════════════════════════════
   3. LAYOUT SKELETON
══════════════════════════════════════════════ */
.lx-wrapper {
    display: flex !important;
    min-height: 100vh !important;
    position: relative !important;
}

/* ── Sidebar ── */
.lx-main-leftside {
    width: var(--sidebar-width) !important;
    background: var(--sidebar-bg) !important;
    border-right: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 1100 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: transform 0.28s var(--ease) !important;
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18) !important;
}

/* ── Sidebar collapsed state ── */
.lx-main-leftside.is-collapsed {
    width: 60px !important;
    overflow: visible !important;
}
.lx-main-leftside.is-collapsed .lx-logo a span,
.lx-main-leftside.is-collapsed .lx-main-menu ul li > a > span,
.lx-main-leftside.is-collapsed .lx-logout-item a span,
.lx-main-leftside.is-collapsed .lx-logo a b {
    display: none !important;
}
.lx-main-leftside.is-collapsed .lx-main-menu ul li > a {
    justify-content: center !important;
    padding: 10px !important;
}
.lx-main-leftside.is-collapsed .lx-logo a {
    justify-content: center !important;
}
.lx-main-leftside.is-collapsed .lx-logo a i[data-lucide],
.lx-main-leftside.is-collapsed .lx-logo a svg {
    background: rgba(52,211,153,0.15) !important;
    border-radius: 8px !important;
}
.lx-main-leftside.is-collapsed .lx-logout-item a {
    justify-content: center !important;
    padding: 10px !important;
}
.lx-main-leftside.is-collapsed + .lx-main-content,
.lx-main-leftside.is-collapsed ~ .lx-main-content {
    margin-left: 60px !important;
}
/* Sub-menus hidden when collapsed */
.lx-main-leftside.is-collapsed .lx-main-menu ul li > ul { display: none !important; }
.lx-main-leftside.is-collapsed .fa-angle-down { display: none !important; }
/* Flip toggle icon when collapsed */
.lx-main-leftside.is-collapsed .lx-sidebar-toggle i[data-lucide],
.lx-main-leftside.is-collapsed .lx-sidebar-toggle svg {
    transform: rotate(180deg) !important;
}

/* ── Header ── */
.lx-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    height: var(--header-height) !important;
    padding: 0 20px !important;
    position: fixed !important;
    top: 0 !important; right: 0 !important;
    left: var(--sidebar-width) !important;
    z-index: 1000 !important;
    transition: left 0.28s var(--ease) !important;
    box-shadow: none !important;
}

.lx-header-content {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.lx-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.lx-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.lx-header-center {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* ── Main content ── */
.lx-main-content {
    flex: 1 !important;
    margin-left: var(--sidebar-width) !important;
    min-width: 0 !important;
    background: var(--bg-body) !important;
    padding: calc(var(--header-height) + 28px) 28px 40px !important;
    transition: margin-left 0.28s var(--ease) !important;
}

/* ── Mobile overlay ── */
.lx-sidebar-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 1060 !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    transition: opacity 0.28s var(--ease) !important;
}
.lx-sidebar-overlay.active { opacity: 1 !important; }

/* ══════════════════════════════════════════════
   3b. LEGACY RESET — cancel main_style.php nav rules
   (main_style.php loads before this file; !important
    below deliberately beats its rules without !important)
══════════════════════════════════════════════ */

/* 1. Nav link base — clear margin, padding, color, border-radius */
.lx-main-menu ul li a {
    margin: 0 !important;
    padding: 10px 12px !important;
    color: var(--sidebar-text) !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: transparent !important;
}

/* 2. Restore normal color on hover/focus */
.lx-main-menu ul li a:hover {
    color: rgba(255,255,255,0.92) !important;
    background: var(--sidebar-hover) !important;
}

/* 3. Cancel ALL old icon styles — float, position shift, orange bg, circle */
.lx-main-menu ul li a > i,
.lx-main-menu ul li a > svg {
    position: static !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--sidebar-icon) !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

/* 4. Active icon */
.lx-main-menu ul li a.active > i,
.lx-main-menu ul li a.active > svg,
.lx-main-menu ul li.is-active-item > a > i,
.lx-main-menu ul li.is-active-item > a > svg {
    background: transparent !important;
    color: var(--primary-text) !important;
    border-radius: 0 !important;
}

/* 5. Cancel squircle ::before / ::after pseudo-elements */
.lx-main-menu ul li a.active::before,
.lx-main-menu ul li a.active::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* 6. Ensure spans (text labels) are always visible — kill legacy #EEEEEE background */
.lx-main-menu ul li a > span {
    color: inherit !important;
    display: block !important;
    background: transparent !important;  /* override main_style.php: background:#EEEEEE */
    padding: 0 !important;               /* override main_style.php: padding:2px 5px */
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    border-radius: 0 !important;
}

/* 7. Dropdown chevron (direct child of li, not inside a) */
.lx-main-menu ul li > i.fa,
.lx-main-menu ul li > i.fa-angle-down {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: var(--gray-400) !important;
    pointer-events: none !important;
    transition: transform 0.2s !important;
    float: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}
.lx-main-menu ul li.is-expanded > i.fa-angle-down {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ══════════════════════════════════════════════
   4. SIDEBAR INTERNALS
══════════════════════════════════════════════ */
.lx-main-menu {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Sidebar collapse toggle */
.lx-sidebar-toggle {
    position: absolute !important;
    top: 22px !important;
    right: -13px !important;
    width: 26px !important;
    height: 26px !important;
    background: var(--sidebar-bg) !important;
    border: 1.5px solid rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 20 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    color: rgba(255,255,255,0.5) !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.lx-sidebar-toggle:hover {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
}
.lx-sidebar-toggle svg,
.lx-sidebar-toggle i[data-lucide] {
    width: 13px !important;
    height: 13px !important;
}

/* Logo */
.lx-logo {
    padding: 22px 16px 18px !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
    flex-shrink: 0 !important;
}
.lx-logo a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.lx-logo a b { color: #34D399 !important; }   /* emerald-400 accent */
.lx-logo a span { color: rgba(255,255,255,0.9) !important; }
.lx-logo a i[data-lucide],
.lx-logo a svg {
    width: 28px !important;
    height: 28px !important;
    color: #34D399 !important;
    flex-shrink: 0 !important;
    background: rgba(52,211,153,0.15) !important;
    padding: 5px !important;
    border-radius: 8px !important;
    box-sizing: content-box !important;
}

/* Nav list */
.lx-main-menu > ul {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 10px !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.12) transparent !important;
}
.lx-main-menu > ul::-webkit-scrollbar { width: 3px; }
.lx-main-menu > ul::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }

/* Nav item base */
.lx-main-menu ul li {
    margin-bottom: 2px !important;
    position: relative !important;
}

/* Nav link */
.lx-main-menu ul li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--sidebar-text) !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    cursor: pointer !important;
    position: relative !important;
}

.lx-main-menu ul li > a:hover {
    background: var(--sidebar-hover) !important;
    color: rgba(255,255,255,0.92) !important;
}

/* Lucide icons in nav */
.lx-main-menu ul li > a > i[data-lucide],
.lx-main-menu ul li > a > svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    color: var(--sidebar-icon) !important;
    flex-shrink: 0 !important;
    transition: color 0.15s !important;
    stroke-width: 1.75 !important;
}
.lx-main-menu ul li > a:hover > i[data-lucide],
.lx-main-menu ul li > a:hover > svg {
    color: rgba(255,255,255,0.78) !important;
}

/* Text span in nav — top-level items */
.lx-main-menu ul li > a > span {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
}
/* Active / hover — span inherits */
.lx-main-menu ul li > a.active > span,
.lx-main-menu ul li.is-active-item > a > span {
    color: inherit !important;
    font-weight: 600 !important;
}
.lx-main-menu ul li > a:hover > span { color: inherit !important; }

/* ── Active nav state ── */
.lx-main-menu ul li > a.active,
.lx-main-menu ul li.is-active-item > a {
    background: var(--sidebar-active) !important;
    color: var(--primary-text) !important;   /* #FFFFFF on green (light) / #0C1A00 on lime (dark) */
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
}
/* Active icon */
.lx-main-menu ul li > a.active > i[data-lucide],
.lx-main-menu ul li > a.active > svg,
.lx-main-menu ul li.is-active-item > a > i[data-lucide],
.lx-main-menu ul li.is-active-item > a > svg {
    color: var(--primary-text) !important;
    background: transparent !important;
    border-radius: 0 !important;
}
/* Active parent chevron */
.lx-main-menu ul li.is-active-item > i.fa-angle-down {
    color: rgba(12,26,0,0.55) !important;
}

/* Dropdown chevron (fa-angle-down) */
.lx-main-menu ul li > i.fa-angle-down,
.lx-main-menu ul li > a > i.fa-angle-down {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 9px !important;
    color: var(--sidebar-icon) !important;
    transition: transform 0.2s !important;
    pointer-events: none !important;
}
.lx-main-menu ul li.is-expanded > i.fa-angle-down {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Sub-menu — indented with a subtle left rail */
.lx-main-menu ul li > ul {
    padding: 3px 0 6px 14px !important;
    list-style: none !important;
    margin: 2px 0 0 20px !important;
    display: none;
    border-left: 1px solid rgba(255,255,255,0.10) !important;
}
.lx-main-menu ul li > ul li > a {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--sidebar-sub-text) !important;
    border-radius: var(--radius-sm) !important;
    gap: 7px !important;
}
.lx-main-menu ul li > ul li > a:hover {
    background: rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.82) !important;
}
.lx-main-menu ul li > ul li > a.active {
    color: #34D399 !important;
    font-weight: 600 !important;
    background: rgba(52,211,153,0.12) !important;
}

/* Logout */
.lx-logout-item {
    border-top: 1px solid var(--sidebar-border) !important;
    padding: 10px !important;
    flex-shrink: 0 !important;
}
.lx-logout-item a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--sidebar-sub-text) !important;
    transition: background 0.15s, color 0.15s !important;
}
.lx-logout-item a:hover {
    background: rgba(239,68,68,0.14) !important;
    color: #FCA5A5 !important;
}
.lx-logout-item a i[data-lucide],
.lx-logout-item a svg {
    width: 18px !important; height: 18px !important;
    color: var(--sidebar-icon) !important;
    flex-shrink: 0 !important;
    transition: color 0.15s !important;
}
.lx-logout-item a:hover i[data-lucide],
.lx-logout-item a:hover svg { color: #FCA5A5 !important; }
.lx-logout-item a span { font-size: 13px !important; }

/* ══════════════════════════════════════════════
   5. HEADER COMPONENTS
══════════════════════════════════════════════ */

/* Hamburger toggle */
.lx-mobile-menu {
    display: none !important;
    width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
}
.lx-mobile-menu:hover { background: var(--gray-100) !important; color: var(--text-main) !important; }
.lx-mobile-menu i[data-lucide], .lx-mobile-menu svg { width: 20px !important; height: 20px !important; }

/* Breadcrumb */
.lx-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.lx-breadcrumb span { white-space: nowrap !important; font-size: 13px !important; }
.lx-breadcrumb strong {
    color: var(--text-main) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.lx-breadcrumb i[data-lucide],
.lx-breadcrumb svg { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; }

/* Header icon buttons */
.lx-header-icon-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--gray-500) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    position: relative !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
}
.lx-header-icon-btn:hover { background: var(--gray-100) !important; color: var(--text-main) !important; }
.lx-header-icon-btn i[data-lucide],
.lx-header-icon-btn svg { width: 20px !important; height: 20px !important; }

/* Notification bell */
.lx-notifications-bell > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--gray-500) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    position: relative !important;
}
.lx-notifications-bell > a:hover { background: var(--gray-100) !important; color: var(--text-main) !important; }
.lx-notifications-bell > a i[data-lucide],
.lx-notifications-bell > a svg { width: 20px !important; height: 20px !important; }

/* Notif badge */
.lx-notifications-bell ins {
    position: absolute !important;
    top: 4px !important; right: 4px !important;
    min-width: 16px !important; height: 16px !important;
    background: var(--primary) !important;
    color: var(--primary-text) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border: 2px solid var(--bg-card) !important;
    text-decoration: none !important;
}

/* Notification dropdown */
.lx-notifications {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 320px !important;
    max-height: 360px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-dropdown) !important;
    overflow: auto !important;
    z-index: 2000 !important;
}
.lx-notifications-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    transition: var(--transition) !important;
}
.lx-notifications-item:hover { background: var(--bg-hover) !important; }
.lx-notifications-item a { color: var(--text-main) !important; font-size: 13px !important; }
.lx-notifications-item a p { color: var(--text-muted) !important; margin: 2px 0 4px !important; font-size: 12px !important; }
.lx-notifications-item a ins { display: block !important; font-size: 11px !important; color: var(--text-placeholder) !important; text-align: right !important; font-style: italic !important; text-decoration: none !important; }

/* User ID block */
.lx-user-id-block { display: flex !important; }
.lx-user-id-btn {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    background: var(--gray-100) !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
}
.lx-user-id-btn:hover { background: var(--primary-light) !important; color: var(--primary) !important; }
.lx-user-id-btn i[data-lucide], .lx-user-id-btn svg { width: 13px !important; height: 13px !important; color: var(--primary) !important; }

/* User profile area */
.lx-user-profile {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    border-radius: var(--radius) !important;
    transition: var(--transition) !important;
}
.lx-user-profile:hover { background: var(--gray-100) !important; }
.lx-user-info { text-align: right !important; }
.lx-user-info strong { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text-main) !important; white-space: nowrap !important; }

/* Role badge */
.lx-role-badge {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    text-transform: capitalize !important;
}

/* Commission badges */
.lx-commission-badge {
    padding: 4px 10px !important;
    background: var(--gray-100) !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
}
.lx-commission-badge b { color: var(--primary) !important; font-weight: 700 !important; }

/* Account dropdown */
.lx-account-settings {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    display: none !important;
    width: 220px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-dropdown) !important;
    z-index: 2000 !important;
    overflow: hidden !important;
}
.lx-account-settings div { padding: 12px 16px !important; background: var(--bg-hover) !important; }
.lx-account-settings div strong { font-weight: 600 !important; font-size: 13px !important; color: var(--text-main) !important; display: block !important; }
.lx-account-settings div p { font-size: 12px !important; color: var(--text-muted) !important; margin-top: 2px !important; }
.lx-account-settings a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border) !important;
    transition: var(--transition) !important;
}
.lx-account-settings a:hover { background: var(--bg-hover) !important; color: var(--text-main) !important; }
.lx-account-settings a i[data-lucide], .lx-account-settings a svg { width: 16px !important; height: 16px !important; color: var(--gray-400) !important; }
.lx-account-settings a:last-child { color: var(--danger) !important; }
.lx-account-settings a:last-child:hover { background: var(--danger-light) !important; }

/* ══════════════════════════════════════════════
   6. BUTTONS
══════════════════════════════════════════════ */

/* ─ Primary (solid violet) ─ */
.lx-btn-primary,
.lx-new,
.lx-grab-confirmation,
.lx-export-confirmation,
.lx-create-shipment,
.lx-grab-orders,
.lx-confirm-transfer,
.lx-new-command,
.lx-apply-bulk,
.orange-btn-fix {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: var(--primary) !important;
    color: var(--primary-text) !important;   /* #FFFFFF on green (light) / #0C1A00 on lime (dark) */
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
    height: auto !important;
}
.lx-btn-primary:hover, .lx-new:hover, .lx-grab-confirmation:hover {
    background: var(--primary-dark) !important;
    color: var(--primary-text) !important;
    box-shadow: 0 4px 16px var(--primary-ring) !important;
    transform: translateY(-1px) !important;
}
.lx-btn-primary:active, .lx-new:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* ─ Secondary (outlined) ─ */
.lx-btn-secondary,
.lx-trash,
.lx-trash-confirmation {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}
.lx-btn-secondary:hover, .lx-trash:hover {
    background: var(--gray-100) !important;
    border-color: var(--gray-300) !important;
    color: var(--text-main) !important;
}

/* ─ Danger ─ */
.lx-btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: var(--danger) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
    font-family: inherit !important;
}
.lx-btn-danger:hover { background: #DC2626 !important; transform: translateY(-1px) !important; }

/* ─ Icon button ─ */
.lx-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    flex-shrink: 0 !important;
}
.lx-btn-icon:hover { background: var(--gray-100) !important; color: var(--text-main) !important; }
.lx-btn-icon i[data-lucide], .lx-btn-icon svg { width: 15px !important; height: 15px !important; }

/* Submit wrappers */
.lx-submit input[type="submit"],
.lx-submit input[type="button"],
.lx-submit a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: var(--primary) !important;
    color: var(--primary-text) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    font-family: 'Inter', sans-serif !important;
}
.lx-submit input:hover, .lx-submit a:hover {
    background: var(--primary-dark) !important;
    color: var(--primary-text) !important;
}

/* Filter / state tabs */
.lx-state-filter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}
.lx-state-filter:hover,
.lx-state-filter.active {
    background: var(--primary) !important;
    color: var(--primary-text) !important;
    border-color: var(--primary) !important;
}
.lx-stats-header-filters a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
}
.lx-stats-header-filters a:hover,
.lx-stats-header-filters a.active {
    background: var(--primary) !important;
    color: var(--primary-text) !important;
    border-color: var(--primary) !important;
}

/* ══════════════════════════════════════════════
   7. FORMS & INPUTS
══════════════════════════════════════════════ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="date"],
select,
textarea {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--text-main) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    outline: none !important;
    min-width: 0 !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
    outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--text-placeholder) !important; }
select { cursor: pointer !important; }
textarea { resize: vertical !important; min-height: 80px !important; }
input[type="checkbox"] {
    width: 15px !important; height: 15px !important;
    accent-color: var(--primary) !important;
    opacity: 1 !important; cursor: pointer !important;
    min-width: 15px !important;
}

/* Search wrapper */
.lx-keyword, .lx-search-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}
.lx-keyword label { margin: 0 !important; border: none !important; background: transparent !important; display: block !important; }
.lx-keyword i.fa-search,
.lx-keyword [data-lucide="search"],
.lx-search-wrapper [data-lucide="search"] {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--gray-400) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    width: 14px !important;
    height: 14px !important;
}
.lx-keyword input, .lx-search-wrapper input {
    padding-left: 32px !important;
    min-width: 200px !important;
}
.lx-search-keyword { display: none !important; }

/* ══════════════════════════════════════════════
   8. PAGE HEADER / FILTERS BAR
══════════════════════════════════════════════ */
.lx-stats-content { padding: 0 !important; }

.lx-stats-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}

.lx-stats-header-title { flex: 1 !important; min-width: 0 !important; }
.lx-stats-header-title h1,
.lx-stats-header-title h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin: 0 0 2px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
}
.lx-stats-header-title p {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}

.lx-stats-header-filters {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* ══════════════════════════════════════════════
   9. CARDS / CONTENT BLOCKS
══════════════════════════════════════════════ */
.lx-stats-bloc,
.lx-page-content,
.lx-card {
    background: var(--bg-card) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    padding: 20px !important;
    margin-top: 16px !important;
    box-shadow: none !important;
}

.lx-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--border) !important;
}
.lx-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin: 0 !important;
}

/* ── Tab navigation (inside cards) ── */
.lx-stats-bloc > ul,
.lx-tab-nav {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    list-style: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--gray-50) !important;
    padding: 3px !important;
    width: fit-content !important;
}
.lx-stats-bloc > ul > li,
.lx-tab-nav > li { margin: 0 !important; }
.lx-stats-bloc > ul > li > a,
.lx-tab-nav > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-xs) !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}
.lx-stats-bloc > ul > li > a:hover,
.lx-tab-nav > li > a:hover { color: var(--text-main) !important; background: var(--bg-card) !important; }
.lx-stats-bloc > ul > li > a.active,
.lx-tab-nav > li > a.active {
    background: var(--gray-100) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-xs) !important;
    border: 1px solid var(--border) !important;
}

/* ── KPI / Stat cards ── */
.lx-kpi-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: 18px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    transition: var(--transition) !important;
}
.lx-kpi-card:hover { box-shadow: var(--shadow-md) !important; }

.lx-kpi-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.lx-kpi-value {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    line-height: 1.2 !important;
}
.lx-kpi-sub { font-size: 12px !important; color: var(--text-muted) !important; }

/* ── KPI icon badge ── */
.lx-kpi-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.lx-kpi-icon i[data-lucide], .lx-kpi-icon svg { width: 20px !important; height: 20px !important; }
.lx-kpi-icon.primary   { background: var(--primary-light) !important; color: var(--primary) !important; }
.lx-kpi-icon.success   { background: var(--success-light) !important; color: var(--success) !important; }
.lx-kpi-icon.danger    { background: var(--danger-light) !important; color: var(--danger) !important; }
.lx-kpi-icon.warning   { background: var(--warning-light) !important; color: var(--warning) !important; }
.lx-kpi-icon.info      { background: var(--info-light) !important; color: var(--info) !important; }
.lx-kpi-icon.teal      { background: var(--teal-light) !important; color: var(--teal) !important; }
.lx-kpi-icon.orange    { background: var(--orange-light) !important; color: var(--orange) !important; }
.lx-kpi-icon.pink      { background: var(--pink-light) !important; color: var(--pink) !important; }

/* ══════════════════════════════════════════════
   10. TABLES
══════════════════════════════════════════════ */
.lx-table,
.lx-table-commands {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.lx-table table,
.lx-table-commands table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    min-width: 600px !important;   /* forces horizontal scroll instead of crushing columns */
}
.lx-table th,
.lx-table-commands th {
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
    user-select: none !important;
}
.lx-table th:first-child,
.lx-table-commands th:first-child { border-radius: 0 !important; }

/* Sortable column indicator */
.lx-table th.sortable::after { content: " ↕"; font-size: 10px; color: var(--gray-300); }
.lx-table th.sort-asc::after { content: " ↑"; color: var(--primary); }
.lx-table th.sort-desc::after { content: " ↓"; color: var(--primary); }

.lx-table td,
.lx-table-commands td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    vertical-align: middle !important;
}
.lx-table tr:last-child td,
.lx-table-commands tr:last-child td { border-bottom: none !important; }
.lx-table tr:hover td,
.lx-table-commands tr:hover td { background: var(--gray-50) !important; }
.lx-table tr:first-child td { border-top: 1px solid var(--border) !important; }

/* Table actions (link icons inside cells) */
.lx-table td a:not(.lx-badge):not(.lx-btn-primary):not(.lx-btn-secondary) {
    color: var(--text-muted) !important;
    font-size: 13px !important;
}
.lx-table td a:hover { color: var(--primary) !important; }

/* ── Pagination ── */
.lx-pagination,
.dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-top: 1px solid var(--border) !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
}
.lx-pagination a,
.dataTables_paginate a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
    background: var(--bg-card) !important;
}
.lx-pagination a:hover { background: var(--gray-50) !important; border-color: var(--gray-300) !important; }
.lx-pagination a.active { background: var(--primary) !important; color: var(--primary-text) !important; border-color: var(--primary) !important; font-weight: 700 !important; }
.lx-pagination a.disabled { opacity: 0.4 !important; pointer-events: none !important; }

/* ══════════════════════════════════════════════
   11. BADGES & STATUS PILLS
══════════════════════════════════════════════ */
.lx-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    border: none !important;
    text-transform: none !important;
    color: var(--text-main) !important;
}

/* Order states */
.lx-badge-nouveau   { background: var(--orange-light) !important; color: var(--orange) !important; }
.lx-badge-confirme  { background: var(--success-light) !important; color: var(--success) !important; }
.lx-badge-annule    { background: var(--danger-light) !important; color: var(--danger) !important; }

/* Generic semantic */
.lx-badge-success   { background: var(--success-light) !important; color: var(--success) !important; }
.lx-badge-danger    { background: var(--danger-light) !important; color: var(--danger) !important; }
.lx-badge-warning   { background: var(--warning-light) !important; color: var(--warning) !important; }
.lx-badge-info      { background: var(--info-light) !important; color: var(--info) !important; }
.lx-badge-primary   { background: var(--primary-light) !important; color: var(--primary) !important; }
.lx-badge-gray      { background: var(--gray-100) !important; color: var(--gray-600) !important; }

/* Sourcing-specific */
.lx-badge-quoting    { background: var(--primary-light) !important; color: var(--primary) !important; }
.lx-badge-unsupported{ background: var(--orange-light) !important; color: var(--orange) !important; }
.lx-badge-pending    { background: var(--warning-light) !important; color: var(--warning) !important; }
.lx-badge-done       { background: var(--success-light) !important; color: var(--success) !important; }

/* ══════════════════════════════════════════════
   12. ALERTS
══════════════════════════════════════════════ */
.lx-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 14px !important;
}
.lx-alert-success { background: var(--success-light) !important; color: var(--success) !important; border-left: 3px solid var(--success) !important; }
.lx-alert-danger  { background: var(--danger-light) !important; color: var(--danger) !important; border-left: 3px solid var(--danger) !important; }
.lx-alert-warning { background: var(--warning-light) !important; color: var(--warning) !important; border-left: 3px solid var(--warning) !important; }
.lx-alert-info    { background: var(--info-light) !important; color: var(--info) !important; border-left: 3px solid var(--info) !important; }
.lx-alert-primary { background: var(--primary-light) !important; color: var(--primary) !important; border-left: 3px solid var(--primary) !important; }

/* ══════════════════════════════════════════════
   13. EMPTY STATE
══════════════════════════════════════════════ */
.lx-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 24px !important;
    text-align: center !important;
    gap: 12px !important;
}
.lx-empty-state img, .lx-empty-state .lx-empty-icon {
    width: 80px !important;
    height: 80px !important;
    opacity: 0.5 !important;
    margin-bottom: 8px !important;
}
.lx-empty-state h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    margin: 0 !important;
}
.lx-empty-state p {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    max-width: 300px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
.lx-empty-state .lx-empty-action { margin-top: 8px !important; }

/* ══════════════════════════════════════════════
   14. MODALS / POPUPS
   NOTE: .lx-popup display is controlled by JS
   (jQuery .show()/.hide()). Do NOT set display
   here — that would break hide/show toggling.
══════════════════════════════════════════════ */
.lx-popup {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(0, 0, 0, 0.72) !important;
    z-index: 99999 !important;
    overflow: auto !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    /* display intentionally not set — JS controls */
}
.lx-popup-inside {
    display: flex !important;
    min-height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.lx-popup-content {
    position: relative !important;
    display: block !important;       /* cancel old display:table */
    margin: 0 !important;
    opacity: 1 !important;           /* cancel old opacity:0 */
    transform: none !important;      /* cancel old scale(0.9) */
    animation: fadeSlideIn 0.2s var(--ease) both !important;
}
/* Close button inside popup */
.lx-popup-content > a {
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    color: var(--gray-500) !important;
    z-index: 10 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: var(--transition) !important;
}
.lx-popup-content > a:hover { color: var(--danger) !important; }

/* Legacy .lx-command-edit and .lx-tracking-edit popups */
.lx-command-edit,
.lx-tracking-edit {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(0, 0, 0, 0.72) !important;
    z-index: 99999 !important;
    overflow: auto !important;
    backdrop-filter: blur(3px) !important;
}
.lx-command-edit-inside,
.lx-tracking-edit-inside {
    position: relative !important;
    max-width: 820px !important;
    margin: 40px auto !important;
    padding: 28px !important;
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--border) !important;
}
.lx-command-edit-inside > a,
.lx-tracking-edit-inside > a {
    position: absolute !important;
    top: 14px !important; right: 14px !important;
    color: var(--gray-500) !important;
    font-size: 18px !important;
    transition: var(--transition) !important;
}
.lx-command-edit-inside > a:hover,
.lx-tracking-edit-inside > a:hover { color: var(--danger) !important; }

.lx-popup-content,
.popup-box {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    width: 100% !important;
    max-width: 520px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 28px !important;
    position: relative !important;
    border: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════════════
   15. LOGIN PAGE
══════════════════════════════════════════════ */
.lx-left-bg {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 42% !important;
    height: 100vh !important;
    background: var(--bg-card) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px !important;
    z-index: 10 !important;
    border-right: 1px solid var(--border) !important;
}
.lx-right-bg {
    position: fixed !important;
    top: 0 !important; right: 0 !important;
    width: 58% !important;
    height: 100vh !important;
    background-size: cover !important;
    background-position: center !important;
}
.lx-right-bg-shadow {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(150deg, rgba(158,237,9,0.85) 0%, rgba(130,201,7,0.92) 100%) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 52px !important;
}
.lx-right-bg-shadow > div { text-align: right !important; color: #fff !important; }
.lx-right-bg-shadow > div strong { font-size: 14px !important; font-weight: 500 !important; opacity: 0.8 !important; display: block !important; margin-bottom: 6px !important; }
.lx-right-bg-shadow > div h3 { font-size: 28px !important; font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 6px !important; }
.lx-right-bg-shadow > div b { font-size: 28px !important; font-weight: 800 !important; }

.lx-login { width: 100% !important; max-width: 360px !important; margin: auto !important; }
.lx-login-content h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    margin: 0 0 4px !important;
    letter-spacing: -0.03em !important;
}
.lx-login-content h2 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    margin: 0 0 32px !important;
}
.lx-login-content label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 6px !important;
}
.lx-login-content input[type="text"],
.lx-login-content input[type="email"],
.lx-login-content input[type="password"] {
    width: 100% !important;
    margin-bottom: 14px !important;
    padding: 10px 14px !important;
}
.lx-login-content .lx-submit input[type="submit"] {
    width: 100% !important;
    padding: 11px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    transition: var(--transition) !important;
}
.lx-login-content .lx-submit input[type="submit"]:hover {
    background: var(--primary-dark) !important;
    box-shadow: 0 6px 20px var(--primary-ring) !important;
}
.lx-login-error {
    background: var(--danger-light) !important;
    color: #991B1B !important;
    border: 1px solid #FECACA !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.lx-password-forgotten {
    font-size: 13px !important;
    color: var(--primary) !important;
    font-weight: 500 !important;
    float: right !important;
}
.lx-password-forgotten:hover { color: var(--primary-dark) !important; text-decoration: underline !important; }

/* ══════════════════════════════════════════════
   16. SCROLLBAR
══════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-300); }

/* ══════════════════════════════════════════════
   17. UTILITIES
══════════════════════════════════════════════ */
.lx-flex          { display: flex !important; }
.lx-flex-wrap     { flex-wrap: wrap !important; }
.lx-items-center  { align-items: center !important; }
.lx-justify-between { justify-content: space-between !important; }
.lx-gap-1         { gap: 4px !important; }
.lx-gap-2         { gap: 8px !important; }
.lx-gap-3         { gap: 12px !important; }
.lx-gap-4         { gap: 16px !important; }
.lx-mt-2          { margin-top: 8px !important; }
.lx-mt-4          { margin-top: 16px !important; }
.lx-mb-2          { margin-bottom: 8px !important; }
.lx-mb-4          { margin-bottom: 16px !important; }
.lx-w-full        { width: 100% !important; }
.lx-hidden        { display: none !important; }
.lx-text-muted    { color: var(--text-muted) !important; }
.lx-text-primary  { color: var(--primary) !important; }
.lx-text-danger   { color: var(--danger) !important; }
.lx-text-success  { color: var(--success) !important; }
.lx-fw-600        { font-weight: 600 !important; }
.lx-fw-700        { font-weight: 700 !important; }
.lx-clear-fix     { clear: both !important; }
.lx-divider       { border: 0 !important; border-top: 1px solid var(--border) !important; margin: 16px 0 !important; }

/* ══════════════════════════════════════════════
   18. ANIMATIONS
══════════════════════════════════════════════ */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.lx-fade-in { animation: fadeSlideIn 0.22s var(--ease) both !important; }

.lx-skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.4s infinite !important;
    border-radius: var(--radius-sm) !important;
}

/* ══════════════════════════════════════════════
   19. RESPONSIVE — TABLET ≤ 1199px
══════════════════════════════════════════════ */
@media (max-width: 1199px) {
    :root { --sidebar-width: 200px; }

    .lx-main-content {
        padding: calc(var(--header-height) + 20px) 20px 32px !important;
    }
}

/* ══════════════════════════════════════════════
   20. RESPONSIVE — TABLET / HIDDEN DRAWER ≤ 1023px
══════════════════════════════════════════════ */
@media (max-width: 1023px) {
    /* Sidebar becomes off-screen drawer */
    .lx-main-leftside {
        transform: translateX(-100%) !important;
        box-shadow: var(--shadow-xl) !important;
        z-index: 1200 !important;
        width: 220px !important;
    }
    .lx-main-leftside.active {
        transform: translateX(0) !important;
    }

    /* Overlay shown via JS .active class */
    .lx-sidebar-overlay { display: block !important; }

    /* Header full width */
    .lx-header { left: 0 !important; padding: 0 16px !important; }

    /* Content full width */
    .lx-main-content {
        margin-left: 0 !important;
        padding: calc(var(--header-height) + 20px) 16px 28px !important;
    }

    /* Hamburger visible */
    .lx-mobile-menu { display: flex !important; }

    /* Desktop toggle hidden */
    .lx-sidebar-toggle { display: none !important; }

    /* Commission row hidden on small tablet */
    .lx-header-center { display: none !important; }

    /* Tables scroll horizontally */
    .lx-table, .lx-table-commands {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ══════════════════════════════════════════════
   21. RESPONSIVE — MOBILE ≤ 767px
══════════════════════════════════════════════ */
@media (max-width: 767px) {
    :root { --header-height: 54px; }

    body { font-size: 13px !important; }

    .lx-main-content {
        padding: calc(var(--header-height) + 14px) 12px 24px !important;
    }

    .lx-header { padding: 0 12px !important; }

    /* Cards compact */
    .lx-stats-bloc, .lx-page-content, .lx-card {
        padding: 14px !important;
        border-radius: var(--radius-sm) !important;
        margin-top: 12px !important;
    }

    /* Page title */
    .lx-stats-header { flex-direction: column !important; gap: 10px !important; margin-bottom: 14px !important; }
    .lx-stats-header-title h1 { font-size: 17px !important; }

    /* Filters go full width */
    .lx-stats-header-filters { width: 100% !important; }
    .lx-keyword { width: 100% !important; }
    .lx-keyword input { width: 100% !important; min-width: 0 !important; }

    /* Tabs scroll */
    .lx-stats-bloc > ul {
        overflow-x: auto !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    /* Table compact cells */
    .lx-table th, .lx-table-commands th,
    .lx-table td, .lx-table-commands td {
        padding: 9px 12px !important;
        font-size: 12px !important;
    }

    /* Hide user name on mobile */
    .lx-user-info { display: none !important; }
    .lx-user-id-block { display: none !important; }

    /* Buttons smaller */
    .lx-btn-primary, .lx-new,
    .lx-btn-secondary { padding: 7px 12px !important; font-size: 12px !important; }

    /* Modal full screen */
    .lx-popup-content, .popup-box {
        padding: 20px !important;
        border-radius: var(--radius) !important;
        max-height: 96vh !important;
    }

    /* Login */
    .lx-left-bg { width: 100% !important; padding: 28px 24px !important; }
    .lx-right-bg { display: none !important; }
    .lx-login-content h1 { font-size: 24px !important; }
}

/* ══════════════════════════════════════════════
   22. RESPONSIVE — SMALL MOBILE ≤ 479px
══════════════════════════════════════════════ */
@media (max-width: 479px) {
    .lx-main-content { padding: calc(var(--header-height) + 12px) 10px 20px !important; }
    .lx-header { padding: 0 10px !important; }
    .lx-stats-bloc, .lx-page-content, .lx-card { padding: 12px !important; }
    .lx-stats-header-title h1 { font-size: 15px !important; }
    .lx-btn-primary, .lx-new,
    .lx-btn-secondary { padding: 6px 10px !important; font-size: 11.5px !important; }
}

/* ══════════════════════════════════════════════
   23. PAGE COMPONENTS — LEGACY OVERRIDE
   Neutralise main_style.php orange-era styles
   for all interior pages.
══════════════════════════════════════════════ */

/* ── Page header bar ── */
.lx-page-header {
    padding: 0 0 20px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.lx-page-header h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    position: static !important;
    flex: 1 !important;
    margin: 0 !important;
}
.lx-page-header p {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}
/* Archive / header button (lx-header-btn) — orange → violet */
.lx-page-header a.lx-header-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    float: none !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    transition: var(--transition) !important;
}
.lx-page-header a.lx-header-btn:hover {
    background: var(--gray-50) !important;
    border-color: var(--gray-300) !important;
}

/* ── Page content container ── */
.lx-page-content {
    margin: 0 0 24px !important;
    padding: 20px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

/* ── Filter / action bar ── */
.lx-add-form {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    float: none !important;
}
/* Orange "Nouveau" buttons → violet (already in section 6, but re-affirm inside .lx-page-content) */
.lx-page-content .lx-add-form a.lx-new,
.lx-add-form a.lx-new {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
    border: none !important;
    position: static !important;
}
.lx-add-form a.lx-new:hover {
    background: var(--primary-dark) !important;
    box-shadow: 0 4px 12px var(--primary-ring) !important;
    transform: translateY(-1px) !important;
}
.lx-add-form a.lx-new.lx-error-import { background: var(--danger) !important; }
/* File input overlay inside .lx-new stays hidden */
.lx-add-form a.lx-new input {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}
/* .lx-add-form padding inside popup */
.lx-popup .lx-add-form {
    padding: 16px !important;
}

/* ── Form modal box (.lx-form) ── */
.lx-form {
    width: 100% !important;
    max-width: 680px !important;
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--border) !important;
}
.lx-form-title {
    padding: 16px 20px !important;
    text-align: left !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

/* ── Textfield wrapper ── */
.lx-textfield {
    position: relative !important;
    margin-bottom: 16px !important;
}
.lx-textfield label {
    display: block !important;
    position: relative !important;
}
.lx-textfield span {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}
.lx-textfield ins {
    color: var(--danger) !important;
    font-style: normal !important;
    text-decoration: none !important;
    font-size: 12px !important;
}
/* All inputs inside textfield inherit global input styles — just clear old shadows */
.lx-textfield input[type="text"],
.lx-textfield input[type="number"],
.lx-textfield input[type="password"],
.lx-textfield select,
.lx-textfield textarea {
    box-shadow: none !important;
    border-radius: var(--radius-sm) !important;
    border-color: var(--border) !important;
    width: 100% !important;
}
.lx-textfield select { cursor: pointer !important; }

/* ── Keyword / filter row ── */
.lx-keyword {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 0 10px !important;
    float: none !important;
}
.lx-keyword label {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
}
.lx-keyword label input[type="text"],
.lx-keyword label select {
    width: auto !important;
    min-width: 160px !important;
    box-shadow: none !important;
}
@media (max-width: 767px) {
    .lx-keyword { flex-direction: column !important; }
    .lx-keyword label { width: 100% !important; }
    .lx-keyword label input[type="text"],
    .lx-keyword label select { width: 100% !important; min-width: 0 !important; }
}

/* ── Table alternating-row & border reset ── */
.lx-table table tr:nth-child(2n+1) {
    background: transparent !important;   /* remove FAFAFA zebra */
}
.lx-table table tr td {
    color: var(--text-secondary) !important;
    border-right: none !important;        /* remove thick column dividers */
    border-left: none !important;
}
.lx-table table tr:first-child td,
.lx-table table tr.lx-first-tr td {
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    white-space: nowrap !important;
}
.lx-table table tr:last-child td {
    border-bottom: none !important;
}
/* Link colors inside table cells */
.lx-table table tr td > a {
    color: var(--primary) !important;
    font-size: 13px !important;
}
.lx-table table tr td > a:hover { color: var(--primary-dark) !important; }
.lx-table table tr td a.lx-edit,
.lx-table table tr td a.lx-delete {
    display: inline-flex !important;
    margin-bottom: 4px !important;
}

/* ── Pagination ── */
.lx-pagination {
    margin: 0 !important;
    padding: 14px 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    border-top: 1px solid var(--border) !important;
}
.lx-pagination ul {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    list-style: none !important;
    padding: 0 !important;
}
.lx-pagination ul li {
    float: none !important;
    margin: 0 !important;
}
.lx-pagination ul li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: var(--bg-card) !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
}
.lx-pagination ul li a:hover {
    background: var(--gray-50) !important;
    border-color: var(--gray-300) !important;
}
.lx-pagination ul li a.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.lx-pagination ul li a.previous,
.lx-pagination ul li a.next {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}
.lx-pagination ul li a.disabled {
    border-color: var(--border) !important;
    color: var(--text-placeholder) !important;
    background: var(--gray-50) !important;
    cursor: default !important;
    pointer-events: none !important;
}
.lx-pagination ul li span {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    border-radius: 0 !important;
}
.lx-pagination ul li select {
    height: 34px !important;
    padding: 0 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

/* ── Submit wrappers ── */
.lx-submit,
.lx-submit-add {
    margin-bottom: 16px !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.lx-submit a,
.lx-submit-add a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
}
.lx-submit a:hover,
.lx-submit-add a:hover {
    background: var(--primary-dark) !important;
    box-shadow: 0 4px 12px var(--primary-ring) !important;
}
.lx-submit a.lx-disabled {
    background: var(--gray-300) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

/* ── Bulk action bar ── */
.lx-action-bulk {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
}
.lx-action-bulk select {
    padding: 7px 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    height: 36px !important;
}
.lx-action-bulk a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 14px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
}
.lx-action-bulk a:hover,
.lx-action-bulk:hover a {
    background: var(--primary-dark) !important;
}

/* ── Toast / floating response ── */
.lx-floating-response {
    position: fixed !important;
    z-index: 99999 !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 480px !important;
    padding: 0 !important;
    text-align: center !important;
    cursor: pointer !important;
}
.lx-floating-response p {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: var(--gray-900) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    border-bottom: none !important;
    position: static !important;
}
.lx-floating-response p.lx-error {
    background: var(--danger) !important;
    border-bottom: 3px solid #B91C1C !important;
}
.lx-floating-response p.lx-succes {
    background: var(--success) !important;
    border-bottom: 3px solid #047857 !important;
}
.lx-floating-response p i {
    position: static !important;
    top: auto !important;
    line-height: 1 !important;
    font-size: 16px !important;
}
.lx-floating-response p i:last-child {
    position: static !important;
    right: auto !important;
    top: auto !important;
    margin-left: auto !important;
    opacity: 0.7 !important;
}

/* ── Autocomplete dropdown ── */
.lx-autocomplete {
    position: absolute !important;
    z-index: 9999 !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 220px !important;
    overflow: auto !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-dropdown) !important;
    margin-top: 2px !important;
}
.lx-autocomplete a {
    display: block !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    word-break: break-all !important;
    transition: var(--transition) !important;
}
.lx-autocomplete a:hover {
    background: var(--primary-muted) !important;
    color: var(--primary) !important;
}
.lx-autocomplete a:last-child { border-bottom: none !important; }

/* ── Worker status indicators ── */
.lx-workers-state {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    padding: 10px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}
.lx-workers-state li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}
.lx-connected    { color: var(--success) !important; }
.lx-halfconnected { color: var(--warning) !important; }
.lx-disconnected { color: var(--danger)  !important; }

/* ── State count cards (confirmation counters) ── */
.lx-state-count {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    /* flex/min-height kept from main_style.php modern section */
}
.lx-state-count:hover {
    transform: none !important;
    box-shadow: var(--shadow-md) !important;
}

/* ── KPI old-style items (.lx-kpi-item — dark boxes) ── */
.lx-kpi-item {
    float: left !important;
    position: relative !important;
    width: calc(20% - 12px) !important;
    margin-right: 12px !important;
    margin-bottom: 12px !important;
    padding: 20px !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}
.lx-kpi-item strong { font-size: 26px !important; color: var(--text-main) !important; }
.lx-kpi-item i {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 40px !important;
    color: var(--primary-light) !important;
}
/* Background color helpers (colored KPIs) */
.lx-kpi-item.lx-2b3544 { background: #2B3544 !important; color: #fff !important; }
.lx-kpi-item.lx-d11141 { background: var(--danger) !important; color: #fff !important; }
.lx-kpi-item.lx-00b159 { background: var(--success) !important; color: #fff !important; }
.lx-kpi-item.lx-00aedb { background: var(--info) !important; color: #fff !important; }
.lx-kpi-item.lx-f37735 { background: var(--orange) !important; color: #fff !important; }
.lx-kpi-item.lx-ffc425 { background: var(--warning) !important; color: #fff !important; }

/* ── RIB notice bar ── */
.lx-rib {
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 14px !important;
    margin-bottom: 14px !important;
    background: var(--info-light) !important;
    border: 1px solid #BFDBFE !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1E40AF !important;
}
.lx-rib p { margin: 0 !important; color: inherit !important; }

/* ── Toggle switch (.lx-on-off) ── */
.lx-on-off-fill {
    width: 36px !important;
    height: 20px !important;
    background: var(--gray-300) !important;
    border-radius: var(--radius-full) !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    display: inline-block !important;
}
.lx-on-off-blue .lx-on-off-fill,
.lx-on-off-fill.active { background: var(--primary) !important; }
.lx-on-off span {
    position: absolute !important;
    left: 2px !important;
    top: 2px !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    transition: left 0.2s !important;
    cursor: pointer !important;
}
.lx-on-off-blue span {
    left: 18px !important;
    background: #fff !important;
}
.lx-on-off-fill i {
    display: none !important;
}

/* ── Image picker ── */
.lx-image-picker {
    background: var(--gray-50) !important;
    border: 1px dashed var(--border) !important;
    border-radius: var(--radius-sm) !important;
}
.lx-image-picker a {
    color: var(--gray-300) !important;
    border: none !important;
}
.lx-image-picker a:hover { color: var(--primary) !important; }

/* ── Data list card ── */
.lx-data-list {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.lx-data-list > h3 {
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}
.lx-data-list > h2 {
    padding: 14px 16px !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: var(--text-main) !important;
}
.lx-data-list-content { max-height: 300px !important; overflow: auto !important; }
.lx-data-list-content ul li {
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}
.lx-data-list-content ul li span { float: right !important; color: var(--text-muted) !important; }
.lx-data-list-content ul li a { color: var(--primary) !important; }

/* ── Reported / change-address blink badges ── */
a.lx-reported-blink,
a.lx-change-blink {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    background: var(--warning-light) !important;
    color: var(--warning) !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    position: static !important;
    left: auto !important;
    margin-left: 10px !important;
    animation: pulse 1.2s infinite !important;
    white-space: nowrap !important;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Notification bell button (old #my-notification-button) ── */
#my-notification-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--gray-100) !important;
    color: var(--text-muted) !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    padding: 0 !important;
    margin-left: 8px !important;
    transition: var(--transition) !important;
}
#my-notification-button:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}
#my-notification-button.active {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ── IP tags ── */
.lx-ip-exists {
    display: inline-block !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--danger) !important;
    border-radius: var(--radius-xs) !important;
}
.lx-ip-new {
    display: inline-block !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--success) !important;
    border-radius: var(--radius-xs) !important;
}

/* ── Demande ramassage ── */
.lx-demandramassage { padding: 0 0 16px !important; }
.lx-demandramassage a.lx-demandramassage-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
}
.lx-demandramassage a.lx-demandramassage-btn:hover { background: var(--primary-dark) !important; }

/* ── Submenu tabs ── */
.lx-submenu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 0 14px !important;
    list-style: none !important;
    margin: 0 !important;
    border: none !important;
}
.lx-submenu li { margin: 0 !important; }
.lx-submenu li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition) !important;
    box-shadow: none !important;
}
.lx-submenu li a:hover { background: var(--gray-50) !important; color: var(--text-main) !important; }
.lx-submenu li a.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    font-weight: 600 !important;
}

/* ── Tracking stats item ── */
.lx-tracking-stats-item {
    padding: 16px !important;
    text-align: center !important;
    border-radius: var(--radius-md) !important;
}
.lx-tracking-stats-item strong {
    display: block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* ── Loading overlay ── */
.lx-loading {
    position: absolute !important;
    z-index: 100 !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.7) !important;
    backdrop-filter: blur(2px) !important;
    border-radius: inherit !important;
}
.lx-loading p { margin: auto !important; color: var(--text-muted) !important; font-size: 14px !important; }
.lx-loading p i { display: block !important; font-size: 26px !important; color: var(--primary) !important; margin-bottom: 6px !important; }

/* ── Medias toolbar ── */
.lx-medias-toolbar {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    margin: 0 0 12px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: var(--transition) !important;
}
.lx-medias-toolbar a {
    display: inline-block !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
}
.lx-medias-toolbar:hover { background: var(--primary-light) !important; border-color: var(--primary-light) !important; }
.lx-medias-toolbar:hover a { color: var(--primary) !important; background: transparent !important; }
.lx-medias-toolbar input {
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* ── Colihistory timeline ── */
.lx-colihistory {
    margin-left: 10px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    border-left: 2px solid var(--border) !important;
}
.lx-colihistory li { margin-bottom: 16px !important; }
.lx-colihistory li:last-child { margin-bottom: 0 !important; }
.lx-colihistory li span {
    display: block !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
    position: relative !important;
    font-size: 13px !important;
}
.lx-colihistory li span::before {
    position: absolute !important;
    left: -22px !important;
    top: 5px !important;
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
}
.lx-delete-history { color: var(--danger) !important; font-weight: 400 !important; }

/* ── Readonly input ── */
input[readonly] {
    background: var(--gray-50) !important;
    cursor: not-allowed !important;
    color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════
   24. RESPONSIVE — PAGE COMPONENTS
══════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .lx-kpi-item { width: calc(50% - 8px) !important; }
    .lx-page-content { padding: 14px !important; }
    .lx-form { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 767px) {
    .lx-page-header { padding-bottom: 14px !important; }
    .lx-page-header h2 { font-size: 17px !important; }
    .lx-add-form { flex-direction: column !important; align-items: flex-start !important; }
    .lx-add-form a.lx-new { width: 100% !important; justify-content: center !important; }
    .lx-action-bulk { flex-direction: column !important; align-items: flex-start !important; }
    .lx-kpi-item { width: 100% !important; margin-right: 0 !important; }
    .lx-floating-response { left: 12px !important; right: 12px !important; transform: none !important; width: auto !important; max-width: none !important; }
    .lx-workers-state { gap: 6px 12px !important; }
}
@media (max-width: 479px) {
    .lx-form-title { font-size: 14px !important; }
    .lx-pagination ul li a { min-width: 30px !important; height: 30px !important; font-size: 12px !important; }
}

/* ══════════════════════════════════════════════
   25. GRID SYSTEM RESTORE + LAYOUT FIXES
   main_style.php forces .lx-g1,.lx-g2 to
   float:none;width:100% — this reverses that
   for all grid sizes except where full-width
   is intentional (direct children of lx-g1).
══════════════════════════════════════════════ */

/* ── .lx-main wrapper ── */
.lx-main {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* ── Restore float grid (broken by main_style.php lines ~1726-1730) ── */
.lx-g2    { float: left !important; width: 50%    !important; }
.lx-g2-f  { float: left !important; width: 50%    !important; }
.lx-g3    { float: left !important; width: 33.33% !important; }
.lx-g3-f  { float: left !important; width: 33.33% !important; }
.lx-g3-2  { float: left !important; width: 66.66% !important; }
.lx-g3-2-f{ float: left !important; width: 66.66% !important; }
.lx-g4    { float: left !important; width: 25%    !important; }
.lx-g4-f  { float: left !important; width: 25%    !important; }
.lx-g4-3  { float: left !important; width: 75%    !important; }
.lx-g4-3-f{ float: left !important; width: 75%    !important; }
.lx-g5    { float: left !important; width: 20%    !important; }
.lx-g5-f  { float: left !important; width: 20%    !important; }
.lx-g5-2  { float: left !important; width: 40%    !important; }
.lx-g5-2-f{ float: left !important; width: 40%    !important; }
.lx-g5-3  { float: left !important; width: 60%    !important; }
.lx-g5-3-f{ float: left !important; width: 60%    !important; }
.lx-g5-4  { float: left !important; width: 80%    !important; }
.lx-g5-4-f{ float: left !important; width: 80%    !important; }
.lx-g6    { float: left !important; width: 16.66% !important; }
.lx-g6-f  { float: left !important; width: 16.66% !important; }
.lx-g6-5  { float: left !important; width: 83.33% !important; }
.lx-g6-5-f{ float: left !important; width: 83.33% !important; }
.lx-g8    { float: left !important; width: 12.5%  !important; }
.lx-g8-f  { float: left !important; width: 12.5%  !important; }
.lx-g8-7  { float: left !important; width: 87.5%  !important; }
.lx-g8-7-f{ float: left !important; width: 87.5%  !important; }
/* lx-g1 stays width:100% — that's correct */
.lx-g1    { float: none  !important; width: 100%  !important; }
.lx-g1-f  { float: none  !important; width: 100%  !important; }

/* ── Grid padding — tighten inside card contexts ── */
/* Default: keep general_style.css padding:15px for outer layout */
/* Inside .lx-page-content / .lx-stats-bloc: strip lx-g1 padding (card already has padding) */
.lx-page-content > .lx-g1,
.lx-page-content > .lx-g1-f,
.lx-stats-bloc > .lx-g1,
.lx-stats-bloc > .lx-g1-f {
    padding: 0 !important;
}
/* Form grid items inside popups / lx-form: tight 8px padding */
.lx-form .lx-g1,
.lx-form .lx-g2,
.lx-form .lx-g3,
.lx-form .lx-g4 {
    padding: 8px !important;
}
.lx-form .lx-pb-0 { padding-bottom: 0 !important; }

/* ── KPI flex containers — allow wrapping ── */
.lx-kpis,
.lx-kpis1,
.lx-kpis2 {
    display: flex !important;
    flex-wrap: wrap !important;       /* override nowrap that causes overflow */
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}
.lx-kpis  > .lx-state-count,
.lx-kpis1 > .lx-state-count,
.lx-kpis2 > .lx-state-count {
    flex: 1 1 160px !important;
    min-width: 140px !important;
    min-height: 130px !important;
}

/* ── Stats bloc h3 heading ── */
.lx-stats-bloc h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    letter-spacing: -0.01em !important;
}

/* ── Stats bloc inner layout ── */
.lx-stats-bloc {
    overflow: visible !important;
}

/* ── Page content inner spacing ── */
/* Keyword + add-form sit at top of page-content without extra pad */
.lx-page-content .lx-keyword { padding: 0 0 12px !important; }
.lx-page-content .lx-add-form { padding: 0 0 12px !important; }

/* ── lx-g2 inside pages — responsive ── */
@media (max-width: 1023px) {
    .lx-g4    { width: 50%   !important; }
    .lx-g4-f  { width: 50%   !important; }
    .lx-g5    { width: 50%   !important; }
    .lx-g5-f  { width: 50%   !important; }
    .lx-g5-2  { width: 50%   !important; }
    .lx-g5-2-f{ width: 50%   !important; }
    .lx-g5-3  { width: 100%  !important; }
    .lx-g5-3-f{ width: 100%  !important; }
    .lx-g5-4  { width: 100%  !important; }
    .lx-g5-4-f{ width: 100%  !important; }
    .lx-g6    { width: 33.33%!important; }
    .lx-g6-f  { width: 33.33%!important; }
    .lx-g6-5  { width: 100%  !important; }
    .lx-g6-5-f{ width: 100%  !important; }
    .lx-g8    { width: 25%   !important; }
    .lx-g8-f  { width: 25%   !important; }
    .lx-g8-7  { width: 100%  !important; }
    .lx-g8-7-f{ width: 100%  !important; }
}

@media (max-width: 767px) {
    .lx-g2, .lx-g2-f     { width: 100% !important; float: none !important; }
    .lx-g3, .lx-g3-f     { width: 100% !important; float: none !important; }
    .lx-g3-2, .lx-g3-2-f { width: 100% !important; float: none !important; }
    .lx-g4, .lx-g4-f     { width: 100% !important; float: none !important; }
    .lx-g4-3, .lx-g4-3-f { width: 100% !important; float: none !important; }
    .lx-g5, .lx-g5-f     { width: 50%  !important; }
    .lx-g5-2, .lx-g5-2-f { width: 100% !important; float: none !important; }
    .lx-g5-3, .lx-g5-3-f { width: 100% !important; float: none !important; }
    .lx-g5-4, .lx-g5-4-f { width: 100% !important; float: none !important; }
    .lx-g6, .lx-g6-f     { width: 50%  !important; }
    .lx-g6-5, .lx-g6-5-f { width: 100% !important; float: none !important; }
    .lx-g8, .lx-g8-f     { width: 50%  !important; }
    .lx-g8-7, .lx-g8-7-f { width: 100% !important; float: none !important; }
    /* Form fields: stack single column on mobile */
    .lx-form .lx-g2, .lx-popup .lx-g2 {
        float: none !important; width: 100% !important;
    }
    /* KPI state cards wrap nicely */
    .lx-kpis  > .lx-state-count,
    .lx-kpis1 > .lx-state-count,
    .lx-kpis2 > .lx-state-count { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; }
}

@media (max-width: 479px) {
    .lx-g5, .lx-g5-f,
    .lx-g6, .lx-g6-f,
    .lx-g8, .lx-g8-f { width: 100% !important; float: none !important; }
    .lx-kpis  > .lx-state-count,
    .lx-kpis1 > .lx-state-count,
    .lx-kpis2 > .lx-state-count { flex: 1 1 100% !important; }
}

/* ══════════════════════════════════════════════
   26. SPACING & SIZE POLISH
   Fine-tune all padding/margin/font-size across
   content areas for visual consistency.
══════════════════════════════════════════════ */

/* ── Main content top padding (header + breathing room) ── */
.lx-main-content {
    padding: calc(var(--header-height) + 24px) 24px 40px !important;
}
@media (max-width: 1199px) {
    .lx-main-content { padding: calc(var(--header-height) + 20px) 20px 32px !important; }
}
@media (max-width: 1023px) {
    .lx-main-content { padding: calc(var(--header-height) + 16px) 16px 28px !important; }
}
@media (max-width: 767px) {
    .lx-main-content { padding: calc(var(--header-height) + 14px) 12px 24px !important; }
}
@media (max-width: 479px) {
    .lx-main-content { padding: calc(var(--header-height) + 12px) 10px 20px !important; }
}

/* ── Card/content block sizes ── */
.lx-page-content {
    padding: 16px 20px !important;
    margin: 0 0 20px !important;
}
.lx-stats-bloc {
    padding: 18px 20px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}
@media (max-width: 767px) {
    .lx-page-content { padding: 12px 14px !important; }
    .lx-stats-bloc   { padding: 14px !important; }
}

/* ── Table sizes ── */
.lx-table th { padding: 9px 14px !important; font-size: 11.5px !important; }
.lx-table td { padding: 10px 14px !important; font-size: 13px !important; }
@media (max-width: 767px) {
    .lx-table th,
    .lx-table td { padding: 8px 10px !important; font-size: 12px !important; }
}

/* ── Input sizes — consistent height ── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
select {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
}
textarea {
    height: auto !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-height: 80px !important;
}
/* Overrides for specific padding cases */
.lx-login-content input[type="text"],
.lx-login-content input[type="email"],
.lx-login-content input[type="password"] {
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
}

/* ── Keyword / filter row — consistent item height ── */
.lx-keyword label input[type="text"],
.lx-keyword label input[type="date"],
.lx-keyword label select {
    height: 36px !important;
    padding: 0 10px !important;
    min-width: 150px !important;
    max-width: 220px !important;
    width: auto !important;
}
@media (max-width: 767px) {
    .lx-keyword label input[type="text"],
    .lx-keyword label input[type="date"],
    .lx-keyword label select {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* ── Buttons — consistent height ── */
.lx-btn-primary, .lx-new,
.lx-grab-confirmation, .lx-export-confirmation,
.lx-create-shipment, .lx-grab-orders,
.lx-confirm-transfer, .lx-new-command,
.lx-apply-bulk, .orange-btn-fix {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
}
.lx-btn-secondary, .lx-trash, .lx-trash-confirmation,
.lx-state-filter {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}
.lx-action-bulk select { height: 36px !important; }
.lx-action-bulk a { height: 36px !important; padding: 0 14px !important; }
.lx-submit a, .lx-submit-add a,
.lx-submit input[type="submit"],
.lx-submit input[type="button"] {
    height: 38px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
}

/* ── Popup / form sizing ── */
.lx-popup-content, .popup-box {
    max-width: 640px !important;
    padding: 0 !important;    /* padding handled by inner .lx-form */
}
.lx-form { max-width: 100% !important; }
.lx-form-title {
    padding: 14px 20px !important;
    font-size: 14px !important;
}
.lx-popup .lx-add-form { padding: 16px 20px !important; }
.lx-popup .lx-submit   { padding: 0 20px 16px !important; margin: 0 !important; }

/* ── Textfield inside form — label text size ── */
.lx-textfield span {
    font-size: 12.5px !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
}
.lx-textfield { margin-bottom: 0 !important; }   /* padding handled by lx-g* */

/* ── Page header sizing ── */
.lx-page-header { padding: 0 0 16px !important; }
.lx-page-header h2 { font-size: 19px !important; }

/* ── Pagination compact ── */
.lx-pagination { padding: 12px 0 !important; }

/* ── Stats bloc tab bar compact ── */
.lx-stats-bloc > ul,
.lx-tab-nav { margin: 0 0 14px !important; }

/* ── Data list max-height ── */
.lx-data-list-content { max-height: 260px !important; }

/* ── Sidebar logo size — compact breakpoint ── */
.lx-logo { padding: 18px 12px 14px !important; }
.lx-logo a { font-size: 13px !important; gap: 8px !important; }
.lx-logo a i[data-lucide], .lx-logo a svg { width: 22px !important; height: 22px !important; }

/* ── Nav items compact ── */
.lx-main-menu > ul { padding: 10px 8px !important; }
.lx-main-menu ul li > a { padding: 9px 10px !important; gap: 8px !important; font-size: 12.5px !important; }
.lx-main-menu ul li > a > i[data-lucide],
.lx-main-menu ul li > a > svg { width: 17px !important; height: 17px !important; }
.lx-main-menu ul li > ul li > a { padding: 6px 8px !important; font-size: 12px !important; }

/* ── Header sizing ── */
.lx-breadcrumb span, .lx-breadcrumb strong { font-size: 12.5px !important; }
.lx-user-info strong { font-size: 12.5px !important; }
.lx-user-id-btn { font-size: 11.5px !important; padding: 4px 9px !important; }
.lx-commission-badge { font-size: 11.5px !important; padding: 4px 9px !important; }

/* ── Role badge ── */
.lx-role-badge { font-size: 10.5px !important; }

/* ── Account dropdown ── */
.lx-account-settings { width: 210px !important; }
.lx-account-settings a { padding: 9px 14px !important; font-size: 12.5px !important; }
.lx-account-settings div { padding: 10px 14px !important; }
.lx-account-settings div strong { font-size: 12.5px !important; }
.lx-account-settings div p { font-size: 11.5px !important; }

/* ── lx-w-25 / lx-w-33 responsive helpers ── */
.lx-w-25 { width: calc(25% - 12px) !important; margin-right: 12px !important; margin-bottom: 12px !important; }
.lx-w-33 { width: calc(33.33% - 12px) !important; margin-right: 12px !important; margin-bottom: 12px !important; }
@media (max-width: 1023px) {
    .lx-w-25, .lx-w-33 { width: 100% !important; margin-right: 0 !important; }
}

/* ── lx-importer upload area ── */
.lx-importer {
    padding: 40px 20px !important;
    text-align: center !important;
    background: var(--gray-50) !important;
    color: var(--text-placeholder) !important;
    border: 2px dashed var(--border) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}
.lx-importer:hover {
    border-color: var(--primary) !important;
    background: var(--primary-muted) !important;
    color: var(--primary) !important;
}

/* ── General link color in table cells ── */
.lx-table table tr td a.lx-edit,
.lx-table table tr td a.lx-delete {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    padding: 3px 6px !important;
    border-radius: var(--radius-xs) !important;
    transition: var(--transition) !important;
}
.lx-table table tr td a.lx-edit:hover  { color: var(--primary) !important; background: var(--primary-muted) !important; }
.lx-table table tr td a.lx-delete:hover{ color: var(--danger)  !important; background: var(--danger-light)  !important; }

/* ── checkbox global fix (general_style.css hides them with opacity:0) ── */
input[type="checkbox"] {
    opacity: 1 !important;
    margin-right: 0 !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    accent-color: var(--primary) !important;
    cursor: pointer !important;
}
/* Hide the old custom .checkmark spans since real checkboxes are visible */
.checkmark { display: none !important; }

/* ── lx-on-off toggle — proper size ── */
.lx-on-off { display: inline-flex !important; align-items: center !important; }
.lx-on-off-fill {
    width: 34px !important;
    height: 18px !important;
}
.lx-on-off span {
    width: 14px !important;
    height: 14px !important;
    top: 2px !important;
    left: 2px !important;
}
.lx-on-off-blue span { left: 16px !important; }

/* ── lx-stats-header responsive ── */
.lx-stats-header { margin-bottom: 16px !important; }
.lx-stats-header-title h1 { font-size: 19px !important; }
.lx-stats-header-title h2 { font-size: 19px !important; }

/* ── Notification dropdown position ── */
.lx-notifications { top: calc(100% + 6px) !important; right: -8px !important; }

/* ── lx-advanced-select (product picker) ── */
.lx-advanced-select { position: relative !important; display: inline-block !important; }
.lx-advanced-select > div {
    position: absolute !important;
    z-index: 500 !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 260px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-dropdown) !important;
    padding: 10px !important;
}
.lx-advanced-select > div input[type="text"] {
    width: 100% !important;
    height: 32px !important;
    margin-bottom: 8px !important;
}
.lx-advanced-select > div ul { max-height: 200px !important; overflow-y: auto !important; }
.lx-advanced-select > div ul li {
    padding: 5px 4px !important;
    font-size: 12.5px !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--gray-100) !important;
}
.lx-advanced-select > div ul li label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}
.lx-advanced-select > div a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: var(--radius-xs) !important;
    margin-bottom: 6px !important;
}
.lx-advanced-select > div a.lx-state-empty {
    background: var(--gray-100) !important;
    color: var(--text-muted) !important;
    margin-right: 6px !important;
}
.lx-advanced-select > div a.lx-state-filter {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ── lx-log activity list ── */
.lx-log { font-size: 12.5px !important; color: var(--text-secondary) !important; }

/* ── Reported / blink badge spacing fix ── */
a.lx-reported-blink, a.lx-change-blink {
    margin-left: 8px !important;
    vertical-align: middle !important;
}

/* ── Delete/edit button groups in table ── */
.lx-table table tr td:last-child {
    white-space: nowrap !important;
}

/* ── lx-kpi inside lx-g2 (index sidebar stats) ── */
.lx-g2 .lx-stats-bloc { margin: 0 !important; }

/* ── lx-header icon buttons on smaller screens ── */
@media (max-width: 1199px) {
    .lx-user-info { display: none !important; }
}
@media (max-width: 1023px) {
    .lx-user-id-block { display: none !important; }
    .lx-commission-badge { font-size: 11px !important; padding: 3px 7px !important; }
}
@media (max-width: 767px) {
    .lx-header-right { gap: 2px !important; }
    .lx-commission-badge { display: none !important; }
    .lx-stats-header-title h1 { font-size: 16px !important; }
    .lx-page-header h2 { font-size: 16px !important; }
    .lx-kpis, .lx-kpis1, .lx-kpis2 { gap: 10px !important; }
    .lx-page-content { padding: 12px !important; }
    .lx-stats-bloc { padding: 12px !important; }
    .lx-stats-bloc h3 { font-size: 13px !important; margin-bottom: 12px !important; }
    .lx-table th { padding: 8px 10px !important; }
    .lx-table td { padding: 9px 10px !important; }
}

/* ══════════════════════════════════════════════
   27. MISC COMPONENT FIXES
══════════════════════════════════════════════ */

/* ── Dashboard wrappers ── */
.lx-stats-content { padding: 0 !important; }
.lx-stats-body    { padding: 0 !important; }
.lx-stats-container { padding: 0 !important; }

/* ── lx-g1 inside stats-bloc: strip outer padding ── */
.lx-stats-bloc .lx-g1,
.lx-stats-bloc .lx-g1-f { padding: 0 !important; }

/* ── lx-g2 inside stats-bloc: keep minimal padding ── */
.lx-stats-bloc .lx-g2  { padding: 0 0 0 20px !important; }
.lx-stats-bloc .lx-g2.lx-pl-0 { padding-left: 0 !important; }
@media (max-width: 767px) {
    .lx-stats-bloc .lx-g2 { padding: 16px 0 0 !important; }
}

/* ── lx-fl (float left helper) ── */
.lx-fl { float: left !important; }

/* ── lx-kpis inside confirmation/commands stats container ── */
#confirmationkpicontainer.lx-kpis,
#deliverykpicontainer.lx-kpis { margin-bottom: 0 !important; }

/* ── lx-brl-1 (border-left divider) ── */
.lx-brl-1 { border-left: 1px solid var(--border) !important; }
@media (max-width: 1023px) { .lx-brl-1 { border-left: none !important; } }

/* ── lx-clear-fix after grids ── */
.lx-clear-fix { clear: both !important; display: block !important; }

/* ── lx-pb-5 ── */
.lx-pb-5 { padding-bottom: 5px !important; }
.lx-pr-0 { padding-right: 0 !important; }
.lx-p-0  { padding: 0 !important; }

/* ── lx-show-filter (mobile filter toggle link) ── */
.lx-show-filter {
    display: none !important;
    font-size: 13px !important;
    color: var(--primary) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    margin: 10px 0 !important;
}
@media (max-width: 1023px) {
    .lx-show-filter { display: inline-block !important; }
    .lx-filter { display: none; }
    .lx-filter.active { display: block !important; }
}

/* ── lx-kpi (old KPI wrapper padding) ── */
.lx-kpi { padding: 0 !important; }
@media (max-width: 1023px) { .lx-kpi { padding: 0 !important; } }

/* ── lx-keyword inside lx-stats-header-filters ── */
.lx-stats-header-filters .lx-keyword { padding: 0 !important; gap: 6px !important; flex-wrap: wrap !important; }
.lx-stats-header-filters .lx-keyword label { margin: 0 !important; }

/* ── lx-log activity list ── */
.lx-log { margin-top: 12px !important; }

/* ── lx-popup close button size ── */
.lx-popup-content > a {
    font-size: 20px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-xs) !important;
    background: var(--gray-100) !important;
    right: 10px !important;
    top: 10px !important;
}
.lx-popup-content > a:hover {
    background: var(--danger-light) !important;
    color: var(--danger) !important;
}

/* ── lx-popup-details (wrapper div around lx-form) ── */
.lx-popup-details { display: block !important; }

/* ── lx-form close button inside header ── */
.lx-form-title { position: relative !important; }

/* ── lx-submit inside popup — consistent spacing ── */
.lx-popup .lx-submit {
    padding: 0 20px 20px !important;
    margin: 0 !important;
    display: flex !important;
    gap: 8px !important;
}

/* ── lx-textfield in popup — correct padding flow ── */
.lx-popup .lx-textfield {
    margin-bottom: 0 !important;
}
.lx-popup .lx-textfield.lx-g1,
.lx-popup .lx-textfield.lx-g2,
.lx-popup .lx-textfield.lx-g3 { padding: 6px 10px !important; }
.lx-popup .lx-textfield.lx-pb-0 { padding-bottom: 0 !important; }

/* ── table first row (header row) - proper header style ── */
.lx-table table thead tr th,
.lx-table table tr:first-child td {
    background: var(--gray-50) !important;
    color: var(--text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    white-space: nowrap !important;
    padding: 9px 14px !important;
    text-transform: uppercase !important;
}

/* ── Table row hover — clean ── */
.lx-table table tbody tr:hover td,
.lx-table table tr:not(:first-child):hover td {
    background: var(--gray-50) !important;
}

/* ── lx-notif-count (notification badge, used in header bell) ── */
.lx-notif-count {
    position: absolute !important;
    top: 4px !important; right: 4px !important;
    min-width: 16px !important; height: 16px !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    border: 2px solid var(--bg-card) !important;
    text-decoration: none !important;
}

/* ── lx-delivarymen-cities tag list ── */
.lx-delivarymen-cities {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
}
.lx-delivarymen-cities li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    background: var(--gray-100) !important;
    border-radius: var(--radius-xs) !important;
    font-size: 12px !important;
    color: var(--text-secondary) !important;
}
.lx-delivarymen-cities li i {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 10px !important;
    background: var(--gray-200) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: var(--text-muted) !important;
    margin-left: 0 !important;
}
.lx-delivarymen-cities li i:hover { background: var(--danger-light) !important; color: var(--danger) !important; }

/* ── lx-message-detail ── */
.lx-message-detail {
    padding: 12px !important;
    background: var(--gray-50) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
}

/* ── lx-medias-item image gallery ── */
.lx-medias-item {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important;  /* square aspect ratio */
    margin-bottom: 10px !important;
}
.lx-medias-item img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 4px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}
.lx-medias-item > i {
    position: absolute !important;
    z-index: 3 !important;
    top: 6px !important; right: 6px !important;
    width: 20px !important; height: 20px !important;
    font-size: 10px !important;
    background: var(--danger) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

/* ── Input readonly style ── */
input[readonly] {
    background: var(--gray-50) !important;
    cursor: not-allowed !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

/* ── lx-kpi-percent badge ── */
.lx-kpi-percent {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--success) !important;
    background: var(--success-light) !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-xs) !important;
    margin-bottom: 6px !important;
}
.lx-kpi-info { display: block !important; }
.lx-kpi-info .lx-kpi-label { font-size: 12px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; margin-bottom: 4px !important; display: block !important; }
.lx-kpi-info .lx-kpi-value { font-size: 24px !important; font-weight: 700 !important; color: var(--text-main) !important; display: block !important; }

/* ── .lx-kpi-card (new card style) ── */
.lx-kpi-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: 18px 20px !important;
    margin-bottom: 14px !important;
    box-shadow: none !important;
    transition: var(--transition) !important;
}
.lx-kpi-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px) !important; }
.lx-kpi-card .lx-kpi-icon {
    float: none !important;
    flex-shrink: 0 !important;
}
.lx-kpi-card .lx-kpi-info {
    flex: 1 !important;
    float: none !important;
    width: auto !important;
}

/* ── lx-tracking-edit / command-edit responsive ── */
@media (max-width: 767px) {
    .lx-command-edit-inside,
    .lx-tracking-edit-inside {
        margin: 10px !important;
        padding: 16px !important;
        border-radius: var(--radius-md) !important;
    }
}

/* ══════════════════════════════════════════════
   28. RESPONSIVE TABLES
   — Scroll with hint on ≤1023px
   — Card-style stacked rows on ≤576px
══════════════════════════════════════════════ */

/* ── Scroll wrapper: position:relative so shadow pseudo-element works ── */
.lx-table,
.lx-table-commands,
[class*="lx-table-"] {
    position: relative !important;
}

/* ── Right-edge fade hint: shows when content overflows ── */
.lx-table::after,
.lx-table-commands::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    width: 32px !important; height: 100% !important;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.85)) !important;
    pointer-events: none !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    z-index: 2 !important;
}
/* Show fade only when table is wider than its container */
.lx-table.is-overflow::after,
.lx-table-commands.is-overflow::after { opacity: 1 !important; }

/* ── Scroll hint icon (mobile only) ── */
@media (max-width: 1023px) {
    .lx-table > .lx-scroll-hint,
    .lx-table-commands > .lx-scroll-hint {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        font-size: 11px !important;
        color: var(--text-muted) !important;
        padding: 4px 8px 6px !important;
        justify-content: flex-end !important;
    }
    .lx-table > .lx-scroll-hint svg,
    .lx-table-commands > .lx-scroll-hint svg {
        width: 13px !important; height: 13px !important;
    }
}

/* ── Tablet: horizontal scroll, compact cells ── */
@media (max-width: 1023px) {
    /* All table variants scroll horizontally */
    .lx-table,
    .lx-table-commands,
    [class*="lx-table-"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
    }
    .lx-table table,
    .lx-table-commands table,
    [class*="lx-table-"] table {
        min-width: 540px !important;
    }
    .lx-table table tr td,
    .lx-table-commands table tr td,
    [class*="lx-table-"] table tr td {
        white-space: nowrap !important;
    }
    /* Slightly smaller cells on tablet */
    .lx-table table tr.lx-first-tr td,
    .lx-table-commands table tr.lx-first-tr td {
        padding: 9px 12px !important;
        font-size: 11px !important;
    }
    .lx-table table tr:not(.lx-first-tr) td,
    .lx-table-commands table tr:not(.lx-first-tr) td {
        padding: 9px 12px !important;
        font-size: 12.5px !important;
    }
}

/* ── Mobile (≤576px): Card-style stacked layout ── */
@media (max-width: 576px) {
    .lx-table,
    .lx-table-commands {
        overflow-x: visible !important;
    }
    .lx-table table,
    .lx-table-commands table {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }
    /* Hide the header row — labels shown via data-label pseudo-element */
    .lx-table table tr.lx-first-tr,
    .lx-table-commands table tr.lx-first-tr {
        display: none !important;
    }
    /* Each data row becomes a card */
    .lx-table table tr:not(.lx-first-tr),
    .lx-table-commands table tr:not(.lx-first-tr) {
        display: block !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        margin-bottom: 10px !important;
        padding: 12px 14px !important;
        box-shadow: var(--shadow-sm) !important;
    }
    .lx-table table tr:not(.lx-first-tr):hover,
    .lx-table-commands table tr:not(.lx-first-tr):hover {
        background: var(--gray-50) !important;
        box-shadow: var(--shadow-md) !important;
    }
    /* Each cell stacks as a row inside the card */
    .lx-table table tr:not(.lx-first-tr) td,
    .lx-table-commands table tr:not(.lx-first-tr) td {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 5px 0 !important;
        border: none !important;
        border-bottom: 1px dashed var(--border) !important;
        font-size: 13px !important;
        white-space: normal !important;
        min-height: 0 !important;
        background: transparent !important;
    }
    .lx-table table tr:not(.lx-first-tr) td:last-child,
    .lx-table-commands table tr:not(.lx-first-tr) td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    /* Label from data-label attribute */
    .lx-table table tr:not(.lx-first-tr) td[data-label]::before,
    .lx-table-commands table tr:not(.lx-first-tr) td[data-label]::before {
        content: attr(data-label) !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        min-width: 90px !important;
        max-width: 90px !important;
        flex-shrink: 0 !important;
        padding-top: 2px !important;
        line-height: 1.4 !important;
    }
    /* Checkbox column: no label, compact */
    .lx-table table tr:not(.lx-first-tr) td:first-child,
    .lx-table-commands table tr:not(.lx-first-tr) td:first-child {
        justify-content: flex-start !important;
        padding: 4px 0 !important;
        border-bottom: none !important;
    }
    .lx-table table tr:not(.lx-first-tr) td:first-child::before,
    .lx-table-commands table tr:not(.lx-first-tr) td:first-child::before {
        display: none !important;
    }
    /* Action buttons column */
    .lx-table table tr:not(.lx-first-tr) td:last-child::before,
    .lx-table-commands table tr:not(.lx-first-tr) td:last-child::before {
        display: none !important;
    }
    /* Badges/spans flow naturally */
    .lx-table table tr td span,
    .lx-table-commands table tr td span {
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* Reset any nth-child striping — card has its own background */
    .lx-table table tr:nth-child(2n+1) {
        background: var(--bg-card) !important;
    }
    /* Bulk action bar compact */
    .lx-action-bulk {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .lx-action-bulk label { width: 100% !important; }
    .lx-action-bulk select { width: 100% !important; }
    .lx-action-bulk > a,
    .lx-action-bulk > input[type="submit"] {
        width: 100% !important;
        text-align: center !important;
    }
    /* Pagination compact */
    .lx-pagination ul {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .lx-pagination ul li span {
        font-size: 11px !important;
    }
}

/* ── Keyword filter bar full-width on mobile ── */
@media (max-width: 767px) {
    .lx-keyword-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .lx-keyword-bar .lx-keyword { width: 100% !important; flex: 1 !important; }
    .lx-keyword-bar .lx-keyword input { width: 100% !important; min-width: 0 !important; }
    .lx-keyword-bar select { width: 100% !important; }
    .lx-keyword-bar .lx-new,
    .lx-keyword-bar .lx-btn-primary { width: 100% !important; justify-content: center !important; }
    /* Page header stacks on mobile */
    .lx-stats-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .lx-stats-header-filters {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
}

/* ── Form responsive: 2-col → 1-col at 576px ── */
@media (max-width: 576px) {
    .lx-form > .lx-g2,
    .lx-add-form > .lx-g2,
    .lx-form > .lx-g3,
    .lx-add-form > .lx-g3 {
        float: none !important;
        width: 100% !important;
    }
    .lx-popup-content,
    .popup-box {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: var(--radius) !important;
    }
}

/* ── Utility: hide on mobile / show on mobile ── */
.lx-hide-mobile { display: initial !important; }
.lx-show-mobile { display: none !important; }
@media (max-width: 767px) {
    .lx-hide-mobile { display: none !important; }
    .lx-show-mobile { display: initial !important; }
}

/* ── Scroll observer: JS adds .is-overflow to table wrappers ── */

/* ══════════════════════════════════════════════
   29. LX-PAGE-CONTENT — SINGLE AUTHORITATIVE
       RESPONSIVE SIZING (overrides all prior
       fragmented rules above)
══════════════════════════════════════════════ */

/* Base — desktop ≥1024px */
.lx-page-content,
.lx-stats-bloc,
.lx-card {
    padding:       20px 24px !important;
    margin-top:    0        !important;
    margin-bottom: 20px     !important;
    background:    var(--bg-card)    !important;
    border:        1px solid var(--border) !important;
    border-radius: var(--radius-md)  !important;
    box-shadow:    none              !important;
    width:         100%              !important;
    box-sizing:    border-box        !important;
}

/* Inner grid columns inside page-content must not add extra side padding */
.lx-page-content > .lx-g1,
.lx-page-content > .lx-g1-f,
.lx-stats-bloc   > .lx-g1 {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* ── Tablet ≤1199px ── */
@media (max-width: 1199px) {
    .lx-page-content,
    .lx-stats-bloc,
    .lx-card {
        padding: 18px 20px !important;
    }
}

/* ── Small tablet ≤1023px ── */
@media (max-width: 1023px) {
    .lx-page-content,
    .lx-stats-bloc,
    .lx-card {
        padding:       14px 16px !important;
        margin-bottom: 16px      !important;
        border-radius: var(--radius) !important;
    }
}

/* ── Mobile ≤767px ── */
@media (max-width: 767px) {
    .lx-page-content,
    .lx-stats-bloc,
    .lx-card {
        padding:       12px 14px !important;
        margin-bottom: 12px      !important;
        border-radius: var(--radius-sm) !important;
    }
    /* Page section title inside card */
    .lx-page-content h3,
    .lx-stats-bloc   h3 {
        font-size:     14px !important;
        margin-bottom: 10px !important;
    }
    /* Keyword / filter bar inside card */
    .lx-page-content .lx-keyword,
    .lx-page-content .lx-add-form {
        padding: 0 0 10px !important;
    }
}

/* ── Small mobile ≤576px ── */
@media (max-width: 576px) {
    .lx-page-content,
    .lx-stats-bloc,
    .lx-card {
        padding:       10px 12px !important;
        margin-bottom: 10px      !important;
        border-radius: var(--radius-sm) !important;
    }
}

/* ── Extra-small ≤479px ── */
@media (max-width: 479px) {
    .lx-page-content,
    .lx-stats-bloc,
    .lx-card {
        padding:       8px 10px !important;
        margin-bottom: 8px      !important;
    }
}

/* ══════════════════════════════════════════════
   30. CONFIRMATION PAGE — TARGETED FIXES
══════════════════════════════════════════════ */

/* ── Fix 1: Filter bar — wrap properly, never overflow ── */
.lx-keyword {
    display:   flex      !important;   /* block-level (not inline-flex) */
    flex-wrap: wrap      !important;
    gap:       8px       !important;
    width:     100%      !important;   /* fill parent so wrapping triggers */
    padding:   0 0 12px  !important;
    float:     none      !important;
    box-sizing: border-box !important;
    overflow-x: hidden   !important;   /* never let the bar itself scroll */
}

/* Each label item: shrinkable, base size from content */
.lx-keyword > label,
.lx-keyword > .lx-advanced-select {
    flex:       0 1 auto !important;
    min-width:  0        !important;   /* allow shrinking below min-content */
    max-width:  100%     !important;
}

/* Inputs & selects inside filter bar */
.lx-keyword label input[type="text"],
.lx-keyword label input[type="date"],
.lx-keyword label select {
    height:    36px   !important;
    padding:   0 10px !important;
    width:     100%   !important;      /* fill the label */
    min-width: 120px  !important;      /* was 150px — allows more per row */
    max-width: 200px  !important;
    box-sizing: border-box !important;
}

/* First label (keyword text search) gets a bit more space */
.lx-keyword > label:first-child input[type="text"] {
    min-width: 150px !important;
}

/* On tablet ≤1023px: reduce further */
@media (max-width: 1023px) {
    .lx-keyword label input[type="text"],
    .lx-keyword label input[type="date"],
    .lx-keyword label select {
        min-width: 100px !important;
        max-width: 180px !important;
    }
}

/* On mobile ≤767px: go full width per item */
@media (max-width: 767px) {
    .lx-keyword > label,
    .lx-keyword > .lx-advanced-select {
        width: 100% !important;
        flex:  1 1 100% !important;
    }
    .lx-keyword label input[type="text"],
    .lx-keyword label input[type="date"],
    .lx-keyword label select {
        min-width: 0   !important;
        max-width: none !important;
        width:     100% !important;
    }
}

/* ── Fix 2: "Appliquer" / bulk-action button — force violet ── */
.lx-action-bulk a,
.lx-action-bulk a:link,
.lx-action-bulk a:visited {
    background: var(--primary) !important;
    color:      #fff           !important;
}
.lx-action-bulk a:hover,
.lx-action-bulk:hover a {
    background: var(--primary-dark) !important;
    color:      #fff                !important;
}
/* Also handle input[type=submit] bulk buttons */
.lx-action-bulk input[type="submit"],
.lx-action-bulk button {
    background: var(--primary) !important;
    color:      #fff           !important;
    border:     none           !important;
    cursor:     pointer        !important;
}

/* Bulk action bar layout */
.lx-action-bulk {
    display:     inline-flex !important;
    align-items: center      !important;
    flex-wrap:   wrap        !important;
    gap:         6px         !important;
    margin:      8px 8px 0 0 !important;
    padding:     0           !important;
    float:       none        !important;
}

/* ── Fix 3: Hide the repeated footer header row ── */
/* Tables generate a second <tr class="lx-first-tr"> at the bottom;
   target any lx-first-tr that has a sibling lx-first-tr before it */
.lx-table table tr.lx-first-tr ~ tr.lx-first-tr,
.lx-table-commands table tr.lx-first-tr ~ tr.lx-first-tr,
[class*="lx-table-"] table tr.lx-first-tr ~ tr.lx-first-tr {
    display: none !important;
}

/* ── Fix 4: lx-add-form buttons bar — wrap nicely ── */
.lx-add-form {
    display:     flex       !important;
    flex-wrap:   wrap       !important;
    gap:         6px        !important;
    align-items: center     !important;
    padding:     0 0 10px   !important;
    float:       none       !important;
}

/* ── Fix 5: Quick-filter state badge tags ── */
.lx-quick-filter {
    display:     flex       !important;
    flex-wrap:   wrap       !important;
    gap:         6px        !important;
    padding:     0 0 10px   !important;
}
.lx-quick-filter a {
    display:       inline-flex  !important;
    align-items:   center       !important;
    padding:       4px 10px     !important;
    border-radius: var(--radius-sm) !important;
    font-size:     12px         !important;
    font-weight:   600          !important;
    color:         #fff         !important;
    white-space:   nowrap       !important;
    transition:    opacity 0.15s !important;
}
.lx-quick-filter a:hover { opacity: 0.85 !important; }

/* ══════════════════════════════════════════════
   DARK MODE — LEGACY OVERRIDE BLOCK
   Kills all hardcoded #FFFFFF / #F8F8F8 / #EDEBE8
   coming from main_style.php
══════════════════════════════════════════════ */

/* ── Body & wrapper ── */
body, .lx-wrapper { background: var(--bg-body) !important; color: var(--text-main) !important; }

/* ── Header ── */
.lx-header {
    background: var(--bg-card) !important;
    box-shadow: 0 1px 0 var(--border) !important;
    border-radius: 0 !important;
}

/* ── Main content panels ── */
.lx-page-content,
.lx-stats-bloc,
.lx-kpi-card,
.lx-data-list,
.lx-log-history,
.lx-overall-progress {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
    color: var(--text-main) !important;
}

/* ── Panel sub-headers ── */
.lx-data-list > h3,
.lx-log-history h3,
.substractreturn #substractreturnform p {
    background: var(--gray-50) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

/* ── Tables ── */
.lx-table table,
.lx-table-commands table {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}
.lx-table table tr td,
.lx-table-commands table tr td {
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}
.lx-table table tr:nth-child(2n+1),
.lx-table-commands table tr:nth-child(2n+1) {
    background: var(--gray-50) !important;
}
.lx-table table tr:first-child td,
.lx-table table tr.lx-first-tr td,
.lx-table-commands table tr:first-child td {
    background: var(--gray-100) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}
.lx-stats-bloc table tr:nth-child(2n+2) {
    background: var(--gray-50) !important;
}
.lx-stats-bloc table td { border-color: var(--border) !important; }

/* ── Popup / edit modals ── */
.lx-command-edit-inside,
.lx-tracking-edit-inside,
.lx-delete-popup-inside,
.lx-popup-inside > div,
.lx-popup-content {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}
.lx-command-edit-inside > a,
.lx-tracking-edit-inside > a { color: var(--text-muted) !important; }

/* ── Account settings dropdown ── */
.lx-account-settings {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-dropdown) !important;
    border: 1px solid var(--border) !important;
}
.lx-account-settings div {
    background: var(--gray-50) !important;
    border-color: var(--border) !important;
}
.lx-account-settings div strong { color: var(--text-muted) !important; }
.lx-account-settings a { color: var(--text-secondary) !important; border-color: var(--border) !important; }
.lx-account-settings a:hover { background: var(--gray-100) !important; color: var(--text-main) !important; }

/* ── Notifications dropdown ── */
.lx-notifications {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-dropdown) !important;
    border: 1px solid var(--border) !important;
}
.lx-notifications-item {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
.lx-notifications-item a { color: var(--text-secondary) !important; }
.lx-notifications-item a p { color: var(--text-muted) !important; }

/* ── Autocomplete dropdown ── */
.lx-autocomplete {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-dropdown) !important;
}
.lx-autocomplete a { background: var(--bg-card) !important; color: var(--text-secondary) !important; }
.lx-autocomplete a:hover { background: var(--gray-100) !important; color: var(--text-main) !important; }

/* ── Advanced select widget ── */
.lx-advanced-select > input[readonly] { background: var(--bg-card) !important; color: var(--text-main) !important; }
.lx-advanced-select > i { background: var(--bg-card) !important; color: var(--text-muted) !important; }

/* ── File importer drop zone ── */
.lx-importer {
    background: var(--gray-50) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

/* ── Media library ── */
.lx-medias-library { background: var(--bg-body) !important; }
.lx-medias-item img,
.lx-medias-library-item img { background: var(--gray-50) !important; border-color: var(--border) !important; }

/* ── Tab / filter links in stats blocs ── */
.lx-stats-bloc ul li a {
    background: var(--gray-100) !important;
    color: var(--text-secondary) !important;
}
.lx-stats-bloc ul li a.active {
    background: var(--primary) !important;
    color: var(--primary-text) !important;
}

/* ── Generic dark text fix (common legacy colors) ── */
.lx-kpi-value { color: var(--text-main)  !important; }
.lx-kpi-label { color: var(--text-muted) !important; }

/* ── Borders throughout ── */
.lx-data-list,
.lx-stats-bloc,
.lx-page-content { border-color: var(--border) !important; }

/* ── Log list ── */
.lx-log-list ul li { border-color: var(--border) !important; color: var(--text-secondary) !important; }
.lx-log-list ul li > ins { color: var(--text-main) !important; }
.lx-log-list ul li del { color: var(--text-muted) !important; }

/* ── Custom checkmark (general_style.css) ── */
.checkmark { background: var(--gray-100) !important; border-color: var(--border) !important; }
label:hover input ~ .checkmark { background: var(--gray-200) !important; }
label input:checked ~ .checkmark { background: var(--primary) !important; border-color: var(--primary) !important; }

/* ── Submenu inside (legacy lx-submenu) ── */
.lx-submenu,
.lx-main-leftside .lx-submenu {
    background: var(--sidebar-bg) !important;
    border-color: var(--sidebar-border) !important;
}

/* ── Any remaining white inline bg on common wrappers ── */
.lx-main-content > div { color: var(--text-main) !important; }
table th { background: var(--bg-card) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }
table td { border-color: var(--border) !important; }
table tr:hover td { background: var(--gray-50) !important; }

/* ══════════════════════════════════════════════
   TEXT CONTRAST — DARK MODE
   Override hardcoded #242424 / #858585 / #828282
   from main_style.php that are invisible on dark bg
══════════════════════════════════════════════ */

/* Page header titles and sub-labels */
.lx-page-header h2 { color: var(--text-main) !important; }
.lx-page-header p  { color: var(--text-muted) !important; }

/* Table cell text (hardcoded #858585 / #242424 in main_style.php) */
.lx-table table tr td             { color: var(--text-secondary) !important; }
.lx-table table tr td span        { color: var(--text-main) !important; }
.lx-table table tr td a           { color: var(--text-secondary) !important; }
.lx-table table tr td > a         { color: var(--primary) !important; }
.lx-table table tr:first-child td { color: var(--text-muted) !important; }
.lx-table table tr.lx-first-tr td { color: var(--text-muted) !important; }

/* Data list */
.lx-data-list > h3              { color: var(--text-muted) !important; background: var(--gray-50) !important; border-color: var(--border) !important; }
.lx-data-list-content ul li     { border-color: var(--border) !important; color: var(--text-secondary) !important; }
.lx-data-list-content ul li a   { color: var(--primary) !important; }

/* Sub-menu links (#b7bfda — invisible in light, keep readable in dark) */
.lx-main-menu ul ul li a { color: var(--sidebar-sub-text) !important; }

/* Sidebar chevron icon */
.lx-main-menu ul li > i.fa-angle-down { color: var(--sidebar-text) !important; }

/* Add-form labels and headings */
.lx-add-form h3          { color: var(--text-main) !important; }
.lx-add-form label span  { color: var(--text-secondary) !important; }
.lx-textfield span       { color: var(--text-secondary) !important; }

/* Pagination */
.lx-pagination ul li span { color: var(--text-main) !important; }
.lx-pagination ul li a    { color: var(--text-secondary) !important; border-color: var(--border) !important; }
.lx-pagination ul li a.previous,
.lx-pagination ul li a.next   { border-color: var(--primary) !important; color: var(--primary) !important; }
.lx-pagination ul li a.disabled { border-color: var(--border) !important; color: var(--text-muted) !important; }

/* Trash / action buttons */
.lx-table a.lx-trash,
.lx-table > a {
    background: var(--bg-hover) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}
.lx-table a.lx-trash:hover,
.lx-table > a:hover { background: var(--gray-100) !important; color: var(--text-secondary) !important; }

/* KPI value (font hardcoded to #242424 in main_style.php) — handled above */

/* Image picker */
.lx-image-picker       { background: var(--bg-hover) !important; border-color: var(--border) !important; }
.lx-image-picker a     { color: var(--text-muted) !important; border-color: var(--border) !important; }
.lx-delete-image       { background: var(--bg-hover) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }

/* Form error / validation text */
.lx-textfield ins      { color: var(--danger) !important; }
.lx-login-error        { color: var(--danger) !important; border-color: var(--danger) !important; }

/* Mobile menu icon */
.lx-mobile-menu-hide   { color: var(--sidebar-text) !important; }

/* General body text that leaks through */
p, span, label, li, dt, dd { color: inherit; }
h1, h2, h3, h4, h5, h6     { color: var(--text-main); }

/* ── Input/select overrides for dark bg ── */
input, select, textarea {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}
select option { background: var(--bg-card) !important; color: var(--text-main) !important; }

/* ── Date-picker inputs (inline style="background:white/fff") — global override ── */
input[readonly][style*="cursor:pointer"] {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* ── Scrollbar ── */
.lx-main-leftside::-webkit-scrollbar-track { background: var(--sidebar-bg) !important; }
.lx-main-leftside:hover::-webkit-scrollbar-thumb { background: var(--primary-ring) !important; }

/* ══════════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════════ */
.lx-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.lx-theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
}
/* Sun = visible in dark (to switch to light), Moon = visible in light (to switch to dark) */
html[data-theme="dark"]  .lx-icon-moon { display: none !important; }
html[data-theme="light"] .lx-icon-sun  { display: none !important; }
/* Fallback if no data-theme set yet — show moon (default is light) */
:not([data-theme]) .lx-icon-sun { display: none !important; }

/* ══════════════════════════════════════════════
   BALANCE BADGE (navbar)
══════════════════════════════════════════════ */
.lx-balance-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 5px 12px;
    font-size: 12px;
    white-space: nowrap;
}
.lx-balance-badge .lx-balance-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.lx-balance-badge .lx-balance-value {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lx-balance-badge .lx-balance-value.is-positive { color: var(--success) !important; }
.lx-balance-badge .lx-balance-value.is-negative { color: var(--danger)  !important; }

/* default (light) — balance badge: soft green tint */
.lx-balance-badge { background: #F0FDF4; border-color: #BBF7D0; }
/* dark mode — override back to neutral card */
html[data-theme="dark"] .lx-balance-badge { background: var(--bg-card); border-color: var(--border); }

/* ══════════════════════════════════════════════
   LIGHT MODE — COMPONENT FIXES
   Override anything that uses hardcoded dark colors
══════════════════════════════════════════════ */

/* Header */
html[data-theme="light"] .lx-header {
    background: #FFFFFF !important;
    box-shadow: 0 1px 0 #E5E7EB !important;
}

/* Body / wrapper */
html[data-theme="light"] body,
html[data-theme="light"] .lx-wrapper { background: var(--bg-body) !important; color: var(--text-main) !important; }

/* Cards and content areas */
html[data-theme="light"] .lx-page-content,
html[data-theme="light"] .lx-stats-bloc,
html[data-theme="light"] .lx-kpi-card,
html[data-theme="light"] .lx-data-list,
html[data-theme="light"] .lx-log-history,
html[data-theme="light"] .lx-overall-progress {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-main) !important;
}

/* Tables */
html[data-theme="light"] .lx-table table,
html[data-theme="light"] .lx-table-commands table { background: var(--bg-card) !important; border-color: var(--border) !important; }
html[data-theme="light"] .lx-table table tr:nth-child(2n+1) { background: var(--gray-50) !important; }
html[data-theme="light"] .lx-table table tr:first-child td,
html[data-theme="light"] .lx-table table tr.lx-first-tr td { background: var(--gray-100) !important; }
html[data-theme="light"] table th { background: var(--gray-50) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }
html[data-theme="light"] table td { border-color: var(--border) !important; color: var(--text-main) !important; }
html[data-theme="light"] table tr:hover td { background: var(--gray-100) !important; }

/* Inputs */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #FFFFFF !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}
html[data-theme="light"] select option { background: #FFFFFF !important; color: var(--text-main) !important; }
html[data-theme="light"] input[readonly][style*="cursor:pointer"] { background: #FFFFFF !important; }

/* Dropdowns */
html[data-theme="light"] .lx-account-settings,
html[data-theme="light"] .lx-notifications {
    background: #FFFFFF !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .lx-account-settings div { background: var(--gray-50) !important; }
html[data-theme="light"] .lx-account-settings a,
html[data-theme="light"] .lx-notifications-item a { color: var(--text-secondary) !important; }
html[data-theme="light"] .lx-account-settings a:hover { background: var(--gray-100) !important; color: var(--text-main) !important; }
html[data-theme="light"] .lx-autocomplete {
    background: #FFFFFF !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .lx-autocomplete a { background: #FFFFFF !important; color: var(--text-secondary) !important; }
html[data-theme="light"] .lx-autocomplete a:hover { background: var(--gray-50) !important; }

/* Sidebar active item — light uses forest green, white text */
html[data-theme="light"] .lx-main-menu ul li > a.active,
html[data-theme="light"] .lx-main-menu ul li.is-active-item > a {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}
html[data-theme="light"] .lx-main-menu ul li > a.active i,
html[data-theme="light"] .lx-main-menu ul li > a.active svg,
html[data-theme="light"] .lx-main-menu ul li > a.active span,
html[data-theme="light"] .lx-main-menu ul li.is-active-item > a > i,
html[data-theme="light"] .lx-main-menu ul li.is-active-item > a > svg,
html[data-theme="light"] .lx-main-menu ul li.is-active-item > a > span { color: #FFFFFF !important; }
html[data-theme="light"] .lx-main-menu ul li.is-active-item > i.fa-angle-down { color: rgba(22,163,74,0.7) !important; }

/* Command/tracking edit panels */
html[data-theme="light"] .lx-command-edit-inside,
html[data-theme="light"] .lx-tracking-edit-inside { background: #FFFFFF !important; border-color: var(--border) !important; }

/* Checkboxes */
html[data-theme="light"] .checkmark { background: #FFFFFF !important; border-color: var(--border) !important; }
html[data-theme="light"] label:hover input ~ .checkmark { background: var(--gray-100) !important; }
html[data-theme="light"] label input:checked ~ .checkmark { background: var(--primary) !important; border-color: var(--primary) !important; }

/* Submenu */
html[data-theme="light"] .lx-submenu,
html[data-theme="light"] .lx-main-leftside .lx-submenu { background: #E8F5E9 !important; border-color: rgba(22,163,74,0.15) !important; }

/* Stats bloc filter tabs */
html[data-theme="light"] .lx-stats-bloc ul li a {
    background: var(--gray-100) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="light"] .lx-stats-bloc ul li a.active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}

/* Role badge */
html[data-theme="light"] .lx-role-badge {
    background: rgba(22,163,74,0.12) !important;
    color: #15803D !important;
}

/* KPI value text */
html[data-theme="light"] .lx-kpi-value { color: var(--text-main) !important; }
html[data-theme="light"] .lx-kpi-label { color: var(--text-muted) !important; }

/* Breadcrumb */
html[data-theme="light"] .lx-breadcrumb span,
html[data-theme="light"] .lx-breadcrumb strong { color: var(--text-main) !important; }

/* User profile block */
html[data-theme="light"] .lx-user-info strong { color: var(--text-main) !important; }
html[data-theme="light"] .lx-user-id-btn { background: var(--gray-100) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }

/* Header icon buttons */
html[data-theme="light"] .lx-header-icon-btn { color: var(--text-muted) !important; }
html[data-theme="light"] .lx-header-icon-btn:hover { background: var(--gray-100) !important; color: var(--text-main) !important; }

/* Notification count badge */
html[data-theme="light"] .lx-notif-count { background: var(--primary) !important; color: #FFFFFF !important; }

/* ══════════════════════════════════════════════
   TEXT CONTRAST — LIGHT MODE
   main_style.php text colors are already dark in
   light mode, but some need brightening for readability
══════════════════════════════════════════════ */

/* Page header — #495057 is OK in light, but ensure it uses the token */
html[data-theme="light"] .lx-page-header h2 { color: var(--text-main) !important; }
html[data-theme="light"] .lx-page-header p  { color: var(--text-muted) !important; }

/* Table cells — #858585 is readable on white, keep as-is but ensure links stand out */
html[data-theme="light"] .lx-table table tr td             { color: var(--text-secondary) !important; }
html[data-theme="light"] .lx-table table tr td span        { color: var(--text-main) !important; }
html[data-theme="light"] .lx-table table tr td a           { color: var(--text-secondary) !important; }
html[data-theme="light"] .lx-table table tr td > a         { color: var(--primary) !important; }
html[data-theme="light"] .lx-table table tr:first-child td { color: var(--text-main) !important; background: var(--gray-100) !important; }
html[data-theme="light"] .lx-table table tr.lx-first-tr td { color: var(--text-main) !important; background: var(--gray-100) !important; }

/* Sub-menu links — #b7bfda is too light on the light sidebar */
html[data-theme="light"] .lx-main-menu ul ul li a          { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] .lx-main-menu ul li > i.fa-angle-down { color: rgba(0,0,0,0.4) !important; }
html[data-theme="light"] .lx-main-menu ul li a             { color: var(--sidebar-text) !important; }
html[data-theme="light"] .lx-main-menu ul li a i,
html[data-theme="light"] .lx-main-menu ul li a svg         { color: var(--sidebar-icon) !important; }

/* Pagination */
html[data-theme="light"] .lx-pagination ul li span         { color: var(--text-main) !important; }
html[data-theme="light"] .lx-pagination ul li a            { color: var(--text-secondary) !important; border-color: var(--border) !important; }
html[data-theme="light"] .lx-pagination ul li a.previous,
html[data-theme="light"] .lx-pagination ul li a.next       { border-color: var(--primary) !important; color: var(--primary) !important; }

/* Add-form labels */
html[data-theme="light"] .lx-add-form h3         { color: var(--text-main) !important; }
html[data-theme="light"] .lx-textfield span      { color: var(--text-secondary) !important; }

/* Trash / action buttons */
html[data-theme="light"] .lx-table a.lx-trash,
html[data-theme="light"] .lx-table > a {
    background: var(--gray-50) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

/* Data list */
html[data-theme="light"] .lx-data-list > h3              { color: var(--text-muted) !important; background: var(--gray-50) !important; border-color: var(--border) !important; }
html[data-theme="light"] .lx-data-list-content ul li     { border-color: var(--border) !important; color: var(--text-secondary) !important; }

/* Image picker */
html[data-theme="light"] .lx-image-picker     { background: var(--gray-50) !important; border-color: var(--border) !important; }
html[data-theme="light"] .lx-image-picker a   { color: var(--gray-400) !important; border-color: var(--gray-300) !important; }

/* Mobile sidebar close icon */
html[data-theme="light"] .lx-mobile-menu-hide { color: var(--sidebar-text) !important; }

/* General heading text */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 { color: var(--text-main) !important; }

/* Sidebar non-active link text */
html[data-theme="light"] .lx-logo a { color: var(--primary) !important; }

/* Balance badge in light mode: stronger contrast */
html[data-theme="light"] .lx-balance-badge .lx-balance-label { color: var(--text-muted) !important; }

/* Page content paragraph text */
html[data-theme="light"] .lx-page-content p,
html[data-theme="light"] .lx-stats-content p { color: var(--text-secondary) !important; }

/* ══════════════════════════════════════════════
   SELLER PAGE — SPECIFIC FIXES (both modes)
══════════════════════════════════════════════ */

/* lx-kpi-card: value and label readable in both modes */
.lx-kpi-card .lx-kpi-value  { color: var(--text-main)  !important; }
.lx-kpi-card .lx-kpi-label  { color: var(--text-muted) !important; }
.lx-kpi-card .lx-kpi-info > strong { color: var(--text-main) !important; }

/* Stats page section divider label */
.stat-section-label       { color: var(--text-muted) !important; }
.stat-section-label span  { background: var(--border) !important; }

/* index.php seller mediabuyer KPI cards (inline hardcoded) */
/* .lx-kpi-card uses var(--bg-card) from the dark override block, good */
/* The value text with inline color:# for profit/balance still shows PHP-determined colors — correct */

/* sourcing_view.php / sourcing_create.php: form labels */
html[data-theme="dark"]  .lx-sourcing-form label { color: var(--text-secondary) !important; }
html[data-theme="light"] .lx-sourcing-form label { color: var(--text-secondary) !important; }

/* mbinvoices / mbfactures — filter toolbar text */
.fac-table-toolbar { background: var(--bg-card) !important; border-color: var(--border) !important; }
.fac-table-toolbar span,
.fac-table-toolbar label { color: var(--text-muted) !important; }

/* lx-stats-header title text (used on all pages) */
.lx-stats-header-title h1 { color: var(--text-main)  !important; }
.lx-stats-header-title p  { color: var(--text-muted) !important; }