/**
 * ===================================================================
 * Brand Identity Design System - Z4U Smart (زد فور يو سمارت)
 * Theme: Emerald & Warm Gold Fintech
 * ===================================================================
 */

:root {
    /* ── Entry & Upsert Suite Aliases (Centralized) ── */
    --entry-brand-primary: var(--brand-emerald, #0E5B46);
    --entry-brand-primary-hover: var(--brand-emerald-dark, #0A4333);
    --entry-brand-primary-subtle: rgba(14, 91, 70, 0.08);
    --entry-brand-gold: var(--brand-gold, #D4AF7C);
    --entry-brand-gold-subtle: rgba(212, 175, 124, 0.15);
    --entry-border-color: #E2E8F0;
    --entry-card-bg: #FFFFFF;

    --z4u-primary: var(--brand-emerald, #0E5B46);
    --z4u-primary-dark: var(--brand-emerald-dark, #08382B);
    --z4u-primary-light: #E8F5F1;
    --z4u-primary-subtle: rgba(14, 91, 70, 0.08);
    --z4u-gold: var(--brand-gold, #D4AF7C);
    --z4u-gold-hover: #b89360;
    --z4u-border: #E0E6E3;
    --z4u-bg-card: #FFFFFF;
    --z4u-text-muted: #6C757D;

    /* ── Primary Palette (Emerald Pine) ── */
    --brand-emerald: #0E5B46;
    --brand-emerald-dark: #0A4333;
    --brand-emerald-light: #147359;
    --brand-emerald-subtle: #E8F5F1;
    --brand-emerald-glow: rgba(14, 91, 70, 0.18);
    --brand-on-emerald: #FFFFFF;

    /* ── Secondary Palette (Warm Ochre Gold) ── */
    --brand-gold: #D4AF7C;
    --brand-gold-light: #E8CA9D;
    --brand-gold-dark: #9A723E;
    --brand-sand: #F6E9D7;
    --brand-sand-subtle: #FAF4EB;

    /* ── Neutral & Canvas Surfaces ── */
    --brand-canvas: #FAF8F5;
    --brand-canvas-alt: #F3F4F6;
    --brand-surface: #FFFFFF;
    --brand-charcoal: #1F2937;
    --brand-charcoal-light: #374151;
    --brand-muted: #6B7280;
    --brand-subtle: #9CA3AF;
    --brand-border: #E5E7EB;
    --brand-border-warm: rgba(212, 175, 124, 0.28);

    /* ── Semantic System ── */
    --brand-success: #0E5B46;
    --brand-warning: #D4AF7C;
    --brand-danger: #D9383A;
    --brand-info: #2563EB;

    /* ── Typography Engines ── */
    --font-tajawal: 'Tajawal', 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-cairo: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
    --font-inter: 'Inter', system-ui, -apple-system, sans-serif;

    /* ── Shadows & Depth ── */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-card: 0 20px 40px -15px rgba(14, 91, 70, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.04);
    --shadow-float: 0 24px 48px -12px rgba(14, 91, 70, 0.16);
    --shadow-glow: 0 10px 25px -5px rgba(14, 91, 70, 0.28);
    --shadow-input-focus: 0 0 0 3px rgba(14, 91, 70, 0.12);

    /* ── Shapes & Radius ── */
    --radius-sm: 0.375rem; /* 6px */
    --radius-md: 0.5rem;   /* 8px */
    --radius-lg: 0.75rem;  /* 12px */
    --radius-xl: 1rem;     /* 16px */
    --radius-2xl: 1.25rem; /* 20px */
    --radius-full: 9999px;
}

/* ── Typography Defaults: Tajawal First ── */
html, body,
h1, h2, h3, h4, h5, h6,
p, span:not(.bx):not(.fa):not(.fas):not(.far):not(.fab):not(.bi):not([class^="bx-"]):not([class^="fa-"]):not([class^="bi-"]),
a:not(.bx):not(.fa),
button:not(.bx):not(.fa),
input, select, textarea,
.form-control, .form-select, .btn,
.menu-inner, .menu-item, .menu-link,
.hesba-navbar, .hesba-sidebar-brand,
table, th, td {
    font-family: var(--font-tajawal) !important;
}

body {
    color: var(--brand-charcoal);
    background-color: var(--brand-canvas);
}

.font-num, .font-inter {
    font-family: var(--font-inter), var(--font-tajawal) !important;
}

/* ── Delicate Brand Geometric Background ── */
.brand-pattern-bg {
    background-color: var(--brand-canvas);
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(212, 175, 124, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(20, 115, 89, 0.15) 0%, transparent 50%),
        repeating-linear-gradient(45deg, rgba(212, 175, 124, 0.025) 0, rgba(212, 175, 124, 0.025) 1px, transparent 0, transparent 40px);
}

/* ── Card Elevations ── */
.brand-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ── Button Hierarchy ── */
.btn-brand-primary {
    background-color: var(--brand-emerald);
    color: #FFFFFF;
    font-weight: 700;
    font-family: var(--font-cairo);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-glow);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.btn-brand-primary:hover {
    background-color: var(--brand-emerald-dark);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -4px rgba(14, 91, 70, 0.35);
}

.btn-brand-primary:active {
    transform: scale(0.99);
}

.btn-brand-secondary {
    background-color: var(--brand-gold);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: var(--radius-lg);
    padding: 0.65rem 1.25rem;
    border: none;
    transition: all 0.2s ease;
}

.btn-brand-secondary:hover {
    background-color: var(--brand-gold-dark);
    color: #FFFFFF;
}

/* ── Form Inputs ── */
.brand-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.brand-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    background-color: rgba(249, 250, 251, 0.6);
    color: var(--brand-charcoal);
    font-size: 0.875rem;
    transition: all 0.2s ease;
    outline: none;
}

.brand-input:hover {
    background-color: #FFFFFF;
    border-color: #D1D5DB;
}

.brand-input:focus {
    background-color: #FFFFFF;
    border-color: var(--brand-emerald);
    box-shadow: var(--shadow-input-focus);
}

.brand-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-subtle);
    display: flex;
    align-items: center;
    pointer-events: none;
}

html[dir="rtl"] .brand-input-icon-start {
    right: 0.875rem;
}
html[dir="rtl"] .brand-input-icon-end {
    left: 0.875rem;
}

html[dir="ltr"] .brand-input-icon-start {
    left: 0.875rem;
}
html[dir="ltr"] .brand-input-icon-end {
    right: 0.875rem;
}

html[dir="rtl"] .brand-input-with-icon-start {
    padding-right: 2.75rem;
}
html[dir="rtl"] .brand-input-with-icon-end {
    padding-left: 2.75rem;
}

html[dir="ltr"] .brand-input-with-icon-start {
    padding-left: 2.75rem;
}
html[dir="ltr"] .brand-input-with-icon-end {
    padding-right: 2.75rem;
}

/* ── Badges & Status ── */
.badge-brand-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--brand-border);
    font-size: 0.75rem;
    color: var(--brand-charcoal-light);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(4px);
}

.pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse 2s infinite;
}

/* ── Pulse Animation ── */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* ===================================================================
 * ── EXECUTIVE SIDEBAR (الـ Asidebar) - Deep Emerald & Gold Theme ──
 * =================================================================== */
#layout-menu.layout-menu {
    background: linear-gradient(180deg, #0E5B46 0%, #083C2E 100%) !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.16) !important;
    color: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.25s ease-in-out !important;
}

/* Ensure desktop sidebar is anchored below top navbar and NEVER overlaps it */
@media (min-width: 1200px) {
    #layout-menu.layout-menu,
    html.layout-menu-fixed #layout-menu,
    html.layout-menu-collapsed #layout-menu,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu,
    .layout-wrapper:not(.layout-horizontal) #layout-menu {
        top: 76px !important;
        height: calc(100vh - 76px) !important;
        max-height: calc(100vh - 76px) !important;
        z-index: 1040 !important;
    }
}

/* Sidebar Top Strip (Branch & Mobile Close - No Redundant Logo) */
.sidebar-top-strip {
    height: 46px;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.sidebar-branch-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.sidebar-pro-tag {
    font-size: 9px;
    font-weight: 800;
    background: rgba(212, 175, 124, 0.18);
    color: #D4AF7C;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    border: 1px solid rgba(212, 175, 124, 0.3);
}

.sidebar-mobile-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.sidebar-mobile-close-btn:hover {
    background: rgba(220, 53, 69, 0.25);
    color: #FF8080;
    border-color: rgba(220, 53, 69, 0.4);
}

/* Menu Inner List */
#layout-menu .menu-inner {
    padding: 0.5rem 0.6rem 2rem !important;
}

#layout-menu .menu-item {
    margin-bottom: 2px;
    position: relative;
}

/* Primary Menu Link / Toggle */
#layout-menu .menu-inner .menu-item > .menu-link,
#layout-menu .menu-inner .menu-item > .menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 38px;
    height: 38px;
    padding: 0.35rem 0.75rem !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border: none !important;
    position: relative;
    box-shadow: none !important;
}

#layout-menu .menu-inner .menu-item > .menu-link div,
#layout-menu .menu-inner .menu-item > .menu-toggle div {
    color: inherit !important;
    font-size: 0.835rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
}

/* Menu Icons: Crisp glyphs without heavy background boxes */
#layout-menu .menu-link .menu-icon,
#layout-menu .menu-toggle .menu-icon {
    font-size: 1.15rem !important;
    color: rgba(255, 255, 255, 0.65) !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transition: all 0.15s ease !important;
}

/* Menu Hover */
#layout-menu .menu-inner .menu-item > .menu-link:hover,
#layout-menu .menu-inner .menu-item > .menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #FFFFFF !important;
}

#layout-menu .menu-inner .menu-item > .menu-link:hover .menu-icon,
#layout-menu .menu-inner .menu-item > .menu-toggle:hover .menu-icon {
    color: #FFFFFF !important;
}

/* Open Parent Menu */
#layout-menu .menu-inner .open {
    background-color: transparent !important;
}

#layout-menu .menu-inner .menu-item.open > .menu-toggle {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
}

#layout-menu .menu-inner .menu-item.open > .menu-toggle .menu-icon {
    color: var(--brand-gold) !important;
}

/* Active Main Link (Sleek indicator line, NO curved corner border!) */
#layout-menu .menu-inner .menu-item.active > .menu-link,
#layout-menu .menu-inner .menu-item.active > .menu-toggle {
    background-color: rgba(212, 175, 124, 0.12) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    border: none !important;
}

#layout-menu .menu-inner .menu-item.active > .menu-link div,
#layout-menu .menu-inner .menu-item.active > .menu-toggle div {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

#layout-menu .menu-inner .menu-item.active > .menu-link .menu-icon,
#layout-menu .menu-inner .menu-item.active > .menu-toggle .menu-icon {
    color: var(--brand-gold) !important;
}

/* Floating straight vertical accent indicator on active item */
#layout-menu .menu-inner .menu-item.active > .menu-link::before,
#layout-menu .menu-inner .menu-item.active > .menu-toggle::before {
    content: "" !important;
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 3.5px;
    background-color: var(--brand-gold);
    border-radius: 4px;
    display: block !important;
}

html[dir="rtl"] #layout-menu .menu-inner .menu-item.active > .menu-link::before,
html[dir="rtl"] #layout-menu .menu-inner .menu-item.active > .menu-toggle::before {
    right: 0;
    left: auto;
}

html[dir="ltr"] #layout-menu .menu-inner .menu-item.active > .menu-link::before,
html[dir="ltr"] #layout-menu .menu-inner .menu-item.active > .menu-toggle::before {
    left: 0;
    right: auto;
}

/* Submenu Container (Clean indented tree list with subtle gold guide line) */
#layout-menu .menu-sub {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0.25rem 0 !important;
    margin: 2px 0 6px 0.85rem !important;
    border-inline-start: 1.5px solid rgba(212, 175, 124, 0.22) !important;
}

html[dir="rtl"] #layout-menu .menu-sub {
    margin: 2px 0.85rem 6px 0 !important;
}

/* Submenu Items */
#layout-menu .menu-sub .menu-item {
    margin-bottom: 2px;
}

#layout-menu .menu-sub .menu-item > .menu-link {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 7px !important;
    text-decoration: none !important;
    transition: all 0.16s ease !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
}

#layout-menu .menu-sub .menu-item > .menu-link div,
#layout-menu .menu-sub .menu-item > .menu-link div.fw-bold {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.835rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

#layout-menu .menu-sub .menu-item > .menu-link .menu-icon {
    font-size: 1.05rem !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin-inline-end: 0.5rem !important;
    color: rgba(212, 175, 124, 0.82) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    transition: transform 0.18s ease, color 0.18s ease !important;
    flex-shrink: 0 !important;
}

#layout-menu .menu-sub .menu-item > .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

#layout-menu .menu-sub .menu-item > .menu-link:hover div,
#layout-menu .menu-sub .menu-item > .menu-link:hover div.fw-bold {
    color: #FFFFFF !important;
}

#layout-menu .menu-sub .menu-item > .menu-link:hover .menu-icon {
    color: #FFFFFF !important;
    transform: scale(1.15) !important;
}

/* Active Submenu Item (Gold indicator border on inner tree line, NO weird dots) */
#layout-menu .menu-sub .menu-item.active > .menu-link {
    background-color: rgba(212, 175, 124, 0.16) !important;
    color: #FFFFFF !important;
    border-inline-start: 3px solid var(--brand-gold) !important;
    border-radius: 6px !important;
}

#layout-menu .menu-sub .menu-item.active > .menu-link div,
#layout-menu .menu-sub .menu-item.active > .menu-link div.fw-bold {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

#layout-menu .menu-sub .menu-item.active > .menu-link .menu-icon {
    color: var(--brand-gold) !important;
    transform: scale(1.08) !important;
}

/* Suppress pseudo-element dots on submenus (keeping menu-toggle chevron arrows intact) */
#layout-menu .menu-sub .menu-item > .menu-link::before,
#layout-menu .menu-sub .menu-item > .menu-link:not(.menu-toggle)::after,
#layout-menu .menu-sub .menu-item.active > .menu-link::before,
#layout-menu .menu-sub .menu-item.active > .menu-link:not(.menu-toggle)::after,
.bg-menu-theme .menu-sub .menu-item > .menu-link::before,
.bg-menu-theme .menu-sub .menu-item > .menu-link:not(.menu-toggle)::after,
.bg-menu-theme .menu-sub .menu-item.active > .menu-link::before,
.bg-menu-theme .menu-sub .menu-item.active > .menu-link:not(.menu-toggle)::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* ══ Nested Submenu Expand/Collapse Chevrons (قوائم فرعية داخل قوائم) ══ */
#layout-menu .menu-sub .menu-item > .menu-link.menu-toggle::after,
.bg-menu-theme .menu-sub .menu-item > .menu-link.menu-toggle::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 0.42em !important;
    height: 0.42em !important;
    border-style: solid !important;
    border-color: rgba(212, 175, 124, 0.85) !important;
    opacity: 1 !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
    z-index: 2 !important;
}

/* LTR Direction - Closed (Points Right) */
html[dir="ltr"] #layout-menu .menu-sub .menu-item > .menu-link.menu-toggle::after,
[dir="ltr"] .bg-menu-theme .menu-sub .menu-item > .menu-link.menu-toggle::after {
    right: 1.1rem !important;
    left: auto !important;
    border-width: 1.5px 1.5px 0 0 !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

/* LTR Direction - Open (Points Down) */
html[dir="ltr"] #layout-menu .menu-sub .menu-item.open:not(.menu-item-closing) > .menu-link.menu-toggle::after,
[dir="ltr"] .bg-menu-theme .menu-sub .menu-item.open:not(.menu-item-closing) > .menu-link.menu-toggle::after {
    transform: translateY(-50%) rotate(135deg) !important;
    border-color: var(--brand-gold, #D4AF7C) !important;
}

/* RTL Direction - Closed (Points Left) */
html[dir="rtl"] #layout-menu .menu-sub .menu-item > .menu-link.menu-toggle::after,
[dir="rtl"] .bg-menu-theme .menu-sub .menu-item > .menu-link.menu-toggle::after {
    left: 1.1rem !important;
    right: auto !important;
    border-width: 1.5px 0 0 1.5px !important;
    transform: translateY(-50%) rotate(-45deg) !important;
}

/* RTL Direction - Open (Points Down) */
html[dir="rtl"] #layout-menu .menu-sub .menu-item.open:not(.menu-item-closing) > .menu-link.menu-toggle::after,
[dir="rtl"] .bg-menu-theme .menu-sub .menu-item.open:not(.menu-item-closing) > .menu-link.menu-toggle::after {
    transform: translateY(-50%) rotate(-135deg) !important;
    border-color: var(--brand-gold, #D4AF7C) !important;
}

/* Hover state enhancement on nested submenu toggle */
#layout-menu .menu-sub .menu-item > .menu-link.menu-toggle:hover::after {
    border-color: #FFFFFF !important;
}

/* Level 3 Submenu Container & Styling Hierarchy */
#layout-menu .menu-sub .menu-sub {
    padding-inline-start: 0.35rem !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    margin: 0.15rem 0.35rem !important;
}

#layout-menu .menu-sub .menu-sub .menu-link {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    font-size: 0.88rem !important;
}

/* ══ Layout Page Offset Guarantees (Container Fix) ══ */
@media (min-width: 1200px) {
    html[dir="rtl"] .layout-page {
        padding-right: 16.25rem !important;
        padding-left: 0 !important;
        transition: padding-right 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    html[dir="rtl"].layout-menu-collapsed .layout-page {
        padding-right: 4.875rem !important;
        padding-left: 0 !important;
    }

    html[dir="ltr"] .layout-page {
        padding-left: 16.25rem !important;
        padding-right: 0 !important;
        transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    html[dir="ltr"].layout-menu-collapsed .layout-page {
        padding-left: 4.875rem !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 1199.98px) {
    html[dir="rtl"] .layout-page,
    html[dir="rtl"].layout-menu-collapsed .layout-page,
    html[dir="rtl"].layout-menu-expanded .layout-page,
    html[dir="ltr"] .layout-page,
    html[dir="ltr"].layout-menu-collapsed .layout-page,
    html[dir="ltr"].layout-menu-expanded .layout-page,
    html .layout-page,
    .layout-page {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide desktop collapse floating toggle button on mobile/tablet */
    .sidebar-collapse-btn {
        display: none !important;
    }
}

/* ══ Sidebar Collapse Toggle Button (Centered on border) ══ */
#layout-menu.layout-menu {
    overflow: visible !important;
}

.sidebar-collapse-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0E5B46;
    border: 2px solid #D4AF7C;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    color: #D4AF7C;
    font-size: 0.8rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html[dir="rtl"] .sidebar-collapse-btn {
    left: -14px;
    right: auto;
}

html[dir="ltr"] .sidebar-collapse-btn {
    right: -14px;
    left: auto;
}

.sidebar-collapse-btn:hover {
    background: #D4AF7C;
    color: #0E5B46;
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 4px 14px rgba(212, 175, 124, 0.4);
}

.sidebar-collapse-btn .collapse-arrow {
    transition: transform 0.3s ease;
}

html[dir="rtl"].layout-menu-collapsed .sidebar-collapse-btn .collapse-arrow {
    transform: rotate(180deg);
}

html[dir="ltr"].layout-menu-collapsed .sidebar-collapse-btn .collapse-arrow {
    transform: rotate(180deg);
}

/* ══ Clean Collapsed Sidebar Mode (Zero Text Overflow & Rock-solid Hover) - DESKTOP ONLY ══ */
@media (min-width: 1200px) {
    html.layout-menu-collapsed #layout-menu,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu,
    html[dir="rtl"].layout-menu-collapsed.layout-menu-hover #layout-menu,
    html[dir="ltr"].layout-menu-collapsed.layout-menu-hover #layout-menu {
        width: 4.875rem !important;
        min-width: 4.875rem !important;
        max-width: 4.875rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        padding-top: 0.75rem !important;
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12) !important;
    }

    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu .menu-inner > .menu-item {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 2px 0.5rem !important;
        margin: 4px 0 !important;
        position: relative !important;
    }

    html.layout-menu-collapsed #layout-menu .menu-item .menu-link,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu .menu-item .menu-link {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0.65rem 0 !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
        border-radius: 8px !important;
        background-color: transparent !important;
        cursor: pointer !important;
    }

    /* Icons in collapsed mode MUST ALWAYS be visible and centered */
    html.layout-menu-collapsed #layout-menu .menu-item .menu-link .menu-icon,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu .menu-item .menu-link .menu-icon,
    html.layout-menu-collapsed #layout-menu .menu-item:hover .menu-icon,
    html.layout-menu-collapsed #layout-menu .menu-link:hover .menu-icon,
    html.layout-menu-collapsed #layout-menu .menu-item:hover .menu-link .menu-icon {
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1.4rem !important;
        width: 28px !important;
        height: 28px !important;
        line-height: 1 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        float: none !important;
        transition: color 0.15s ease, transform 0.15s ease !important;
    }

    /* Active item in collapsed mode */
    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item.active > .menu-link {
        background-color: rgba(212, 175, 124, 0.14) !important;
    }
    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item.active .menu-icon,
    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item.active:hover .menu-icon {
        color: var(--brand-gold, #D4AF7C) !important;
    }
    html[dir="rtl"].layout-menu-collapsed #layout-menu .menu-inner > .menu-item.active::before {
        content: "";
        position: absolute;
        right: 2px;
        top: 18%;
        bottom: 18%;
        width: 3.5px;
        border-radius: 4px;
        background: var(--brand-gold, #D4AF7C);
    }
    html[dir="ltr"].layout-menu-collapsed #layout-menu .menu-inner > .menu-item.active::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 18%;
        bottom: 18%;
        width: 3.5px;
        border-radius: 4px;
        background: var(--brand-gold, #D4AF7C);
    }
    /* Prevent duplicate vertical bar indicator on menu-link in collapsed mode */
    html.layout-menu-collapsed #layout-menu .menu-inner .menu-item.active > .menu-link::before,
    html.layout-menu-collapsed #layout-menu .menu-inner .menu-item.active > .menu-toggle::before {
        display: none !important;
        content: none !important;
    }

    /* Hover state on inactive items in collapsed mode */
    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item:not(.active):hover > .menu-link {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item:not(.active):hover .menu-icon {
        color: #FFFFFF !important;
        transform: scale(1.08) !important;
    }

    /* Strictly hide text, badges, dots, and submenus in collapsed mode */
    html.layout-menu-collapsed #layout-menu .menu-item .menu-link > div,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu .menu-item .menu-link > div,
    html.layout-menu-collapsed #layout-menu .menu-item .menu-link .sidebar-active-dot,
    html.layout-menu-collapsed #layout-menu .menu-item.parent-menu > .menu-link::after,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu .menu-item.parent-menu > .menu-link::after,
    html.layout-menu-collapsed #layout-menu .sidebar-branch-name,
    html.layout-menu-collapsed #layout-menu .sidebar-pro-tag,
    html.layout-menu-collapsed #layout-menu .sidebar-mobile-close-btn,
    html.layout-menu-collapsed #layout-menu .sidebar-version-text,
    html.layout-menu-collapsed #layout-menu .sidebar-edition-badge,
    html.layout-menu-collapsed #layout-menu .sidebar-user-name,
    html.layout-menu-collapsed #layout-menu .sidebar-user-role,
    html.layout-menu-collapsed #layout-menu .menu-sub,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu .menu-sub {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    html.layout-menu-collapsed #layout-menu .sidebar-top-strip,
    html.layout-menu-collapsed #layout-menu .sidebar-bottom-profile {
        display: none !important;
    }
}

/* ══ Mobile Sidebar Drawer & Overlay (< 1200px) ══ */
.sidebar-mobile-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(11, 25, 20, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-mobile-overlay.active,
html.layout-menu-expanded .sidebar-mobile-overlay {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (max-width: 1199.98px) {
    #layout-menu,
    #layout-menu.layout-menu,
    html.layout-menu-collapsed #layout-menu,
    html.layout-menu-collapsed #layout-menu.layout-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 290px !important;
        min-width: 290px !important;
        max-width: 85vw !important;
        z-index: 100000 !important;
        background-color: var(--brand-dark-forest, #0B3B2D) !important;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.45) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s !important;
    }

    /* Closed State: off-canvas */
    html[dir="rtl"]:not(.layout-menu-expanded) #layout-menu,
    html[dir="rtl"]:not(.layout-menu-expanded) #layout-menu.layout-menu,
    html[dir="rtl"].layout-menu-collapsed:not(.layout-menu-expanded) #layout-menu,
    html[dir="rtl"].layout-menu-collapsed:not(.layout-menu-expanded) #layout-menu.layout-menu,
    html:not(.layout-menu-expanded) #layout-menu {
        right: 0 !important;
        left: auto !important;
        transform: translate3d(105%, 0, 0) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html[dir="ltr"]:not(.layout-menu-expanded) #layout-menu,
    html[dir="ltr"]:not(.layout-menu-expanded) #layout-menu.layout-menu,
    html[dir="ltr"].layout-menu-collapsed:not(.layout-menu-expanded) #layout-menu,
    html[dir="ltr"].layout-menu-collapsed:not(.layout-menu-expanded) #layout-menu.layout-menu {
        left: 0 !important;
        right: auto !important;
        transform: translate3d(-105%, 0, 0) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html.layout-menu-expanded #layout-menu,
    html.layout-menu-expanded #layout-menu.layout-menu,
    html[dir="rtl"].layout-menu-expanded #layout-menu,
    html[dir="rtl"].layout-menu-expanded #layout-menu.layout-menu,
    html[dir="ltr"].layout-menu-expanded #layout-menu,
    html[dir="ltr"].layout-menu-expanded #layout-menu.layout-menu,
    html.layout-menu-collapsed.layout-menu-expanded #layout-menu,
    html.layout-menu-collapsed.layout-menu-expanded #layout-menu.layout-menu {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #layout-menu .menu-inner,
    html.layout-menu-collapsed #layout-menu .menu-inner {
        width: 100% !important;
        padding: 0.5rem 0.75rem 2.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #layout-menu .menu-inner > .menu-item,
    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item {
        width: 100% !important;
        display: block !important;
        margin: 2px 0 !important;
        position: relative !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    #layout-menu .menu-item .menu-link,
    html.layout-menu-collapsed #layout-menu .menu-item .menu-link {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0.65rem 0.85rem !important;
        border-radius: 8px !important;
        text-align: start !important;
        justify-content: flex-start !important;
        color: rgba(255, 255, 255, 0.85) !important;
        background-color: transparent !important;
        cursor: pointer !important;
    }

    #layout-menu .menu-item .menu-link > div,
    html.layout-menu-collapsed #layout-menu .menu-item .menu-link > div {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        font-size: 0.88rem !important;
        font-weight: 500 !important;
        color: #FFFFFF !important;
        white-space: normal !important;
        overflow: visible !important;
        flex-grow: 1 !important;
    }

    #layout-menu .menu-item.parent-menu > .menu-link::after,
    html.layout-menu-collapsed #layout-menu .menu-item.parent-menu > .menu-link::after {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-inline-start: auto !important;
    }

    #layout-menu .menu-item .menu-link .menu-icon,
    html.layout-menu-collapsed #layout-menu .menu-item .menu-link .menu-icon {
        margin-inline-end: 0.75rem !important;
        margin-inline-start: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        width: 24px !important;
        height: 24px !important;
        color: rgba(255, 255, 255, 0.75) !important;
        flex-shrink: 0 !important;
        float: none !important;
    }

    #layout-menu .menu-inner > .menu-item.active > .menu-link,
    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item.active > .menu-link {
        background: rgba(212, 175, 124, 0.16) !important;
        color: #D4AF7C !important;
    }

    #layout-menu .menu-inner > .menu-item.active > .menu-link .menu-icon,
    html.layout-menu-collapsed #layout-menu .menu-inner > .menu-item.active > .menu-link .menu-icon {
        color: #D4AF7C !important;
    }

    #layout-menu .menu-sub,
    html.layout-menu-collapsed #layout-menu .menu-sub {
        width: 100% !important;
        padding-inline-start: 1rem !important;
    }

    #layout-menu .menu-item.open > .menu-sub,
    html.layout-menu-collapsed #layout-menu .menu-item.open > .menu-sub {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    #layout-menu .menu-item:not(.open) > .menu-sub,
    html.layout-menu-collapsed #layout-menu .menu-item:not(.open) > .menu-sub {
        display: none !important;
    }

    .sidebar-collapse-btn {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .dashboard-canvas {
        padding: 1rem 0.75rem 2rem !important;
    }
    .hesba-navbar {
        padding: 0 0.75rem !important;
    }
    .dashboard-hero-banner {
        padding: 1.25rem 1rem !important;
        border-radius: 14px !important;
        margin-bottom: 1.25rem !important;
    }
    .hero-title {
        font-size: 1.35rem !important;
    }
    .hero-subtitle {
        font-size: 0.82rem !important;
    }
    .hesba-filter-bar {
        padding: 0.6rem 0.75rem !important;
        gap: 0.5rem !important;
    }
}

/* ══════════════════════════════════════════════════════
 * PURPLE ANNIHILATOR – override all Sneat #745CA8 purple
 * ══════════════════════════════════════════════════════ */
.text-primary { color: #0E5B46 !important; }
a.text-primary:hover { color: #0A4333 !important; }
.bg-primary { background-color: #0E5B46 !important; }
.bg-label-primary { background-color: rgba(14,91,70,0.12) !important; color: #0E5B46 !important; }
.border-primary { border-color: #0E5B46 !important; }
.btn-primary { background-color: #0E5B46 !important; border-color: #0E5B46 !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #0A4333 !important; border-color: #0A4333 !important; }
.btn-outline-primary { color: #0E5B46 !important; border-color: #0E5B46 !important; }
.btn-outline-primary:hover { background-color: #0E5B46 !important; color: #fff !important; }
.badge.bg-primary { background-color: #0E5B46 !important; }
.badge.bg-label-primary { background-color: rgba(14,91,70,0.12) !important; color: #0E5B46 !important; }
.page-item.active .page-link, .page-item.active .page-link:hover { background-color: #0E5B46 !important; border-color: #0E5B46 !important; color: #fff !important; }
.page-link { color: #0E5B46 !important; }
.page-link:hover { color: #0A4333 !important; background-color: rgba(14,91,70,0.07) !important; }
.progress-bar { background-color: #0E5B46 !important; }
.list-group-item.active { background-color: #0E5B46 !important; border-color: #0E5B46 !important; }
.alert-primary { background-color: rgba(14,91,70,0.08) !important; border-color: rgba(14,91,70,0.2) !important; color: #0A4333 !important; }
.form-check-input:checked { background-color: #0E5B46 !important; border-color: #0E5B46 !important; }
.form-control:focus, .form-select:focus { border-color: #0E5B46 !important; box-shadow: 0 0 0 3px rgba(14,91,70,0.15) !important; }
.nav-pills .nav-link.active { background-color: #0E5B46 !important; color: #fff !important; }
.nav-link { color: #0E5B46 !important; }
.dropdown-item.active, .dropdown-item:active { background-color: #0E5B46 !important; color: #fff !important; }

/* Sneat sidebar purple override */
.bg-menu-theme .menu-inner > .menu-item.active { background-color: transparent !important; }
.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-expanded) .bg-menu-theme .menu-inner > .menu-item.active { background-color: rgba(255,255,255,0.12) !important; }
.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-expanded) .bg-menu-theme .menu-inner > .menu-item.active .menu-link { color: #fff !important; }
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before { background-color: #D4AF7C !important; }
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover { background-color: rgba(255,255,255,0.08) !important; color: #fff !important; }
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link.menu-toggle .menu-icon { color: #D4AF7C !important; }

/* ══════════════════════════════════════════════════════
 * GLOBAL TABLES
 * ══════════════════════════════════════════════════════ */
table.dataTable thead th, table.dataTable thead td, .table thead th {
    background: linear-gradient(0deg, #F5F7F5 0%, #FAFBFA 100%) !important;
    color: #374151 !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    border-bottom: 2px solid #E5E7EB !important;
    padding: 0.8rem 1rem !important;
}

table.dataTable tbody tr td, .table tbody tr td {
    vertical-align: middle !important;
    font-size: 0.845rem !important;
    padding: 0.65rem 1rem !important;
    border-bottom: 1px solid #F3F4F6 !important;
    color: #374151 !important;
}

table.dataTable tbody tr:hover td, .table-hover tbody tr:hover td { background-color: rgba(14,91,70,0.03) !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0E5B46 !important; color: #fff !important; border-color: #0E5B46 !important; border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover {
    background: rgba(14,91,70,0.08) !important; color: #0E5B46 !important; border-color: rgba(14,91,70,0.2) !important; border-radius: 8px !important;
}

/* ══════════════════════════════════════════════════════
 * UNIFIED BUTTON SYSTEM & BRAND HARMONY
 * ══════════════════════════════════════════════════════ */
.btn { 
    font-family: var(--font-tajawal), var(--font-cairo), sans-serif !important; 
    font-weight: 600 !important; 
    border-radius: 9px !important; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; 
}

/* 1. Primary Action Button (Solid Emerald) */
.btn-brand-primary,
.layout-page a.btn-brand-primary,
.layout-page button.btn-brand-primary,
a.btn-brand-primary,
button.btn-brand-primary,
.btn-primary,
.btn-success {
    background: linear-gradient(135deg, #0E5B46 0%, #0A4A38 100%) !important;
    background-color: #0E5B46 !important;
    color: #FFFFFF !important;
    border: 1px solid #0E5B46 !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(14, 91, 70, 0.22) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
}

.btn-brand-primary:hover,
.layout-page a.btn-brand-primary:hover,
.layout-page button.btn-brand-primary:hover,
a.btn-brand-primary:hover,
button.btn-brand-primary:hover,
.btn-primary:hover,
.btn-success:hover {
    background: linear-gradient(135deg, #083C2E 0%, #05261D 100%) !important;
    background-color: #083C2E !important;
    border-color: #083C2E !important;
    color: #FFFFFF !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(14, 91, 70, 0.32) !important;
}

.btn-brand-primary i,
.layout-page .btn-brand-primary i {
    color: #D4AF7C !important;
    transition: transform 0.2s ease !important;
}
.btn-brand-primary:hover i,
.layout-page .btn-brand-primary:hover i {
    color: #FFFFFF !important;
    transform: scale(1.15) !important;
}

/* 2. Secondary / Outline / Filter Buttons (Light Mode) */
html:not(.dark-style):not([data-theme="dark"]) .btn-brand-outline,
html:not(.dark-style):not([data-theme="dark"]) .layout-page a.btn-brand-outline,
html:not(.dark-style):not([data-theme="dark"]) .layout-page button.btn-brand-outline,
html:not(.dark-style):not([data-theme="dark"]) .btn-outline-secondary,
html:not(.dark-style):not([data-theme="dark"]) .layout-page a.btn-outline-secondary,
html:not(.dark-style):not([data-theme="dark"]) .layout-page button.btn-outline-secondary,
html:not(.dark-style):not([data-theme="dark"]) .layout-page a.btn-outline-secondary.bg-white,
html:not(.dark-style):not([data-theme="dark"]) .btn-outline-secondary.bg-white,
html:not(.dark-style):not([data-theme="dark"]) .btn-outline-secondary.bg-light {
    background-color: #FFFFFF !important;
    color: #374151 !important;
    border: 1px solid #E5E7EB !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
}

html:not(.dark-style):not([data-theme="dark"]) .btn-brand-outline:hover,
html:not(.dark-style):not([data-theme="dark"]) .layout-page a.btn-brand-outline:hover,
html:not(.dark-style):not([data-theme="dark"]) .layout-page button.btn-brand-outline:hover,
html:not(.dark-style):not([data-theme="dark"]) .btn-outline-secondary:hover,
html:not(.dark-style):not([data-theme="dark"]) .layout-page a.btn-outline-secondary:hover,
html:not(.dark-style):not([data-theme="dark"]) .layout-page button.btn-outline-secondary:hover,
html:not(.dark-style):not([data-theme="dark"]) .btn-outline-secondary.bg-white:hover,
html:not(.dark-style):not([data-theme="dark"]) .btn-outline-secondary.bg-light:hover {
    background-color: #F8FAF9 !important;
    color: #0E5B46 !important;
    border-color: rgba(14, 91, 70, 0.35) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06) !important;
}

/* 3. Toolbar Grouped Buttons (Print / Excel - Light Mode) */
html:not(.dark-style):not([data-theme="dark"]) .btn-group .btn-outline-secondary {
    border-color: #E5E7EB !important;
    color: #4B5563 !important;
    font-size: 0.82rem !important;
    padding: 0.45rem 0.85rem !important;
    height: 38px !important;
    box-shadow: none !important;
}
html:not(.dark-style):not([data-theme="dark"]) .btn-group .btn-outline-secondary:hover {
    background-color: #F0FDF4 !important;
    color: #0E5B46 !important;
    border-color: rgba(14, 91, 70, 0.3) !important;
    z-index: 2 !important;
}

/* 4. Table Row Action Buttons */
.btn-icon-action { 
    width: 32px !important; 
    height: 32px !important; 
    border-radius: 8px !important; 
    padding: 0 !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-size: 0.85rem !important; 
    border: 1px solid transparent !important;
    transition: all 0.18s ease-in-out !important; 
    text-decoration: none !important;
}
.btn-icon-action.btn-view { 
    background-color: rgba(14, 91, 70, 0.08) !important; 
    border-color: rgba(14, 91, 70, 0.15) !important; 
    color: #0E5B46 !important; 
}
.btn-icon-action.btn-view:hover { 
    background-color: #0E5B46 !important; 
    border-color: #0E5B46 !important;
    color: #FFFFFF !important; 
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(14, 91, 70, 0.25) !important;
}
.btn-icon-action.btn-edit { 
    background-color: rgba(212, 175, 124, 0.15) !important; 
    border-color: rgba(212, 175, 124, 0.25) !important; 
    color: #92600A !important; 
}
.btn-icon-action.btn-edit:hover { 
    background-color: #D4AF7C !important; 
    border-color: #D4AF7C !important;
    color: #FFFFFF !important; 
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(212, 175, 124, 0.35) !important;
}
.btn-icon-action.btn-print { 
    background-color: rgba(71, 85, 105, 0.08) !important; 
    border-color: rgba(71, 85, 105, 0.16) !important; 
    color: #475569 !important; 
}
.btn-icon-action.btn-print:hover { 
    background-color: #334155 !important; 
    border-color: #334155 !important;
    color: #FFFFFF !important; 
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(51, 65, 85, 0.25) !important;
}
.btn-icon-action.btn-pdf { 
    background-color: rgba(220, 38, 38, 0.08) !important; 
    border-color: rgba(220, 38, 38, 0.18) !important; 
    color: #DC2626 !important; 
}
.btn-icon-action.btn-pdf:hover { 
    background-color: #DC2626 !important; 
    border-color: #DC2626 !important;
    color: #FFFFFF !important; 
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25) !important;
}
.btn-icon-action.btn-zatca { 
    background-color: rgba(13, 148, 136, 0.08) !important; 
    border-color: rgba(13, 148, 136, 0.18) !important; 
    color: #0D9488 !important; 
}
.btn-icon-action.btn-zatca:hover:not(:disabled) { 
    background-color: #0D9488 !important; 
    border-color: #0D9488 !important;
    color: #FFFFFF !important; 
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.25) !important;
}
.btn-icon-action.btn-delete { 
    background-color: rgba(239, 68, 68, 0.08) !important; 
    border-color: rgba(239, 68, 68, 0.18) !important; 
    color: #DC2626 !important; 
}
.btn-icon-action.btn-delete:hover:not(:disabled) { 
    background-color: #DC2626 !important; 
    border-color: #DC2626 !important;
    color: #FFFFFF !important; 
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25) !important;
}

/* ══════════════════════════════════════════════════════
 * LUXURY MODERN EXECUTIVE PAGINATION (Z4U SMART)
 * ══════════════════════════════════════════════════════ */
.pagination {
    gap: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.pagination .page-item,
.pagination li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pagination .page-item .page-link {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.pagination .page-item .page-link:hover:not(.disabled) {
    background: #F8FAFC !important;
    border-color: #0E5B46 !important;
    color: #0E5B46 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(14, 91, 70, 0.12) !important;
}

.pagination .page-item.active .page-link,
.pagination .page-link.active {
    background: #0E5B46 !important;
    border-color: #0E5B46 !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.32), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

.pagination .page-item.disabled .page-link,
.pagination .page-link.disabled {
    color: #94A3B8 !important;
    background: #F8FAFC !important;
    border-color: #F1F5F9 !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Also upgrade standalone .btn-grid-page links */
.btn-grid-page {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.btn-grid-page:hover:not(.disabled):not(.active) {
    background: #F8FAFC !important;
    border-color: #0E5B46 !important;
    color: #0E5B46 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(14, 91, 70, 0.12) !important;
}

.btn-grid-page.active {
    background: #0E5B46 !important;
    border-color: #0E5B46 !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.32), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

.btn-grid-page.disabled {
    color: #94A3B8 !important;
    background: #F8FAFC !important;
    border-color: #F1F5F9 !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════
 * BREADCRUMB
 * ══════════════════════════════════════════════════════ */
.breadcrumb-item a { color: #0E5B46 !important; text-decoration: none !important; }
.breadcrumb-item a:hover { color: #0A4333 !important; }
.breadcrumb-item.active { color: #374151 !important; font-weight: 600 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #D1D5DB !important; }

/* ══════════════════════════════════════════════════════
 * STAT / KPI CARDS
 * ══════════════════════════════════════════════════════ */
.hesba-stat-card {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 1.1rem 1.25rem;
    display: flex; align-items: flex-start; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.2s ease; height: 100%;
}
.hesba-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,91,70,0.08); border-color: rgba(14,91,70,0.2); }
.hesba-stat-card.gold-accent { border-color: rgba(212,175,124,0.4); }
.hesba-stat-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.hesba-stat-icon.emerald { background: rgba(14,91,70,0.1); color: #0E5B46; }
.hesba-stat-icon.gold { background: rgba(212,175,124,0.15); color: #92600A; }
.hesba-stat-icon.blue { background: rgba(37,99,235,0.1); color: #2563EB; }
.hesba-stat-icon.red { background: rgba(220,53,69,0.1); color: #DC2626; }
.hesba-stat-value { font-size: 1.45rem; font-weight: 900; color: #1F2937; line-height: 1.15; margin: 0; }
.hesba-stat-label { font-size: 0.75rem; font-weight: 700; color: #9CA3AF; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }
.hesba-stat-sub { font-size: 0.75rem; color: #6B7280; margin-top: 0.2rem; }

/* ══════════════════════════════════════════════════════
 * FILTER BAR
 * ══════════════════════════════════════════════════════ */
.hesba-filter-bar { background: #fff; border-radius: 14px; border: 1px solid #E5E7EB; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; box-shadow: 0 1px 4px rgba(0,0,0,0.04); margin-bottom: 1rem; }
.hesba-filter-input { height: 37px; border: 1px solid #E5E7EB !important; border-radius: 10px !important; background: #FAFAFA !important; font-size: 0.82rem !important; color: #374151 !important; padding: 0 0.85rem !important; transition: all 0.2s ease !important; outline: none !important; font-family: var(--font-tajawal) !important; }
.hesba-filter-input:focus { border-color: #0E5B46 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(14,91,70,0.1) !important; }

/* ══════════════════════════════════════════════════════
 * PAGE CANVAS
 * ══════════════════════════════════════════════════════ */
.layout-page { background-color: var(--brand-canvas) !important; }
.content-wrapper { padding: 1.5rem 2rem !important; background-color: var(--brand-canvas) !important; }
@media (max-width: 767.98px) { .content-wrapper { padding: 1rem !important; } }

/* Row status badges */
.badge-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-settled { background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.25); }
.badge-pending { background: rgba(212,175,124,0.15); color: #92600A; border: 1px solid rgba(212,175,124,0.3); }
.badge-canceled { background: rgba(220,53,69,0.1); color: #DC2626; border: 1px solid rgba(220,53,69,0.2); }

/* ══════════════════════════════════════════════════════
 * SIDEBAR BOTTOM USER PROFILE (separator)
 * ══════════════════════════════════════════════════════ */
/* Sidebar Bottom User Profile */
.sidebar-bottom-profile {
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0E5B46;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    border: 1.5px solid #D4AF7C;
}

.sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.sidebar-user-role {
    font-size: 0.68rem;
    color: #D4AF7C;
    margin: 0;
}

/* ===================================================================
 * ── EXECUTIVE TOOLBAR (الـ Toolbar / Top Navbar) ──
 * =================================================================== */
#logoff {
    z-index: 1070 !important;
}

.hesba-navbar {
    height: 76px !important;
    min-height: 76px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 4px 20px -2px rgba(14, 91, 70, 0.05) !important;
    padding: 0 1.5rem !important;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1070 !important;
    backdrop-filter: blur(8px);
}

.hesba-navbar .hesba-nav-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Zone 1: Start (Brand Logo, Search, Divider) */
.hesba-nav-start {
    display: flex;
    align-items: center;
}

.hesba-header-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    flex-shrink: 0;
    padding: 0.15rem 0;
}

/* Prominent & Clear Brand Logo - Enlarged Size */
.hesba-header-logo {
    height: 56px !important;
    max-height: 58px !important;
    width: auto !important;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(14, 91, 70, 0.1));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hesba-header-brand:hover .hesba-header-logo {
    transform: scale(1.04);
}

@media (max-width: 575.98px) {
    .hesba-header-logo {
        height: 42px !important;
        max-height: 44px !important;
    }
}

.hesba-nav-divider {
    width: 1.5px;
    height: 28px;
    background: #E2E8F0;
    margin: 0 0.75rem;
}

/* Mobile Hamburger Toggle */
.hesba-mobile-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    color: #0E5B46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.hesba-mobile-toggle:hover {
    background: rgba(14, 91, 70, 0.08);
    color: #0A4333;
    border-color: #0E5B46;
}

/* Expanded & Executive Search Box */
.hesba-search-wrap {
    position: relative;
    width: 380px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    height: 42px;
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

@media (min-width: 1400px) {
    .hesba-search-wrap {
        width: 440px;
    }
}

@media (min-width: 1600px) {
    .hesba-search-wrap {
        width: 500px;
    }
}

.hesba-search-wrap:focus-within {
    background: #FFFFFF;
    border-color: #0E5B46;
    box-shadow: 0 0 0 3.5px rgba(14, 91, 70, 0.12);
}

.hesba-search-icon {
    font-size: 1.25rem;
    color: #0E5B46;
    margin-inline-end: 0.65rem;
    flex-shrink: 0;
}

.hesba-search-input,
.hesba-search-wrap .hesba-search-input {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 500;
    color: #1E293B;
}

.hesba-search-input:focus,
.hesba-search-wrap .hesba-search-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.hesba-search-input::placeholder {
    color: #94A3B8;
    font-size: 0.82rem;
}

.hesba-search-kbd-wrap {
    flex-shrink: 0;
    margin-inline-start: 0.5rem;
}

.hesba-search-kbd {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 5px;
    padding: 0.15rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748B;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    flex-shrink: 0;
}

/* Zone 2: End Controls (All Harmonized at 42px Height) */
.hesba-nav-end {
    display: flex;
    align-items: center;
}

/* Detailed Date & Fiscal Year Widget */
.hesba-header-date-widget {
    height: 42px;
    padding: 0 0.85rem;
    border-radius: 10px;
    background: #FAF8F5;
    border: 1.5px solid rgba(212, 175, 124, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: default;
    transition: all 0.2s ease;
}

.hesba-header-date-widget:hover {
    background: #FFFFFF;
    border-color: #D4AF7C;
    box-shadow: 0 2px 8px rgba(212, 175, 124, 0.2);
}

.hesba-date-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(14, 91, 70, 0.08);
    color: #0E5B46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.hesba-date-sub {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748B;
    line-height: 1;
}

.hesba-date-year {
    font-size: 0.72rem;
    font-weight: 800;
    color: #0E5B46;
    background: rgba(14, 91, 70, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1;
}

.hesba-date-main {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
    white-space: nowrap;
}

/* Quick Action Button: فاتورة جديدة */
.hesba-header-btn-action {
    height: 42px;
    padding: 0 1.1rem;
    border-radius: 10px;
    background: #0E5B46;
    color: #FFFFFF !important;
    font-size: 0.84rem;
    font-weight: 700;
    border: 1.5px solid #0E5B46;
    box-shadow: 0 2px 8px rgba(14, 91, 70, 0.22);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hesba-header-btn-action i {
    color: #D4AF7C;
    font-size: 1.15rem;
}

.hesba-header-btn-action:hover {
    background: #0A4333;
    border-color: #0A4333;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.32);
}

/* Language Dropdown Trigger */
.hesba-navbar .topbar-dropdown {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.hesba-navbar .topbar-dropdown .dropdown-toggle::after,
.hesba-navbar .topbar-dropdown .nav-user::after,
.hesba-navbar .topbar-dropdown a::after,
.topbar-dropdown .dropdown-toggle::after,
.topbar-dropdown .nav-user::after,
.topbar-dropdown a::after {
    display: none !important;
    content: none !important;
}

.hesba-navbar .topbar-dropdown .nav-user {
    height: 42px !important;
    line-height: 38px !important;
    margin: 0 !important;
    padding: 0 0.85rem !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    transition: all 0.18s ease;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
}

.hesba-navbar .topbar-dropdown .nav-user:hover {
    background: #FFFFFF !important;
    border-color: #0E5B46 !important;
    color: #0E5B46 !important;
    box-shadow: 0 2px 8px rgba(14, 91, 70, 0.08);
}

.profile-dropdown {
    border-radius: 14px !important;
    border: 1px solid #E2E8F0 !important;
    min-width: 175px !important;
    padding: 0.4rem 0 !important;
    margin-top: 8px !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.12), 0 8px 12px -6px rgba(0, 0, 0, 0.06) !important;
    background: #FFFFFF !important;
    z-index: 1050 !important;
}

html[dir="rtl"] .profile-dropdown {
    left: 0 !important;
    right: auto !important;
    transform-origin: top left !important;
}

html[dir="ltr"] .profile-dropdown {
    right: 0 !important;
    left: auto !important;
    transform-origin: top right !important;
}

.profile-dropdown .dropdown-item {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    padding: 0.55rem 1rem;
    transition: all 0.15s ease;
}

.profile-dropdown .dropdown-item:hover {
    background: rgba(14, 91, 70, 0.06);
    color: #0E5B46;
}

/* User Profile Trigger Button */
.hesba-user-dropdown-wrap {
    position: relative !important;
}

.hesba-header-user-btn {
    height: 42px;
    padding: 2px 10px 2px 6px;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hesba-header-user-btn:hover,
.hesba-header-user-btn.show {
    background: #FFFFFF;
    border-color: #0E5B46 !important;
    box-shadow: 0 2px 10px rgba(14, 91, 70, 0.1);
}

.hesba-header-user-btn::after {
    display: none !important;
}

/* User Avatar */
.hesba-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0E5B46;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    border: 2px solid #D4AF7C;
    flex-shrink: 0;
}

.hesba-user-avatar.lg {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
}

.hesba-user-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.15;
    margin: 0;
}

.hesba-user-role {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748B;
    line-height: 1.15;
    margin: 0;
}

.hesba-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10B981;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    flex-shrink: 0;
}

/* User Dropdown Menu Positioning & Styling */
.hesba-user-dropdown-menu {
    border-radius: 14px !important;
    border: 1px solid #E2E8F0 !important;
    min-width: 260px !important;
    padding: 0.5rem 0 !important;
    margin-top: 8px !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.12), 0 8px 12px -6px rgba(0, 0, 0, 0.06) !important;
    background: #FFFFFF !important;
    z-index: 1050 !important;
}

html[dir="rtl"] .hesba-user-dropdown-menu {
    left: 0 !important;
    right: auto !important;
    transform-origin: top left !important;
}

html[dir="ltr"] .hesba-user-dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform-origin: top right !important;
}

.hesba-user-dropdown-menu .dropdown-item {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    padding: 0.6rem 1.1rem;
    transition: all 0.15s ease;
}

.hesba-user-dropdown-menu .dropdown-item:hover {
    background: rgba(14, 91, 70, 0.06);
    color: #0E5B46;
}

.hesba-user-dropdown-menu .dropdown-item i {
    font-size: 1.15rem;
}

/* Layout Wrapper Spacing for 76px Navbar */
.layout-wrapper.layout-content-navbar {
    margin-top: 76px !important;
}

/* ===================================================================
 * ── RESPONSIVE NAVBAR ADAPTATION (TABLET & MOBILE) ──
 * =================================================================== */
@media (max-width: 1199.98px) {
    .hesba-navbar {
        padding: 0 0.85rem !important;
    }
    .hesba-nav-start {
        gap: 0.5rem !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    .hesba-header-brand {
        flex-shrink: 0;
    }
    .hesba-header-logo {
        height: 48px !important;
        max-height: 50px !important;
    }
    .hesba-search-wrap {
        width: auto !important;
        max-width: 250px !important;
        min-width: 130px !important;
        flex: 1 1 auto;
    }
    .hesba-search-input {
        font-size: 0.8rem !important;
    }
    .hesba-search-kbd-wrap {
        display: none !important;
    }
    .hesba-nav-divider {
        margin: 0 0.4rem !important;
    }
    .hesba-nav-end {
        gap: 0.5rem !important;
        flex-shrink: 0;
    }
    .hesba-header-btn-action {
        padding: 0 0.75rem !important;
        font-size: 0.8rem !important;
    }
    .hesba-navbar .topbar-dropdown .nav-user {
        padding: 0 0.65rem !important;
        font-size: 0.8rem !important;
    }
    .hesba-header-user-btn {
        padding: 2px 6px !important;
    }
}

@media (max-width: 991.98px) {
    .hesba-search-wrap {
        max-width: 180px !important;
        min-width: 110px !important;
    }
    .hesba-header-logo {
        height: 44px !important;
        max-height: 46px !important;
    }
}

@media (max-width: 767.98px) {
    .hesba-navbar {
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 0.85rem !important;
    }
    .hesba-navbar .hesba-nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .layout-wrapper.layout-content-navbar {
        margin-top: 58px !important;
    }
    .hesba-nav-start {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 0 0 auto !important;
    }
    .hesba-nav-end {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
    }
    .hesba-search-wrap,
    .hesba-nav-divider {
        display: none !important;
    }

    /* Start Section: Hamburger & Logo */
    .hesba-mobile-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        border: 1px solid rgba(14, 91, 70, 0.15) !important;
        background: #FFFFFF !important;
        color: #0E5B46 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s ease !important;
    }
    .hesba-header-logo {
        height: 30px !important;
        max-height: 32px !important;
        width: auto !important;
    }

    /* End Section: Unified 36px Action Buttons (Light Mode) */
    .hesba-guide-btn,
    .hesba-theme-toggle-btn,
    .hesba-navbar .topbar-dropdown .nav-user {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important;
        border: 1px solid rgba(14, 91, 70, 0.15) !important;
        background: #FFFFFF !important;
        color: #0E5B46 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s ease !important;
    }

    /* Clean Language Switcher on Mobile */
    .hesba-navbar .topbar-dropdown .nav-user span,
    .hesba-navbar .topbar-dropdown .nav-user .bx-chevron-down {
        display: none !important;
    }
    .hesba-navbar .topbar-dropdown .nav-user .bx-globe {
        font-size: 1.15rem !important;
        color: inherit !important;
        margin: 0 !important;
    }
    .hesba-navbar .topbar-dropdown .dropdown-toggle::after,
    .hesba-navbar .topbar-dropdown .nav-user::after {
        display: none !important;
        content: none !important;
    }

    /* Clean User Avatar on Mobile */
    .hesba-header-user-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .hesba-header-user-btn.dropdown-toggle::after,
    .hesba-header-user-btn::after {
        display: none !important;
        content: none !important;
    }
    .hesba-header-user-btn .bx-chevron-down {
        display: none !important;
    }
    .hesba-user-avatar {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
        border: 2px solid #D4AF7C !important;
        box-shadow: 0 0 8px rgba(212, 175, 124, 0.25) !important;
    }

    /* End Section: Luxury Dark Mode Styling */
    html.dark-style .hesba-mobile-toggle,
    html[data-theme="dark"] .hesba-mobile-toggle,
    html.dark-style .hesba-guide-btn,
    html[data-theme="dark"] .hesba-guide-btn,
    html.dark-style .hesba-theme-toggle-btn,
    html[data-theme="dark"] .hesba-theme-toggle-btn,
    html.dark-style .hesba-navbar .topbar-dropdown .nav-user,
    html[data-theme="dark"] .hesba-navbar .topbar-dropdown .nav-user {
        border: 1px solid rgba(212, 175, 124, 0.25) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: #D4AF7C !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    html.dark-style .hesba-mobile-toggle:hover,
    html[data-theme="dark"] .hesba-mobile-toggle:hover,
    html.dark-style .hesba-guide-btn:hover,
    html[data-theme="dark"] .hesba-guide-btn:hover,
    html.dark-style .hesba-theme-toggle-btn:hover,
    html[data-theme="dark"] .hesba-theme-toggle-btn:hover,
    html.dark-style .hesba-navbar .topbar-dropdown .nav-user:hover,
    html[data-theme="dark"] .hesba-navbar .topbar-dropdown .nav-user:hover {
        background: rgba(212, 175, 124, 0.15) !important;
        border-color: #D4AF7C !important;
        color: #FFFFFF !important;
    }
}

/* ===================================================================
 * ── CUSTOM BRAND SCROLLBAR ──
 * =================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F1F1EE;
}
::-webkit-scrollbar-thumb {
    background: #D4AF7C;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #0E5B46;
}


.btn-brand-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    background-color: var(--brand-emerald);
    color: #FFFFFF !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(14, 91, 70, 0.2);
    transition: all 0.2s ease;
}

.btn-brand-quick-action:hover {
    background-color: var(--brand-emerald-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.3);
}

.btn-brand-quick-action i {
    color: var(--brand-gold);
    font-size: 1rem;
}

.sidebar-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--brand-gold);
    box-shadow: 0 0 8px var(--brand-gold);
    display: inline-block;
    flex-shrink: 0;
}

.sidebar-fast-logout-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.25);
    color: #F87171;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.sidebar-fast-logout-btn:hover {
    background: #DC2626;
    color: #FFFFFF;
}

/* ===================================================================
 * ── EXECUTIVE DASHBOARD STYLES (Home/Index) ──
 * =================================================================== */
.dashboard-canvas {
    padding: 1.75rem 2rem 3rem;
    width: 100%;
    background-color: var(--brand-canvas);
    min-height: calc(100vh - 64px);
}

.dashboard-hero-banner {
    background: linear-gradient(135deg, #0E5B46 0%, #083C2E 100%);
    border-radius: 20px;
    padding: 2rem 2.25rem;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px -6px rgba(14, 91, 70, 0.28);
    margin-bottom: 2rem;
}

.dashboard-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    background-image: radial-gradient(circle at 100% 0%, rgba(212, 175, 124, 0.4) 0%, transparent 50%),
                      repeating-linear-gradient(45deg, #FFFFFF 0, #FFFFFF 1px, transparent 0, transparent 40px);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(212, 175, 124, 0.2);
    color: #D4AF7C;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid rgba(212, 175, 124, 0.3);
    margin-bottom: 0.85rem;
}

.hero-title {
    font-size: 1.85rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.hero-subtitle {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    max-width: 620px;
    line-height: 1.55;
}

.hero-shortcut-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    color: #FFFFFF !important;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.6rem 1.15rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.hero-shortcut-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

.hero-shortcut-btn.gold {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
    color: #1F2937 !important;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(212, 175, 124, 0.3);
}

.hero-shortcut-btn.gold:hover {
    background-color: #C49F6C;
    color: #1F2937 !important;
}

.metric-kpi-card {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid #E5E7EB;
    padding: 1.35rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    height: 100%;
}

.metric-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14, 91, 70, 0.08);
    border-color: rgba(14, 91, 70, 0.2);
}

.metric-kpi-card.gold-accent {
    border: 1.5px solid rgba(212, 175, 124, 0.6);
}

.metric-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.module-gate-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    padding: 1.25rem;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
    height: 100%;
}

.module-gate-card:hover {
    border-color: var(--brand-emerald);
    box-shadow: 0 10px 25px -5px rgba(14, 91, 70, 0.1);
    transform: translateY(-2px);
}

.module-gate-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(14, 91, 70, 0.08);
    color: var(--brand-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.module-gate-card:hover .module-gate-icon {
    background: var(--brand-emerald);
    color: #FFFFFF;
}

/* ===================================================================
 * 18. REPORTS & TABULATOR BRAND OVERRIDE (Z4U Luxury Emerald & Gold)
 * =================================================================== */

/* ── Report Header ── */
.report-header,
[class*="report-header"] {
    background: linear-gradient(135deg, #0E5B46 0%, #083C2E 100%) !important;
    color: #FFFFFF !important;
    padding: 22px 24px !important;
    border-radius: 12px !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    border: 1px solid rgba(212, 175, 124, 0.35) !important;
    box-shadow: 0 8px 24px -6px rgba(14, 91, 70, 0.22) !important;
    position: relative;
    overflow: hidden;
}

.report-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #D4AF7C, transparent);
}

.report-header h2,
.report-header h3,
.report-header h4,
.report-header p,
.report-header span {
    color: #FFFFFF !important;
    font-weight: 700;
}

/* ── Preview & Filter Action Buttons ── */
.btn-preview,
#preview,
#getDates,
.btn-report-filter {
    background: linear-gradient(135deg, #0E5B46 0%, #0A4333 100%) !important;
    border: 1px solid #D4AF7C !important;
    color: #FFFFFF !important;
    padding: 10px 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.btn-preview:hover,
#preview:hover,
#getDates:hover,
.btn-report-filter:hover {
    background: linear-gradient(135deg, #0A4333 0%, #062b20 100%) !important;
    border-color: #E8CA9D !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(14, 91, 70, 0.28) !important;
    color: #FFFFFF !important;
}

/* ── Labels Summary Container ── */
.labels-container {
    background: linear-gradient(135deg, #0E5B46 0%, #083C2E 100%) !important;
    padding: 14px 20px !important;
    border: 1px solid rgba(212, 175, 124, 0.35) !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(14, 91, 70, 0.12) !important;
}

.labels-container .label-title {
    color: #D4AF7C !important;
    font-weight: 700 !important;
}

.labels-container .label-value {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* ── Tabulator Table Brand Integration (Light Mode) ── */
html:not(.dark-style):not([data-theme="dark"]) .tabulator {
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    background-color: #FFFFFF !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-header {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid #D4AF7C !important;
    font-weight: 700 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-header .tabulator-col {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    color: #FFFFFF !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-header .tabulator-col.tabulator-frozen {
    background: #0A4333 !important;
    color: #FFFFFF !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-row {
    background-color: #FFFFFF !important;
    color: #1F2937 !important;
    border-bottom: 1px solid #F3F4F6 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-row:nth-child(even) {
    background-color: #FAF8F5 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-row:hover {
    background-color: rgba(14, 91, 70, 0.06) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-row .tabulator-cell {
    border-right: 1px solid #F3F4F6 !important;
    padding: 8px 10px !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-row .tabulator-cell.tabulator-frozen {
    background: #FFFFFF !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-footer {
    background: #FAF8F5 !important;
    border-top: 1px solid #E5E7EB !important;
    color: #374151 !important;
    padding: 0 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-paginator .tabulator-page {
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    color: #374151 !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
}

html:not(.dark-style):not([data-theme="dark"]) .tabulator .tabulator-paginator .tabulator-page.active {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border-color: #0E5B46 !important;
}

/* ── Spinner & Overlays ── */
#loading-overlay,
#loadingOverlay,
.loading-overlay {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

#loading-overlay[style*="display: none"],
#loadingOverlay[style*="display: none"],
.loading-overlay[style*="display: none"] {
    display: none !important;
}

#loading-overlay[style*="display: block"],
#loading-overlay[style*="display: flex"],
#loadingOverlay[style*="display: block"],
#loadingOverlay[style*="display: flex"],
.loading-overlay[style*="display: block"],
.loading-overlay[style*="display: flex"] {
    display: flex !important;
}

html:not(.dark-style):not([data-theme="dark"]) #loading-overlay,
html:not(.dark-style):not([data-theme="dark"]) #loadingOverlay,
html:not(.dark-style):not([data-theme="dark"]) .loading-overlay {
    background: rgba(248, 250, 252, 0.82) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .spinner-container,
html:not(.dark-style):not([data-theme="dark"]) .loading-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 48px !important;
    border-radius: 24px !important;
    min-width: 190px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(14, 91, 70, 0.18) !important;
    box-shadow: 0 20px 50px rgba(14, 91, 70, 0.12), 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .spinner {
    width: 52px !important;
    height: 52px !important;
    border: 4px solid rgba(14, 91, 70, 0.14) !important;
    border-top: 4px solid #0E5B46 !important;
    border-right: 4px solid #10B981 !important;
    border-radius: 50% !important;
    animation: z4u-spin 0.9s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite !important;
}

html:not(.dark-style):not([data-theme="dark"]) .loading-text,
html:not(.dark-style):not([data-theme="dark"]) .loading-content p {
    margin-top: 16px !important;
    font-size: 15px !important;
    color: #0E5B46 !important;
    font-weight: 700 !important;
}

[data-theme="dark"] #loading-overlay,
html.dark-style #loading-overlay,
[data-theme="dark"] #loadingOverlay,
html.dark-style #loadingOverlay,
[data-theme="dark"] .loading-overlay,
html.dark-style .loading-overlay {
    background: rgba(10, 20, 18, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

[data-theme="dark"] .spinner-container,
html.dark-style .spinner-container,
[data-theme="dark"] .loading-content,
html.dark-style .loading-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 48px !important;
    border-radius: 24px !important;
    min-width: 190px !important;
    background: linear-gradient(145deg, rgba(16, 32, 28, 0.95), rgba(11, 22, 19, 0.98)) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(16, 185, 129, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .spinner,
html.dark-style .spinner {
    width: 52px !important;
    height: 52px !important;
    border: 4px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 4px solid #10B981 !important;
    border-right: 4px solid #34D399 !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.5)) !important;
    animation: z4u-spin 0.9s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite !important;
}

[data-theme="dark"] .loading-text,
html.dark-style .loading-text,
[data-theme="dark"] .loading-content p,
html.dark-style .loading-content p {
    margin-top: 16px !important;
    font-size: 15px !important;
    color: #F1F5F9 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* ── Report Filter Controls ── */
.form-section {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.form-section .form-label {
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
}

/* ===================================================================
 * 19. INNER PAGES ACTIONS & FORM BRAND OVERRIDES (Eliminating Legacy Purple)
 * =================================================================== */

/* Primary Action Buttons (Upsert, Save, Update) */
button[style*="61398f"]:not([disabled]),
input[type="submit"][style*="61398f"]:not([disabled]),
#updateBtn:not([disabled]) {
    background: linear-gradient(135deg, #0E5B46 0%, #0A4333 100%) !important;
    background-color: #0E5B46 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(14, 91, 70, 0.22) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    transition: all 0.25s ease !important;
}

button[style*="61398f"]:not([disabled]):hover,
#updateBtn:not([disabled]):hover {
    background: linear-gradient(135deg, #0A4333 0%, #062b20 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(14, 91, 70, 0.32) !important;
    color: #FFFFFF !important;
}

/* ── Secondary & Outline Action Buttons (New, Print A4, Receipt, Store) ── */
a[style*="61398f"]:not(:has(.fa-plus)),
a[style*="9d8fbd"]:not(:has(.fa-plus)),
button[style*="background: white;color: #61398f"],
.btn-outline-purple {
    background: #FFFFFF !important;
    color: #0E5B46 !important;
    border: 1.5px solid #0E5B46 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

a[style*="61398f"]:not(:has(.fa-plus)):hover,
a[style*="9d8fbd"]:not(:has(.fa-plus)):hover {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border-color: #0E5B46 !important;
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.18) !important;
}

/* ── Universal Executive Entity Plus Add-Button (+ Button across all forms and modals) ── */
a[style*="border: 1px solid #9d8fbd"]:has(.fa-plus):not(.bill-btn-plus),
a.btn:has(.fa-plus):not(.bill-btn-plus):not(:has(span)):not([class*="px-"]):not(.tab-action-btn):not(.btn-hero-action):not(.btn-hero-new):not(.btn-outline-success):not(.btn-brand-primary):not(.btn-primary),
button.btn:has(.fa-plus):not(.bill-btn-plus):not(:has(span)):not([class*="px-"]):not(.tab-action-btn):not(.btn-hero-action):not(.btn-hero-new):not(.btn-outline-success):not(.btn-brand-primary):not(.btn-primary),
.btn-add-entity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #0E5B46 0%, #08382B 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #0E5B46 !important;
    box-shadow: 0 2px 6px rgba(14, 91, 70, 0.22) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

a[style*="border: 1px solid #9d8fbd"]:has(.fa-plus):not(.bill-btn-plus) i,
a.btn:has(.fa-plus):not(.bill-btn-plus):not(:has(span)):not([class*="px-"]):not(.tab-action-btn):not(.btn-hero-action):not(.btn-hero-new):not(.btn-outline-success):not(.btn-brand-primary):not(.btn-primary) i,
button.btn:has(.fa-plus):not(.bill-btn-plus):not(:has(span)):not([class*="px-"]):not(.tab-action-btn):not(.btn-hero-action):not(.btn-hero-new):not(.btn-outline-success):not(.btn-brand-primary):not(.btn-primary) i,
.btn-add-entity i {
    color: #FFFFFF !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: transform 0.22s ease !important;
}

a[style*="border: 1px solid #9d8fbd"]:has(.fa-plus):not(.bill-btn-plus):hover,
a.btn:has(.fa-plus):not(.bill-btn-plus):not(:has(span)):not([class*="px-"]):not(.tab-action-btn):not(.btn-hero-action):not(.btn-hero-new):not(.btn-outline-success):not(.btn-brand-primary):not(.btn-primary):hover,
button.btn:has(.fa-plus):not(.bill-btn-plus):not(:has(span)):not([class*="px-"]):not(.tab-action-btn):not(.btn-hero-action):not(.btn-hero-new):not(.btn-outline-success):not(.btn-brand-primary):not(.btn-primary):hover,
.btn-add-entity:hover {
    background: linear-gradient(135deg, #137359 0%, #0E5B46 100%) !important;
    border-color: #137359 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 5px 14px rgba(14, 91, 70, 0.32) !important;
}

a[style*="border: 1px solid #9d8fbd"]:has(.fa-plus):not(.bill-btn-plus):hover i,
a.btn:has(.fa-plus):not(.bill-btn-plus):not(:has(span)):not([class*="px-"]):not(.tab-action-btn):not(.btn-hero-action):not(.btn-hero-new):not(.btn-outline-success):not(.btn-brand-primary):not(.btn-primary):hover i,
button.btn:has(.fa-plus):not(.bill-btn-plus):not(:has(span)):not([class*="px-"]):not(.tab-action-btn):not(.btn-hero-action):not(.btn-hero-new):not(.btn-outline-success):not(.btn-brand-primary):not(.btn-primary):hover i,
.btn-add-entity:hover i {
    transform: rotate(90deg) scale(1.1) !important;
}

/* Modal and Page Plus Icons */
[style*="color: #9d8fbd"],
.fa-plus[style*="color: #9d8fbd"] {
    color: #0E5B46 !important;
}

/* ── Inline Form Field Triggers & Refresh Icons ── */
#openAddCustomerOrSupplierModal {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#openAddCustomerOrSupplierModal:hover {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(14, 91, 70, 0.25) !important;
}

#openAddCustomerOrSupplierModal i {
    font-size: 0.85rem !important;
}

.bill-form-label .fa-rotate-right,
.bill-form-label .fa-rotate-left {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
    font-size: 0.8rem !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.bill-form-label .fa-rotate-right:hover,
.bill-form-label .fa-rotate-left:hover {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    transform: rotate(180deg) !important;
}

/* Inner Page Table Headers - Calm & Luxurious Modern ERP (Light Mode) */
html:not(.dark-style):not([data-theme="dark"]) .data-grid-container thead th,
html:not(.dark-style):not([data-theme="dark"]) .table-responsive thead th {
    background: #F4F7F6 !important;
    background: linear-gradient(180deg, #F8FAFC 0%, #EDF4F1 100%) !important;
    color: #0E5B46 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #0E5B46 !important;
    border-inline: 1px solid #E2E8F0 !important;
}

/* ===================================================================
 * 20. DEFEAT ALL RASHED-CUSTOMIZE PURPLE & LEGACY INJECTIONS
 * =================================================================== */

/* 1. All Table Headers in show-page, reports, and inner pages - Calm Theme (Light Mode) */
html:not(.dark-style):not([data-theme="dark"]) .layout-page .show-page table th,
html:not(.dark-style):not([data-theme="dark"]) .layout-page .show-page table thead th,
html:not(.dark-style):not([data-theme="dark"]) table th h1, 
html:not(.dark-style):not([data-theme="dark"]) table th h2, 
html:not(.dark-style):not([data-theme="dark"]) table th h3, 
html:not(.dark-style):not([data-theme="dark"]) table th h4, 
html:not(.dark-style):not([data-theme="dark"]) table th h5, 
html:not(.dark-style):not([data-theme="dark"]) table th h6,
html:not(.dark-style):not([data-theme="dark"]) .table thead th {
    color: #0E5B46 !important;
    background: #F4F7F6 !important;
    background: linear-gradient(180deg, #F8FAFC 0%, #EDF4F1 100%) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .layout-page .show-page table th *,
html:not(.dark-style):not([data-theme="dark"]) .table thead th * {
    color: #0E5B46 !important;
}

/* Print icons in tables */
.layout-page .show-page table tr .fa-print {
    color: #0E5B46 !important;
}

/* 2. Inputs & Selects text and border colors (Light Mode only) */
html:not(.dark-style):not([data-theme="dark"]) .form-control,
html:not(.dark-style):not([data-theme="dark"]) .form-select,
html:not(.dark-style):not([data-theme="dark"]) .layout-page .show-page .form-control,
html:not(.dark-style):not([data-theme="dark"]) .layout-page .show-page .form-select {
    color: #1F2937 !important;
    border-color: #D1D5DB !important;
}

html:not(.dark-style):not([data-theme="dark"]) .form-control:focus,
html:not(.dark-style):not([data-theme="dark"]) .form-select:focus,
html:not(.dark-style):not([data-theme="dark"]) .layout-page .show-page .form-control:focus,
html:not(.dark-style):not([data-theme="dark"]) .layout-page .show-page .form-select:focus {
    border-color: #0E5B46 !important;
    box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15) !important;
    color: #1F2937 !important;
}

/* Checkbox and Radio accent color */
input[type="checkbox"],
input[type="radio"],
.form-check-input {
    accent-color: #0E5B46 !important;
}

.form-check-input:checked {
    background-color: #0E5B46 !important;
    border-color: #0E5B46 !important;
}

/* 3. Sales modal & Report cards & Headings */
.layout-page .sales-modal h5,
.layout-page .show-page h5 {
    color: #0E5B46 !important;
}

.layout-page .sales-modal .add-product {
    border-color: #0E5B46 !important;
}

.layout-page .sales-modal .add-product button {
    border-color: #0E5B46 !important;
    color: #0E5B46 !important;
}

.fatora,
.sanad {
    border-color: #0E5B46 !important;
}

/* 4. Accordion Header & Collapses in Reports */
.accordion-button:not(.collapsed) {
    color: #0E5B46 !important;
    background-color: rgba(14, 91, 70, 0.08) !important;
    box-shadow: inset 0 -1px 0 rgba(14, 91, 70, 0.15) !important;
}

.accordion-button:focus {
    border-color: #0E5B46 !important;
    box-shadow: 0 0 0 0.25rem rgba(14, 91, 70, 0.15) !important;
}

.accordion-button::after {
    filter: hue-rotate(120deg);
}

/* 5. Scrollbars */
.overflow-auto::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: #0E5B46 !important;
    border-radius: 10px !important;
}

.overflow-auto::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    background: #0A4333 !important;
}

/* 6. Alert Header in reports if .alert is used as title */
.layout-page .alert.mb-3,
.show-page .alert {
    background: linear-gradient(135deg, #0E5B46 0%, #083C2E 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(212, 175, 124, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(14, 91, 70, 0.16) !important;
}

.layout-page .alert.mb-3 h2,
.show-page .alert h2 {
    color: #FFFFFF !important;
}

/* ==========================================================================
   7. Universal Icon Font Protection (Guaranteed Rendering for Boxicons, FA, BI)
   ========================================================================== */
i.bx,
i[class*="bx-"],
i[class^="bx-"],
.bx,
.menu-icon,
.tf-icons,
[class*="bx-"],
[class^="bx-"] {
    font-family: 'boxicons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block !important;
}

i.fa,
i.fas,
i.far,
i.fal,
i.fad,
i.fab,
.fa,
.fas,
.far,
.fal,
.fad,
.fab,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

i.bi,
.bi,
[class^="bi-"],
[class*=" bi-"] {
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
}

/* ==========================================================================
   Z4U Design System: Luxury Executive Flatpickr Calendar Theme (Emerald & Gold)
   Bulletproof layout, RTL support, fluid spacing, and responsive geometry.
   ========================================================================== */
@keyframes z4uCalendarFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

html.light-style .flatpickr-calendar,
html[dir="rtl"]:not(.dark-style) .flatpickr-calendar,
html:not(.dark-style) .flatpickr-calendar,
.flatpickr-calendar:not(.dark-style) {
    width: 326px !important;
    min-width: 326px !important;
    max-width: 326px !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(14, 91, 70, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 45px rgba(14, 91, 70, 0.16), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    font-family: var(--font-tajawal, 'Tajawal', system-ui, sans-serif) !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 99999 !important;
    line-height: normal !important;
}

.flatpickr-calendar.animate.open {
    animation: z4uCalendarFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
}

/* ── Calendar Header & Navigation ── */
html .flatpickr-calendar .flatpickr-months,
.flatpickr-months {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 44px !important;
    padding: 2px 2px 10px 2px !important;
    border-bottom: 1px solid #EDF2F7 !important;
    margin-bottom: 8px !important;
    position: relative !important;
}

html .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
html .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.flatpickr-prev-month,
.flatpickr-next-month {
    position: static !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    color: var(--brand-emerald, #0E5B46) !important;
    fill: var(--brand-emerald, #0E5B46) !important;
    background: rgba(14, 91, 70, 0.06) !important;
    border: 1px solid rgba(14, 91, 70, 0.14) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

html .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
html .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
    background: var(--brand-emerald, #0E5B46) !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    border-color: var(--brand-emerald, #0E5B46) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 3px 8px rgba(14, 91, 70, 0.25) !important;
}

html .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
html .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
    fill: inherit !important;
    stroke: inherit !important;
    vertical-align: middle !important;
}

/* In RTL: flip arrow glyphs so external appearance matches logical past/future navigation */
html[dir="rtl"] .flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar[dir="rtl"] .flatpickr-prev-month svg {
    transform: scaleX(-1);
}
html[dir="rtl"] .flatpickr-calendar .flatpickr-next-month svg,
.flatpickr-calendar[dir="rtl"] .flatpickr-next-month svg {
    transform: scaleX(-1);
}

/* ── Month & Year Dropdown / Steppers ── */
html .flatpickr-calendar .flatpickr-month,
.flatpickr-month {
    position: static !important;
    flex: 1 1 auto !important;
    height: 36px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html .flatpickr-calendar .flatpickr-current-month,
.flatpickr-current-month {
    position: static !important;
    width: auto !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    transform: none !important;
}

html .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    height: 32px !important;
    line-height: 30px !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    color: var(--brand-emerald, #0E5B46) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: rgba(14, 91, 70, 0.05) !important;
    padding: 2px 12px !important;
    border: 1px solid rgba(14, 91, 70, 0.14) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.18s ease !important;
    text-align: center !important;
}

html .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(14, 91, 70, 0.1) !important;
    border-color: rgba(14, 91, 70, 0.3) !important;
}

html .flatpickr-calendar .numInputWrapper,
.flatpickr-current-month .numInputWrapper {
    height: 32px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(14, 91, 70, 0.05) !important;
    border: 1px solid rgba(14, 91, 70, 0.14) !important;
    border-radius: 8px !important;
    padding: 0 4px !important;
    transition: all 0.18s ease !important;
}

html .flatpickr-calendar .numInputWrapper:hover,
.flatpickr-current-month .numInputWrapper:hover {
    background: rgba(14, 91, 70, 0.1) !important;
    border-color: rgba(14, 91, 70, 0.3) !important;
}

html .flatpickr-calendar input.cur-year,
.flatpickr-current-month input.cur-year {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    color: var(--brand-emerald, #0E5B46) !important;
    padding: 0 4px !important;
    width: 4.8ch !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    font-family: inherit !important;
}

/* ── Weekday Header Cells ── */
html .flatpickr-calendar .flatpickr-weekdays,
.flatpickr-weekdays {
    display: flex !important;
    width: 100% !important;
    height: 32px !important;
    border-bottom: 1px dashed #E2E8F0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

html.light-style .flatpickr-weekdaycontainer,
html.dark-style .flatpickr-weekdaycontainer,
html .flatpickr-calendar .flatpickr-weekdaycontainer,
.flatpickr-weekdaycontainer {
    display: flex !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html .flatpickr-calendar span.flatpickr-weekday,
span.flatpickr-weekday {
    flex: 0 0 calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    width: calc(100% / 7) !important;
    text-align: center !important;
    color: var(--brand-emerald, #0E5B46) !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
}

/* ── Days Grid & Month Container ── */
html.light-style .flatpickr-days,
html.dark-style .flatpickr-days,
html.light-style .flatpickr-rContainer,
html.dark-style .flatpickr-rContainer,
html.light-style .flatpickr-innerContainer,
.flatpickr-innerContainer,
.flatpickr-rContainer,
html .flatpickr-days,
.flatpickr-days {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

html.light-style .dayContainer,
html.dark-style .dayContainer,
html .flatpickr-calendar .dayContainer,
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

html .flatpickr-calendar .flatpickr-day,
.flatpickr-day {
    flex: 0 0 calc(100% / 7 - 4px) !important;
    max-width: calc(100% / 7 - 4px) !important;
    height: 38px !important;
    line-height: 36px !important;
    margin: 2px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    border: 1.5px solid transparent !important;
    transition: all 0.16s ease !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html .flatpickr-calendar .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange),
.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange) {
    background: rgba(14, 91, 70, 0.08) !important;
    border-color: rgba(14, 91, 70, 0.25) !important;
    color: var(--brand-emerald, #0E5B46) !important;
    font-weight: 800 !important;
    transform: translateY(-1px);
}

html .flatpickr-calendar .flatpickr-day.today:not(.selected),
.flatpickr-day.today:not(.selected) {
    border-color: var(--brand-emerald, #0E5B46) !important;
    background: rgba(14, 91, 70, 0.08) !important;
    color: var(--brand-emerald, #0E5B46) !important;
    font-weight: 800 !important;
}

html .flatpickr-calendar .flatpickr-day.selected,
html .flatpickr-calendar .flatpickr-day.startRange,
html .flatpickr-calendar .flatpickr-day.endRange,
html .flatpickr-calendar .flatpickr-day.selected.inRange,
html .flatpickr-calendar .flatpickr-day.startRange.inRange,
html .flatpickr-calendar .flatpickr-day.endRange.inRange,
html .flatpickr-calendar .flatpickr-day.selected:focus,
html .flatpickr-calendar .flatpickr-day.startRange:focus,
html .flatpickr-calendar .flatpickr-day.endRange:focus,
html .flatpickr-calendar .flatpickr-day.selected:hover,
html .flatpickr-calendar .flatpickr-day.startRange:hover,
html .flatpickr-calendar .flatpickr-day.endRange:hover,
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: linear-gradient(135deg, #0E5B46 0%, #083D2F 100%) !important;
    border-color: var(--brand-emerald, #0E5B46) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.35) !important;
}

html .flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-day.inRange {
    background: rgba(14, 91, 70, 0.12) !important;
    border-color: transparent !important;
    color: var(--brand-emerald, #0E5B46) !important;
}

html .flatpickr-calendar .flatpickr-day.prevMonthDay,
html .flatpickr-calendar .flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #94A3B8 !important;
    opacity: 0.45;
}

/* ── Time Picker Extension ── */
html .flatpickr-calendar .flatpickr-time,
.flatpickr-time {
    border-top: 1px solid #EDF2F7 !important;
    background: #FAFBFD !important;
    border-radius: 0 0 14px 14px !important;
    padding: 0.4rem 0 !important;
}

html .flatpickr-calendar .flatpickr-time input,
.flatpickr-time input {
    color: var(--brand-emerald, #0E5B46) !important;
    font-weight: 800 !important;
}

html .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp:after,
.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--brand-emerald, #0E5B46) !important;
}

html .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown:after,
.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--brand-emerald, #0E5B46) !important;
}

/* ==========================================================================
   Z4U Design System: Luxury Executive Flatpickr Calendar Theme (Dark Mode)
   High contrast, emerald accents, dark teal surface, seamless readability.
   ========================================================================== */
html.dark-style .flatpickr-calendar,
[data-theme="dark"] .flatpickr-calendar {
    background: #121F23 !important;
    border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(16, 185, 129, 0.12) !important;
    color: #E2E8F0 !important;
}

html.dark-style .flatpickr-calendar .flatpickr-months,
[data-theme="dark"] .flatpickr-calendar .flatpickr-months {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-style .flatpickr-calendar .flatpickr-prev-month,
html.dark-style .flatpickr-calendar .flatpickr-next-month,
[data-theme="dark"] .flatpickr-calendar .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-calendar .flatpickr-next-month {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #34D399 !important;
    fill: #34D399 !important;
}

html.dark-style .flatpickr-calendar .flatpickr-prev-month:hover,
html.dark-style .flatpickr-calendar .flatpickr-next-month:hover,
[data-theme="dark"] .flatpickr-calendar .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-calendar .flatpickr-next-month:hover {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4) !important;
}

html.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #34D399 !important;
}

html.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

html.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option,
[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #121F23 !important;
    color: #E2E8F0 !important;
}

html.dark-style .flatpickr-calendar .numInputWrapper,
[data-theme="dark"] .flatpickr-calendar .numInputWrapper {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

html.dark-style .flatpickr-calendar .numInputWrapper:hover,
[data-theme="dark"] .flatpickr-calendar .numInputWrapper:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

html.dark-style .flatpickr-calendar input.cur-year,
[data-theme="dark"] .flatpickr-calendar input.cur-year {
    color: #34D399 !important;
}

html.dark-style .flatpickr-calendar .flatpickr-weekdays,
[data-theme="dark"] .flatpickr-calendar .flatpickr-weekdays {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

html.dark-style .flatpickr-calendar span.flatpickr-weekday,
[data-theme="dark"] .flatpickr-calendar span.flatpickr-weekday {
    color: #34D399 !important;
}

html.dark-style .flatpickr-days,
html.dark-style .flatpickr-rContainer,
html.dark-style .flatpickr-innerContainer,
html.dark-style .dayContainer,
[data-theme="dark"] .flatpickr-days,
[data-theme="dark"] .flatpickr-rContainer,
[data-theme="dark"] .flatpickr-innerContainer,
[data-theme="dark"] .dayContainer {
    background: transparent !important;
    background-color: transparent !important;
}

html.dark-style .flatpickr-calendar .flatpickr-day,
[data-theme="dark"] .flatpickr-calendar .flatpickr-day {
    color: #E2E8F0 !important;
    background: transparent !important;
}

html.dark-style .flatpickr-calendar .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange),
[data-theme="dark"] .flatpickr-calendar .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange) {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #6EE7B7 !important;
    transform: translateY(-1px);
}

html.dark-style .flatpickr-calendar .flatpickr-day.today:not(.selected),
[data-theme="dark"] .flatpickr-calendar .flatpickr-day.today:not(.selected) {
    border-color: #10B981 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}

html.dark-style .flatpickr-calendar .flatpickr-day.selected,
html.dark-style .flatpickr-calendar .flatpickr-day.startRange,
html.dark-style .flatpickr-calendar .flatpickr-day.endRange,
[data-theme="dark"] .flatpickr-calendar .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-calendar .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-calendar .flatpickr-day.endRange {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

html.dark-style .flatpickr-calendar .flatpickr-day.prevMonthDay,
html.dark-style .flatpickr-calendar .flatpickr-day.nextMonthDay,
[data-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.25) !important;
    opacity: 0.5 !important;
}

html.dark-style .flatpickr-calendar .flatpickr-time,
[data-theme="dark"] .flatpickr-calendar .flatpickr-time {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.25) !important;
}

html.dark-style .flatpickr-calendar .flatpickr-time input,
[data-theme="dark"] .flatpickr-calendar .flatpickr-time input {
    color: #34D399 !important;
    background: rgba(18, 31, 35, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
}

html.dark-style .flatpickr-calendar .flatpickr-time .flatpickr-time-separator,
[data-theme="dark"] .flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
    color: #94A3B8 !important;
}

html.dark-style .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp:after,
[data-theme="dark"] .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #34D399 !important;
}

html.dark-style .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown:after,
[data-theme="dark"] .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: #34D399 !important;
}

/* ===================================================================
 * ── Z4U UNIFIED ICON DESIGN SYSTEM & INPUT-GROUP ARCHITECTURE ──
 * Consistent icon styling, metrics, modal header badges, and RTL/LTR
 * input-group borders across the entire ERP system.
 * =================================================================== */

/* 1. Universal Icon Alignment & Metrics */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands,
i.bx, i[class^="bx-"], i[class*=" bx-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    font-style: normal;
}

/* 2. Standard Icon Sizing Tokens */
.z4u-icon-xs { font-size: 0.75rem !important; }  /* 12px */
.z4u-icon-sm { font-size: 0.85rem !important; }  /* 13.5px */
.z4u-icon-md { font-size: 1rem !important; }     /* 16px */
.z4u-icon-lg { font-size: 1.25rem !important; }  /* 20px */
.z4u-icon-xl { font-size: 1.5rem !important; }   /* 24px */

/* 3. Universal Icon Badges & Avatars (Containers) */
.z4u-icon-badge,
.modal-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.12) 0%, rgba(14, 91, 70, 0.04) 100%);
    border: 1px solid rgba(14, 91, 70, 0.18);
    color: #0E5B46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.z4u-icon-badge-sm {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 1rem;
}

.z4u-icon-badge-gold {
    background: linear-gradient(135deg, rgba(212, 175, 124, 0.18) 0%, rgba(212, 175, 124, 0.06) 100%);
    border-color: rgba(212, 175, 124, 0.3);
    color: #9A723E;
}

.z4u-icon-badge-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(239, 68, 68, 0.04) 100%);
    border-color: rgba(239, 68, 68, 0.25);
    color: #DC2626;
}

/* 4. Form Labels Standard Typography & Icon Integration */
.z4u-form-label,
.modal-body .form-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.4rem;
}

.z4u-form-label i,
.modal-body .form-label i {
    color: #0E5B46;
    font-size: 0.88rem;
    margin-inline-end: 0.45rem;
}

/* 5. Button Icons Standard Spacing */
.btn:not(.btn-icon-only):not(.btn-delete-row):not([class*="gap-"]):not([style*="width: 32px"]):not([style*="width: 36px"]):not([style*="width: 28px"]):not([style*="padding: 0"]):not([style*="padding:0"]) > i,
.btn:not(.btn-icon-only):not(.btn-delete-row):not([class*="gap-"]):not([style*="width: 32px"]):not([style*="width: 36px"]):not([style*="width: 28px"]):not([style*="padding: 0"]):not([style*="padding:0"]) > [class^="fa-"],
.btn:not(.btn-icon-only):not(.btn-delete-row):not([class*="gap-"]):not([style*="width: 32px"]):not([style*="width: 36px"]):not([style*="width: 28px"]):not([style*="padding: 0"]):not([style*="padding:0"]) > [class*=" fa-"],
.btn:not(.btn-icon-only):not(.btn-delete-row):not([class*="gap-"]):not([style*="width: 32px"]):not([style*="width: 36px"]):not([style*="width: 28px"]):not([style*="padding: 0"]):not([style*="padding:0"]) > [class^="bx-"],
.btn:not(.btn-icon-only):not(.btn-delete-row):not([class*="gap-"]):not([style*="width: 32px"]):not([style*="width: 36px"]):not([style*="width: 28px"]):not([style*="padding: 0"]):not([style*="padding:0"]) > [class*=" bx-"] {
    margin-inline-end: 0.45rem;
    vertical-align: middle;
}

/* 5.1 Universal Icon-Only & Action Buttons Centering */
.btn-icon-only > i,
.btn-icon-only > [class^="fa-"],
.btn-icon-only > [class*=" fa-"],
.btn-icon-only > [class^="bx-"],
.btn-icon-only > [class*=" bx-"],
.btn-delete-row > i,
.btn-delete-row > [class^="fa-"],
.btn-delete-row > [class*=" fa-"],
.btn-add-search-item > i,
.btn-add-search-item > [class^="fa-"],
.btn-add-search-item > [class*=" fa-"],
.btn[style*="width: 32px"] > i,
.btn[style*="width: 32px"] > [class^="fa-"],
.btn[style*="width: 32px"] > [class*=" fa-"],
.btn[style*="width: 36px"] > i,
.btn[style*="width: 36px"] > [class^="fa-"],
.btn[style*="width: 36px"] > [class*=" fa-"],
.btn[style*="width: 28px"] > i,
.btn[style*="width: 28px"] > [class^="fa-"],
.btn[style*="width: 28px"] > [class*=" fa-"],
.btn[style*="padding: 0"] > i,
.btn[style*="padding: 0"] > [class^="fa-"],
.btn[style*="padding: 0"] > [class*=" fa-"],
.btn[style*="padding:0"] > i,
.btn[style*="padding:0"] > [class^="fa-"],
.btn[style*="padding:0"] > [class*=" fa-"],
.table td .btn > i,
.table td .btn > [class^="fa-"],
.table td .btn > [class*=" fa-"],
#table_payment_methods .btn > i,
#table_payment_methods .btn > [class^="fa-"],
#table_payment_methods .btn > [class*=" fa-"],
.btn[class*="gap-"] > i,
.btn[class*="gap-"] > [class^="fa-"],
.btn[class*="gap-"] > [class*=" fa-"] {
    margin: 0 !important;
    margin-inline-end: 0 !important;
    margin-inline-start: 0 !important;
    padding: 0 !important;
}

.btn-icon-only,
.btn[style*="width: 32px"],
.btn[style*="width: 36px"],
.btn[style*="width: 28px"],
#table_payment_methods .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.btn-icon-only > i,
.btn[style*="width: 32px"] > i,
.btn[style*="width: 36px"] > i,
.btn[style*="width: 28px"] > i,
#table_payment_methods .btn > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
}

/* 6. Universal Seamless Input-Group (RTL & LTR) */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    border-radius: 10px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.input-group > .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #64748B;
    background-color: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    transition: all 0.2s ease;
    min-width: 42px;
}

.input-group > .input-group-text i {
    font-size: 0.95rem;
    color: #64748B;
    transition: color 0.2s ease;
}

.input-group > .form-control,
.input-group > .form-select {
    border: 1.5px solid #CBD5E1;
    font-size: 0.88rem;
    transition: all 0.2s ease;
}

/* In RTL: First child (input-group-text) is on RIGHT, input is on LEFT */
[dir="rtl"] .input-group > .input-group-text:first-child,
html[dir="rtl"] .input-group > .input-group-text:first-child {
    border-radius: 0 10px 10px 0 !important;
    border-left: none !important;
}

[dir="rtl"] .input-group > .form-control:not(:first-child),
[dir="rtl"] .input-group > .form-select:not(:first-child),
html[dir="rtl"] .input-group > .form-control:not(:first-child),
html[dir="rtl"] .input-group > .form-select:not(:first-child) {
    border-radius: 10px 0 0 10px !important;
    border-right: 1.5px solid #CBD5E1 !important;
}

/* In LTR: First child is on LEFT, input is on RIGHT */
[dir="ltr"] .input-group > .input-group-text:first-child,
html[dir="ltr"] .input-group > .input-group-text:first-child {
    border-radius: 10px 0 0 10px !important;
    border-right: none !important;
}

[dir="ltr"] .input-group > .form-control:not(:first-child),
[dir="ltr"] .input-group > .form-select:not(:first-child),
html[dir="ltr"] .input-group > .form-control:not(:first-child),
html[dir="ltr"] .input-group > .form-select:not(:first-child) {
    border-radius: 0 10px 10px 0 !important;
    border-left: 1.5px solid #CBD5E1 !important;
}

/* Focus Illumination */
.input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.12) !important;
    border-radius: 10px !important;
}

.input-group:focus-within > .input-group-text {
    border-color: #0E5B46 !important;
    background-color: #F0FDF4 !important;
}

.input-group:focus-within > .input-group-text i {
    color: #0E5B46 !important;
}

.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select {
    border-color: #0E5B46 !important;
    box-shadow: none !important;
}

/* Validation States Integration */
.input-group:has(.form-control.is-invalid) > .input-group-text {
    border-color: #EF4444 !important;
    background-color: #FEF2F2 !important;
}

.input-group:has(.form-control.is-invalid) > .input-group-text i {
    color: #EF4444 !important;
}

.input-group > .form-control.is-invalid {
    border-color: #EF4444 !important;
    background-color: #FEF2F2 !important;
}

.input-group:has(.form-control.is-valid) > .input-group-text {
    border-color: #10B981 !important;
    background-color: #F0FDF4 !important;
}

.input-group:has(.form-control.is-valid) > .input-group-text i {
    color: #10B981 !important;
}

.input-group > .form-control.is-valid {
    border-color: #10B981 !important;
    background-color: #F0FDF4 !important;
}

/* ===================================================================
 * Executive Printing System (Z4U Smart Standard)
 * =================================================================== */
@media print {
    /* Hide layout navigation, sidebar, hero buttons, KPI stat cards, filters, pagination, footer */
    .layout-navbar,
    .layout-menu,
    .layout-menu-toggle,
    .hesba-navbar,
    .navbar,
    nav,
    .hesba-hero-header .hesba-hero-actions,
    .hesba-hero-header .btn,
    .hesba-hero-header .btn-brand-primary,
    .hesba-hero-header .btn-group,
    .hesba-hero-header a,
    .hesba-stat-card,
    .hesba-stat-wrapper,
    .row.g-3.mb-4,
    form,
    .position-relative.w-100,
    .bg-white.border.rounded-top-4,
    .btn-icon-action,
    .table thead th:first-child:has(input[type="checkbox"]),
    .table tbody td:first-child:has(input[type="checkbox"]),
    .table thead th:last-child,
    .table tbody td:last-child,
    .pagination,
    footer,
    .no-print {
        display: none !important;
    }

    @page {
        size: A4 landscape;
        margin: 8mm 10mm 10mm 10mm;
    }

    body {
        background: #FFFFFF !important;
        color: #0F172A !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10pt !important;
    }

    .layout-wrapper, .layout-container, .layout-page, .content-wrapper, .container-xxl, .show-page {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Print Header from Hero Header */
    .hesba-hero-header {
        border-bottom: 2.5px solid #0E5B46 !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
        box-shadow: none !important;
        background: none !important;
    }

    .hesba-hero-title {
        font-size: 16pt !important;
        color: #0E5B46 !important;
        font-weight: 900 !important;
    }

    .hesba-hero-subtitle {
        font-size: 9.5pt !important;
        color: #64748B !important;
    }

    /* Table printing */
    .table-brand-wrapper, .table-responsive {
        border: none !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    .hesba-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important;
    }

    .hesba-table thead th {
        background-color: #0E5B46 !important;
        color: #FFFFFF !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        padding: 6px 6px !important;
        border: 1px solid #0A4333 !important;
    }

    .hesba-table tbody td {
        padding: 5px 6px !important;
        border: 1px solid #E2E8F0 !important;
        color: #1E293B !important;
    }

    .hesba-table tbody tr:nth-child(even) {
        background-color: #F8FAFC !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}




/* ==========================================================================
   Z4U SMART - GLOBAL MASTER DEFINITIONS & EXECUTIVE TABLES DESIGN SYSTEM
   ========================================================================== */

    :root {
        --z4u-primary: #0E5B46;
        --z4u-primary-dark: #08382B;
        --z4u-primary-subtle: rgba(14, 91, 70, 0.08);
        --z4u-gold: #D4AF7C;
        --z4u-border: #E2E8F0;
    }

    .master-page-wrapper {
        background-color: var(--brand-canvas, #FAF8F5);
        min-height: calc(100vh - 76px);
        padding-bottom: 2rem;
    }

    .master-header-hero {
        background: #FFFFFF;
        border: 1.5px solid var(--z4u-border);
        border-radius: 14px;
        padding: 0.95rem 1.35rem 1.15rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 4px 16px -2px rgba(14, 91, 70, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
        position: relative;
        overflow: hidden;
    }

    .master-header-hero::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 3.5px;
        background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 50%, #0E5B46 100%);
    }

    .master-header-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.65rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid #F1F5F9;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .master-breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.82rem;
        color: #64748B;
        font-weight: 600;
        margin: 0;
        padding: 0;
    }

    .breadcrumb-item-link {
        color: #64748B;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        transition: color 0.18s ease;
    }

    .breadcrumb-item-link:hover {
        color: var(--z4u-primary);
    }

    .breadcrumb-sep {
        font-size: 0.75rem;
        color: #94A3B8;
    }

    .breadcrumb-item-current {
        color: var(--z4u-primary);
        font-weight: 800;
    }

    .master-status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--z4u-primary);
        background: rgba(14, 91, 70, 0.06);
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        border: 1px solid rgba(14, 91, 70, 0.15);
    }

    .status-dot {
        width: 7.5px;
        height: 7.5px;
        border-radius: 50%;
        background: #10B981;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        animation: statusPulse 2s infinite ease-in-out;
    }

    @keyframes statusPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.25); opacity: 0.75; }
    }

    .master-header-main-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        flex-wrap: wrap;
    }

    .master-header-info {
        display: flex;
        align-items: center;
        gap: 0.95rem;
    }

    .master-header-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(14, 91, 70, 0.1) 0%, rgba(212, 175, 124, 0.15) 100%);
        border: 1px solid rgba(14, 91, 70, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--z4u-primary);
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .master-header-title {
        font-size: 1.35rem;
        font-weight: 900;
        color: #0F172A;
        margin: 0;
        letter-spacing: -0.01em;
    }

    .master-header-subtitle {
        font-size: 0.82rem;
        color: #64748B;
        margin-top: 0.2rem;
        margin-bottom: 0;
        font-weight: 500;
    }

    .btn-hero-create {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.86rem;
        font-weight: 700;
        padding: 0.55rem 1.15rem;
        border-radius: 10px;
        background: linear-gradient(135deg, #0E5B46 0%, #08382B 100%) !important;
        color: #FFFFFF !important;
        border: 1.5px solid #0E5B46 !important;
        box-shadow: 0 3px 10px rgba(14, 91, 70, 0.28) !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-hero-create:hover {
        background: linear-gradient(135deg, #137359 0%, #0E5B46 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(14, 91, 70, 0.35) !important;
    }

    /* ── Unified Luxury Form Action Buttons across All Edit & Create Screens ── */
    .btn-hero-save {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        padding: 0.55rem 1.45rem !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #0E5B46 0%, #08382B 100%) !important;
        color: #FFFFFF !important;
        border: 1.5px solid #0E5B46 !important;
        box-shadow: 0 3px 10px rgba(14, 91, 70, 0.28) !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        cursor: pointer !important;
        min-height: 38px !important;
    }

    .btn-hero-save:hover {
        background: linear-gradient(135deg, #137359 0%, #0E5B46 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(14, 91, 70, 0.35) !important;
        color: #FFFFFF !important;
    }

    .btn-hero-new {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        padding: 0.55rem 1.35rem !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #D4AF7C 0%, #B89358 100%) !important;
        color: #2D1A04 !important;
        border: 1.5px solid #B89358 !important;
        box-shadow: 0 3px 10px rgba(212, 175, 124, 0.25) !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        cursor: pointer !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 38px !important;
    }

    .btn-hero-new:hover {
        background: linear-gradient(135deg, #DFBE8E 0%, #C8A265 100%) !important;
        color: #1A0F02 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(212, 175, 124, 0.35) !important;
    }

    .btn-hero-new i {
        color: #2D1A04 !important;
        font-size: 0.9rem !important;
    }

    .btn-hero-delete {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        padding: 0.55rem 1.35rem !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
        color: #FFFFFF !important;
        border: 1.5px solid #DC2626 !important;
        box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25) !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        cursor: pointer !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 38px !important;
    }

    .btn-hero-delete:hover {
        background: linear-gradient(135deg, #F87171 0%, #EF4444 100%) !important;
        color: #FFFFFF !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35) !important;
    }

    .btn-hero-delete i {
        color: #FFFFFF !important;
        font-size: 0.9rem !important;
    }

    .btn-hero-back {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        padding: 0.55rem 1.25rem !important;
        border-radius: 10px !important;
        background: #FFFFFF !important;
        color: #475569 !important;
        border: 1.5px solid #CBD5E1 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        cursor: pointer !important;
        min-height: 38px !important;
    }

    .btn-hero-back:hover {
        background: #F8FAFC !important;
        color: #0E5B46 !important;
        border-color: #0E5B46 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(14, 91, 70, 0.12) !important;
    }

    /* ── Global Master Action Footer & Fallback for Old Action Bars (Light Mode) ── */
    html:not(.dark-style):not([data-theme="dark"]) .master-action-footer,
    html:not(.dark-style):not([data-theme="dark"]) .master-command-card > .d-flex.justify-content-center:has(button[type="submit"]),
    html:not(.dark-style):not([data-theme="dark"]) .master-page-wrapper .container.my-4:has(button[type="submit"]) {
        background: #FFFFFF !important;
        border: 1px solid rgba(14, 91, 70, 0.12) !important;
        border-radius: 14px !important;
        padding: 0.85rem 1.5rem !important;
        margin-top: 1.75rem !important;
        margin-bottom: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.85rem !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        box-shadow: 0 4px 16px rgba(14, 91, 70, 0.05) !important;
    }

    /* Fallback auto-styling for buttons in legacy action bars */
    .master-command-card > .d-flex.justify-content-center a[href*="Create"],
    .master-page-wrapper .container.my-4:has(button[type="submit"]) a[href*="Create"],
    .master-page-wrapper .container.my-4:has(button[type="submit"]) a.btn-outline-success {
        background: linear-gradient(135deg, #D4AF7C 0%, #B89358 100%) !important;
        color: #2D1A04 !important;
        border: 1.5px solid #B89358 !important;
        border-radius: 10px !important;
        padding: 0.55rem 1.35rem !important;
        font-weight: 700 !important;
        font-size: 0.88rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        box-shadow: 0 3px 10px rgba(212, 175, 124, 0.25) !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 38px !important;
    }

    .master-command-card > .d-flex.justify-content-center a[href*="Create"] i,
    .master-page-wrapper .container.my-4:has(button[type="submit"]) a[href*="Create"] i,
    .master-page-wrapper .container.my-4:has(button[type="submit"]) a.btn-outline-success i {
        color: #2D1A04 !important;
    }

    .master-command-card > .d-flex.justify-content-center a[onclick*="Delete"],
    .master-page-wrapper .container.my-4:has(button[type="submit"]) a[onclick*="Delete"],
    .master-page-wrapper .container.my-4:has(button[type="submit"]) a.btn-danger {
        background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
        color: #FFFFFF !important;
        border: 1.5px solid #DC2626 !important;
        border-radius: 10px !important;
        padding: 0.55rem 1.35rem !important;
        font-weight: 700 !important;
        font-size: 0.88rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25) !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 38px !important;
    }

    .master-command-card > .d-flex.justify-content-center a[onclick*="Delete"] i,
    .master-page-wrapper .container.my-4:has(button[type="submit"]) a[onclick*="Delete"] i,
    .master-page-wrapper .container.my-4:has(button[type="submit"]) a.btn-danger i {
        color: #FFFFFF !important;
    }


    .kpi-stat-card {
        background: #FFFFFF;
        border: 1.5px solid var(--z4u-border);
        border-radius: 12px;
        padding: 1rem 1.15rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        box-shadow: 0 2px 8px rgba(14, 91, 70, 0.04);
        transition: all 0.2s ease;
        height: 100%;
    }

    .kpi-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(14, 91, 70, 0.08);
        border-color: rgba(14, 91, 70, 0.25);
    }

    .kpi-stat-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #64748B;
        text-transform: uppercase;
        margin: 0;
    }

    .kpi-stat-value {
        font-size: 1.25rem;
        font-weight: 900;
        color: #0F172A;
        margin: 0;
        line-height: 1.2;
    }

    .kpi-stat-icon-wrapper {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
        background: rgba(14, 91, 70, 0.1);
        color: var(--z4u-primary);
    }

    .master-command-card {
        background: #FFFFFF;
        border: 1.5px solid var(--z4u-border);
        border-radius: 12px;
        padding: 0.85rem 1.15rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .smart-search-group {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .smart-search-group .search-leading-icon,
    .search-leading-icon {
        position: absolute;
        inset-inline-start: 14px !important;
        inset-inline-end: auto !important;
        color: #94A3B8;
        font-size: 1.1rem;
        pointer-events: none;
        z-index: 2;
    }

    .smart-search-group .smart-search-input,
    .smart-search-input {
        width: 100% !important;
        height: 42px !important;
        background: #F8FAFC;
        border: 1.5px solid #E2E8F0 !important;
        border-radius: 9px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        padding-inline-start: 2.85rem !important;
        padding-inline-end: 5.25rem !important;
        font-size: 0.88rem !important;
        font-weight: 500 !important;
        color: #0F172A;
        transition: all 0.2s ease;
    }

    .smart-search-input:focus {
        background: #FFFFFF;
        border-color: #0E5B46;
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15);
        outline: none;
    }

    .search-shortcut-badge {
        position: absolute;
        left: 10px;
        background: #FFFFFF;
        border: 1px solid #CBD5E1;
        border-radius: 6px;
        padding: 0.15rem 0.45rem;
        font-size: 0.72rem;
        font-weight: 700;
        color: #64748B;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease-in-out;
        z-index: 2;
    }

    .search-shortcut-badge:hover {
        background: #F8FAFC;
        border-color: #0E5B46;
        color: #0E5B46;
        box-shadow: 0 1px 3px rgba(14, 91, 70, 0.1);
    }

    html[dir="ltr"] .search-shortcut-badge {
        left: auto;
        right: 10px;
    }

    .master-table-card {
        background: #FFFFFF;
        border: 1.5px solid var(--z4u-border);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04);
        margin-bottom: 1.5rem;
    }

    .master-table {
        margin-bottom: 0 !important;
        width: 100%;
    }

    .master-table thead th {
        background: linear-gradient(180deg, #F8FAFC 0%, #EDF4F1 100%) !important;
        color: #0E5B46 !important;
        font-weight: 800 !important;
        font-size: 0.82rem !important;
        padding: 0.85rem 0.75rem !important;
        border-bottom: 2px solid #CBD5E1 !important;
        border-top: none !important;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    .master-table tbody td {
        padding: 0.75rem 0.65rem !important;
        font-size: 0.85rem !important;
        color: #1E293B;
        vertical-align: middle;
        text-align: center;
        border-bottom: 1px solid #EDF2F7 !important;
        border-top: none !important;
    }

    .master-table tbody tr:nth-child(even) {
        background-color: #FAFCFB;
    }

    .master-table tbody tr:hover {
        background-color: rgba(14, 91, 70, 0.04) !important;
    }

    .badge-code {
        background: rgba(14, 91, 70, 0.09);
        color: #0E5B46;
        border: 1px solid rgba(14, 91, 70, 0.2);
        font-weight: 800;
        font-size: 0.82rem;
        padding: 0.3rem 0.65rem;
        border-radius: 8px;
    }

    .table-action-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        transition: all 0.18s ease;
        text-decoration: none !important;
        font-size: 0.85rem;
        cursor: pointer;
    }

    .table-action-edit {
        background: #F1F5F9;
        color: #475569;
        border-color: #E2E8F0;
    }

    .table-action-edit:hover {
        background: #0E5B46;
        color: #FFFFFF;
        border-color: #0E5B46;
        transform: translateY(-1px);
    }

    .table-action-delete {
        background: #FEF2F2;
        color: #DC2626;
        border-color: #FEE2E2;
    }

    .table-action-delete:hover {
        background: #DC2626;
        color: #FFFFFF;
        border-color: #DC2626;
        transform: translateY(-1px);
    }

    .btn-grid-page {
        min-width: 34px;
        height: 34px;
        padding: 0 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 700;
        border: 1px solid #E2E8F0;
        background: #FFFFFF;
        color: #475569;
        transition: all 0.18s ease;
        cursor: pointer;
        text-decoration: none !important;
    }

    .btn-grid-page:hover:not(.disabled):not(.active) {
        background: #F1F5F9;
        border-color: #0E5B46;
        color: #0E5B46;
    }

    .btn-grid-page.active {
        background: #0E5B46 !important;
        border-color: #0E5B46 !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 6px rgba(14, 91, 70, 0.25);
    }

    .btn-grid-page.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: #F8FAFC;
    }



/* ==========================================================================
   Executive Z4U Bill / Bond Header Hero Card & Hero Action Buttons
   ========================================================================== */
.bill-header-hero {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 0.85rem 1.25rem 1rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 4px 16px -2px rgba(14, 91, 70, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    overflow: hidden !important;
}

.bill-header-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 50%, #0E5B46 100%) !important;
}

.bill-header-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 0.6rem !important;
    margin-bottom: 0.65rem !important;
    border-bottom: 1px solid #F1F5F9 !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.bill-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    font-size: 0.82rem !important;
    color: #64748B !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-item-link {
    color: #64748B !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: color 0.18s ease !important;
}

.breadcrumb-item-link:hover {
    color: #0E5B46 !important;
}

.breadcrumb-sep {
    font-size: 0.75rem !important;
    color: #94A3B8 !important;
}

.breadcrumb-item-current {
    color: #0E5B46 !important;
    font-weight: 800 !important;
}

.bill-header-status-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #0E5B46 !important;
    background: rgba(14, 91, 70, 0.06) !important;
    padding: 0.2rem 0.65rem !important;
    border-radius: 20px !important;
    border: 1px solid rgba(14, 91, 70, 0.15) !important;
}

.status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
    animation: statusPulse 2s infinite ease-in-out !important;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.75; }
}

.bill-header-main-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

.bill-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
}

.bill-header-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.12) 0%, rgba(14, 91, 70, 0.05) 100%) !important;
    color: #0E5B46 !important;
    font-size: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid rgba(14, 91, 70, 0.2) !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.bill-header-hero:hover .bill-header-icon-box {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    transform: scale(1.05) !important;
}

.bill-header-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

.bill-badge-number {
    background: rgba(14, 91, 70, 0.1) !important;
    color: #0E5B46 !important;
    border: 1px solid rgba(14, 91, 70, 0.25) !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    padding: 0.2rem 0.65rem !important;
    border-radius: 8px !important;
}

.bill-badge-draft {
    background: rgba(212, 175, 124, 0.15) !important;
    color: #8C6226 !important;
    border: 1px solid rgba(212, 175, 124, 0.35) !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    padding: 0.2rem 0.65rem !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.bill-header-subtitle {
    font-size: 0.8rem !important;
    color: #64748B !important;
    font-weight: 500 !important;
    margin: 0.2rem 0 0 !important;
    line-height: 1.35 !important;
}

/* Executive Hero Action Buttons */
.bill-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.btn-hero-action {
    height: 40px !important;
    padding: 0.45rem 1.15rem !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.btn-hero-action i {
    font-size: 1.15rem !important;
    transition: transform 0.2s ease !important;
}

/* 1. Primary Save Button: Hero Gradient Emerald */
.btn-hero-save {
    background: linear-gradient(135deg, #0E5B46 0%, #08382B 100%) !important;
    color: #FFFFFF !important;
    border: 1.5px solid #0E5B46 !important;
    box-shadow: 0 3px 10px rgba(14, 91, 70, 0.28) !important;
}

.btn-hero-save:hover {
    background: linear-gradient(135deg, #137359 0%, #0E5B46 100%) !important;
    color: #FFFFFF !important;
    border-color: #137359 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(14, 91, 70, 0.38) !important;
}

.btn-hero-save:hover i {
    transform: scale(1.15) !important;
}

.btn-hero-save:active {
    transform: translateY(0) !important;
}

/* 2. Secondary New Button: Soft Emerald Tint with Crisp Border */
.btn-hero-new {
    background: rgba(14, 91, 70, 0.06) !important;
    color: #0E5B46 !important;
    border: 1.5px solid rgba(14, 91, 70, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.btn-hero-new:hover {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border-color: #0E5B46 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(14, 91, 70, 0.25) !important;
}

.btn-hero-new i {
    color: #0E5B46 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.btn-hero-new:hover i {
    color: #FFFFFF !important;
    transform: rotate(90deg) scale(1.12) !important;
}

.btn-hero-new:active {
    transform: translateY(0) !important;
}

/* 3. Navigation Back Button: Executive Neutral */
.btn-hero-back {
    background: #FFFFFF !important;
    color: #475569 !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.btn-hero-back:hover {
    background: #F8FAFC !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(100, 116, 139, 0.16) !important;
}

.btn-hero-back:hover i {
    transform: translateX(3px) !important;
}

.btn-hero-back:active {
    transform: translateY(0) !important;
}

/* 4. Delete Action Button: Soft Rose Danger with High-Contrast Crimson Icon & Text */
.btn-hero-delete {
    background: rgba(220, 38, 38, 0.06) !important;
    color: #DC2626 !important;
    border: 1.5px solid rgba(220, 38, 38, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    font-weight: 700 !important;
}

.btn-hero-delete i {
    color: #DC2626 !important;
    font-size: 0.95rem !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.btn-hero-delete span {
    color: #DC2626 !important;
    transition: color 0.2s ease !important;
}

.btn-hero-delete:hover {
    background: #DC2626 !important;
    color: #FFFFFF !important;
    border-color: #DC2626 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28) !important;
}

.btn-hero-delete:hover i,
.btn-hero-delete:hover span {
    color: #FFFFFF !important;
}

.btn-hero-delete:hover i {
    transform: scale(1.15) !important;
}

.btn-hero-delete:active {
    transform: translateY(0) !important;
}


/* ==========================================================================
   Executive Z4U Bill Action Toolbar & Action Buttons (Print, PDF, Compliance)
   ========================================================================== */
.bill-action-bar-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px -2px rgba(14, 91, 70, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    margin-top: 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

.bill-action-bar-card .bill-section-body {
    padding: 0.85rem 1.25rem !important;
}

/* Executive Print Buttons */
.btn-hero-print {
    background: #FFFFFF !important;
    color: #334155 !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.btn-hero-print:hover {
    background: #F8FAFC !important;
    color: #0E5B46 !important;
    border-color: #0E5B46 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(14, 91, 70, 0.15) !important;
}

.btn-hero-print i {
    color: #0E5B46 !important;
    transition: transform 0.2s ease !important;
}

.btn-hero-print:hover i {
    transform: scale(1.15) !important;
}

.btn-hero-print:active {
    transform: translateY(0) !important;
}

/* Executive PDF Button */
.btn-hero-pdf {
    background: #FFF1F2 !important;
    color: #E11D48 !important;
    border: 1.5px solid #FECDD3 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.btn-hero-pdf:hover {
    background: #E11D48 !important;
    color: #FFFFFF !important;
    border-color: #E11D48 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.25) !important;
}

.btn-hero-pdf i {
    color: #E11D48 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.btn-hero-pdf:hover i {
    color: #FFFFFF !important;
    transform: scale(1.15) !important;
}

.btn-hero-pdf:active {
    transform: translateY(0) !important;
}

/* Executive Compliance (ZATCA / ETA) Buttons */
.btn-hero-zatca {
    background: rgba(13, 148, 136, 0.08) !important;
    color: #0D9488 !important;
    border: 1.5px solid rgba(13, 148, 136, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.btn-hero-zatca:hover:not(:disabled) {
    background: #0D9488 !important;
    color: #FFFFFF !important;
    border-color: #0D9488 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.25) !important;
}

.btn-hero-zatca:hover:not(:disabled) i {
    transform: scale(1.15) !important;
}

.btn-hero-zatca:active {
    transform: translateY(0) !important;
}

.btn-hero-eta {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #2563EB !important;
    border: 1.5px solid rgba(37, 99, 235, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.btn-hero-eta:hover:not(:disabled) {
    background: #2563EB !important;
    color: #FFFFFF !important;
    border-color: #2563EB !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
}

.btn-hero-eta:hover:not(:disabled) i {
    transform: scale(1.15) !important;
}

.btn-hero-eta:active {
    transform: translateY(0) !important;
}


.btn-icon-action.btn-receipt { 
    background-color: rgba(99, 102, 241, 0.08) !important; 
    border-color: rgba(99, 102, 241, 0.2) !important; 
    color: #4F46E5 !important; 
}
.btn-icon-action.btn-receipt:hover:not(:disabled) { 
    background-color: #4F46E5 !important; 
    border-color: #4F46E5 !important;
    color: #FFFFFF !important; 
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
}
.btn-icon-action.btn-store-print { 
    background-color: rgba(14, 116, 144, 0.08) !important; 
    border-color: rgba(14, 116, 144, 0.2) !important; 
    color: #0E7490 !important; 
}
.btn-icon-action.btn-store-print:hover:not(:disabled) { 
    background-color: #0E7490 !important; 
    border-color: #0E7490 !important;
    color: #FFFFFF !important; 
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px rgba(14, 116, 144, 0.25) !important;
}


/* ==========================================================================
   Luxury Executive Tree & Chart of Accounts (Z4U Smart Guide Identity)
   ========================================================================== */
.guide-tree-panel {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(14, 91, 70, 0.05) !important;
    overflow: hidden !important;
}

.guide-tree-toolbar {
    background: #F8FAFC !important;
    border-bottom: 1.5px solid #E2E8F0 !important;
    padding: 0.75rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

.guide-level-pill {
    padding: 0.35rem 0.85rem !important;
    border-radius: 8px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.guide-level-pill:hover {
    border-color: #0E5B46 !important;
    color: #0E5B46 !important;
    background: #F8FAFC !important;
}

.guide-level-pill.active {
    background: #0E5B46 !important;
    border-color: #0E5B46 !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(14, 91, 70, 0.25) !important;
}

.guide-action-pill {
    padding: 0.35rem 0.85rem !important;
    border-radius: 8px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.guide-action-pill:hover {
    background: #F1F5F9 !important;
    color: #0E5B46 !important;
}

.guide-tree-node {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.35rem !important;
    border: 1.5px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    background: #FFFFFF !important;
}

.guide-tree-node:hover {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    transform: translateX(-2px) !important;
}

.guide-tree-node.active-selected {
    background: rgba(14, 91, 70, 0.06) !important;
    border-color: #0E5B46 !important;
    box-shadow: 0 2px 10px rgba(14, 91, 70, 0.12) !important;
}

.guide-node-code-badge {
    font-family: monospace, 'Courier New' !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 6px !important;
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0 !important;
}

.guide-tree-node.active-selected .guide-node-code-badge {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border-color: #0E5B46 !important;
}

.guide-node-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.guide-node-icon.folder {
    background: rgba(212, 175, 124, 0.18) !important;
    color: #B48842 !important;
}

.guide-node-icon.file {
    background: rgba(14, 91, 70, 0.12) !important;
    color: #0E5B46 !important;
}

.guide-node-title {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    color: #1E293B !important;
}

.guide-node-level-tag {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 6px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
}

.guide-detail-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 1.4rem !important;
    box-shadow: 0 4px 20px -2px rgba(14, 91, 70, 0.05) !important;
    position: sticky !important;
    top: 1rem !important;
}

.guide-detail-header {
    border-bottom: 1.5px solid #F1F5F9 !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.25rem !important;
}

.guide-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

.guide-detail-item {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 0.75rem 0.9rem !important;
}

.guide-detail-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
}

.guide-detail-value {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin: 0 !important;
}


/* ==========================================================================
   Executive Bond & Bill Container & Layout Alignment
   ========================================================================== */
.entry-page-wrapper, .bill-page-wrapper {
    background-color: var(--brand-canvas, #FAF8F5) !important;
    min-height: calc(100vh - 76px) !important;
    padding-bottom: 2rem !important;
    overflow-x: clip !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure forms inside bond/bill wrappers align seamlessly with hero cards */
.entry-page-wrapper form.show-page,
.bill-page-wrapper form.show-page,
.entry-page-wrapper form,
.bill-page-wrapper form {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Fix Select2 accessible hidden selects blowing out document width in RTL */
select.select2-hidden-accessible {
    width: 1px !important;
    height: 1px !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}


/* ==========================================================================
   Streamlined Header Date Widget & Interactive Command Palette (Ctrl + K)
   ========================================================================== */
.hesba-header-date-widget {
    height: 38px !important;
    padding: 0 0.85rem !important;
    border-radius: 9px !important;
    background: #FAF8F5 !important;
    border: 1.5px solid rgba(212, 175, 124, 0.45) !important;
    display: none !important;
    align-items: center !important;
    gap: 0.55rem !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
}

@media (min-width: 1200px) {
    .hesba-header-date-widget {
        display: inline-flex !important;
    }
}

.hesba-header-date-widget:hover {
    background: #FFFFFF !important;
    border-color: #D4AF7C !important;
    box-shadow: 0 2px 8px rgba(212, 175, 124, 0.2) !important;
}

.hesba-date-icon-box {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.hesba-date-year {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: #0E5B46 !important;
    background: rgba(14, 91, 70, 0.09) !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    line-height: 1 !important;
}

.hesba-date-divider {
    color: #CBD5E1 !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
}

.hesba-date-main {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Command Palette Backdrop */
.hesba-search-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 1060 !important;
    transition: opacity 0.2s ease !important;
}

/* Command Palette Dropdown */
.hesba-search-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 530px !important;
    max-width: 90vw !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(14, 91, 70, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px -12px rgba(14, 91, 70, 0.22), 0 12px 24px -8px rgba(0,0,0,0.1) !important;
    z-index: 100050 !important;
    overflow: hidden !important;
    text-align: right !important;
    direction: rtl !important;
    animation: hesbaDropdownFadeIn 0.18s ease-out !important;
}

[dir="ltr"] .hesba-search-dropdown {
    right: auto !important;
    left: 0 !important;
    text-align: left !important;
    direction: ltr !important;
}

@keyframes hesbaDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hesba-search-header {
    background: #F8FAFC !important;
    padding: 0.75rem 1.15rem !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.hesba-search-header .small {
    font-size: 0.8rem !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
}

.hesba-search-results-list {
    max-height: 400px !important;
    overflow-y: auto !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    list-style: none !important;
}

.hesba-search-results-list::-webkit-scrollbar {
    width: 6px !important;
}
.hesba-search-results-list::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
    border-radius: 4px !important;
}

.hesba-search-section-title {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #0E5B46 !important;
    padding: 0.6rem 0.85rem 0.3rem !important;
    letter-spacing: 0.03em !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.hesba-search-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 0.6rem 0.85rem !important;
    border-radius: 10px !important;
    color: #1E293B !important;
    text-decoration: none !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    margin-bottom: 3px !important;
    text-align: start !important;
    border: 1px solid transparent !important;
}

.hesba-search-item:hover,
.hesba-search-item.is-selected {
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
    border-color: rgba(14, 91, 70, 0.14) !important;
}

.hesba-search-item-info {
    display: flex !important;
    flex-direction: column !important;
    text-align: start !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.hesba-search-item-title {
    font-weight: 700 !important;
    color: #1E293B !important;
    line-height: 1.3 !important;
    text-align: start !important;
    font-size: 0.87rem !important;
}

.hesba-search-item:hover .hesba-search-item-title,
.hesba-search-item.is-selected .hesba-search-item-title {
    color: #0E5B46 !important;
}

.hesba-search-item-subtitle {
    font-size: 0.74rem !important;
    color: #64748B !important;
    margin-top: 1px !important;
    line-height: 1.3 !important;
    text-align: start !important;
}

.hesba-search-item-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(14, 91, 70, 0.07) !important;
    color: #0E5B46 !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
    transition: all 0.16s ease !important;
}

.hesba-search-item:hover .hesba-search-item-icon,
.hesba-search-item.is-selected .hesba-search-item-icon {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(14, 91, 70, 0.35) !important;
}

.hesba-search-item:hover .hesba-search-item-icon i,
.hesba-search-item.is-selected .hesba-search-item-icon i {
    color: #FFFFFF !important;
}

.hesba-search-item-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.22rem 0.65rem !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    margin-inline-start: auto !important;
    letter-spacing: 0.02em !important;
}

.hesba-search-item-badge.badge-soft-emerald {
    background: rgba(14, 91, 70, 0.1) !important;
    color: #0E5B46 !important;
    border: 1px solid rgba(14, 91, 70, 0.2) !important;
}

.hesba-search-item-badge.badge-soft-amber {
    background: rgba(212, 175, 124, 0.16) !important;
    color: #8C6228 !important;
    border: 1px solid rgba(212, 175, 124, 0.3) !important;
}

.hesba-search-item-badge.badge-soft-blue {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border: 1px solid #BFDBFE !important;
}

.hesba-search-item-badge.badge-soft-teal {
    background: #F0FDFA !important;
    color: #0F766E !important;
    border: 1px solid #99F6E4 !important;
}

.hesba-search-item-badge.badge-soft-cyan {
    background: #ECFEFF !important;
    color: #0E7490 !important;
    border: 1px solid #A5F3FC !important;
}

.hesba-search-item-badge.badge-soft-purple {
    background: #FAF5FF !important;
    color: #6B21A8 !important;
    border: 1px solid #E9D5FF !important;
}

.hesba-search-item-badge.badge-soft-gray {
    background: #F8FAFC !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0 !important;
}

.hesba-search-footer {
    background: #F8FAFC !important;
    border-top: 1px solid #F1F5F9 !important;
    padding: 0.45rem 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.72rem !important;
    color: #64748B !important;
}

.hesba-search-kbd-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.hesba-search-kbd-hint kbd {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    padding: 0.1rem 0.35rem !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

/* ══════════════════════════════════════════════════════════════════
 * Hesba & Z4U Brand Identity - Complete SweetAlert2 Redesign
 * ══════════════════════════════════════════════════════════════════ */
.swal2-container {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    background: rgba(15, 23, 42, 0.65) !important;
    z-index: 999999 !important;
}

.swal2-popup {
    font-family: 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 22px !important;
    box-shadow: 0 25px 60px -15px rgba(14, 91, 70, 0.25), 0 15px 35px -5px rgba(0, 0, 0, 0.1) !important;
    padding: 2.2rem 2rem !important;
    position: relative !important;
    overflow: hidden !important;
    max-width: 490px !important;
    width: 92% !important;
}

.swal2-popup::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 50%, #0E5B46 100%) !important;
}

.swal2-title {
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    padding: 0 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
}

.swal2-html-container {
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #64748B !important;
    line-height: 1.65 !important;
    margin: 0.5rem 0 1.5rem !important;
    padding: 0 0.5rem !important;
}

/* Custom Animated Brand Icons */
.swal2-icon {
    width: 76px !important;
    height: 76px !important;
    margin: 0.5rem auto 0.75rem !important;
    border-width: 3px !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.06) !important;
}

.swal2-icon.swal2-success {
    border-color: #10B981 !important;
    color: #059669 !important;
    background: rgba(16, 185, 129, 0.08) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border: 4px solid rgba(16, 185, 129, 0.25) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #059669 !important;
}

.swal2-icon.swal2-warning {
    border-color: #F59E0B !important;
    color: #D97706 !important;
    background: rgba(245, 158, 11, 0.08) !important;
}
.swal2-icon.swal2-warning .swal2-icon-content {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 800 !important;
    color: #D97706 !important;
}

.swal2-icon.swal2-error {
    border-color: #EF4444 !important;
    color: #DC2626 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #DC2626 !important;
}

.swal2-icon.swal2-info {
    border-color: #0EA5E9 !important;
    color: #0284C7 !important;
    background: rgba(14, 165, 233, 0.08) !important;
}

.swal2-icon.swal2-question {
    border-color: #D4AF7C !important;
    color: #B48A4E !important;
    background: rgba(212, 175, 124, 0.12) !important;
}

/* Actions & Buttons */
.swal2-actions {
    gap: 12px !important;
    margin: 1.25rem 0 0 !important;
    width: 100% !important;
    justify-content: center !important;
}

.swal2-styled {
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 0.65rem 1.6rem !important;
    border-radius: 10px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0 !important;
    outline: none !important;
}

.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #0E5B46 0%, #08382B 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(14, 91, 70, 0.3) !important;
}

.swal2-styled.swal2-confirm:hover {
    background: linear-gradient(135deg, #13775c 0%, #0c4e3c 100%) !important;
    box-shadow: 0 6px 20px rgba(14, 91, 70, 0.45) !important;
    transform: translateY(-1.5px) !important;
}

/* Danger / Delete button style */
.swal2-styled.swal2-confirm.btn-danger,
.swal2-popup:has(.swal2-warning) .swal2-styled.swal2-confirm,
.swal2-popup:has(.swal2-error) .swal2-styled.swal2-confirm,
.swal2-styled.swal2-confirm.swal2-danger {
    background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

.swal2-styled.swal2-confirm.btn-danger:hover,
.swal2-popup:has(.swal2-warning) .swal2-styled.swal2-confirm:hover,
.swal2-popup:has(.swal2-error) .swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm.swal2-danger:hover {
    background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5) !important;
    transform: translateY(-1.5px) !important;
}

.swal2-styled.swal2-cancel {
    background: #F8FAFC !important;
    color: #64748B !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-cancel:hover {
    background: #F1F5F9 !important;
    color: #1E293B !important;
    border-color: #94A3B8 !important;
    transform: translateY(-1.5px) !important;
}

.swal2-timer-progress-bar {
    background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 100%) !important;
    height: 4px !important;
}

.swal2-close {
    border-radius: 8px !important;
    color: #94A3B8 !important;
    transition: all 0.2s ease !important;
    font-size: 1.4rem !important;
    top: 14px !important;
    right: 14px !important;
}

.swal2-close:hover {
    color: #0F172A !important;
    background: #F1F5F9 !important;
}

/* Inputs inside Swal */
.swal2-input, .swal2-textarea, .swal2-select {
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    font-size: 0.95rem !important;
    color: #1E293B !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
    border-color: #0E5B46 !important;
    box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15) !important;
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════
 * Hesba & Z4U Brand Identity - Luxury Tooltips & Field Info Icons
 * ══════════════════════════════════════════════════════════════════ */
.tooltip {
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    z-index: 999999 !important;
    pointer-events: none !important;
}

.tooltip .tooltip-inner {
    background: #0B1914 !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(212, 175, 124, 0.45) !important;
    border-radius: 8px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(14, 91, 70, 0.2) !important;
    max-width: 300px !important;
    text-align: center !important;
}

/* Tooltip Arrow - Crisp geometric triangle pointing toward target */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #0B1914 !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #0B1914 !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="start"] .tooltip-arrow::before {
    border-left-color: #0B1914 !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="end"] .tooltip-arrow::before {
    border-right-color: #0B1914 !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

/* Field Info Icon */
.field-info-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94A3B8 !important;
    font-size: 0.82rem !important;
    margin-inline-start: 0.35rem !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    vertical-align: middle !important;
}

.field-info-icon:hover {
    color: #0E5B46 !important;
    transform: scale(1.22) !important;
}

/* Enhanced action button tooltip cursor */
.table-action-btn {
    position: relative;
    cursor: pointer;
}

/* ===================================================================
   Z4U Modern Executive Footer
   =================================================================== */
.z4u-app-footer {
    position: relative;
    background: #FFFFFF;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 -4px 20px rgba(14, 91, 70, 0.035);
    z-index: 20;
    margin-top: auto;
    transition: all 0.25s ease;
}

/* Offset for fixed sidebar on desktop so content is never covered */
@media (min-width: 1200px) {
    html[dir="rtl"] .z4u-app-footer {
        padding-right: 260px !important;
        padding-left: 1rem !important;
    }
    html[dir="rtl"].layout-menu-collapsed .z4u-app-footer {
        padding-right: 78px !important;
    }
    html[dir="ltr"] .z4u-app-footer {
        padding-left: 260px !important;
        padding-right: 1rem !important;
    }
    html[dir="ltr"].layout-menu-collapsed .z4u-app-footer {
        padding-left: 78px !important;
    }
}

.z4u-footer-accent-bar {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(14, 91, 70, 0.15) 0%, #0E5B46 25%, #D4AF7C 50%, #0E5B46 75%, rgba(14, 91, 70, 0.15) 100%);
}

.z4u-footer-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}

.z4u-footer-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(14, 91, 70, 0.15));
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.z4u-footer-logo-img:hover {
    transform: scale(1.12) rotate(4deg);
}

.z4u-footer-copyright {
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.3;
}

.z4u-footer-brand-title {
    color: #0E5B46 !important;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.z4u-footer-brand-title:hover {
    color: #D4AF7C !important;
}

.z4u-footer-tagline {
    font-size: 0.74rem;
    color: #64748B;
    font-weight: 500;
    margin-top: 1px;
}

/* Center Pill Badge */
.z4u-footer-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F7FAF9;
    border: 1px solid rgba(14, 91, 70, 0.14);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(14, 91, 70, 0.04);
    transition: all 0.2s ease;
}

.z4u-footer-status-pill:hover {
    background: #FFFFFF;
    border-color: #D4AF7C;
    box-shadow: 0 4px 12px rgba(212, 175, 124, 0.18);
}

.z4u-status-pulse {
    position: relative;
    width: 10px;
    height: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.z4u-status-pulse .pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #10B981;
    border-radius: 50%;
    z-index: 2;
}

.z4u-status-pulse .pulse-ring {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(16, 185, 129, 0.35);
    animation: z4uPulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

@keyframes z4uPulse {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.z4u-status-text {
    font-weight: 600;
    color: #0E5B46;
}

.z4u-status-sep {
    color: #CBD5E1;
    font-size: 0.85rem;
}

.z4u-status-version {
    color: #475569;
    font-weight: 600;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
}

.text-gold {
    color: #D4AF7C !important;
}

/* Action Links */
.z4u-footer-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569 !important;
    text-decoration: none !important;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.z4u-footer-action-btn i {
    font-size: 0.9rem;
    color: #0E5B46;
    transition: all 0.2s ease;
}

.z4u-footer-action-btn:hover {
    color: #0E5B46 !important;
    background: #FFFFFF;
    border-color: #D4AF7C;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(212, 175, 124, 0.18);
}

.z4u-footer-action-btn:hover i {
    transform: scale(1.15);
    color: #D4AF7C;
}

.z4u-footer-scroll-top-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #0E5B46;
    cursor: pointer;
    transition: all 0.2s ease;
}

.z4u-footer-scroll-top-btn:hover {
    background: #0E5B46;
    color: #FFFFFF;
    border-color: #0E5B46;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.25);
}

/* Dark style support */
.dark-style .z4u-app-footer {
    background: #232733;
    border-color: #383F50;
}
.dark-style .z4u-footer-copyright {
    color: #E2E8F0;
}
.dark-style .z4u-footer-status-pill {
    background: #1C202B;
    border-color: #2F3646;
}
.dark-style .z4u-footer-action-btn,
.dark-style .z4u-footer-scroll-top-btn {
    background: #1C202B;
    border-color: #2F3646;
    color: #CBD5E1 !important;
}

/* ══════════════════════════════════════════════════════════
   Z4U LUXURY DEFINITION CARDS & CREATE PAGES
   ══════════════════════════════════════════════════════════ */
.def-create-card, .item-workspace-card {
    background: #ffffff;
    border: 1px solid rgba(14, 91, 70, 0.1);
    border-radius: 16px;
    box-shadow: 0 4px 24px -2px rgba(14, 91, 70, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.def-create-card:hover, .item-workspace-card:hover {
    border-color: rgba(14, 91, 70, 0.18);
    box-shadow: 0 8px 30px -4px rgba(14, 91, 70, 0.08);
}
.def-card-header, .item-card-header {
    background: linear-gradient(180deg, #fafcfb 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(14, 91, 70, 0.08);
    padding: 0.95rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.def-card-header::before, .item-card-header::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0E5B46 0%, #D4AF7C 100%);
}
.def-card-title, .item-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.def-card-icon, .item-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(14, 91, 70, 0.08);
    color: #0E5B46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.def-card-body, .item-card-body {
    padding: 1.35rem;
}
.field-info-icon {
    font-size: 0.8rem;
    color: #94A3B8;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    vertical-align: middle;
}
.field-info-icon:hover {
    color: #0E5B46;
    transform: scale(1.15);
}
.form-label-def {
    font-size: 0.84rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.form-label-def .req-star {
    color: #ef4444;
    font-weight: 700;
}
.master-action-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(14, 91, 70, 0.08);
}

/* ══════════════════════════════════════════════════════════
   Z4U CAPSULE TABS & TOGGLES (Base / Light Mode Default)
   ══════════════════════════════════════════════════════════ */
.z4u-capsule-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 6px !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    margin-bottom: 1.5rem !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    list-style: none !important;
}
.z4u-capsule-tabs .nav-item {
    flex: 1 1 calc(16.666% - 8px) !important;
    min-width: 140px !important;
    margin: 0 !important;
}
.z4u-capsule-tabs .nav-link {
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
.z4u-capsule-tabs .nav-link:hover {
    background: #FFFFFF !important;
    border-color: #D4AF7C !important;
    color: #0E5B46 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}
.z4u-capsule-tabs .nav-link.active,
.z4u-capsule-tabs .nav-link.active span,
.z4u-capsule-tabs .nav-link.active * {
    background: linear-gradient(135deg, #0E5B46 0%, #10B981 100%) !important;
    color: #FFFFFF !important;
    border-color: #0E5B46 !important;
    box-shadow: 0 4px 14px rgba(14, 91, 70, 0.3) !important;
}
.z4u-capsule-tabs .nav-link.active i {
    color: #FFFFFF !important;
}

.z4u-toggle-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 14px 18px !important;
    min-height: 66px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 6px rgba(14, 91, 70, 0.03) !important;
}
.z4u-toggle-card:hover {
    background: #F8FAFC !important;
    border-color: #10B981 !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.12) !important;
    transform: translateY(-2px) !important;
}
.z4u-toggle-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}
.z4u-toggle-card:hover .z4u-toggle-icon {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #0E5B46 !important;
    transform: scale(1.05) !important;
}
.z4u-toggle-label {
    color: #0F172A !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    display: block !important;
}
.z4u-toggle-sub {
    color: #64748B !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    display: block !important;
    margin-top: 3px !important;
}

.z4u-toggle-card .form-check-input {
    width: 48px !important;
    height: 26px !important;
    min-width: 48px !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    margin: 0 !important;
    background-color: #CBD5E1 !important;
    border: 1.5px solid #94A3B8 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e") !important;
    background-position: right 3px center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.z4u-toggle-card .form-check-input:checked {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
    background-position: left 3px center !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
}
[dir="ltr"] .z4u-toggle-card .form-check-input {
    background-position: left 3px center !important;
}
[dir="ltr"] .z4u-toggle-card .form-check-input:checked {
    background-position: right 3px center !important;
}

/* ── Luxury Form Section Headers & Quick Add Button (Base / Light Mode) ── */
.z4u-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0E5B46;
    margin-bottom: 0.85rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed rgba(14, 91, 70, 0.15);
}
.z4u-section-title i {
    color: #D4AF7C;
    font-size: 0.95rem;
}
.btn-quick-add {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    color: #0E5B46;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
}
.btn-quick-add:hover {
    background: #0E5B46;
    border-color: #0E5B46;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(14, 91, 70, 0.2);
}
.z4u-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.45rem;
    width: 100%;
}

/* ── Global Principle: Hide KPI highlight cards row across all Master List/Display pages (keeping Dashboard intact) ── */
.master-page-wrapper .kpi-stat-card,
.master-page-wrapper .row:has(.kpi-stat-card),
.master-page-wrapper > .row:has(> [class*="col-"] > .kpi-stat-card) {
    display: none !important;
}

/* ── Executive Capital & Financial Health Dashboard ── */
.capital-dashboard-section {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(14, 91, 70, 0.04);
    position: relative;
    overflow: hidden;
}

.capital-dashboard-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 50%, #0E5B46 100%);
}

.capital-header-bar {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #E2E8F0;
}

.capital-title-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.capital-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.1) 0%, rgba(212, 175, 124, 0.15) 100%);
    color: #0E5B46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    border: 1px solid rgba(14, 91, 70, 0.15);
}

.capital-filter-badge {
    background: #FAF8F5;
    border: 1px solid rgba(212, 175, 124, 0.4);
    border-radius: 10px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.capital-hero-card {
    background: linear-gradient(135deg, #0E5B46 0%, #08382B 100%);
    color: #FFFFFF;
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(14, 91, 70, 0.35);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.capital-hero-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(212, 175, 124, 0.22) 0%, transparent 70%);
    top: -60px;
    left: -60px;
    border-radius: 50%;
    pointer-events: none;
}

.capital-metric-subcard {
    background: #FAFBFB;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.capital-metric-subcard:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

.capital-metric-subcard.emerald {
    border-inline-start: 4px solid #0E5B46;
}

.capital-metric-subcard.rose {
    border-inline-start: 4px solid #E11D48;
}

.capital-metric-subcard.gold {
    border-inline-start: 4px solid #D4AF7C;
}

.capital-ledger-box {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.25rem 1.35rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.capital-ledger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid #F1F5F9;
}

.capital-ledger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    margin-bottom: 0.4rem;
    transition: all 0.15s ease;
    background: #FAFAFA;
    border: 1px solid #F1F5F9;
}

.capital-ledger-item:hover {
    background: #F1F5F9;
    border-color: #E2E8F0;
}

.capital-item-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.capital-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.capital-op-card {
    background: #FAFBFB;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.capital-op-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #E2E8F0;
}

.capital-table-mini {
    width: 100%;
    font-size: 0.82rem;
}

.capital-table-mini th {
    color: #64748B;
    font-weight: 600;
    padding: 0.35rem 0.45rem;
}

.capital-table-mini td {
    padding: 0.4rem 0.45rem;
    color: #1E293B;
}

.capital-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.capital-badge-emerald {
    background: #E8F5F1 !important;
    color: #0E5B46 !important;
    border: 1px solid rgba(14, 91, 70, 0.25);
}

.capital-badge-rose {
    background: #FFF1F2 !important;
    color: #E11D48 !important;
    border: 1px solid rgba(225, 29, 72, 0.25);
}

.capital-badge-amber {
    background: #FFFBEB !important;
    color: #B45309 !important;
    border: 1px solid rgba(180, 83, 9, 0.25);
}

.capital-icon-emerald {
    background: #E8F5F1 !important;
    color: #0E5B46 !important;
}

.capital-icon-rose {
    background: #FFF1F2 !important;
    color: #E11D48 !important;
}

.capital-icon-blue {
    background: #EFF6FF !important;
    color: #2563EB !important;
}

.capital-icon-amber {
    background: #FFFBEB !important;
    color: #D97706 !important;
}

.capital-icon-slate {
    background: #F1F5F9 !important;
    color: #64748B !important;
}

/* ── Capital Dedicated Filter Toolbar ── */
.capital-filter-toolbar {
    background: #FAF8F5;
    border: 1px solid #E5E0D5;
    border-radius: 14px;
    padding: 0.65rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.capital-filter-inputs-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.capital-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0E5B46;
    padding-inline-end: 0.25rem;
}

.capital-date-pill {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    padding: 0.25rem 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    gap: 0.45rem;
    transition: all 0.2s ease;
}

.capital-date-pill:focus-within {
    border-color: #0E5B46;
    box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.12);
}

.capital-date-pill-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748B;
    margin-bottom: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.capital-date-pill-input {
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0F172A;
    outline: none;
    padding: 0.15rem 0.25rem;
    width: 125px;
    cursor: pointer;
    font-family: inherit;
}

.capital-btn-filter {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.45rem 1.15rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(14, 91, 70, 0.25) !important;
    cursor: pointer !important;
    height: 36px;
}

.capital-btn-filter:hover {
    background: #0A4333 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.35) !important;
    color: #FFFFFF !important;
}

.capital-btn-report {
    background: #FFFFFF !important;
    color: #0E5B46 !important;
    border: 1.5px solid rgba(14, 91, 70, 0.25) !important;
    border-radius: 12px !important;
    padding: 0.5rem 1.15rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.capital-btn-report:hover {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border-color: #0E5B46 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(14, 91, 70, 0.2) !important;
}

/* ── Voucher Table Amount Badges (High Contrast & Luxury Finish) ── */
.voucher-badge-debit {
    background-color: #E8F5F1 !important;
    color: #0E5B46 !important;
    border: 1px solid rgba(14, 91, 70, 0.25) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    font-family: var(--font-inter), 'Segoe UI', monospace !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 8px !important;
    display: inline-block !important;
    min-width: 80px !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(14, 91, 70, 0.05) !important;
}

.voucher-badge-credit {
    background-color: #FFF1F2 !important;
    color: #BE123C !important;
    border: 1px solid rgba(190, 18, 60, 0.25) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    font-family: var(--font-inter), 'Segoe UI', monospace !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 8px !important;
    display: inline-block !important;
    min-width: 80px !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(190, 18, 60, 0.05) !important;
}

.voucher-badge-zero {
    background-color: #F8FAFC !important;
    color: #94A3B8 !important;
    border: 1px solid #E2E8F0 !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    font-family: var(--font-inter), 'Segoe UI', monospace !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 8px !important;
    display: inline-block !important;
    min-width: 80px !important;
    text-align: center !important;
}

/* Fallback Protection: Ensures any legacy badge classes in entry-table remain readable */
.entry-table .badge.bg-success,
.entry-table .badge.text-success {
    background-color: #E8F5F1 !important;
    color: #0E5B46 !important;
    border: 1px solid rgba(14, 91, 70, 0.25) !important;
    font-weight: 700 !important;
}

.entry-table .badge.bg-danger,
.entry-table .badge.text-danger {
    background-color: #FFF1F2 !important;
    color: #BE123C !important;
    border: 1px solid rgba(190, 18, 60, 0.25) !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   Z4U EXECUTIVE SELECT2 SUITE
   - Fixes dropdown width alignment in RTL/LTR
   - Elegant executive palette (Emerald #0E5B46, Gold, Soft Neutral Backgrounds)
   - Polished search box and high-contrast readable options
   ════════════════════════════════════════════════════════════════════════════ */

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid #d0dcd5 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.select2-container--default .select2-selection--single:hover {
    border-color: var(--brand-emerald, #0E5B46) !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--brand-emerald, #0E5B46) !important;
    box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.12) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    color: #1a2e26 !important;
    font-weight: 600 !important;
    font-size: 0.93rem !important;
    padding-right: 14px !important;
    padding-left: 36px !important;
}

html[dir="ltr"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[dir="ltr"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 14px !important;
    padding-right: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Dropdown Menu Container */
.select2-dropdown {
    border: 1px solid #d0dcd5 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(14, 91, 70, 0.12), 0 4px 12px rgba(0,0,0,0.06) !important;
    background: #ffffff !important;
    z-index: 99999 !important;
    overflow: hidden !important;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: 1px solid #d0dcd5 !important;
    border-radius: 12px !important;
    margin-top: -4px !important;
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #d0dcd5 !important;
    border-radius: 12px !important;
    margin-top: 4px !important;
}

/* Search Box Inside Dropdown */
.select2-search--dropdown {
    padding: 10px 12px !important;
    background-color: #F8FAF9 !important;
    border-bottom: 1px solid #eef2f0 !important;
}

.select2-search--dropdown .select2-search__field {
    height: 38px !important;
    border: 1px solid #d0dcd5 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
    color: #1a2e26 !important;
    outline: none !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-emerald, #0E5B46) !important;
    box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15) !important;
}

/* Options List */
.select2-results__options {
    max-height: 260px !important;
    padding: 6px !important;
}

.select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #d0dcd5;
    border-radius: 10px;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: var(--brand-emerald, #0E5B46);
}

/* Individual Option Item */
.select2-results__option {
    padding: 8px 14px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: #2c4238 !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
    transition: all 0.15s ease !important;
    line-height: 1.5 !important;
    word-break: break-word;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #E8F5F1 !important;
    color: var(--brand-emerald, #0E5B46) !important;
    font-weight: 700 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--brand-emerald, #0E5B46) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* ===================================================================
 * UNIFIED PROJECT DESIGN SYSTEM - CENTRALIZED COMPONENT SUITES
 * All Index, Upsert, and Master Views inherit from this single source
 * =================================================================== */


/* ── Unified Navbar Alignments (from home.css) ── */
html[dir="ltr"] .navbar-nav.flex-grow-1 {
    flex-direction: row !important;
}
.collapse.d-sm-inline-flex .navbar-brand {
    margin-top: 6px !important;
}
html[dir="rtl"] .dropdown.notification-list .nav-user {
    margin-top: 3px !important;
    margin-right: 14px !important;
    margin-left: 0 !important;
}
html[dir="ltr"] .dropdown.notification-list .nav-user {
    margin-top: 3px !important;
    margin-left: 14px !important;
    margin-right: 0 !important;
}
.navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 1.25rem;
    white-space: nowrap;
    margin: 0 !important;
}
html[dir="rtl"] .dropdown-toggle::after {
    margin-top: -.45em !important;
    margin-right: .45em !important;
    margin-left: 0 !important;
}
html[dir="ltr"] .dropdown-toggle::after {
    margin-top: -.45em !important;
    margin-left: .45em !important;
    margin-right: 0 !important;
}


/* ── SECTION A: Unified Entry Index Suite ── */
:root {
        --entry-brand-primary: #0E5B46;
        --entry-brand-primary-hover: #0A4333;
        --entry-brand-primary-subtle: rgba(14, 91, 70, 0.08);
        --entry-brand-gold: #D4AF7C;
        --entry-brand-gold-subtle: rgba(212, 175, 124, 0.15);
        --entry-border-color: #E2E8F0;
        --entry-card-bg: #FFFFFF;
    }

    .entry-page-wrapper {
        background-color: var(--brand-canvas, #FAF8F5);
        min-height: calc(100vh - 76px);
        padding-bottom: 2rem;
    }

    .entry-header-hero {
        background: #FFFFFF;
        border: 1.5px solid var(--entry-border-color);
        border-radius: 14px;
        padding: 0.95rem 1.35rem 1.15rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 4px 16px -2px rgba(14, 91, 70, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
        position: relative;
        overflow: hidden;
    }

    .entry-header-hero::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 3.5px;
        background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 50%, #0E5B46 100%);
    }

    .entry-header-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.65rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid #F1F5F9;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .entry-breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.82rem;
        color: #64748B;
        font-weight: 600;
        margin: 0;
        padding: 0;
    }

    .breadcrumb-item-link {
        color: #64748B;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        transition: color 0.18s ease;
    }

    .breadcrumb-item-link:hover {
        color: var(--entry-brand-primary);
    }

    .breadcrumb-sep {
        font-size: 0.75rem;
        color: #94A3B8;
    }

    .breadcrumb-item-current {
        color: var(--entry-brand-primary);
        font-weight: 800;
    }

    .entry-header-status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--entry-brand-primary);
        background: rgba(14, 91, 70, 0.06);
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        border: 1px solid rgba(14, 91, 70, 0.15);
    }

    .status-dot {
        width: 7.5px;
        height: 7.5px;
        border-radius: 50%;
        background: #10B981;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        animation: statusPulse 2s infinite ease-in-out;
    }

    @@keyframes statusPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.25); opacity: 0.75; }
    }

    .entry-header-main-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        flex-wrap: wrap;
    }

    .entry-header-info {
        display: flex;
        align-items: center;
        gap: 0.95rem;
    }

    .entry-header-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(14, 91, 70, 0.1) 0%, rgba(212, 175, 124, 0.15) 100%);
        border: 1px solid rgba(14, 91, 70, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--entry-brand-primary);
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .entry-header-title {
        font-size: 1.35rem;
        font-weight: 900;
        color: #0F172A;
        margin: 0;
        letter-spacing: -0.01em;
    }

    .entry-header-subtitle {
        font-size: 0.82rem;
        color: #64748B;
        margin-top: 0.2rem;
        margin-bottom: 0;
        font-weight: 500;
    }

    .entry-header-actions {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        flex-wrap: wrap;
    }

    .btn-hero-action {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.86rem;
        font-weight: 700;
        padding: 0.55rem 1.15rem;
        border-radius: 10px;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        text-decoration: none !important;
        border: none;
        cursor: pointer;
    }

    .btn-hero-create {
        background: linear-gradient(135deg, #0E5B46 0%, #08382B 100%) !important;
        color: #FFFFFF !important;
        border: 1.5px solid #0E5B46 !important;
        box-shadow: 0 3px 10px rgba(14, 91, 70, 0.28) !important;
    }

    .btn-hero-create:hover {
        background: linear-gradient(135deg, #137359 0%, #0E5B46 100%) !important;
        color: #FFFFFF !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(14, 91, 70, 0.35) !important;
    }

    .kpi-stat-card {
        background: #FFFFFF;
        border: 1.5px solid var(--entry-border-color);
        border-radius: 12px;
        padding: 1rem 1.15rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        box-shadow: 0 2px 8px rgba(14, 91, 70, 0.04);
        transition: all 0.2s ease;
        height: 100%;
    }

    .kpi-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(14, 91, 70, 0.08);
        border-color: rgba(14, 91, 70, 0.25);
    }

    .kpi-stat-info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .kpi-stat-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #64748B;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin: 0;
    }

    .kpi-stat-value {
        font-size: 1.25rem;
        font-weight: 900;
        color: #0F172A;
        margin: 0;
        line-height: 1.2;
    }

    .kpi-stat-unit {
        font-size: 0.72rem;
        color: #94A3B8;
        font-weight: 600;
    }

    .kpi-stat-icon-wrapper {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
    }

    .kpi-icon-debit {
        background: rgba(14, 91, 70, 0.1);
        color: #0E5B46;
    }

    .kpi-icon-credit {
        background: rgba(212, 175, 124, 0.2);
        color: #8C6226;
    }

    .kpi-icon-balance {
        background: rgba(16, 185, 129, 0.12);
        color: #10B981;
    }

    .kpi-icon-records {
        background: rgba(100, 116, 139, 0.1);
        color: #475569;
    }

    .entry-command-card {
        background: #FFFFFF;
        border: 1.5px solid var(--entry-border-color);
        border-radius: 12px;
        padding: 0.85rem 1.15rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .smart-search-group {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .smart-search-group .search-leading-icon,
    .search-leading-icon {
        position: absolute;
        inset-inline-start: 14px !important;
        inset-inline-end: auto !important;
        color: #94A3B8;
        font-size: 1.1rem;
        pointer-events: none;
        z-index: 2;
    }

    .smart-search-group .smart-search-input,
    .smart-search-input {
        width: 100% !important;
        height: 42px !important;
        background: #F8FAFC;
        border: 1.5px solid #E2E8F0 !important;
        border-radius: 9px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        padding-inline-start: 2.85rem !important;
        padding-inline-end: 5.25rem !important;
        font-size: 0.88rem !important;
        font-weight: 500 !important;
        color: #0F172A;
        transition: all 0.2s ease;
    }

    .smart-search-input:focus {
        background: #FFFFFF;
        border-color: #0E5B46;
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15);
        outline: none;
    }

    .smart-search-group .search-shortcut-badge,
    .search-shortcut-badge {
        position: absolute;
        inset-inline-end: 10px !important;
        inset-inline-start: auto !important;
        background: #FFFFFF;
        border: 1px solid #CBD5E1;
        border-radius: 6px;
        padding: 0.15rem 0.45rem;
        font-size: 0.72rem;
        font-weight: 700;
        color: #64748B;
        pointer-events: none;
        z-index: 2;
    }

    .entry-table-card {
        background: #FFFFFF;
        border: 1.5px solid var(--entry-border-color);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04);
        margin-bottom: 1.5rem;
    }

    .entry-table {
        margin-bottom: 0 !important;
        width: 100%;
    }

    .entry-table thead th {
        background: linear-gradient(180deg, #F8FAFC 0%, #EDF4F1 100%) !important;
        color: #0E5B46 !important;
        font-weight: 800 !important;
        font-size: 0.82rem !important;
        padding: 0.85rem 0.75rem !important;
        border-bottom: 2px solid #CBD5E1 !important;
        border-top: none !important;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        letter-spacing: 0.01em;
    }

    .entry-table tbody td {
        padding: 0.75rem 0.65rem !important;
        font-size: 0.85rem !important;
        color: #1E293B;
        vertical-align: middle;
        text-align: center;
        border-bottom: 1px solid #EDF2F7 !important;
        border-top: none !important;
    }

    .entry-table tbody tr:nth-child(even) {
        background-color: #FAFCFB;
    }

    .entry-table tbody tr:hover {
        background-color: rgba(14, 91, 70, 0.04) !important;
    }

    .badge-entry-number {
        background: rgba(14, 91, 70, 0.09);
        color: #0E5B46;
        border: 1px solid rgba(14, 91, 70, 0.2);
        font-weight: 800;
        font-size: 0.82rem;
        padding: 0.3rem 0.65rem;
        border-radius: 8px;
    }

    .badge-debit {
        background: rgba(14, 91, 70, 0.08);
        color: #0E5B46;
        font-weight: 800;
        font-size: 0.84rem;
        padding: 0.25rem 0.6rem;
        border-radius: 6px;
        display: inline-block;
    }

    .badge-credit {
        background: rgba(212, 175, 124, 0.16);
        color: #8C6226;
        font-weight: 800;
        font-size: 0.84rem;
        padding: 0.25rem 0.6rem;
        border-radius: 6px;
        display: inline-block;
    }

    .table-action-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        transition: all 0.18s ease;
        text-decoration: none !important;
        font-size: 0.85rem;
        cursor: pointer;
    }

    .table-action-edit {
        background: #F1F5F9;
        color: #475569;
        border-color: #E2E8F0;
    }

    .table-action-edit:hover {
        background: #0E5B46;
        color: #FFFFFF;
        border-color: #0E5B46;
        transform: translateY(-1px);
    }

    .table-action-delete {
        background: #FEF2F2;
        color: #DC2626;
        border-color: #FEE2E2;
    }

    .table-action-delete:hover {
        background: #DC2626;
        color: #FFFFFF;
        border-color: #DC2626;
        transform: translateY(-1px);
    }

    .entry-pagination-bar {
        background: #FFFFFF;
        border-top: 1.5px solid #F1F5F9;
        padding: 0.85rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .pagination-controls {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    .btn-grid-page {
        min-width: 34px;
        height: 34px;
        padding: 0 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 700;
        border: 1px solid #E2E8F0;
        background: #FFFFFF;
        color: #475569;
        transition: all 0.18s ease;
        cursor: pointer;
        text-decoration: none !important;
    }

    .btn-grid-page:hover:not(.disabled):not(.active) {
        background: #F1F5F9;
        border-color: #0E5B46;
        color: #0E5B46;
    }

    .btn-grid-page.active {
        background: #0E5B46 !important;
        border-color: #0E5B46 !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 6px rgba(14, 91, 70, 0.25);
    }

    .btn-grid-page.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: #F8FAFC;
    }
/* ── JourEntry Index Extensions ── */
.badge-debit {
    background: rgba(14, 91, 70, 0.08);
    color: var(--entry-brand-primary, #0E5B46);
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
}
.badge-credit {
    background: rgba(212, 175, 124, 0.16);
    color: #8C6226;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
}
.badge-shift {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
    font-weight: 600;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    font-size: 0.75rem;
}
.btn-action-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}
.btn-action-edit {
    background: rgba(14, 91, 70, 0.08);
    color: var(--entry-brand-primary, #0E5B46);
    border: 1px solid rgba(14, 91, 70, 0.15);
}
.btn-action-edit:hover {
    background: var(--entry-brand-primary, #0E5B46);
    color: #FFFFFF;
    transform: translateY(-1px);
}
.btn-action-delete {
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn-action-delete:hover {
    background: #EF4444;
    color: #FFFFFF;
    transform: translateY(-1px);
}


/* ── SECTION B: Unified Entry Upsert Suite ── */
:root {
        --z4u-primary: #0E5B46;
        --z4u-primary-dark: #08382B;
        --z4u-primary-light: #E8F5F1;
        --z4u-gold: #D4AF7C;
        --z4u-gold-hover: #b89360;
        --z4u-border: #E0E6E3;
        --z4u-bg-card: #FFFFFF;
        --z4u-text-muted: #6C757D;
    }

    

    .entry-card {
        background: #ffffff;
        border: 1px solid var(--z4u-border);
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        margin-bottom: 20px;
        transition: all 0.25s ease;
    }

    .entry-card:hover {
        box-shadow: 0 8px 24px rgba(14, 91, 70, 0.07);
        border-color: #c9dbd3;
    }

    .entry-card-header {
        padding: 16px 22px;
        border-bottom: 1px solid #f0f4f2;
        background-color: #fafcfb;
        border-radius: 14px 14px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .entry-card-header h5 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        color: #1a332a;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .entry-card-header h5 i {
        color: var(--z4u-primary);
        font-size: 1.15rem;
    }

    .entry-card-body {
        padding: 22px;
    }

    .form-label-custom {
        font-size: 0.82rem;
        font-weight: 600;
        color: #3b5047;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .form-control-custom, .form-select-custom {
        border: 1px solid #d5ded9;
        border-radius: 10px;
        padding: 9px 14px;
        font-size: 0.92rem;
        transition: all 0.2s ease;
        background-color: #fff;
    }

    .form-control-custom:focus, .form-select-custom:focus {
        border-color: var(--z4u-primary);
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.12);
        outline: none;
    }

    .form-control-readonly {
        background-color: #f7f9f8 !important;
        color: #495057;
        font-weight: 600;
        border-color: #e2e8e5;
    }

    .entry-table-wrap {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--z4u-border);
    }

    .entry-table {
        margin-bottom: 0;
    }

    .entry-table thead th {
        background: linear-gradient(180deg, #0E5B46 0%, #0a4635 100%);
        color: #ffffff;
        font-weight: 600;
        font-size: 0.88rem;
        padding: 12px 14px;
        border: none;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    .entry-table tbody td {
        padding: 11px 14px;
        font-size: 0.9rem;
        vertical-align: middle;
        text-align: center;
        border-bottom: 1px solid #edf2ef;
    }

    .entry-table tbody tr:hover {
        background-color: #f6faf8;
    }

    .btn-emerald {
        background-color: var(--z4u-primary);
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 24px;
        font-weight: 600;
        font-size: 0.92rem;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(14, 91, 70, 0.2);
    }

    .btn-emerald:hover {
        background-color: var(--z4u-primary-dark);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(14, 91, 70, 0.28);
    }

    .btn-gold {
        background-color: var(--z4u-gold);
        color: #2c1a04;
        border: none;
        border-radius: 10px;
        padding: 10px 24px;
        font-weight: 700;
        font-size: 0.92rem;
        transition: all 0.2s ease;
    }

    .btn-gold:hover {
        background-color: var(--z4u-gold-hover);
        color: #2c1a04;
    }

    .btn-outline-custom {
        border: 1px solid #d0dcd5;
        background: white;
        color: #2c4238;
        border-radius: 10px;
        padding: 9px 20px;
        font-weight: 600;
        transition: all 0.2s;
    }

    .btn-outline-custom:hover {
        background: #f2f7f4;
        border-color: var(--z4u-primary);
        color: var(--z4u-primary);
    }

    .summary-metric-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 16px 20px;
        border: 1px solid var(--z4u-border);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .summary-metric-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .summary-metric-icon.debit {
        background-color: #E8F5F1;
        color: var(--z4u-primary);
    }

    .summary-metric-icon.credit {
        background-color: #FFF4E5;
        color: #D97706;
    }

    .summary-metric-icon.balance {
        background-color: #EFF6FF;
        color: #2563EB;
    }

    .balance-status-badge {
        font-size: 0.82rem;
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .balance-balanced {
        background-color: #DCFCE7;
        color: #15803D;
        border: 1px solid #BBF7D0;
    }

    .balance-unbalanced {
        background-color: #FEE2E2;
        color: #B91C1C;
        border: 1px solid #FECACA;
    }

    .delete-action-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background-color: #FEE2E2;
        color: #DC2626;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .delete-action-btn:hover {
        background-color: #DC2626;
        color: white;
        transform: scale(1.08);
    }
/* ── Master Upsert Extensions (Customer, Supplier, Company) ── */
.master-header-hero {
    background: #FFFFFF;
    border: 1.5px solid var(--z4u-border, #E0E6E3);
    border-radius: 14px;
    padding: 0.95rem 1.35rem 1.15rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px -2px rgba(14, 91, 70, 0.05);
    position: relative;
    overflow: hidden;
}
.master-header-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 50%, #0E5B46 100%);
}
.master-header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.65rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #F1F5F9;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.master-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: #64748B;
    font-weight: 600;
}
.master-header-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.master-header-info {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}
.master-header-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.1) 0%, rgba(212, 175, 124, 0.15) 100%);
    color: var(--z4u-primary, #0E5B46);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.master-header-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    line-height: 1.3;
}
.master-header-subtitle {
    font-size: 0.82rem;
    color: #64748B;
    margin: 0.2rem 0 0 0;
}
.master-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    background: rgba(14, 91, 70, 0.08);
    color: var(--z4u-primary, #0E5B46);
}
.status-dot {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background: currentColor;
}
.master-badge-code {
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    background: #F1F5F9;
    color: #475569;
}
.master-command-card {
    background: #FFFFFF;
    border: 1px solid var(--z4u-border, #E0E6E3);
    border-radius: 14px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: all 0.2s ease;
}
.master-command-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 18px rgba(14, 91, 70, 0.05);
}
.master-card-header {
    padding: 0.85rem 1.25rem;
    background: #FAFBFB;
    border-bottom: 1px solid var(--z4u-border, #E0E6E3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.master-card-header h5 {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.master-card-header h5 i {
    color: var(--z4u-primary, #0E5B46);
    font-size: 1.05rem;
}
.master-card-body {
    padding: 1.25rem 1.35rem;
}
.master-action-footer {
    background: #FFFFFF;
    border: 1px solid var(--z4u-border, #E0E6E3);
    border-radius: 14px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.radio-pill-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.radio-pill-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.18s ease;
}
.radio-pill-item:hover {
    border-color: var(--z4u-primary, #0E5B46);
    background: #F1F5F9;
}
.btn-map-trigger {
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.08) 0%, rgba(212, 175, 124, 0.12) 100%);
    color: var(--z4u-primary, #0E5B46);
    border: 1px solid rgba(14, 91, 70, 0.2);
    border-radius: 8px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-map-trigger:hover {
    background: var(--z4u-primary, #0E5B46);
    color: #FFFFFF;
    transform: translateY(-1px);
}


/* ── Ensure High-Contrast Soft Rose btn-hero-delete Priority ── */
.btn-hero-delete,
.btn-hero-danger.btn-hero-delete,
a.btn-hero-delete,
button.btn-hero-delete {
    background-color: #FEF2F2 !important;
    color: #DC2626 !important;
    border: 1px solid #FECACA !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.05) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    font-weight: 700 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.btn-hero-delete i,
.btn-hero-delete svg,
.btn-hero-delete .bx,
.btn-hero-delete .fa {
    color: #DC2626 !important;
    transition: all 0.2s ease !important;
}

.btn-hero-delete:hover,
.btn-hero-delete:focus {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
    border-color: #DC2626 !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28) !important;
    transform: translateY(-1.5px) !important;
}

.btn-hero-delete:hover i,
.btn-hero-delete:hover svg,
.btn-hero-delete:hover .bx,
.btn-hero-delete:hover .fa {
    color: #FFFFFF !important;
}


/* ── Master Views Extra Components ── */
.balance-card-metric {
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.06) 0%, rgba(212, 175, 124, 0.12) 100%);
    border: 1.5px solid rgba(14, 91, 70, 0.15);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    text-align: center;
}
.logo-preview-box {
    width: 100%;
    height: 140px;
    border: 2px dashed #CBD5E1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}
.logo-preview-box:hover {
    border-color: var(--z4u-primary, #0E5B46);
    background: #F1F5F9;
}
#map {
    height: 400px;
    width: 100%;
    border-radius: 12px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}


/* ===================================================================
 * ── Z4U Executive Dark Mode - "الدارك مود الرايق" ──
 * Theme: Obsidian Slate & Emerald with Warm Gold Luxury Accents
 * =================================================================== */

/* ── Theme Switcher Toggle Button in Header ── */
.hesba-theme-toggle-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(14, 91, 70, 0.25) !important;
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.08) 0%, rgba(212, 175, 124, 0.12) 100%) !important;
    color: #0E5B46 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.hesba-theme-toggle-btn:hover {
    border-color: #D4AF7C !important;
    background: rgba(212, 175, 124, 0.18) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(212, 175, 124, 0.25) !important;
}

.hesba-theme-toggle-btn .theme-icon-moon {
    font-size: 1.25rem !important;
    color: #0E5B46 !important;
    display: inline-block !important;
    transition: transform 0.3s ease, color 0.2s ease !important;
}

.hesba-theme-toggle-btn .theme-icon-sun {
    font-size: 1.25rem !important;
    color: #D4AF7C !important;
    display: none !important;
    transition: transform 0.3s ease, color 0.2s ease !important;
}

/* Active Dark Mode Button State */
[data-theme="dark"] .hesba-theme-toggle-btn,
html.dark-style .hesba-theme-toggle-btn {
    border-color: rgba(212, 175, 124, 0.4) !important;
    background: rgba(212, 175, 124, 0.14) !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .hesba-theme-toggle-btn:hover,
html.dark-style .hesba-theme-toggle-btn:hover {
    background: rgba(212, 175, 124, 0.25) !important;
    border-color: #D4AF7C !important;
    box-shadow: 0 0 14px rgba(212, 175, 124, 0.35) !important;
}

[data-theme="dark"] .hesba-theme-toggle-btn .theme-icon-moon,
html.dark-style .hesba-theme-toggle-btn .theme-icon-moon {
    display: none !important;
}

[data-theme="dark"] .hesba-theme-toggle-btn .theme-icon-sun,
html.dark-style .hesba-theme-toggle-btn .theme-icon-sun {
    display: inline-block !important;
}

/* ── Dark Mode Tokens Override ── */
[data-theme="dark"],
html.dark-style {
    color-scheme: dark;

    /* Surface & Canvas Tokens */
    --brand-canvas: #0B1315;
    --brand-canvas-alt: #0F1A1C;
    --brand-surface: #132024;
    --entry-card-bg: #132024;
    --z4u-bg-card: #132024;
    --bill-card-bg: #132024;

    /* Text Tokens */
    --brand-charcoal: #F1F5F9;
    --brand-charcoal-light: #CBD5E1;
    --brand-muted: #94A3B8;
    --brand-subtle: #64748B;
    --z4u-text-muted: #94A3B8;

    /* Border Tokens */
    --brand-border: rgba(255, 255, 255, 0.08);
    --entry-border-color: rgba(212, 175, 124, 0.16);
    --bill-border-color: rgba(212, 175, 124, 0.16);
    --z4u-border: rgba(255, 255, 255, 0.08);
    --brand-border-warm: rgba(212, 175, 124, 0.22);

    /* Primary Emerald Palette */
    --brand-emerald: #10B981;
    --brand-emerald-dark: #059669;
    --brand-emerald-light: #34D399;
    --brand-emerald-subtle: rgba(16, 185, 129, 0.12);
    --entry-brand-primary: #10B981;
    --entry-brand-primary-hover: #34D399;
    --entry-brand-primary-subtle: rgba(16, 185, 129, 0.14);
    --bill-brand-primary: #10B981;
    --bill-brand-primary-hover: #34D399;
    --bill-brand-primary-subtle: rgba(16, 185, 129, 0.14);

    /* Warm Gold Palette */
    --brand-gold: #D4AF7C;
    --brand-gold-light: #E8CA9D;
    --brand-gold-subtle: rgba(212, 175, 124, 0.16);
    --entry-brand-gold: #D4AF7C;
    --entry-brand-gold-subtle: rgba(212, 175, 124, 0.16);
    --bill-brand-gold: #D4AF7C;
    --bill-brand-gold-subtle: rgba(212, 175, 124, 0.16);
}

/* ── Global Layout in Dark Mode ── */
[data-theme="dark"] body,
html.dark-style body {
    background-color: var(--brand-canvas) !important;
    color: var(--brand-charcoal) !important;
}

[data-theme="dark"] .layout-wrapper,
[data-theme="dark"] .layout-page,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .bill-page-wrapper,
[data-theme="dark"] .entry-page-wrapper,
[data-theme="dark"] .content_inside {
    background-color: var(--brand-canvas) !important;
}

/* ── Header & Navbar ── */
[data-theme="dark"] .hesba-navbar,
html.dark-style .hesba-navbar {
    background: rgba(15, 26, 28, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(212, 175, 124, 0.18) !important;
}

[data-theme="dark"] .hesba-search-wrap {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .hesba-search-input {
    color: #F1F5F9 !important;
    background: transparent !important;
}

[data-theme="dark"] .hesba-search-input::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .hesba-search-dropdown {
    background: #121F23 !important;
    border: 1px solid rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .hesba-search-header,
[data-theme="dark"] .hesba-search-footer {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hesba-search-result-item:hover,
[data-theme="dark"] .hesba-search-result-item.active {
    background: #182A2E !important;
}

[data-theme="dark"] .hesba-header-date-widget {
    background: #0E181B !important;
    border-color: rgba(212, 175, 124, 0.18) !important;
}

[data-theme="dark"] .hesba-date-year {
    color: #D4AF7C !important;
}

[data-theme="dark"] .hesba-date-main {
    color: #CBD5E1 !important;
}

/* ── Sidebar & Navigation ── */
[data-theme="dark"] #layout-menu,
[data-theme="dark"] .bg-menu-theme,
html.dark-style #layout-menu {
    background-color: #0A1214 !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .menu-inner .menu-link {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .menu-inner .menu-item.active > .menu-link {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(212, 175, 124, 0.18) 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(212, 175, 124, 0.3) !important;
}

[data-theme="dark"] .menu-inner .menu-item:not(.active) > .menu-link:hover {
    background-color: #121F23 !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .menu-sub {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .sidebar-collapse-btn {
    background: #121F23 !important;
    border-color: rgba(212, 175, 124, 0.25) !important;
    color: #D4AF7C !important;
}

/* ── Cards, Containers & Sections ── */
[data-theme="dark"] .card,
[data-theme="dark"] .entry-card,
[data-theme="dark"] .bill-section-card,
[data-theme="dark"] .show-page,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .report-container {
    background-color: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .entry-card-header,
[data-theme="dark"] .bill-section-header,
[data-theme="dark"] .report-header {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .entry-section-title,
[data-theme="dark"] .bill-section-title,
[data-theme="dark"] .entry-hero-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .card-body,
[data-theme="dark"] .entry-card-body,
[data-theme="dark"] .bill-section-body {
    background-color: transparent !important;
}

[data-theme="dark"] .entry-hero-card {
    background: linear-gradient(135deg, #102125 0%, #162B30 100%) !important;
    border-color: rgba(212, 175, 124, 0.22) !important;
}

[data-theme="dark"] .entry-summary-card {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Form Controls & Inputs ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea {
    background-color: #0A1214 !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    border-color: #D4AF7C !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 124, 0.2) !important;
    background-color: #0E181B !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .entry-form-label,
[data-theme="dark"] .bill-form-label {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .input-group-text {
    background-color: #16262B !important;
    border-color: #24383D !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .form-check-label {
    color: #CBD5E1 !important;
}

/* ── DataTables & General Tables ── */
[data-theme="dark"] table,
[data-theme="dark"] .table,
[data-theme="dark"] .dataTable {
    color: #E2E8F0 !important;
    background-color: #121F23 !important;
}

[data-theme="dark"] table thead th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .dataTable thead th,
[data-theme="dark"] .entry-table thead th {
    background-color: #0E181B !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.25) !important;
    border-top: none !important;
}

[data-theme="dark"] table tbody td,
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .dataTable tbody td,
[data-theme="dark"] .entry-table tbody td {
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
    background-color: transparent !important;
}

[data-theme="dark"] table tbody tr:nth-of-type(even),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] table tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .entry-table tbody tr:hover {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

[data-theme="dark"] table tfoot th,
[data-theme="dark"] table tfoot td,
[data-theme="dark"] .entry-table tfoot th {
    background-color: #0E181B !important;
    color: #D4AF7C !important;
    border-top: 2px solid rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: #94A3B8 !important;
}

[data-theme="dark"] .paginate_button {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .paginate_button.current {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}

/* ── Modals, Popups & SweetAlert2 ── */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .swal2-popup {
    background-color: #121F23 !important;
    border: 1px solid rgba(212, 175, 124, 0.25) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background-color: #16262B !important;
}

[data-theme="dark"] .modal-title,
[data-theme="dark"] .swal2-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .swal2-html-container {
    color: #CBD5E1 !important;
}

/* ── Select2 Dropdowns in Dark Mode ── */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html.dark-style .select2-container--default .select2-selection--single,
html.dark-style .select2-container--default .select2-selection--multiple {
    background-color: #0A1214 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b,
html.dark-style .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94A3B8 transparent transparent transparent !important;
}

[data-theme="dark"] .select2-dropdown,
html.dark-style .select2-dropdown {
    background-color: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .select2-search--dropdown,
html.dark-style .select2-search--dropdown {
    background-color: #121F23 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field,
[data-theme="dark"] .select2-search__field,
html.dark-style .select2-search--dropdown .select2-search__field,
html.dark-style .select2-search__field {
    background-color: #0A1214 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field:focus,
html.dark-style .select2-search--dropdown .select2-search__field:focus {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .select2-results__options,
html.dark-style .select2-results__options {
    background-color: #121F23 !important;
}

[data-theme="dark"] .select2-results__options::-webkit-scrollbar,
html.dark-style .select2-results__options::-webkit-scrollbar {
    width: 6px;
    background: #0B1315 !important;
}

[data-theme="dark"] .select2-results__options::-webkit-scrollbar-thumb,
html.dark-style .select2-results__options::-webkit-scrollbar-thumb {
    background: #24383D !important;
    border-radius: 10px;
}

[data-theme="dark"] .select2-results__options::-webkit-scrollbar-thumb:hover,
html.dark-style .select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #10B981 !important;
}

/* Base Option in Dark Mode */
[data-theme="dark"] .select2-results__option,
html.dark-style .select2-results__option,
[data-theme="dark"] .select2-container--default .select2-results__option,
html.dark-style .select2-container--default .select2-results__option {
    background-color: transparent !important;
    color: #CBD5E1 !important;
}

/* Hover / Highlighted (not selected) */
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted,
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
html.dark-style .select2-container--default .select2-results__option--highlighted,
html.dark-style .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark-style .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #1A2D33 !important;
    color: #D4AF7C !important;
    font-weight: 600 !important;
}

/* Selected item (aria-selected="true" or .select2-results__option--selected) */
[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-theme="dark"] .select2-container--default .select2-results__option--selected,
html.dark-style .select2-container--default .select2-results__option[aria-selected="true"],
html.dark-style .select2-container--default .select2-results__option--selected {
    background-color: rgba(16, 185, 129, 0.22) !important;
    color: #34D399 !important;
    font-weight: 700 !important;
}

/* Selected AND Highlighted / Hovered */
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected="true"],
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selected,
html.dark-style .select2-container--default .select2-results__option--highlighted[aria-selected="true"],
html.dark-style .select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
    background-color: rgba(16, 185, 129, 0.35) !important;
    color: #6EE7B7 !important;
    font-weight: 700 !important;
}

/* ── Flatpickr Datepicker in Dark Mode ── */
[data-theme="dark"] .flatpickr-calendar {
    background: #121F23 !important;
    border: 1px solid rgba(212, 175, 124, 0.25) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-monthDropdown-months {
    color: #D4AF7C !important;
}

[data-theme="dark"] span.flatpickr-weekday {
    color: #94A3B8 !important;
}

[data-theme="dark"] .flatpickr-day {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .flatpickr-day:hover {
    background: #16262B !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .flatpickr-day.selected {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

/* ── Dropdown Menus ── */
[data-theme="dark"] .dropdown-menu {
    background-color: #121F23 !important;
    border: 1px solid rgba(212, 175, 124, 0.25) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .dropdown-item {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: #16262B !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Footer ── */
[data-theme="dark"] .hesba-footer {
    background-color: #0A1214 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94A3B8 !important;
}

/* ── Tree & Guides in Dark Mode ── */
[data-theme="dark"] .guide-tree-panel,
[data-theme="dark"] .jstree-default {
    background-color: #121F23 !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .jstree-default .jstree-clicked {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10B981 !important;
}

[data-theme="dark"] .jstree-default .jstree-hovered {
    background: #16262B !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .guide-stat-card {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}


/* ── Dashboard & High-Specificity Overrides in Dark Mode ── */
[data-theme="dark"] .metric-kpi-card,
[data-theme="dark"] .module-gate-card,
[data-theme="dark"] .capital-dashboard-section,
[data-theme="dark"] .capital-stat-box,
[data-theme="dark"] .capital-date-filter-box {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .capital-header-bar {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .capital-filter-badge {
    background: #0E181B !important;
    border-color: rgba(212, 175, 124, 0.25) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .metric-kpi-card.gold-accent {
    border-color: rgba(212, 175, 124, 0.4) !important;
}

[data-theme="dark"] .text-dark {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .text-muted {
    color: #94A3B8 !important;
}

[data-theme="dark"] h1.text-dark,
[data-theme="dark"] h2.text-dark,
[data-theme="dark"] h3.text-dark,
[data-theme="dark"] h4.text-dark,
[data-theme="dark"] h5.text-dark,
[data-theme="dark"] h6.text-dark {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: #121F23 !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
    border-color: rgba(255, 255, 255, 0.08) !important;
}


/* ── Entry Screens & KPI Cards in Dark Mode ── */
[data-theme="dark"] .entry-header-hero,
[data-theme="dark"] .kpi-stat-card,
[data-theme="dark"] .entry-command-card,
[data-theme="dark"] .entry-table-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .entry-header-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .entry-header-subtitle {
    color: #94A3B8 !important;
}

[data-theme="dark"] .entry-header-icon-box {
    background: #0E181B !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10B981 !important;
}

[data-theme="dark"] .kpi-stat-label {
    color: #94A3B8 !important;
}

[data-theme="dark"] .kpi-stat-value {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .kpi-stat-currency {
    color: #64748B !important;
}

[data-theme="dark"] .entry-command-search,
[data-theme="dark"] .entry-command-input-wrap {
    background: #0E181B !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .entry-command-search input,
[data-theme="dark"] .entry-command-input-wrap input {
    background: transparent !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .entry-command-search input::placeholder,
[data-theme="dark"] .entry-command-input-wrap input::placeholder {
    color: #64748B !important;
}


/* ===================================================================
 * ── Complete Master Suite & Bill Suite Overrides in Dark Mode ──
 * Covers Bills (Upsert & Index), Masters (Customer, Supplier, etc.)
 * =================================================================== */

/* ── 1. Master Suite (Customers, Suppliers, Items, Definitions) ── */
[data-theme="dark"] .master-page-wrapper {
    background-color: var(--brand-canvas) !important;
}

[data-theme="dark"] .master-header-hero,
[data-theme="dark"] .master-command-card,
[data-theme="dark"] .master-table-card,
[data-theme="dark"] .master-section-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .master-header-top-row,
[data-theme="dark"] .master-section-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    background: #16262B !important;
}

[data-theme="dark"] .master-header-title,
[data-theme="dark"] .master-section-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .master-header-subtitle {
    color: #94A3B8 !important;
}

[data-theme="dark"] .master-header-icon-box {
    background: #0E181B !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10B981 !important;
}

[data-theme="dark"] .master-command-search,
[data-theme="dark"] .master-command-input-wrap {
    background: #0E181B !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .master-command-search input,
[data-theme="dark"] .master-command-input-wrap input {
    background: transparent !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .master-command-search input::placeholder,
[data-theme="dark"] .master-command-input-wrap input::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .master-table thead th {
    background-color: #0E181B !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .master-table tbody td {
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
    background-color: transparent !important;
}

/* ── 2. Bill Suite (Invoices, Quotations, Returns, Stock Moves) ── */
[data-theme="dark"] .bill-page-wrapper {
    background-color: var(--brand-canvas) !important;
}

[data-theme="dark"] .bill-header-hero,
[data-theme="dark"] .bill-section-card,
[data-theme="dark"] .items-workspace-card,
[data-theme="dark"] .closing-account-card,
[data-theme="dark"] .bill-totals-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .bill-header-top-row,
[data-theme="dark"] .bill-section-header,
[data-theme="dark"] .items-card-header,
[data-theme="dark"] .closing-account-header {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .bill-header-title,
[data-theme="dark"] .bill-section-title,
[data-theme="dark"] .items-card-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .bill-header-subtitle {
    color: #94A3B8 !important;
}

[data-theme="dark"] .bill-header-icon-box,
[data-theme="dark"] .items-header-icon {
    background: #0E181B !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10B981 !important;
}

[data-theme="dark"] .bill-badge-draft,
[data-theme="dark"] .bill-badge-number,
[data-theme="dark"] .master-badge-code {
    background: #0E181B !important;
    color: #D4AF7C !important;
    border-color: rgba(212, 175, 124, 0.3) !important;
}

/* Executive Toolbar & Buttons inside Bills */
[data-theme="dark"] .items-toolbar-group {
    background: #0E181B !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .btn-erp-tool {
    background: #16262B !important;
    color: #CBD5E1 !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .btn-erp-tool:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .btn-erp-tool i {
    color: #D4AF7C !important;
}

[data-theme="dark"] .btn-erp-tool:hover i {
    color: #FFFFFF !important;
}

/* Smart Item Search Bar inside Bills */
[data-theme="dark"] .items-search-command-bar {
    background: #0E181B !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .smart-search-wrapper {
    background: #0A1214 !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .smart-search-input {
    background: transparent !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .smart-search-input::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .smart-scanner-btn {
    border-inline-start-color: #24383D !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .smart-scanner-btn:hover {
    background: #16262B !important;
    color: #10B981 !important;
}

/* Bills Data Grid Table & Sticky Columns */
[data-theme="dark"] .data-grid-container {
    background: #121F23 !important;
}

[data-theme="dark"] .data-grid-container table thead th {
    background: #0E181B !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.3) !important;
    border-inline: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ── Bill Table Sticky Columns in Dark Mode ── */
html[data-theme="dark"] .data-grid-container table thead th.col-sticky-num,
html[data-theme="dark"] .data-grid-container table thead th.col-sticky-code,
html[data-theme="dark"] .data-grid-container table thead th.col-sticky-name,
html[data-theme="dark"] .data-grid-container table thead th.col-sticky-action,
html.dark-style .data-grid-container table thead th.col-sticky-num,
html.dark-style .data-grid-container table thead th.col-sticky-code,
html.dark-style .data-grid-container table thead th.col-sticky-name,
html.dark-style .data-grid-container table thead th.col-sticky-action {
    background: #0E181B !important;
    color: #D4AF7C !important;
}

html[data-theme="dark"] .data-grid-container table tbody td,
html.dark-style .data-grid-container table tbody td {
    background: #121F23 !important;
    color: #E2E8F0 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .data-grid-container table tbody tr td.col-sticky-num,
html[data-theme="dark"] .data-grid-container table tbody tr td.col-sticky-code,
html[data-theme="dark"] .data-grid-container table tbody tr td.col-sticky-name,
html[data-theme="dark"] .data-grid-container table tbody tr td.col-sticky-action,
html.dark-style .data-grid-container table tbody tr td.col-sticky-num,
html.dark-style .data-grid-container table tbody tr td.col-sticky-code,
html.dark-style .data-grid-container table tbody tr td.col-sticky-name,
html.dark-style .data-grid-container table tbody tr td.col-sticky-action {
    background-color: #121F23 !important;
    color: #E2E8F0 !important;
}

html[data-theme="dark"] .data-grid-container table tbody tr:nth-of-type(even) td,
html[data-theme="dark"] .data-grid-container table tbody tr:nth-of-type(even) td.col-sticky-num,
html[data-theme="dark"] .data-grid-container table tbody tr:nth-of-type(even) td.col-sticky-code,
html[data-theme="dark"] .data-grid-container table tbody tr:nth-of-type(even) td.col-sticky-name,
html[data-theme="dark"] .data-grid-container table tbody tr:nth-of-type(even) td.col-sticky-action,
html.dark-style .data-grid-container table tbody tr:nth-of-type(even) td,
html.dark-style .data-grid-container table tbody tr:nth-of-type(even) td.col-sticky-num,
html.dark-style .data-grid-container table tbody tr:nth-of-type(even) td.col-sticky-code,
html.dark-style .data-grid-container table tbody tr:nth-of-type(even) td.col-sticky-name,
html.dark-style .data-grid-container table tbody tr:nth-of-type(even) td.col-sticky-action {
    background: #101B1E !important;
}

/* On Row Hover in Dark Mode - Highlight full row seamlessly */
html[data-theme="dark"] .data-grid-container table tbody tr:hover td,
html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-num,
html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-code,
html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-name,
html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-action,
html.dark-style .data-grid-container table tbody tr:hover td,
html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-num,
html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-code,
html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-name,
html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-action {
    background-color: #1A2D33 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-name,
html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-name {
    color: #34D399 !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .data-grid-container .btn-delete-row,
html[data-theme="dark"] .data-grid-container .remove-item,
html.dark-style .data-grid-container .btn-delete-row,
html.dark-style .data-grid-container .remove-item {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #EF4444 !important;
}

html[data-theme="dark"] .data-grid-container .btn-delete-row:hover,
html[data-theme="dark"] .data-grid-container .remove-item:hover,
html.dark-style .data-grid-container .btn-delete-row:hover,
html.dark-style .data-grid-container .remove-item:hover {
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
}

/* Compact Numeric & Unit Inputs in Bill Table */
[data-theme="dark"] .compact-cell-group {
    background: #0A1214 !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .compact-num-input {
    color: #F1F5F9 !important;
    background: transparent !important;
}

[data-theme="dark"] .compact-type-select {
    background-color: #0E181B !important;
    border-inline-start-color: #24383D !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .select-compact,
[data-theme="dark"] .table-select,
[data-theme="dark"] .compact-cell-group .compact-type-select,
[data-theme="dark"] .data-grid-container table select.form-select,
[data-theme="dark"] .data-grid-container select.form-select,
[data-theme="dark"] #items-table select.form-select,
html.dark-style .select-compact,
html.dark-style .table-select,
html.dark-style .compact-cell-group .compact-type-select,
html.dark-style .data-grid-container table select.form-select,
html.dark-style .data-grid-container select.form-select,
html.dark-style #items-table select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28212, 175, 124, 0.7%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-size: 10px 7px !important;
    background-position: left 6px center !important;
}

[dir="ltr"][data-theme="dark"] .select-compact,
[dir="ltr"][data-theme="dark"] .table-select,
[dir="ltr"][data-theme="dark"] .compact-cell-group .compact-type-select,
[dir="ltr"][data-theme="dark"] .data-grid-container table select.form-select,
[dir="ltr"][data-theme="dark"] .data-grid-container select.form-select,
[dir="ltr"][data-theme="dark"] #items-table select.form-select,
html[dir="ltr"][data-theme="dark"] .select-compact,
html[dir="ltr"][data-theme="dark"] .table-select,
html[dir="ltr"][data-theme="dark"] .compact-cell-group .compact-type-select,
html[dir="ltr"][data-theme="dark"] .data-grid-container table select.form-select,
html[dir="ltr"][data-theme="dark"] .data-grid-container select.form-select,
html[dir="ltr"][data-theme="dark"] #items-table select.form-select,
html[dir="ltr"].dark-style .select-compact,
html[dir="ltr"].dark-style .table-select,
html[dir="ltr"].dark-style .compact-cell-group .compact-type-select,
html[dir="ltr"].dark-style .data-grid-container table select.form-select,
html[dir="ltr"].dark-style .data-grid-container select.form-select,
html[dir="ltr"].dark-style #items-table select.form-select {
    background-position: right 6px center !important;
}

[data-theme="dark"] .items-table-footer-bar {
    background: #0E181B !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .btn-grid-page {
    background: #16262B !important;
    border-color: #24383D !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .btn-grid-page:hover:not(.disabled):not(.active) {
    background: #1D3238 !important;
    border-color: #D4AF7C !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .btn-grid-page.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

/* ── 3. Readonly Inputs & Datepickers ── */
[data-theme="dark"] .bill-form-control-readonly,
[data-theme="dark"] input[readonly]:not(.flatpickr-input) {
    background-color: #0E181B !important;
    color: #10B981 !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .flatpickr-input,
[data-theme="dark"] input.flatpickr-input {
    background-color: #0A1214 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

/* ── 4. Unified Hero Action Buttons (Save, Back, Delete, Print) ── */
[data-theme="dark"] .btn-hero-action.btn-hero-back,
[data-theme="dark"] .btn-hero-back {
    background: #16262B !important;
    border-color: #24383D !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .btn-hero-action.btn-hero-back:hover,
[data-theme="dark"] .btn-hero-back:hover {
    background: #1D3238 !important;
    border-color: #D4AF7C !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .btn-hero-save {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-hero-print {
    background: #0E181B !important;
    border-color: rgba(212, 175, 124, 0.4) !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .btn-hero-print:hover {
    background: rgba(212, 175, 124, 0.2) !important;
    border-color: #D4AF7C !important;
    color: #FFFFFF !important;
}

/* ── 5. Bill Navigation Tabs & Bill Totals ── */
[data-theme="dark"] .bill-nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .bill-nav-tabs .nav-link {
    color: #94A3B8 !important;
}

[data-theme="dark"] .bill-nav-tabs .nav-link:hover {
    color: #D4AF7C !important;
    background: rgba(212, 175, 124, 0.08) !important;
}

[data-theme="dark"] .bill-nav-tabs .nav-link.active {
    color: #10B981 !important;
    border-bottom-color: #10B981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] .bill-totals-card,
[data-theme="dark"] .closing-account-card {
    background: #0E181B !important;
    border-color: rgba(212, 175, 124, 0.2) !important;
}

[data-theme="dark"] .bill-total-row {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .bill-total-label {
    color: #94A3B8 !important;
}

[data-theme="dark"] .bill-total-value {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .bill-grand-total {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .bill-grand-total .bill-total-value {
    color: #10B981 !important;
}


/* ===================================================================
 * ── Complete UI Refinement Suite: Toastr, Swal2, Modals, DataTables, 
 *    Inputs, Checkboxes, Buttons in Light & Dark Modes ──
 * =================================================================== */

/* ── 1. Toastr In Dark Mode ── */
[data-theme="dark"] #toast-container > div,
html.dark-style #toast-container > div {
    background: #121F23 !important;
    color: #F1F5F9 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    border: none !important;
}

[data-theme="dark"] #toast-container > div .toast-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] #toast-container > div .toast-message {
    color: #CBD5E1 !important;
}

[data-theme="dark"] #toast-container > div.toast-success {
    background: linear-gradient(135deg, #121F23 0%, #102621 100%) !important;
    border-inline-start: 4px solid #10B981 !important;
}

[data-theme="dark"] #toast-container > div.toast-success::before {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

[data-theme="dark"] #toast-container > div.toast-info {
    background: linear-gradient(135deg, #121F23 0%, #10212B 100%) !important;
    border-inline-start: 4px solid #38BDF8 !important;
}

[data-theme="dark"] #toast-container > div.toast-info::before {
    background-color: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important;
}

[data-theme="dark"] #toast-container > div.toast-warning {
    background: linear-gradient(135deg, #121F23 0%, #262116 100%) !important;
    border-inline-start: 4px solid #D4AF7C !important;
}

[data-theme="dark"] #toast-container > div.toast-warning::before {
    background-color: rgba(212, 175, 124, 0.18) !important;
    border: 1px solid rgba(212, 175, 124, 0.35) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF7C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
}

[data-theme="dark"] #toast-container > div.toast-error {
    background: linear-gradient(135deg, #121F23 0%, #2A1518 100%) !important;
    border-inline-start: 4px solid #F43F5E !important;
}

[data-theme="dark"] #toast-container > div.toast-error::before {
    background-color: rgba(244, 63, 94, 0.18) !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F43F5E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .toast-close-button {
    color: #94A3B8 !important;
}

/* ── 2. SweetAlert2 in Dark Mode ── */
[data-theme="dark"] .swal2-popup,
html.dark-style .swal2-popup {
    background: #121F23 !important;
    border-color: rgba(212, 175, 124, 0.25) !important;
    color: #F1F5F9 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .swal2-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .swal2-html-container {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .swal2-styled.swal2-cancel {
    background: #16262B !important;
    border-color: #24383D !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .swal2-styled.swal2-cancel:hover {
    background: #1C3036 !important;
    color: #D4AF7C !important;
    border-color: #D4AF7C !important;
}

[data-theme="dark"] .swal2-close {
    color: #94A3B8 !important;
}

[data-theme="dark"] .swal2-close:hover {
    color: #F1F5F9 !important;
    background: #16262B !important;
}

[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select {
    background: #0A1214 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

/* ── 3. Modals & Dialogs (Bootstrap Modals) ── */
[data-theme="dark"] .modal-content {
    background-color: #121F23 !important;
    border: 1px solid rgba(212, 175, 124, 0.25) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: #16262B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .modal-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.75 !important;
}

[data-theme="dark"] .btn-close:hover {
    opacity: 1 !important;
}

/* ── 4. Form Controls, Inputs, Checkboxes & Switches ── */
[data-theme="dark"] .form-check-input {
    background-color: #0A1214 !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .form-check-input:focus {
    border-color: #D4AF7C !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23D4AF7C'/%3e%3c/svg%3e") !important;
}

/* Form Controls Focus & Disabled in Dark Mode */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled {
    background-color: #0E181B !important;
    color: #64748B !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    cursor: not-allowed !important;
}

/* ── 5. DataTables & Search Boxes ── */
[data-theme="dark"] .dataTables_filter input {
    background-color: #0A1214 !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
    border-radius: 8px !important;
    padding: 0.35rem 0.65rem !important;
}

[data-theme="dark"] .dataTables_filter input:focus {
    border-color: #D4AF7C !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 124, 0.2) !important;
}

[data-theme="dark"] .dataTables_length select {
    background-color: #0A1214 !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
    border-radius: 8px !important;
    padding: 0.3rem 0.5rem !important;
}

[data-theme="dark"] .dataTables_paginate .paginate_button {
    background: #16262B !important;
    border: 1px solid #24383D !important;
    color: #CBD5E1 !important;
    border-radius: 7px !important;
    margin: 0 2px !important;
}

[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
    background: #1D3238 !important;
    border-color: #D4AF7C !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_paginate .paginate_button.current:hover {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_paginate .paginate_button.disabled:hover {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #64748B !important;
    cursor: not-allowed !important;
}

/* ── 6. Table Row Action Buttons (Edit, Delete, View) ── */
[data-theme="dark"] .btn-action-delete,
[data-theme="dark"] button[onclick*="Delete"],
[data-theme="dark"] .btn-outline-danger {
    background: rgba(244, 63, 94, 0.1) !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
    color: #F43F5E !important;
}

[data-theme="dark"] .btn-action-delete:hover,
[data-theme="dark"] button[onclick*="Delete"]:hover,
[data-theme="dark"] .btn-outline-danger:hover {
    background: #F43F5E !important;
    color: #FFFFFF !important;
    border-color: #F43F5E !important;
}

[data-theme="dark"] .btn-action-edit,
[data-theme="dark"] .table a[href*="Upsert"],
[data-theme="dark"] table a[href*="Upsert"],
[data-theme="dark"] .tabulator a[href*="Upsert"],
[data-theme="dark"] .table a[href*="Edit"],
[data-theme="dark"] table a[href*="Edit"],
[data-theme="dark"] .tabulator a[href*="Edit"],
[data-theme="dark"] .btn-outline-primary {
    border-color: rgba(212, 175, 124, 0.35) !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .btn-action-edit:hover,
[data-theme="dark"] .table a[href*="Upsert"]:hover,
[data-theme="dark"] table a[href*="Upsert"]:hover,
[data-theme="dark"] .tabulator a[href*="Upsert"]:hover,
[data-theme="dark"] .table a[href*="Edit"]:hover,
[data-theme="dark"] table a[href*="Edit"]:hover,
[data-theme="dark"] .tabulator a[href*="Edit"]:hover,
[data-theme="dark"] .btn-outline-primary:hover {
    background: rgba(212, 175, 124, 0.2) !important;
    border-color: #D4AF7C !important;
    color: #FFFFFF !important;
}

/* Sidebar & Flyout Navigation Menu Link Consistency */
[data-theme="dark"] #layout-menu .menu-link,
html.dark-style #layout-menu .menu-link,
[data-theme="dark"] .hesba-flyout-body .menu-link,
html.dark-style .hesba-flyout-body .menu-link,
[data-theme="dark"] .menu-sub .menu-link,
html.dark-style .menu-sub .menu-link {
    color: rgba(255, 255, 255, 0.88) !important;
}

[data-theme="dark"] #layout-menu .menu-link:hover,
html.dark-style #layout-menu .menu-link:hover,
[data-theme="dark"] .hesba-flyout-body .menu-link:hover,
html.dark-style .hesba-flyout-body .menu-link:hover,
[data-theme="dark"] .menu-sub .menu-link:hover,
html.dark-style .menu-sub .menu-link:hover {
    color: #FFFFFF !important;
    background-color: rgba(212, 175, 124, 0.12) !important;
}

/* ── 7. Accordions & List Groups ── */
[data-theme="dark"] .accordion-item {
    background-color: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .accordion-button {
    background-color: #16262B !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #10B981 !important;
}

[data-theme="dark"] .accordion-body {
    background-color: #121F23 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .list-group-item {
    background-color: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}


/* ===================================================================
 * ── Header Brand Logo Switcher (Light vs Dark) ──
 * =================================================================== */
.hesba-header-logo.logo-dark {
    display: none !important;
}
.hesba-header-logo.logo-light {
    display: inline-block !important;
}

[data-theme="dark"] .hesba-header-logo.logo-light,
html.dark-style .hesba-header-logo.logo-light {
    display: none !important;
}

[data-theme="dark"] .hesba-header-logo.logo-dark,
html.dark-style .hesba-header-logo.logo-dark {
    display: inline-block !important;
}

/* ===================================================================
 * ── Master & Definition Tables Complete Dark Mode Styling ──
 * Fixes: White table headers, glaring white even rows, pale text, pink buttons
 * =================================================================== */
[data-theme="dark"] .master-table-card,
[data-theme="dark"] div.master-table-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .master-table thead th,
[data-theme="dark"] table.master-table thead th,
[data-theme="dark"] .table thead th {
    background: #0E181B !important;
    background-image: none !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .master-table tbody,
[data-theme="dark"] table.master-table tbody {
    background-color: transparent !important;
}

[data-theme="dark"] .master-table tbody tr,
[data-theme="dark"] table.master-table tbody tr,
[data-theme="dark"] .master-table tbody tr:nth-child(odd),
[data-theme="dark"] table.master-table tbody tr:nth-child(odd) {
    background-color: transparent !important;
    background-image: none !important;
}

[data-theme="dark"] .master-table tbody tr:nth-child(even),
[data-theme="dark"] table.master-table tbody tr:nth-child(even),
[data-theme="dark"] .master-table tbody tr:nth-child(2n),
[data-theme="dark"] table.master-table tbody tr:nth-child(2n) {
    background-color: rgba(255, 255, 255, 0.028) !important;
    background-image: none !important;
}

[data-theme="dark"] .master-table tbody tr:hover,
[data-theme="dark"] table.master-table tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

[data-theme="dark"] .master-table tbody td,
[data-theme="dark"] table.master-table tbody td {
    color: #E2E8F0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .master-table tbody td.text-dark,
[data-theme="dark"] .master-table tbody td .text-dark,
[data-theme="dark"] td.text-dark,
[data-theme="dark"] .text-dark {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .master-table tbody td.text-secondary,
[data-theme="dark"] .master-table tbody td .text-secondary,
[data-theme="dark"] td.text-secondary {
    color: #94A3B8 !important;
}

[data-theme="dark"] .badge-code {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* ── Table Action Buttons in Dark Mode ── */
[data-theme="dark"] .table-action-edit {
    background: #0E181B !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .table-action-edit:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
    transform: translateY(-1px);
}

[data-theme="dark"] .table-action-delete {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #F87171 !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

[data-theme="dark"] .table-action-delete:hover {
    background: #DC2626 !important;
    color: #FFFFFF !important;
    border-color: #DC2626 !important;
    transform: translateY(-1px);
}

/* ── Pagination Buttons in Dark Mode ── */
[data-theme="dark"] .btn-grid-page {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .btn-grid-page:hover:not(.disabled):not(.active) {
    background: #16262B !important;
    border-color: #10B981 !important;
    color: #10B981 !important;
}

[data-theme="dark"] .btn-grid-page.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .btn-grid-page.disabled {
    background: #0A1214 !important;
    color: #475569 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    opacity: 0.5 !important;
}

/* ── Smart Search & Shortcut in Dark Mode ── */
[data-theme="dark"] .smart-search-input {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .smart-search-input:focus {
    background: #0E181B !important;
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .search-shortcut-badge {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94A3B8 !important;
}

/* ── Executive Sidebar in Dark Mode (Ultra Luxury Deep Obsidian / Emerald) ── */
[data-theme="dark"] #layout-menu.layout-menu,
html.dark-style #layout-menu.layout-menu {
    background: linear-gradient(180deg, #0A1416 0%, #060D0E 100%) !important;
    border-inline-end: 1px solid rgba(14, 91, 70, 0.3) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] #layout-menu .menu-inner .menu-item > .menu-link,
[data-theme="dark"] #layout-menu .menu-inner .menu-item > .menu-toggle {
    color: #CBD5E1 !important;
}

[data-theme="dark"] #layout-menu .menu-inner .menu-item > .menu-link:hover,
[data-theme="dark"] #layout-menu .menu-inner .menu-item > .menu-toggle:hover {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10B981 !important;
}

[data-theme="dark"] #layout-menu .menu-inner .menu-item.active > .menu-link,
[data-theme="dark"] #layout-menu .menu-inner .menu-item.active > .menu-toggle {
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.45) 0%, rgba(212, 175, 124, 0.2) 100%) !important;
    color: #D4AF7C !important;
    border-inline-start: 3px solid #D4AF7C !important;
}

[data-theme="dark"] #layout-menu .menu-sub {
    background: rgba(0, 0, 0, 0.25) !important;
}


/* ===================================================================
 * ── EXECUTIVE NAVBAR & SEARCH PALETTE DARK MODE OVERHAUL ──
 * Fixes: White user pill, white language button, white kbd keys, white search badges, dark unreadable text
 * =================================================================== */

/* ── 1. Header User Profile Dropdown Button ── */
[data-theme="dark"] .hesba-header-user-btn,
html.dark-style .hesba-header-user-btn {
    background: #0E181B !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .hesba-header-user-btn:hover,
[data-theme="dark"] .hesba-header-user-btn.show,
html.dark-style .hesba-header-user-btn:hover,
html.dark-style .hesba-header-user-btn.show {
    background: #16262B !important;
    border-color: rgba(212, 175, 124, 0.4) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .hesba-user-name {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .hesba-user-role {
    color: #94A3B8 !important;
}

/* ── 2. Language Switcher Button in Header ── */
[data-theme="dark"] .hesba-navbar .topbar-dropdown .nav-user,
html.dark-style .hesba-navbar .topbar-dropdown .nav-user {
    background: #0E181B !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .hesba-navbar .topbar-dropdown .nav-user:hover,
html.dark-style .hesba-navbar .topbar-dropdown .nav-user:hover {
    background: #16262B !important;
    border-color: rgba(212, 175, 124, 0.4) !important;
    color: #D4AF7C !important;
}

/* ── 3. Interactive Guide Button in Header ── */
[data-theme="dark"] .hesba-guide-btn {
    background: rgba(212, 175, 124, 0.1) !important;
    border: 1.5px solid rgba(212, 175, 124, 0.25) !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .hesba-guide-btn:hover {
    background: rgba(212, 175, 124, 0.2) !important;
    border-color: #D4AF7C !important;
    color: #FFFFFF !important;
}

/* ── 4. Header Search Input Bar ── */
[data-theme="dark"] .hesba-search-wrap {
    background: #0E181B !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .hesba-search-wrap:focus-within {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}

[data-theme="dark"] .hesba-search-input,
[data-theme="dark"] .hesba-search-wrap .hesba-search-input,
html.dark-style .hesba-search-input,
html.dark-style .hesba-search-wrap .hesba-search-input {
    color: #F1F5F9 !important;
    background: transparent !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

[data-theme="dark"] .hesba-search-input:focus,
[data-theme="dark"] .hesba-search-wrap .hesba-search-input:focus,
html.dark-style .hesba-search-input:focus,
html.dark-style .hesba-search-wrap .hesba-search-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

[data-theme="dark"] .hesba-search-input::placeholder,
html.dark-style .hesba-search-input::placeholder {
    color: #64748B !important;
}

/* ── 5. Command Palette Dropdown Overhaul (Ctrl + K) ── */
[data-theme="dark"] .hesba-search-dropdown,
html.dark-style .hesba-search-dropdown {
    background: #0B1315 !important;
    border: 1.5px solid rgba(212, 175, 124, 0.3) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75) !important;
}

[data-theme="dark"] .hesba-search-header {
    background: #0E181B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hesba-search-header .small {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .hesba-search-header .badge {
    background: #16262B !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .hesba-search-section-title {
    color: #D4AF7C !important;
}

[data-theme="dark"] .hesba-search-item {
    color: #CBD5E1 !important;
    border-color: transparent !important;
}

[data-theme="dark"] .hesba-search-item:hover,
[data-theme="dark"] .hesba-search-item.is-selected {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .hesba-search-item-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .hesba-search-item:hover .hesba-search-item-title,
[data-theme="dark"] .hesba-search-item.is-selected .hesba-search-item-title {
    color: #34D399 !important;
}

[data-theme="dark"] .hesba-search-item-subtitle {
    color: #94A3B8 !important;
}

[data-theme="dark"] .hesba-search-item-icon {
    background: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .hesba-search-item:hover .hesba-search-item-icon,
[data-theme="dark"] .hesba-search-item.is-selected .hesba-search-item-icon {
    background: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

/* Badges inside Search Dropdown Items - NO MORE WHITE! */
[data-theme="dark"] .hesba-search-item-badge,
[data-theme="dark"] .hesba-search-item-badge.badge-soft-emerald,
[data-theme="dark"] .hesba-search-item-badge.badge-soft-amber,
[data-theme="dark"] .hesba-search-item-badge.badge-soft-blue,
[data-theme="dark"] .hesba-search-item-badge.badge-soft-teal {
    background: #16262B !important;
    color: #D4AF7C !important;
    border: 1px solid rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .hesba-search-footer {
    background: #0E181B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hesba-search-kbd-hint {
    color: #94A3B8 !important;
}

/* Keyboard Keys & Shortcuts (kbd) in Dark Mode - NO MORE WHITE! */
[data-theme="dark"] kbd,
[data-theme="dark"] .hesba-search-kbd,
[data-theme="dark"] .hesba-search-kbd-wrap kbd,
[data-theme="dark"] .hesba-search-kbd-hint kbd {
    background: #16262B !important;
    color: #D4AF7C !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}


/* ===================================================================
 * ── UNIVERSAL TABLE ROW HOVER OVERHAUL (DARK MODE) ──
 * Completely eliminates white background flash/box-shadow on table row hover
 * =================================================================== */
[data-theme="dark"] .table,
[data-theme="dark"] .table-hover,
[data-theme="dark"] .master-table,
[data-theme="dark"] table {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-hover-bg: rgba(16, 185, 129, 0.12) !important;
    --bs-table-hover-color: #FFFFFF !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025) !important;
    --bs-table-striped-color: #E2E8F0 !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .master-table tbody tr:hover td,
[data-theme="dark"] table.master-table tbody tr:hover td,
[data-theme="dark"] table tbody tr:hover td,
[data-theme="dark"] .dataTable tbody tr:hover td,
[data-theme="dark"] .entry-table tbody tr:hover td,
[data-theme="dark"] .bill-table tbody tr:hover td {
    --bs-table-accent-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    box-shadow: none !important;
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .master-table tbody tr:hover td *,
[data-theme="dark"] table tbody tr:hover td * {
    color: inherit;
}

[data-theme="dark"] .master-table tbody tr:hover .text-muted,
[data-theme="dark"] .master-table tbody tr:hover .text-secondary {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .master-table tbody tr:hover .badge-code,
[data-theme="dark"] .badge-code {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .master-table tbody tr:hover .table-action-edit,
[data-theme="dark"] .table-action-edit {
    background: #0E181B !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .master-table tbody tr:hover .table-action-delete,
[data-theme="dark"] .table-action-delete {
    background: rgba(220, 38, 38, 0.18) !important;
    color: #F87171 !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
}

/* ===================================================================
 * ── Comprehensive Entry & Voucher Screens Dark Mode Master Fixes ──
 * Targets: CheckReceiveEntry, CheckPayEntry, CashReceiveEntry, CashPayEntry,
 *          JourEntry, ExpensesEntry, AddingNotify, DiscNotify, etc.
 * =================================================================== */

/* 1. Custom Form Selects, Inputs & Textareas */
[data-theme="dark"] .form-control-custom,
[data-theme="dark"] .form-select-custom,
[data-theme="dark"] select.form-select-custom,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.form-select,
[data-theme="dark"] select,
html.dark-style .form-control-custom,
html.dark-style .form-select-custom,
html.dark-style select.form-select-custom {
    background-color: #0A1214 !important;
    background-image: none !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .form-control-custom:focus,
[data-theme="dark"] .form-select-custom:focus,
[data-theme="dark"] select:focus,
html.dark-style .form-control-custom:focus,
html.dark-style .form-select-custom:focus {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
    background-color: #0E181B !important;
    color: #F1F5F9 !important;
}

/* Native select options in dark mode */
[data-theme="dark"] select option,
[data-theme="dark"] .form-select-custom option,
[data-theme="dark"] .form-select option,
html.dark-style select option,
html.dark-style .form-select-custom option {
    background-color: #0E181B !important;
    color: #F1F5F9 !important;
}

/* 2. Custom Form Labels */
[data-theme="dark"] .form-label-custom,
html.dark-style .form-label-custom {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .form-label-custom i,
html.dark-style .form-label-custom i {
    color: #10B981 !important;
}

/* 3. Readonly Form Controls */
[data-theme="dark"] .form-control-readonly,
[data-theme="dark"] input.form-control-readonly,
html.dark-style .form-control-readonly {
    background-color: #070D0E !important;
    color: #94A3B8 !important;
    border-color: #1A2C30 !important;
}

/* 4. Entry Table Header - Strictly neutralize any light gradient */
[data-theme="dark"] .entry-table thead th,
[data-theme="dark"] table.entry-table thead th,
[data-theme="dark"] #entryDetailTable thead th,
html.dark-style .entry-table thead th,
html.dark-style #entryDetailTable thead th {
    background: #0E181B !important;
    background-color: #0E181B !important;
    background-image: none !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.3) !important;
    border-top: none !important;
}

[data-theme="dark"] .entry-table-wrap,
html.dark-style .entry-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: #121F23 !important;
}

/* 5. Summary Metric Cards & Totals */
[data-theme="dark"] .summary-metric-card,
html.dark-style .summary-metric-card {
    background: #121F23 !important;
    background-color: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    color: #F1F5F9 !important;
}

/* Prevent black box on total readonly inputs inside metric cards */
[data-theme="dark"] .summary-metric-card input,
[data-theme="dark"] .summary-metric-card input[readonly],
[data-theme="dark"] .summary-metric-card input.form-control,
html.dark-style .summary-metric-card input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .summary-metric-card label,
[data-theme="dark"] .summary-metric-card .text-muted,
[data-theme="dark"] .summary-metric-card span.text-muted,
html.dark-style .summary-metric-card label {
    color: #94A3B8 !important;
}

/* Metric Icons */
[data-theme="dark"] .summary-metric-icon.debit,
html.dark-style .summary-metric-icon.debit {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #10B981 !important;
}

[data-theme="dark"] .summary-metric-icon.credit,
html.dark-style .summary-metric-icon.credit {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #F59E0B !important;
}

[data-theme="dark"] .summary-metric-icon.balance,
html.dark-style .summary-metric-icon.balance {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60A5FA !important;
}

/* Balance Badges & Indicators */
[data-theme="dark"] .balance-status-badge.balance-balanced,
html.dark-style .balance-status-badge.balance-balanced {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .balance-status-badge.balance-unbalanced,
html.dark-style .balance-status-badge.balance-unbalanced {
    background-color: rgba(239, 68, 68, 0.18) !important;
    color: #F87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] #rowCountBadge,
html.dark-style #rowCountBadge {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* 6. Action buttons in entry tables */
[data-theme="dark"] .delete-action-btn,
html.dark-style .delete-action-btn {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #F87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

[data-theme="dark"] .delete-action-btn:hover,
html.dark-style .delete-action-btn:hover {
    background-color: #EF4444 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-custom,
html.dark-style .btn-outline-custom {
    background: #16262B !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #E2E8F0 !important;
}

[data-theme="dark"] .btn-outline-custom:hover,
html.dark-style .btn-outline-custom:hover {
    background: #1C3238 !important;
    border-color: #10B981 !important;
    color: #10B981 !important;
}

/* 7. Entry Badge Amounts */
[data-theme="dark"] .voucher-badge-debit,
html.dark-style .voucher-badge-debit {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .voucher-badge-credit,
html.dark-style .voucher-badge-credit {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #F87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .voucher-badge-zero,
html.dark-style .voucher-badge-zero {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #64748B !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   8. COMPREHENSIVE REPORTS & FINANCIAL DASHBOARDS DARK MODE (Z4U MASTER)
   Targets: All Report0-10 Views, _ReportLayout, ReturnPercentage, Tabulator, etc.
   ========================================================================== */

[data-theme="dark"] .report-container,
[data-theme="dark"] .report-page,
[data-theme="dark"] .show-page,
html.dark-style .report-container,
html.dark-style .report-page,
html.dark-style .show-page {
    background-color: transparent !important;
    color: #F1F5F9 !important;
}

/* ── Form Section & Filter Containers ── */
[data-theme="dark"] .form-section,
[data-theme="dark"] .sales-modal .card,
[data-theme="dark"] .report-container .card,
[data-theme="dark"] .executive-filter-card,
[data-theme="dark"] .filter-card,
html.dark-style .form-section,
html.dark-style .executive-filter-card {
    background: #121F23 !important;
    background-color: #121F23 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    color: #F1F5F9 !important;
}

/* ── Form Labels in Reports ── */
[data-theme="dark"] .form-section .form-label,
[data-theme="dark"] .report-container .form-label,
[data-theme="dark"] .sales-modal .form-label,
[data-theme="dark"] .return-percentage-toolbar .form-label,
html.dark-style .form-section .form-label,
html.dark-style .return-percentage-toolbar .form-label {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .form-section .form-label i,
[data-theme="dark"] .report-container .form-label i {
    color: #10B981 !important;
}

/* ── Form Controls & Selects in Reports ── */
[data-theme="dark"] .form-section .form-control,
[data-theme="dark"] .form-section .form-select,
[data-theme="dark"] .report-container .form-control,
[data-theme="dark"] .report-container .form-select,
[data-theme="dark"] .sales-modal .form-control,
[data-theme="dark"] .sales-modal .form-select,
[data-theme="dark"] .return-percentage-search,
[data-theme="dark"] input.return-percentage-search,
html.dark-style .form-section .form-control,
html.dark-style .form-section .form-select,
html.dark-style .return-percentage-search {
    background-color: #0A1214 !important;
    background-image: none !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .form-section .form-control:focus,
[data-theme="dark"] .form-section .form-select:focus,
[data-theme="dark"] .return-percentage-search:focus,
html.dark-style .form-section .form-control:focus {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
    background-color: #0E181B !important;
    color: #F1F5F9 !important;
}

/* ── Secondary & Action Buttons in Reports ── */
[data-theme="dark"] .btn-return-secondary,
html.dark-style .btn-return-secondary {
    background: #0E181B !important;
    border: 1.5px solid #24383D !important;
    color: #CBD5E1 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .btn-return-secondary:hover,
html.dark-style .btn-return-secondary:hover {
    background: #182A2E !important;
    border-color: #D4AF7C !important;
    color: #D4AF7C !important;
}

/* ── Export Toolbar in Reports ── */
[data-theme="dark"] .export-buttons,
html.dark-style .export-buttons {
    background: #121F23 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* ── Tabulator & Report Tables Master Dark Theme ── */
[data-theme="dark"] .tabulator,
[data-theme="dark"] .return-percentage-table-wrap,
[data-theme="dark"] #returnPercentageTable,
html.dark-style .tabulator,
html.dark-style .return-percentage-table-wrap,
html.dark-style #returnPercentageTable {
    background: #121F23 !important;
    background-color: #121F23 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .tabulator .tabulator-tableholder,
html.dark-style .tabulator .tabulator-tableholder {
    background: #121F23 !important;
    background-color: #121F23 !important;
}

[data-theme="dark"] .tabulator .tabulator-header,
[data-theme="dark"] #returnPercentageTable .tabulator-header,
html.dark-style .tabulator .tabulator-header {
    background: #0E181B !important;
    background-color: #0E181B !important;
    border-bottom: 2.5px solid rgba(212, 175, 124, 0.35) !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col,
[data-theme="dark"] #returnPercentageTable .tabulator-header .tabulator-col,
html.dark-style .tabulator .tabulator-header .tabulator-col {
    background: #0E181B !important;
    background-color: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-title,
[data-theme="dark"] #returnPercentageTable .tabulator-col-title,
html.dark-style .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    color: #D4AF7C !important;
    font-weight: 800 !important;
}

[data-theme="dark"] #returnPercentageTable .tabulator-header .tabulator-col.tabulator-frozen,
html.dark-style #returnPercentageTable .tabulator-header .tabulator-col.tabulator-frozen {
    background: #0E181B !important;
    border-color: rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-header-filter input,
html.dark-style .tabulator .tabulator-header .tabulator-header-filter input {
    background: #0A1214 !important;
    border: 1px solid #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .tabulator .tabulator-row,
html.dark-style .tabulator .tabulator-row {
    background-color: #121F23 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
}

[data-theme="dark"] .tabulator .tabulator-row:nth-child(even),
html.dark-style .tabulator .tabulator-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .tabulator .tabulator-row:hover,
html.dark-style .tabulator .tabulator-row:hover {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] #returnPercentageTable .tabulator-row .tabulator-cell.tabulator-frozen,
html.dark-style #returnPercentageTable .tabulator-row .tabulator-cell.tabulator-frozen {
    background: #121F23 !important;
    color: #E2E8F0 !important;
}

[data-theme="dark"] .tabulator .tabulator-footer,
html.dark-style .tabulator .tabulator-footer {
    background: #0E181B !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .tabulator-page,
html.dark-style .tabulator-page {
    background: #0A1214 !important;
    border: 1px solid #24383D !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .tabulator-page.active,
html.dark-style .tabulator-page.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

/* ── KPI & Dashboard Cards in Reports ── */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .kpi-balance-card,
html.dark-style .kpi-card,
html.dark-style .kpi-balance-card {
    background: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .kpi-balance-card,
html.dark-style .kpi-balance-card {
    border-inline-start: 4px solid #D4AF7C !important;
}

/* ── Accordions in Reports ── */
[data-theme="dark"] .accordion-item,
html.dark-style .accordion-item {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .accordion-button,
html.dark-style .accordion-button {
    background: #0E181B !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed),
html.dark-style .accordion-button:not(.collapsed) {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10B981 !important;
}

/* ===================================================================
 * ── Master Action Footers & Create/Edit Form Cards in Dark Mode ──
 * Targets: Role, Customer, Supplier, User, CostCenter, Stores, etc.
 * =================================================================== */
[data-theme="dark"] .master-action-footer,
[data-theme="dark"] .master-command-card > .d-flex.justify-content-center:has(button[type="submit"]),
[data-theme="dark"] .master-page-wrapper .container.my-4:has(button[type="submit"]),
html.dark-style .master-action-footer,
html.dark-style .master-command-card > .d-flex.justify-content-center:has(button[type="submit"]),
html.dark-style .master-page-wrapper .container.my-4:has(button[type="submit"]) {
    background: #121F23 !important;
    background-color: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .master-command-card .card,
html.dark-style .master-command-card .card {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .master-command-card .border,
html.dark-style .master-command-card .border {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .btn-hero-new,
html.dark-style .btn-hero-new {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .btn-hero-new:hover,
html.dark-style .btn-hero-new:hover {
    background: rgba(16, 185, 129, 0.28) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-hero-delete,
html.dark-style .btn-hero-delete {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #F87171 !important;
}

[data-theme="dark"] .btn-hero-delete:hover,
html.dark-style .btn-hero-delete:hover {
    background: #EF4444 !important;
    color: #FFFFFF !important;
}

/* ===================================================================
 * ── Luxury Definition Cards & Create/Edit Pages in Dark Mode ──
 * Targets: def-create-card, item-workspace-card, def-card-header, etc.
 * =================================================================== */
[data-theme="dark"] .def-create-card,
[data-theme="dark"] .item-workspace-card,
html.dark-style .def-create-card,
html.dark-style .item-workspace-card {
    background: #121F23 !important;
    background-color: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .def-create-card:hover,
[data-theme="dark"] .item-workspace-card:hover,
html.dark-style .def-create-card:hover,
html.dark-style .item-workspace-card:hover {
    border-color: rgba(212, 175, 124, 0.3) !important;
    box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .def-card-header,
[data-theme="dark"] .item-card-header,
html.dark-style .def-card-header,
html.dark-style .item-card-header {
    background: #16262B !important;
    background-color: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .def-card-title,
[data-theme="dark"] .item-card-title,
html.dark-style .def-card-title,
html.dark-style .item-card-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .def-card-icon,
[data-theme="dark"] .item-card-icon,
html.dark-style .def-card-icon,
html.dark-style .item-card-icon {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10B981 !important;
}

[data-theme="dark"] .def-card-body,
[data-theme="dark"] .item-card-body,
html.dark-style .def-card-body,
html.dark-style .item-card-body {
    background-color: transparent !important;
}

[data-theme="dark"] .form-label-def,
html.dark-style .form-label-def {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .form-label-def .field-info-icon,
html.dark-style .form-label-def .field-info-icon {
    color: #64748B !important;
}

[data-theme="dark"] .form-label-def .field-info-icon:hover,
html.dark-style .form-label-def .field-info-icon:hover {
    color: #10B981 !important;
}

/* ===================================================================
 * Z4U MODAL COMPONENT SYSTEM - DARK MODE ADAPTATIONS
 * Applies to all invoice modals, popups, and dialogs across the ERP
 * =================================================================== */
[data-theme="dark"] .z4u-modal .modal-content,
html.dark-style .z4u-modal .modal-content {
    background-color: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .z4u-modal .modal-header,
html.dark-style .z4u-modal .modal-header {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .z4u-modal .modal-title,
html.dark-style .z4u-modal .modal-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .z4u-modal .modal-title i,
html.dark-style .z4u-modal .modal-title i {
    color: #10B981 !important;
}

[data-theme="dark"] .z4u-modal .btn-close,
html.dark-style .z4u-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

[data-theme="dark"] .z4u-modal .modal-body,
html.dark-style .z4u-modal .modal-body {
    background: #0B1315 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .z4u-modal .modal-footer,
html.dark-style .z4u-modal .modal-footer {
    background: #16262B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .z4u-modal .modal-search-bar,
[data-theme="dark"] .z4u-modal div[style*="background: #F8FAFC"],
[data-theme="dark"] .z4u-modal div[style*="background: #FAFBFD"],
html.dark-style .z4u-modal .modal-search-bar,
html.dark-style .z4u-modal div[style*="background: #F8FAFC"],
html.dark-style .z4u-modal div[style*="background: #FAFBFD"] {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .z4u-modal .modal-search-addon,
[data-theme="dark"] .z4u-modal .input-group-text,
[data-theme="dark"] .z4u-modal .input-group-text.bg-white,
html.dark-style .z4u-modal .modal-search-addon,
html.dark-style .z4u-modal .input-group-text,
html.dark-style .z4u-modal .input-group-text.bg-white {
    background: #0A1214 !important;
    border-color: #24383D !important;
    color: #10B981 !important;
}

[data-theme="dark"] .z4u-modal .modal-search-input,
[data-theme="dark"] .z4u-modal input.form-control,
html.dark-style .z4u-modal .modal-search-input,
html.dark-style .z4u-modal input.form-control {
    background: #0A1214 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .z4u-modal .modal-search-input::placeholder,
[data-theme="dark"] .z4u-modal input.form-control::placeholder,
html.dark-style .z4u-modal .modal-search-input::placeholder,
html.dark-style .z4u-modal input.form-control::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .z4u-modal .table-responsive,
html.dark-style .z4u-modal .table-responsive {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: #121F23 !important;
}

[data-theme="dark"] .z4u-modal .table,
html.dark-style .z4u-modal .table {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background-color: #121F23 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .z4u-modal .table thead,
[data-theme="dark"] .z4u-modal .table thead th,
html.dark-style .z4u-modal .table thead,
html.dark-style .z4u-modal .table thead th {
    background: #16262B !important;
    background-image: none !important;
    color: #F1F5F9 !important;
    border-bottom: 2px solid #10B981 !important;
    border-inline: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .z4u-modal .table tbody tr,
html.dark-style .z4u-modal .table tbody tr {
    background-color: #121F23 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .z4u-modal .table tbody tr:nth-child(even),
html.dark-style .z4u-modal .table tbody tr:nth-child(even) {
    background-color: #152429 !important;
}

[data-theme="dark"] .z4u-modal .table tbody tr:hover,
html.dark-style .z4u-modal .table tbody tr:hover {
    background-color: rgba(16, 185, 129, 0.12) !important;
}

[data-theme="dark"] .z4u-modal .table td,
html.dark-style .z4u-modal .table td {
    color: #E2E8F0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .z4u-modal .table td input.form-control,
html.dark-style .z4u-modal .table td input.form-control {
    background: #0A1214 !important;
    border: 1px solid #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .z4u-modal .text-dark,
html.dark-style .z4u-modal .text-dark {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .z4u-modal .bg-light,
html.dark-style .z4u-modal .bg-light {
    background-color: #0A1214 !important;
    color: #94A3B8 !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .z4u-modal span[style*="color: #0E5B46"],
html.dark-style .z4u-modal span[style*="color: #0E5B46"] {
    color: #34D399 !important;
    background-color: rgba(16, 185, 129, 0.15) !important;
}

[data-theme="dark"] .z4u-modal .table td .form-check-input,
[data-theme="dark"] .z4u-modal .table th .form-check-input,
html.dark-style .z4u-modal .table td .form-check-input,
html.dark-style .z4u-modal .table th .form-check-input {
    background-color: #0A1214 !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .z4u-modal .table td .form-check-input:checked,
[data-theme="dark"] .z4u-modal .table th .form-check-input:checked,
html.dark-style .z4u-modal .table td .form-check-input:checked,
html.dark-style .z4u-modal .table th .form-check-input:checked {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .z4u-modal .btn-brand-secondary,
html.dark-style .z4u-modal .btn-brand-secondary {
    background: #1A2D33 !important;
    color: #CBD5E1 !important;
    border-color: #24383D !important;
}

[data-theme="dark"] .z4u-modal .btn-brand-secondary:hover,
html.dark-style .z4u-modal .btn-brand-secondary:hover {
    background: #24383D !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .z4u-modal .btn-brand-primary,
html.dark-style .z4u-modal .btn-brand-primary {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .z4u-modal .btn-brand-primary:hover,
html.dark-style .z4u-modal .btn-brand-primary:hover {
    background: #0E9F6E !important;
    border-color: #0E9F6E !important;
}

[data-theme="dark"] .groups-grid-layout,
html.dark-style .groups-grid-layout {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .groups-grid-layout::-webkit-scrollbar,
html.dark-style .groups-grid-layout::-webkit-scrollbar {
    background: #0B1315 !important;
}

[data-theme="dark"] .groups-grid-layout::-webkit-scrollbar-thumb,
html.dark-style .groups-grid-layout::-webkit-scrollbar-thumb {
    background: #24383D !important;
}

[data-theme="dark"] .z4u-modal .box.main_group,
[data-theme="dark"] .z4u-modal .box.child_group,
html.dark-style .z4u-modal .box.main_group,
html.dark-style .z4u-modal .box.child_group {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .z4u-modal .box.main_group:hover,
[data-theme="dark"] .z4u-modal .box.child_group:hover,
html.dark-style .z4u-modal .box.main_group:hover,
html.dark-style .z4u-modal .box.child_group:hover {
    background: #1A2D33 !important;
    border-color: #10B981 !important;
    color: #10B981 !important;
}

[data-theme="dark"] .z4u-modal .box.main_group.active,
[data-theme="dark"] .z4u-modal .box.child_group.active,
html.dark-style .z4u-modal .box.main_group.active,
html.dark-style .z4u-modal .box.child_group.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .z4u-modal .group-icon-wrap,
html.dark-style .z4u-modal .group-icon-wrap {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10B981 !important;
}

[data-theme="dark"] .groups-internal-breadcrumb,
html.dark-style .groups-internal-breadcrumb {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .breadcrumb-item-btn,
html.dark-style .breadcrumb-item-btn {
    color: #10B981 !important;
}

[data-theme="dark"] .breadcrumb-current,
html.dark-style .breadcrumb-current {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .modal-kpi-badge,
html.dark-style .modal-kpi-badge {
    background: #16262B !important;
    border-color: rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .z4u-modal .text-muted,
html.dark-style .z4u-modal .text-muted {
    color: #94A3B8 !important;
}

/* ── Add Partner Modal in Dark Mode ── */
[data-theme="dark"] #add_customer_or_supplier_modal .modal-content,
html.dark-style #add_customer_or_supplier_modal .modal-content {
    background-color: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .modal-header,
html.dark-style #add_customer_or_supplier_modal .modal-header {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .modal-title,
html.dark-style #add_customer_or_supplier_modal .modal-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .modal-header small,
html.dark-style #add_customer_or_supplier_modal .modal-header small {
    color: #94A3B8 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .btn-close,
html.dark-style #add_customer_or_supplier_modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .z4u-icon-badge,
html.dark-style #add_customer_or_supplier_modal .z4u-icon-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10B981 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .modal-body,
html.dark-style #add_customer_or_supplier_modal .modal-body {
    background: #0B1315 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .form-label,
html.dark-style #add_customer_or_supplier_modal .form-label {
    color: #CBD5E1 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .input-group-text,
html.dark-style #add_customer_or_supplier_modal .input-group-text {
    background: #0A1214 !important;
    border-color: #24383D !important;
    color: #10B981 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .form-control,
html.dark-style #add_customer_or_supplier_modal .form-control {
    background: #0A1214 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .form-control.is-invalid,
html.dark-style #add_customer_or_supplier_modal .form-control.is-invalid {
    border-color: #EF4444 !important;
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #FCA5A5 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .form-control.is-valid,
html.dark-style #add_customer_or_supplier_modal .form-control.is-valid {
    border-color: #10B981 !important;
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6EE7B7 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal div[style*="rgba(14, 91, 70, 0.05)"],
html.dark-style #add_customer_or_supplier_modal div[style*="rgba(14, 91, 70, 0.05)"] {
    background: #121F23 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34D399 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .modal-footer,
html.dark-style #add_customer_or_supplier_modal .modal-footer {
    background: #16262B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .btn-light,
html.dark-style #add_customer_or_supplier_modal .btn-light {
    background: #1A2D33 !important;
    border-color: #24383D !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] #add_customer_or_supplier_modal .btn-light:hover,
html.dark-style #add_customer_or_supplier_modal .btn-light:hover {
    background: #24383D !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL Z4U BILL MODALS (Dark Mode Obsidian System)
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .z4u-modal .modal-content,
html.dark-style .z4u-modal .modal-content {
    background-color: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .z4u-modal .modal-header,
html.dark-style .z4u-modal .modal-header {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .z4u-modal .modal-title,
html.dark-style .z4u-modal .modal-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .z4u-modal .modal-title i,
html.dark-style .z4u-modal .modal-title i {
    color: #10B981 !important;
}

[data-theme="dark"] .z4u-modal .btn-close,
html.dark-style .z4u-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

[data-theme="dark"] .z4u-modal .modal-body,
html.dark-style .z4u-modal .modal-body {
    background: #0B1315 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .z4u-modal .modal-footer,
html.dark-style .z4u-modal .modal-footer {
    background: #16262B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .z4u-modal .btn-outline-secondary,
[data-theme="dark"] .z4u-modal .btn-light,
html.dark-style .z4u-modal .btn-outline-secondary,
html.dark-style .z4u-modal .btn-light {
    background: #1A2D33 !important;
    border-color: #24383D !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .z4u-modal .btn-outline-secondary:hover,
[data-theme="dark"] .z4u-modal .btn-light:hover,
html.dark-style .z4u-modal .btn-outline-secondary:hover,
html.dark-style .z4u-modal .btn-light:hover {
    background: #24383D !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .z4u-modal .btn-brand-primary,
html.dark-style .z4u-modal .btn-brand-primary {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .z4u-modal .btn-brand-primary:hover,
html.dark-style .z4u-modal .btn-brand-primary:hover {
    background: #0E9F6E !important;
    border-color: #0E9F6E !important;
}

/* Payment Method Modal Dark Mode */
[data-theme="dark"] #payment_method_modal .payment-modal-header,
[data-theme="dark"] #payment_method_modal .modal-header,
html.dark-style #payment_method_modal .payment-modal-header,
html.dark-style #payment_method_modal .modal-header {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #payment_method_modal .modal-header span.rounded-3,
html.dark-style #payment_method_modal .modal-header span.rounded-3 {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}

[data-theme="dark"] #payment_method_modal .pay-kpi-card-total,
[data-theme="dark"] #payment_method_modal .row > div:first-child > div,
html.dark-style #payment_method_modal .pay-kpi-card-total,
html.dark-style #payment_method_modal .row > div:first-child > div {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #payment_method_modal .pay-kpi-card-total #pay_method_total,
[data-theme="dark"] #payment_method_modal .pay-kpi-card-total span,
[data-theme="dark"] #payment_method_modal .row > div:first-child > div #pay_method_total,
[data-theme="dark"] #payment_method_modal .row > div:first-child > div span,
html.dark-style #payment_method_modal .pay-kpi-card-total #pay_method_total,
html.dark-style #payment_method_modal .pay-kpi-card-total span,
html.dark-style #payment_method_modal .row > div:first-child > div #pay_method_total,
html.dark-style #payment_method_modal .row > div:first-child > div span {
    color: #F1F5F9 !important;
}

[data-theme="dark"] #payment_method_modal .pay-kpi-card-remain,
[data-theme="dark"] #payment_method_modal .row > div:last-child > div,
html.dark-style #payment_method_modal .pay-kpi-card-remain,
html.dark-style #payment_method_modal .row > div:last-child > div {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] #payment_method_modal .pay-kpi-card-remain #pay_method_remain,
[data-theme="dark"] #payment_method_modal .pay-kpi-card-remain span,
[data-theme="dark"] #payment_method_modal .row > div:last-child > div #pay_method_remain,
[data-theme="dark"] #payment_method_modal .row > div:last-child > div span,
html.dark-style #payment_method_modal .pay-kpi-card-remain #pay_method_remain,
html.dark-style #payment_method_modal .pay-kpi-card-remain span,
html.dark-style #payment_method_modal .row > div:last-child > div #pay_method_remain,
html.dark-style #payment_method_modal .row > div:last-child > div span {
    color: #34D399 !important;
}

[data-theme="dark"] #payment_method_modal .pay-table-wrapper,
html.dark-style #payment_method_modal .pay-table-wrapper {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #table_payment_methods thead,
[data-theme="dark"] #payment_method_modal thead,
html.dark-style #table_payment_methods thead,
html.dark-style #payment_method_modal thead {
    background: #16262B !important;
}

[data-theme="dark"] #table_payment_methods thead tr,
html.dark-style #table_payment_methods thead tr {
    border-bottom: 2px solid #10B981 !important;
}

[data-theme="dark"] #table_payment_methods thead th,
html.dark-style #table_payment_methods thead th {
    background: #16262B !important;
    color: #34D399 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #table_payment_methods tbody tr,
html.dark-style #table_payment_methods tbody tr {
    background: #121F23 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] #table_payment_methods tbody tr:hover,
html.dark-style #table_payment_methods tbody tr:hover {
    background: rgba(16, 185, 129, 0.08) !important;
}

[data-theme="dark"] #table_payment_methods tbody td,
html.dark-style #table_payment_methods tbody td {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] #table_payment_methods .form-select,
html.dark-style #table_payment_methods .form-select {
    background-color: #0A1214 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] #table_payment_methods .form-select option,
html.dark-style #table_payment_methods .form-select option {
    background-color: #121F23 !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] #table_payment_methods .method_amount,
html.dark-style #table_payment_methods .method_amount {
    background-color: #0A1214 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] #table_payment_methods .btn-outline-success,
html.dark-style #table_payment_methods .btn-outline-success {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
}

[data-theme="dark"] #table_payment_methods .btn-outline-success:hover,
html.dark-style #table_payment_methods .btn-outline-success:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] #table_payment_methods .btn-outline-danger,
html.dark-style #table_payment_methods .btn-outline-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: #EF4444 !important;
    color: #F87171 !important;
}

[data-theme="dark"] #table_payment_methods .btn-outline-danger:hover,
html.dark-style #table_payment_methods .btn-outline-danger:hover {
    background: #EF4444 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] #payment_method_modal .pay-modal-footer,
[data-theme="dark"] #payment_method_modal .modal-footer,
html.dark-style #payment_method_modal .pay-modal-footer,
html.dark-style #payment_method_modal .modal-footer {
    background: #16262B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    justify-content: center !important;
    gap: 0.85rem !important;
}

#table_payment_methods th,
#table_payment_methods td {
    vertical-align: middle !important;
    text-align: center !important;
}

#table_payment_methods td:last-child,
#table_payment_methods th:last-child {
    text-align: center !important;
}

#table_payment_methods td:last-child > div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    gap: 6px !important;
}

#table_payment_methods .btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

#table_payment_methods .btn > i {
    margin: 0 !important;
    margin-inline-end: 0 !important;
    margin-inline-start: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
}

/* Sales Invoices Helper Modal Dark Mode */
[data-theme="dark"] #help_sales_invoices_modal .modal-header,
html.dark-style #help_sales_invoices_modal .modal-header {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #help_sales_invoices_modal .input-group-text,
[data-theme="dark"] #help_sales_invoices_modal .input-group-text.bg-white,
html.dark-style #help_sales_invoices_modal .input-group-text,
html.dark-style #help_sales_invoices_modal .input-group-text.bg-white {
    background: #121F23 !important;
    border-color: #24383D !important;
    color: #10B981 !important;
}

[data-theme="dark"] #search_in_help_sales_invoices_table,
html.dark-style #search_in_help_sales_invoices_table {
    background: #121F23 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] #search_in_help_sales_invoices_table::placeholder,
html.dark-style #search_in_help_sales_invoices_table::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] #help_sales_invoices_modal .table-responsive,
html.dark-style #help_sales_invoices_modal .table-responsive {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #table_help_sales_invoices thead th,
html.dark-style #table_help_sales_invoices thead th {
    background: #16262B !important;
    color: #34D399 !important;
    border-bottom: 2px solid #10B981 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #table_help_sales_invoices tbody tr,
html.dark-style #table_help_sales_invoices tbody tr {
    background: #121F23 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] #table_help_sales_invoices tbody tr:nth-child(even),
html.dark-style #table_help_sales_invoices tbody tr:nth-child(even) {
    background: #152429 !important;
}

[data-theme="dark"] #table_help_sales_invoices tbody tr:hover,
html.dark-style #table_help_sales_invoices tbody tr:hover {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] #table_help_sales_invoices tbody td,
html.dark-style #table_help_sales_invoices tbody td {
    color: #CBD5E1 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] #help_sales_invoices_modal .modal-footer,
html.dark-style #help_sales_invoices_modal .modal-footer {
    background: #16262B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Universal Global Dark Mode Scrollbars ── */
[data-theme="dark"] ::-webkit-scrollbar-track,
html.dark-style ::-webkit-scrollbar-track,
[data-theme="dark"] *::-webkit-scrollbar-track,
html.dark-style *::-webkit-scrollbar-track {
    background: #0B1315 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
html.dark-style ::-webkit-scrollbar-thumb,
[data-theme="dark"] *::-webkit-scrollbar-thumb,
html.dark-style *::-webkit-scrollbar-thumb {
    background: #24383D !important;
    border-radius: 9999px !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html.dark-style ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
html.dark-style *::-webkit-scrollbar-thumb:hover {
    background: #10B981 !important;
}

[data-theme="dark"],
html.dark-style {
    scrollbar-color: #24383D #0B1315 !important;
}

/* ── Centered Modal Footers ── */
.z4u-modal .modal-footer,
[data-theme="dark"] .z4u-modal .modal-footer,
html.dark-style .z4u-modal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
}

/* ── All Groups Popup Dark Mode ── */
[data-theme="dark"] #all_groups_popup #child_groups,
html.dark-style #all_groups_popup #child_groups {
    background: #0B1315 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #all_groups_popup #child_groups .text-dark,
html.dark-style #all_groups_popup #child_groups .text-dark {
    color: #F1F5F9 !important;
}

[data-theme="dark"] #all_groups_popup #child_groups .text-muted,
[data-theme="dark"] #all_groups_popup #child_groups .text-secondary,
html.dark-style #all_groups_popup #child_groups .text-muted,
html.dark-style #all_groups_popup #child_groups .text-secondary {
    color: #94A3B8 !important;
}

[data-theme="dark"] #all_groups_popup .input-group-text,
html.dark-style #all_groups_popup .input-group-text {
    background: #121F23 !important;
    border-color: #24383D !important;
    color: #10B981 !important;
}

[data-theme="dark"] #all_groups_popup #filter_main_groups_input,
html.dark-style #all_groups_popup #filter_main_groups_input {
    background: #121F23 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] #all_groups_popup #filter_main_groups_input::placeholder,
html.dark-style #all_groups_popup #filter_main_groups_input::placeholder {
    color: #64748B !important;
}

/* ── Universal & Modal Pagination Dark Mode ── */
[data-theme="dark"] .pagination,
html.dark-style .pagination {
    background: transparent !important;
}

[data-theme="dark"] .pagination .page-item,
[data-theme="dark"] .pagination li,
html.dark-style .pagination .page-item,
html.dark-style .pagination li {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

[data-theme="dark"] .pagination .page-link,
html.dark-style .pagination .page-link {
    background-color: #121F23 !important;
    border: 1px solid #24383D !important;
    color: #CBD5E1 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .pagination .page-link:hover:not(.disabled),
html.dark-style .pagination .page-link:hover:not(.disabled) {
    background-color: #16262B !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
    transform: translateY(-1.5px) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link,
[data-theme="dark"] .pagination .page-link.active,
html.dark-style .pagination .page-item.active .page-link,
html.dark-style .pagination .page-link.active {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link,
[data-theme="dark"] .pagination .page-link.disabled,
html.dark-style .pagination .page-item.disabled .page-link,
html.dark-style .pagination .page-link.disabled {
    background-color: #0A1214 !important;
    border-color: #1F2E33 !important;
    color: #475569 !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ── Universal Bill Index Views & Hesba Stat Cards Dark Mode ── */
[data-theme="dark"] .hesba-stat-card,
html.dark-style .hesba-stat-card {
    background: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .hesba-stat-card:hover,
html.dark-style .hesba-stat-card:hover {
    border-color: rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .hesba-stat-card.gold-accent,
html.dark-style .hesba-stat-card.gold-accent {
    border-color: rgba(212, 175, 124, 0.25) !important;
}

[data-theme="dark"] .hesba-stat-card.gold-accent:hover,
html.dark-style .hesba-stat-card.gold-accent:hover {
    border-color: rgba(212, 175, 124, 0.45) !important;
}

[data-theme="dark"] .hesba-stat-label,
html.dark-style .hesba-stat-label {
    color: #94A3B8 !important;
}

[data-theme="dark"] .hesba-stat-value,
html.dark-style .hesba-stat-value {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .hesba-stat-card.gold-accent .hesba-stat-value,
html.dark-style .hesba-stat-card.gold-accent .hesba-stat-value {
    color: #FBBF24 !important;
}

[data-theme="dark"] .hesba-stat-sub,
html.dark-style .hesba-stat-sub {
    color: #64748B !important;
}

[data-theme="dark"] .hesba-stat-sub.text-success,
html.dark-style .hesba-stat-sub.text-success {
    color: #34D399 !important;
}

[data-theme="dark"] .hesba-stat-sub.text-primary,
html.dark-style .hesba-stat-sub.text-primary {
    color: #60A5FA !important;
}

[data-theme="dark"] .hesba-stat-icon.emerald,
html.dark-style .hesba-stat-icon.emerald {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .hesba-stat-icon.gold,
html.dark-style .hesba-stat-icon.gold {
    background: rgba(212, 175, 124, 0.15) !important;
    color: #FBBF24 !important;
}

[data-theme="dark"] .hesba-stat-icon.blue,
html.dark-style .hesba-stat-icon.blue {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #60A5FA !important;
}

[data-theme="dark"] .hesba-stat-icon.red,
html.dark-style .hesba-stat-icon.red {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #F87171 !important;
}

/* ── Index Toolbar Buttons & Controls Dark Mode ── */
[data-theme="dark"] .btn.bg-white,
[data-theme="dark"] .btn-outline-secondary.bg-white,
[data-theme="dark"] .btn-group > .btn.bg-white,
html.dark-style .btn.bg-white,
html.dark-style .btn-outline-secondary.bg-white,
html.dark-style .btn-group > .btn.bg-white {
    background-color: #121F23 !important;
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .btn.bg-white:hover,
[data-theme="dark"] .btn-outline-secondary.bg-white:hover,
[data-theme="dark"] .btn-group > .btn.bg-white:hover,
html.dark-style .btn.bg-white:hover,
html.dark-style .btn-outline-secondary.bg-white:hover,
html.dark-style .btn-group > .btn.bg-white:hover {
    background-color: #16262B !important;
    background: #16262B !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
}

[data-theme="dark"] .btn.bg-white .text-muted,
[data-theme="dark"] .btn.bg-white .text-secondary,
html.dark-style .btn.bg-white .text-muted,
html.dark-style .btn.bg-white .text-secondary {
    color: #94A3B8 !important;
}

[data-theme="dark"] .hesba-mobile-toggle,
html.dark-style .hesba-mobile-toggle {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .badge.bg-white,
html.dark-style .badge.bg-white {
    background-color: #16262B !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .bg-light.border-top,
html.dark-style .bg-light.border-top {
    background-color: #121F23 !important;
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hesba-filter-bar,
html.dark-style .hesba-filter-bar {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hesba-filter-input,
html.dark-style .hesba-filter-input {
    background: #0A1214 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
}

/* ── Master Command Card & Global Search/Print Buttons Dark Mode ── */
[data-theme="dark"] .master-command-card,
html.dark-style .master-command-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .master-command-card .btn,
[data-theme="dark"] .master-command-card button,
[data-theme="dark"] .master-command-card a.btn,
html.dark-style .master-command-card .btn,
html.dark-style .master-command-card button,
html.dark-style .master-command-card a.btn {
    background-color: #121F23 !important;
    background: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .master-command-card .btn:hover,
[data-theme="dark"] .master-command-card button:hover,
[data-theme="dark"] .master-command-card a.btn:hover,
html.dark-style .master-command-card .btn:hover,
html.dark-style .master-command-card button:hover,
html.dark-style .master-command-card a.btn:hover {
    background-color: #16262B !important;
    background: #16262B !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
}

[data-theme="dark"] .master-command-card .btn i,
[data-theme="dark"] .master-command-card button i,
html.dark-style .master-command-card .btn i,
html.dark-style .master-command-card button i {
    color: #94A3B8 !important;
    transition: color 0.2s ease !important;
}

[data-theme="dark"] .master-command-card .btn:hover i,
[data-theme="dark"] .master-command-card button:hover i,
[data-theme="dark"] .btn.bg-white:hover i,
[data-theme="dark"] .btn-outline-secondary.bg-white:hover i,
html.dark-style .master-command-card .btn:hover i,
html.dark-style .master-command-card button:hover i,
html.dark-style .btn.bg-white:hover i,
html.dark-style .btn-outline-secondary.bg-white:hover i {
    color: #34D399 !important;
}

/* ==========================================================================
   ── SYSTEM OPTIONS & SETTINGS TABS (BASE / LIGHT MODE) ──
   ========================================================================== */
.settings-nav-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 4px 16px -2px rgba(14, 91, 70, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.settings-nav-tabs-wrapper {
    background: #F8FAFC;
    border-bottom: 2px solid #E2E8F0;
    padding: 0.5rem 1rem 0;
}

.settings-nav-tabs {
    border-bottom: none;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.settings-nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #475569;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.75rem 1.25rem;
    border-radius: 10px 10px 0 0;
    white-space: nowrap;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.settings-nav-tabs .nav-link i {
    color: #64748B;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.settings-nav-tabs .nav-link:hover {
    color: #0E5B46;
    background: rgba(14, 91, 70, 0.05);
}

.settings-nav-tabs .nav-link:hover i {
    color: #0E5B46;
}

.settings-nav-tabs .nav-link.active {
    color: #0E5B46 !important;
    border-bottom: 3px solid #0E5B46 !important;
    background: #FFFFFF !important;
    font-weight: 800;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);
}

.settings-nav-tabs .nav-link.active i {
    color: #0E5B46 !important;
}

.settings-tab-pane {
    padding: 1.5rem;
}

.section-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0E5B46;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(14, 91, 70, 0.15);
    width: 100%;
}

.perm-card-box {
    background: #FAFCFB;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.perm-card-box:hover {
    border-color: #0E5B46;
    background-color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(14, 91, 70, 0.06);
}

.perm-radio-pill {
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    transition: all 0.18s ease;
}

.perm-radio-pill:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.option-checkbox-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #334155;
    font-size: 0.86rem;
    user-select: none;
}

.option-checkbox-card:hover {
    border-color: #0E5B46;
    background-color: #F8FBF9;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(14, 91, 70, 0.06);
}

.option-checkbox-card .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.option-checkbox-card .form-check-input:checked {
    background-color: #0E5B46;
    border-color: #0E5B46;
}

.option-checkbox-card > label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

/* Base Table Custom & Action Icon Buttons */
.master-table-card {
    background: #FFFFFF;
    border: 1px solid var(--z4u-border, #E2E8F0);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.table-custom {
    margin-bottom: 0;
}

.table-custom thead th {
    background: linear-gradient(180deg, #0E5B46 0%, #0a4635 100%);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.86rem;
    padding: 12px 16px;
    border: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.table-custom tbody td {
    padding: 12px 16px;
    font-size: 0.88rem;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
}

.table-custom tbody tr:hover {
    background-color: #F8FAFC;
}

.action-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-decoration: none;
    background: rgba(14, 91, 70, 0.1);
    color: var(--z4u-primary, #0E5B46);
    border: none;
}

.action-icon-btn:hover {
    background: var(--z4u-primary, #0E5B46);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.action-icon-btn.btn-delete-design:hover {
    background: #EF4444 !important;
    color: #FFFFFF !important;
    border-color: #EF4444 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ── SYSTEM OPTIONS, SETTINGS TABS & ADMINISTRATION DARK MODE OVERRIDES ──
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Settings Nav Card & Tab Panels ── */
[data-theme="dark"] .settings-nav-card,
html.dark-style .settings-nav-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .settings-nav-tabs-wrapper,
html.dark-style .settings-nav-tabs-wrapper {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .settings-nav-tabs .nav-link,
html.dark-style .settings-nav-tabs .nav-link {
    color: #94A3B8 !important;
    background: transparent !important;
    border-color: transparent !important;
}

[data-theme="dark"] .settings-nav-tabs .nav-link i,
html.dark-style .settings-nav-tabs .nav-link i {
    color: #64748B !important;
}

[data-theme="dark"] .settings-nav-tabs .nav-link:hover,
html.dark-style .settings-nav-tabs .nav-link:hover {
    color: #34D399 !important;
    background: rgba(16, 185, 129, 0.08) !important;
}

[data-theme="dark"] .settings-nav-tabs .nav-link:hover i,
html.dark-style .settings-nav-tabs .nav-link:hover i {
    color: #34D399 !important;
}

[data-theme="dark"] .settings-nav-tabs .nav-link.active,
html.dark-style .settings-nav-tabs .nav-link.active {
    color: #10B981 !important;
    border-bottom: 3px solid #10B981 !important;
    background: #121F23 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .settings-nav-tabs .nav-link.active i,
html.dark-style .settings-nav-tabs .nav-link.active i {
    color: #10B981 !important;
}

[data-theme="dark"] .settings-tab-pane,
html.dark-style .settings-tab-pane {
    background: #121F23 !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .settings-tab-pane label,
[data-theme="dark"] .settings-tab-pane .form-label,
html.dark-style .settings-tab-pane label,
html.dark-style .settings-tab-pane .form-label {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .settings-tab-pane hr,
html.dark-style .settings-tab-pane hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── 2. Section Badges & Subheadings ── */
[data-theme="dark"] .section-title-badge,
html.dark-style .section-title-badge {
    color: #34D399 !important;
    border-bottom: 2px solid rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .section-title-badge i,
html.dark-style .section-title-badge i {
    color: #10B981 !important;
}

/* ── 3. Option Checkbox Cards (Bill/Entry Settings) ── */
[data-theme="dark"] .option-checkbox-card,
html.dark-style .option-checkbox-card {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .option-checkbox-card:hover,
html.dark-style .option-checkbox-card:hover {
    background-color: #1A2E34 !important;
    border-color: #10B981 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .option-checkbox-card label,
html.dark-style .option-checkbox-card label {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .option-checkbox-card:hover label,
html.dark-style .option-checkbox-card:hover label {
    color: #FFFFFF !important;
}

[data-theme="dark"] .option-checkbox-card .form-check-input,
html.dark-style .option-checkbox-card .form-check-input {
    background-color: #0E181B;
    border-color: #64748B;
}

[data-theme="dark"] .option-checkbox-card .form-check-input:checked,
html.dark-style .option-checkbox-card .form-check-input:checked {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* ── 4. Permissions Grid, Cards & Radio Pills ── */
[data-theme="dark"] #permissionFilterInput,
html.dark-style #permissionFilterInput {
    background-color: #0E181B !important;
    color: #F1F5F9 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] #permissionFilterInput::placeholder,
html.dark-style #permissionFilterInput::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] #permissionsGrid h5,
html.dark-style #permissionsGrid h5 {
    color: #E2E8F0 !important;
}

[data-theme="dark"] #permissionsGrid label.cursor-pointer,
html.dark-style #permissionsGrid label.cursor-pointer {
    background: #16262B !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.85rem !important;
    transition: all 0.2s ease !important;
}

[data-theme="dark"] #permissionsGrid label.cursor-pointer:hover,
html.dark-style #permissionsGrid label.cursor-pointer:hover {
    background: #1E333A !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] #permissionsGrid label.cursor-pointer:has(input:checked),
html.dark-style #permissionsGrid label.cursor-pointer:has(input:checked) {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
    font-weight: 700 !important;
}

[data-theme="dark"] #permissionsGrid .form-check-input:checked,
html.dark-style #permissionsGrid .form-check-input:checked {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .perm-card-box,
html.dark-style .perm-card-box {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .perm-card-box:hover,
html.dark-style .perm-card-box:hover {
    background: #1A2E34 !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .perm-radio-pill,
html.dark-style .perm-radio-pill {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .perm-radio-pill:hover,
html.dark-style .perm-radio-pill:hover {
    background: #16262B !important;
    border-color: #10B981 !important;
}

/* ── 5. Master Breadcrumb & Status Indicator Dark Contrast ── */
[data-theme="dark"] .master-breadcrumb .breadcrumb-item-link,
html.dark-style .master-breadcrumb .breadcrumb-item-link {
    color: #94A3B8 !important;
}

[data-theme="dark"] .master-breadcrumb .breadcrumb-item-link:hover,
html.dark-style .master-breadcrumb .breadcrumb-item-link:hover {
    color: #34D399 !important;
}

[data-theme="dark"] .master-breadcrumb .breadcrumb-sep,
html.dark-style .master-breadcrumb .breadcrumb-sep {
    color: #64748B !important;
}

[data-theme="dark"] .master-breadcrumb .breadcrumb-item-current,
html.dark-style .master-breadcrumb .breadcrumb-item-current {
    color: #34D399 !important;
}

[data-theme="dark"] .master-status-indicator,
html.dark-style .master-status-indicator {
    color: #34D399 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

/* ── 6. Universal Search & Input Groups Dark Mode (Across All Pages) ── */
/* Base Input Group & Container */
[data-theme="dark"] .input-group,
html.dark-style .input-group {
    border-radius: 8px;
}

/* Input Fields inside Input Groups */
[data-theme="dark"] .input-group .form-control,
[data-theme="dark"] .input-group input[type="search"],
[data-theme="dark"] .input-group input[type="text"],
[data-theme="dark"] .input-group input,
html.dark-style .input-group .form-control,
html.dark-style .input-group input[type="search"],
html.dark-style .input-group input[type="text"],
html.dark-style .input-group input {
    background-color: #0A1214 !important;
    background: #0A1214 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .input-group .form-control:focus,
[data-theme="dark"] .input-group input:focus,
html.dark-style .input-group .form-control:focus,
html.dark-style .input-group input:focus {
    background-color: #0E181B !important;
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
    color: #FFFFFF !important;
    z-index: 3 !important;
}

[data-theme="dark"] .input-group .form-control::placeholder,
[data-theme="dark"] .input-group input::placeholder,
html.dark-style .input-group .form-control::placeholder,
html.dark-style .input-group input::placeholder {
    color: #64748B !important;
}

/* Buttons inside Input Groups & General Outline Secondary */
[data-theme="dark"] .input-group > .btn,
[data-theme="dark"] .input-group > button,
[data-theme="dark"] .input-group .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-brand-outline,
html.dark-style .input-group > .btn,
html.dark-style .input-group > button,
html.dark-style .input-group .btn-outline-secondary,
html.dark-style .btn-outline-secondary,
html.dark-style .btn-brand-outline {
    background-color: #0E181B !important;
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .input-group > .btn:hover,
[data-theme="dark"] .input-group > button:hover,
[data-theme="dark"] .input-group .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-brand-outline:hover,
html.dark-style .input-group > .btn:hover,
html.dark-style .input-group > button:hover,
html.dark-style .input-group .btn-outline-secondary:hover,
html.dark-style .btn-outline-secondary:hover,
html.dark-style .btn-brand-outline:hover {
    background-color: #16262B !important;
    background: #16262B !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
    z-index: 2 !important;
}

[data-theme="dark"] .input-group > .btn i,
[data-theme="dark"] .input-group > button i,
[data-theme="dark"] .input-group .btn-outline-secondary i,
[data-theme="dark"] .btn-outline-secondary i,
[data-theme="dark"] .btn-brand-outline i,
html.dark-style .input-group > .btn i,
html.dark-style .input-group > button i,
html.dark-style .input-group .btn-outline-secondary i,
html.dark-style .btn-outline-secondary i,
html.dark-style .btn-brand-outline i {
    color: #94A3B8 !important;
    transition: color 0.18s ease !important;
}

[data-theme="dark"] .input-group > .btn:hover i,
[data-theme="dark"] .input-group > button:hover i,
[data-theme="dark"] .input-group .btn-outline-secondary:hover i,
[data-theme="dark"] .btn-outline-secondary:hover i,
[data-theme="dark"] .btn-brand-outline:hover i,
html.dark-style .input-group > .btn:hover i,
html.dark-style .input-group > button:hover i,
html.dark-style .input-group .btn-outline-secondary:hover i,
html.dark-style .btn-outline-secondary:hover i,
html.dark-style .btn-brand-outline:hover i {
    color: #34D399 !important;
}

/* Input Group Addon Texts (e.g. Magnifying Glass Spans) */
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .input-group-text.bg-white,
[data-theme="dark"] .input-group-text.bg-light,
html.dark-style .input-group-text,
html.dark-style .input-group-text.bg-white,
html.dark-style .input-group-text.bg-light {
    background-color: #0E181B !important;
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94A3B8 !important;
}

[data-theme="dark"] .input-group-text i,
html.dark-style .input-group-text i {
    color: #94A3B8 !important;
}

/* Smart Search Group & Perm Search Box */
[data-theme="dark"] .smart-search-group,
html.dark-style .smart-search-group {
    background: #0A1214 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .smart-search-input,
html.dark-style .smart-search-input {
    background-color: #0A1214 !important;
    color: #F1F5F9 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .smart-search-input::placeholder,
html.dark-style .smart-search-input::placeholder {
    color: #64748B !important;
}

/* Unified RTL / LTR Input-Group Corners so inputs & buttons merge seamlessly */
[dir="rtl"] .input-group > :first-child,
.rtl .input-group > :first-child,
html[dir="rtl"] .input-group > :first-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

[dir="rtl"] .input-group > :last-child,
.rtl .input-group > :last-child,
html[dir="rtl"] .input-group > :last-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-right: -1px !important;
}

[dir="rtl"] .input-group > :not(:first-child):not(:last-child),
.rtl .input-group > :not(:first-child):not(:last-child),
html[dir="rtl"] .input-group > :not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* Toolbar Buttons in Button Groups (Dark Mode) */
[data-theme="dark"] .btn-group .btn-outline-secondary,
html.dark-style .btn-group .btn-outline-secondary {
    background-color: #0E181B !important;
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94A3B8 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .btn-group .btn-outline-secondary:hover,
html.dark-style .btn-group .btn-outline-secondary:hover {
    background-color: #16262B !important;
    background: #16262B !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
    z-index: 2 !important;
}

[dir="rtl"] .btn-group > :first-child,
.rtl .btn-group > :first-child,
html[dir="rtl"] .btn-group > :first-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

[dir="rtl"] .btn-group > :last-child,
.rtl .btn-group > :last-child,
html[dir="rtl"] .btn-group > :last-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

[dir="rtl"] .btn-group > :not(:first-child):not(:last-child),
.rtl .btn-group > :not(:first-child):not(:last-child),
html[dir="rtl"] .btn-group > :not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* ── 7. Action Icon Buttons & Hero Action Footer ── */
[data-theme="dark"] .action-icon-btn,
html.dark-style .action-icon-btn {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .action-icon-btn:hover,
html.dark-style .action-icon-btn:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}

[data-theme="dark"] .btn-hero-back,
html.dark-style .btn-hero-back {
    background: #0E181B !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94A3B8 !important;
}

[data-theme="dark"] .btn-hero-back:hover,
html.dark-style .btn-hero-back:hover {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .table-custom tbody tr:hover,
html.dark-style .table-custom tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .table-custom tbody td,
html.dark-style .table-custom tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #CBD5E1 !important;
}

/* ── 8. Master Card Header & Upsert Form Dark Mode (Company, Customer, Supplier, User) ── */
[data-theme="dark"] .master-card-header,
html.dark-style .master-card-header {
    background: #16262B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .master-card-header h5,
html.dark-style .master-card-header h5 {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .master-card-header h5 i,
html.dark-style .master-card-header h5 i {
    color: #34D399 !important;
}

[data-theme="dark"] .master-card-body,
html.dark-style .master-card-body {
    background: #121F23 !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .logo-preview-box,
html.dark-style .logo-preview-box {
    background: #16262B !important;
    border: 2px dashed rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .logo-preview-box:hover,
html.dark-style .logo-preview-box:hover {
    background: #1A2E34 !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .logo-preview-box img#previewImage,
html.dark-style .logo-preview-box img#previewImage {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .radio-pill-item,
html.dark-style .radio-pill-item {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .radio-pill-item:hover,
html.dark-style .radio-pill-item:hover {
    background: #1E333A !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-map-trigger,
html.dark-style .btn-map-trigger {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .btn-map-trigger:hover,
html.dark-style .btn-map-trigger:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .master-action-footer,
[data-theme="dark"] .master-command-card > .d-flex.justify-content-center:has(button[type="submit"]),
[data-theme="dark"] .master-page-wrapper .container.my-4:has(button[type="submit"]),
html.dark-style .master-action-footer,
html.dark-style .master-command-card > .d-flex.justify-content-center:has(button[type="submit"]),
html.dark-style .master-page-wrapper .container.my-4:has(button[type="submit"]) {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ── 9. Table Action Buttons Dark Mode (Universal for all Master Grids) ── */
[data-theme="dark"] .table-action-btn,
html.dark-style .table-action-btn {
    background: #16262B !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94A3B8 !important;
}

[data-theme="dark"] .table-action-btn:hover,
html.dark-style .table-action-btn:hover {
    background: #1E333A !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
    transform: translateY(-1px);
}

[data-theme="dark"] .table-action-edit,
html.dark-style .table-action-edit {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .table-action-edit:hover,
html.dark-style .table-action-edit:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .table-action-delete,
html.dark-style .table-action-delete {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #F87171 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

[data-theme="dark"] .table-action-delete:hover,
html.dark-style .table-action-delete:hover {
    background: #EF4444 !important;
    color: #FFFFFF !important;
    border-color: #EF4444 !important;
}

[data-theme="dark"] .table-action-btn[style*="#FFF7ED"],
[data-theme="dark"] .table-action-btn[style*="fff7ed"],
html.dark-style .table-action-btn[style*="#FFF7ED"],
html.dark-style .table-action-btn[style*="fff7ed"] {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .table-action-btn[style*="rgba(14, 91, 70"],
html.dark-style .table-action-btn[style*="rgba(14, 91, 70"] {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* ── 10. Universal Navigation Tabs in Dark Mode (Master Forms, Modals & Detail Tabs) ── */
[data-theme="dark"] .nav-tabs,
html.dark-style .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 0.35rem !important;
}

[data-theme="dark"] .nav-tabs .nav-link,
html.dark-style .nav-tabs .nav-link {
    color: #94A3B8 !important;
    background: #121F23 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover,
html.dark-style .nav-tabs .nav-link:hover {
    color: #D4AF7C !important;
    background: #16262B !important;
    border-color: rgba(212, 175, 124, 0.25) !important;
    border-bottom: none !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active,
html.dark-style .nav-tabs .nav-link.active {
    color: #34D399 !important;
    background: #16292E !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-bottom: 2px solid #10B981 !important;
    font-weight: 800 !important;
    box-shadow: 0 -2px 8px rgba(16, 185, 129, 0.12) !important;
}

/* ── 11. Universal Dark Mode Tables in Show-Page, Modals & Detail Tabs ── */
[data-theme="dark"] .show-page table th,
[data-theme="dark"] .show-page table thead th,
[data-theme="dark"] .layout-page .show-page table th,
[data-theme="dark"] .layout-page .show-page table thead th,
html.dark-style .show-page table th,
html.dark-style .show-page table thead th,
html.dark-style .layout-page .show-page table th,
html.dark-style .layout-page .show-page table thead th {
    background: #0E181B !important;
    background-image: none !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.25) !important;
    border-inline: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .show-page table th *,
[data-theme="dark"] .layout-page .show-page table th *,
html.dark-style .show-page table th *,
html.dark-style .layout-page .show-page table th * {
    color: #D4AF7C !important;
}

[data-theme="dark"] .show-page table td,
[data-theme="dark"] .layout-page .show-page table td,
html.dark-style .show-page table td,
html.dark-style .layout-page .show-page table td {
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
    background-color: transparent !important;
}

/* ── 12. Executive Workspace Components in Dark Mode (Item Create, Item Group, Account Def, etc.) ── */
[data-theme="dark"] .item-workspace-card,
html.dark-style .item-workspace-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .item-workspace-card:hover,
html.dark-style .item-workspace-card:hover {
    border-color: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .item-card-header,
html.dark-style .item-card-header {
    background: #142327 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .item-card-title,
html.dark-style .item-card-title {
    color: #F8FAFC !important;
}
[data-theme="dark"] .item-card-icon,
html.dark-style .item-card-icon {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}
[data-theme="dark"] .z4u-field-label,
html.dark-style .z4u-field-label {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .z4u-form-control,
[data-theme="dark"] .item-workspace-card .form-control,
[data-theme="dark"] .item-workspace-card .form-select,
html.dark-style .z4u-form-control,
html.dark-style .item-workspace-card .form-control,
html.dark-style .item-workspace-card .form-select {
    background-color: #16262B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .z4u-form-control:focus,
[data-theme="dark"] .item-workspace-card .form-control:focus,
[data-theme="dark"] .item-workspace-card .form-select:focus,
html.dark-style .z4u-form-control:focus,
html.dark-style .item-workspace-card .form-control:focus,
html.dark-style .item-workspace-card .form-select:focus {
    border-color: #10B981 !important;
    background-color: #16262B !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
[data-theme="dark"] .z4u-form-control[readonly],
[data-theme="dark"] .item-workspace-card .form-control[readonly],
html.dark-style .z4u-form-control[readonly],
html.dark-style .item-workspace-card .form-control[readonly] {
    background-color: #0E181B !important;
    color: #94A3B8 !important;
}
[data-theme="dark"] .btn-quick-add,
html.dark-style .btn-quick-add {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #34D399 !important;
}
[data-theme="dark"] .btn-quick-add:hover,
html.dark-style .btn-quick-add:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}
[data-theme="dark"] .z4u-section-title,
html.dark-style .z4u-section-title {
    color: #34D399 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .z4u-section-title i,
html.dark-style .z4u-section-title i {
    color: #D4AF7C !important;
}
[data-theme="dark"] .z4u-toggle-card,
html.dark-style .z4u-toggle-card {
    background: #142327 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    margin-bottom: 0 !important;
}
[data-theme="dark"] .z4u-toggle-card:hover,
html.dark-style .z4u-toggle-card:hover {
    background: #182B30 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}
[data-theme="dark"] .z4u-toggle-label,
html.dark-style .z4u-toggle-label {
    color: #E2E8F0 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
[data-theme="dark"] .z4u-toggle-icon,
html.dark-style .z4u-toggle-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}
[data-theme="dark"] .z4u-toggle-card:hover .z4u-toggle-icon,
html.dark-style .z4u-toggle-card:hover .z4u-toggle-icon {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6EE7B7 !important;
}
[data-theme="dark"] .z4u-toggle-sub,
html.dark-style .z4u-toggle-sub {
    color: #94A3B8 !important;
}
[data-theme="dark"] .z4u-toggle-card .form-check-input,
html.dark-style .z4u-toggle-card .form-check-input {
    width: 2.75rem !important;
    height: 1.45rem !important;
    min-width: 2.75rem !important;
    cursor: pointer !important;
    margin: 0 !important;
    border-radius: 2rem !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
[data-theme="dark"] .z4u-toggle-card .form-check-input:checked,
html.dark-style .z4u-toggle-card .form-check-input:checked {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
}
[data-theme="dark"] .table-executive-wrapper,
html.dark-style .table-executive-wrapper {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .table-executive thead,
html.dark-style .table-executive thead {
    background: #0A1214 !important;
}
[data-theme="dark"] .table-executive thead th,
html.dark-style .table-executive thead th {
    background: #0A1214 !important;
    background-image: none !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.25) !important;
    border-inline: 1px solid rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .table-executive tbody tr,
html.dark-style .table-executive tbody tr {
    background-color: transparent !important;
}
[data-theme="dark"] .table-executive tbody tr:nth-of-type(even),
html.dark-style .table-executive tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
[data-theme="dark"] .table-executive tbody tr:hover,
html.dark-style .table-executive tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .table-executive tbody td,
html.dark-style .table-executive tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
}
[data-theme="dark"] .table-executive tbody td:first-child,
html.dark-style .table-executive tbody td:first-child {
    color: #94A3B8 !important;
}
[data-theme="dark"] .table-executive .form-control,
[data-theme="dark"] .table-executive .form-select,
html.dark-style .table-executive .form-control,
html.dark-style .table-executive .form-select {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .table-executive .select2-container .select2-selection--single,
html.dark-style .table-executive .select2-container .select2-selection--single {
    background-color: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .table-executive .select2-container .select2-selection--single .select2-selection__rendered,
html.dark-style .table-executive .select2-container .select2-selection--single .select2-selection__rendered {
    color: #FFFFFF !important;
}
[data-theme="dark"] .btn-table-action-add,
html.dark-style .btn-table-action-add {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34D399 !important;
}
[data-theme="dark"] .btn-table-action-del,
html.dark-style .btn-table-action-del {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #F87171 !important;
}
[data-theme="dark"] .barcode-scan-btn,
html.dark-style .barcode-scan-btn {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #34D399 !important;
}
[data-theme="dark"] .z4u-capsule-tabs,
html.dark-style .z4u-capsule-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px !important;
    background: #0E181B !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    margin-bottom: 1.5rem !important;
    list-style: none !important;
}
[data-theme="dark"] .z4u-capsule-tabs .nav-item,
html.dark-style .z4u-capsule-tabs .nav-item {
    flex: 1 1 calc(16.666% - 8px) !important;
    min-width: 145px !important;
}
[data-theme="dark"] .z4u-capsule-tabs .nav-link,
html.dark-style .z4u-capsule-tabs .nav-link {
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    background: #142327 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
}
[data-theme="dark"] .z4u-capsule-tabs .nav-link:hover,
html.dark-style .z4u-capsule-tabs .nav-link:hover {
    background: #192D32 !important;
    border-color: rgba(212, 175, 124, 0.4) !important;
    color: #D4AF7C !important;
    transform: translateY(-1px) !important;
}
[data-theme="dark"] .z4u-capsule-tabs .nav-link.active,
[data-theme="dark"] .z4u-capsule-tabs .nav-link.active span,
[data-theme="dark"] .z4u-capsule-tabs .nav-link.active *,
html.dark-style .z4u-capsule-tabs .nav-link.active,
html.dark-style .z4u-capsule-tabs .nav-link.active span,
html.dark-style .z4u-capsule-tabs .nav-link.active * {
    background: linear-gradient(135deg, #0E5B46 0%, #10B981 100%) !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .z4u-capsule-tabs .nav-link.active i,
html.dark-style .z4u-capsule-tabs .nav-link.active i {
    color: #FFFFFF !important;
}
[data-theme="dark"] .btn-hero-back,
html.dark-style .btn-hero-back {
    background: #16262B !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .btn-hero-back:hover,
html.dark-style .btn-hero-back:hover {
    background: #1E333A !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   PUNCH STATION EXECUTIVE DARK THEME (QuickIn & QuickOut)
   ========================================================================== */
[data-theme="dark"] .station-nav-bar,
html.dark-style .station-nav-bar {
    background: #121F23 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .station-segmented-pills,
html.dark-style .station-segmented-pills {
    background: #0A1214 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .station-pill-item,
html.dark-style .station-pill-item {
    color: #94A3B8 !important;
}

[data-theme="dark"] .station-pill-item.active-in,
html.dark-style .station-pill-item.active-in {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .station-pill-item.active-out,
html.dark-style .station-pill-item.active-out {
    background: #DC2626 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35) !important;
}

[data-theme="dark"] .station-pill-item.out-link:hover,
html.dark-style .station-pill-item.out-link:hover {
    background: rgba(220, 38, 38, 0.18) !important;
    color: #F87171 !important;
}

[data-theme="dark"] .station-pill-item.in-link:hover,
html.dark-style .station-pill-item.in-link:hover {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .station-shift-badge,
html.dark-style .station-shift-badge {
    color: #34D399 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .punch-console-card,
html.dark-style .punch-console-card {
    background: #121F23 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .punch-console-header,
html.dark-style .punch-console-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .punch-console-icon,
html.dark-style .punch-console-icon {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .punch-console-title,
html.dark-style .punch-console-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .punch-console-subtitle,
html.dark-style .punch-console-subtitle {
    color: #94A3B8 !important;
}

[data-theme="dark"] .station-field-label,
html.dark-style .station-field-label {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .station-field-label i,
html.dark-style .station-field-label i {
    color: #34D399 !important;
}

[data-theme="dark"] .station-textarea,
html.dark-style .station-textarea {
    background-color: #0A1214 !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .station-textarea:focus,
html.dark-style .station-textarea:focus {
    background-color: #0E181B !important;
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.18) !important;
}

[data-theme="dark"] .btn-executive-reset,
html.dark-style .btn-executive-reset {
    background: #0E181B !important;
    color: #94A3B8 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .btn-executive-reset:hover,
html.dark-style .btn-executive-reset:hover {
    background: #16262B !important;
    color: #F1F5F9 !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

[data-theme="dark"] .emp-preview-pill,
html.dark-style .emp-preview-pill {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .station-kpi-card,
html.dark-style .station-kpi-card {
    background: #121F23 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .station-kpi-title,
html.dark-style .station-kpi-title {
    color: #94A3B8 !important;
}

[data-theme="dark"] .station-kpi-value,
html.dark-style .station-kpi-value {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .station-kpi-value small,
html.dark-style .station-kpi-value small {
    color: #64748B !important;
}

[data-theme="dark"] .attendance-log-card,
html.dark-style .attendance-log-card {
    background: #121F23 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .attendance-log-header,
html.dark-style .attendance-log-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .attendance-log-title,
html.dark-style .attendance-log-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .attendance-log-title i,
html.dark-style .attendance-log-title i {
    color: #34D399 !important;
}

[data-theme="dark"] #logCountBadge,
html.dark-style #logCountBadge {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .attendance-filter-input,
html.dark-style .attendance-filter-input {
    background: #0A1214 !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .attendance-filter-input:focus,
html.dark-style .attendance-filter-input:focus {
    background: #0E181B !important;
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}

[data-theme="dark"] .attendance-log-card #btnRefreshLog,
html.dark-style .attendance-log-card #btnRefreshLog {
    background: #0E181B !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94A3B8 !important;
}

[data-theme="dark"] .attendance-log-card #btnRefreshLog:hover,
html.dark-style .attendance-log-card #btnRefreshLog:hover {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #F1F5F9 !important;
}

/* Tabulator Tables Master Dark Rules */
[data-theme="dark"] .tabulator,
html.dark-style .tabulator {
    background: #121F23 !important;
    background-color: #121F23 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .tabulator .tabulator-tableholder,
html.dark-style .tabulator .tabulator-tableholder,
[data-theme="dark"] .tabulator .tabulator-table,
html.dark-style .tabulator .tabulator-table {
    background: #121F23 !important;
    background-color: #121F23 !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .tabulator .tabulator-header,
html.dark-style .tabulator .tabulator-header {
    background: #0E181B !important;
    background-color: #0E181B !important;
    border-bottom: 2.5px solid rgba(212, 175, 124, 0.35) !important;
    color: #D4AF7C !important;
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col,
html.dark-style .tabulator .tabulator-header .tabulator-col {
    background: #0E181B !important;
    background-color: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-title,
html.dark-style .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    color: #D4AF7C !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .tabulator .tabulator-header-filter input,
html.dark-style .tabulator .tabulator-header-filter input {
    background: #0A1214 !important;
    border: 1px solid #24383D !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .tabulator .tabulator-row,
[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-odd,
html.dark-style .tabulator .tabulator-row,
html.dark-style .tabulator .tabulator-row.tabulator-row-odd {
    background-color: #121F23 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
}

[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-even,
[data-theme="dark"] .tabulator .tabulator-row:nth-child(even),
[data-theme="dark"] .tabulator.table-striped .tabulator-row:nth-child(even),
html.dark-style .tabulator .tabulator-row.tabulator-row-even,
html.dark-style .tabulator .tabulator-row:nth-child(even),
html.dark-style .tabulator.table-striped .tabulator-row:nth-child(even) {
    background-color: #16262B !important;
    color: #E2E8F0 !important;
}

[data-theme="dark"] .tabulator .tabulator-row:hover,
[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-even:hover,
[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-odd:hover,
html.dark-style .tabulator .tabulator-row:hover,
html.dark-style .tabulator .tabulator-row.tabulator-row-even:hover,
html.dark-style .tabulator .tabulator-row.tabulator-row-odd:hover {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .tabulator .tabulator-row .tabulator-cell,
html.dark-style .tabulator .tabulator-row .tabulator-cell {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: inherit !important;
}

[data-theme="dark"] .tabulator .tabulator-row .tabulator-cell.tabulator-frozen,
html.dark-style .tabulator .tabulator-row .tabulator-cell.tabulator-frozen {
    background: #121F23 !important;
    color: #E2E8F0 !important;
}

[data-theme="dark"] .tabulator .tabulator-calcs-holder,
[data-theme="dark"] .tabulator .tabulator-calcs-holder .tabulator-row,
[data-theme="dark"] .tabulator .tabulator-footer .tabulator-calcs-holder,
[data-theme="dark"] .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
[data-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder,
[data-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row,
[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs,
[data-theme="dark"] .tabulator .tabulator-calcs,
[data-theme="dark"] .tabulator .tabulator-calcs-bottom,
[data-theme="dark"] .tabulator .tabulator-calcs-top,
html.dark-style .tabulator .tabulator-calcs-holder,
html.dark-style .tabulator .tabulator-calcs-holder .tabulator-row,
html.dark-style .tabulator .tabulator-footer .tabulator-calcs-holder,
html.dark-style .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
html.dark-style .tabulator .tabulator-header .tabulator-calcs-holder,
html.dark-style .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row,
html.dark-style .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs,
html.dark-style .tabulator .tabulator-calcs,
html.dark-style .tabulator .tabulator-calcs-bottom,
html.dark-style .tabulator .tabulator-calcs-top {
    background: #0E181B !important;
    background-color: #0E181B !important;
    border-top: 2px solid rgba(212, 175, 124, 0.35) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    color: #D4AF7C !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .tabulator .tabulator-calcs .tabulator-cell,
[data-theme="dark"] .tabulator .tabulator-calcs-holder .tabulator-cell,
html.dark-style .tabulator .tabulator-calcs .tabulator-cell,
html.dark-style .tabulator .tabulator-calcs-holder .tabulator-cell {
    background-color: transparent !important;
    color: #D4AF7C !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .tabulator .tabulator-footer,
html.dark-style .tabulator .tabulator-footer {
    background: #0E181B !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page,
[data-theme="dark"] .tabulator .tabulator-paginator .tabulator-page,
html.dark-style .tabulator .tabulator-footer .tabulator-page,
html.dark-style .tabulator .tabulator-paginator .tabulator-page {
    background: #0A1214 !important;
    border: 1px solid #24383D !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active,
[data-theme="dark"] .tabulator .tabulator-paginator .tabulator-page.active,
html.dark-style .tabulator .tabulator-footer .tabulator-page.active,
html.dark-style .tabulator .tabulator-paginator .tabulator-page.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   PERMISSIONS & ACCESS MATRIX (USER & ROLE) - EXECUTIVE DARK THEME
   ========================================================================== */
[data-theme="dark"] .master-header-hero,
html.dark-style .master-header-hero {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .master-header-top-row,
html.dark-style .master-header-top-row {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .master-breadcrumb,
[data-theme="dark"] .breadcrumb-item-link,
[data-theme="dark"] .breadcrumb-sep,
html.dark-style .master-breadcrumb,
html.dark-style .breadcrumb-item-link,
html.dark-style .breadcrumb-sep {
    color: #94A3B8 !important;
}

[data-theme="dark"] .breadcrumb-item-current,
html.dark-style .breadcrumb-item-current {
    color: #34D399 !important;
}

[data-theme="dark"] .master-header-title,
html.dark-style .master-header-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .master-header-subtitle,
html.dark-style .master-header-subtitle {
    color: #94A3B8 !important;
}

[data-theme="dark"] .master-status-indicator,
html.dark-style .master-status-indicator {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .btn-hero-save,
html.dark-style .btn-hero-save {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .btn-hero-back,
html.dark-style .btn-hero-back {
    background-color: #16262B !important;
    color: #CBD5E1 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .btn-hero-back:hover,
html.dark-style .btn-hero-back:hover {
    background-color: #1D3137 !important;
    color: #34D399 !important;
    border-color: #34D399 !important;
}

/* ==========================================================================
   Z4U PERMISSIONS SUITE - UNIFIED CAPSULE DESIGN SYSTEM (LIGHT & DARK)
   Matches classic capsule grid layout with Z4U Emerald & Gold Identity
   ========================================================================== */

/* ── Main Command Card ── */
.master-command-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

[data-theme="dark"] .master-command-card,
html.dark-style .master-command-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35) !important;
}

/* ── Perm Toolbar ── */
.perm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #E2E8F0;
    flex-wrap: wrap;
}

[data-theme="dark"] .perm-toolbar,
html.dark-style .perm-toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.perm-search-box {
    position: relative;
    min-width: 280px;
    max-width: 420px;
    flex: 1;
}

.perm-search-box .form-control {
    border-radius: 8px;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    padding: 9px 14px;
    font-size: 0.9rem;
    color: #1E293B;
    transition: all 0.2s ease;
}

[dir="rtl"] .perm-search-box .form-control {
    padding-right: 38px;
}

[dir="ltr"] .perm-search-box .form-control {
    padding-left: 38px;
}

.perm-search-box .perm-search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    pointer-events: none;
    font-size: 0.9rem;
    z-index: 5;
}

[dir="rtl"] .perm-search-box .perm-search-icon {
    right: 14px;
}

[dir="ltr"] .perm-search-box .perm-search-icon {
    left: 14px;
}

.perm-search-box .form-control:focus {
    border-color: var(--brand-emerald, #0E5B46);
    box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15);
    background: #FFFFFF;
}

[data-theme="dark"] .perm-search-box .form-control,
html.dark-style .perm-search-box .form-control {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .perm-search-box .form-control:focus,
html.dark-style .perm-search-box .form-control:focus {
    border-color: #34D399 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
    color: #FFFFFF !important;
}

/* ── Global Select All Box ── */
.global-select-all-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    color: #334155;
    user-select: none;
    transition: all 0.2s ease;
}

.global-select-all-box:hover {
    background: rgba(14, 91, 70, 0.05);
    border-color: var(--brand-emerald, #0E5B46);
    color: var(--brand-emerald, #0E5B46);
}

.global-select-all-box label {
    margin: 0;
    cursor: pointer;
}

[data-theme="dark"] .global-select-all-box,
html.dark-style .global-select-all-box {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .global-select-all-box:hover,
html.dark-style .global-select-all-box:hover {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: #34D399 !important;
    color: #34D399 !important;
}

/* ── Toolbar buttons & counter in GetPermissionsForUser ── */
.perm-toggle-btn {
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 5px 14px;
    transition: all 0.2s ease;
}

.perm-active-counter {
    background: rgba(14, 91, 70, 0.08);
    color: var(--brand-emerald, #0E5B46);
    border: 1px solid rgba(14, 91, 70, 0.25);
    border-radius: 20px;
    padding: 5px 14px;
    font-weight: 700;
    font-size: 0.84rem;
}

[data-theme="dark"] .perm-active-counter,
html.dark-style .perm-active-counter {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* ── Group Section & Header Banner ── */
.group-section {
    margin-bottom: 24px;
}

.group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.08) 0%, rgba(212, 175, 124, 0.06) 100%);
    border: 1px solid rgba(14, 91, 70, 0.20);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.group-header:hover {
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.12) 0%, rgba(212, 175, 124, 0.10) 100%);
    border-color: rgba(14, 91, 70, 0.35);
}

.group-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.group-header-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--brand-emerald, #0E5B46);
    letter-spacing: -0.2px;
}

.group-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-collapse-icon {
    color: var(--brand-emerald, #0E5B46);
    font-size: 0.9rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.group-header.collapsed .group-collapse-icon {
    transform: rotate(-90deg);
}

[data-theme="dark"] .group-header,
html.dark-style .group-header {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.14) 0%, rgba(212, 175, 124, 0.08) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .group-header:hover,
html.dark-style .group-header:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(212, 175, 124, 0.12) 100%) !important;
    border-color: #34D399 !important;
}

[data-theme="dark"] .group-header-title,
[data-theme="dark"] .group-collapse-icon,
html.dark-style .group-header-title,
html.dark-style .group-collapse-icon {
    color: #34D399 !important;
}

/* ── Subforms Grid ── */
.subforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    padding: 12px 0 16px 0;
    transition: all 0.2s ease;
}

/* ── Perm Capsule Card (Matching User Reference Image) ── */
.perm-capsule-card {
    border-radius: 8px;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.perm-capsule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    min-height: 44px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
}

.perm-capsule-header:hover {
    border-color: var(--brand-emerald, #0E5B46);
    background: rgba(14, 91, 70, 0.02);
    box-shadow: 0 3px 8px rgba(14, 91, 70, 0.08);
    transform: translateY(-1px);
}

.perm-capsule-header:not(.collapsed) {
    border-color: var(--brand-emerald, #0E5B46);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: rgba(14, 91, 70, 0.04);
}

.perm-capsule-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.perm-capsule-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1E293B;
    text-align: center;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

.perm-capsule-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    font-size: 0.78rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.perm-capsule-header:hover .perm-capsule-arrow {
    color: var(--brand-emerald, #0E5B46);
}

.perm-capsule-header:not(.collapsed) .perm-capsule-arrow {
    transform: rotate(180deg);
    color: var(--brand-emerald, #0E5B46);
}

/* ── Capsule Collapsible Body ── */
.perm-capsule-body {
    background: #FAF8F5;
    border: 1px solid var(--brand-emerald, #0E5B46);
    border-top: 1px dashed rgba(14, 91, 70, 0.2);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 8px 16px rgba(14, 91, 70, 0.10);
}

.perm-op-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 4px;
    font-size: 0.84rem;
    color: #334155;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease;
    border-radius: 4px;
}

.perm-op-row:last-child {
    border-bottom: none;
}

.perm-op-row:hover {
    background: rgba(14, 91, 70, 0.04);
}

.perm-op-row label {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
}

/* ── Checkboxes styling ── */
.perm-checkbox-custom {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--brand-emerald, #0E5B46) !important;
    cursor: pointer;
    border-radius: 4px;
    margin: 0;
}

/* ── Badges ── */
.perm-count-badge {
    background: rgba(14, 91, 70, 0.10);
    color: var(--brand-emerald, #0E5B46);
    border: 1px solid rgba(14, 91, 70, 0.25);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.perm-count-badge-zero {
    background: #F1F5F9;
    color: #94A3B8;
    border: 1px solid #E2E8F0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

/* ── Dark Mode for Capsule & Grid ── */
[data-theme="dark"] .perm-capsule-header,
html.dark-style .perm-capsule-header {
    background: #142429 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .perm-capsule-title,
html.dark-style .perm-capsule-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .perm-capsule-arrow,
html.dark-style .perm-capsule-arrow {
    color: #94A3B8 !important;
}

[data-theme="dark"] .perm-capsule-header:hover,
html.dark-style .perm-capsule-header:hover {
    border-color: #34D399 !important;
    background: #1B2F36 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .perm-capsule-header:hover .perm-capsule-arrow,
html.dark-style .perm-capsule-header:hover .perm-capsule-arrow {
    color: #34D399 !important;
}

[data-theme="dark"] .perm-capsule-header:not(.collapsed),
html.dark-style .perm-capsule-header:not(.collapsed) {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: #34D399 !important;
}

[data-theme="dark"] .perm-capsule-header:not(.collapsed) .perm-capsule-arrow,
html.dark-style .perm-capsule-header:not(.collapsed) .perm-capsule-arrow {
    color: #34D399 !important;
}

[data-theme="dark"] .perm-capsule-body,
html.dark-style .perm-capsule-body {
    background: #0F1A1D !important;
    border-color: #34D399 !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .perm-op-row,
html.dark-style .perm-op-row {
    color: #CBD5E1 !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .perm-op-row:hover,
html.dark-style .perm-op-row:hover {
    background: rgba(16, 185, 129, 0.08) !important;
}

[data-theme="dark"] .perm-checkbox-custom,
html.dark-style .perm-checkbox-custom {
    accent-color: #10B981 !important;
    background-color: #16262B;
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .perm-count-badge,
html.dark-style .perm-count-badge {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34D399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .perm-count-badge-zero,
html.dark-style .perm-count-badge-zero {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94A3B8 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Master Action Footer ── */
[data-theme="dark"] .master-action-footer,
html.dark-style .master-action-footer {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   INVOICE TABLES & ACCOUNT STATEMENT - OBSIDIAN & EMERALD BRAND IDENTITY
   ========================================================================== */

/* ── Light Mode Base: Account Statement Table ── */
.account-stmt-container {
    border-radius: 10px;
    border: 1.5px solid #CBD5E1;
    overflow-x: auto;
    max-height: 420px;
    background: #FFFFFF;
    transition: all 0.2s ease;
}

#accountStatementReportTableId {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    background-color: #FFFFFF !important;
}

#accountStatementReportTableId thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0E5B46 !important;
    background-color: #0E5B46 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 0.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    white-space: nowrap !important;
    text-align: center !important;
}

#accountStatementReportTableId tbody td {
    color: #1E293B !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    padding: 0.55rem 0.5rem !important;
    border: 1px solid #E2E8F0 !important;
    background-color: #FFFFFF;
    transition: background-color 0.15s ease, color 0.15s ease;
    vertical-align: middle;
}

#accountStatementReportTableId tbody tr:nth-child(even) td {
    background-color: #F8FAFC !important;
}

/* Light Mode Hover - Emerald Identity Glow */
#accountStatementReportTableId tbody tr:hover td {
    background-color: #E8F5E9 !important;
    color: #0E5B46 !important;
}

/* Light Mode Totals Row */
#accountStatementReportTableId tbody tr.account-stmt-totals-row td {
    background-color: #F1F5F9 !important;
    color: #0E5B46 !important;
    font-weight: 800 !important;
    border-top: 2px solid #0E5B46 !important;
    border-bottom: 2px solid #0E5B46 !important;
}

#accountStatementReportTableId tbody tr.account-stmt-totals-row:hover td {
    background-color: #E2E8F0 !important;
    color: #08382B !important;
}

/* ── Dark Mode Executive Obsidian & Emerald Identity ── */
[data-theme="dark"] .account-stmt-container,
html.dark-style .account-stmt-container {
    background: #0B1315 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] #accountStatementReportTableId,
html.dark-style #accountStatementReportTableId {
    background-color: #0B1315 !important;
}

[data-theme="dark"] #accountStatementReportTableId thead th,
html.dark-style #accountStatementReportTableId thead th {
    background: #0E181B !important;
    background-color: #0E181B !important;
    color: #34D399 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 2px solid rgba(52, 211, 153, 0.4) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] #accountStatementReportTableId tbody td,
html.dark-style #accountStatementReportTableId tbody td {
    color: #E2E8F0 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background-color: #121F23 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-theme="dark"] #accountStatementReportTableId tbody tr:nth-child(even) td,
html.dark-style #accountStatementReportTableId tbody tr:nth-child(even) td {
    background-color: #16262B !important;
}

/* Dark Mode Hover - High Contrast Emerald Accent */
[data-theme="dark"] #accountStatementReportTableId tbody tr:hover td,
html.dark-style #accountStatementReportTableId tbody tr:hover td {
    background-color: #1E383F !important;
    color: #FFFFFF !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

/* Dark Mode Totals Row */
[data-theme="dark"] #accountStatementReportTableId tbody tr.account-stmt-totals-row td,
html.dark-style #accountStatementReportTableId tbody tr.account-stmt-totals-row td {
    background-color: #0A1214 !important;
    color: #D4AF7C !important;
    font-weight: 800 !important;
    border-top: 2px solid #D4AF7C !important;
    border-bottom: 2px solid #D4AF7C !important;
}

[data-theme="dark"] #accountStatementReportTableId tbody tr.account-stmt-totals-row:hover td,
html.dark-style #accountStatementReportTableId tbody tr.account-stmt-totals-row:hover td {
    background-color: #142429 !important;
    color: #FCD34D !important;
}

/* ── Invoice Main Data-Grid Table (items-table) Hover & Dark Contrast ── */
.data-grid-container table tbody tr:hover td {
    background-color: #E8F5E9 !important;
    color: #0E5B46 !important;
}

[data-theme="dark"] .data-grid-container table tbody tr td,
html.dark-style .data-grid-container table tbody tr td {
    background-color: #121F23 !important;
    color: #E2E8F0 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .data-grid-container table tbody tr:nth-child(even) td,
html.dark-style .data-grid-container table tbody tr:nth-child(even) td {
    background-color: #16262B !important;
}

[data-theme="dark"] .data-grid-container table tbody tr:hover td,
html.dark-style .data-grid-container table tbody tr:hover td {
    background-color: #1E383F !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-name,
html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-name {
    color: #34D399 !important;
}

/* ── Invoice Modal Tables Hover & Polish ── */
#search_item_result_table thead th,
#bill_result_table thead th {
    background: #0E5B46 !important;
    background-color: #0E5B46 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    text-align: center !important;
}

#search_item_result_table tbody tr:hover td,
#bill_result_table tbody tr:hover td {
    background-color: #E8F5E9 !important;
    color: #0E5B46 !important;
}

[data-theme="dark"] #search_item_result_table thead th,
[data-theme="dark"] #bill_result_table thead th,
html.dark-style #search_item_result_table thead th,
html.dark-style #bill_result_table thead th {
    background: #0E181B !important;
    background-color: #0E181B !important;
    color: #34D399 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom: 2px solid rgba(52, 211, 153, 0.4) !important;
}

[data-theme="dark"] #search_item_result_table tbody td,
[data-theme="dark"] #bill_result_table tbody td,
html.dark-style #search_item_result_table tbody td,
html.dark-style #bill_result_table tbody td {
    background-color: #121F23 !important;
    color: #E2E8F0 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] #search_item_result_table tbody tr:nth-child(even) td,
[data-theme="dark"] #bill_result_table tbody tr:nth-child(even) td,
html.dark-style #search_item_result_table tbody tr:nth-child(even) td,
html.dark-style #bill_result_table tbody tr:nth-child(even) td {
    background-color: #16262B !important;
}

[data-theme="dark"] #search_item_result_table tbody tr:hover td,
[data-theme="dark"] #bill_result_table tbody tr:hover td,
html.dark-style #search_item_result_table tbody tr:hover td,
html.dark-style #bill_result_table tbody tr:hover td {
    background-color: #1E383F !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   EXECUTIVE CAPITAL & HOME DASHBOARD - EXECUTIVE DARK THEME
   ========================================================================== */

/* ── 1. Hero Shortcut Buttons Contrast ── */
.hero-shortcut-btn.gold,
.hero-shortcut-btn.gold span,
.hero-shortcut-btn.gold i,
[data-theme="dark"] .hero-shortcut-btn.gold,
[data-theme="dark"] .hero-shortcut-btn.gold span,
[data-theme="dark"] .hero-shortcut-btn.gold i,
html.dark-style .hero-shortcut-btn.gold,
html.dark-style .hero-shortcut-btn.gold span,
html.dark-style .hero-shortcut-btn.gold i {
    background-color: #D4AF7C !important;
    border-color: #D4AF7C !important;
    color: #0B1315 !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .hero-shortcut-btn.gold:hover,
html.dark-style .hero-shortcut-btn.gold:hover {
    background-color: #E2BF8F !important;
    color: #0B1315 !important;
}

/* ── 2. Capital Section Container & Header ── */
[data-theme="dark"] .capital-dashboard-section,
html.dark-style .capital-dashboard-section {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .capital-header-bar,
html.dark-style .capital-header-bar {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .capital-header-icon,
html.dark-style .capital-header-icon {
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.25) 0%, rgba(212, 175, 124, 0.2) 100%) !important;
    color: #34D399 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .capital-btn-report,
html.dark-style .capital-btn-report {
    background: #121F23 !important;
    color: #34D399 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}

[data-theme="dark"] .capital-btn-report:hover,
html.dark-style .capital-btn-report:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}

/* ── 3. Dedicated Date Filter Toolbar in Dark Mode ── */
[data-theme="dark"] .capital-filter-toolbar,
html.dark-style .capital-filter-toolbar {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .capital-filter-tag,
html.dark-style .capital-filter-tag {
    color: #34D399 !important;
}

[data-theme="dark"] .capital-date-pill,
html.dark-style .capital-date-pill {
    background: #0E181B !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .capital-date-pill:focus-within,
html.dark-style .capital-date-pill:focus-within {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .capital-date-pill-label,
html.dark-style .capital-date-pill-label {
    color: #94A3B8 !important;
}

[data-theme="dark"] .capital-date-pill-input,
html.dark-style .capital-date-pill-input {
    color: #F1F5F9 !important;
    background: transparent !important;
    color-scheme: dark;
}

[data-theme="dark"] .capital-btn-filter,
html.dark-style .capital-btn-filter {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .capital-btn-filter:hover,
html.dark-style .capital-btn-filter:hover {
    background: #059669 !important;
}

/* ── 4. Metric Subcards in Dark Mode (Debit, Credit, Sales, Profit) ── */
[data-theme="dark"] .capital-metric-subcard,
html.dark-style .capital-metric-subcard {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .capital-metric-subcard:hover,
html.dark-style .capital-metric-subcard:hover {
    background: #16262B !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .capital-metric-subcard .border-top,
html.dark-style .capital-metric-subcard .border-top {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .capital-metric-subcard.emerald,
html.dark-style .capital-metric-subcard.emerald {
    border-inline-start: 4px solid #10B981 !important;
}

[data-theme="dark"] .capital-metric-subcard.rose,
html.dark-style .capital-metric-subcard.rose {
    border-inline-start: 4px solid #F43F5E !important;
}

[data-theme="dark"] .capital-metric-subcard.gold,
html.dark-style .capital-metric-subcard.gold {
    border-inline-start: 4px solid #D4AF7C !important;
}

/* ── 5. Detailed Ledger Boxes (Debit & Credit Panels) in Dark Mode ── */
[data-theme="dark"] .capital-ledger-box,
html.dark-style .capital-ledger-box {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .capital-ledger-header,
html.dark-style .capital-ledger-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .capital-ledger-item,
html.dark-style .capital-ledger-item {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .capital-ledger-item:hover,
html.dark-style .capital-ledger-item:hover {
    background: #16262B !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

/* ── 6. Liquidity Ratio Health Box in Dark Mode ── */
.capital-health-ratio-box {
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.05) 0%, rgba(212, 175, 124, 0.1) 100%);
    border: 1px dashed rgba(14, 91, 70, 0.25);
}

[data-theme="dark"] .capital-health-ratio-box,
html.dark-style .capital-health-ratio-box {
    background: #0E181B !important;
    border: 1px dashed rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .capital-ledger-box .progress,
html.dark-style .capital-ledger-box .progress {
    background-color: #0A1214 !important;
}

/* ── 7. Operational Activity Cards & Mini Tables in Dark Mode ── */
[data-theme="dark"] .capital-op-card,
html.dark-style .capital-op-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .capital-op-card-header,
html.dark-style .capital-op-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .capital-table-mini th,
html.dark-style .capital-table-mini th {
    color: #94A3B8 !important;
}

[data-theme="dark"] .capital-table-mini td,
html.dark-style .capital-table-mini td {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .capital-table-mini tr.border-top,
html.dark-style .capital-table-mini tr.border-top {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── 8. Badges and Indicators in Dark Mode ── */
[data-theme="dark"] .capital-badge-emerald,
html.dark-style .capital-badge-emerald {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .capital-badge-rose,
html.dark-style .capital-badge-rose {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #FB7185 !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
}

[data-theme="dark"] .capital-badge-amber,
html.dark-style .capital-badge-amber {
    background: rgba(212, 175, 124, 0.15) !important;
    color: #FCD34D !important;
    border: 1px solid rgba(212, 175, 124, 0.3) !important;
}

/* ── 9. Text Contrast in Dark Mode ── */
[data-theme="dark"] .capital-dashboard-section .text-dark,
html.dark-style .capital-dashboard-section .text-dark {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .capital-dashboard-section .text-muted,
html.dark-style .capital-dashboard-section .text-muted {
    color: #94A3B8 !important;
}








/* ==========================================================================
   Z4U Executive Bill Upsert Styles (Centralized from Bill Upsert Views)
   ========================================================================== */
    /* ── Z4U Brand Tokens for Bill Upsert ── */
    :root {
        --bill-brand-primary: #0E5B46;
        --bill-brand-primary-hover: #0A4333;
        --bill-brand-primary-subtle: rgba(14, 91, 70, 0.08);
        --bill-brand-gold: #D4AF7C;
        --bill-brand-gold-subtle: rgba(212, 175, 124, 0.15);
        --bill-card-bg: #FFFFFF;
        --bill-border-color: #E2E8F0;
    }

    .bill-page-wrapper {
        background-color: var(--brand-canvas, #FAF8F5);
        min-height: calc(100vh - 76px);
        padding-bottom: 1.5rem;
    }

    /* Executive Section Cards */
    .bill-section-card {
        background: #FFFFFF;
        border: 1px solid var(--bill-border-color);
        border-radius: 14px;
        box-shadow: 0 3px 12px -2px rgba(14, 91, 70, 0.04);
        margin-bottom: 1.25rem;
        transition: all 0.2s ease;
    }

    .bill-section-card:hover {
        box-shadow: 0 6px 18px -3px rgba(14, 91, 70, 0.07);
    }

    .bill-section-header {
        padding: 0.85rem 1.25rem;
        border-bottom: 1px solid var(--bill-border-color);
        background: #FAFCFB;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .bill-section-title {
        font-size: 0.92rem;
        font-weight: 700;
        color: #1E293B;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
    }

    .bill-section-title i {
        color: var(--bill-brand-primary);
        font-size: 1.15rem;
    }

    .bill-section-body {
        padding: 1.25rem;
    }

    /* Form Labels & Controls */
    .bill-form-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 0.35rem;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        justify-content: flex-start;
        text-align: start;
    }

    .bill-form-label .fa-rotate-right,
    .bill-form-label .fa-rotate-left {
        margin-inline-start: auto;
    }

    .bill-section-card .form-control,
    .bill-section-card .form-select {
        border-radius: 8px;
        border: 1.5px solid #CBD5E1;
        font-size: 0.84rem;
        padding: 0.45rem 0.75rem;
        height: 40px;
        transition: all 0.15s ease-in-out;
        color: #1E293B;
    }

    .bill-section-card .form-control:focus,
    .bill-section-card .form-select:focus {
        border-color: var(--bill-brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15) !important;
        outline: none;
    }

    .bill-form-control-readonly {
        background-color: #F8FAFC !important;
        font-weight: 700;
        color: #0E5B46 !important;
        border-color: #E2E8F0 !important;
    }

    /* Select2 Theme Harmonization */
    .select2-container--default .select2-selection--single {
        height: 40px !important;
        border: 1.5px solid #CBD5E1 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
    }

    .select2-container--default .select2-selection--single:focus,
    .select2-container--default.select2-container--open .select2-selection--single {
        border-color: #0E5B46 !important;
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15) !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px !important;
        font-size: 0.84rem !important;
        color: #1E293B !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 38px !important;
    }

    /* Unified Items Workspace Card */
    .items-workspace-card {
        border: 1px solid #CBD5E1;
        border-radius: 14px;
        box-shadow: 0 4px 18px -2px rgba(14, 91, 70, 0.06);
        overflow: hidden;
        background: #FFFFFF;
        position: relative;
    }

    .items-workspace-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 50%, #0E5B46 100%);
        z-index: 2;
    }

    .items-card-header {
        padding: 0.95rem 1.35rem;
        background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
        border-bottom: 1.5px solid #E2E8F0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .items-header-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(14, 91, 70, 0.12) 0%, rgba(14, 91, 70, 0.05) 100%);
        border: 1px solid rgba(14, 91, 70, 0.18);
        color: #0E5B46;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
        transition: all 0.25s ease;
    }

    .items-workspace-card:hover .items-header-icon {
        background: #0E5B46;
        color: #FFFFFF;
        transform: scale(1.05);
    }

    /* Executive Toolbar Group */
    .items-toolbar-group {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: #F1F5F9;
        padding: 0.3rem 0.4rem;
        border-radius: 12px;
        border: 1px solid #E2E8F0;
    }

    /* Executive ERP Tool Buttons (Clean squared-radius buttons) */
    .btn-erp-tool {
        height: 36px;
        padding: 0.4rem 0.95rem;
        font-size: 0.82rem;
        font-weight: 700;
        border-radius: 8px;
        border: 1px solid transparent;
        background: #FFFFFF;
        color: #1E293B;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        white-space: nowrap !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        cursor: pointer;
    }

    .btn-erp-tool i {
        font-size: 1.15rem;
        color: #0E5B46;
        transition: all 0.2s ease;
    }

    .btn-erp-tool:hover {
        border-color: #0E5B46;
        background: #0E5B46;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(14, 91, 70, 0.25);
    }

    .btn-erp-tool:hover i {
        color: #FFFFFF !important;
        transform: scale(1.1);
    }

    .btn-erp-tool:active {
        transform: translateY(0);
    }

    /* Integrated Smart Search Command Bar */
    .items-search-command-bar {
        padding: 0.85rem 1.25rem;
        background: #F8FAFC;
        border-bottom: 1px solid #E2E8F0;
    }

    .smart-search-wrapper {
        display: flex;
        align-items: center;
        background: #FFFFFF;
        border: 1.5px solid #CBD5E1;
        border-radius: 9px;
        overflow: hidden;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }

    .smart-search-wrapper:focus-within {
        border-color: #0E5B46;
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15);
    }

    .search-lead-icon {
        padding: 0 0.85rem;
        color: #0E5B46;
        font-size: 1.35rem;
        display: flex;
        align-items: center;
    }

    .smart-search-wrapper .smart-search-input {
        border: none !important;
        box-shadow: none !important;
        padding: 0.55rem 0.6rem;
        font-size: 0.88rem;
        font-weight: 500;
        height: 42px;
        flex: 1;
        outline: none;
    }

    .smart-scanner-btn {
        background: transparent;
        border: none;
        border-inline-start: 1px solid #E2E8F0;
        padding: 0 0.85rem;
        color: #64748B;
        height: 42px;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .smart-scanner-btn:hover {
        background: #F1F5F9;
        color: #0E5B46;
    }

    .smart-search-btn {
        background: #0E5B46;
        color: #FFFFFF;
        border: none;
        padding: 0 1.25rem;
        height: 42px;
        display: flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .smart-search-btn:hover {
        background: #0A4333;
        color: #FFFFFF;
    }

    /* Grid Table Container & Subtle Scrollbar */
    .data-grid-container {
        position: relative;
        max-width: 100%;
        overflow-x: auto;
        background: #FFFFFF;
        min-height: 130px;
        max-height: 480px;
        overflow-y: auto;
    }

    .data-grid-container::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background: #F8FAFC;
    }

    .data-grid-container::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 4px;
    }

    .data-grid-container::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

    .data-grid-container table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.82rem;
    }

    .data-grid-container thead th {
        position: sticky;
        top: 0;
        z-index: 6;
        background: #F4F7F6 !important;
        background: linear-gradient(180deg, #F8FAFC 0%, #EDF4F1 100%) !important;
        color: #0E5B46 !important;
        font-weight: 700;
        padding: 0.75rem 0.5rem;
        text-align: center;
        border-bottom: 2px solid #0E5B46 !important;
        border-inline: 1px solid #E2E8F0;
        white-space: nowrap;
        font-size: 0.82rem;
        letter-spacing: -0.1px;
    }

    /* Sticky Columns on Horizontal Scroll (Pins item details in RTL view) */
    .col-sticky-num {
        position: sticky !important;
        right: 0 !important;
        min-width: 44px !important;
        width: 44px !important;
        max-width: 44px !important;
        z-index: 4;
    }

    .col-sticky-code {
        position: sticky !important;
        right: 44px !important;
        min-width: 80px !important;
        width: 80px !important;
        max-width: 80px !important;
        z-index: 4;
    }

    .col-sticky-name {
        position: sticky !important;
        right: 124px !important;
        min-width: 190px !important;
        width: 190px !important;
        max-width: 190px !important;
        z-index: 4;
        border-inline-end: 2px solid #CBD5E1 !important;
        box-shadow: -5px 0 8px -2px rgba(0, 0, 0, 0.08);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .col-sticky-action {
        position: sticky !important;
        left: 0 !important;
        min-width: 82px !important;
        width: 82px !important;
        max-width: 82px !important;
        z-index: 4;
        border-inline-start: 2px solid #CBD5E1 !important;
        box-shadow: 5px 0 8px -2px rgba(0, 0, 0, 0.08);
        text-align: center !important;
    }

    /* Keep thead sticky cells above tbody sticky cells with calm tone */
    .data-grid-container table thead th.col-sticky-num,
    .data-grid-container table thead th.col-sticky-code,
    .data-grid-container table thead th.col-sticky-name,
    .data-grid-container table thead th.col-sticky-action {
        z-index: 9 !important;
        background: #EAF1ED !important;
        color: #0E5B46 !important;
    }
    .data-grid-container table thead th.col-sticky-name {
        border-inline-end: 2px solid #CBD5E1 !important;
        box-shadow: -5px 0 8px -2px rgba(0, 0, 0, 0.08);
    }
    .data-grid-container table thead th.col-sticky-action {
        border-inline-start: 2px solid #CBD5E1 !important;
        box-shadow: 5px 0 8px -2px rgba(0, 0, 0, 0.08);
    }

    /* Executive Row Action Delete Button */
    .btn-delete-row,
    .remove-item {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        background: rgba(239, 68, 68, 0.08) !important;
        color: #DC2626 !important;
        border: 1px solid rgba(239, 68, 68, 0.22) !important;
        font-size: 0.88rem !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
    .btn-delete-row:hover,
    .remove-item:hover {
        background: #DC2626 !important;
        color: #FFFFFF !important;
        border-color: #DC2626 !important;
        transform: translateY(-1px) scale(1.08) !important;
        box-shadow: 0 4px 10px rgba(220, 38, 38, 0.28) !important;
    }

    /* Tbody sticky background colors to prevent transparent bleeding */
    .data-grid-container table tbody tr td.col-sticky-num,
    .data-grid-container table tbody tr td.col-sticky-code,
    .data-grid-container table tbody tr td.col-sticky-name,
    .data-grid-container table tbody tr td.col-sticky-action {
        background-color: #FFFFFF;
    }
    .data-grid-container table tbody tr:nth-child(even) td.col-sticky-num,
    .data-grid-container table tbody tr:nth-child(even) td.col-sticky-code,
    .data-grid-container table tbody tr:nth-child(even) td.col-sticky-name,
    .data-grid-container table tbody tr:nth-child(even) td.col-sticky-action {
        background-color: #FBFDFD;
    }
    html:not([data-theme="dark"]):not(.dark-style) .data-grid-container table tbody tr:hover td.col-sticky-num,
    html:not([data-theme="dark"]):not(.dark-style) .data-grid-container table tbody tr:hover td.col-sticky-code,
    html:not([data-theme="dark"]):not(.dark-style) .data-grid-container table tbody tr:hover td.col-sticky-name,
    html:not([data-theme="dark"]):not(.dark-style) .data-grid-container table tbody tr:hover td.col-sticky-action {
        background-color: #F0F7F4 !important;
    }
    html[data-theme="dark"] .data-grid-container table tbody tr td.col-sticky-num,
    html[data-theme="dark"] .data-grid-container table tbody tr td.col-sticky-code,
    html[data-theme="dark"] .data-grid-container table tbody tr td.col-sticky-name,
    html[data-theme="dark"] .data-grid-container table tbody tr td.col-sticky-action,
    html.dark-style .data-grid-container table tbody tr td.col-sticky-num,
    html.dark-style .data-grid-container table tbody tr td.col-sticky-code,
    html.dark-style .data-grid-container table tbody tr td.col-sticky-name,
    html.dark-style .data-grid-container table tbody tr td.col-sticky-action {
        background-color: #121F23 !important;
        color: #E2E8F0 !important;
    }
    html[data-theme="dark"] .data-grid-container table tbody tr:nth-child(even) td.col-sticky-num,
    html[data-theme="dark"] .data-grid-container table tbody tr:nth-child(even) td.col-sticky-code,
    html[data-theme="dark"] .data-grid-container table tbody tr:nth-child(even) td.col-sticky-name,
    html[data-theme="dark"] .data-grid-container table tbody tr:nth-child(even) td.col-sticky-action,
    html.dark-style .data-grid-container table tbody tr:nth-child(even) td.col-sticky-num,
    html.dark-style .data-grid-container table tbody tr:nth-child(even) td.col-sticky-code,
    html.dark-style .data-grid-container table tbody tr:nth-child(even) td.col-sticky-name,
    html.dark-style .data-grid-container table tbody tr:nth-child(even) td.col-sticky-action {
        background-color: #101B1E !important;
    }
    html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-num,
    html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-code,
    html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-name,
    html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-action,
    html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-num,
    html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-code,
    html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-name,
    html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-action {
        background-color: #1A2D33 !important;
        color: #FFFFFF !important;
    }
    html[data-theme="dark"] .data-grid-container table tbody tr:hover td.col-sticky-name,
    html.dark-style .data-grid-container table tbody tr:hover td.col-sticky-name {
        color: #34D399 !important;
    }

    .data-grid-container tbody tr {
        transition: background-color 0.15s ease;
    }

    .data-grid-container tbody tr:nth-child(even) {
        background-color: #FBFDFD;
    }

    .data-grid-container tbody tr:hover {
        background-color: rgba(14, 91, 70, 0.04) !important;
    }

    .data-grid-container td {
        padding: 0.35rem 0.3rem;
        vertical-align: middle;
        text-align: center;
        border-bottom: 1px solid #EDF2F7;
        color: #1E293B;
    }

    .data-grid-container .form-control,
    .data-grid-container .form-select {
        border-radius: 6px;
        border: 1px solid #CBD5E1;
        font-size: 0.82rem;
        padding: 0.25rem 0.4rem !important;
        height: 32px !important;
        background-color: #FFFFFF;
        color: #1E293B;
        font-weight: 600;
        transition: all 0.15s ease;
    }

    .data-grid-container .form-control:focus,
    .data-grid-container .form-select:focus {
        border-color: var(--bill-brand-primary) !important;
        box-shadow: 0 0 0 2px rgba(14, 91, 70, 0.15) !important;
        outline: none;
    }

    /* Compact Unified Input Groups for Tax and Discount */
    .compact-cell-group {
        display: inline-flex;
        align-items: center;
        border: 1.5px solid #CBD5E1;
        border-radius: 7px;
        overflow: hidden;
        background: #FFFFFF;
        transition: all 0.15s ease;
        max-width: 122px;
        margin: 0 auto;
    }
    .compact-cell-group:focus-within {
        border-color: #0E5B46;
        box-shadow: 0 0 0 2px rgba(14, 91, 70, 0.15);
    }
    .compact-cell-group .compact-num-input {
        border: none !important;
        border-radius: 0 !important;
        height: 30px !important;
        width: 58px !important;
        font-weight: 700;
        font-size: 0.82rem;
        padding: 0.2rem 0.3rem !important;
        background: transparent;
        box-shadow: none !important;
    }
    .compact-cell-group .compact-type-select {
        border: none !important;
        border-inline-start: 1px solid #CBD5E1 !important;
        border-radius: 0 !important;
        height: 30px !important;
        width: 56px !important;
        font-weight: 700;
        font-size: 0.78rem;
        background-color: #F8FAFC !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    /* ==========================================================================
       Unified Select Class: .select-compact (كلاس موحد لضبط سهم القوائم المنسدلة في الجداول)
       Fixes select chevron arrow overlapping text across tables and compact groups
       ========================================================================== */
    .select-compact,
    .table-select,
    .compact-cell-group .compact-type-select,
    .data-grid-container table select.form-select,
    .data-grid-container select.form-select,
    #items-table select.form-select {
        background-size: 10px 7px !important;
        background-position: left 6px center !important;
        padding-left: 18px !important;
        padding-right: 6px !important;
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
        text-align: center !important;
        text-align-last: center !important;
        line-height: 1.2 !important;
    }

    /* LTR Support for compact selects */
    [dir="ltr"] .select-compact,
    [dir="ltr"] .table-select,
    [dir="ltr"] .compact-cell-group .compact-type-select,
    [dir="ltr"] .data-grid-container table select.form-select,
    [dir="ltr"] .data-grid-container select.form-select,
    [dir="ltr"] #items-table select.form-select,
    html[dir="ltr"] .select-compact,
    html[dir="ltr"] .table-select,
    html[dir="ltr"] .compact-cell-group .compact-type-select,
    html[dir="ltr"] .data-grid-container table select.form-select,
    html[dir="ltr"] .data-grid-container select.form-select,
    html[dir="ltr"] #items-table select.form-select,
    body[dir="ltr"] .select-compact,
    body[dir="ltr"] .table-select,
    body[dir="ltr"] .compact-cell-group .compact-type-select,
    body[dir="ltr"] .data-grid-container table select.form-select,
    body[dir="ltr"] .data-grid-container select.form-select,
    body[dir="ltr"] #items-table select.form-select {
        background-position: right 6px center !important;
        padding-left: 6px !important;
        padding-right: 18px !important;
    }

    /* Table Footer Bar & Pagination Controls */
    .items-table-footer-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.65rem 1rem;
        background: #F8FAFC;
        border-top: 1.5px solid #E2E8F0;
        border-radius: 0 0 12px 12px;
        gap: 0.75rem;
    }

    .btn-grid-page {
        min-width: 32px;
        height: 32px;
        padding: 0 0.45rem;
        font-size: 0.82rem;
        font-weight: 700;
        border-radius: 7px;
        background: #FFFFFF;
        color: #334155;
        border: 1.5px solid #CBD5E1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.18s ease;
        cursor: pointer;
    }

    .btn-grid-page:hover:not(.disabled):not(.active) {
        background: #F1F5F9;
        border-color: #0E5B46;
        color: #0E5B46;
    }

    .btn-grid-page.active {
        background: #0E5B46 !important;
        border-color: #0E5B46 !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 6px rgba(14, 91, 70, 0.25);
    }

    .btn-grid-page.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        background: #F8FAFC;
        border-color: #E2E8F0;
    }

    .table-row-highlight {
        animation: tableRowGlow 1.5s ease-out;
    }
    @keyframes tableRowGlow {
        0% { background-color: rgba(14, 91, 70, 0.25) !important; }
        100% { background-color: transparent; }
    }

    .remove-item {
        color: #EF4444;
        transition: all 0.18s ease;
        padding: 0.35rem;
        border-radius: 6px;
    }

    .remove-item:hover {
        color: #B91C1C;
        background: rgba(239, 68, 68, 0.1);
        transform: scale(1.15);
    }

    .selected {
        background-color: rgba(14, 91, 70, 0.12) !important;
        color: #0E5B46 !important;
        font-weight: 700;
    }

    /* Number inputs spin button removal */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance: textfield;
    }

    /* Modern Clean High-Contrast Tabs */
    .bill-nav-tabs {
        border-bottom: 2px solid #E2E8F0;
        gap: 0.35rem;
        padding: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .bill-nav-tabs .nav-link {
        border: none;
        border-bottom: 3px solid transparent;
        color: #334155;
        font-weight: 700;
        font-size: 0.84rem;
        padding: 0.65rem 1rem;
        border-radius: 8px 8px 0 0;
        white-space: nowrap;
        background: transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        transition: all 0.2s ease;
    }

    .bill-nav-tabs .nav-link i {
        color: #64748B;
        font-size: 1.05rem;
        transition: color 0.2s ease;
    }

    .bill-nav-tabs .nav-link:hover {
        color: #0E5B46;
        background: rgba(14, 91, 70, 0.05);
    }

    .bill-nav-tabs .nav-link:hover i {
        color: #0E5B46;
    }

    .bill-nav-tabs .nav-link.active {
        color: #0E5B46 !important;
        border-bottom: 3px solid #0E5B46 !important;
        background: rgba(14, 91, 70, 0.07) !important;
        font-weight: 800;
    }

    .bill-nav-tabs .nav-link.active i {
        color: #0E5B46 !important;
    }

    /* Fluid Tab Content Transitions */
    .bill-section-card .tab-content > .tab-pane {
        transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bill-section-card .tab-content > .tab-pane.fade {
        opacity: 0;
        transform: translateY(4px);
    }
    .bill-section-card .tab-content > .tab-pane.fade.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* Executive Z4U KPI Stat Cards (Comfortable, generous spacing, harmonious, NO text truncation) */
    .kpi-stat-card {
        background: #FAFBFD;
        border: 1.5px solid #E2E8F0;
        border-radius: 12px;
        padding: 0.75rem 0.95rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        min-height: 84px;
    }

    .kpi-stat-card:hover {
        background: #FFFFFF;
        border-color: #0E5B46;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(14, 91, 70, 0.12);
    }

    .kpi-stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(14, 91, 70, 0.08);
        color: #0E5B46;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
        transition: all 0.22s ease;
    }

    .kpi-stat-card:hover .kpi-stat-icon {
        background: #0E5B46;
        color: #FFFFFF;
        transform: scale(1.05);
    }

    .kpi-stat-content {
        flex: 1;
        min-width: 0;
    }

    .kpi-stat-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #64748B;
        margin-bottom: 0.25rem;
        line-height: 1.35;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal;
    }

    .kpi-stat-card .form-control {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        height: auto !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: #0E5B46 !important;
        box-shadow: none !important;
        text-align: start !important;
        line-height: 1.2;
    }

    /* ==========================================================================
       Z4U Luxury Executive Flatpickr Calendar Theme (Emerald & Warm Gold Identity)
       ========================================================================== */
    .flatpickr-calendar {
        background: #FFFFFF !important;
        border: 1.5px solid #E2E8F0 !important;
        border-radius: 14px !important;
        box-shadow: 0 14px 38px rgba(14, 91, 70, 0.16), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        font-family: 'Tajawal', 'Cairo', system-ui, sans-serif !important;
        padding: 0.5rem 0.6rem !important;
        width: 310px !important;
        overflow: hidden;
        z-index: 99999 !important;
    }

    .flatpickr-calendar::before,
    .flatpickr-calendar::after {
        display: none !important;
    }

    .flatpickr-months {
        padding: 0.35rem 0.25rem 0.65rem !important;
        align-items: center !important;
        position: relative;
        border-bottom: 1px solid #EDF2F7;
        margin-bottom: 0.4rem;
    }

    .flatpickr-months .flatpickr-month {
        height: 38px !important;
        color: #0E5B46 !important;
        fill: #0E5B46 !important;
    }

    .flatpickr-current-month {
        padding: 0 !important;
        font-size: 0.98rem !important;
        font-weight: 800 !important;
        color: #0E5B46 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem;
    }

    .flatpickr-current-month .flatpickr-monthDropdown-months {
        color: #0E5B46 !important;
        font-weight: 800 !important;
        font-size: 0.95rem !important;
        border: 1px solid transparent !important;
        border-radius: 6px !important;
        padding: 0.2rem 0.4rem !important;
        background: transparent !important;
        cursor: pointer;
        transition: all 0.18s ease;
    }

    .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
        background: rgba(14, 91, 70, 0.08) !important;
    }

    .flatpickr-current-month input.cur-year {
        color: #0E5B46 !important;
        font-weight: 800 !important;
        font-size: 0.95rem !important;
        padding: 0.2rem 0.3rem !important;
    }

    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        color: #0E5B46 !important;
        fill: #0E5B46 !important;
        background: rgba(14, 91, 70, 0.06) !important;
        border: 1px solid rgba(14, 91, 70, 0.12) !important;
        transition: all 0.2s ease !important;
        top: 0.5rem !important;
    }

    .flatpickr-months .flatpickr-prev-month:hover,
    .flatpickr-months .flatpickr-next-month:hover {
        background: #0E5B46 !important;
        color: #FFFFFF !important;
        fill: #FFFFFF !important;
        border-color: #0E5B46 !important;
        transform: scale(1.06);
    }

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        width: 14px !important;
        height: 14px !important;
        fill: inherit !important;
    }

    .flatpickr-weekdays {
        height: 32px !important;
        border-bottom: 1px dashed #E2E8F0;
        margin-bottom: 0.35rem;
    }

    span.flatpickr-weekday {
        color: #0E5B46 !important;
        font-weight: 800 !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.2px;
    }

    .flatpickr-days {
        width: 100% !important;
    }

    .dayContainer {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        justify-content: space-around;
    }

    .flatpickr-day {
        color: #1E293B !important;
        font-size: 0.86rem !important;
        font-weight: 600 !important;
        border-radius: 9px !important;
        height: 36px !important;
        line-height: 36px !important;
        max-width: 36px !important;
        border: 1.5px solid transparent !important;
        margin: 2px !important;
        transition: all 0.16s ease !important;
    }

    .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange) {
        background: rgba(14, 91, 70, 0.08) !important;
        border-color: rgba(14, 91, 70, 0.25) !important;
        color: #0E5B46 !important;
        font-weight: 800 !important;
        transform: translateY(-1px);
    }

    .flatpickr-day.today:not(.selected) {
        border-color: #0E5B46 !important;
        background: rgba(14, 91, 70, 0.07) !important;
        color: #0E5B46 !important;
        font-weight: 800 !important;
    }

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.selected.inRange,
    .flatpickr-day.startRange.inRange,
    .flatpickr-day.endRange.inRange,
    .flatpickr-day.selected:focus,
    .flatpickr-day.startRange:focus,
    .flatpickr-day.endRange:focus,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange:hover,
    .flatpickr-day.endRange:hover {
        background: linear-gradient(135deg, #0E5B46 0%, #0A4333 100%) !important;
        border-color: #0E5B46 !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        box-shadow: 0 4px 12px rgba(14, 91, 70, 0.35) !important;
    }

    .flatpickr-day.inRange {
        background: rgba(14, 91, 70, 0.1) !important;
        border-color: transparent !important;
        color: #0E5B46 !important;
    }

    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay {
        color: #94A3B8 !important;
        opacity: 0.45;
    }

    .flatpickr-time {
        border-top: 1px solid #EDF2F7 !important;
        background: #FAFBFD !important;
        border-radius: 0 0 12px 12px;
        padding: 0.35rem 0 !important;
    }

    .flatpickr-time input {
        color: #0E5B46 !important;
        font-weight: 800 !important;
    }

    .flatpickr-time .numInputWrapper span.arrowUp:after {
        border-bottom-color: #0E5B46 !important;
    }

    .flatpickr-time .numInputWrapper span.arrowDown:after {
        border-top-color: #0E5B46 !important;
    }

    /* Executive Tab Action Buttons (No text wrapping, luxury emerald styling) */
    .tab-action-btn {
        height: 40px !important;
        padding: 0.45rem 1.25rem !important;
        font-size: 0.86rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        border-radius: 9px !important;
        background: linear-gradient(135deg, #0E5B46 0%, #0A4333 100%) !important;
        color: #FFFFFF !important;
        border: 1.5px solid #0E5B46 !important;
        box-shadow: 0 2px 6px rgba(14, 91, 70, 0.2) !important;
        transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
    }

    .tab-action-btn:hover {
        background: linear-gradient(135deg, #137359 0%, #0E5B46 100%) !important;
        border-color: #137359 !important;
        color: #FFFFFF !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(14, 91, 70, 0.3) !important;
    }

    .tab-action-btn:active {
        transform: translateY(0) !important;
    }

    .tab-action-btn span {
        white-space: nowrap !important;
    }

    /* Totals Executive Summary Card */
    .bill-totals-card {
        background: linear-gradient(145deg, #FFFFFF 0%, #FAFCFB 100%);
        border: 1.5px solid rgba(14, 91, 70, 0.2);
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(14, 91, 70, 0.06);
        padding: 1.25rem;
    }

    .bill-total-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.55rem 0;
        border-bottom: 1px dashed #E2E8F0;
        font-size: 0.86rem;
    }

    .bill-total-row:last-of-type {
        border-bottom: none;
    }

    .bill-total-label {
        font-weight: 600;
        color: #475569;
        margin: 0;
        display: block;
    }

    .bill-total-value {
        font-weight: 700;
        color: #1E293B;
        margin: 0;
        display: flex;
        align-items: center;
    }

    .bill-grand-total-row {
        background: rgba(14, 91, 70, 0.06);
        border-radius: 10px;
        padding: 0.85rem 1rem !important;
        margin: 0.5rem 0;
        border: 1px solid rgba(14, 91, 70, 0.15) !important;
    }

    .bill-grand-total-row .bill-total-label {
        color: #0E5B46;
        font-size: 0.96rem;
        font-weight: 800;
    }

    .bill-grand-total-row .bill-total-value {
        color: #0E5B46;
        font-size: 1.25rem;
        font-weight: 900;
    }

    /* Executive Action Toolbar Card (Natural Flow, no overlap) */
    .bill-action-bar-card {
        background: #FFFFFF;
        border: 1.5px solid #E2E8F0;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(14, 91, 70, 0.05);
        padding: 0;
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }

    /* ==========================================================================
       Executive Z4U Bill Header Hero Card & Hero Action Buttons
       ========================================================================== */
    .bill-header-hero {
        background: #FFFFFF;
        border: 1.5px solid #E2E8F0;
        border-radius: 14px;
        padding: 0.85rem 1.25rem 1rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 4px 16px -2px rgba(14, 91, 70, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
        position: relative;
        overflow: hidden;
    }

    .bill-header-hero::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, #0E5B46 0%, #D4AF7C 50%, #0E5B46 100%);
    }

    .bill-header-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.6rem;
        margin-bottom: 0.65rem;
        border-bottom: 1px solid #F1F5F9;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .bill-breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.82rem;
        color: #64748B;
        font-weight: 600;
        margin: 0;
        padding: 0;
    }

    .breadcrumb-item-link {
        color: #64748B;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        transition: color 0.18s ease;
    }

    .breadcrumb-item-link:hover {
        color: #0E5B46;
    }

    .breadcrumb-sep {
        font-size: 0.75rem;
        color: #94A3B8;
    }

    .breadcrumb-item-current {
        color: #0E5B46;
        font-weight: 800;
    }

    .bill-header-status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.76rem;
        font-weight: 700;
        color: #0E5B46;
        background: rgba(14, 91, 70, 0.06);
        padding: 0.2rem 0.65rem;
        border-radius: 20px;
        border: 1px solid rgba(14, 91, 70, 0.15);
    }

    .status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #10B981;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        animation: statusPulse 2s infinite ease-in-out;
    }

    @keyframes statusPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.2); opacity: 0.75; }
    }

    .bill-header-main-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .bill-header-info {
        display: flex;
        align-items: center;
        gap: 0.85rem;
    }

    .bill-header-icon-box {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(14, 91, 70, 0.12) 0%, rgba(14, 91, 70, 0.05) 100%);
        color: #0E5B46;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid rgba(14, 91, 70, 0.2);
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .bill-header-hero:hover .bill-header-icon-box {
        background: #0E5B46;
        color: #FFFFFF;
        transform: scale(1.05);
    }

    .bill-header-title {
        font-size: 1.25rem;
        font-weight: 800;
        color: #0F172A;
        margin: 0;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .bill-badge-number {
        background: rgba(14, 91, 70, 0.1);
        color: #0E5B46;
        border: 1px solid rgba(14, 91, 70, 0.25);
        font-size: 0.8rem;
        font-weight: 800;
        padding: 0.2rem 0.65rem;
        border-radius: 8px;
    }

    .bill-badge-draft {
        background: rgba(212, 175, 124, 0.15);
        color: #8C6226;
        border: 1px solid rgba(212, 175, 124, 0.35);
        font-size: 0.76rem;
        font-weight: 800;
        padding: 0.2rem 0.65rem;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .bill-header-subtitle {
        font-size: 0.8rem;
        color: #64748B;
        font-weight: 500;
        margin: 0.2rem 0 0;
        line-height: 1.35;
    }

    /* Executive Hero Action Buttons */
    .bill-header-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-hero-action {
        height: 40px !important;
        padding: 0.45rem 1.15rem !important;
        font-size: 0.86rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
    }

    .btn-hero-action i {
        font-size: 1.15rem;
        transition: transform 0.2s ease;
    }

    /* 1. Primary Save Button: Hero Gradient Emerald */
    .btn-hero-save {
        background: linear-gradient(135deg, #0E5B46 0%, #08382B 100%) !important;
        color: #FFFFFF !important;
        border: 1.5px solid #0E5B46 !important;
        box-shadow: 0 3px 10px rgba(14, 91, 70, 0.28) !important;
    }

    .btn-hero-save:hover {
        background: linear-gradient(135deg, #137359 0%, #0E5B46 100%) !important;
        color: #FFFFFF !important;
        border-color: #137359 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(14, 91, 70, 0.38) !important;
    }

    .btn-hero-save:hover i {
        transform: scale(1.15);
    }

    .btn-hero-save:active {
        transform: translateY(0) !important;
    }

    /* 2. Secondary New Button: Soft Emerald Tint with Crisp Border */
    .btn-hero-new {
        background: rgba(14, 91, 70, 0.06) !important;
        color: #0E5B46 !important;
        border: 1.5px solid rgba(14, 91, 70, 0.25) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    }

    .btn-hero-new:hover {
        background: #0E5B46 !important;
        color: #FFFFFF !important;
        border-color: #0E5B46 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(14, 91, 70, 0.25) !important;
    }

    .btn-hero-new:hover i {
        transform: rotate(90deg);
    }

    .btn-hero-new:active {
        transform: translateY(0) !important;
    }

    /* 3. Navigation Back Button: Executive Neutral */
    .btn-hero-back {
        background: #FFFFFF !important;
        color: #475569 !important;
        border: 1.5px solid #CBD5E1 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    }

    .btn-hero-back:hover {
        background: #F8FAFC !important;
        color: #0F172A !important;
        border-color: #94A3B8 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(100, 116, 139, 0.16) !important;
    }

    .btn-hero-back:hover i {
        transform: translateX(3px);
    }

    .btn-hero-back:active {
        transform: translateY(0) !important;
    }

    /* Tab 5: Account Statement Table */
    .account-stmt-container {
        overflow-x: auto;
        overflow-y: auto;
        max-height: 360px;
        border: 1.5px solid #CBD5E1;
        border-radius: 10px;
        background: #FFFFFF;
    }

    .account-stmt-container::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background: #F8FAFC;
    }

    .account-stmt-container::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 4px;
    }

    .account-stmt-container::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

    /* #accountStatementReportTableId styles centralized in brand-identity.css */

/* ===================================================================
 * -- DEFINITIONS & SETTINGS UNIFIED EXECUTIVE STYLES --
 * =================================================================== */

/* Permissions Accordion & Checkboxes */
.group-header.collapsed .group-collapse-icon {
    transform: rotate(-90deg);
}

.perm-checkbox-item:last-child {
    border-bottom: none;
}

[data-theme="dark"] .accordion-button::after,
html.dark-style .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-style .accordion-body {
    background-color: var(--z4u-card-bg, #16262B) !important;
}

/* Item Tables & Barcode Scan */
#table_gomla input {
    width: 100%;
    box-sizing: border-box;
}

#table_gomla td {
    padding: 0;
    white-space: nowrap;
}

#table-stores input.form-control,
#table-place input.form-control {
    width: 120px;
}

#table_unit .input-group,
#table_barcodes .input-group {
    flex-wrap: nowrap;
    min-width: 130px;
}

#table_unit .input-group .form-control,
#table_barcodes .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.barcode-scan-btn i {
    font-size: 0.9rem;
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.55rem 1.15rem;
    border-radius: 10px;
    background: #FFFFFF;
    color: #0E5B46;
    border: 1.5px solid #0E5B46;
    text-decoration: none !important;
    transition: all 0.2s;
}

.btn-hero-secondary:hover {
    background: #E8F5F1;
    color: #08382B;
}

[data-theme="dark"] .btn-hero-secondary,
html.dark-style .btn-hero-secondary {
    background: #1A2C32;
    color: #34D399;
    border-color: #34D399;
}

[data-theme="dark"] .btn-hero-secondary:hover,
html.dark-style .btn-hero-secondary:hover {
    background: rgba(52, 211, 153, 0.15);
    color: #6EE7B7;
}

.icon_location {
    cursor: pointer;
    color: #0E5B46;
    font-size: 1.25rem;
    transition: transform 0.2s;
}

.icon_location:hover {
    transform: scale(1.15);
}

[data-theme="dark"] .icon_location,
html.dark-style .icon_location {
    color: #34D399;
}

/* Master Actions & Action Icons */
.action-icon-edit {
    background: rgba(14, 91, 70, 0.1);
    color: var(--z4u-primary, #0E5B46);
}

.action-icon-edit:hover {
    background: var(--z4u-primary, #0E5B46);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.action-icon-delete {
    background: #FEE2E2;
    color: #DC2626;
}

.action-icon-delete:hover {
    background: #DC2626;
    color: #FFFFFF;
    transform: translateY(-1px);
}

[data-theme="dark"] .action-icon-edit,
html.dark-style .action-icon-edit {
    background: rgba(52, 211, 153, 0.15);
    color: #34D399;
}

[data-theme="dark"] .action-icon-edit:hover,
html.dark-style .action-icon-edit:hover {
    background: #34D399;
    color: #121F23;
}

[data-theme="dark"] .action-icon-delete,
html.dark-style .action-icon-delete {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

[data-theme="dark"] .action-icon-delete:hover,
html.dark-style .action-icon-delete:hover {
    background: #EF4444;
    color: #FFFFFF;
}

.btn-hero-clear {
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    padding: 0.5rem 1.25rem;
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.2s ease;
}

.btn-hero-clear:hover {
    background-color: #E2E8F0;
    color: #1E293B;
}

[data-theme="dark"] .btn-hero-clear,
html.dark-style .btn-hero-clear {
    background-color: #1E293B;
    color: #94A3B8;
    border-color: #334155;
}

[data-theme="dark"] .btn-hero-clear:hover,
html.dark-style .btn-hero-clear:hover {
    background-color: #334155;
    color: #F1F5F9;
}

.btn-table-add {
    background: rgba(14, 91, 70, 0.08);
    border: 1.5px dashed var(--z4u-primary, #0E5B46);
    color: var(--z4u-primary, #0E5B46);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    transition: all 0.2s ease;
}

.btn-table-add:hover {
    background: var(--z4u-primary, #0E5B46);
    color: #FFFFFF;
}

[data-theme="dark"] .btn-table-add,
html.dark-style .btn-table-add {
    background: rgba(52, 211, 153, 0.12);
    border-color: #34D399;
    color: #34D399;
}

[data-theme="dark"] .btn-table-add:hover,
html.dark-style .btn-table-add:hover {
    background: #34D399;
    color: #121F23;
}

.emp-photo-container {
    width: 140px;
    height: 140px;
    border: 2px dashed #CBD5E1;
    border-radius: 14px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.emp-photo-container:hover {
    border-color: var(--z4u-primary, #0E5B46);
    background: rgba(14, 91, 70, 0.04);
}

[data-theme="dark"] .emp-photo-container,
html.dark-style .emp-photo-container {
    background: #16262B;
    border-color: #334155;
}

[data-theme="dark"] .emp-photo-container:hover,
html.dark-style .emp-photo-container:hover {
    border-color: #34D399;
    background: rgba(52, 211, 153, 0.08);
}

/* Upload Container & Drop Zone */
.upload-container-card {
    background: #FFFFFF;
    border: 1.5px solid var(--z4u-border, #E2E8F0);
    border-radius: 18px;
    padding: 2.25rem 2rem 2rem;
    max-width: 620px;
    margin: 1.5rem auto 2.5rem;
    box-shadow: 0 8px 30px rgba(14, 91, 70, 0.06);
    position: relative;
}

.upload-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.75rem;
}

.upload-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(14, 91, 70, 0.1) 0%, rgba(212, 175, 124, 0.15) 100%);
    border: 1px solid rgba(14, 91, 70, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--z4u-primary, #0E5B46);
    font-size: 1.35rem;
    flex-shrink: 0;
}

.upload-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

.upload-card-subtitle {
    font-size: 0.82rem;
    color: #64748B;
    margin: 0.2rem 0 0;
}

.drop-zone {
    border: 2px dashed #CBD5E1;
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #FAFBFB;
    position: relative;
}

.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--z4u-primary, #0E5B46);
    background: rgba(14, 91, 70, 0.04);
    box-shadow: 0 0 0 4px rgba(14, 91, 70, 0.08);
}

.drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.drop-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    background: #FFFFFF;
    border-radius: 50%;
    border: 1.5px solid var(--z4u-border, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--z4u-primary, #0E5B46);
    font-size: 1.35rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s;
}

.drop-zone:hover .drop-icon {
    transform: translateY(-2px);
    color: var(--z4u-primary-dark, #08382B);
}

.drop-main {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0 0 4px;
}

.drop-sub {
    font-size: 0.8rem;
    color: #64748B;
    margin: 0;
}

.file-badge {
    display: none;
    align-items: center;
    gap: 10px;
    background: rgba(14, 91, 70, 0.08);
    border: 1px solid rgba(14, 91, 70, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 14px;
    font-size: 0.88rem;
    color: var(--z4u-primary, #0E5B46);
    font-weight: 600;
}

.file-badge.show {
    display: flex;
}

.file-badge-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #94A3B8;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s;
}

.remove-btn:hover {
    color: #EF4444;
}

.upload-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 1.75rem 0 1.25rem;
}

.templates-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748B;
    margin: 0 0 10px;
}

.template-btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dl-btn {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1.5px solid transparent;
}

.dl-btn-en {
    background: rgba(14, 91, 70, 0.08);
    border-color: rgba(14, 91, 70, 0.2);
    color: var(--z4u-primary, #0E5B46);
}

.dl-btn-en:hover {
    background: var(--z4u-primary, #0E5B46);
    color: #FFFFFF;
    text-decoration: none;
}

.dl-btn-ar {
    background: rgba(212, 175, 124, 0.15);
    border-color: rgba(212, 175, 124, 0.35);
    color: #8C642A;
}

.dl-btn-ar:hover {
    background: var(--z4u-gold, #D4AF7A);
    color: #2D1A04;
    text-decoration: none;
}

.lang-tag {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.06);
}

.size-hint {
    font-size: 0.76rem;
    color: #94A3B8;
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Upload Excel Dark Mode Overrides */
[data-theme="dark"] .upload-container-card,
html.dark-style .upload-container-card {
    background: #16262B;
    border-color: #243B42;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .upload-card-title,
html.dark-style .upload-card-title {
    color: #E2E8F0;
}

[data-theme="dark"] .upload-card-subtitle,
html.dark-style .upload-card-subtitle {
    color: #94A3B8;
}

[data-theme="dark"] .drop-zone,
html.dark-style .drop-zone {
    background: #121F23;
    border-color: #334155;
}

[data-theme="dark"] .drop-zone:hover,
[data-theme="dark"] .drop-zone.dragover,
html.dark-style .drop-zone:hover,
html.dark-style .drop-zone.dragover {
    border-color: #34D399;
    background: rgba(52, 211, 153, 0.08);
}

[data-theme="dark"] .drop-icon,
html.dark-style .drop-icon {
    background: #1A2C32;
    border-color: #2A454E;
    color: #34D399;
}

[data-theme="dark"] .drop-main,
html.dark-style .drop-main {
    color: #F1F5F9;
}

[data-theme="dark"] .drop-sub,
html.dark-style .drop-sub {
    color: #94A3B8;
}

[data-theme="dark"] .file-badge,
html.dark-style .file-badge {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34D399;
}

[data-theme="dark"] .upload-divider,
html.dark-style .upload-divider {
    background: #243B42;
}

[data-theme="dark"] .templates-label,
html.dark-style .templates-label {
    color: #94A3B8;
}

[data-theme="dark"] .dl-btn-en,
html.dark-style .dl-btn-en {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34D399;
}

[data-theme="dark"] .dl-btn-en:hover,
html.dark-style .dl-btn-en:hover {
    background: #34D399;
    color: #121F23;
}

[data-theme="dark"] .dl-btn-ar,
html.dark-style .dl-btn-ar {
    background: rgba(212, 175, 124, 0.12);
    border-color: rgba(212, 175, 124, 0.3);
    color: #D4AF7A;
}

[data-theme="dark"] .dl-btn-ar:hover,
html.dark-style .dl-btn-ar:hover {
    background: #D4AF7A;
    color: #121F23;
}

[data-theme="dark"] .size-hint,
html.dark-style .size-hint {
    color: #64748B;
}

/* Executive Table & Select2 Harmonization */
.table-executive {
    width: 100% !important;
    margin-bottom: 0 !important;
}
.table-executive thead th {
    background: linear-gradient(180deg, #F0FDF4 0%, #DCFCE7 100%);
    font-size: 0.8rem;
    font-weight: 700;
    color: #0E5B46;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.75rem 0.85rem;
    border-bottom: 2px solid rgba(14, 91, 70, 0.15);
    border-top: none;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}
.table-executive tbody tr {
    transition: background-color 0.15s ease;
}
.table-executive tbody tr:nth-of-type(even) {
    background-color: #fafcfb;
}
.table-executive tbody tr:hover {
    background-color: #f1f8f5;
}
.table-executive tbody td {
    padding: 0.5rem 0.65rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f2f1;
    font-size: 0.875rem;
    text-align: center;
}
.table-executive tbody td:first-child {
    font-weight: 600;
    color: #6B7280;
}
.table-executive .form-control, .table-executive .form-select {
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid #D1D5DB;
    background: #ffffff;
}
.table-executive .form-control:focus, .table-executive .form-select:focus {
    border-color: #0E5B46;
    box-shadow: 0 0 0 2px rgba(14, 91, 70, 0.15);
}
.table-actions-btns {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.btn-table-action-add {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(14, 91, 70, 0.08) !important;
    border: 1px solid rgba(14, 91, 70, 0.2) !important;
    color: #0E5B46 !important;
    transition: all 0.15s ease !important;
    cursor: pointer;
}
.btn-table-action-add:hover {
    background: #0E5B46 !important;
    color: #ffffff !important;
    transform: scale(1.05);
}
.btn-table-action-del {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: #DC2626 !important;
    transition: all 0.15s ease !important;
    cursor: pointer;
}
.btn-table-action-del:hover {
    background: #DC2626 !important;
    color: #ffffff !important;
    transform: scale(1.05);
}
.table-executive .select2-container {
    width: 100% !important;
    text-align: center;
}
.table-executive .select2-container .select2-selection--single {
    height: 36px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease;
}
.table-executive .select2-container--open .select2-selection--single,
.table-executive .select2-container .select2-selection--single:focus {
    border-color: #0E5B46 !important;
    box-shadow: 0 0 0 2px rgba(14, 91, 70, 0.15) !important;
}
.table-executive .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
    padding-left: 10px !important;
    padding-right: 25px !important;
    color: #1F2937 !important;
    font-weight: 500 !important;
    text-align: center !important;
}
.table-executive .select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    top: 0 !important;
    right: 8px !important;
}
[dir="rtl"] .table-executive .select2-container .select2-selection--single .select2-selection__arrow {
    right: auto !important;
    left: 8px !important;
}
[dir="rtl"] .table-executive .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 10px !important;
    padding-left: 25px !important;
}
.barcode-scan-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 0.65rem;
    background: #f9fafb;
    border: 1px solid #D1D5DB;
    color: #0E5B46;
    border-radius: 0 8px 8px 0;
}
[dir="rtl"] .barcode-scan-btn {
    border-radius: 8px 0 0 8px;
}
[data-theme="dark"] .z4u-field-label,
html.dark-style .z4u-field-label {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .table-executive-wrapper,
html.dark-style .table-executive-wrapper {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .table-executive thead,
html.dark-style .table-executive thead {
    background: #0A1214 !important;
}
[data-theme="dark"] .table-executive thead th,
html.dark-style .table-executive thead th {
    background: #0A1214 !important;
    background-image: none !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.25) !important;
    border-inline: 1px solid rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .table-executive tbody tr,
html.dark-style .table-executive tbody tr {
    background-color: transparent !important;
}
[data-theme="dark"] .table-executive tbody tr:nth-of-type(even),
html.dark-style .table-executive tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
[data-theme="dark"] .table-executive tbody tr:hover,
html.dark-style .table-executive tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .table-executive tbody td,
html.dark-style .table-executive tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
}
[data-theme="dark"] .table-executive tbody td:first-child,
html.dark-style .table-executive tbody td:first-child {
    color: #94A3B8 !important;
}
[data-theme="dark"] .table-executive .form-control,
[data-theme="dark"] .table-executive .form-select,
html.dark-style .table-executive .form-control,
html.dark-style .table-executive .form-select {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .table-executive .select2-container .select2-selection--single,
html.dark-style .table-executive .select2-container .select2-selection--single {
    background-color: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .table-executive .select2-container .select2-selection--single .select2-selection__rendered,
html.dark-style .table-executive .select2-container .select2-selection--single .select2-selection__rendered {
    color: #FFFFFF !important;
}
[data-theme="dark"] .btn-table-action-add,
html.dark-style .btn-table-action-add {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34D399 !important;
}
[data-theme="dark"] .btn-table-action-del,
html.dark-style .btn-table-action-del {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #F87171 !important;
}
[data-theme="dark"] .barcode-scan-btn,
html.dark-style .barcode-scan-btn {
    background: #16262B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #34D399 !important;
}

.icon-refresh-action {
    color: var(--z4u-primary, #0E5B46);
    cursor: pointer;
    transition: transform 0.2s;
}
.icon-refresh-action:hover {
    transform: rotate(180deg);
}
[data-theme="dark"] .icon-refresh-action,
html.dark-style .icon-refresh-action {
    color: #34D399;
}
.z4u-field-label .text-danger {
    margin-inline-start: 2px;
}


/* ===================================================================
 * ── CENTRALIZED SHARED UI & MODAL STYLES ──
 * =================================================================== */

/* ── Extracted from _BillModals.cshtml ── */
/* ── Z4U Modal Theme Tokens ── */
    .z4u-modal .modal-content {
        border-radius: 16px;
        border: 1px solid #E2E8F0;
        box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -5px rgba(14, 91, 70, 0.06);
        overflow: hidden;
    }

    .z4u-modal .modal-header {
        background: linear-gradient(135deg, #FAFCFB 0%, #F0F6F3 100%);
        border-bottom: 1.5px solid rgba(14, 91, 70, 0.15);
        padding: 1rem 1.35rem;
    }

    .z4u-modal .modal-title {
        color: #0E5B46;
        font-size: 1.05rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
    }

    .z4u-modal .modal-title i {
        font-size: 1.25rem;
        color: #0E5B46;
    }

    .z4u-modal .modal-body {
        padding: 1.35rem;
        background: #FFFFFF;
    }

    .z4u-modal .modal-footer {
        background: #F8FAFC;
        border-top: 1px solid #E2E8F0;
        padding: 0.85rem 1.35rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
    }

    /* Modal Table Styling */
    .z4u-modal .table {
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.83rem;
        border-radius: 10px;
        overflow: hidden;
        border: 1.5px solid #CBD5E1;
    }

    .z4u-modal .table thead th {
        background: #F4F7F6 !important;
        background: linear-gradient(180deg, #F8FAFC 0%, #EDF4F1 100%) !important;
        color: #0E5B46 !important;
        font-weight: 700;
        border-bottom: 2px solid #0E5B46 !important;
        padding: 0.75rem 0.6rem;
        white-space: nowrap;
        text-align: center;
        border-inline: 1px solid #E2E8F0;
    }

    .z4u-modal .table tbody tr {
        transition: background-color 0.15s ease;
    }

    .z4u-modal .table tbody tr:nth-child(even) {
        background-color: #F8FAFC;
    }

    .z4u-modal .table tbody tr:hover {
        background-color: rgba(14, 91, 70, 0.05) !important;
    }

    .z4u-modal .table td {
        vertical-align: middle;
        padding: 0.5rem 0.65rem !important;
        border-bottom: 1px solid #EDF2F7;
        color: #1E293B;
    }

    /* Groups Grid Layout - Eliminates scattering & provides uniform cards */
    .groups-grid-layout {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
        gap: 0.75rem;
        max-height: 260px;
        overflow-y: auto;
        padding: 0.85rem;
        background: #F8FAFC;
        border: 1.5px solid #E2E8F0;
        border-radius: 12px;
    }

    .groups-grid-layout::-webkit-scrollbar {
        width: 6px;
        background: #F1F5F9;
    }

    .groups-grid-layout::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 4px;
    }

    .groups-grid-layout::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

    /* Group Category Tile Cards */
    .z4u-modal .box.main_group,
    .z4u-modal .box.child_group {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0.55rem 0.85rem !important;
        border-radius: 10px !important;
        background: #F8FAFC !important;
        border: 1.5px solid #E2E8F0 !important;
        font-size: 0.83rem !important;
        font-weight: 700 !important;
        color: #1E293B !important;
        margin: 0 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.65rem !important;
        text-align: right !important;
        transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        user-select: none;
    }

    .z4u-modal .box.main_group.d-none,
    .z4u-modal .box.child_group.d-none,
    .z4u-modal .box.main_group[style*="display: none"],
    .z4u-modal .box.child_group[style*="display: none"] {
        display: none !important;
    }

    .z4u-modal .group-icon-wrap {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(14, 91, 70, 0.08);
        color: #0E5B46;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
        transition: all 0.22s ease;
    }

    .z4u-modal .group-title-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        font-size: 0.83rem;
        font-weight: 700;
    }

    .z4u-modal .box.main_group:hover,
    .z4u-modal .box.child_group:hover {
        background: #FFFFFF !important;
        border-color: #0E5B46 !important;
        color: #0E5B46 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(14, 91, 70, 0.15) !important;
    }

    .z4u-modal .box.main_group:hover .group-icon-wrap,
    .z4u-modal .box.child_group:hover .group-icon-wrap {
        background: #0E5B46;
        color: #FFFFFF;
        transform: scale(1.05);
    }

    .z4u-modal .box.main_group.active,
    .z4u-modal .box.child_group.active {
        background: #0E5B46 !important;
        border-color: #0E5B46 !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 14px rgba(14, 91, 70, 0.25) !important;
    }

    .z4u-modal .box.main_group.active .group-icon-wrap,
    .z4u-modal .box.child_group.active .group-icon-wrap {
        background: rgba(255, 255, 255, 0.25);
        color: #FFFFFF;
    }

    /* Modal Internal Breadcrumb */
    .groups-internal-breadcrumb {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.85rem;
        border-radius: 9px;
        background: #F1F5F9;
        border: 1px solid #CBD5E1;
        font-size: 0.82rem;
        margin-bottom: 0.75rem;
    }

    .breadcrumb-item-btn {
        background: transparent;
        border: none;
        padding: 0;
        color: #0E5B46;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        transition: all 0.15s ease;
    }

    .breadcrumb-item-btn:hover {
        text-decoration: underline;
        color: #0A4333;
    }

    .breadcrumb-sep {
        color: #94A3B8;
        font-size: 0.85rem;
    }

    .breadcrumb-current {
        font-weight: 800;
        color: #1E293B;
    }

    /* Modal Button Helpers */
    .btn-brand-primary {
        background: #0E5B46 !important;
        color: #FFFFFF !important;
        border: 1.5px solid #0E5B46 !important;
        font-weight: 700;
        border-radius: 9px;
        transition: all 0.2s ease;
    }

    .btn-brand-primary:hover {
        background: #0A4333 !important;
        border-color: #0A4333 !important;
        color: #FFFFFF !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(14, 91, 70, 0.28);
    }

    .btn-brand-secondary {
        background: #FFFFFF !important;
        color: #334155 !important;
        border: 1.5px solid #CBD5E1 !important;
        font-weight: 700;
        border-radius: 9px;
        transition: all 0.2s ease;
    }

    .btn-brand-secondary:hover {
        background: #F8FAFC !important;
        border-color: #64748B !important;
        color: #0F172A !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(100, 116, 139, 0.15);
    }

    /* Modal KPI summary badge in payment methods */
    .modal-kpi-badge {
        background: #FAF8F5;
        border: 1.5px solid rgba(212, 175, 124, 0.45);
        border-radius: 12px;
        padding: 0.75rem 1.15rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* ── Light Mode Base for Payment Modal Elements ── */
    #payment_method_modal .payment-modal-header {
        background: #FFFFFF;
        border-bottom: 2px solid #E2E8F0;
    }
    #payment_method_modal .pay-kpi-card-total {
        background: #F8FAFC;
        border: 1.5px solid #CBD5E1;
        min-height: 84px;
    }
    #payment_method_modal .pay-kpi-card-remain {
        background: rgba(14, 91, 70, 0.05);
        border: 1.5px solid rgba(14, 91, 70, 0.3);
        min-height: 84px;
    }
    #payment_method_modal .pay-table-wrapper {
        border-radius: 12px;
        border: 1.5px solid #E2E8F0;
        overflow: hidden;
    }
    #payment_method_modal .payment-table-head {
        background: #F8FAFC;
    }
    #payment_method_modal .pay-modal-footer {
        background: #F8FAFC;
        border-top: 1.5px solid #E2E8F0;
        justify-content: center !important;
        gap: 0.85rem !important;
    }
    #table_payment_methods th,
    #table_payment_methods td {
        vertical-align: middle !important;
        text-align: center !important;
    }
    #table_payment_methods td:last-child,
    #table_payment_methods th:last-child {
        text-align: center !important;
    }
    #table_payment_methods td:last-child > div {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        gap: 6px !important;
    }
    #table_payment_methods .btn {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    #table_payment_methods .btn > i {
        margin: 0 !important;
        margin-inline-end: 0 !important;
        margin-inline-start: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 1em !important;
        height: 1em !important;
        line-height: 1 !important;
    }

    /* ── Z4U Modal Dark Mode Overrides ── */
    [data-theme="dark"] .z4u-modal .modal-content,
    html.dark-style .z4u-modal .modal-content {
        background-color: #121F23 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .z4u-modal .modal-header,
    html.dark-style .z4u-modal .modal-header {
        background: #16262B !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] .z4u-modal .modal-title,
    html.dark-style .z4u-modal .modal-title {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .z4u-modal .modal-title i,
    html.dark-style .z4u-modal .modal-title i {
        color: #10B981 !important;
    }

    [data-theme="dark"] .z4u-modal .btn-close,
    html.dark-style .z4u-modal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%) !important;
    }

    [data-theme="dark"] .z4u-modal .modal-body,
    html.dark-style .z4u-modal .modal-body {
        background: #0B1315 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] .z4u-modal .modal-footer,
    html.dark-style .z4u-modal .modal-footer {
        background: #16262B !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #CBD5E1 !important;
    }

    /* Modal Search / Command Bar in Dark Mode */
    [data-theme="dark"] .z4u-modal .modal-search-bar,
    [data-theme="dark"] .z4u-modal div[style*="background: #F8FAFC"],
    [data-theme="dark"] .z4u-modal div[style*="background: #FAFBFD"],
    html.dark-style .z4u-modal .modal-search-bar,
    html.dark-style .z4u-modal div[style*="background: #F8FAFC"],
    html.dark-style .z4u-modal div[style*="background: #FAFBFD"] {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] .z4u-modal .modal-search-addon,
    [data-theme="dark"] .z4u-modal .input-group-text,
    [data-theme="dark"] .z4u-modal .input-group-text.bg-white,
    html.dark-style .z4u-modal .modal-search-addon,
    html.dark-style .z4u-modal .input-group-text,
    html.dark-style .z4u-modal .input-group-text.bg-white {
        background: #0A1214 !important;
        border-color: #24383D !important;
        color: #10B981 !important;
    }

    [data-theme="dark"] .z4u-modal .modal-search-input,
    [data-theme="dark"] .z4u-modal input.form-control,
    html.dark-style .z4u-modal .modal-search-input,
    html.dark-style .z4u-modal input.form-control {
        background: #0A1214 !important;
        border-color: #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .z4u-modal .modal-search-input::placeholder,
    [data-theme="dark"] .z4u-modal input.form-control::placeholder,
    html.dark-style .z4u-modal .modal-search-input::placeholder,
    html.dark-style .z4u-modal input.form-control::placeholder {
        color: #64748B !important;
    }

    /* Modal Table Styling in Dark Mode */
    [data-theme="dark"] .z4u-modal .table-responsive,
    html.dark-style .z4u-modal .table-responsive {
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #121F23 !important;
    }

    [data-theme="dark"] .z4u-modal .table,
    html.dark-style .z4u-modal .table {
        border-color: rgba(255, 255, 255, 0.08) !important;
        background-color: #121F23 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] .z4u-modal .table thead,
    [data-theme="dark"] .z4u-modal .table thead th,
    html.dark-style .z4u-modal .table thead,
    html.dark-style .z4u-modal .table thead th {
        background: #16262B !important;
        background-image: none !important;
        color: #F1F5F9 !important;
        border-bottom: 2px solid #10B981 !important;
        border-inline: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] .z4u-modal .table tbody tr,
    html.dark-style .z4u-modal .table tbody tr {
        background-color: #121F23 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] .z4u-modal .table tbody tr:nth-child(even),
    html.dark-style .z4u-modal .table tbody tr:nth-child(even) {
        background-color: #152429 !important;
    }

    [data-theme="dark"] .z4u-modal .table tbody tr:hover,
    html.dark-style .z4u-modal .table tbody tr:hover {
        background-color: rgba(16, 185, 129, 0.12) !important;
    }

    [data-theme="dark"] .z4u-modal .table td,
    html.dark-style .z4u-modal .table td {
        color: #E2E8F0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] .z4u-modal .table td input.form-control,
    html.dark-style .z4u-modal .table td input.form-control {
        background: #0A1214 !important;
        border: 1px solid #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .z4u-modal .text-dark,
    html.dark-style .z4u-modal .text-dark {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .z4u-modal .bg-light,
    html.dark-style .z4u-modal .bg-light {
        background-color: #0A1214 !important;
        color: #94A3B8 !important;
        border-color: #24383D !important;
    }

    [data-theme="dark"] .z4u-modal span[style*="color: #0E5B46"],
    html.dark-style .z4u-modal span[style*="color: #0E5B46"] {
        color: #34D399 !important;
        background-color: rgba(16, 185, 129, 0.15) !important;
    }

    [data-theme="dark"] .z4u-modal .table td .form-check-input,
    [data-theme="dark"] .z4u-modal .table th .form-check-input,
    html.dark-style .z4u-modal .table td .form-check-input,
    html.dark-style .z4u-modal .table th .form-check-input {
        background-color: #0A1214 !important;
        border-color: #24383D !important;
    }

    [data-theme="dark"] .z4u-modal .table td .form-check-input:checked,
    [data-theme="dark"] .z4u-modal .table th .form-check-input:checked,
    html.dark-style .z4u-modal .table td .form-check-input:checked,
    html.dark-style .z4u-modal .table th .form-check-input:checked {
        background-color: #10B981 !important;
        border-color: #10B981 !important;
    }

    /* Modal Buttons in Dark Mode */
    [data-theme="dark"] .z4u-modal .btn-brand-secondary,
    html.dark-style .z4u-modal .btn-brand-secondary {
        background: #1A2D33 !important;
        color: #CBD5E1 !important;
        border-color: #24383D !important;
    }

    [data-theme="dark"] .z4u-modal .btn-brand-secondary:hover,
    html.dark-style .z4u-modal .btn-brand-secondary:hover {
        background: #24383D !important;
        color: #FFFFFF !important;
        border-color: #10B981 !important;
    }

    [data-theme="dark"] .z4u-modal .btn-brand-primary,
    html.dark-style .z4u-modal .btn-brand-primary {
        background: #10B981 !important;
        border-color: #10B981 !important;
        color: #FFFFFF !important;
    }

    [data-theme="dark"] .z4u-modal .btn-brand-primary:hover,
    html.dark-style .z4u-modal .btn-brand-primary:hover {
        background: #0E9F6E !important;
        border-color: #0E9F6E !important;
    }

    /* Group Grid and Tile Cards in Dark Mode */
    [data-theme="dark"] .groups-grid-layout,
    html.dark-style .groups-grid-layout {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] .groups-grid-layout::-webkit-scrollbar,
    html.dark-style .groups-grid-layout::-webkit-scrollbar {
        background: #0B1315 !important;
    }

    [data-theme="dark"] .groups-grid-layout::-webkit-scrollbar-thumb,
    html.dark-style .groups-grid-layout::-webkit-scrollbar-thumb {
        background: #24383D !important;
    }

    [data-theme="dark"] .z4u-modal .box.main_group,
    [data-theme="dark"] .z4u-modal .box.child_group,
    html.dark-style .z4u-modal .box.main_group,
    html.dark-style .z4u-modal .box.child_group {
        background: #16262B !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .z4u-modal .box.main_group:hover,
    [data-theme="dark"] .z4u-modal .box.child_group:hover,
    html.dark-style .z4u-modal .box.main_group:hover,
    html.dark-style .z4u-modal .box.child_group:hover {
        background: #1A2D33 !important;
        border-color: #10B981 !important;
        color: #10B981 !important;
    }

    [data-theme="dark"] .z4u-modal .box.main_group.active,
    [data-theme="dark"] .z4u-modal .box.child_group.active,
    html.dark-style .z4u-modal .box.main_group.active,
    html.dark-style .z4u-modal .box.child_group.active {
        background: #10B981 !important;
        border-color: #10B981 !important;
        color: #FFFFFF !important;
    }

    [data-theme="dark"] .z4u-modal .group-icon-wrap,
    html.dark-style .z4u-modal .group-icon-wrap {
        background: rgba(16, 185, 129, 0.15) !important;
        color: #10B981 !important;
    }

    [data-theme="dark"] .groups-internal-breadcrumb,
    html.dark-style .groups-internal-breadcrumb {
        background: #16262B !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] .breadcrumb-item-btn,
    html.dark-style .breadcrumb-item-btn {
        color: #10B981 !important;
    }

    [data-theme="dark"] .breadcrumb-current,
    html.dark-style .breadcrumb-current {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .modal-kpi-badge,
    html.dark-style .modal-kpi-badge {
        background: #16262B !important;
        border-color: rgba(212, 175, 124, 0.25) !important;
    }

    [data-theme="dark"] .z4u-modal .text-muted,
    html.dark-style .z4u-modal .text-muted {
        color: #94A3B8 !important;
    }

    /* Modal Secondary / Close Buttons in Dark Mode */
    [data-theme="dark"] .z4u-modal .btn-outline-secondary,
    [data-theme="dark"] .z4u-modal .btn-light,
    html.dark-style .z4u-modal .btn-outline-secondary,
    html.dark-style .z4u-modal .btn-light {
        background: #1A2D33 !important;
        border-color: #24383D !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] .z4u-modal .btn-outline-secondary:hover,
    [data-theme="dark"] .z4u-modal .btn-light:hover,
    html.dark-style .z4u-modal .btn-outline-secondary:hover,
    html.dark-style .z4u-modal .btn-light:hover {
        background: #24383D !important;
        border-color: #10B981 !important;
        color: #FFFFFF !important;
    }

    /* ── Payment Method Modal Dark Mode ── */
    [data-theme="dark"] #payment_method_modal .payment-modal-header,
    html.dark-style #payment_method_modal .payment-modal-header {
        background: #16262B !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #payment_method_modal .modal-title,
    html.dark-style #payment_method_modal .modal-title {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #payment_method_modal .modal-header span.rounded-3,
    html.dark-style #payment_method_modal .modal-header span.rounded-3 {
        background: rgba(16, 185, 129, 0.15) !important;
        color: #34D399 !important;
    }

    [data-theme="dark"] #payment_method_modal .modal-body,
    html.dark-style #payment_method_modal .modal-body {
        background: #0B1315 !important;
    }

    [data-theme="dark"] #payment_method_modal .pay-kpi-card-total,
    html.dark-style #payment_method_modal .pay-kpi-card-total {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    [data-theme="dark"] #payment_method_modal .pay-kpi-card-total #pay_method_total,
    html.dark-style #payment_method_modal .pay-kpi-card-total #pay_method_total {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #payment_method_modal .pay-kpi-card-remain,
    html.dark-style #payment_method_modal .pay-kpi-card-remain {
        background: rgba(16, 185, 129, 0.1) !important;
        border-color: rgba(16, 185, 129, 0.35) !important;
    }

    [data-theme="dark"] #payment_method_modal .pay-kpi-card-remain #pay_method_remain,
    [data-theme="dark"] #payment_method_modal .pay-kpi-card-remain span,
    html.dark-style #payment_method_modal .pay-kpi-card-remain #pay_method_remain,
    html.dark-style #payment_method_modal .pay-kpi-card-remain span {
        color: #34D399 !important;
    }

    [data-theme="dark"] #payment_method_modal .pay-table-wrapper,
    html.dark-style #payment_method_modal .pay-table-wrapper {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #payment_method_modal .payment-table-head,
    [data-theme="dark"] #table_payment_methods thead,
    html.dark-style #payment_method_modal .payment-table-head,
    html.dark-style #table_payment_methods thead {
        background: #16262B !important;
    }

    [data-theme="dark"] #table_payment_methods thead tr,
    html.dark-style #table_payment_methods thead tr {
        border-bottom: 2px solid #10B981 !important;
    }

    [data-theme="dark"] #table_payment_methods thead th,
    html.dark-style #table_payment_methods thead th {
        background: #16262B !important;
        color: #34D399 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #table_payment_methods tbody tr,
    html.dark-style #table_payment_methods tbody tr {
        background: #121F23 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #table_payment_methods tbody tr:hover,
    html.dark-style #table_payment_methods tbody tr:hover {
        background: rgba(16, 185, 129, 0.08) !important;
    }

    [data-theme="dark"] #table_payment_methods tbody td,
    html.dark-style #table_payment_methods tbody td {
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] #table_payment_methods .form-select,
    html.dark-style #table_payment_methods .form-select {
        background-color: #0A1214 !important;
        border-color: #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #table_payment_methods .form-select option,
    html.dark-style #table_payment_methods .form-select option {
        background-color: #121F23 !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #table_payment_methods .method_amount,
    html.dark-style #table_payment_methods .method_amount {
        background-color: #0A1214 !important;
        border-color: #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #table_payment_methods .btn-outline-success,
    html.dark-style #table_payment_methods .btn-outline-success {
        background: rgba(16, 185, 129, 0.12) !important;
        border-color: #10B981 !important;
        color: #34D399 !important;
    }

    [data-theme="dark"] #table_payment_methods .btn-outline-success:hover,
    html.dark-style #table_payment_methods .btn-outline-success:hover {
        background: #10B981 !important;
        color: #FFFFFF !important;
    }

    [data-theme="dark"] #table_payment_methods .btn-outline-danger,
    html.dark-style #table_payment_methods .btn-outline-danger {
        background: rgba(239, 68, 68, 0.12) !important;
        border-color: #EF4444 !important;
        color: #F87171 !important;
    }

    [data-theme="dark"] #table_payment_methods .btn-outline-danger:hover,
    html.dark-style #table_payment_methods .btn-outline-danger:hover {
        background: #EF4444 !important;
        color: #FFFFFF !important;
    }

    [data-theme="dark"] #payment_method_modal .pay-modal-footer,
    html.dark-style #payment_method_modal .pay-modal-footer {
        background: #16262B !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        justify-content: center !important;
        gap: 0.85rem !important;
    }

    /* ── Sales Invoices Helper Modal Dark Mode ── */
    [data-theme="dark"] #help_sales_invoices_modal .modal-header,
    html.dark-style #help_sales_invoices_modal .modal-header {
        background: #16262B !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #help_sales_invoices_modal .modal-title,
    html.dark-style #help_sales_invoices_modal .modal-title {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #help_sales_invoices_modal .modal-title i,
    html.dark-style #help_sales_invoices_modal .modal-title i {
        color: #10B981 !important;
    }

    [data-theme="dark"] #help_sales_invoices_modal .modal-body,
    html.dark-style #help_sales_invoices_modal .modal-body {
        background: #0B1315 !important;
    }

    [data-theme="dark"] #help_sales_invoices_modal .input-group-text,
    [data-theme="dark"] #help_sales_invoices_modal .input-group-text.bg-white,
    html.dark-style #help_sales_invoices_modal .input-group-text,
    html.dark-style #help_sales_invoices_modal .input-group-text.bg-white {
        background: #121F23 !important;
        border-color: #24383D !important;
        color: #10B981 !important;
    }

    [data-theme="dark"] #search_in_help_sales_invoices_table,
    html.dark-style #search_in_help_sales_invoices_table {
        background: #121F23 !important;
        border-color: #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #search_in_help_sales_invoices_table::placeholder,
    html.dark-style #search_in_help_sales_invoices_table::placeholder {
        color: #64748B !important;
    }

    [data-theme="dark"] #help_sales_invoices_modal .table-responsive,
    html.dark-style #help_sales_invoices_modal .table-responsive {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #table_help_sales_invoices thead th,
    html.dark-style #table_help_sales_invoices thead th {
        background: #16262B !important;
        color: #34D399 !important;
        border-bottom: 2px solid #10B981 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #table_help_sales_invoices tbody tr,
    html.dark-style #table_help_sales_invoices tbody tr {
        background: #121F23 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #table_help_sales_invoices tbody tr:nth-child(even),
    html.dark-style #table_help_sales_invoices tbody tr:nth-child(even) {
        background: #152429 !important;
    }

    [data-theme="dark"] #table_help_sales_invoices tbody tr:hover,
    html.dark-style #table_help_sales_invoices tbody tr:hover {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #FFFFFF !important;
    }

    [data-theme="dark"] #table_help_sales_invoices tbody td,
    html.dark-style #table_help_sales_invoices tbody td {
        color: #CBD5E1 !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] #help_sales_invoices_modal .modal-footer,
    html.dark-style #help_sales_invoices_modal .modal-footer {
        background: #16262B !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Universal & Modal Pagination Dark Mode */
    [data-theme="dark"] .pagination,
    html.dark-style .pagination {
        background: transparent !important;
    }
    [data-theme="dark"] .pagination .page-item,
    [data-theme="dark"] .pagination li,
    html.dark-style .pagination .page-item,
    html.dark-style .pagination li {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    [data-theme="dark"] .pagination .page-link,
    html.dark-style .pagination .page-link {
        background-color: #121F23 !important;
        border: 1px solid #24383D !important;
        color: #CBD5E1 !important;
        box-shadow: none !important;
    }
    [data-theme="dark"] .pagination .page-link:hover:not(.disabled),
    html.dark-style .pagination .page-link:hover:not(.disabled) {
        background-color: #16262B !important;
        border-color: #10B981 !important;
        color: #34D399 !important;
        transform: translateY(-1.5px) !important;
    }
    [data-theme="dark"] .pagination .page-item.active .page-link,
    [data-theme="dark"] .pagination .page-link.active,
    html.dark-style .pagination .page-item.active .page-link,
    html.dark-style .pagination .page-link.active {
        background-color: #10B981 !important;
        border-color: #10B981 !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    }
    [data-theme="dark"] .pagination .page-item.disabled .page-link,
    [data-theme="dark"] .pagination .page-link.disabled,
    html.dark-style .pagination .page-item.disabled .page-link,
    html.dark-style .pagination .page-link.disabled {
        background-color: #0A1214 !important;
        border-color: #1F2E33 !important;
        color: #475569 !important;
        opacity: 0.6 !important;
        cursor: not-allowed !important;
    }

    /* ── Item Analysis Modal Dark Mode ── */
    [data-theme="dark"] #item_analysis_modal .table-responsive,
    html.dark-style #item_analysis_modal .table-responsive {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #item_analysis_for_bills_table thead th,
    html.dark-style #item_analysis_for_bills_table thead th {
        background: #16262B !important;
        color: #34D399 !important;
        border-bottom: 2px solid #10B981 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #item_analysis_for_bills_table tbody tr,
    html.dark-style #item_analysis_for_bills_table tbody tr {
        background: #121F23 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #item_analysis_for_bills_table tbody tr:nth-child(even),
    html.dark-style #item_analysis_for_bills_table tbody tr:nth-child(even) {
        background: #152429 !important;
    }

    [data-theme="dark"] #item_analysis_for_bills_table tbody td,
    html.dark-style #item_analysis_for_bills_table tbody td {
        color: #CBD5E1 !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    /* ── Item Report Modal Dark Mode ── */
    [data-theme="dark"] #item_report_table thead th,
    html.dark-style #item_report_table thead th {
        background: #16262B !important;
        color: #34D399 !important;
        border-bottom: 2px solid #10B981 !important;
    }

    [data-theme="dark"] #item_report_table tbody tr,
    html.dark-style #item_report_table tbody tr {
        background: #121F23 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #item_report_table tbody tr:nth-child(even),
    html.dark-style #item_report_table tbody tr:nth-child(even) {
        background: #152429 !important;
    }

    [data-theme="dark"] #item_report_table tbody td,
    html.dark-style #item_report_table tbody td {
        color: #CBD5E1 !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    /* ── Groups Items Modal Dark Mode ── */
    [data-theme="dark"] #groups_items_table thead th,
    html.dark-style #groups_items_table thead th {
        background: #16262B !important;
        color: #34D399 !important;
        border-bottom: 2px solid #10B981 !important;
    }

    [data-theme="dark"] #groups_items_table tbody tr,
    html.dark-style #groups_items_table tbody tr {
        background: #121F23 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #groups_items_table tbody tr:nth-child(even),
    html.dark-style #groups_items_table tbody tr:nth-child(even) {
        background: #152429 !important;
    }

    [data-theme="dark"] #groups_items_table tbody td,
    html.dark-style #groups_items_table tbody td {
        color: #CBD5E1 !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    /* ── Previous Invoices Modal Dark Mode ── */
    [data-theme="dark"] #bill_result_table thead th,
    html.dark-style #bill_result_table thead th {
        background: #16262B !important;
        color: #34D399 !important;
        border-bottom: 2px solid #10B981 !important;
    }

    [data-theme="dark"] #bill_result_table tbody tr,
    html.dark-style #bill_result_table tbody tr {
        background: #121F23 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #bill_result_table tbody tr:nth-child(even),
    html.dark-style #bill_result_table tbody tr:nth-child(even) {
        background: #152429 !important;
    }

    [data-theme="dark"] #bill_result_table tbody td,
    html.dark-style #bill_result_table tbody td {
        color: #CBD5E1 !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] #search_in_bill_result_table,
    html.dark-style #search_in_bill_result_table {
        background: #121F23 !important;
        border-color: #24383D !important;
        color: #F1F5F9 !important;
    }

    /* ── Universal Dark Mode Scrollbars in Modals ── */
    [data-theme="dark"] .z4u-modal ::-webkit-scrollbar-track,
    html.dark-style .z4u-modal ::-webkit-scrollbar-track {
        background: #0B1315 !important;
    }

    [data-theme="dark"] .z4u-modal ::-webkit-scrollbar-thumb,
    html.dark-style .z4u-modal ::-webkit-scrollbar-thumb {
        background: #24383D !important;
        border-radius: 9999px !important;
    }

    [data-theme="dark"] .z4u-modal ::-webkit-scrollbar-thumb:hover,
    html.dark-style .z4u-modal ::-webkit-scrollbar-thumb:hover {
        background: #10B981 !important;
    }

    [data-theme="dark"] .z4u-modal,
    html.dark-style .z4u-modal {
        scrollbar-color: #24383D #0B1315 !important;
    }

    /* ── All Groups Popup Dark Mode ── */
    [data-theme="dark"] #all_groups_popup #child_groups,
    html.dark-style #all_groups_popup #child_groups {
        background: #0B1315 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #all_groups_popup #child_groups .text-dark,
    html.dark-style #all_groups_popup #child_groups .text-dark {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #all_groups_popup #child_groups .text-muted,
    [data-theme="dark"] #all_groups_popup #child_groups .text-secondary,
    html.dark-style #all_groups_popup #child_groups .text-muted,
    html.dark-style #all_groups_popup #child_groups .text-secondary {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] #all_groups_popup .input-group-text,
    html.dark-style #all_groups_popup .input-group-text {
        background: #121F23 !important;
        border-color: #24383D !important;
        color: #10B981 !important;
    }

    [data-theme="dark"] #all_groups_popup #filter_main_groups_input,
    html.dark-style #all_groups_popup #filter_main_groups_input {
        background: #121F23 !important;
        border-color: #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #all_groups_popup #filter_main_groups_input::placeholder,
    html.dark-style #all_groups_popup #filter_main_groups_input::placeholder {
        color: #64748B !important;
    }

    /* ── Modal Pagination Dark Mode ── */
    [data-theme="dark"] .z4u-modal .pagination .page-link,
    html.dark-style .z4u-modal .pagination .page-link {
        background-color: #121F23 !important;
        border-color: #24383D !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] .z4u-modal .pagination .page-item.active .page-link,
    html.dark-style .z4u-modal .pagination .page-item.active .page-link {
        background-color: #10B981 !important;
        border-color: #10B981 !important;
        color: #FFFFFF !important;
    }

    [data-theme="dark"] .z4u-modal .pagination .page-item.disabled .page-link,
    html.dark-style .z4u-modal .pagination .page-item.disabled .page-link {
        background-color: #0A1214 !important;
        border-color: #1F2E33 !important;
        color: #64748B !important;
    }

/* ── Extracted from _BillModals.cshtml ── */
.btn-add-search-item {
                        width: 32px !important;
                        height: 32px !important;
                        min-width: 32px !important;
                        border-radius: 8px !important;
                        padding: 0 !important;
                        margin: 0 auto !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        background: #0E5B46 !important;
                        border: 1.5px solid #0E5B46 !important;
                        box-shadow: 0 2px 6px rgba(14, 91, 70, 0.25) !important;
                        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
                        cursor: pointer;
                    }
                    .btn-add-search-item:hover {
                        background: #08382B !important;
                        border-color: #08382B !important;
                        transform: translateY(-1px) scale(1.06) !important;
                        box-shadow: 0 4px 10px rgba(14, 91, 70, 0.35) !important;
                    }
                    .btn-add-search-item:active, .btn-add-search-item.btn-added-flash {
                        background: #10B981 !important;
                        border-color: #10B981 !important;
                        transform: scale(0.95) !important;
                    }
                    .btn-add-search-item i {
                        margin: 0 !important;
                        padding: 0 !important;
                        color: #ffffff !important;
                        font-size: 13px !important;
                        line-height: 1 !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                    }

/* ── Extracted from _LookupPartial.cshtml ── */
#add_customer_or_supplier_modal .input-group:focus-within {
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.15);
        border-radius: 8px;
    }
    #add_customer_or_supplier_modal .form-control.is-invalid {
        border-color: #DC2626 !important;
        background-color: #FEF2F2 !important;
    }
    #add_customer_or_supplier_modal .form-control.is-valid {
        border-color: #16A34A !important;
        background-color: #F0FDF4 !important;
    }

    /* Dark Mode Overrides */
    [data-theme="dark"] #add_customer_or_supplier_modal .modal-content,
    html.dark-style #add_customer_or_supplier_modal .modal-content {
        background-color: #121F23 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .modal-header,
    html.dark-style #add_customer_or_supplier_modal .modal-header {
        background: #16262B !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .modal-title,
    html.dark-style #add_customer_or_supplier_modal .modal-title {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .modal-header small,
    html.dark-style #add_customer_or_supplier_modal .modal-header small {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .btn-close,
    html.dark-style #add_customer_or_supplier_modal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%) !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .z4u-icon-badge,
    html.dark-style #add_customer_or_supplier_modal .z4u-icon-badge {
        background: rgba(16, 185, 129, 0.15) !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
        color: #10B981 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .modal-body,
    html.dark-style #add_customer_or_supplier_modal .modal-body {
        background: #0B1315 !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .form-label,
    html.dark-style #add_customer_or_supplier_modal .form-label {
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .input-group-text,
    html.dark-style #add_customer_or_supplier_modal .input-group-text {
        background: #0A1214 !important;
        border-color: #24383D !important;
        color: #10B981 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .form-control,
    html.dark-style #add_customer_or_supplier_modal .form-control {
        background: #0A1214 !important;
        border-color: #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .form-control.is-invalid,
    html.dark-style #add_customer_or_supplier_modal .form-control.is-invalid {
        border-color: #EF4444 !important;
        background-color: rgba(239, 68, 68, 0.15) !important;
        color: #FCA5A5 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .form-control.is-valid,
    html.dark-style #add_customer_or_supplier_modal .form-control.is-valid {
        border-color: #10B981 !important;
        background-color: rgba(16, 185, 129, 0.15) !important;
        color: #6EE7B7 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal div[style*="rgba(14, 91, 70, 0.05)"],
    html.dark-style #add_customer_or_supplier_modal div[style*="rgba(14, 91, 70, 0.05)"] {
        background: #121F23 !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
        color: #34D399 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .modal-footer,
    html.dark-style #add_customer_or_supplier_modal .modal-footer {
        background: #16262B !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .btn-light,
    html.dark-style #add_customer_or_supplier_modal .btn-light {
        background: #1A2D33 !important;
        border-color: #24383D !important;
        color: #CBD5E1 !important;
    }

    [data-theme="dark"] #add_customer_or_supplier_modal .btn-light:hover,
    html.dark-style #add_customer_or_supplier_modal .btn-light:hover {
        background: #24383D !important;
        color: #FFFFFF !important;
        border-color: #10B981 !important;
    }

/* ── Extracted from _SelectLanguagePartial.cshtml ── */
.dropdown.notification-list {
        list-style: none !important;
        position: relative !important;
        z-index: 10000 !important;
    }

    .dropdown-menu.dropdown-menu-end.profile-dropdown,
    .dropdown-menu.dropdown-menu-end.profile-dropdown.show {
        z-index: 99999 !important;
        position: absolute !important;
    }

    .topbar-dropdown {
        z-index: 10000 !important;
        position: relative !important;
    }

    #logoff {
        z-index: 1080 !important;
    }

    /* Text alignment for LTR direction - Apply to whole project */
    html[dir="ltr"] body:not(h1, h2, h3, h4, h5, h6) {
        text-align: left !important;
    }

   /*  html[dir="ltr"] body *:not(h1, h2, h3, h4, h5, h6) {
        text-align: end !important;
    } */

    html[dir="rtl"] table,
    html[dir="rtl"] table * {
        direction: rtl !important;
    }

    html[dir="ltr"] table,
    html[dir="ltr"] table * {
        direction: ltr !important;
    }

    .report-header h2 {
        text-align: center !important;
    }

    html[dir="rtl"] .tabulator-rtl .tabulator-header,
    html[dir="rtl"] .tabulator-rtl .tabulator-tableHolder {
        direction: rtl !important;
    }

    html[dir="ltr"] .tabulator-ltr .tabulator-header,
    html[dir="ltr"] .tabulator-ltr .tabulator-tableHolder {
        direction: ltr !important;
    }

    /* Language Change Loading Overlay */
    #language-loading-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(248, 250, 252, 0.88);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999999;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

        #language-loading-overlay.active {
            display: flex;
        }

    .language-spinner {
        width: 52px;
        height: 52px;
        border: 4px solid rgba(14, 91, 70, 0.14);
        border-top: 4px solid #0E5B46;
        border-right: 4px solid #10B981;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    .language-loading-text {
        margin-top: 18px;
        font-size: 15px;
        color: #0E5B46;
        font-weight: 700;
    }

    [data-theme="dark"] #language-loading-overlay,
    html.dark-style #language-loading-overlay {
        background: rgba(10, 20, 18, 0.88) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    [data-theme="dark"] .language-spinner,
    html.dark-style .language-spinner {
        border: 4px solid rgba(255, 255, 255, 0.08) !important;
        border-top: 4px solid #10B981 !important;
        border-right: 4px solid #34D399 !important;
        filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.5));
    }

    [data-theme="dark"] .language-loading-text,
    html.dark-style .language-loading-text {
        color: #F1F5F9 !important;
    }


    html[dir="rtl"] .tabulator-header-filter input {
        text-align: right !important;
    }

    html[dir="ltr"] .tabulator-header-filter input {
        text-align: left !important;
    }

    @* handle form     direction: ltr; *@
    html[dir="rtl"] form {
        direction: rtl !important;
    }

    html[dir="ltr"] form {
        direction: ltr !important;
    }

    .dropdown.notification-list .nav-user {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 8px;
        margin-right: 22px;
    }

    @* form-label *@
    html[dir="rtl"] .form-label {
        direction: rtl !important;
    }

    html[dir="ltr"] .form-label {
        direction: ltr !important;
    }

    @* btn direction *@
    html[dir="rtl"] button {
        direction: rtl !important;
    }

    html[dir="ltr"] button {
        direction: ltr !important;
    }

/* ── Extracted from _SidebarPartil.cshtml ── */
html[dir="ltr"] .menu-item.parent-menu > .menu-link > div {
        margin-left: 0 !important;
        margin-right: auto !important;
        display: flex !important;
    }

    /* Logo: white logo directly on dark sidebar */
    .sidebar-logo-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
    }

    .hesba-sidebar-logo {
        height: 44px;
        width: auto;
        max-width: 160px;
        border-radius: 8px;
        object-fit: contain;
    }

    .hesba-sidebar-logo-icon {
        display: none !important;
        width: 36px;
        height: 36px;
        object-fit: contain;
    }

    .hesba-floating-tooltip {
        display: none;
        position: fixed;
        z-index: 99999;
        background: #0E5B46;
        color: #F6E9D7;
        border: 1px solid #D4AF7C;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 0.82rem;
        font-family: 'Cairo', 'Tajawal', sans-serif;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    /* Floating Flyout Submenu for Collapsed Mode */
    .hesba-floating-flyout {
        display: none;
        position: fixed;
        z-index: 999999 !important;
        width: 280px;
        max-width: 90vw;
        background: #09372B;
        border: 1.5px solid rgba(212, 175, 124, 0.45);
        border-radius: 14px;
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
        overflow: hidden;
        flex-direction: column;
        direction: rtl;
        font-family: 'Cairo', 'Tajawal', sans-serif;
        animation: hesbaFlyoutFadeIn 0.16s ease-out;
    }

    html[dir="ltr"] .hesba-floating-flyout {
        direction: ltr;
    }

    @@keyframes hesbaFlyoutFadeIn {
        from { opacity: 0; transform: scale(0.96); }
        to { opacity: 1; transform: scale(1); }
    }

    /* Invisible Hitbox Bridge to prevent premature close when moving cursor between sidebar and flyout */
    .hesba-floating-flyout::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 25px;
    }
    html[dir="rtl"] .hesba-floating-flyout::before {
        right: -22px;
    }
    html[dir="ltr"] .hesba-floating-flyout::before {
        left: -22px;
    }

    .hesba-flyout-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: rgba(14, 91, 70, 0.7);
        border-bottom: 1px solid rgba(212, 175, 124, 0.25);
    }

    .hesba-flyout-title {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        color: #FFFFFF;
        font-weight: 700;
        font-size: 0.92rem;
    }

    .hesba-flyout-title i {
        font-size: 1.25rem;
        color: #D4AF7C;
        font-family: 'boxicons' !important;
    }

    .hesba-flyout-badge {
        font-size: 0.72rem;
        font-weight: 600;
        padding: 0.15rem 0.5rem;
        border-radius: 20px;
        background: rgba(212, 175, 124, 0.2);
        color: #D4AF7C;
        border: 1px solid rgba(212, 175, 124, 0.35);
    }

    .hesba-flyout-body {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        padding: 0.5rem;
    }

    .hesba-flyout-body::-webkit-scrollbar {
        width: 5px;
    }
    .hesba-flyout-body::-webkit-scrollbar-thumb {
        background: rgba(212, 175, 124, 0.35) !important;
        border-radius: 4px !important;
    }

    .hesba-flyout-body .menu-sub {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    .hesba-flyout-body .menu-item {
        list-style: none !important;
        margin-bottom: 3px !important;
    }

    .hesba-flyout-body .menu-link {
        display: flex !important;
        align-items: center !important;
        gap: 0.65rem !important;
        padding: 0.55rem 0.75rem !important;
        color: rgba(255, 255, 255, 0.88) !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        transition: all 0.15s ease !important;
    }

    .hesba-flyout-body .menu-link:hover {
        background: rgba(212, 175, 124, 0.2) !important;
        color: #FFFFFF !important;
        transform: translateX(-3px);
    }

    html[dir="ltr"] .hesba-flyout-body .menu-link:hover {
        transform: translateX(3px);
    }

    .hesba-flyout-body .menu-link i.menu-icon {
        font-size: 1.15rem !important;
        color: #D4AF7C !important;
        width: 22px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        font-family: 'boxicons' !important;
        display: inline-block !important;
    }

    .hesba-flyout-body .menu-link div {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        color: inherit !important;
        font-size: 0.84rem !important;
        white-space: normal !important;
    }

    .hesba-flyout-body .menu-item.parent-menu > .menu-link {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 6px;
        margin-bottom: 2px;
        color: #D4AF7C !important;
        font-weight: 700 !important;
    }

    .hesba-flyout-body .menu-item.parent-menu > .menu-link {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 6px;
        margin-bottom: 2px;
        color: #D4AF7C !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        position: relative !important;
        user-select: none !important;
    }

    .hesba-flyout-body .menu-item.parent-menu > .menu-link::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        width: 0.42em !important;
        height: 0.42em !important;
        border-style: solid !important;
        border-color: #D4AF7C !important;
        transition: transform 0.2s ease, border-color 0.2s ease !important;
    }

    html[dir="rtl"] .hesba-flyout-body .menu-item.parent-menu > .menu-link::after {
        left: 0.85rem !important;
        right: auto !important;
        border-width: 1.5px 0 0 1.5px !important;
        transform: translateY(-50%) rotate(-45deg) !important;
    }

    html[dir="ltr"] .hesba-flyout-body .menu-item.parent-menu > .menu-link::after {
        right: 0.85rem !important;
        left: auto !important;
        border-width: 1.5px 1.5px 0 0 !important;
        transform: translateY(-50%) rotate(45deg) !important;
    }

    html[dir="rtl"] .hesba-flyout-body .menu-item.parent-menu.open > .menu-link::after {
        transform: translateY(-50%) rotate(-135deg) !important;
        border-color: #10B981 !important;
    }

    html[dir="ltr"] .hesba-flyout-body .menu-item.parent-menu.open > .menu-link::after {
        transform: translateY(-50%) rotate(135deg) !important;
        border-color: #10B981 !important;
    }

    .hesba-flyout-body .menu-item.parent-menu > .menu-sub {
        display: none !important;
        padding-inline-start: 10px !important;
        border-inline-start: 2px solid rgba(212, 175, 124, 0.35) !important;
        margin-bottom: 6px !important;
    }

    .hesba-flyout-body .menu-item.parent-menu.open > .menu-sub {
        display: block !important;
        animation: hesbaFlyoutSubSlide 0.2s ease forwards !important;
    }

    @keyframes hesbaFlyoutSubSlide {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }

/* ── Extracted from _Layout.cshtml ── */
.menu-link {
            text-decoration: none !important
        }

/* ── Extracted from _ReportLayout.cshtml (Unified with Brand Identity Preloader) ── */

        .labels-container {
            background: linear-gradient(135deg, #0E5B46 0%, #083C2E 100%);
            padding: 12px 18px;
            border: 1px solid rgba(212, 175, 124, 0.35);
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            color: #fff;
            box-shadow: 0 4px 14px rgba(14, 91, 70, 0.12);
        }

        .label {
            text-align: center;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
        }

        .label-title, .label-value {
            flex: 1;
            text-align: center;
            white-space: nowrap;
        }

        .label-title {
            font-weight: bold;
            margin-right: 10px;
        }


/* ===================================================================
 * ── CENTRALIZED HR & OPERATIONS STYLES ──
 * =================================================================== */

/* ── Extracted from HR/DailyAttendance.cshtml ── */
.filter-card {
        background: var(--color-background-primary, #ffffff);
        border: 0.5px solid var(--color-border-tertiary, #e2e8f0);
        border-radius: var(--border-radius-lg, 12px);
        padding: 12px 16px;
        margin-bottom: 12px;
    }

    .table-card {
        background: var(--color-background-primary, #ffffff);
        border: 0.5px solid #DBE4F3;
        border-radius: var(--border-radius-lg, 12px);
        padding: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tbl-input {
        width: 100%;
        border: none;
        background: transparent;
        font-size: 12px;
        outline: none;
    }

    html:not(.dark-style):not([data-theme="dark"]) .tbl-input:focus {
        background: #fffbe6;
        border-radius: 3px;
    }

    [data-theme="dark"] .filter-card,
    [data-theme="dark"] .table-card,
    html.dark-style .filter-card,
    html.dark-style .table-card {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #E2E8F0 !important;
    }

    [data-theme="dark"] .tbl-input,
    html.dark-style .tbl-input {
        color: #E2E8F0 !important;
    }

    [data-theme="dark"] .tbl-input:focus,
    html.dark-style .tbl-input:focus {
        background: #16262B !important;
        color: #34D399 !important;
        border-radius: 4px;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    }

/* ── Extracted from HR/EmpPaymentDetails.cshtml ── */
#reportTable .tabulator {
        width: 100% !important;
    }

    .tabulator .tabulator-tableholder {
        overflow-x: auto !important;
    }

/* ── Extracted from HR/GetEmpList.cshtml ── */
.print-options-bar {
        background: var(--color-background-primary, #ffffff);
        border: 0.5px solid var(--color-border-tertiary, #e2e8f0);
        border-radius: var(--border-radius-lg, 12px);
        padding: 10px 16px;
        margin-bottom: 10px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .print-options-bar .form-check-label {
        font-size: 12px;
    }

    [data-theme="dark"] .print-options-bar,
    html.dark-style .print-options-bar {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #E2E8F0 !important;
    }

    [data-theme="dark"] .print-options-bar .form-check-label,
    html.dark-style .print-options-bar .form-check-label {
        color: #E2E8F0 !important;
    }

/* ── Extracted from HR/QuickIn.cshtml ── */
/* ==========================================================================
       EXECUTIVE PUNCH STATION STYLES (Z4U CORPORATE IDENTITY)
       ========================================================================== */
    :root {
        --station-primary: #0E5B46;
        --station-primary-dark: #08382B;
        --station-primary-light: #158064;
        --station-gold: #D4AF7C;
        --station-gold-hover: #b89360;
        --station-bg-canvas: #FAF8F5;
        --station-border: #E2E8F0;
    }

    /* Mode Switcher Segmented Bar */
    .station-nav-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #FFFFFF;
        border: 1.5px solid var(--station-border);
        border-radius: 12px;
        padding: 0.5rem 0.75rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 2px 8px rgba(14, 91, 70, 0.03);
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .station-segmented-pills {
        display: inline-flex;
        background: #F1F5F9;
        padding: 0.3rem;
        border-radius: 10px;
        gap: 0.35rem;
    }

    .station-pill-item {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.45rem 1rem;
        border-radius: 8px;
        font-size: 0.84rem;
        font-weight: 700;
        text-decoration: none !important;
        transition: all 0.2s ease;
        color: #64748B;
        cursor: pointer;
    }

    .station-pill-item.active-in {
        background: var(--station-primary);
        color: #FFFFFF !important;
        box-shadow: 0 3px 10px rgba(14, 91, 70, 0.28);
        cursor: default;
    }

    .station-pill-item.active-out {
        background: #DC2626;
        color: #FFFFFF !important;
        box-shadow: 0 3px 10px rgba(220, 38, 38, 0.28);
        cursor: default;
    }

    .station-pill-item.out-link:hover {
        background: #FEE2E2;
        color: #DC2626 !important;
    }

    .station-pill-item.in-link:hover {
        background: rgba(14, 91, 70, 0.1);
        color: var(--station-primary) !important;
    }

    .station-shift-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--station-primary);
        background: rgba(14, 91, 70, 0.07);
        border: 1px solid rgba(14, 91, 70, 0.15);
        padding: 0.35rem 0.85rem;
        border-radius: 8px;
    }

    /* Executive Luxury Clock Card */
    .executive-clock-card {
        background: linear-gradient(145deg, #0A4334 0%, #06281F 100%);
        border: 1.5px solid rgba(212, 175, 124, 0.35);
        border-radius: 16px;
        padding: 1.5rem 1.25rem;
        color: #FFFFFF;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(10, 67, 52, 0.18);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        min-height: 280px;
    }

    .executive-clock-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 140px;
        height: 140px;
        background: radial-gradient(circle, rgba(212, 175, 124, 0.18) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .executive-clock-card::after {
        content: "";
        position: absolute;
        bottom: -40px;
        left: -40px;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .clock-station-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #D4AF7C;
        background: rgba(212, 175, 124, 0.12);
        padding: 0.3rem 0.75rem;
        border-radius: 20px;
        border: 1px solid rgba(212, 175, 124, 0.25);
        align-self: flex-start;
    }

    .clock-station-dot {
        width: 7px;
        height: 7px;
        background: #10B981;
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
        animation: clockPulse 2s infinite ease-in-out;
    }

    @@keyframes clockPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.3); opacity: 0.6; }
    }

    .clock-digits-display {
        text-align: center;
        padding: 0.75rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .clock-time-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        direction: ltr; /* Keeps HH:MM:SS format strictly readable */
    }

    .clock-main-time {
        font-family: 'Courier New', Courier, monospace;
        font-size: 2.85rem;
        font-weight: 800;
        letter-spacing: 2.5px;
        color: #FFFFFF;
        text-shadow: 0 0 20px rgba(16, 185, 129, 0.45);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .clock-period-badge {
        font-family: 'Cairo', 'Tajawal', sans-serif;
        font-size: 0.95rem;
        font-weight: 800;
        color: #D4AF7C;
        background: rgba(212, 175, 124, 0.15);
        border: 1px solid rgba(212, 175, 124, 0.35);
        border-radius: 8px;
        padding: 0.3rem 0.65rem;
        letter-spacing: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .clock-main-date {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.92);
        font-weight: 700;
        margin-top: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        font-family: 'Cairo', 'Tajawal', sans-serif;
    }

    .clock-shift-pill {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 10px;
        padding: 0.55rem 0.85rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Executive Punch Console Card */
    .punch-console-card {
        background: #FFFFFF;
        border: 1.5px solid var(--station-border);
        border-radius: 16px;
        padding: 1.4rem;
        box-shadow: 0 6px 24px rgba(14, 91, 70, 0.04);
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .punch-console-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid #F1F5F9;
    }

    .punch-console-icon {
        width: 44px;
        height: 44px;
        background: rgba(14, 91, 70, 0.08);
        color: var(--station-primary);
        border: 1px solid rgba(14, 91, 70, 0.15);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .punch-console-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0F172A;
        margin: 0;
    }

    .punch-console-subtitle {
        font-size: 0.78rem;
        color: #64748B;
        margin: 0;
    }

    /* Custom Form Fields */
    .station-field-label {
        font-size: 0.82rem;
        font-weight: 700;
        color: #1E293B;
        margin-bottom: 0.35rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .station-field-label i {
        color: var(--station-primary);
        font-size: 0.85rem;
    }

    .station-textarea {
        border: 1.5px solid #CBD5E1;
        border-radius: 10px;
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
        transition: all 0.2s ease;
        resize: none;
        background-color: #FAFAFA;
    }

    .station-textarea:focus {
        border-color: var(--station-primary);
        background-color: #FFFFFF;
        box-shadow: 0 0 0 3.5px rgba(14, 91, 70, 0.12);
        outline: none;
    }

    /* Employee preview card */
    .emp-preview-pill {
        display: none;
        background: #F0FDF4;
        border: 1px solid #BBF7D0;
        border-radius: 8px;
        padding: 0.4rem 0.75rem;
        margin-top: 0.4rem;
        font-size: 0.78rem;
        color: #166534;
        font-weight: 700;
        align-items: center;
        gap: 0.5rem;
    }

    /* Action Punch Button */
    .btn-executive-punch {
        background: linear-gradient(135deg, #0E5B46 0%, #158064 100%);
        color: #FFFFFF !important;
        border: 1.5px solid #D4AF7C;
        border-radius: 12px;
        padding: 0.85rem 1.6rem;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        box-shadow: 0 6px 20px rgba(14, 91, 70, 0.25);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
        width: 100%;
    }

    .btn-executive-punch:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(14, 91, 70, 0.35);
        background: linear-gradient(135deg, #08382B 0%, #0E5B46 100%);
    }

    .btn-executive-punch:active {
        transform: translateY(0);
    }

    .btn-executive-reset {
        background: #FFFFFF;
        color: #64748B;
        border: 1.5px solid #CBD5E1;
        border-radius: 12px;
        padding: 0.7rem 1.25rem;
        font-size: 0.86rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .btn-executive-reset:hover {
        background: #F8FAFC;
        color: #0F172A;
        border-color: #94A3B8;
    }

    /* KPI Mini Cards Row */
    .station-kpi-card {
        background: #FFFFFF;
        border: 1.5px solid var(--station-border);
        border-radius: 14px;
        padding: 1rem 1.2rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
        transition: transform 0.2s ease;
    }

    .station-kpi-card:hover {
        transform: translateY(-2px);
    }

    .station-kpi-icon-box {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
    }

    .station-kpi-title {
        font-size: 0.78rem;
        font-weight: 700;
        color: #64748B;
        margin-bottom: 0.2rem;
    }

    .station-kpi-value {
        font-size: 1.45rem;
        font-weight: 900;
        color: #0F172A;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    /* Attendance Log Card */
    .attendance-log-card {
        background: #FFFFFF;
        border: 1.5px solid var(--station-border);
        border-radius: 16px;
        padding: 1.25rem;
        box-shadow: 0 6px 20px rgba(14, 91, 70, 0.03);
    }

    .attendance-log-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid #F1F5F9;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .attendance-log-title {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 1rem;
        font-weight: 800;
        color: #0F172A;
        margin: 0;
    }

    .attendance-filter-input {
        border: 1.5px solid #CBD5E1;
        border-radius: 8px;
        padding: 0.38rem 0.75rem;
        font-size: 0.82rem;
        min-width: 220px;
        transition: all 0.2s ease;
    }

    .attendance-filter-input:focus {
        border-color: var(--station-primary);
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.1);
        outline: none;
    }

    /* Attendance Table Custom Badges */
    .badge-emp-code {
        background: #F1F5F9;
        color: #0F172A;
        font-family: monospace;
        font-size: 0.85rem;
        border: 1px solid #CBD5E1;
    }

    .emp-name-cell {
        color: #0F172A;
        font-weight: 700;
    }

    .badge-time-in {
        background: rgba(14, 91, 70, 0.1);
        color: #0E5B46;
        font-size: 0.82rem;
        font-weight: 800;
        border: 1px solid rgba(14, 91, 70, 0.2);
    }

    .badge-time-out-active {
        background: rgba(2, 132, 199, 0.08);
        color: #0284C7;
        font-size: 0.78rem;
        font-weight: 700;
        border: 1px solid rgba(2, 132, 199, 0.2);
    }

    .badge-time-out-done {
        background: rgba(220, 38, 38, 0.08);
        color: #DC2626;
        font-size: 0.82rem;
        font-weight: 800;
        border: 1px solid rgba(220, 38, 38, 0.2);
    }

    .badge-status-inside {
        background: #DCFCE7;
        color: #15803D;
        font-weight: 800;
        border-radius: 20px;
        padding: 0.3rem 0.65rem;
    }

    .badge-status-out {
        background: #F1F5F9;
        color: #64748B;
        font-weight: 700;
        border-radius: 20px;
        padding: 0.3rem 0.65rem;
    }

    /* Select2 Executive Tweaks (Light Mode) */
    html:not(.dark-style):not([data-theme="dark"]) .select2-container--default .select2-selection--single {
        border: 1.5px solid #CBD5E1 !important;
        border-radius: 10px !important;
        height: 42px !important;
        padding: 6px 10px !important;
        background-color: #FAFAFA !important;
    }

    html:not(.dark-style):not([data-theme="dark"]) .select2-container--default.select2-container--open .select2-selection--single,
    html:not(.dark-style):not([data-theme="dark"]) .select2-container--default .select2-selection--single:focus {
        border-color: var(--station-primary) !important;
        box-shadow: 0 0 0 3.5px rgba(14, 91, 70, 0.12) !important;
        background-color: #FFFFFF !important;
    }

    html:not(.dark-style):not([data-theme="dark"]) .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
        font-weight: 700 !important;
        color: #0F172A !important;
    }

    /* Dark Mode Overrides for Punch Station */
    [data-theme="dark"] .station-nav-bar,
    html.dark-style .station-nav-bar {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .station-segmented-pills,
    html.dark-style .station-segmented-pills {
        background: #0A1214 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] .station-pill-item,
    html.dark-style .station-pill-item {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .station-shift-badge,
    html.dark-style .station-shift-badge {
        color: #34D399 !important;
        background: rgba(16, 185, 129, 0.12) !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .punch-console-card,
    html.dark-style .punch-console-card {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .punch-console-header,
    html.dark-style .punch-console-header {
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] .punch-console-icon,
    html.dark-style .punch-console-icon {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #34D399 !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .punch-console-title,
    html.dark-style .punch-console-title {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .punch-console-subtitle,
    html.dark-style .punch-console-subtitle {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .station-field-label,
    html.dark-style .station-field-label {
        color: #E2E8F0 !important;
    }

    [data-theme="dark"] .station-field-label i,
    html.dark-style .station-field-label i {
        color: #34D399 !important;
    }

    [data-theme="dark"] .station-textarea,
    html.dark-style .station-textarea {
        background-color: #0A1214 !important;
        border: 1.5px solid #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .station-textarea:focus,
    html.dark-style .station-textarea:focus {
        background-color: #0E181B !important;
        border-color: #10B981 !important;
        box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.18) !important;
    }

    [data-theme="dark"] .btn-executive-reset,
    html.dark-style .btn-executive-reset {
        background: #0E181B !important;
        color: #94A3B8 !important;
        border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    }

    [data-theme="dark"] .btn-executive-reset:hover,
    html.dark-style .btn-executive-reset:hover {
        background: #16262B !important;
        color: #F1F5F9 !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }

    [data-theme="dark"] .station-kpi-card,
    html.dark-style .station-kpi-card {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .station-kpi-title,
    html.dark-style .station-kpi-title {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .station-kpi-value,
    html.dark-style .station-kpi-value {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .attendance-log-card,
    html.dark-style .attendance-log-card {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .attendance-log-header,
    html.dark-style .attendance-log-header {
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] .attendance-log-title,
    html.dark-style .attendance-log-title {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .attendance-log-title i,
    html.dark-style .attendance-log-title i {
        color: #34D399 !important;
    }

    [data-theme="dark"] #logCountBadge,
    html.dark-style #logCountBadge {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #34D399 !important;
        border: 1px solid rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .attendance-filter-input,
    html.dark-style .attendance-filter-input {
        background: #0A1214 !important;
        border: 1.5px solid #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .attendance-filter-input:focus,
    html.dark-style .attendance-filter-input:focus {
        background: #0E181B !important;
        border-color: #10B981 !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
    }

    [data-theme="dark"] .attendance-log-card #btnRefreshLog,
    html.dark-style .attendance-log-card #btnRefreshLog {
        background: #0E181B !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .attendance-log-card #btnRefreshLog:hover,
    html.dark-style .attendance-log-card #btnRefreshLog:hover {
        background: #16262B !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .badge-emp-code,
    html.dark-style .badge-emp-code {
        background: #0A1214 !important;
        color: #E2E8F0 !important;
        border-color: #24383D !important;
    }

    [data-theme="dark"] .emp-name-cell,
    html.dark-style .emp-name-cell {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .badge-time-in,
    html.dark-style .badge-time-in {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #34D399 !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .badge-time-out-active,
    html.dark-style .badge-time-out-active {
        background: rgba(56, 189, 248, 0.12) !important;
        color: #38BDF8 !important;
        border-color: rgba(56, 189, 248, 0.25) !important;
    }

    [data-theme="dark"] .badge-time-out-done,
    html.dark-style .badge-time-out-done {
        background: rgba(239, 68, 68, 0.12) !important;
        color: #F87171 !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
    }

    [data-theme="dark"] .badge-status-inside,
    html.dark-style .badge-status-inside {
        background: rgba(16, 185, 129, 0.15) !important;
        color: #34D399 !important;
        border: 1px solid rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .badge-status-out,
    html.dark-style .badge-status-out {
        background: #16262B !important;
        color: #94A3B8 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    [data-theme="dark"] .select2-container--default .select2-selection--single,
    html.dark-style .select2-container--default .select2-selection--single {
        border: 1.5px solid #24383D !important;
        border-radius: 10px !important;
        height: 42px !important;
        padding: 6px 10px !important;
        background-color: #0A1214 !important;
    }

    [data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
    [data-theme="dark"] .select2-container--default .select2-selection--single:focus,
    html.dark-style .select2-container--default.select2-container--open .select2-selection--single,
    html.dark-style .select2-container--default .select2-selection--single:focus {
        border-color: #10B981 !important;
        box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.18) !important;
        background-color: #0E181B !important;
    }

    [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
    html.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
        font-weight: 700 !important;
        color: #F1F5F9 !important;
    }

/* ── Extracted from HR/QuickOut.cshtml ── */
/* ==========================================================================
       EXECUTIVE PUNCH STATION STYLES (Z4U CORPORATE IDENTITY)
       ========================================================================== */
    :root {
        --station-primary: #0E5B46;
        --station-primary-dark: #08382B;
        --station-primary-light: #158064;
        --station-gold: #D4AF7C;
        --station-gold-hover: #b89360;
        --station-bg-canvas: #FAF8F5;
        --station-border: #E2E8F0;
    }

    /* Mode Switcher Segmented Bar */
    .station-nav-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #FFFFFF;
        border: 1.5px solid var(--station-border);
        border-radius: 12px;
        padding: 0.5rem 0.75rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 2px 8px rgba(14, 91, 70, 0.03);
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .station-segmented-pills {
        display: inline-flex;
        background: #F1F5F9;
        padding: 0.3rem;
        border-radius: 10px;
        gap: 0.35rem;
    }

    .station-pill-item {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.45rem 1rem;
        border-radius: 8px;
        font-size: 0.84rem;
        font-weight: 700;
        text-decoration: none !important;
        transition: all 0.2s ease;
        color: #64748B;
        cursor: pointer;
    }

    .station-pill-item.active-in {
        background: var(--station-primary);
        color: #FFFFFF !important;
        box-shadow: 0 3px 10px rgba(14, 91, 70, 0.28);
        cursor: default;
    }

    .station-pill-item.active-out {
        background: #DC2626;
        color: #FFFFFF !important;
        box-shadow: 0 3px 10px rgba(220, 38, 38, 0.28);
        cursor: default;
    }

    .station-pill-item.out-link:hover {
        background: #FEE2E2;
        color: #DC2626 !important;
    }

    .station-pill-item.in-link:hover {
        background: rgba(14, 91, 70, 0.1);
        color: var(--station-primary) !important;
    }

    .station-shift-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--station-primary);
        background: rgba(14, 91, 70, 0.07);
        border: 1px solid rgba(14, 91, 70, 0.15);
        padding: 0.35rem 0.85rem;
        border-radius: 8px;
    }

    /* Executive Luxury Clock Card */
    .executive-clock-card {
        background: linear-gradient(145deg, #0A4334 0%, #06281F 100%);
        border: 1.5px solid rgba(212, 175, 124, 0.35);
        border-radius: 16px;
        padding: 1.5rem 1.25rem;
        color: #FFFFFF;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(10, 67, 52, 0.18);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        min-height: 280px;
    }

    .executive-clock-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 140px;
        height: 140px;
        background: radial-gradient(circle, rgba(212, 175, 124, 0.18) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .executive-clock-card::after {
        content: "";
        position: absolute;
        bottom: -40px;
        left: -40px;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .clock-station-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #D4AF7C;
        background: rgba(212, 175, 124, 0.12);
        padding: 0.3rem 0.75rem;
        border-radius: 20px;
        border: 1px solid rgba(212, 175, 124, 0.25);
        align-self: flex-start;
    }

    .clock-station-dot {
        width: 7px;
        height: 7px;
        background: #10B981;
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
        animation: clockPulse 2s infinite ease-in-out;
    }

    @@keyframes clockPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.3); opacity: 0.6; }
    }

    .clock-digits-display {
        text-align: center;
        padding: 0.75rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .clock-time-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        direction: ltr; /* Keeps HH:MM:SS format strictly readable */
    }

    .clock-main-time {
        font-family: 'Courier New', Courier, monospace;
        font-size: 2.85rem;
        font-weight: 800;
        letter-spacing: 2.5px;
        color: #FFFFFF;
        text-shadow: 0 0 20px rgba(16, 185, 129, 0.45);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .clock-period-badge {
        font-family: 'Cairo', 'Tajawal', sans-serif;
        font-size: 0.95rem;
        font-weight: 800;
        color: #D4AF7C;
        background: rgba(212, 175, 124, 0.15);
        border: 1px solid rgba(212, 175, 124, 0.35);
        border-radius: 8px;
        padding: 0.3rem 0.65rem;
        letter-spacing: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .clock-main-date {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.92);
        font-weight: 700;
        margin-top: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        font-family: 'Cairo', 'Tajawal', sans-serif;
    }

    .clock-shift-pill {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 10px;
        padding: 0.55rem 0.85rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Executive Punch Console Card */
    .punch-console-card {
        background: #FFFFFF;
        border: 1.5px solid var(--station-border);
        border-radius: 16px;
        padding: 1.4rem;
        box-shadow: 0 6px 24px rgba(14, 91, 70, 0.04);
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .punch-console-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid #F1F5F9;
    }

    .punch-console-icon {
        width: 44px;
        height: 44px;
        background: rgba(14, 91, 70, 0.08);
        color: var(--station-primary);
        border: 1px solid rgba(14, 91, 70, 0.15);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .punch-console-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0F172A;
        margin: 0;
    }

    .punch-console-subtitle {
        font-size: 0.78rem;
        color: #64748B;
        margin: 0;
    }

    /* Custom Form Fields */
    .station-field-label {
        font-size: 0.82rem;
        font-weight: 700;
        color: #1E293B;
        margin-bottom: 0.35rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .station-field-label i {
        color: var(--station-primary);
        font-size: 0.85rem;
    }

    .station-textarea {
        border: 1.5px solid #CBD5E1;
        border-radius: 10px;
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
        transition: all 0.2s ease;
        resize: none;
        background-color: #FAFAFA;
    }

    .station-textarea:focus {
        border-color: var(--station-primary);
        background-color: #FFFFFF;
        box-shadow: 0 0 0 3.5px rgba(14, 91, 70, 0.12);
        outline: none;
    }

    /* Employee preview card */
    .emp-preview-pill {
        display: none;
        background: #F0FDF4;
        border: 1px solid #BBF7D0;
        border-radius: 8px;
        padding: 0.4rem 0.75rem;
        margin-top: 0.4rem;
        font-size: 0.78rem;
        color: #166534;
        font-weight: 700;
        align-items: center;
        gap: 0.5rem;
    }

    /* Action Punch Button */
    .btn-executive-punch {
        background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
        color: #FFFFFF !important;
        border: 1.5px solid #FCA5A5;
        border-radius: 12px;
        padding: 0.85rem 1.6rem;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.25);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
        width: 100%;
    }

    .btn-executive-punch:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(220, 38, 38, 0.35);
        background: linear-gradient(135deg, #991B1B 0%, #DC2626 100%);
    }

    .btn-executive-punch:active {
        transform: translateY(0);
    }

    .btn-executive-reset {
        background: #FFFFFF;
        color: #64748B;
        border: 1.5px solid #CBD5E1;
        border-radius: 12px;
        padding: 0.7rem 1.25rem;
        font-size: 0.86rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .btn-executive-reset:hover {
        background: #F8FAFC;
        color: #0F172A;
        border-color: #94A3B8;
    }

    /* KPI Mini Cards Row */
    .station-kpi-card {
        background: #FFFFFF;
        border: 1.5px solid var(--station-border);
        border-radius: 14px;
        padding: 1rem 1.2rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
        transition: transform 0.2s ease;
    }

    .station-kpi-card:hover {
        transform: translateY(-2px);
    }

    .station-kpi-icon-box {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
    }

    .station-kpi-title {
        font-size: 0.78rem;
        font-weight: 700;
        color: #64748B;
        margin-bottom: 0.2rem;
    }

    .station-kpi-value {
        font-size: 1.45rem;
        font-weight: 900;
        color: #0F172A;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    /* Attendance Log Card */
    .attendance-log-card {
        background: #FFFFFF;
        border: 1.5px solid var(--station-border);
        border-radius: 16px;
        padding: 1.25rem;
        box-shadow: 0 6px 20px rgba(14, 91, 70, 0.03);
    }

    .attendance-log-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid #F1F5F9;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .attendance-log-title {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 1rem;
        font-weight: 800;
        color: #0F172A;
        margin: 0;
    }

    .attendance-filter-input {
        border: 1.5px solid #CBD5E1;
        border-radius: 8px;
        padding: 0.38rem 0.75rem;
        font-size: 0.82rem;
        min-width: 220px;
        transition: all 0.2s ease;
    }

    .attendance-filter-input:focus {
        border-color: var(--station-primary);
        box-shadow: 0 0 0 3px rgba(14, 91, 70, 0.1);
        outline: none;
    }

    /* Attendance Table Custom Badges */
    .badge-emp-code {
        background: #F1F5F9;
        color: #0F172A;
        font-family: monospace;
        font-size: 0.85rem;
        border: 1px solid #CBD5E1;
    }

    .emp-name-cell {
        color: #0F172A;
        font-weight: 700;
    }

    .badge-time-in {
        background: rgba(14, 91, 70, 0.1);
        color: #0E5B46;
        font-size: 0.82rem;
        font-weight: 800;
        border: 1px solid rgba(14, 91, 70, 0.2);
    }

    .badge-time-out-active {
        background: rgba(2, 132, 199, 0.08);
        color: #0284C7;
        font-size: 0.78rem;
        font-weight: 700;
        border: 1px solid rgba(2, 132, 199, 0.2);
    }

    .badge-time-out-done {
        background: rgba(220, 38, 38, 0.08);
        color: #DC2626;
        font-size: 0.82rem;
        font-weight: 800;
        border: 1px solid rgba(220, 38, 38, 0.2);
    }

    .badge-status-inside {
        background: #DCFCE7;
        color: #15803D;
        font-weight: 800;
        border-radius: 20px;
        padding: 0.3rem 0.65rem;
    }

    .badge-status-out {
        background: #F1F5F9;
        color: #64748B;
        font-weight: 700;
        border-radius: 20px;
        padding: 0.3rem 0.65rem;
    }

    /* Select2 Executive Tweaks (Light Mode) */
    html:not(.dark-style):not([data-theme="dark"]) .select2-container--default .select2-selection--single {
        border: 1.5px solid #CBD5E1 !important;
        border-radius: 10px !important;
        height: 42px !important;
        padding: 6px 10px !important;
        background-color: #FAFAFA !important;
    }

    html:not(.dark-style):not([data-theme="dark"]) .select2-container--default.select2-container--open .select2-selection--single,
    html:not(.dark-style):not([data-theme="dark"]) .select2-container--default .select2-selection--single:focus {
        border-color: var(--station-primary) !important;
        box-shadow: 0 0 0 3.5px rgba(14, 91, 70, 0.12) !important;
        background-color: #FFFFFF !important;
    }

    html:not(.dark-style):not([data-theme="dark"]) .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
        font-weight: 700 !important;
        color: #0F172A !important;
    }

    /* Dark Mode Overrides for Punch Station */
    [data-theme="dark"] .station-nav-bar,
    html.dark-style .station-nav-bar {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .station-segmented-pills,
    html.dark-style .station-segmented-pills {
        background: #0A1214 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] .station-pill-item,
    html.dark-style .station-pill-item {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .station-shift-badge,
    html.dark-style .station-shift-badge {
        color: #34D399 !important;
        background: rgba(16, 185, 129, 0.12) !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .punch-console-card,
    html.dark-style .punch-console-card {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .punch-console-header,
    html.dark-style .punch-console-header {
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] .punch-console-icon,
    html.dark-style .punch-console-icon {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #34D399 !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .punch-console-title,
    html.dark-style .punch-console-title {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .punch-console-subtitle,
    html.dark-style .punch-console-subtitle {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .station-field-label,
    html.dark-style .station-field-label {
        color: #E2E8F0 !important;
    }

    [data-theme="dark"] .station-field-label i,
    html.dark-style .station-field-label i {
        color: #34D399 !important;
    }

    [data-theme="dark"] .station-textarea,
    html.dark-style .station-textarea {
        background-color: #0A1214 !important;
        border: 1.5px solid #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .station-textarea:focus,
    html.dark-style .station-textarea:focus {
        background-color: #0E181B !important;
        border-color: #10B981 !important;
        box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.18) !important;
    }

    [data-theme="dark"] .btn-executive-reset,
    html.dark-style .btn-executive-reset {
        background: #0E181B !important;
        color: #94A3B8 !important;
        border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    }

    [data-theme="dark"] .btn-executive-reset:hover,
    html.dark-style .btn-executive-reset:hover {
        background: #16262B !important;
        color: #F1F5F9 !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }

    [data-theme="dark"] .station-kpi-card,
    html.dark-style .station-kpi-card {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .station-kpi-title,
    html.dark-style .station-kpi-title {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .station-kpi-value,
    html.dark-style .station-kpi-value {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .attendance-log-card,
    html.dark-style .attendance-log-card {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .attendance-log-header,
    html.dark-style .attendance-log-header {
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }

    [data-theme="dark"] .attendance-log-title,
    html.dark-style .attendance-log-title {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .attendance-log-title i,
    html.dark-style .attendance-log-title i {
        color: #34D399 !important;
    }

    [data-theme="dark"] #logCountBadge,
    html.dark-style #logCountBadge {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #34D399 !important;
        border: 1px solid rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .attendance-filter-input,
    html.dark-style .attendance-filter-input {
        background: #0A1214 !important;
        border: 1.5px solid #24383D !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .attendance-filter-input:focus,
    html.dark-style .attendance-filter-input:focus {
        background: #0E181B !important;
        border-color: #10B981 !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
    }

    [data-theme="dark"] .attendance-log-card #btnRefreshLog,
    html.dark-style .attendance-log-card #btnRefreshLog {
        background: #0E181B !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .attendance-log-card #btnRefreshLog:hover,
    html.dark-style .attendance-log-card #btnRefreshLog:hover {
        background: #16262B !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .badge-emp-code,
    html.dark-style .badge-emp-code {
        background: #0A1214 !important;
        color: #E2E8F0 !important;
        border-color: #24383D !important;
    }

    [data-theme="dark"] .emp-name-cell,
    html.dark-style .emp-name-cell {
        color: #F1F5F9 !important;
    }

    [data-theme="dark"] .badge-time-in,
    html.dark-style .badge-time-in {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #34D399 !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .badge-time-out-active,
    html.dark-style .badge-time-out-active {
        background: rgba(56, 189, 248, 0.12) !important;
        color: #38BDF8 !important;
        border-color: rgba(56, 189, 248, 0.25) !important;
    }

    [data-theme="dark"] .badge-time-out-done,
    html.dark-style .badge-time-out-done {
        background: rgba(239, 68, 68, 0.12) !important;
        color: #F87171 !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
    }

    [data-theme="dark"] .badge-status-inside,
    html.dark-style .badge-status-inside {
        background: rgba(16, 185, 129, 0.15) !important;
        color: #34D399 !important;
        border: 1px solid rgba(16, 185, 129, 0.25) !important;
    }

    [data-theme="dark"] .badge-status-out,
    html.dark-style .badge-status-out {
        background: #16262B !important;
        color: #94A3B8 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    [data-theme="dark"] .select2-container--default .select2-selection--single,
    html.dark-style .select2-container--default .select2-selection--single {
        border: 1.5px solid #24383D !important;
        border-radius: 10px !important;
        height: 42px !important;
        padding: 6px 10px !important;
        background-color: #0A1214 !important;
    }

    [data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
    [data-theme="dark"] .select2-container--default .select2-selection--single:focus,
    html.dark-style .select2-container--default.select2-container--open .select2-selection--single,
    html.dark-style .select2-container--default .select2-selection--single:focus {
        border-color: #10B981 !important;
        box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.18) !important;
        background-color: #0E181B !important;
    }

    [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
    html.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
        font-weight: 700 !important;
        color: #F1F5F9 !important;
    }

/* ── Extracted from Operation/CustomerPaymentReport.cshtml ── */
.checkbox-list {
        height: 170px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 6px 8px;
        background: #fff;
    }

        .checkbox-list .form-check-label {
            font-size: 0.85rem;
            cursor: pointer;
        }

/* ── Extracted from Operation/CustomersPaymentDetails.cshtml ── */
.checkbox-list {
        height: 170px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 6px 8px;
        background: #fff;
    }

        .checkbox-list .form-check-label {
            font-size: 0.85rem;
            cursor: pointer;
        }

/* ── Extracted from Operation/DelegationReview.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabulator {
        width: 100% !important;
    }

        .tabulator .tabulator-tableholder {
            overflow-x: auto !important;
        }

    @@media (max-width: 576px) {
        .review-status-radios

    {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    }

/* ── Extracted from Operation/OrderPolicy.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .action-buttons-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

        .action-buttons-wrap .btn {
            flex: 1 1 auto;
            min-width: 120px;
        }

    .tabulator {
        width: 100% !important;
    }

        .tabulator .tabulator-tableholder {
            overflow-x: auto !important;
        }

    .swal2-container {
        z-index: 99999 !important;
    }

/* ── Extracted from Operation/OrderPolicy.cshtml ── */
'
                    +   'body{font-family:Arial,sans-serif;font-size:13px;direction:rtl;}'
                    +   'h2{text-align:center;}'
                    +   'table{width:100%;border-collapse:collapse;margin-top:12px;}'
                    +   'th,td{border:1px solid #ccc;padding:5px 8px;text-align:center;}'
                    +   'th{background:#f0f0f0;}'
                    +   '.info{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}'
                    +   '.info div{border:1px solid #ddd;padding:6px;border-radius:4px;}'
                    +   '.lbl{font-size:11px;color:#666;}.val{font-weight:bold;}'
                    + '

/* ── Extracted from Operation/OrderPurchase.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .select2-container .select2-selection--single {
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
    }

    .action-buttons-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

        .action-buttons-wrap .btn {
            flex: 1 1 auto;
            min-width: 120px;
        }

/* ── Extracted from Operation/OrderSales.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .select2-container .select2-selection--single {
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
    }

    .action-buttons-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

        .action-buttons-wrap .btn {
            flex: 1 1 auto;
            min-width: 120px;
        }

    .tabulator {
        width: 100% !important;
    }

        .tabulator .tabulator-tableholder {
            overflow-x: auto !important;
        }

/* ── Extracted from Operation/OrderSalesSupplier.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .select2-container .select2-selection--single {
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
    }

    .action-buttons-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

        .action-buttons-wrap .btn {
            flex: 1 1 auto;
            min-width: 120px;
        }

    .tabulator {
        width: 100% !important;
    }

        .tabulator .tabulator-tableholder {
            overflow-x: auto !important;
        }


/* ===================================================================
 * ── CENTRALIZED REPORTS & DATA TABLES STYLES ──
 * =================================================================== */

/* ── Report Style: System.PL/Views\Report\BillAnalysisBeforeUpdateAndDelete.cshtml ── */
.invoice-card { background: #fff; border: 1px solid #e6e8ec; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: .75rem; font-size: .92rem; }
    .invoice-card__body { display: flex; gap: 1.25rem; align-items: stretch; }
    .invoice-card__main { flex: 1; min-width: 0; }
    .invoice-card__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid #eef0f3; padding-bottom: .65rem; margin-bottom: .75rem; }
    .invoice-card__identity { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
    .invoice-card__eyebrow { color: #8a92a3; font-size: .76rem; }
    .invoice-card__bill-number { font-size: 1.1rem; font-weight: 700; color: #1c2333; }
    .invoice-card__separator { color: #c3c8d1; }
    .invoice-card__date { color: #5b6472; font-size: .85rem; }
    .invoice-card__action-badge { padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #f1f3f6; color: #5b6472; }
    .invoice-card__action-badge[data-action="تعديل"] { background: #fff3d6; color: #8a6300; }
    .invoice-card__action-badge[data-action="حذف"] { background: #fde2e1; color: #9c2b27; }
    .invoice-card__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.25rem; }
    .invoice-card__field--wide { grid-column: span 2; }
    .invoice-card__field { display: flex; flex-direction: column; gap: .1rem; }
    .invoice-card__label { color: #8a92a3; font-size: .74rem; }
    .invoice-card__value { color: #1c2333; font-weight: 500; }

    .invoice-payment { flex: 0 0 250px; background: #f7f8fa; border-radius: 8px; padding: .9rem 1rem; border-inline-start: 4px solid #c3c8d1; display: flex; flex-direction: column; gap: .6rem; }
    .invoice-payment__title { font-weight: 600; color: #8a92a3; font-size: .78rem; }
    .invoice-payment__type-badge { align-self: flex-start; padding: .5rem 1.1rem; border-radius: 8px; font-size: 1.05rem; font-weight: 700; background: #e5e9f0; color: #33415c; }
    .invoice-payment[data-pay="نقدا"] { border-inline-start-color: #197a45; }
    .invoice-payment[data-pay="نقدا"] .invoice-payment__type-badge { background: #dcf5e6; color: #197a45; }
    .invoice-payment[data-pay="فيزا"] { border-inline-start-color: #1c56c9; }
    .invoice-payment[data-pay="فيزا"] .invoice-payment__type-badge { background: #dee9fd; color: #1c56c9; }
    .invoice-payment[data-pay="اجل"] { border-inline-start-color: #a3590a; }
    .invoice-payment[data-pay="اجل"] .invoice-payment__type-badge { background: #fde8cf; color: #a3590a; }
    .invoice-payment[data-pay="تقسيط"] { border-inline-start-color: #6a2ec9; }
    .invoice-payment[data-pay="تقسيط"] .invoice-payment__type-badge { background: #ecdefc; color: #6a2ec9; }
    .invoice-payment__amounts { display: flex; flex-direction: column; gap: .5rem; padding-top: .5rem; border-top: 1px solid #e6e8ec; }
    .invoice-payment__amount { display: flex; justify-content: space-between; align-items: baseline; }
    .invoice-payment__amount-label { color: #8a92a3; font-size: .78rem; }
    .invoice-payment__amount-value { font-size: 1.05rem; font-weight: 700; }
    .invoice-payment__amount-value--paid { color: #197a45; }
    .invoice-payment__amount-value--remaining { color: #a3590a; }
    @@media (max-width: 900px) { .invoice-card__body { flex-direction: column; } .invoice-payment { flex-basis: auto; } }

/* ── Report Style: System.PL/Views\Report\DailyReport.cshtml ── */
.bg-light {
        background-color: #f8f9fa !important;
    }

/* ── Report Style: System.PL/Views\Report\DailyReport.cshtml ── */
@@media print {
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }
    }

/*/* ── Report Style: System.PL/Views\Report\IncomeData.cshtml (Scoped) ── */
.income-print-sheet {
    box-sizing: border-box;
    font-family: 'Arial Unicode MS', 'Tahoma', Arial, sans-serif;
    direction: rtl;
    background: white;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

.income-print-sheet .header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid #0E5B46;
}

.income-print-sheet .title {
    font-size: 24px;
    font-weight: bold;
    color: #0E5B46;
    margin-bottom: 10px;
}

.income-print-sheet .date {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.income-print-sheet .table-container {
    width: 100%;
    overflow-x: auto;
}

.income-print-sheet table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    background: white;
    font-size: 11px;
    direction: rtl;
}

.income-print-sheet th, 
.income-print-sheet td {
    border: 1px solid #ddd;
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
    max-width: 150px;
}

.income-print-sheet th {
    background: #0E5B46;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}

.income-print-sheet tr:nth-child(even) {
    background-color: #f8f9fa;
}

.income-print-sheet tr:hover {
    background-color: #e3f2fd;
}

.income-print-sheet .number {
    text-align: center;
    font-family: 'Arial Unicode MS', monospace;
}

.income-print-sheet .currency {
    text-align: center;
    color: #28a745;
    font-weight: 500;
}

.income-print-sheet .date-cell {
    text-align: center;
    font-size: 10px;
}

.income-print-sheet .footer {
    margin-top: 30px;
    text-align: center;
    font-size: 10px;
    color: #666;
    border-top: 1px solid #ddd;
    padding-top: 15px;
}

@media print {
    .income-print-sheet {
        font-size: 10px;
    }

    .income-print-sheet .title {
        font-size: 19px;
    }

    .income-print-sheet table {
        font-size: 9px;
    }

    .income-print-sheet th {
        font-size: 10px;
    }
}

/* ── Report Style: System.PL/Views\Report1\DifferenceItemsMovementBetweenStores.cshtml ── */
/* Method 2: Using CSS class (recommended) */
    .border-left-separator {
        border-left: 3px solid black !important;
    }

    /* Ensure it works on both header and cells */
    .tabulator-header .border-left-separator,
    .tabulator-cell.border-left-separator {
        border-left: 3px solid black !important;
    }

/* ── Report Style: System.PL/Views\Report1\ItemAnalysis.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #reportTable .tabulator-cell,
    #reportTable .tabulator-col-title {
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.35;
    }

/* ── Report Style: System.PL/Views\Report1\ItemMovementOnMonthes.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #reportTable .tabulator-cell,
    #reportTable .tabulator-col-title {
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.35;
    }

    .bill-type-toggle .form-check {
        border: 1px solid #d9dee3;
        border-radius: 8px;
        padding: 0.5rem 0.9rem;
        margin: 0;
        flex: 1 1 0;
        text-align: center;
        cursor: pointer;
    }

    .bill-type-toggle .form-check-input {
        margin-inline-end: 0.4rem;
        cursor: pointer;
    }

    .bill-type-toggle .form-check-label {
        cursor: pointer;
    }

/* ── Report Style: System.PL/Views\Report1\MovementOfItemPurchases.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #movementTable .tabulator-cell,
    #movementTable .tabulator-col-title {
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.35;
    }

/* ── Report Style: System.PL/Views\Report1\OfferPrice.cshtml (Scoped) ── */
.offer-print-sheet {
    box-sizing: border-box;
    font-family: 'Arial Unicode MS', 'Tahoma', Arial, sans-serif;
    direction: rtl;
    background: white;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

.offer-print-sheet .header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid #0E5B46;
}

.offer-print-sheet .title {
    font-size: 24px;
    font-weight: bold;
    color: #0E5B46;
    margin-bottom: 10px;
}

.offer-print-sheet .date {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.offer-print-sheet .table-container {
    width: 100%;
    overflow-x: auto;
}

.offer-print-sheet table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    background: white;
    font-size: 11px;
    direction: rtl;
}

.offer-print-sheet th, 
.offer-print-sheet td {
    border: 1px solid #ddd;
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
    max-width: 150px;
}

.offer-print-sheet th {
    background: #0E5B46;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}

.offer-print-sheet tr:nth-child(even) {
    background-color: #f8f9fa;
}

.offer-print-sheet tr:hover {
    background-color: #e3f2fd;
}

.offer-print-sheet .number {
    text-align: center;
    font-family: 'Arial Unicode MS', monospace;
}

.offer-print-sheet .currency {
    text-align: center;
    color: #28a745;
    font-weight: 500;
}

.offer-print-sheet .date-cell {
    text-align: center;
    font-size: 10px;
}

.offer-print-sheet .footer {
    margin-top: 30px;
    text-align: center;
    font-size: 10px;
    color: #666;
    border-top: 1px solid #ddd;
    padding-top: 15px;
}

@media print {
    .offer-print-sheet {
        font-size: 10px;
    }

    .offer-print-sheet .title {
        font-size: 20px;
    }

    .offer-print-sheet table {
        font-size: 9px;
    }

    .offer-print-sheet th {
        font-size: 10px;
    }
}

/* ── Report Style: System.PL/Views\Report10\ReturnPercentageSales.cshtml ── */
.return-percentage-page,
    .return-percentage-table-wrap,
    #returnPercentageTable {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .return-percentage-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 1rem;
        padding: 0;
    }

        .return-percentage-toolbar .date-field {
            min-width: 210px;
        }

        .return-percentage-toolbar .form-label {
            color: #1E293B;
            font-weight: 700;
            font-size: 0.88rem;
        }

    .return-percentage-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        margin-inline-start: auto;
    }

    .return-percentage-table-wrap {
        overflow: hidden;
        border: 1px solid #d9dee3;
        border-radius: .65rem;
        background: #fff;
    }

    [data-theme="dark"] .return-percentage-table-wrap,
    html.dark-style .return-percentage-table-wrap {
        background: #121F23 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .return-percentage-search-tools {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin-bottom: 1rem;
    }

    .return-percentage-search {
        width: min(340px, 100%);
    }

    .return-percentage-column-search {
        width: min(380px, 100%);
    }

    .btn-return-secondary {
        border: 1.5px solid #0E5B46;
        background: #FFFFFF;
        color: #0E5B46;
        padding: 0.55rem 1.35rem;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 2px 6px rgba(14, 91, 70, 0.08);
    }

        .btn-return-secondary:hover {
            background: rgba(14, 91, 70, 0.08);
            color: #08382B;
            border-color: #08382B;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(14, 91, 70, 0.15);
        }

    [data-theme="dark"] .btn-return-secondary,
    html.dark-style .btn-return-secondary {
        background: #0E181B !important;
        border-color: #24383D !important;
        color: #CBD5E1 !important;
        box-shadow: none !important;
    }

    [data-theme="dark"] .btn-return-secondary:hover,
    html.dark-style .btn-return-secondary:hover {
        background: #182A2E !important;
        border-color: #D4AF7C !important;
        color: #D4AF7C !important;
    }

    #returnPercentageTable .tabulator-cell.has-return-value {
        background: #fff200 !important;
        color: #b74300;
        font-weight: 800;
    }

    #returnPercentageTable .tabulator-cell[tabulator-field^="group_"] {
        cursor: text;
    }

    #returnPercentageTable .tabulator-row .tabulator-cell.tabulator-frozen {
        z-index: 20 !important;
        background: #fff !important;
    }

    [data-theme="dark"] #returnPercentageTable .tabulator-row .tabulator-cell.tabulator-frozen,
    html.dark-style #returnPercentageTable .tabulator-row .tabulator-cell.tabulator-frozen {
        background: #121F23 !important;
        color: #E2E8F0 !important;
    }

    #returnPercentageTable .tabulator-header {
        isolation: isolate;
        background: linear-gradient(135deg, #0E5B46 0%, #083C2E 100%);
        color: #fff;
    }

        #returnPercentageTable .tabulator-header .tabulator-col {
            background: transparent;
            color: #fff;
            border-color: rgba(255,255,255,.22);
        }

            #returnPercentageTable .tabulator-header .tabulator-col.tabulator-frozen {
                z-index: 30 !important;
                background: #0E5B46 !important;
            }

    [data-theme="dark"] #returnPercentageTable .tabulator-header,
    html.dark-style #returnPercentageTable .tabulator-header {
        background: #0E181B !important;
        border-bottom: 2.5px solid rgba(212, 175, 124, 0.35) !important;
    }

    [data-theme="dark"] #returnPercentageTable .tabulator-header .tabulator-col,
    [data-theme="dark"] #returnPercentageTable .tabulator-header .tabulator-col.tabulator-frozen,
    html.dark-style #returnPercentageTable .tabulator-header .tabulator-col {
        background: #0E181B !important;
        color: #D4AF7C !important;
    }

    html[dir="rtl"] #returnPercentageTable .tabulator-frozen {
        box-shadow: -5px 0 8px rgba(14, 91, 70, .18);
    }

    html[dir="ltr"] #returnPercentageTable .tabulator-frozen {
        box-shadow: 5px 0 8px rgba(14, 91, 70, .18);
    }

    #returnPercentageTable .tabulator-col-title {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #returnPercentageTable .tabulator-tableholder {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    @@media (max-width: 767px) {
        .return-percentage-actions {
            width: 100%;
            margin-inline-start: 0;
        }

            .return-percentage-actions .btn {
                flex: 1;
            }
    }

/* ── Report Style: System.PL/Views\Report4\AccountBalances.cshtml ── */
#accountTreeContainer .family-tree {
        margin: 0;
    }

    #accountTreeContainer .family-tree li {
        padding: 6px 0;
    }

    #accountTreeContainer .tree-label {
        font-size: 13px;
    }

    #accountTreeContainer .tree-label mark {
        background-color: #ffe58a;
        padding: 0 1px;
        border-radius: 2px;
    }

    #accountTreeContainer .tree-acc-checkbox,
    #accountTreeContainer .tree-parent-checkbox {
        margin: 0 4px;
        vertical-align: middle;
        cursor: pointer;
    }

    #accountTreeContainer .no-results {
        text-align: center;
        color: #6c757d;
        padding: 20px 0;
    }

/* ── Report Style: System.PL/Views\Report6\CollectionChecks.cshtml ── */
.tabulator .tabulator-row.total-row {
        background-color: #ffe8e8 !important;
        font-weight: bold !important;
        border-top: 3px solid #c02020 !important;
    }

        .tabulator .tabulator-row.total-row .tabulator-cell {
            font-weight: bold !important;
        }

/* ── Report Style: System.PL/Views\Report6\CompanyInventory.cshtml ── */
.company-inventory-report,
    .company-inventory-table-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .company-inventory-table-box {
        /* layout: "fitDataTable" بيخلي عرض الجدول = مجموع عرض الأعمدة، فلما نضيف أعمدة
           المخازن والأسعار بيبقى أعرض من الصفحة بكتير (٥٢٧٠px مقابل ٩٠٠px).
           كان overflow: hidden فالجدول كان بيتقص من غير شريط تمرير ومفيش طريقة توصل
           للأعمدة اللي برّه. auto بتخلي الصندوق نفسه يتمرر يمين وشمال. */
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #d9dee3;
        border-radius: .5rem;
        background: #fff;
    }

    .inventory-option-box {
        height: 100%;
        padding: 1rem;
        border: 1px solid #d9dee3;
        border-radius: .5rem;
        background: #fff;
    }

    .inventory-option-list {
        max-height: 230px;
        overflow-y: auto;
    }

    /* لما "أمر التوريد" يبقى شغال، قايمة المخازن بتتقفل لأن التقرير بيجيب كل المخازن إجباريًا */
    .inventory-option-box.is-locked {
        background: #f1f3f5;
        color: #6c757d;
    }

    .inventory-totals {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: .75rem;
        margin-top: 1rem;
    }

    .inventory-total-card {
        padding: .85rem 1rem;
        border: 1px solid #d9dee3;
        border-inline-start: 4px solid #2c5aa0;
        border-radius: .45rem;
        background: #fff;
    }

    .inventory-total-label {
        color: #5d6975;
        font-size: .85rem;
    }

    .inventory-total-number {
        margin-top: .25rem;
        color: #173f70;
        font-size: 1.05rem;
        font-weight: 700;
        direction: ltr;
        text-align: start;
    }

    #companyInventoryTable .tabulator-tableholder {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

/* ── Report Style: System.PL/Views\Report6\Inventory.cshtml ── */
.tabulator .tabulator-row.total-row {
        background-color: #e8f4f8 !important;
        font-weight: bold !important;
        border-top: 3px solid #2c5aa0 !important;
    }

        .tabulator .tabulator-row.total-row .tabulator-cell {
            font-weight: bold !important;
        }

/* ── Report Style: System.PL/Views\Report6\Paymentchecks.cshtml ── */
.tabulator .tabulator-row.total-row {
        background-color: #ffe8e8 !important;
        font-weight: bold !important;
        border-top: 3px solid #c02020 !important;
    }

        .tabulator .tabulator-row.total-row .tabulator-cell {
            font-weight: bold !important;
        }

/* ── Report Style: System.PL/Views\Report8\ItemPrices.cshtml ── */
.tabulator-responsive-wrap {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    #itemPricesTable .tabulator-tableholder {
        overflow-x: scroll !important;
    }

    #itemPricesForm .form-check-input {
        margin-top: 0 !important;
    }

/* ── Report Style: System.PL/Views\Report8\ItemRevenueReport.cshtml ── */
.item-revenue-report,
    .item-revenue-table-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .item-revenue-table-box {
        /* layout: "fitDataTable" بيخلي عرض الجدول = مجموع عرض الأعمدة، فلما الأعمدة
           تزيد بيبقى أعرض من الصفحة. كان overflow: hidden فالجدول كان بيتقص من غير
           شريط تمرير. auto بتخلي الصندوق يتمرر يمين وشمال. */
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #d9dee3;
        border-radius: .5rem;
        background: #fff;
    }

    .item-revenue-section-title {
        margin: 1.25rem 0 .65rem;
        color: #244a76;
        font-size: 1.05rem;
        font-weight: 700;
    }

    #itemRevenueTable .tabulator-tableholder,
    #groupRevenueTable .tabulator-tableholder {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    #groupRevenueTable .tabulator-row,
    #groupRevenueTable .tabulator-row:hover {
        background-color: #fffbea;
    }

    #groupRevenueTable .tabulator-cell {
        font-weight: 600;
    }

/* ── Report Style: System.PL/Views\Report8\ItemsInventoryByMark.cshtml ── */
.inventory-mark-report,
    .inventory-mark-table-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .inventory-mark-table-box {
        /* layout: "fitDataTable" بيخلي عرض الجدول = مجموع عرض الأعمدة، فلما الأعمدة
           تزيد بيبقى أعرض من الصفحة. كان overflow: hidden فالجدول كان بيتقص من غير
           شريط تمرير. auto بتخلي الصندوق يتمرر يمين وشمال. */
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #d9dee3;
        border-radius: .5rem;
        background: #fff;
    }

    .inventory-option-box {
        height: 100%;
        padding: 1rem;
        border: 1px solid #d9dee3;
        border-radius: .5rem;
        background: #fff;
    }

    .inventory-option-list {
        max-height: 230px;
        overflow-y: auto;
    }

    .inventory-totals {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: .75rem;
        margin-top: 1rem;
    }

    .inventory-total-card {
        padding: .85rem 1rem;
        border: 1px solid #d9dee3;
        border-inline-start: 4px solid #2c5aa0;
        border-radius: .45rem;
        background: #fff;
    }

    .inventory-total-label {
        color: #5d6975;
        font-size: .85rem;
    }

    .inventory-total-number {
        margin-top: .25rem;
        color: #173f70;
        font-size: 1.05rem;
        font-weight: 700;
        direction: ltr;
        text-align: start;
    }

    #inventoryByMarkTable .tabulator-tableholder {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

/* ── Report Style: System.PL/Views\Report8\NetGroupSales.cshtml ── */
.net-group-sales-report {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .net-group-sales-table-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        /* layout: "fitDataTable" بيخلي عرض الجدول = مجموع عرض الأعمدة، فلما الأعمدة
           تزيد بيبقى أعرض من الصفحة. كان overflow: hidden فالجدول كان بيتقص من غير
           شريط تمرير. auto بتخلي الصندوق يتمرر يمين وشمال. */
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #d9dee3;
        border-radius: 0.5rem;
        background: #fff;
    }

    #netGroupSalesTable {
        width: 100%;
        max-width: 100%;
    }

    #netGroupSalesTable .tabulator-tableholder {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    #netGroupSalesTable .tabulator-row.group-total-row,
    #netGroupSalesTable .tabulator-row.group-total-row:hover {
        background-color: #fff4cf !important;
        color: #d84315;
        font-weight: 700;
    }

    #netGroupSalesTable .tabulator-row.group-total-row .tabulator-cell {
        border-top: 2px solid #d84315;
    }

/* ── Report Style: System.PL/Views\Report8\PeriodTaxes.cshtml ── */
.period-taxes-report {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .period-taxes-table-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        /* كان overflow: hidden، فلما عرض الأعمدة يزيد عن عرض الصفحة الجدول كان بيتقص
           من غير شريط تمرير. auto بتخلي الجدول يتمرر أفقيًا بدل ما يتقص. */
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #d9dee3;
        border-radius: 0.5rem;
        background: #fff;
    }

    #periodTaxesTable {
        width: 100%;
        max-width: 100%;
    }

    #periodTaxesTable .tabulator-tableholder {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    /* صافي المبيعات / صافي المشتريات الضريبي */
    #periodTaxesTable .tabulator-row.tax-subtotal-row,
    #periodTaxesTable .tabulator-row.tax-subtotal-row:hover {
        background-color: #f5a623 !important;
        color: #212529;
        font-weight: 700;
    }

    /* الضرائب المستحقة */
    #periodTaxesTable .tabulator-row.tax-due-row,
    #periodTaxesTable .tabulator-row.tax-due-row:hover {
        background-color: #fff8e1 !important;
        color: #d32f2f;
        font-weight: 700;
    }

    .btn-hide-row {
        border: 0;
        border-radius: 0.25rem;
        background-color: #2f8ed6;
        color: #fff;
        line-height: 1;
        padding: 0.2rem 0.5rem;
    }

    .btn-hide-row:hover {
        background-color: #1c6fae;
    }

/* ── Report Style: System.PL/Views\Report8\ShowAllBills.cshtml ── */
.show-all-bills-report {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .show-all-bills-table-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        /* layout: "fitDataTable" بيخلي عرض الجدول = مجموع عرض الأعمدة، فلما الأعمدة
           تزيد بيبقى أعرض من الصفحة. كان overflow: hidden فالجدول كان بيتقص من غير
           شريط تمرير. auto بتخلي الصندوق يتمرر يمين وشمال. */
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #d9dee3;
        border-radius: 0.5rem;
        background: #fff;
    }

    #showAllBillsTable {
        width: 100%;
        max-width: 100%;
    }

    #showAllBillsTable .tabulator-tableholder {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

/* ==========================================================================
   Z4U GLOBAL TABLE CLARITY, CONTRAST & ACTION BUTTONS ALIGNMENT SYSTEM
   ========================================================================== */

/* 1. Prevent Any Squishing of Action Buttons Across All Tables */
.btn-icon-action,
.table-action-btn,
.hesba-table .btn-icon-action,
.master-table .table-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Actions Column Width & Natural Flexbox Alignment */
.hesba-table th:last-child,
.hesba-table td:last-child,
.master-table th:last-child,
.master-table td:last-child,
.table-actions-cell,
.actions-column {
    min-width: 275px !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.hesba-table td:last-child > div,
.master-table td:last-child > div,
.hesba-table .table-actions-wrapper,
.master-table .table-actions-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
}

/* 3. Amounts & Financial Net Typography (Light Mode) */
.bill-total-net {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0E5B46 !important;
    letter-spacing: 0.3px !important;
}

.bill-number-link {
    color: #0E5B46 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.bill-number-link:hover {
    color: #08382B !important;
    text-decoration: underline !important;
}

/* 4. High-Contrast Dark Mode Rules for All Tables */
html.dark-style .hesba-table,
html[data-theme="dark"] .hesba-table,
html.dark-style .master-table,
html[data-theme="dark"] .master-table {
    background-color: #0c1527 !important;
    color: #E2E8F0 !important;
}

html.dark-style .hesba-table thead th,
html[data-theme="dark"] .hesba-table thead th,
html.dark-style .master-table thead th,
html[data-theme="dark"] .master-table thead th {
    background-color: #0f1c32 !important;
    color: #D4AF7C !important;
    border-bottom: 2px solid rgba(212, 175, 124, 0.3) !important;
    font-weight: 700 !important;
}

html.dark-style .hesba-table tbody td,
html[data-theme="dark"] .hesba-table tbody td,
html.dark-style .master-table tbody td,
html[data-theme="dark"] .master-table tbody td {
    color: #CBD5E1 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark-style .hesba-table tbody tr,
html[data-theme="dark"] .hesba-table tbody tr,
html.dark-style .master-table tbody tr,
html[data-theme="dark"] .master-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    background-color: transparent !important;
}

html.dark-style .hesba-table tbody tr:hover,
html[data-theme="dark"] .hesba-table tbody tr:hover,
html.dark-style .master-table tbody tr:hover,
html[data-theme="dark"] .master-table tbody tr:hover {
    background-color: rgba(212, 175, 124, 0.06) !important;
}

/* Customer / Party Name Clarity in Dark Mode */
html.dark-style .hesba-table .text-dark,
html[data-theme="dark"] .hesba-table .text-dark,
html.dark-style .master-table .text-dark,
html[data-theme="dark"] .master-table .text-dark {
    color: #F8FAFC !important;
    font-weight: 700 !important;
}

/* Luminous Financial Amounts in Dark Mode */
html.dark-style .bill-total-net,
html[data-theme="dark"] .bill-total-net,
html.dark-style .hesba-table span[style*="1F2937"],
html[data-theme="dark"] .hesba-table span[style*="1F2937"],
html.dark-style .master-table span[style*="1F2937"],
html[data-theme="dark"] .master-table span[style*="1F2937"] {
    color: #34D399 !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.22) !important;
}

/* Currency & Muted Text Clarity in Dark Mode */
html.dark-style .hesba-table td .text-muted,
html[data-theme="dark"] .hesba-table td .text-muted,
html.dark-style .master-table td .text-muted,
html[data-theme="dark"] .master-table td .text-muted,
html.dark-style .table td.text-muted,
html[data-theme="dark"] .table td.text-muted {
    color: #94A3B8 !important;
}

/* Bill Number Link in Dark Mode: Warm Gold */
html.dark-style .bill-number-link,
html[data-theme="dark"] .bill-number-link,
html.dark-style .hesba-table a[style*="0E5B46"],
html[data-theme="dark"] .hesba-table a[style*="0E5B46"] {
    color: #D4AF7C !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

html.dark-style .bill-number-link:hover,
html[data-theme="dark"] .bill-number-link:hover {
    color: #FBBF24 !important;
    text-decoration: underline !important;
}

/* Duration & Info Badges in Dark Mode */
html.dark-style .hesba-table .badge.bg-light,
html[data-theme="dark"] .hesba-table .badge.bg-light,
html.dark-style .master-table .badge.bg-light,
html[data-theme="dark"] .master-table .badge.bg-light,
html.dark-style .table .badge.bg-light,
html[data-theme="dark"] .table .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    font-weight: 500 !important;
}

/* Cash / Settled Badges in Dark Mode */
html.dark-style .hesba-table .badge.text-success,
html[data-theme="dark"] .hesba-table .badge.text-success,
html.dark-style .badge-status.badge-settled,
html[data-theme="dark"] .badge-status.badge-settled {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

/* 5. Vivid Dark Mode Action Buttons with Distinct Color Coding */
html.dark-style .btn-icon-action.btn-view,
html[data-theme="dark"] .btn-icon-action.btn-view {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #34D399 !important;
}
html.dark-style .btn-icon-action.btn-view:hover,
html[data-theme="dark"] .btn-icon-action.btn-view:hover {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-1.5px) !important;
}

html.dark-style .btn-icon-action.btn-print,
html[data-theme="dark"] .btn-icon-action.btn-print {
    background-color: rgba(148, 163, 184, 0.15) !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #E2E8F0 !important;
}
html.dark-style .btn-icon-action.btn-print:hover,
html[data-theme="dark"] .btn-icon-action.btn-print:hover {
    background-color: #94A3B8 !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35) !important;
    transform: translateY(-1.5px) !important;
}

html.dark-style .btn-icon-action.btn-receipt,
html[data-theme="dark"] .btn-icon-action.btn-receipt {
    background-color: rgba(129, 140, 248, 0.15) !important;
    border: 1px solid rgba(129, 140, 248, 0.35) !important;
    color: #A5B4FC !important;
}
html.dark-style .btn-icon-action.btn-receipt:hover,
html[data-theme="dark"] .btn-icon-action.btn-receipt:hover {
    background-color: #6366F1 !important;
    border-color: #6366F1 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1.5px) !important;
}

html.dark-style .btn-icon-action.btn-store-print,
html[data-theme="dark"] .btn-icon-action.btn-store-print {
    background-color: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38BDF8 !important;
}
html.dark-style .btn-icon-action.btn-store-print:hover,
html[data-theme="dark"] .btn-icon-action.btn-store-print:hover {
    background-color: #0284C7 !important;
    border-color: #0284C7 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-1.5px) !important;
}

html.dark-style .btn-icon-action.btn-pdf,
html[data-theme="dark"] .btn-icon-action.btn-pdf {
    background-color: rgba(248, 113, 113, 0.15) !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
    color: #F87171 !important;
}
html.dark-style .btn-icon-action.btn-pdf:hover,
html[data-theme="dark"] .btn-icon-action.btn-pdf:hover {
    background-color: #EF4444 !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
    transform: translateY(-1.5px) !important;
}

html.dark-style .btn-icon-action.btn-edit,
html[data-theme="dark"] .btn-icon-action.btn-edit {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #FBBF24 !important;
}
html.dark-style .btn-icon-action.btn-edit:hover,
html[data-theme="dark"] .btn-icon-action.btn-edit:hover {
    background-color: #D4AF7C !important;
    border-color: #D4AF7C !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(212, 175, 124, 0.4) !important;
    transform: translateY(-1.5px) !important;
}

html.dark-style .btn-icon-action.btn-delete,
html[data-theme="dark"] .btn-icon-action.btn-delete {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    color: #FB7185 !important;
}
html.dark-style .btn-icon-action.btn-delete:hover:not(:disabled),
html[data-theme="dark"] .btn-icon-action.btn-delete:hover:not(:disabled) {
    background-color: #E11D48 !important;
    border-color: #E11D48 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4) !important;
    transform: translateY(-1.5px) !important;
}

html.dark-style .btn-icon-action.btn-zatca,
html[data-theme="dark"] .btn-icon-action.btn-zatca {
    background-color: rgba(45, 212, 191, 0.15) !important;
    border: 1px solid rgba(45, 212, 191, 0.35) !important;
    color: #2DD4BF !important;
}
html.dark-style .btn-icon-action.btn-zatca:hover:not(:disabled),
html[data-theme="dark"] .btn-icon-action.btn-zatca:hover:not(:disabled) {
    background-color: #14B8A6 !important;
    border-color: #14B8A6 !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4) !important;
    transform: translateY(-1.5px) !important;
}

/* Master Table Action Buttons (Definitions) */
html.dark-style .table-action-btn,
html[data-theme="dark"] .table-action-btn {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #CBD5E1 !important;
}
html.dark-style .table-action-btn.table-action-edit,
html[data-theme="dark"] .table-action-btn.table-action-edit {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #FBBF24 !important;
}
html.dark-style .table-action-btn.table-action-edit:hover,
html[data-theme="dark"] .table-action-btn.table-action-edit:hover {
    background-color: #D4AF7C !important;
    color: #0F172A !important;
}
html.dark-style .table-action-btn.table-action-delete,
html[data-theme="dark"] .table-action-btn.table-action-delete {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
    color: #FB7185 !important;
}
html.dark-style .table-action-btn.table-action-delete:hover,
html[data-theme="dark"] .table-action-btn.table-action-delete:hover {
    background-color: #E11D48 !important;
    color: #FFFFFF !important;
}


/* ══════════════════════════════════════════════════════════════════
   Bill Master Tabs Wrapper  (.bill-tab-btn  used in BillSales/Upsert)
   These alias the existing .bill-nav-tabs .nav-link rules so that
   the custom button class renders identically.
   ══════════════════════════════════════════════════════════════════ */

/* ── Light Mode ── */
.bill-tabs-wrapper {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
}

.bill-tab-btn {
    border: none;
    border-bottom: 3px solid transparent;
    color: #334155;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0.65rem 1.1rem;
    border-radius: 8px 8px 0 0;
    white-space: nowrap;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-bottom: -2px;
}

.bill-tab-btn i {
    color: #64748B;
    font-size: 1.05rem;
    transition: color 0.2s ease;
}

.bill-tab-btn:hover {
    color: #0E5B46;
    background: rgba(14, 91, 70, 0.05);
}

.bill-tab-btn:hover i {
    color: #0E5B46;
}

.bill-tab-btn.active {
    color: #0E5B46 !important;
    border-bottom: 3px solid #0E5B46 !important;
    background: rgba(14, 91, 70, 0.07) !important;
    font-weight: 800;
}

.bill-tab-btn.active i {
    color: #0E5B46 !important;
}

.bill-tab-content {
    padding: 16px 20px 20px;
}

/* ── Dark Mode ── */
[data-theme="dark"] .bill-tabs-wrapper,
html.dark-style .bill-tabs-wrapper {
    background: #0E1A1D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .bill-tab-btn,
html.dark-style .bill-tab-btn {
    color: #94A3B8 !important;
    border-bottom-color: transparent !important;
}

[data-theme="dark"] .bill-tab-btn:hover,
html.dark-style .bill-tab-btn:hover {
    color: #D4AF7C !important;
    background: rgba(212, 175, 124, 0.08) !important;
}

[data-theme="dark"] .bill-tab-btn.active,
html.dark-style .bill-tab-btn.active {
    color: #10B981 !important;
    border-bottom-color: #10B981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] .bill-tab-btn i,
html.dark-style .bill-tab-btn i {
    color: #64748B !important;
}

[data-theme="dark"] .bill-tab-btn:hover i,
html.dark-style .bill-tab-btn:hover i {
    color: #D4AF7C !important;
}

[data-theme="dark"] .bill-tab-btn.active i,
html.dark-style .bill-tab-btn.active i {
    color: #10B981 !important;
}


/* ══════════════════════════════════════════════════════════════════
   Ultra-Compact Bill Header & Dense Form Fields Layout
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Compact Hero Header ── */
.bill-header-compact {
    padding: 0.42rem 0.95rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: 10px !important;
}

.bill-header-compact::before {
    height: 2px !important;
}

.bill-header-compact .bill-header-icon-box {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
}

.bill-header-compact .bill-header-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.bill-header-compact .bill-badge-number,
.bill-header-compact .bill-badge-draft {
    font-size: 0.72rem !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
}

.bill-header-compact .bill-header-status-indicator {
    font-size: 0.72rem !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
}

.bill-breadcrumb-micro {
    font-size: 0.72rem !important;
    color: #64748B !important;
    margin-top: 1px !important;
}

.bill-breadcrumb-micro a {
    color: #64748B !important;
    transition: color 0.15s ease;
}

.bill-breadcrumb-micro a:hover {
    color: #0E5B46 !important;
}

[data-theme="dark"] .bill-breadcrumb-micro,
html.dark-style .bill-breadcrumb-micro {
    color: #94A3B8 !important;
}

[data-theme="dark"] .bill-breadcrumb-micro a,
html.dark-style .bill-breadcrumb-micro a {
    color: #94A3B8 !important;
}

[data-theme="dark"] .bill-breadcrumb-micro a:hover,
html.dark-style .bill-breadcrumb-micro a:hover {
    color: #D4AF7C !important;
}

.btn-hero-compact {
    padding: 0.32rem 0.75rem !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    border-radius: 7px !important;
    gap: 0.35rem !important;
}

/* ── 2. Compact Tabs & Minimal Height Form Fields ── */
.bill-tabs-wrapper {
    margin-bottom: 0.5rem !important;
    border-radius: 10px !important;
}

.bill-tabs-wrapper .bill-nav-tabs {
    padding: 4px 10px 0 !important;
    gap: 3px !important;
}

.bill-tabs-wrapper .bill-tab-btn {
    padding: 0.35rem 0.85rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

.bill-tabs-wrapper .bill-tab-content {
    padding: 8px 12px 10px !important;
}

.bill-tabs-wrapper .bill-form-label {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
    display: block !important;
}

.bill-remarks-compact {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 0.84rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}


/* ══════════════════════════════════════════════════════════════════
   Ultra-Compact & Balanced Bill Header & Form Tabs (Dual-Theme Engine)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Structural Layout (Ultra-Compact Dimensions) ── */
.bill-header-clean {
    padding: 0.32rem 0.8rem !important;
    border-radius: 8px !important;
    margin-bottom: 0.4rem !important;
    position: relative !important;
}

.bill-header-clean::before {
    display: none !important;
}

.bill-header-clean .bill-header-icon-box {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.88rem !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bill-header-clean .bill-header-title {
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

.bill-header-clean .bill-badge-number,
.bill-header-clean .bill-badge-draft {
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
    border-radius: 5px !important;
    line-height: 1.2 !important;
}

.bill-header-clean .bill-header-status-indicator {
    padding: 1px 7px !important;
    border-radius: 10px !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

.bill-header-clean .status-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.breadcrumb-clean-link {
    text-decoration: none !important;
    font-size: 0.72rem !important;
    transition: color 0.15s ease;
}

.breadcrumb-clean-sep {
    font-size: 0.6rem !important;
}

.breadcrumb-clean-current {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
}

.bill-header-clean .btn-hero-action {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.bill-header-clean .btn-hero-action i {
    font-size: 0.82rem !important;
}

/* ── 2. Compact Tabs Wrapper Structure ── */
.bill-tabs-wrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 0.45rem !important;
}

.bill-tabs-wrapper .bill-nav-tabs {
    padding: 2px 6px 0 !important;
    gap: 3px !important;
}

.bill-tabs-wrapper .bill-tab-btn {
    padding: 2px 9px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 6px 6px 0 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
}

.bill-tabs-wrapper .bill-tab-btn i {
    font-size: 0.92rem !important;
}

.bill-tabs-wrapper .bill-tab-content {
    padding: 4px 10px 6px !important;
}

.bill-tabs-wrapper .bill-form-label {
    font-size: 0.69rem !important;
    font-weight: 600 !important;
    margin-bottom: 1px !important;
    display: block !important;
    white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════════
   Universal Executive 36px Form Field Heights across Bill Master Tabs
   ══════════════════════════════════════════════════════════════════ */
.bill-tabs-wrapper .form-control,
.bill-tabs-wrapper .form-select,
.bill-tabs-wrapper input[type="text"],
.bill-tabs-wrapper input[type="number"],
.bill-tabs-wrapper input[type="datetime-local"],
.bill-tabs-wrapper .input-group .btn,
.bill-tabs-wrapper .select2-container--default .select2-selection--single,
.bill-tabs-wrapper .select2-container .select2-selection--single,
.bill-tabs-wrapper .bill-btn-plus,
.bill-tabs-wrapper a.btn.bill-btn-plus,
.bill-tabs-wrapper a.btn:has(.fa-plus),
.bill-tabs-wrapper button.btn:has(.fa-plus),
.bill-tabs-wrapper .bill-switch-box,
html.dark-style .bill-tabs-wrapper .select2-container--default .select2-selection--single,
html.dark-style .bill-tabs-wrapper .select2-container .select2-selection--single,
html[data-theme="dark"] .bill-tabs-wrapper .select2-container--default .select2-selection--single,
html[data-theme="dark"] .bill-tabs-wrapper .select2-container .select2-selection--single,
html.dark-style .bill-tabs-wrapper .form-control,
html[data-theme="dark"] .bill-tabs-wrapper .form-control,
html:not(.dark-style) .bill-tabs-wrapper .select2-container--default .select2-selection--single,
html[data-theme="light"] .bill-tabs-wrapper .select2-container--default .select2-selection--single {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
}

.bill-tabs-wrapper .form-control,
.bill-tabs-wrapper .form-select,
.bill-tabs-wrapper input[type="text"],
.bill-tabs-wrapper input[type="number"],
.bill-tabs-wrapper input[type="datetime-local"] {
    padding: 3px 8px !important;
    font-size: 0.80rem !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
}

.bill-tabs-wrapper .select2-container--default .select2-selection--single,
.bill-tabs-wrapper .select2-container .select2-selection--single {
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 6px !important;
}

.bill-tabs-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
.bill-tabs-wrapper .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    font-size: 0.80rem !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    display: flex !important;
    align-items: center !important;
}

.bill-tabs-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow,
.bill-tabs-wrapper .select2-container .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
    top: 1px !important;
}

.bill-tabs-wrapper a.btn.bill-btn-plus,
.bill-tabs-wrapper a.btn:has(.fa-plus),
.bill-tabs-wrapper button.btn:has(.fa-plus),
.bill-tabs-wrapper .bill-btn-plus {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.bill-tabs-wrapper a.btn.bill-btn-plus i,
.bill-tabs-wrapper a.btn:has(.fa-plus) i,
.bill-tabs-wrapper button.btn:has(.fa-plus) i,
.bill-tabs-wrapper .bill-btn-plus i,
.bill-btn-plus i {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform: none !important;
}

.bill-tabs-wrapper .bill-switch-box {
    height: 36px !important;
    border-radius: 6px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    display: flex !important;
    align-items: center !important;
}

/* ══════════════════════════════════════════════════════════════════
   Ultra-Compact Single-Row Layout for Customer & Payment Tab on Desktop
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    #tab-customer .bill-master-single-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        gap: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #tab-customer .bill-master-single-row > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
    }
    /* Party / Customer / Supplier */
    #tab-customer .bill-master-single-row > div:has(#accountId) {
        flex: 2.2 1 180px !important;
        min-width: 155px !important;
        max-width: none !important;
    }
    /* Phone */
    #tab-customer .bill-master-single-row > div:has(#customerPhoneId) {
        flex: 1.2 1 100px !important;
        min-width: 90px !important;
        max-width: 125px !important;
    }
    /* Sell Type / Price Category */
    #tab-customer .bill-master-single-row > div:has(#sellType) {
        flex: 1.1 1 95px !important;
        min-width: 85px !important;
        max-width: 130px !important;
    }
    /* Balance */
    #tab-customer .bill-master-single-row > div:has(#accBalance) {
        flex: 0.8 1 70px !important;
        min-width: 60px !important;
        max-width: 90px !important;
    }
    /* Payment Method */
    #tab-customer .bill-master-single-row > div:has(#payType) {
        flex: 1.1 1 95px !important;
        min-width: 85px !important;
        max-width: 120px !important;
    }
    /* Money Account */
    #tab-customer .bill-master-single-row > div:has(#payAccId) {
        flex: 1.8 1 140px !important;
        min-width: 120px !important;
        max-width: none !important;
    }
    /* Currency */
    #tab-customer .bill-master-single-row > div:has(#currency) {
        flex: 1.1 1 95px !important;
        min-width: 85px !important;
        max-width: 130px !important;
    }
    /* Currency Rate */
    #tab-customer .bill-master-single-row > div:has(#currencyRate) {
        flex: 1 1 110px !important;
        min-width: 105px !important;
        max-width: 130px !important;
    }
    /* Remarks / Notes */
    #tab-customer .bill-master-single-row > div:has(#remarks) {
        flex: 2.2 1 150px !important;
        min-width: 130px !important;
        max-width: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Account Statement Tab Filter Bar - Spacious & Side-by-Side Buttons
   ══════════════════════════════════════════════════════════════════ */
#account_statements {
    padding-top: 12px !important;
}

#account_statements .row,
#account_statements .d-flex.flex-wrap.align-items-end {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#account_statements .row > div:not(.d-none) {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#account_statements div:has(#reportStartDate),
#account_statements div:has(#reportEndDate) {
    flex: 0 0 180px !important;
    min-width: 150px !important;
}

#account_statements div:has(#reportPreview) {
    flex: 0 0 auto !important;
}

#account_statements div:has(#reportPreview) .d-flex,
#account_statements .d-flex:has(#reportPreview) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}

#account_statements button.btn,
#account_statements .tab-action-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

#account_statements .account-stmt-container {
    margin-top: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════
   3. THEME IMPLEMENTATION: LIGHT MODE
   ══════════════════════════════════════════════════════════════════ */
html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean,
html[data-theme="light"] .bill-header-clean {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .bill-header-title,
html[data-theme="light"] .bill-header-clean .bill-header-title {
    color: #0F172A !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .bill-header-icon-box,
html[data-theme="light"] .bill-header-clean .bill-header-icon-box {
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .breadcrumb-clean-link,
html[data-theme="light"] .breadcrumb-clean-link {
    color: #64748B !important;
}

html:not(.dark-style):not([data-theme="dark"]) .breadcrumb-clean-link:hover,
html[data-theme="light"] .breadcrumb-clean-link:hover {
    color: #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .breadcrumb-clean-sep,
html[data-theme="light"] .breadcrumb-clean-sep {
    color: #CBD5E1 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .breadcrumb-clean-current,
html[data-theme="light"] .breadcrumb-clean-current {
    color: #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .bill-header-status-indicator,
html[data-theme="light"] .bill-header-clean .bill-header-status-indicator {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .status-dot,
html[data-theme="light"] .bill-header-clean .status-dot {
    background-color: #10B981 !important;
    box-shadow: 0 0 4px #10B981 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .bill-badge-draft,
html[data-theme="light"] .bill-header-clean .bill-badge-draft {
    background: rgba(212, 175, 124, 0.15) !important;
    color: #85581A !important;
    border: 1px solid rgba(212, 175, 124, 0.35) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .bill-badge-number,
html[data-theme="light"] .bill-header-clean .bill-badge-number {
    background: #F1F5F9 !important;
    color: #334155 !important;
    border: 1px solid #E2E8F0 !important;
}

/* Light Action Buttons */
html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-save,
html[data-theme="light"] .bill-header-clean .btn-hero-save {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border: 1px solid #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-save:hover,
html[data-theme="light"] .bill-header-clean .btn-hero-save:hover {
    background: #0B4A39 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-new,
html[data-theme="light"] .bill-header-clean .btn-hero-new {
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
    border: 1px solid rgba(14, 91, 70, 0.25) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-new:hover,
html[data-theme="light"] .bill-header-clean .btn-hero-new:hover {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-back,
html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-print,
html[data-theme="light"] .bill-header-clean .btn-hero-back,
html[data-theme="light"] .bill-header-clean .btn-hero-print {
    background: #FFFFFF !important;
    color: #334155 !important;
    border: 1px solid #CBD5E1 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-back:hover,
html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-print:hover,
html[data-theme="light"] .bill-header-clean .btn-hero-back:hover,
html[data-theme="light"] .bill-header-clean .btn-hero-print:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-pdf,
html:not(.dark-style):not([data-theme="dark"]) .bill-header-clean .btn-hero-delete,
html[data-theme="light"] .bill-header-clean .btn-hero-pdf,
html[data-theme="light"] .bill-header-clean .btn-hero-delete {
    background: #FFFFFF !important;
    color: #DC2626 !important;
    border: 1px solid #FCA5A5 !important;
}

/* Light Tabs Wrapper */
html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper,
html[data-theme="light"] .bill-tabs-wrapper {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-nav-tabs,
html[data-theme="light"] .bill-tabs-wrapper .bill-nav-tabs {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-tab-btn,
html[data-theme="light"] .bill-tabs-wrapper .bill-tab-btn {
    color: #64748B !important;
    background: transparent !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-tab-btn i,
html[data-theme="light"] .bill-tabs-wrapper .bill-tab-btn i {
    color: #94A3B8 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-tab-btn:hover,
html[data-theme="light"] .bill-tabs-wrapper .bill-tab-btn:hover {
    color: #0E5B46 !important;
    background: rgba(14, 91, 70, 0.04) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-tab-btn.active,
html[data-theme="light"] .bill-tabs-wrapper .bill-tab-btn.active {
    color: #0E5B46 !important;
    background: #FFFFFF !important;
    border-bottom: 2px solid #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-tab-btn.active i,
html[data-theme="light"] .bill-tabs-wrapper .bill-tab-btn.active i {
    color: #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-form-label,
html[data-theme="light"] .bill-tabs-wrapper .bill-form-label {
    color: #334155 !important;
}

/* Light Mode Inputs & Select2 */
html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .form-control,
html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .form-select,
html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper input[type="text"],
html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper input[type="number"],
html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper input[type="datetime-local"],
html[data-theme="light"] .bill-tabs-wrapper .form-control,
html[data-theme="light"] .bill-tabs-wrapper .form-select,
html[data-theme="light"] .bill-tabs-wrapper input[type="text"],
html[data-theme="light"] .bill-tabs-wrapper input[type="number"],
html[data-theme="light"] .bill-tabs-wrapper input[type="datetime-local"] {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-form-control-readonly,
html[data-theme="light"] .bill-tabs-wrapper .bill-form-control-readonly {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #334155 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .form-control:focus,
html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .form-select:focus,
html[data-theme="light"] .bill-tabs-wrapper .form-control:focus,
html[data-theme="light"] .bill-tabs-wrapper .form-select:focus {
    border-color: #0E5B46 !important;
    box-shadow: 0 0 0 2px rgba(14, 91, 70, 0.12) !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .select2-container--default .select2-selection--single,
html[data-theme="light"] .bill-tabs-wrapper .select2-container--default .select2-selection--single {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="light"] .bill-tabs-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0F172A !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-btn-plus,
html[data-theme="light"] .bill-tabs-wrapper .bill-btn-plus {
    background: rgba(14, 91, 70, 0.08) !important;
    border: 1px solid rgba(14, 91, 70, 0.25) !important;
    color: #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-tabs-wrapper .bill-btn-plus:hover,
html[data-theme="light"] .bill-tabs-wrapper .bill-btn-plus:hover {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
}

html:not(.dark-style):not([data-theme="dark"]) .bill-switch-box,
html[data-theme="light"] .bill-switch-box {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #334155 !important;
}


/* ══════════════════════════════════════════════════════════════════
   4. THEME IMPLEMENTATION: DARK MODE
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .bill-header-clean,
html.dark-style .bill-header-clean {
    background: #0E1A1D !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .bill-header-clean .bill-header-title,
html.dark-style .bill-header-clean .bill-header-title {
    color: #F8FAFC !important;
}

html[data-theme="dark"] .bill-header-clean .bill-header-icon-box,
html.dark-style .bill-header-clean .bill-header-icon-box {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10B981 !important;
}

html[data-theme="dark"] .breadcrumb-clean-link,
html.dark-style .breadcrumb-clean-link {
    color: #64748B !important;
}

html[data-theme="dark"] .breadcrumb-clean-link:hover,
html.dark-style .breadcrumb-clean-link:hover {
    color: #10B981 !important;
}

html[data-theme="dark"] .breadcrumb-clean-sep,
html.dark-style .breadcrumb-clean-sep {
    color: #475569 !important;
}

html[data-theme="dark"] .breadcrumb-clean-current,
html.dark-style .breadcrumb-clean-current {
    color: #10B981 !important;
}

html[data-theme="dark"] .bill-header-clean .bill-header-status-indicator,
html.dark-style .bill-header-clean .bill-header-status-indicator {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="dark"] .bill-header-clean .status-dot,
html.dark-style .bill-header-clean .status-dot {
    background-color: #10B981 !important;
    box-shadow: 0 0 6px #10B981 !important;
}

html[data-theme="dark"] .bill-header-clean .bill-badge-draft,
html.dark-style .bill-header-clean .bill-badge-draft {
    background: rgba(212, 175, 124, 0.12) !important;
    color: #D4AF7C !important;
    border: 1px solid rgba(212, 175, 124, 0.25) !important;
}

html[data-theme="dark"] .bill-header-clean .bill-badge-number,
html.dark-style .bill-header-clean .bill-badge-number {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
    border: none !important;
}

/* Dark Action Buttons */
html[data-theme="dark"] .bill-header-clean .btn-hero-save,
html.dark-style .bill-header-clean .btn-hero-save {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border: 1px solid #0E5B46 !important;
}

html[data-theme="dark"] .bill-header-clean .btn-hero-save:hover,
html.dark-style .bill-header-clean .btn-hero-save:hover {
    background: #10B981 !important;
}

html[data-theme="dark"] .bill-header-clean .btn-hero-new,
html.dark-style .bill-header-clean .btn-hero-new {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

html[data-theme="dark"] .bill-header-clean .btn-hero-new:hover,
html.dark-style .bill-header-clean .btn-hero-new:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .bill-header-clean .btn-hero-back,
html[data-theme="dark"] .bill-header-clean .btn-hero-print,
html.dark-style .bill-header-clean .btn-hero-back,
html.dark-style .bill-header-clean .btn-hero-print {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #E2E8F0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .bill-header-clean .btn-hero-back:hover,
html[data-theme="dark"] .bill-header-clean .btn-hero-print:hover,
html.dark-style .bill-header-clean .btn-hero-back:hover,
html.dark-style .bill-header-clean .btn-hero-print:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .bill-header-clean .btn-hero-pdf,
html[data-theme="dark"] .bill-header-clean .btn-hero-delete,
html.dark-style .bill-header-clean .btn-hero-pdf,
html.dark-style .bill-header-clean .btn-hero-delete {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #F87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* Dark Tabs Wrapper */
html[data-theme="dark"] .bill-tabs-wrapper,
html.dark-style .bill-tabs-wrapper {
    background: #0E1A1D !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-nav-tabs,
html.dark-style .bill-tabs-wrapper .bill-nav-tabs {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-tab-btn,
html.dark-style .bill-tabs-wrapper .bill-tab-btn {
    color: #94A3B8 !important;
    background: transparent !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-tab-btn i,
html.dark-style .bill-tabs-wrapper .bill-tab-btn i {
    color: #64748B !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-tab-btn:hover,
html.dark-style .bill-tabs-wrapper .bill-tab-btn:hover {
    color: #E2E8F0 !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-tab-btn.active,
html.dark-style .bill-tabs-wrapper .bill-tab-btn.active {
    color: #10B981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border-bottom: 2px solid #10B981 !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-tab-btn.active i,
html.dark-style .bill-tabs-wrapper .bill-tab-btn.active i {
    color: #10B981 !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-form-label,
html.dark-style .bill-tabs-wrapper .bill-form-label {
    color: #94A3B8 !important;
}

/* Dark Mode Inputs & Select2 */
html[data-theme="dark"] .bill-tabs-wrapper .form-control,
html[data-theme="dark"] .bill-tabs-wrapper .form-select,
html[data-theme="dark"] .bill-tabs-wrapper input[type="text"],
html[data-theme="dark"] .bill-tabs-wrapper input[type="number"],
html[data-theme="dark"] .bill-tabs-wrapper input[type="datetime-local"],
html.dark-style .bill-tabs-wrapper .form-control,
html.dark-style .bill-tabs-wrapper .form-select,
html.dark-style .bill-tabs-wrapper input[type="text"],
html.dark-style .bill-tabs-wrapper input[type="number"],
html.dark-style .bill-tabs-wrapper input[type="datetime-local"] {
    background-color: #070F11 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #F1F5F9 !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-form-control-readonly,
html.dark-style .bill-tabs-wrapper .bill-form-control-readonly {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #94A3B8 !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .form-control:focus,
html[data-theme="dark"] .bill-tabs-wrapper .form-select:focus,
html.dark-style .bill-tabs-wrapper .form-control:focus,
html.dark-style .bill-tabs-wrapper .form-select:focus {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .select2-container--default .select2-selection--single,
html.dark-style .bill-tabs-wrapper .select2-container--default .select2-selection--single {
    background-color: #070F11 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-style .bill-tabs-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #F1F5F9 !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-btn-plus,
html.dark-style .bill-tabs-wrapper .bill-btn-plus {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #10B981 !important;
}

html[data-theme="dark"] .bill-tabs-wrapper .bill-btn-plus:hover,
html.dark-style .bill-tabs-wrapper .bill-btn-plus:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .bill-switch-box,
html.dark-style .bill-switch-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94A3B8 !important;
}

/* ── 5. Select2 Global Dropdown Theming ── */
html[data-theme="dark"] .select2-dropdown,
html.dark-style .select2-dropdown {
    background-color: #0E1A1D !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #F1F5F9 !important;
}

html[data-theme="dark"] .select2-dropdown .select2-search__field,
html.dark-style .select2-dropdown .select2-search__field {
    background-color: #070F11 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #F1F5F9 !important;
}

html[data-theme="dark"] .select2-dropdown .select2-results__option,
html.dark-style .select2-dropdown .select2-results__option {
    color: #CBD5E1 !important;
}

html[data-theme="dark"] .select2-dropdown .select2-results__option--highlighted,
html.dark-style .select2-dropdown .select2-results__option--highlighted {
    background-color: #0E5B46 !important;
    color: #FFFFFF !important;
}

html:not(.dark-style):not([data-theme="dark"]) .select2-dropdown,
html[data-theme="light"] .select2-dropdown {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

html:not(.dark-style):not([data-theme="dark"]) .select2-dropdown .select2-search__field,
html[data-theme="light"] .select2-dropdown .select2-search__field {
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

html:not(.dark-style):not([data-theme="dark"]) .select2-dropdown .select2-results__option,
html[data-theme="light"] .select2-dropdown .select2-results__option {
    color: #334155 !important;
}

html:not(.dark-style):not([data-theme="dark"]) .select2-dropdown .select2-results__option--highlighted,
html[data-theme="light"] .select2-dropdown .select2-results__option--highlighted {
    background-color: #0E5B46 !important;
    color: #FFFFFF !important;
}

/* Stock Exceeded Alert Style */
.item-qty-input.stock-exceeded,
input.stock-exceeded {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}
/* ── Ensure Item Search Result Modal Table fits cleanly without horizontal scroll ── */
#search_item_result .table-responsive {
    overflow-x: hidden !important;
}
#search_item_result_table {
    width: 100% !important;
    table-layout: auto !important;
}
#search_item_result_table th,
#search_item_result_table td {
    vertical-align: middle !important;
}
#search_item_result_table td.search-col-name {
    white-space: normal !important;
    word-break: break-word !important;
}

/* ══════════════════════════════════════════════════════════════════
   Refined & Compact Item Information KPI Cards (#class_info)
   ══════════════════════════════════════════════════════════════════ */
#class_info .kpi-stat-card {
    min-height: 48px !important;
    padding: 0.35rem 0.65rem !important;
    border-radius: 9px !important;
    gap: 0.5rem !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

#class_info .kpi-stat-card:hover {
    border-color: #0E5B46 !important;
    background: #F8FAFC !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(14, 91, 70, 0.08) !important;
}

#class_info .kpi-stat-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 7px !important;
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

#class_info .kpi-stat-card:hover .kpi-stat-icon {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
}

#class_info .kpi-stat-content {
    flex: 1 !important;
    min-width: 0 !important;
}

#class_info .kpi-stat-label {
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    color: #64748B !important;
    margin-bottom: 1px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#class_info .kpi-stat-card .form-control {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #0E5B46 !important;
    box-shadow: none !important;
    text-align: start !important;
    line-height: 1.15 !important;
}

#class_info #last_sell_date {
    font-size: 0.92rem !important;
}

/* ── Dark Mode for #class_info KPI Cards ── */
[data-theme="dark"] #class_info .kpi-stat-card,
html.dark-style #class_info .kpi-stat-card {
    background: #0E1A1D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

[data-theme="dark"] #class_info .kpi-stat-card:hover,
html.dark-style #class_info .kpi-stat-card:hover {
    background: #132428 !important;
    border-color: #10B981 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] #class_info .kpi-stat-icon,
html.dark-style #class_info .kpi-stat-icon {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10B981 !important;
}

[data-theme="dark"] #class_info .kpi-stat-card:hover .kpi-stat-icon,
html.dark-style #class_info .kpi-stat-card:hover .kpi-stat-icon {
    background: #10B981 !important;
    color: #070F11 !important;
}

[data-theme="dark"] #class_info .kpi-stat-label,
html.dark-style #class_info .kpi-stat-label {
    color: #94A3B8 !important;
}

[data-theme="dark"] #class_info .kpi-stat-card .form-control,
html.dark-style #class_info .kpi-stat-card .form-control {
    color: #34D399 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Global Collapsible Top Header (.hesba-navbar)
   ══════════════════════════════════════════════════════════════════ */
.hesba-navbar {
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.layout-wrapper {
    transition: margin-top 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#layout-menu {
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1), height 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Collapsed Header State */
html.hesba-header-collapsed .hesba-navbar {
    top: -76px !important;
    transform: translateY(-100%) !important;
    box-shadow: none !important;
}

html.hesba-header-collapsed .layout-wrapper {
    margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Integrated Sidebar Brand Header (.hesba-sidebar-brand)
   Seamlessly integrated into #layout-menu
   ══════════════════════════════════════════════════════════════════ */
.hesba-sidebar-brand {
    display: none !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    width: 100% !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(212, 175, 124, 0.15) !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
    background: transparent !important;
}

.hesba-sidebar-brand .brand-logo-full {
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
    transition: opacity 0.2s ease !important;
}

.hesba-sidebar-brand .brand-logo-mini {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
    display: none !important;
    transition: opacity 0.2s ease !important;
}

/* When the top header is collapsed: Show Sidebar Brand Header on Desktop */
@media (min-width: 1200px) {
    html.hesba-header-collapsed .hesba-sidebar-brand {
        display: flex !important;
    }

    html.hesba-header-collapsed #layout-menu.layout-menu,
    html.hesba-header-collapsed.layout-menu-fixed #layout-menu,
    html.hesba-header-collapsed.layout-menu-collapsed #layout-menu,
    html.hesba-header-collapsed.layout-menu-collapsed.layout-menu-hover #layout-menu,
    html.hesba-header-collapsed .layout-wrapper:not(.layout-horizontal) #layout-menu {
        top: 0 !important;
        padding-top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }
}

/* When the sidebar itself is collapsed to mini width */
html.layout-menu-collapsed .hesba-sidebar-brand {
    padding: 0 0.5rem !important;
}

html.layout-menu-collapsed .hesba-sidebar-brand .brand-logo-full {
    display: none !important;
}

html.layout-menu-collapsed .hesba-sidebar-brand .brand-logo-mini {
    display: inline-block !important;
}

/* Hovering over collapsed sidebar to expand temporarily (Sneat layout-menu-hover) */
html.layout-menu-collapsed.layout-menu-hover .hesba-sidebar-brand .brand-logo-full {
    display: inline-block !important;
}

html.layout-menu-collapsed.layout-menu-hover .hesba-sidebar-brand .brand-logo-mini {
    display: none !important;
}

/* Floating Header Toggle Handle */
.hesba-header-toggle-tab {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1085;
    background: #0E5B46;
    color: #FFFFFF;
    border: 1px solid rgba(212, 175, 124, 0.4);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 3px 14px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.hesba-header-toggle-tab:hover {
    background: #147a5f;
    color: #FFFFFF;
    padding-bottom: 6px;
    box-shadow: 0 6px 16px rgba(14, 91, 70, 0.25);
}

html.hesba-header-collapsed .hesba-header-toggle-tab {
    top: 0 !important;
}

html.hesba-header-collapsed .bill-header-clean {
    margin-top: 14px !important;
}

/* Dark Mode for Header Toggle */
[data-theme="dark"] .hesba-header-toggle-tab,
html.dark-style .hesba-header-toggle-tab {
    background: #0E1A1D !important;
    color: #10B981 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .hesba-header-toggle-tab:hover,
html.dark-style .hesba-header-toggle-tab:hover {
    background: #13272C !important;
    color: #34D399 !important;
    border-color: #10B981 !important;
}
[dir="rtl"] .select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    left: 2rem !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    margin: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    z-index: 3 !important;
    transition: color 0.15s ease-in-out, transform 0.15s ease-in-out !important;
}


    [dir="rtl"] .select2-container .select2-selection--single .select2-selection__clear:hover {
        color: #ef4444 !important;
        transform: translateY(-50%) scale(1.15) !important;
    }


[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 0.85rem !important;
    padding-left: 3.5rem !important;
}

.tabulator .tabulator-footer {
    background: #FAFBFB !important;
    border-top: 1.5px solid var(--z4u-border) !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
}

    .tabulator .tabulator-footer .tabulator-calcs-holder {
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1.5px solid var(--z4u-border) !important;
        box-sizing: border-box !important;
    }

/* ===================================================================
 * Indeterminate checkbox (tree selects, select-all boxes) - was falling back to Sneat purple / black
 * =================================================================== */
.form-check-input:indeterminate {
    background-color: #0E5B46 !important;
    border-color: #0E5B46 !important;
}

[data-theme="dark"] .form-check-input:indeterminate,
html.dark-style .form-check-input:indeterminate {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
}

/* Visible border for unchecked checkboxes in dark mode */
[data-theme="dark"] .form-check-input:not(:checked):not(:indeterminate),
html.dark-style .form-check-input:not(:checked):not(:indeterminate) {
    border-color: #4B6168 !important;
}


/* ===================================================================
 * Z4U Vouchers / Bonds (السندات) Executive Luxury Theme & High-Density Layout
 * =================================================================== */
.voucher-workspace-card {
    background: #ffffff;
    border: 1px solid var(--z4u-border, #E2E8F0);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 16px;
}

/* ── Ultra-Compact & Balanced Items Workspace Card ── */
/* ── Compact & Refined Layout for Bonds & Entries (Executive ERP Refinement) ── */
.bill-page-wrapper,
.master-page-wrapper {
    padding-top: 0.35rem !important;
    padding-bottom: 1.5rem !important;
}

.bill-header-hero.bill-header-clean {
    margin-top: 0px !important;
    margin-bottom: 4px !important;
    padding: 4px 12px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
}

.bill-page-wrapper .show-page,
.bill-page-wrapper form#entryForm,
.bill-page-wrapper form,
.master-page-wrapper .show-page,
.master-page-wrapper form {
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.bill-header-hero.bill-header-clean .bill-header-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.bill-header-hero.bill-header-clean .bill-header-icon-box {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
}

.bill-header-hero.bill-header-clean .btn-hero-action {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
}

.bill-tabs-wrapper {
    margin-bottom: 8px !important;
    border-radius: 8px !important;
}

.bill-tabs-wrapper .bill-nav-tabs {
    padding: 2px 8px 0 !important;
    gap: 3px !important;
}

.bill-tabs-wrapper .bill-tab-btn {
    padding: 3px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.bill-tabs-wrapper .bill-tab-content {
    padding: 8px 12px 10px !important;
}

.bill-tabs-wrapper .bill-master-single-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force icons and titles to stay firmly grouped together at start - NEVER split left and right */
.bill-form-label,
.bill-tabs-wrapper .bill-form-label,
.items-workspace-card .bill-form-label,
.items-workspace-card .items-search-command-bar .bill-form-label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    justify-content: flex-start !important;
    text-align: start !important;
    width: auto !important;
    line-height: 1.3 !important;
}

.bill-form-label .fa-rotate-right,
.bill-form-label .fa-rotate-left {
    margin-inline-start: auto !important;
}

.bill-tabs-wrapper .form-control,
.bill-tabs-wrapper .form-select,
.bill-tabs-wrapper .select2-container--default .select2-selection--single,
.items-workspace-card .form-control,
.items-workspace-card .form-select,
.items-workspace-card .select2-container--default .select2-selection--single {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 0.85rem !important;
    border-radius: 7px !important;
}

.bill-tabs-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
.items-workspace-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    padding-left: 20px !important;
    padding-right: 10px !important;
}

.bill-tabs-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow,
.items-workspace-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

.items-workspace-card {
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
}

.items-workspace-card .items-card-header {
    padding: 0.35rem 0.85rem !important;
    min-height: 36px !important;
}

.items-workspace-card .items-header-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.items-workspace-card .bill-section-title {
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

.items-workspace-card .items-search-command-bar {
    padding: 0.4rem 0.85rem !important;
}

.items-workspace-card .items-search-command-bar .form-control,
.items-workspace-card .items-search-command-bar .form-select,
.items-workspace-card .items-search-command-bar .select2-container--default .select2-selection--single {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 0.85rem !important;
    border-radius: 7px !important;
    border: 1px solid #CBD5E1 !important;
}

#addEntryDetialToTableButton,
.bill-btn-add,
.items-workspace-card .items-search-command-bar #addEntryDetialToTableButton {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    padding: 0 16px !important;
    border-radius: 7px !important;
}

.items-workspace-card .items-table-footer-bar {
    padding: 0.35rem 0.85rem !important;
    min-height: 32px !important;
}

#entryDetailTable thead th {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

#entryDetailTable tbody tr td {
    padding: 0.45rem 0.75rem !important;
    vertical-align: middle !important;
    font-size: 0.84rem !important;
}

.bill-totals-card,
.bill-summary-card {
    margin-bottom: 12px !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.bill-action-bar-card,
.bill-footer-bar {
    margin-top: 12px !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    min-height: 44px !important;
}

.bill-action-bar-card .btn,
.bill-footer-bar .btn {
    height: 34px !important;
    padding: 0 16px !important;
    font-size: 0.84rem !important;
    border-radius: 7px !important;
}

/* Adaptive voucher badges & pills */
.badge-debit-val {
    background: rgba(14, 91, 70, 0.1) !important;
    color: #0E5B46 !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
}

.badge-credit-val {
    background: rgba(217, 56, 58, 0.1) !important;
    color: #D9383A !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
}

.voucher-count-pill {
    background: rgba(14, 91, 70, 0.08) !important;
    color: #0E5B46 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}

.voucher-footer-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 6px !important;
    background: rgba(14, 91, 70, 0.07) !important;
    color: #0E5B46 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

.voucher-footer-count .badge-num {
    background: #ffffff !important;
    color: #1E293B !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.82rem !important;
}

/* Dark mode overrides */
[data-theme="dark"] .bill-totals-card,
[data-theme="dark"] .bill-summary-card,
html.dark-style .bill-totals-card,
html.dark-style .bill-summary-card {
    background: #142226 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .items-workspace-card .bill-section-title,
html.dark-style .items-workspace-card .bill-section-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .items-workspace-card .items-card-header .text-muted,
html.dark-style .items-workspace-card .items-card-header .text-muted {
    color: #94A3B8 !important;
}

[data-theme="dark"] .items-workspace-card .items-search-command-bar .bill-form-label,
html.dark-style .items-workspace-card .items-search-command-bar .bill-form-label {
    color: #94A3B8 !important;
}

[data-theme="dark"] .items-workspace-card .items-search-command-bar .select2-container--default .select2-selection--single,
html.dark-style .items-workspace-card .items-search-command-bar .select2-container--default .select2-selection--single {
    background: #0E1A1D !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .items-workspace-card .items-search-command-bar .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-style .items-workspace-card .items-search-command-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #E2E8F0 !important;
}

[data-theme="dark"] #entryDetailTable tbody tr td,
html.dark-style #entryDetailTable tbody tr td {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .badge-debit-val,
html.dark-style .badge-debit-val {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .badge-credit-val,
html.dark-style .badge-credit-val {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #F87171 !important;
}

[data-theme="dark"] .voucher-count-pill,
html.dark-style .voucher-count-pill {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .voucher-footer-count,
html.dark-style .voucher-footer-count {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .voucher-footer-count .badge-num,
html.dark-style .voucher-footer-count .badge-num {
    background: #0F172A !important;
    color: #F8FAFC !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}


.voucher-card-header {
    padding: 10px 16px;
    background: #ffffff;
    border-bottom: 1px solid #EDF2F7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voucher-command-bar {
    background: #F8FAFC;
    padding: 10px 16px;
    border-bottom: 1px solid #E2E8F0;
}

.voucher-summary-strip {
    background: #F8FAFC;
    padding: 10px 16px;
    border-top: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.voucher-summary-metric {
    display: flex;
    align-items: center;
    gap: 8px;
}

.voucher-summary-metric .metric-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748B;
}

.voucher-summary-metric .metric-value {
    font-size: 1.05rem;
    font-weight: 800;
    font-family: inherit;
}

.voucher-empty-placeholder {
    padding: 32px 16px;
    text-align: center;
    color: #94A3B8;
}

.voucher-empty-placeholder i {
    font-size: 2rem;
    margin-bottom: 8px;
    color: #CBD5E1;
    display: block;
}

/* Dark mode overrides for vouchers */
[data-theme="dark"] .voucher-workspace-card,
html.dark-style .voucher-workspace-card {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .voucher-card-header,
html.dark-style .voucher-card-header {
    background: #121F23 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .voucher-command-bar,
html.dark-style .voucher-command-bar {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .voucher-summary-strip,
html.dark-style .voucher-summary-strip {
    background: #0E181B !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .voucher-summary-metric .metric-label,
html.dark-style .voucher-summary-metric .metric-label {
    color: #94A3B8 !important;
}

[data-theme="dark"] .voucher-empty-placeholder,
html.dark-style .voucher-empty-placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .voucher-empty-placeholder i,
html.dark-style .voucher-empty-placeholder i {
    color: #334155 !important;
}

/* ── Required Fields Highlight for ZATCA / ETA / Commercial Entities ── */
.border-required-highlight,
.form-control.border-required-highlight,
.form-select.border-required-highlight,
.form-control.border-primary,
.form-select.border-primary,
.layout-page .show-page .form-control.border-primary,
.layout-page .show-page .form-select.border-primary,
.layout-page .show-page .form-control.border-required-highlight,
.layout-page .show-page .form-select.border-required-highlight {
    border: 1.8px solid #7367f0 !important;
    border-width: 1.8px !important;
    border-style: solid !important;
    border-color: #7367f0 !important;
    box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.22) !important;
}

[data-theme="dark"] .border-required-highlight,
[data-theme="dark"] .form-control.border-required-highlight,
[data-theme="dark"] .form-select.border-required-highlight,
[data-theme="dark"] .form-control.border-primary,
[data-theme="dark"] .form-select.border-primary,
[data-theme="dark"] .layout-page .show-page .form-control.border-primary,
[data-theme="dark"] .layout-page .show-page .form-select.border-primary,
[data-theme="dark"] .layout-page .show-page .form-control.border-required-highlight,
[data-theme="dark"] .layout-page .show-page .form-select.border-required-highlight,
html.dark-style .border-required-highlight,
html.dark-style .form-control.border-required-highlight,
html.dark-style .form-select.border-required-highlight,
html.dark-style .form-control.border-primary,
html.dark-style .form-select.border-primary,
html.dark-style .layout-page .show-page .form-control.border-primary,
html.dark-style .layout-page .show-page .form-select.border-primary,
html.dark-style .layout-page .show-page .form-control.border-required-highlight,
html.dark-style .layout-page .show-page .form-select.border-required-highlight {
    border: 1.8px solid #8c57ff !important;
    border-width: 1.8px !important;
    border-style: solid !important;
    border-color: #8c57ff !important;
    box-shadow: 0 0 0 3px rgba(140, 87, 255, 0.3) !important;
}

/* ── Compact Master Tabs System for Customer & Supplier ── */
.master-tabs-nav {
    display: flex !important;
    gap: 4px !important;
    padding: 0 4px !important;
    margin-bottom: 6px !important;
    border-bottom: 2px solid rgba(14, 91, 70, 0.15) !important;
    list-style: none !important;
}

.master-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #64748B !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    margin-bottom: -2px !important;
    border-radius: 6px 6px 0 0 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
}

.master-tab-btn i {
    font-size: 0.85rem !important;
}

.master-tab-btn:hover {
    color: var(--z4u-primary, #0E5B46) !important;
    background: rgba(14, 91, 70, 0.05) !important;
}

.master-tab-btn.active {
    color: var(--z4u-primary, #0E5B46) !important;
    background: #FFFFFF !important;
    border-bottom-color: var(--z4u-primary, #0E5B46) !important;
    font-weight: 800 !important;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .master-tabs-nav,
html.dark-style .master-tabs-nav {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .master-tab-btn,
html.dark-style .master-tab-btn {
    color: #94A3B8 !important;
}

[data-theme="dark"] .master-tab-btn:hover,
html.dark-style .master-tab-btn:hover {
    color: #38D9A9 !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .master-tab-btn.active,
html.dark-style .master-tab-btn.active {
    color: #38D9A9 !important;
    background: #142226 !important;
    border-bottom-color: #38D9A9 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Ultra-Compact Cards inside Master Tabs Content */
.master-tabs-content .master-command-card {
    margin-bottom: 6px !important;
    border-radius: 8px !important;
}

.master-tabs-content .master-card-header {
    padding: 5px 12px !important;
    min-height: 32px !important;
}

.master-tabs-content .master-card-header h5 {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    gap: 0.4rem !important;
}

.master-tabs-content .master-card-header h5 i {
    font-size: 0.9rem !important;
}

.master-tabs-content .master-card-body {
    padding: 8px 12px !important;
}

/* ── Form Label Custom Direction & Alignment ── */
.master-tabs-content .form-label-custom,
.form-label-custom {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .master-tabs-content .form-label-custom,
html[dir="rtl"] .form-label-custom {
    direction: rtl !important;
    text-align: right !important;
    flex-direction: row !important;
}

html[dir="rtl"] .master-tabs-content .form-label-custom.justify-content-between,
html[dir="rtl"] .form-label-custom.d-flex.justify-content-between {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}

html[dir="rtl"] .form-label-custom .icon-refresh-action {
    margin-inline-start: auto !important;
}

.master-tabs-content .form-control,
.master-tabs-content .form-select,
.master-tabs-content .select2-container--default .select2-selection--single {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 0.82rem !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 6px !important;
}

/* ── Compact Addon & Input Group Alignment in Master Tabs ── */
.master-tabs-content .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
}

.master-tabs-content .input-group-text {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    padding: 0 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* RTL Input Group Merged Rounded Corners */
html[dir="rtl"] .master-tabs-content .input-group > .form-control:first-child,
html[dir="rtl"] .master-tabs-content .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

html[dir="rtl"] .master-tabs-content .input-group > .input-group-text:last-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

/* LTR Fallback */
html[dir="ltr"] .master-tabs-content .input-group > .form-control:not(:last-child) {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

html[dir="ltr"] .master-tabs-content .input-group > .input-group-text:last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
}

/* Dark Mode Input Group Text Theming */
[data-theme="dark"] .master-tabs-content .input-group-text,
html.dark-style .master-tabs-content .input-group-text {
    background-color: #16262B !important;
    border-color: #24383D !important;
    color: #D4AF7C !important;
}

/* Quick Add Button Compact 32px (Matches select dropdown height) */
.master-tabs-content .btn-quick-add {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.master-tabs-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    font-size: 0.82rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.master-tabs-content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}

.master-tabs-content .radio-pill-group {
    gap: 0.35rem !important;
}

.master-tabs-content .radio-pill-item {
    padding: 3px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
}

.master-tabs-content .btn-map-trigger {
    padding: 2px 10px !important;
    font-size: 0.76rem !important;
    border-radius: 6px !important;
    height: 26px !important;
}

.master-page-wrapper .master-action-footer {
    padding: 6px 14px !important;
    border-radius: 8px !important;
    margin-top: 6px !important;
}

.master-page-wrapper .master-action-footer button,
.master-page-wrapper .master-action-footer a {
    height: 32px !important;
    font-size: 0.82rem !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ── Definition Cards & Master Views Search Clean ── */
.smart-search-group .smart-search-input {
    padding-inline-end: 1rem !important;
}


/* ── Quantity Stepper inside Modals & Tables (Search Items & Groups) ── */
.qty-spin-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 86px;
    margin: 0 auto;
    direction: ltr !important;
}

.qty-spin-wrapper .search-quantity,
.qty-spin-wrapper .quantity {
    width: 100% !important;
    height: 34px !important;
    padding-right: 22px !important;
    padding-left: 6px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 7px !important;
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

[data-theme="dark"] .qty-spin-wrapper .search-quantity,
html.dark-style .qty-spin-wrapper .search-quantity,
[data-theme="dark"] .qty-spin-wrapper .quantity,
html.dark-style .qty-spin-wrapper .quantity {
    background-color: #1a2332 !important;
    border-color: #334155 !important;
    color: #F8FAFC !important;
}

.qty-spin-controls {
    position: absolute;
    right: 3px;
    top: 2px;
    bottom: 2px;
    width: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    user-select: none;
}

[data-theme="dark"] .qty-spin-controls,
html.dark-style .qty-spin-controls {
    border-left-color: rgba(255, 255, 255, 0.1);
}

.qty-spin-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: #64748B;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 3px;
    line-height: 1;
}

.qty-spin-arrow:hover {
    background: rgba(14, 91, 70, 0.15);
    color: #0E5B46;
}

[data-theme="dark"] .qty-spin-arrow:hover,
html.dark-style .qty-spin-arrow:hover {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

.qty-spin-arrow:active {
    transform: scale(0.9);
}

/* Fallback: Allow native spin buttons for .search-quantity or .quantity when no wrapper */
.search-quantity::-webkit-inner-spin-button,
.search-quantity::-webkit-outer-spin-button,
.quantity::-webkit-inner-spin-button,
.quantity::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
    display: block !important;
}


/* ==========================================================================
   GLOBAL DARK MODE: UNIVERSAL INPUTS & FORM CONTROLS OVERRIDE (ALL PAGES)
   ========================================================================== */

/* 1. All Inputs, Selects & Textareas across all wrappers */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .layout-page .form-control,
html[data-theme="dark"] .layout-page .form-select,
html[data-theme="dark"] .layout-page .show-page .form-control,
html[data-theme="dark"] .layout-page .show-page .form-select,
html[data-theme="dark"] .layout-page .sales-modal .form-control,
html[data-theme="dark"] .layout-page .sales-modal .form-select,
html[data-theme="dark"] .layout-page .sales-modal input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .layout-page .show-page input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .layout-page .show-page select,
html[data-theme="dark"] .layout-page .show-page textarea,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html.dark-style .form-control,
html.dark-style .form-select,
html.dark-style .layout-page .form-control,
html.dark-style .layout-page .form-select,
html.dark-style .layout-page .show-page .form-control,
html.dark-style .layout-page .show-page .form-select,
html.dark-style .layout-page .sales-modal .form-control,
html.dark-style .layout-page .sales-modal .form-select,
html.dark-style .layout-page .sales-modal input:not([type="checkbox"]):not([type="radio"]),
html.dark-style .layout-page .show-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-style .layout-page .show-page select,
html.dark-style .layout-page .show-page textarea,
html.dark-style input.form-control,
html.dark-style select.form-select,
html.dark-style textarea.form-control,
html.dark-style input[type="text"],
html.dark-style input[type="number"],
html.dark-style input[type="date"],
html.dark-style input[type="datetime-local"],
html.dark-style input[type="email"],
html.dark-style input[type="tel"],
html.dark-style input[type="password"],
html.dark-style input[type="search"],
html.dark-style textarea,
html.dark-style select {
    background-color: #0A1214 !important;
    background-image: none !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
    -webkit-text-fill-color: #F1F5F9 !important;
}

/* 2. Focus State */
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .layout-page .show-page .form-control:focus,
html[data-theme="dark"] .layout-page .show-page .form-select:focus,
html[data-theme="dark"] .layout-page .sales-modal input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html.dark-style .form-control:focus,
html.dark-style .form-select:focus,
html.dark-style .layout-page .show-page .form-control:focus,
html.dark-style .layout-page .show-page .form-select:focus,
html.dark-style .layout-page .sales-modal input:not([type="checkbox"]):not([type="radio"]):focus,
html.dark-style input:focus,
html.dark-style textarea:focus,
html.dark-style select:focus {
    background-color: #0E181B !important;
    border-color: #D4AF7C !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 124, 0.25) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* 3. Disabled & Readonly State */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] .layout-page .show-page .form-control:disabled,
html[data-theme="dark"] .layout-page .show-page .form-control[readonly],
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] textarea[readonly],
html.dark-style .form-control:disabled,
html.dark-style .form-control[readonly],
html.dark-style .form-select:disabled,
html.dark-style .layout-page .show-page .form-control:disabled,
html.dark-style .layout-page .show-page .form-control[readonly],
html.dark-style input:disabled,
html.dark-style input[readonly],
html.dark-style select:disabled,
html.dark-style textarea:disabled,
html.dark-style textarea[readonly] {
    background-color: #111E22 !important;
    border-color: #1F3237 !important;
    color: #CBD5E1 !important;
    -webkit-text-fill-color: #CBD5E1 !important;
    opacity: 0.9 !important;
}

/* 4. Placeholder */
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html.dark-style .form-control::placeholder,
html.dark-style input::placeholder,
html.dark-style textarea::placeholder {
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
}

/* 5. Select2 Controls in Dark Mode */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html.dark-style .select2-container--default .select2-selection--single {
    background-color: #0A1214 !important;
    border: 1.5px solid #24383D !important;
    color: #F1F5F9 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #F1F5F9 !important;
    -webkit-text-fill-color: #F1F5F9 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html.dark-style .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
}

html[data-theme="dark"] .select2-dropdown,
html.dark-style .select2-dropdown {
    background-color: #16262B !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html.dark-style .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #0A1214 !important;
    border-color: #24383D !important;
    color: #F1F5F9 !important;
    -webkit-text-fill-color: #F1F5F9 !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark-style .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0E5B46 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html.dark-style .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #1C3036 !important;
    color: #D4AF7C !important;
}


/* ══════════════════════════════════════════════════════════════════
   Active / Selected Row in Invoice Items Grid (#items-table)
   ══════════════════════════════════════════════════════════════════ */
/*#items-table tbody tr {
    cursor: pointer;
}
*/
    #items-table tbody tr td.col-sticky-code,
    #items-table tbody tr td.col-sticky-name {
        cursor: pointer;
    }

#items-table tbody tr input,
#items-table tbody tr select {
    cursor: auto;
}

#items-table tbody tr .btn-delete-row,
#items-table tbody tr .remove-item {
    cursor: pointer;
}

#items-table tbody tr.selected-item-row {
    position: relative;
    z-index: 5;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Light Mode Selected Row */
html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row td {
    background: #E8F5EE !important;
    color: #0E5B46 !important;
    border-top: 1.5px solid #0E5B46 !important;
    border-bottom: 1.5px solid #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row td.col-sticky-num,
html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row td.col-sticky-code,
html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row td.col-sticky-name,
html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row td.col-sticky-action {
    background: #E8F5EE !important;
    color: #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row td.col-sticky-name {
    font-weight: 800 !important;
    color: #0E5B46 !important;
}

html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row td.col-sticky-num {
    border-inline-start: 4px solid #0E5B46 !important;
    color: #0E5B46 !important;
    font-weight: 800 !important;
}

html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row .form-control,
html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row .form-select,
html:not(.dark-style):not([data-theme="dark"]) #items-table tbody tr.selected-item-row .compact-cell-group {
    border-color: #0E5B46 !important;
    background-color: #FFFFFF !important;
}

/* Dark Mode Selected Row */
[data-theme="dark"] #items-table tbody tr.selected-item-row td,
html.dark-style #items-table tbody tr.selected-item-row td {
    background: #17382F !important;
    color: #F8FAFC !important;
    border-top: 1.5px solid rgba(16, 185, 129, 0.7) !important;
    border-bottom: 1.5px solid rgba(16, 185, 129, 0.7) !important;
}

[data-theme="dark"] #items-table tbody tr.selected-item-row td.col-sticky-num,
[data-theme="dark"] #items-table tbody tr.selected-item-row td.col-sticky-code,
[data-theme="dark"] #items-table tbody tr.selected-item-row td.col-sticky-name,
[data-theme="dark"] #items-table tbody tr.selected-item-row td.col-sticky-action,
html.dark-style #items-table tbody tr.selected-item-row td.col-sticky-num,
html.dark-style #items-table tbody tr.selected-item-row td.col-sticky-code,
html.dark-style #items-table tbody tr.selected-item-row td.col-sticky-name,
html.dark-style #items-table tbody tr.selected-item-row td.col-sticky-action {
    background: #17382F !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] #items-table tbody tr.selected-item-row td.col-sticky-name,
html.dark-style #items-table tbody tr.selected-item-row td.col-sticky-name {
    color: #34D399 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.35) !important;
}

[data-theme="dark"] #items-table tbody tr.selected-item-row td.col-sticky-num,
html.dark-style #items-table tbody tr.selected-item-row td.col-sticky-num {
    border-inline-start: 4px solid #10B981 !important;
    color: #34D399 !important;
    font-weight: 800 !important;
}

[data-theme="dark"] #items-table tbody tr.selected-item-row .form-control,
[data-theme="dark"] #items-table tbody tr.selected-item-row .form-select,
[data-theme="dark"] #items-table tbody tr.selected-item-row .compact-cell-group,
html.dark-style #items-table tbody tr.selected-item-row .form-control,
html.dark-style #items-table tbody tr.selected-item-row .form-select,
html.dark-style #items-table tbody tr.selected-item-row .compact-cell-group {
    border-color: #10B981 !important;
    background-color: #0E231E !important;
    color: #FFFFFF !important;
}

/* Item Analysis Button Active State in Invoice Header */
#itemAnalysisBtn {
    transition: all 0.25s ease !important;
}

#itemAnalysisBtn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#itemAnalysisBtn:not(:disabled) {
    opacity: 1 !important;
    cursor: pointer !important;
}

html:not(.dark-style):not([data-theme="dark"]) #itemAnalysisBtn:not(:disabled) {
    background: #0E5B46 !important;
    color: #FFFFFF !important;
    border-color: #0E5B46 !important;
    box-shadow: 0 2px 8px rgba(14, 91, 70, 0.25) !important;
}

html:not(.dark-style):not([data-theme="dark"]) #itemAnalysisBtn:not(:disabled) i {
    color: #A7F3D0 !important;
}

[data-theme="dark"] #itemAnalysisBtn:not(:disabled),
html.dark-style #itemAnalysisBtn:not(:disabled) {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(14, 91, 70, 0.45)) !important;
    border: 1px solid #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] #itemAnalysisBtn:not(:disabled) i,
html.dark-style #itemAnalysisBtn:not(:disabled) i {
    color: #34D399 !important;
}

/* ── Bill Table Price & Quantity Column Widths ── */
.data-grid-container table thead th:nth-child(5),
.data-grid-container table tbody td:nth-child(6) {
    min-width: 125px !important;
}

.data-grid-container table thead th:nth-child(6),
.data-grid-container table tbody td:nth-child(8) {
    min-width: 110px !important;
}

.data-grid-container table tbody td .unit_price_input {
    min-width: 115px !important;
}

.data-grid-container table tbody td .item-qty-input,
.data-grid-container table tbody td:nth-child(8) input {
    min-width: 95px !important;
}


/* ── Select2: clear (×) button, generic for all single selects ── */

/* RTL: arrow on the left, so put the × just to the right of it */
[dir="rtl"] .select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    left: 1.9rem !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    float: none !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 3 !important;
}

/* LTR: arrow on the right, so put the × just to the left of it */
[dir="ltr"] .select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 1.9rem !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    float: none !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 3 !important;
}

/* Keep the selected text from running under the × and the arrow */
[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 3.4rem !important;
}

[dir="ltr"] .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 3.4rem !important;
}

/* Hover feedback */
.select2-container .select2-selection--single .select2-selection__clear:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12);
}


/* Daif By Gaaad */
[data-theme="dark"] .entry-pagination-bar,
html.dark-style .entry-pagination-bar {
    background: #121F23 !important;
    background-color: #121F23 !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

    [data-theme="dark"] .entry-pagination-bar .text-muted,
    html.dark-style .entry-pagination-bar .text-muted {
        color: #94A3B8 !important;
    }

    [data-theme="dark"] .entry-pagination-bar strong,
    html.dark-style .entry-pagination-bar strong {
        color: #F1F5F9 !important;
    }

[data-theme="dark"] .data-grid-container::-webkit-scrollbar,
html.dark-style .data-grid-container::-webkit-scrollbar {
    background: #121F23 !important;
}

[data-theme="dark"] .data-grid-container::-webkit-scrollbar-thumb,
html.dark-style .data-grid-container::-webkit-scrollbar-thumb {
    background: #24383D !important;
}

    [data-theme="dark"] .data-grid-container::-webkit-scrollbar-thumb:hover,
    html.dark-style .data-grid-container::-webkit-scrollbar-thumb:hover {
        background: #10B981 !important;
    }




.layout-page:has(.report-container) .container,
.show-page:has(.report-container) .container,
.container:has(.report-container),
.layout-page .show-page:has(.report-container) .container,
.show-page .container {
    max-width: 100% !important;
}

.layout-page:has(.report-container),
.layout-page:has(.report-container) .show-page,
.show-page:has(.report-container) {
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}