/* ==========================================================================
   EmroiderySolution BMS - Professional Enterprise UI/UX Design System
   Designed by Pro Front-End Developer for Yashini Enterprise
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography & Global Reset
   -------------------------------------------------------------------------- */
:root {
    --font-serif: sans-serif;
    --font-sans: sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --base-font-size: 1rem;
    /* Unified Brand Palette (Derived Strictly From Logo: Navy #14213D, Teal #005F73, Amber #FCA311) */
    --logo-navy: #14213D;
    --logo-navy-dark: #0D1627;
    --logo-teal: #005F73;
    --logo-teal-hover: #0A7B94;
    --logo-teal-light: rgba(0, 95, 115, 0.12);
    --logo-amber: #FCA311;
    --logo-amber-hover: #E59819;
    --logo-amber-light: rgba(252, 163, 17, 0.15);

    --primary-navy: #14213D;
    --primary-navy-dark: #0D1627;
    --accent-amber: #FCA311;
    --accent-amber-light: #fef3c7;
    --success-emerald: #005F73;
    --bs-primary: #005F73;
    --bs-warning: #FCA311;
}

html {
    font-family: var(--font-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    color-scheme: light dark;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
}

body {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.005em;
    margin: 0;
    padding: 0;
}

/* Universal Typography: Sans-Serif */
*:not(i):not([class*="fa-"]):not([class*="lucide"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: sans-serif;
}

h1, .h1 { font-family: sans-serif !important; font-size: 2rem; font-weight: 700; }
h2, .h2 { font-family: sans-serif !important; font-size: 1.625rem; font-weight: 700; }
h3, .h3 { font-family: sans-serif !important; font-size: 1.375rem; font-weight: 700; }
h4, .h4 { font-family: sans-serif !important; font-size: 1.15rem; font-weight: 600; }
h5, .h5 { font-family: sans-serif !important; font-size: 1rem; font-weight: 600; }
h6, .h6 { font-family: sans-serif !important; font-size: 0.875rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Logo-Unified Design System Utilities
   (All UI colors derived strictly from Logo: Navy #14213D, Teal #005F73, Amber #FCA311)
   -------------------------------------------------------------------------- */
.bg-brand-navy { background-color: #14213D !important; }
.bg-brand-teal { background-color: #005F73 !important; }
.bg-brand-teal-hover:hover { background-color: #0A7B94 !important; }
.bg-brand-amber { background-color: #FCA311 !important; }
.bg-brand-amber-hover:hover { background-color: #E59819 !important; }

.text-brand-navy { color: #14213D !important; }
.text-brand-teal { color: #005F73 !important; }
.text-brand-amber { color: #FCA311 !important; }

.border-brand-teal { border-color: #005F73 !important; }
.border-brand-amber { border-color: #FCA311 !important; }

/* ==========================================================================
   Universal Action Button Contrast & Explicit Text Colors
   ========================================================================== */
/* 1. Primary & Dark Action Buttons (Deep Brand Teal & Navy, Pure White Text) */
.btn-primary,
button.btn-primary,
a.btn-primary,
button.bg-emerald-600,
a.bg-emerald-600,
button.bg-indigo-600,
a.bg-indigo-600,
button.bg-blue-600,
a.bg-blue-600,
#saveProfileBtn,
button[type="submit"]:not(.btn-warning):not(.btn-light):not(.btn-outline-light):not(.btn-secondary):not([class*="bg-amber"]):not([class*="bg-yellow"]):not(.btn-danger) {
    background-color: #005F73 !important;
    border-color: #005F73 !important;
    color: #ffffff !important;
}

.btn-primary *,
button.btn-primary *,
a.btn-primary *,
button.bg-indigo-600 *,
button.bg-emerald-600 *,
#saveProfileBtn span {
    color: #ffffff !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
#saveProfileBtn:hover,
button.bg-emerald-600:hover,
a.bg-emerald-600:hover,
button.bg-indigo-600:hover,
a.bg-indigo-600:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover,
.hover\:bg-emerald-700:hover,
.hover\:bg-emerald-500:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-blue-700:hover {
    background-color: #0A7B94 !important;
    border-color: #0A7B94 !important;
    color: #ffffff !important;
}

/* 2. Amber & Warning Action Buttons (Logo Amber #FCA311, Bold Black/Navy Text #0D1627) */
.btn-warning,
.btn-accent,
.btn-upgrade,
button.btn-warning,
button.bg-amber-500,
a.bg-amber-500,
button.bg-amber-400,
a.bg-amber-400 {
    background-color: #FCA311 !important;
    border-color: #E59819 !important;
    color: #0D1627 !important;
    font-weight: 800 !important;
}

.btn-warning *,
button.btn-warning *,
button.bg-amber-500 *,
a.bg-amber-500 * {
    color: #0D1627 !important;
    font-weight: 800 !important;
}

.btn-warning:hover,
.btn-accent:hover,
.btn-upgrade:hover,
button.btn-warning:hover,
button.bg-amber-500:hover,
a.bg-amber-500:hover {
    background-color: #E59819 !important;
    border-color: #CC830F !important;
    color: #000000 !important;
}

/* 3. Light & Neutral Buttons (White / Slate Pills, Dark Navy Text #14213D) */
.btn-light,
button.border-slate-300,
a.border-slate-300,
button.bg-slate-100,
a.bg-slate-100 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #14213D !important;
    font-weight: 700 !important;
}

.btn-light *,
button.border-slate-300 *,
a.border-slate-300 * {
    color: #14213D !important;
}

/* Links & Text Highlights */
a.text-emerald-600,
a.text-indigo-600,
a.text-blue-600 {
    color: #005F73 !important;
}
a.text-emerald-600:hover,
a.text-indigo-600:hover,
a.text-blue-600:hover {
    color: #0A7B94 !important;
}

/* Focus Rings */
input:focus,
select:focus,
textarea:focus {
    border-color: #005F73 !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 115, 0.22) !important;
}
/* Subtle brand tints for chips, badges, and soft backdrops */
.bg-indigo-50,
.bg-blue-50,
.bg-cyan-50 {
    background-color: rgba(0, 95, 115, 0.08) !important;
}
.border-indigo-200,
.border-indigo-300,
.border-blue-200,
.border-blue-300 {
    border-color: rgba(0, 95, 115, 0.25) !important;
}
.text-indigo-600,
.text-indigo-700,
.text-blue-600 {
    color: #005F73 !important;
}
/* End of Logo-Unified Utilities */


/* --------------------------------------------------------------------------
   2. Global Theme Base (Light & Dark System)
   -------------------------------------------------------------------------- */
html.dark,
html.dark body {
    background-color: #0a101d !important;
    color: #f1f5f9 !important;
    color-scheme: dark;
}

html.dark header {
    background-color: rgba(13, 22, 39, 0.95) !important;
    border-color: #1e293b !important;
}

html.dark aside#app-sidebar {
    background-color: #0d1627 !important;
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}

html.dark .bg-slate-50 {
    background-color: #0a101d !important;
}

html.dark .bg-white.rounded-lg,
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-3xl,
html.dark .bg-white.shadow,
html.dark .bg-white.shadow-sm,
html.dark .bg-white.shadow-md,
html.dark .bg-white.shadow-lg,
html.dark .bg-white.shadow-2xs,
html.dark a.bg-white,
html.dark button.bg-white {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark .text-slate-900:not(.badge-text) {
    color: #f8fafc !important;
}
html.dark .text-slate-800:not(.badge-text) {
    color: #f1f5f9 !important;
}
html.dark .text-slate-700:not(.badge-text) {
    color: #cbd5e1 !important;
}

html.dark .border-slate-200,
html.dark .border-slate-300 {
    border-color: #1e293b !important;
}

/* --------------------------------------------------------------------------
   3. Professional Elevation & Cards System (.erp-card)
   -------------------------------------------------------------------------- */
.erp-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(15, 43, 72, 0.04), 0 1px 2px -1px rgba(15, 43, 72, 0.03);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
    position: relative;
}

.erp-card:hover {
    box-shadow: 0 10px 25px -4px rgba(15, 43, 72, 0.07), 0 4px 6px -2px rgba(15, 43, 72, 0.03);
    border-color: rgba(203, 213, 225, 0.95);
}

.dark .erp-card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
}

.dark .erp-card:hover {
    border-color: rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.65);
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
}

.dark .glass-card {
    background: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

/* Metric / KPI Card Accent Glow */
.kpi-accent-amber {
    border-top: 3px solid #f59e0b;
}
.kpi-accent-indigo {
    border-top: 3px solid #6366f1;
}
.kpi-accent-emerald {
    border-top: 3px solid #10b981;
}
.kpi-accent-cyan {
    border-top: 3px solid #06b6d4;
}
.kpi-accent-violet {
    border-top: 3px solid #8b5cf6;
}
.kpi-accent-rose {
    border-top: 3px solid #f43f5e;
}

/* --------------------------------------------------------------------------
   3. Professional Data Tables System (.erp-table)
   -------------------------------------------------------------------------- */
.erp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Sticky Table Header System */
.erp-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}
.erp-table thead th.sticky,
.erp-table thead th.sticky-action-col,
.erp-table thead th:first-child {
    z-index: 25;
}

.erp-table th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    white-space: nowrap;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.65rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 800;
}

.dark /* Sticky Table Header System */
.erp-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}
.erp-table thead th.sticky,
.erp-table thead th.sticky-action-col,
.erp-table thead th:first-child {
    z-index: 25;
}

.dark .erp-table th {
    color: #94a3b8 !important;
    background-color: #0b1322 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.erp-table td {
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    vertical-align: middle;
}

.dark .erp-table td {
    color: #cbd5e1 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.erp-table tbody tr {
    transition: background-color 0.15s ease;
}

.erp-table tbody tr:hover td {
    background-color: #f8fafc;
}

.dark .erp-table tbody tr:hover td {
    background-color: rgba(30, 41, 59, 0.6) !important;
}

/* Sticky Action Column */
.sticky-action-col {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #ffffff;
    box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.06);
}

.dark .sticky-action-col {
    background-color: #0d1627 !important;
    box-shadow: 2px 0 8px -2px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   4. Form Controls & Floating Focus States
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
select,
textarea {
    font-family: var(--font-sans);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #005F73 !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 115, 0.22) !important;
}

.dark input,
.dark select,
.dark textarea {
    color: #f8fafc !important;
    background-color: #0b1322 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

/* --------------------------------------------------------------------------
   5. Interactive Micro-interactions & Badges
   -------------------------------------------------------------------------- */
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-lift:active {
    transform: translateY(0);
}

/* Pulse Dot Animation for Live Status */
.pulse-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
}

.pulse-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background-color: inherit;
    opacity: 0.75;
    animation: pulse-ring 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.6);
        opacity: 0.9;
    }
    80%, 100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   6. Custom Modern Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.7);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------------
   7. Numeric Formatting Helper
   -------------------------------------------------------------------------- */
.num-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   8. Print Media Optimizations
   -------------------------------------------------------------------------- */
@media print {
    .no-print, 
    header, 
    aside, 
    nav, 
    footer, 
    #app-sidebar, 
    #sidebarMobileBackdrop, 
    #mobileBottomNav, 
    .sidebar-backdrop, 
    .alert-flash-wrapper,
    .modal,
    .erp-card:hover {
        display: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        font-family: sans-serif !important;
        font-size: 10pt !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: auto !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    main,
    main[role="main"],
    .main-viewport,
    div[style*="min-height: calc(100vh"],
    div[style*="min-height:calc(100vh"] {
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .erp-card {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   9. Collapsible & Minimized Sidebar System (Desktop & Mobile)
   -------------------------------------------------------------------------- */
aside#app-sidebar {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: width, transform;
}

@media (min-width: 768px) {
    /* Minimized Desktop Sidebar (4.25rem / 68px) */
    html.sidebar-minimized aside#app-sidebar {
        width: 4.25rem !important;
        min-width: 4.25rem !important;
    }

    /* Hide text & labels in minimized mode */
    html.sidebar-minimized .sidebar-brand-text,
    html.sidebar-minimized .sidebar-text,
    html.sidebar-minimized .sidebar-footer-support,
    html.sidebar-minimized .sidebar-footer-online span:not(.pulse-dot) {
        display: none !important;
    }

    /* Centered sidebar header when minimized */
    html.sidebar-minimized .sidebar-header-container {
        padding: 0.65rem 0.25rem !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem !important;
    }

    html.sidebar-minimized .sidebar-brand-wrapper {
        justify-content: center !important;
        margin: 0 !important;
        width: 100% !important;
    }

    html.sidebar-minimized #desktopSidebarCollapseBtn {
        margin: 0 auto !important;
        padding: 0.25rem !important;
    }

    /* Section divider line when minimized */
    html.sidebar-minimized .sidebar-section-title {
        padding: 0 !important;
        margin: 0.5rem 0.35rem !important;
        height: 1px !important;
        overflow: hidden !important;
        border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    html.dark.sidebar-minimized .sidebar-section-title {
        border-top-color: rgba(30, 41, 59, 0.9) !important;
    }

    /* Nav links when minimized */
    html.sidebar-minimized nav a.sidebar-nav-link {
        justify-content: center !important;
        padding: 0.6rem 0 !important;
        margin: 0.2rem 0.25rem !important;
        width: calc(100% - 0.5rem) !important;
        border-left: none !important;
        border-radius: 0.65rem !important;
        position: relative !important;
    }

    /* Center icons when minimized */
    html.sidebar-minimized nav a.sidebar-nav-link [data-lucide],
    html.sidebar-minimized nav a.sidebar-nav-link svg {
        margin-right: 0 !important;
        width: 1.2rem !important;
        height: 1.2rem !important;
        flex-shrink: 0 !important;
    }

    /* Active link in minimized mode */
    html.sidebar-minimized nav a.sidebar-nav-link.active-item {
        background-color: #0f2b48 !important;
        color: #ffffff !important;
        box-shadow: 0 2px 6px -1px rgba(15, 43, 72, 0.35) !important;
    }

    html.sidebar-minimized nav a.sidebar-nav-link.active-item [data-lucide],
    html.sidebar-minimized nav a.sidebar-nav-link.active-item svg {
        color: #f59e0b !important;
    }

    html.dark.sidebar-minimized nav a.sidebar-nav-link.active-item {
        background-color: #1e293b !important;
        color: #f8fafc !important;
        box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.4) !important;
    }

    /* PWA install button when minimized */
    html.sidebar-minimized .sidebar-pwa-btn {
        padding: 0.6rem 0 !important;
        justify-content: center !important;
        margin: 0.2rem 0.25rem !important;
        width: calc(100% - 0.5rem) !important;
    }

    html.sidebar-minimized .sidebar-pwa-btn [data-lucide],
    html.sidebar-minimized .sidebar-pwa-btn svg {
        margin-right: 0 !important;
    }

    /* Footer when minimized */
    html.sidebar-minimized .sidebar-footer {
        padding: 0.65rem 0.25rem !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    html.sidebar-minimized .sidebar-footer-online {
        margin-bottom: 0 !important;
        justify-content: center !important;
    }

    html.sidebar-minimized .sidebar-footer-online .pulse-dot {
        margin-right: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Top Navigation Bar Fit & Anti-Overlap Protection
   -------------------------------------------------------------------------- */
header {
    flex-wrap: nowrap !important;
}

header select {
    background-image: none !important;
}

/* ==========================================================================
   Zen Top Navigation Bar (TextileSolution BMS Architecture)
   ========================================================================== */
.navbar-zen {
    background: linear-gradient(135deg, #14213D 0%, #005F73 100%) !important;
    border-bottom: 2px solid #FCA311 !important;
    box-shadow: 0 4px 15px rgba(20, 33, 61, 0.25);
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    z-index: 1030;
}

.zen-brand,
.zen-brand:hover,
.zen-brand:focus {
    font-weight: 800;
    letter-spacing: -0.3px;
    font-size: 1.05rem;
    color: #ffffff !important;
    text-decoration: none !important;
}

.zen-brand span {
    color: inherit;
}

.nav-zen-link {
    color: #cbd5e1 !important;
    font-weight: 500;
    font-size: 0.82rem;
    padding: 0.35rem 0.55rem !important;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    text-decoration: none !important;
}

.nav-zen-link:hover,
.nav-zen-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-menu-zen {
    border-radius: 10px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.9);
    padding: 0.5rem;
    font-size: 0.82rem;
    background: #ffffff;
    min-width: 220px;
}

.dropdown-menu-zen .dropdown-item {
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    font-weight: 500;
    font-size: 0.82rem;
    color: #334155;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.dropdown-menu-zen .dropdown-item:hover {
    background-color: #f0f4f8;
    color: #14213D;
}

.dropdown-menu-zen .dropdown-item i {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.5rem;
}

.dark .dropdown-menu-zen {
    background-color: #0d1627 !important;
    border-color: #1e293b !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

.dark .dropdown-menu-zen .dropdown-item {
    color: #cbd5e1 !important;
}

.dark .dropdown-menu-zen .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.dark .dropdown-menu-zen .dropdown-divider {
    border-top-color: #1e293b !important;
}

/* Navbar Base CSS */
.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.navbar > .container-fluid {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    cursor: pointer;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

@media (min-width: 1200px) {
    .navbar-expand-xl {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-xl .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-xl .navbar-toggler {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .navbar-collapse:not(.show) {
        display: none !important;
    }
    .navbar-collapse.show {
        display: block !important;
        width: 100%;
        padding: 0.75rem 0;
    }
}

.dropdown {
    position: relative;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 0.82rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.375rem;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

.dropdown-divider {
    height: 0;
    margin: 0.4rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,.1);
}

/* ==========================================================================
   Left Navigation Sidebar with Subcategories (ERP Dual Navigation System)
   ========================================================================== */
#app-sidebar {
    width: 256px;
    min-width: 256px;
    max-width: 256px;
    height: calc(100vh - 52px);
    position: sticky;
    top: 52px;
    background-color: #ffffff;
    border-right: 1px solid rgba(226, 232, 240, 0.9);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    flex-shrink: 0;
}

html.dark #app-sidebar {
    background-color: #0d1627 !important;
    border-right-color: #1e293b !important;
}

/* Minimized Sidebar (Desktop) */
body.sidebar-minimized #app-sidebar {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
}

body.sidebar-minimized .sidebar-text,
body.sidebar-minimized .subcat-content,
body.sidebar-minimized .sidebar-full-only,
body.sidebar-minimized .subcat-arrow {
    display: none !important;
}

body.sidebar-minimized .sidebar-sub-link,
body.sidebar-minimized .sidebar-subcat-header {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sidebar Subcategory Header */
.sidebar-subcat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: transparent;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.sidebar-subcat-header:hover {
    background-color: rgba(226, 232, 240, 0.6);
    color: #0f172a;
}

html.dark .sidebar-subcat-header {
    color: #94a3b8;
}

html.dark .sidebar-subcat-header:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}

.sidebar-subcat-header.open {
    color: #005F73;
}

html.dark .sidebar-subcat-header.open {
    color: #38bdf8;
}

.sidebar-subcat-header .subcat-arrow {
    transition: transform 0.2s ease;
}

.sidebar-subcat-header.open .subcat-arrow {
    transform: rotate(180deg);
}

/* Subcategory Links */
.sidebar-sub-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none !important;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sidebar-sub-link:hover {
    background-color: rgba(0, 95, 115, 0.08);
    color: #005F73;
}

.sidebar-sub-link.active {
    background-color: #005F73 !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 95, 115, 0.25);
}

.sidebar-sub-link.active i {
    color: #FCA311 !important;
}

html.dark .sidebar-sub-link {
    color: #94a3b8;
}

html.dark .sidebar-sub-link:hover {
    background-color: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
}

html.dark .sidebar-sub-link.active {
    background-color: #005F73 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Mobile & Touch UX Optimizations (Smartphone & Tablet)
   ========================================================================== */

/* Responsive Mobile Sidebar (Smooth Gliding Drawer) */
@media (max-width: 991.98px) {
    #app-sidebar {
        position: fixed;
        left: -320px;
        top: 52px;
        height: calc(100vh - 52px);
        width: min(85vw, 290px);
        min-width: 260px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        z-index: 1045;
        transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: left;
    }
    
    body.sidebar-mobile-open #app-sidebar {
        left: 0 !important;
    }
    
    .sidebar-backdrop {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1040;
        animation: fadeInBackdrop 0.2s ease-out;
    }

    @keyframes fadeInBackdrop {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* Native Mobile Bottom Navigation Dock (< 768px) */
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 52px;
    color: #94a3b8 !important;
    font-size: 0.65rem;
    font-weight: 600;
    text-decoration: none !important;
    gap: 2px;
    padding: 4px 2px;
    transition: color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item i {
    font-size: 1.15rem;
    transition: transform 0.15s ease, color 0.15s ease;
}
.mobile-nav-item:active {
    transform: scale(0.92);
}
.mobile-nav-item.active {
    color: #FCA311 !important;
    font-weight: 800;
}
.mobile-nav-item.active i {
    color: #FCA311 !important;
    transform: translateY(-2px);
}

/* Elevated Center Action FAB Button */
.mobile-nav-fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-decoration: none !important;
    position: relative;
    top: -12px;
    -webkit-tap-highlight-color: transparent;
}
.mobile-fab-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #005F73 0%, #0A7B94 100%);
    border: 3px solid #14213D;
    color: #FCA311;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 6px 16px rgba(0, 95, 115, 0.45), 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.mobile-nav-fab:active .mobile-fab-circle {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(0, 95, 115, 0.4);
}
.mobile-fab-text {
    font-size: 0.65rem;
    font-weight: 800;
    color: #FCA311;
    margin-top: 2px;
    letter-spacing: 0.2px;
}

/* Smartphone Specific Touch & Viewport Optimizations (< 768px) */
@media (max-width: 767.98px) {
    /* Prevent iOS auto-zoom on inputs */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Padding clearance above bottom dock */
    main[role="main"] {
        padding-bottom: 84px !important;
    }

    /* Mobile card padding optimization (more data visibility) */
    .erp-card {
        padding: 0.875rem !important;
        border-radius: 1rem !important;
    }

    /* Table touch scrolling */
    .overflow-x-auto,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .erp-table {
        min-width: 660px;
    }

    .erp-table th,
    .erp-table td {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.78rem !important;
    }

    /* Mobile buttons with comfortable 42px touch targets */
    .btn:not(.btn-sm):not(.btn-close):not(.btn-icon) {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    button:not(.btn-close),
    a.btn {
        -webkit-tap-highlight-color: transparent;
    }

    /* Full-width modals on mobile with zero edge clipping */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Mobile stacked full-width button rows for thumb ergonomics */
    .mobile-stack-buttons {
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    .mobile-stack-buttons > * {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* Micro-Interactions & UX Polish */
button:active,
.btn:active,
a.btn:active,
.hover-lift:active {
    transform: scale(0.98);
}

.overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 95, 115, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
}
.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(0, 95, 115, 0.3);
    border-radius: 4px;
}
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 95, 115, 0.6);
}

/* Touch-Swipeable Horizontal Strip Utility (Hides Scrollbars Cleanly) */
.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   MASTER DESIGN SYSTEM & CONTRAST ENGINE - PRO UI/UX FRONT-END ARCHITECTURE
   Unified Palette: Primary Navy (#14213D / #0D1627), Teal (#005F73 / #0A7B94), Amber (#FCA311)
   Guaranteed High-Contrast Legibility across All Light & Dark Theme Pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO COMMAND BANNERS (GUARANTEED BACKGROUND & CRISP WHITE TYPOGRAPHY)
   -------------------------------------------------------------------------- */
/* Dark Mode Hero Command Banners */
.dark .hero-banner-zen,
.dark [class*="from-[#14213D]"],
.dark [class*="from-[#0f2b48]"] {
    background: linear-gradient(135deg, #14213D 0%, #0D1627 50%, #005F73 100%) !important;
    border: 1px solid rgba(0, 95, 115, 0.45) !important;
    box-shadow: 0 20px 25px -5px rgba(20, 33, 61, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

.dark .hero-banner-zen h1,
.dark .hero-banner-zen h2,
.dark .hero-banner-zen h3,
.dark [class*="from-[#14213D]"] h1,
.dark [class*="from-[#14213D]"] h2,
.dark [class*="from-[#14213D]"] h3,
.dark [class*="from-[#0f2b48]"] h1,
.dark [class*="from-[#0f2b48]"] h2,
.dark [class*="from-[#0f2b48]"] h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) !important;
    letter-spacing: -0.02em !important;
}

.dark .hero-banner-zen p,
.dark [class*="from-[#14213D]"] p,
.dark [class*="from-[#0f2b48]"] p {
    color: #E2E8F0 !important;
    opacity: 0.95 !important;
}

/* Light Mode Hero Command Banners (Crisp Modern White/Teal/Amber Tint) */
html:not(.dark) .hero-banner-zen {
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FDFA 60%, #FFFBEB 100%) !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 4px 14px 0 rgba(0, 95, 115, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    color: #0F172A !important;
}

html:not(.dark) .hero-banner-zen h1,
html:not(.dark) .hero-banner-zen h2,
html:not(.dark) .hero-banner-zen h3 {
    color: #0F172A !important;
    text-shadow: none !important;
    letter-spacing: -0.02em !important;
}

html:not(.dark) .hero-banner-zen p {
    color: #334155 !important;
}

html:not(.dark) .hero-banner-zen .dashboard-tab-pill {
    color: #475569 !important;
}

html:not(.dark) .hero-banner-zen .dashboard-tab-pill.font-black,
html:not(.dark) .hero-banner-zen .dashboard-tab-pill.bg-white {
    color: #0F172A !important;
    background-color: #FFFFFF !important;
}

html:not(.dark) .hero-banner-zen a.bg-white\/10 {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .hero-banner-zen a.bg-white\/10:hover {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
}

/* --------------------------------------------------------------------------
   2. PRIMARY ACTION HERO CARDS (QUICK WORK LAUNCHPAD CARD #1 & CTAS)
   -------------------------------------------------------------------------- */
.action-card-primary,
[class~="bg-[#005F73]"]:not(.sidebar-sub-link) {
    background: linear-gradient(135deg, #005F73 0%, #0A7B94 100%) !important;
    border: 1px solid rgba(0, 95, 115, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px 0 rgba(0, 95, 115, 0.35) !important;
}

.action-card-primary:hover,
[class~="bg-[#005F73]"]:not(.sidebar-sub-link):hover,
[class*="hover:bg-[#0A7B94]"]:hover {
    background: linear-gradient(135deg, #0A7B94 0%, #0E95B3 100%) !important;
    border-color: #38BDF8 !important;
    box-shadow: 0 8px 20px 0 rgba(0, 95, 115, 0.45) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.action-card-primary *,
[class~="bg-[#005F73]"]:not(.sidebar-sub-link) * {
    color: #ffffff !important;
}

.action-card-primary span:last-child,
[class~="bg-[#005F73]"]:not(.sidebar-sub-link) .text-teal-100,
[class~="bg-[#005F73]"]:not(.sidebar-sub-link) .text-teal-200 {
    color: #E0F2FE !important;
    opacity: 0.95 !important;
}

/* --------------------------------------------------------------------------
   3. ARBITRARY HEX COLOR UTILITIES MAPPING (NAVY, TEAL, AMBER)
   -------------------------------------------------------------------------- */
/* Navy Backgrounds */
[class~="bg-[#14213D]"] {
    background-color: #14213D !important;
    color: #ffffff !important;
}
[class~="bg-[#14213D]"]:hover {
    background-color: #1F2F56 !important;
}
[class~="bg-[#0D1627]"],
[class~="bg-[#0d1627]"] {
    background-color: #0D1627 !important;
    color: #ffffff !important;
}
[class~="bg-[#0f2b48]"] {
    background-color: #0F2B48 !important;
    color: #ffffff !important;
}
[class~="bg-[#1f2f56]"] {
    background-color: #1F2F56 !important;
    color: #ffffff !important;
}

/* Amber Backgrounds */
[class~="bg-[#FCA311]"] {
    background-color: #FCA311 !important;
    color: #0D1627 !important;
    font-weight: 700 !important;
}
[class~="bg-[#FCA311]"]:hover {
    background-color: #E59819 !important;
    color: #000000 !important;
}
[class~="bg-[#E59819]"] {
    background-color: #E59819 !important;
    color: #000000 !important;
}

/* Opacity Tints (Teal) */

[class~="bg-[#005F73]/10"]  { background-color: rgba(0, 95, 115, 0.12) !important; }
[class~="bg-[#005F73]/15"]  { background-color: rgba(0, 95, 115, 0.18) !important; }
[class~="bg-[#005F73]/20"]  { background-color: rgba(0, 95, 115, 0.22) !important; }
[class~="bg-[#005F73]/25"]  { background-color: rgba(0, 95, 115, 0.28) !important; }
[class~="bg-[#005F73]/30"]  { background-color: rgba(0, 95, 115, 0.35) !important; }
[class~="bg-[#005F73]/40"]  { background-color: rgba(0, 95, 115, 0.45) !important; }
[class~="bg-[#005F73]/50"]  { background-color: rgba(0, 95, 115, 0.55) !important; }

/* Opacity Tints (Amber) */

[class~="bg-[#FCA311]/15"]  { background-color: rgba(252, 163, 17, 0.18) !important; }
[class~="bg-[#FCA311]/20"]  { background-color: rgba(252, 163, 17, 0.24) !important; }
[class~="bg-[#FCA311]/25"]  { background-color: rgba(252, 163, 17, 0.30) !important; }
[class~="bg-[#FCA311]/30"]  { background-color: rgba(252, 163, 17, 0.36) !important; }
[class~="bg-[#FCA311]/40"]  { background-color: rgba(252, 163, 17, 0.45) !important; }

/* Translucent Glass Utilities */
[class~="bg-white/10"] { background-color: rgba(255, 255, 255, 0.12) !important; }
[class~="bg-white/15"] { background-color: rgba(255, 255, 255, 0.18) !important; }
[class~="bg-white/20"] { background-color: rgba(255, 255, 255, 0.25) !important; }
[class~="bg-white/25"] { background-color: rgba(255, 255, 255, 0.32) !important; }

[class*="border-white/10"] { border-color: rgba(255, 255, 255, 0.12) !important; }
[class*="border-white/15"] { border-color: rgba(255, 255, 255, 0.18) !important; }
[class*="border-white/20"] { border-color: rgba(255, 255, 255, 0.25) !important; }
[class*="border-white/25"] { border-color: rgba(255, 255, 255, 0.32) !important; }
[class*="border-white/30"] { border-color: rgba(255, 255, 255, 0.40) !important; }
[class*="border-white/40"] { border-color: rgba(255, 255, 255, 0.50) !important; }

/* Dark Tab Shell Pill */
[class*="bg-slate-950/60"] {
    background-color: rgba(13, 22, 39, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Border Colors */
[class~="border-[#005F73]"] { border-color: rgba(0, 95, 115, 0.45) !important; }
[class~="border-[#FCA311]"] { border-color: rgba(252, 163, 17, 0.45) !important; }

/* Text Colors */
[class~="text-[#005F73]"] { color: #005F73 !important; }
[class~="text-[#0A7B94]"] { color: #0A7B94 !important; }
[class~="text-[#FCA311]"] { color: #D97706 !important; }
.dark [class~="text-[#FCA311]"] { color: #FCA311 !important; }
[class~="text-[#D97706]"] { color: #B45309 !important; }
[class~="text-[#38bdf8]"] { color: #0284C7 !important; }
.dark [class~="text-[#38bdf8]"] { color: #38BDF8 !important; }
[class~="text-[#14213D]"] { color: #14213D !important; }
[class~="text-[#0D1627]"] { color: #0D1627 !important; }

/* --------------------------------------------------------------------------
   4. UNIVERSAL LIGHT MODE ACCESSIBILITY & CONTRAST GUARD (WCAG AA/AAA)
   -------------------------------------------------------------------------- */
html:not(.dark) {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

/* Safeguard: In Light Mode, prevent white text from rendering on white or light backgrounds */
html:not(.dark) .bg-white .text-white:not(.navbar-zen *):not(.zen-brand *):not(#app-sidebar *):not([class*="bg-"]):not(.btn):not(.badge):not(.action-card-primary *):not([class~="bg-[#005F73]"] *):not([class~="bg-[#14213D]"] *):not([class*="from-[#14213D]"] *):not(#costingResultsCard *),
html:not(.dark) .bg-slate-50 .text-white:not(.navbar-zen *):not(.zen-brand *):not(#app-sidebar *):not([class*="bg-"]):not(.btn):not(.badge):not(.action-card-primary *):not([class~="bg-[#005F73]"] *):not([class~="bg-[#14213D]"] *):not([class*="from-[#14213D]"] *):not(#costingResultsCard *) {
    color: #0F172A !important;
}

/* Ensure strong heading contrast across all light surfaces */
html:not(.dark) h1:not([class*="text-"]):not(.hero-banner-zen *):not([class*="from-[#14213D]"] *),
html:not(.dark) h2:not([class*="text-"]):not(.hero-banner-zen *):not([class*="from-[#14213D]"] *),
html:not(.dark) h3:not([class*="text-"]):not(.hero-banner-zen *):not([class*="from-[#14213D]"] *),
html:not(.dark) h4:not([class*="text-"]):not(.hero-banner-zen *):not([class*="from-[#14213D]"] *) {
    color: #0F172A !important;
    font-weight: 800;
}

html:not(.dark) p:not([class*="text-"]):not(.hero-banner-zen *):not([class*="from-[#14213D]"] *) {
    color: #334155 !important;
}

html:not(.dark) .text-slate-500 {
    color: #475569 !important; /* Higher contrast than default slate-500 */
}

/* Refined ERP Surface Cards in Light Mode */
.erp-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.erp-card:hover {
    border-color: rgba(0, 95, 115, 0.35) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
}

.dark .erp-card {
    background-color: #0D1627 !important;
    border-color: #1E293B !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    color: #F8FAFC !important;
}

/* --------------------------------------------------------------------------
   5. SIDEBAR NAVIGATION CONTRAST & POLISH
   -------------------------------------------------------------------------- */
#app-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid #E2E8F0 !important;
}

.dark #app-sidebar {
    background-color: #0D1627 !important;
    border-right-color: #1E293B !important;
}

.sidebar-sub-link {
    color: #1E293B !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

.dark .sidebar-sub-link {
    color: #CBD5E1 !important;
}

.sidebar-subcat-header {
    color: #334155 !important;
    font-weight: 700 !important;
}

.dark .sidebar-subcat-header {
    color: #94A3B8 !important;
}

.sidebar-sub-link.active {
    background-color: #005F73 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 95, 115, 0.35) !important;
}

.sidebar-sub-link.active i {
    color: #FCA311 !important;
}

/* --------------------------------------------------------------------------
   6. TABLE & FORM CONTROLS VISIBILITY
   -------------------------------------------------------------------------- */
.erp-table thead th,
.table thead th {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    font-size: 0.76rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid #CBD5E1 !important;
}

.dark .erp-table thead th,
.dark .table thead th {
    background-color: #111C33 !important;
    color: #F1F5F9 !important;
    border-bottom-color: #1E293B !important;
}

.erp-table tbody td,
.table tbody td {
    color: #1E293B !important;
    border-bottom: 1px solid #E2E8F0 !important;
    font-size: 0.82rem !important;
}

.dark .erp-table tbody td,
.dark .table tbody td {
    color: #E2E8F0 !important;
    border-bottom-color: #1E293B !important;
}

/* Inputs & Form Controls */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
    color: #0F172A !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 0.625rem !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: #005F73 !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 115, 0.2) !important;
}

/* ==========================================================================
   Responsive Zen Top Navigation & Mobile Drawer System
   ========================================================================== */
@media (max-width: 1399.98px) {
    #zenNavbar.collapse.show,
    #zenNavbar.collapsing {
        position: absolute !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        background: linear-gradient(180deg, #14213D 0%, #0D1627 100%) !important;
        border-bottom: 3px solid #FCA311 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.75) !important;
        padding: 0.75rem 1rem 1.25rem 1rem !important;
        max-height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
        z-index: 1060 !important;
        display: block !important;
    }
    #zenNavbar .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem !important;
        height: auto !important;
    }
    #zenNavbar .nav-zen-link {
        font-size: 0.95rem !important;
        padding: 0.55rem 0.75rem !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff !important;
        width: 100%;
    }
    #zenNavbar .nav-zen-link:hover,
    #zenNavbar .nav-zen-link.active {
        background: rgba(252, 163, 17, 0.25) !important;
        color: #FCA311 !important;
    }
    #zenNavbar .dropdown-menu-zen {
        position: static !important;
        float: none !important;
        background: #0D1627 !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        margin-top: 0.25rem !important;
        margin-left: 0.5rem !important;
        box-shadow: none !important;
        width: calc(100% - 1rem) !important;
    }
    #zenNavbar .dropdown-menu-zen .dropdown-item {
        color: #e2e8f0 !important;
        padding: 0.5rem 0.75rem !important;
    }
    #zenNavbar .dropdown-menu-zen .dropdown-item:hover {
        background: rgba(252, 163, 17, 0.2) !important;
        color: #ffffff !important;
    }
}

/* ==========================================================================
   Responsive xxl Breakpoint for Zen Navbar (1400px Threshold)
   ========================================================================== */
@media (min-width: 1400px) {
    .navbar-expand-xxl {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-xxl .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-xxl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-xxl .navbar-toggler {
        display: none;
    }
}

@media (max-width: 1399.98px) {
    .navbar-expand-xxl .navbar-collapse:not(.show) {
        display: none !important;
    }
    .navbar-expand-xxl .navbar-collapse.show {
        display: block !important;
        width: 100%;
        padding: 0.75rem 0;
    }
}

/* Strict Responsive Top Navbar Fitting & Viewport Locking */
header.sticky-top {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 1040 !important;
    box-sizing: border-box !important;
}

.navbar-zen {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

.navbar-zen .container-fluid {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

.nav-compact-fy-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 2px 6px;
    height: 28px;
    color: #ffffff;
    flex-shrink: 0;
}
.nav-compact-fy-select {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 16px 0 2px !important;
    margin: 0 !important;
    cursor: pointer !important;
    color-scheme: dark !important;
    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='%23fca311' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 10px 8px !important;
    width: auto !important;
    max-width: 90px !important;
    line-height: 1.2 !important;
    height: auto !important;
    box-shadow: none !important;
}
.nav-compact-fy-select:focus {
    outline: none !important;
    box-shadow: none !important;
}
.nav-compact-fy-select:focus-visible {
    outline: 2px solid #FCA311 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(252, 163, 17, 0.4) !important;
}

.nav-compact-lang-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 2px 6px;
    height: 28px;
    color: #ffffff;
    flex-shrink: 0;
}
.nav-compact-lang-select {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 14px 0 2px !important;
    margin: 0 !important;
    cursor: pointer !important;
    color-scheme: dark !important;
    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='%2338bdf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 10px 8px !important;
    width: auto !important;
    max-width: 48px !important;
    line-height: 1.2 !important;
    height: auto !important;
    box-shadow: none !important;
}
.nav-compact-lang-select:focus {
    outline: none !important;
    box-shadow: none !important;
}
.nav-compact-lang-select:focus-visible {
    outline: 2px solid #FCA311 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(252, 163, 17, 0.4) !important;
}

/* ==========================================================================
   UNIVERSAL DATAGRID ACTION COLUMN BACKGROUND FIX (ALL PAGES)
   Guarantees clean, high-contrast, professional background in light & dark modes
   ========================================================================== */

/* 1. LIGHT MODE TABLE HEADERS (Action Column) */
html:not(.dark) .erp-table thead th.sticky,
html:not(.dark) .erp-table thead th.sticky-action-col,
html:not(.dark) .erp-table thead th:first-child,
html:not(.dark) .table thead th.sticky,
html:not(.dark) .table thead th.sticky-action-col,
html:not(.dark) .table thead th:first-child,
html:not(.dark) th[class*="sticky"][class*="left-0"],
html:not(.dark) th.sticky-action-col {
    background-color: #F1F5F9 !important;
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border-right: 1px solid #CBD5E1 !important;
    box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.08) !important;
}

/* 2. LIGHT MODE TABLE BODY CELLS (Action Column) - STRICT PURE WHITE SURFACE */
html:not(.dark) .erp-table tbody td.sticky,
html:not(.dark) .erp-table tbody td.sticky-action-col,
html:not(.dark) .erp-table tbody td:first-child,
html:not(.dark) .table tbody td.sticky,
html:not(.dark) .table tbody td.sticky-action-col,
html:not(.dark) .table tbody td:first-child,
html:not(.dark) td[class*="sticky"][class*="left-0"],
html:not(.dark) td.sticky-action-col {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #1E293B !important;
    border-right: 1px solid #E2E8F0 !important;
    box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* 3. LIGHT MODE ROW HOVER: Action cell seamlessly matches hovered row */
html:not(.dark) .erp-table tbody tr:hover td.sticky,
html:not(.dark) .erp-table tbody tr:hover td.sticky-action-col,
html:not(.dark) .erp-table tbody tr:hover td:first-child,
html:not(.dark) .table tbody tr:hover td.sticky,
html:not(.dark) .table tbody tr:hover td.sticky-action-col,
html:not(.dark) .table tbody tr:hover td:first-child,
html:not(.dark) tr:hover > td[class*="sticky"][class*="left-0"],
html:not(.dark) tr:hover > td.sticky-action-col {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
}

/* 4. DARK MODE TABLE HEADERS (Action Column) */
.dark .erp-table thead th.sticky,
.dark .erp-table thead th.sticky-action-col,
.dark .erp-table thead th:first-child,
.dark .table thead th.sticky,
.dark .table thead th.sticky-action-col,
.dark .table thead th:first-child,
.dark th[class*="sticky"][class*="left-0"],
.dark th.sticky-action-col {
    background-color: #111C33 !important;
    background: #111C33 !important;
    color: #F1F5F9 !important;
    border-right: 1px solid #1E293B !important;
    box-shadow: 2px 0 6px -1px rgba(0, 0, 0, 0.4) !important;
}

/* 5. DARK MODE TABLE BODY CELLS (Action Column) */
.dark .erp-table tbody td.sticky,
.dark .erp-table tbody td.sticky-action-col,
.dark .erp-table tbody td:first-child,
.dark .table tbody td.sticky,
.dark .table tbody td.sticky-action-col,
.dark .table tbody td:first-child,
.dark td[class*="sticky"][class*="left-0"],
.dark td.sticky-action-col {
    background-color: #0D1627 !important;
    background: #0D1627 !important;
    color: #E2E8F0 !important;
    border-right: 1px solid #1E293B !important;
    box-shadow: 2px 0 6px -1px rgba(0, 0, 0, 0.4) !important;
}

/* 6. DARK MODE ROW HOVER */
.dark .erp-table tbody tr:hover td.sticky,
.dark .erp-table tbody tr:hover td.sticky-action-col,
.dark .erp-table tbody tr:hover td:first-child,
.dark .table tbody tr:hover td.sticky,
.dark .table tbody tr:hover td.sticky-action-col,
.dark .table tbody tr:hover td:first-child,
.dark tr:hover > td[class*="sticky"][class*="left-0"],
.dark tr:hover > td.sticky-action-col {
    background-color: #1E293B !important;
    background: #1E293B !important;
}
/* ==========================================================================
   UNIVERSAL SANS-SERIF ENFORCEMENT & PROPER READABLE SIZING
   ========================================================================== */
html, body, .font-sans, .font-serif, 
*:not(i):not([class*="fa-"]):not([class*="lucide"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(code):not(kbd):not(samp):not(pre):not(.font-mono):not([class*="font-mono"]) {
    font-family: sans-serif !important;
}

/* Prevent combobox from ever rendering inside SweetAlert popups & toasts */
.swal2-container .editable-combo-wrapper,
.swal2-popup .editable-combo-wrapper,
.swal2-container select.swal2-select,
.swal2-popup select.swal2-select,
.toast .editable-combo-wrapper {
    display: none !important;
}


/* ==========================================================================
   GLOBAL LEGIBLE TYPOGRAPHY SCALING (PROPORTIONATE READABLE SIZING)
   ========================================================================== */
html {
    font-size: 16.5px !important;
}
body {
    font-size: 1rem !important;
}
.text-xs, [class*="text-xs"] {
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
}
.text-\[10px\], .text-\[11px\], .text-\[12px\] {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
}
.text-sm, [class*="text-sm"] {
    font-size: 0.96rem !important;
    line-height: 1.45 !important;
}
.text-base, [class*="text-base"] {
    font-size: 1.06rem !important;
    line-height: 1.55 !important;
}
label, .form-label {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}
input, select, textarea, .form-control, .form-select {
    font-size: 0.96rem !important;
}
table, .erp-table, .table {
    font-size: 0.92rem !important;
}
th {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}
td {
    font-size: 0.92rem !important;
}
.sidebar-sub-link, .nav-zen-link, .nav-link, .dropdown-item {
    font-size: 0.92rem !important;
}
.badge {
    font-size: 0.78rem !important;
}


/* ==========================================================================
   THEME-AWARE NOTIFICATION & ALERT SYSTEM (SWEETALERT2, TOASTS & IN-PAGE ALERTS)
   Guaranteed High-Contrast Legibility in Dark & Light Modes
   ========================================================================== */

/* --- SweetAlert2 Modal Dialogs in Light Mode --- */
html:not(.dark) .swal2-popup:not(.swal2-toast),
html:not(.dark) body .swal2-popup:not(.swal2-toast),
.light-theme-modal {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

html:not(.dark) .swal2-popup:not(.swal2-toast) .swal2-title,
html:not(.dark) body .swal2-popup:not(.swal2-toast) .swal2-title,
.light-theme-modal .swal2-title {
    color: #0F172A !important;
    font-weight: 800 !important;
}

html:not(.dark) .swal2-popup:not(.swal2-toast) .swal2-html-container,
html:not(.dark) body .swal2-popup:not(.swal2-toast) .swal2-html-container,
.light-theme-modal .swal2-html-container {
    color: #334155 !important;
}

html:not(.dark) .swal2-popup:not(.swal2-toast) .swal2-input,
html:not(.dark) .swal2-popup:not(.swal2-toast) .swal2-textarea,
html:not(.dark) .swal2-popup:not(.swal2-toast) .swal2-select,
.light-theme-modal input,
.light-theme-modal textarea,
.light-theme-modal select {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
}

/* --- SweetAlert2 Modal Dialogs in Dark Mode --- */
html.dark .swal2-popup:not(.swal2-toast),
html.dark body .swal2-popup:not(.swal2-toast),
.dark .swal2-popup:not(.swal2-toast),
.dark-theme-modal {
    background: #0D1627 !important;
    color: #F8FAFC !important;
    border: 1px solid #1E293B !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
}

html.dark .swal2-popup:not(.swal2-toast) .swal2-title,
html.dark body .swal2-popup:not(.swal2-toast) .swal2-title,
.dark .swal2-popup:not(.swal2-toast) .swal2-title,
.dark-theme-modal .swal2-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

html.dark .swal2-popup:not(.swal2-toast) .swal2-html-container,
html.dark body .swal2-popup:not(.swal2-toast) .swal2-html-container,
.dark .swal2-popup:not(.swal2-toast) .swal2-html-container,
.dark-theme-modal .swal2-html-container {
    color: #CBD5E1 !important;
}

html.dark .swal2-popup:not(.swal2-toast) .swal2-input,
html.dark .swal2-popup:not(.swal2-toast) .swal2-textarea,
html.dark .swal2-popup:not(.swal2-toast) .swal2-select,
.dark-theme-modal input,
.dark-theme-modal textarea,
.dark-theme-modal select {
    background-color: #0F172A !important;
    color: #F8FAFC !important;
    border: 1px solid #334155 !important;
}

/* --- SweetAlert2 Toasts in Light Mode --- */
html:not(.dark) .swal2-popup.swal2-toast,
html:not(.dark) body .swal2-popup.swal2-toast,
.light-theme-toast {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 95, 115, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
    border-radius: 1rem !important;
}

html:not(.dark) .swal2-popup.swal2-toast .swal2-title,
html:not(.dark) body .swal2-popup.swal2-toast .swal2-title,
.light-theme-toast .swal2-title {
    color: #0F172A !important;
    font-weight: 700 !important;
}

html:not(.dark) .swal2-popup.swal2-toast .swal2-timer-progress-bar,
html:not(.dark) body .swal2-popup.swal2-toast .swal2-timer-progress-bar,
.light-theme-toast .swal2-timer-progress-bar {
    background: #005F73 !important;
}

/* --- SweetAlert2 Toasts in Dark Mode --- */
html.dark .swal2-popup.swal2-toast,
html.dark body .swal2-popup.swal2-toast,
.dark .swal2-popup.swal2-toast,
.dark-theme-toast {
    background: #0D1627 !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(0, 95, 115, 0.45) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
    border-radius: 1rem !important;
}

html.dark .swal2-popup.swal2-toast .swal2-title,
html.dark body .swal2-popup.swal2-toast .swal2-title,
.dark .swal2-popup.swal2-toast .swal2-title,
.dark-theme-toast .swal2-title {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

html.dark .swal2-popup.swal2-toast .swal2-timer-progress-bar,
html.dark body .swal2-popup.swal2-toast .swal2-timer-progress-bar,
.dark .swal2-popup.swal2-toast .swal2-timer-progress-bar,
.dark-theme-toast .swal2-timer-progress-bar {
    background: #FCA311 !important;
}

/* --- Toast Type Left Accent Borders in Light Mode --- */
html:not(.dark) .swal2-popup.swal2-toast.swal2-icon-success,
.light-theme-toast.swal2-icon-success {
    border-left: 5px solid #005F73 !important;
}
html:not(.dark) .swal2-popup.swal2-toast.swal2-icon-error,
.light-theme-toast.swal2-icon-error {
    border-left: 5px solid #DC2626 !important;
}
html:not(.dark) .swal2-popup.swal2-toast.swal2-icon-warning,
.light-theme-toast.swal2-icon-warning {
    border-left: 5px solid #D97706 !important;
}
html:not(.dark) .swal2-popup.swal2-toast.swal2-icon-info,
.light-theme-toast.swal2-icon-info {
    border-left: 5px solid #0284C7 !important;
}

/* --- Toast Type Left Accent Borders in Dark Mode --- */
html.dark .swal2-popup.swal2-toast.swal2-icon-success,
.dark .swal2-popup.swal2-toast.swal2-icon-success,
.dark-theme-toast.swal2-icon-success {
    border-left: 5px solid #2DD4BF !important;
}
html.dark .swal2-popup.swal2-toast.swal2-icon-error,
.dark .swal2-popup.swal2-toast.swal2-icon-error,
.dark-theme-toast.swal2-icon-error {
    border-left: 5px solid #F87171 !important;
}
html.dark .swal2-popup.swal2-toast.swal2-icon-warning,
.dark .swal2-popup.swal2-toast.swal2-icon-warning,
.dark-theme-toast.swal2-icon-warning {
    border-left: 5px solid #FCA311 !important;
}
html.dark .swal2-popup.swal2-toast.swal2-icon-info,
.dark .swal2-popup.swal2-toast.swal2-icon-info,
.dark-theme-toast.swal2-icon-info {
    border-left: 5px solid #38BDF8 !important;
}

/* --- SweetAlert2 Circular Lines Fix (Transparent for Both Themes) --- */
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix {
    background-color: transparent !important;
}

/* --- Bootstrap Alerts in Light Mode --- */
html:not(.dark) .alert-success {
    background-color: #F0FDF4 !important;
    color: #14532D !important;
    border: 1px solid #BBF7D0 !important;
    border-left: 4px solid #16A34A !important;
}
html:not(.dark) .alert-danger {
    background-color: #FEF2F2 !important;
    color: #7F1D1D !important;
    border: 1px solid #FECACA !important;
    border-left: 4px solid #DC2626 !important;
}
html:not(.dark) .alert-warning {
    background-color: #FFFBEB !important;
    color: #78350F !important;
    border: 1px solid #FDE68A !important;
    border-left: 4px solid #F59E0B !important;
}
html:not(.dark) .alert-info {
    background-color: #F0FDFA !important;
    color: #134E4A !important;
    border: 1px solid #99F6E4 !important;
    border-left: 4px solid #0D9488 !important;
}

/* --- Bootstrap Alerts in Dark Mode --- */
html.dark .alert-success,
.dark .alert-success {
    background-color: rgba(6, 78, 59, 0.4) !important;
    color: #A7F3D0 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-left: 4px solid #10B981 !important;
}
html.dark .alert-danger,
.dark .alert-danger {
    background-color: rgba(136, 19, 55, 0.4) !important;
    color: #FECDD3 !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    border-left: 4px solid #F43F5E !important;
}
html.dark .alert-warning,
.dark .alert-warning {
    background-color: rgba(120, 53, 15, 0.4) !important;
    color: #FDE68A !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-left: 4px solid #FCA311 !important;
}
html.dark .alert-info,
.dark .alert-info {
    background-color: rgba(19, 78, 74, 0.4) !important;
    color: #99F6E4 !important;
    border: 1px solid rgba(20, 184, 166, 0.35) !important;
    border-left: 4px solid #14B8A6 !important;
}

/* --- Validation Summary Alert Box --- */
html:not(.dark) .validation-summary-errors {
    background-color: #FEF2F2 !important;
    color: #991B1B !important;
    border: 1px solid #FECACA !important;
    border-left: 4px solid #DC2626 !important;
    border-radius: 0.75rem !important;
    padding: 0.85rem 1rem !important;
}
html.dark .validation-summary-errors,
.dark .validation-summary-errors {
    background-color: rgba(153, 27, 27, 0.3) !important;
    color: #FECDD3 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    border-left: 4px solid #EF4444 !important;
    border-radius: 0.75rem !important;
    padding: 0.85rem 1rem !important;
}

/* --- Field Validation Error Message --- */
html:not(.dark) .field-validation-error {
    color: #DC2626 !important;
    font-weight: 600 !important;
}
html.dark .field-validation-error,
.dark .field-validation-error {
    color: #F87171 !important;
    font-weight: 600 !important;
}

/* --- SweetAlert2 Internal Validation Message --- */
html:not(.dark) .swal2-validation-message {
    background: #FEF2F2 !important;
    color: #991B1B !important;
    border: 1px solid #FECACA !important;
}
html.dark .swal2-validation-message,
.dark .swal2-validation-message {
    background: rgba(153, 27, 27, 0.35) !important;
    color: #FECDD3 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   HIGH-CONTRAST THEME-ADAPTIVE PIPELINE & DASHBOARD CARDS
   Light Mode: Pure White/Slate (#F8FAFC) | Dark Mode: Rich Slate (#111C30)
   ========================================================================== */

/* Light Theme Card Base */
html:not(.dark) .bg-slate-50 {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
}

html:not(.dark) .bg-slate-50:hover {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

html:not(.dark) .bg-slate-50 .text-slate-900,
html:not(.dark) .bg-slate-50 span.font-black:not(.text-white):not([class*="text-"]):not(#costingResultsCard *) {
    color: #0F172A !important;
}

html:not(.dark) .bg-slate-50 .text-slate-500 {
    color: #475569 !important;
}

/* Dark Theme Card Base */
html.dark .bg-slate-50 {
    background-color: #111C30 !important;
    border-color: #1E293B !important;
    color: #F8FAFC !important;
}

html.dark .bg-slate-50:hover {
    background-color: #16243D !important;
    border-color: #334155 !important;
}

html.dark .bg-slate-50 .text-slate-900,
html.dark .bg-slate-50 .dark\:text-white {
    color: #FFFFFF !important;
}

html.dark .bg-slate-50 .text-slate-500,
html.dark .bg-slate-50 .dark\:text-slate-400 {
    color: #94A3B8 !important;
}

/* Container Surface Cards */
html:not(.dark) .erp-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
}

html.dark .erp-card {
    background-color: #0D1627 !important;
    border: 1px solid #1E293B !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}
/* ==========================================================================
   Layout System & Navigation Theme Engine (Extracted from _Layout.cshtml)
   ========================================================================== */
        :root {
            --zen-primary: #14213D;
            --zen-primary-dark: #0D1627;
            --zen-primary-hover: #1B3B6F;
            --zen-accent: #FCA311;
            --zen-teal: #005F73;
            --zen-bg: #F8F9FA;
            --zen-card: #FFFFFF;
        }
        html {
            font-size: 16.5px !important;
            font-family: sans-serif !important;
        }
        body {
            font-size: 1rem !important;
            font-family: sans-serif !important;
        }
        /* Readable Font Scale across all views */
        .text-xs, [class*="text-xs"] {
            font-size: 0.85rem !important;
            line-height: 1.35 !important;
        }
        .text-\[10px\], .text-\[11px\], .text-\[12px\] {
            font-size: 0.78rem !important;
            line-height: 1.25 !important;
        }
        .text-sm, [class*="text-sm"] {
            font-size: 0.96rem !important;
            line-height: 1.45 !important;
        }
        .text-base, [class*="text-base"] {
            font-size: 1.06rem !important;
            line-height: 1.55 !important;
        }
        label, .form-label, [class*="form-label"] {
            font-size: 0.88rem !important;
            font-weight: 700 !important;
        }
        input, select, textarea, .form-control, .form-select {
            font-size: 0.96rem !important;
        }
        table, .erp-table, .table {
            font-size: 0.92rem !important;
        }
        th {
            font-size: 0.88rem !important;
            font-weight: 700 !important;
        }
        td {
            font-size: 0.92rem !important;
        }
        .sidebar-sub-link, .nav-zen-link, .nav-link, .dropdown-item {
            font-size: 0.92rem !important;
        }
        .badge {
            font-size: 0.78rem !important;
        }
        html, body {
            overflow-x: hidden !important;
            max-width: 100vw;
            width: 100%;
        }
        body {
            background-color: var(--zen-bg);
            font-family: sans-serif !important;
            min-height: 100vh;
        }
        *:not(i):not([class*="fa-"]):not([class*="lucide"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
            font-family: sans-serif;
        }
        header.sticky-top {
            position: sticky !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100vw !important;
            z-index: 1040 !important;
            box-sizing: border-box !important;
        }
        .navbar-zen {
            background: linear-gradient(135deg, #14213D 0%, #005F73 100%) !important;
            border-bottom: 2px solid #FCA311 !important;
            box-shadow: 0 4px 15px rgba(20, 33, 61, 0.25);
            width: 100% !important;
            max-width: 100vw !important;
            box-sizing: border-box !important;
        }
        .navbar-zen .container-fluid {
            width: 100% !important;
            max-width: 100vw !important;
            box-sizing: border-box !important;
        }
        .nav-compact-fy-box {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 6px;
            padding: 2px 6px;
            height: 28px;
            color: #ffffff;
            flex-shrink: 0;
        }
        .nav-compact-fy-select {
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            background-color: transparent !important;
            border: none !important;
            padding: 0 16px 0 2px !important;
            margin: 0 !important;
            cursor: pointer !important;
            color-scheme: dark !important;
            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='%23fca311' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right center !important;
            background-size: 10px 8px !important;
            width: auto !important;
            max-width: 90px !important;
            line-height: 1.2 !important;
            height: auto !important;
            box-shadow: none !important;
        }
        .nav-compact-fy-select:focus {
            outline: none !important;
            box-shadow: none !important;
        }
        .nav-compact-lang-box {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 6px;
            padding: 2px 6px;
            height: 28px;
            color: #ffffff;
            flex-shrink: 0;
        }
        .nav-compact-lang-select {
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            background-color: transparent !important;
            border: none !important;
            padding: 0 14px 0 2px !important;
            margin: 0 !important;
            cursor: pointer !important;
            color-scheme: dark !important;
            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='%2338bdf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right center !important;
            background-size: 10px 8px !important;
            width: auto !important;
            max-width: 48px !important;
            line-height: 1.2 !important;
            height: auto !important;
            box-shadow: none !important;
        }
        .nav-compact-lang-select:focus {
            outline: none !important;
            box-shadow: none !important;
        }
        .zen-brand,
.zen-brand:hover,
.zen-brand:focus {
            font-weight: 800;
            letter-spacing: -0.3px;
            color: #ffffff !important;
            text-decoration: none !important;
        }
        .zen-brand span {
            color: inherit;
        }
        .nav-zen-link {
            color: #cbd5e1 !important;
            font-weight: 500;
            font-size: 0.78rem;
            padding: 0.25rem 0.4rem !important;
            border-radius: 6px;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            white-space: nowrap;
            text-decoration: none !important;
        }
        @@media (min-width: 1400px) {
            .nav-zen-link {
                font-size: 0.82rem;
                padding: 0.35rem 0.55rem !important;
                gap: 0.35rem;
            }
        }
        .nav-zen-link:hover,
        .nav-zen-link.active {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.1);
        }
        .dropdown-menu-zen {
            border-radius: 10px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(226, 232, 240, 0.9);
            padding: 0.5rem;
            font-size: 0.82rem;
            background: #ffffff;
            min-width: 220px;
        }
        .dropdown-menu-zen .dropdown-item {
            border-radius: 6px;
            padding: 0.45rem 0.75rem;
            font-weight: 500;
            font-size: 0.82rem;
            color: #334155;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            text-decoration: none !important;
        }
        .dropdown-menu-zen .dropdown-item:hover {
            background-color: #f0f4f8;
            color: #14213D;
        }
        .dropdown-menu-zen .dropdown-item i {
            width: 1.25rem;
            text-align: center;
            margin-right: 0.5rem;
        }
        .dark .dropdown-menu-zen {
            background-color: #0d1627 !important;
            border-color: #1e293b !important;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
        }
        .dark .dropdown-menu-zen .dropdown-item {
            color: #cbd5e1 !important;
        }
        .dark .dropdown-menu-zen .dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.08) !important;
            color: #ffffff !important;
        }
        .dark .dropdown-menu-zen .dropdown-divider {
            border-top-color: #1e293b !important;
        }
        a {
            text-decoration: none;
        }

        /* Responsive Mobile/Tablet Navigation Overlay Drawer */
        @media (max-width: 1399.98px) {
            #zenNavbar.collapse.show,
            #zenNavbar.collapsing {
                position: absolute !important;
                top: 52px !important;
                left: 0 !important;
                right: 0 !important;
                width: 100vw !important;
                background: linear-gradient(180deg, #14213D 0%, #0D1627 100%) !important;
                border-bottom: 3px solid #FCA311 !important;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.75) !important;
                padding: 0.75rem 1rem 1.25rem 1rem !important;
                max-height: calc(100vh - 56px) !important;
                overflow-y: auto !important;
                z-index: 1060 !important;
                display: block !important;
            }
            #zenNavbar .navbar-nav {
                display: flex !important;
                flex-direction: column !important;
                gap: 0.35rem !important;
                height: auto !important;
            }
            #zenNavbar .nav-zen-link {
                font-size: 0.92rem !important;
                padding: 0.55rem 0.75rem !important;
                border-radius: 8px !important;
                background: rgba(255, 255, 255, 0.05);
                color: #ffffff !important;
                width: 100%;
            }
            #zenNavbar .nav-zen-link:hover,
            #zenNavbar .nav-zen-link.active {
                background: rgba(252, 163, 17, 0.25) !important;
                color: #FCA311 !important;
            }
            #zenNavbar .dropdown-menu-zen {
                position: static !important;
                float: none !important;
                background: #0D1627 !important;
                border: 1px solid rgba(255, 255, 255, 0.15) !important;
                margin-top: 0.25rem !important;
                margin-left: 0.5rem !important;
                box-shadow: none !important;
                width: calc(100% - 1rem) !important;
            }
            #zenNavbar .dropdown-menu-zen .dropdown-item {
                color: #e2e8f0 !important;
                padding: 0.5rem 0.75rem !important;
            }
            #zenNavbar .dropdown-menu-zen .dropdown-item:hover {
                background: rgba(252, 163, 17, 0.2) !important;
                color: #ffffff !important;
            }
        }


/* ==========================================================================
   Phase 3 Polish: Accessible Focus Rings (WCAG 2.4.7) & Mobile Ergonomics
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #FCA311 !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   PRO FRONTEND DESIGNER: MOBILE DATAGRID & ACTION COLUMN REVOLUTION
   Guarantees 100% visible, swipeable gridview on all mobile & tablet screens
   ========================================================================== */
@media (max-width: 820px) {
    /* 1. UNPIN RIGID ACTION COLUMN ON MOBILE
       Prevents action column from freezing over and obscuring table data while swiping */
    .erp-table:not(.mobile-pin-active) thead th.sticky-action-col,
    .erp-table:not(.mobile-pin-active) thead th.sticky,
    .erp-table:not(.mobile-pin-active) thead th:first-child,
    .erp-table:not(.mobile-pin-active) thead th[class*="sticky"][class*="left-0"],
    .erp-table:not(.mobile-pin-active) thead th.left-0,
    .erp-table:not(.mobile-pin-active) tbody td.sticky-action-col,
    .erp-table:not(.mobile-pin-active) tbody td.sticky,
    .erp-table:not(.mobile-pin-active) tbody td:first-child,
    .erp-table:not(.mobile-pin-active) tbody td[class*="sticky"][class*="left-0"],
    .erp-table:not(.mobile-pin-active) tbody td.left-0,
    .erp-table:not(.mobile-pin-active) th.sticky-action-col,
    .erp-table:not(.mobile-pin-active) td.sticky-action-col,
    th.sticky-action-col:not(.mobile-pin-active),
    td.sticky-action-col:not(.mobile-pin-active),
    th[class*="sticky"][class*="left-0"]:not(.mobile-pin-active),
    td[class*="sticky"][class*="left-0"]:not(.mobile-pin-active),
    html:not(.dark) .erp-table:not(.mobile-pin-active) thead th.sticky-action-col,
    html:not(.dark) .erp-table:not(.mobile-pin-active) tbody td.sticky-action-col,
    html:not(.dark) .erp-table:not(.mobile-pin-active) th[class*="sticky"][class*="left-0"],
    html:not(.dark) .erp-table:not(.mobile-pin-active) td[class*="sticky"][class*="left-0"],
    .dark .erp-table:not(.mobile-pin-active) thead th.sticky-action-col,
    .dark .erp-table:not(.mobile-pin-active) tbody td.sticky-action-col,
    .dark .erp-table:not(.mobile-pin-active) th[class*="sticky"][class*="left-0"],
    .dark .erp-table:not(.mobile-pin-active) td[class*="sticky"][class*="left-0"] {
        position: static !important;
        left: auto !important;
        right: auto !important;
        z-index: 1 !important;
        box-shadow: none !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
    }

    /* 2. ERGONOMIC COMPACT ACTION BUTTONS (Clean, Non-bloated Touch Targets) */
    .sticky-action-col,
    .erp-table thead th.sticky-action-col,
    .erp-table tbody td.sticky-action-col {
        padding: 0.35rem 0.5rem !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    .sticky-action-col .inline-flex,
    td.sticky-action-col .inline-flex,
    td.sticky-action-col > div {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        flex-wrap: nowrap !important;
    }

    .sticky-action-col a,
    .sticky-action-col button,
    .erp-table tbody td.sticky-action-col a,
    .erp-table tbody td.sticky-action-col button,
    .erp-table tbody td a.rounded,
    .erp-table tbody td button.rounded {
        min-height: 32px !important;
        min-width: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.25rem 0.45rem !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        border-radius: 0.5rem !important;
        gap: 0.2rem !important;
        line-height: 1 !important;
    }

    /* 3. FLUID HORIZONTAL SWIPING CONTAINER WITH SCROLL MOMENTUM */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch !important;
        overflow-x: auto !important;
        scroll-behavior: smooth;
        position: relative;
    }

    /* Edge shadow indicator to hint scrollability on mobile */
    .overflow-x-auto.has-more-scroll-right {
        box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
    }
    .dark .overflow-x-auto.has-more-scroll-right {
        box-shadow: inset -10px 0 12px -10px rgba(0, 0, 0, 0.6);
    }

    /* 4. BALANCED MOBILE CELL DENSITY & FONT TYPOGRAPHY */
    .erp-table th {
        padding: 0.5rem 0.65rem !important;
        font-size: 0.68rem !important;
        white-space: nowrap !important;
        letter-spacing: 0.03em !important;
    }
    .erp-table td {
        padding: 0.45rem 0.65rem !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }

    /* Action column dropdown elevation & mobile safety */
    .erp-table td:has(.dropdown-menu.show),
    .erp-table td.dropdown-active-cell {
        position: relative !important;
        z-index: 1055 !important;
    }
    .erp-table .dropdown-menu.show {
        z-index: 1065 !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
    }
}

/* ==========================================================================
   5. NATIVE-FEEL MOBILE CARD VIEW MODE (1-Tap Toggle on Mobile)
   Transforms dense data tables into beautiful, vertical cards for one-hand operation
   ========================================================================== */
@media (max-width: 820px) {
    .overflow-x-auto.mobile-cards-parent {
        overflow-x: visible !important;
    }
    .erp-table.mobile-cards-view {
        display: block !important;
        width: 100% !important;
        border-collapse: separate !important;
        background: transparent !important;
    }
    .erp-table.mobile-cards-view thead {
        display: none !important;
    }
    .erp-table.mobile-cards-view tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
        width: 100% !important;
        padding: 0.6rem 0.15rem !important;
    }
    .erp-table.mobile-cards-view tbody tr {
        display: flex !important;
        flex-direction: column !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 1.1rem !important;
        padding: 0.85rem 1rem !important;
        box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0,0,0,0.04) !important;
        position: relative !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }
    .dark .erp-table.mobile-cards-view tbody tr {
        background-color: #0d1627 !important;
        border-color: #1e293b !important;
        box-shadow: 0 6px 18px -2px rgba(0, 0, 0, 0.5) !important;
    }
    .erp-table.mobile-cards-view tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px dashed #f1f5f9 !important;
        padding: 0.45rem 0 !important;
        font-size: 0.82rem !important;
        white-space: normal !important;
        text-align: right !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .dark .erp-table.mobile-cards-view tbody td {
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
        background: transparent !important;
        color: #e2e8f0 !important;
    }
    /* Card label extracted dynamically from the corresponding column header */
    .erp-table.mobile-cards-view tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
        text-align: left;
        padding-right: 0.75rem;
        flex-shrink: 0;
    }
    .dark .erp-table.mobile-cards-view tbody td::before {
        color: #94a3b8;
    }
    /* Action cell pinned to bottom of each card as full-width toolbar */
    .erp-table.mobile-cards-view tbody td.sticky-action-col,
    .erp-table.mobile-cards-view tbody td:first-child {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        border-bottom: none !important;
        border-top: 1px solid #e2e8f0 !important;
        margin-top: 0.5rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.1rem !important;
        background: transparent !important;
        box-shadow: none !important;
        order: 99 !important;
        width: 100% !important;
    }
    .dark .erp-table.mobile-cards-view tbody td.sticky-action-col,
    .dark .erp-table.mobile-cards-view tbody td:first-child {
        border-top-color: #1e293b !important;
    }
    .erp-table.mobile-cards-view tbody td.sticky-action-col::before,
    .erp-table.mobile-cards-view tbody td:first-child::before {
        display: none !important;
    }
}

/* ==========================================================================
   6. RESPONSIVE MOBILE GRID TOOLBAR (Grid vs Cards Toggle & Swipe Indicator)
   ========================================================================== */
.erp-mobile-grid-toolbar {
    display: none;
}
@media (max-width: 820px) {
    .erp-mobile-grid-toolbar {
        display: flex !important;
    }
}


/* ==========================================================================
   TABLE DROPDOWN ELEVATION & VISIBILITY GUARANTEE
   Ensures More Options dropdown menus float above sticky columns and rows
   ========================================================================== */
tr:has(.dropdown-menu.show),
tr:has(.dropdown.show),
tr:has([aria-expanded="true"]),
tr.dropdown-active-row {
    position: relative !important;
    z-index: 1050 !important;
}

td.sticky-action-col:has(.dropdown-menu.show),
td.sticky-action-col:has(.dropdown.show),
td.sticky-action-col:has([aria-expanded="true"]),
td.sticky-action-col.dropdown-active-cell,
th.sticky-action-col:has(.dropdown-menu.show),
th.sticky-action-col:has(.dropdown.show),
th.sticky-action-col:has([aria-expanded="true"]) {
    z-index: 1055 !important;
}

.sticky-action-col .dropdown-menu,
.erp-table .dropdown-menu,
.dropdown-menu.show {
    z-index: 1060 !important;
}
/* --------------------------------------------------------------------------
   PIPELINE STEPPER BREADCRUMBS (GUARANTEED CRISP CONTRAST IN DARK & LIGHT)
-------------------------------------------------------------------------- */
html.dark .pipeline-step-item,
.dark .pipeline-step-item {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
    color: #F8FAFC !important;
}

html.dark .pipeline-step-item:hover,
.dark .pipeline-step-item:hover {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #FFFFFF !important;
}

html.dark .pipeline-step-item span,
.dark .pipeline-step-item span {
    color: #E2E8F0 !important;
}

html.dark .pipeline-step-item span.text-amber-600,
html.dark .pipeline-step-item span[class*="text-[#FCA311]"],
.dark .pipeline-step-item span.text-amber-600,
.dark .pipeline-step-item span[class*="text-[#FCA311]"] {
    color: #FCA311 !important;
}

/* Active Step 3 (Production) in Dark Mode */
html.dark .pipeline-step-active-green,
html.dark a[href="#step-3-production"],
.dark .pipeline-step-active-green,
.dark a[href="#step-3-production"] {
    background-color: rgba(6, 78, 59, 0.5) !important;
    border: 1px solid rgba(52, 211, 153, 0.45) !important;
    color: #ECFDF5 !important;
}
html.dark .pipeline-step-active-green span,
html.dark a[href="#step-3-production"] span,
.dark .pipeline-step-active-green span,
.dark a[href="#step-3-production"] span {
    color: #A7F3D0 !important;
}
html.dark .pipeline-step-active-green span:first-child,
html.dark a[href="#step-3-production"] span:first-child,
.dark .pipeline-step-active-green span:first-child,
.dark a[href="#step-3-production"] span:first-child {
    color: #34D399 !important;
}

/* Active Step 5 (Dispatch) in Dark Mode */
html.dark .pipeline-step-active-blue,
html.dark a[href="#step-5-dispatch"],
.dark .pipeline-step-active-blue,
.dark a[href="#step-5-dispatch"] {
    background-color: rgba(30, 58, 138, 0.5) !important;
    border: 1px solid rgba(96, 165, 250, 0.45) !important;
    color: #EFF6FF !important;
}
html.dark .pipeline-step-active-blue span,
html.dark a[href="#step-5-dispatch"] span,
.dark .pipeline-step-active-blue span,
.dark a[href="#step-5-dispatch"] span {
    color: #BFDBFE !important;
}
html.dark .pipeline-step-active-blue span:first-child,
html.dark a[href="#step-5-dispatch"] span:first-child,
.dark .pipeline-step-active-blue span:first-child,
.dark a[href="#step-5-dispatch"] span:first-child {
    color: #60A5FA !important;
}

/* Light Mode Stepper Breadcrumbs */
html:not(.dark) .pipeline-step-item {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}
html:not(.dark) .pipeline-step-item:hover {
    background-color: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}
html:not(.dark) .pipeline-step-item span {
    color: #1E293B !important;
}
html:not(.dark) .pipeline-step-item span.text-amber-600,
html:not(.dark) .pipeline-step-item span[class*="text-[#FCA311]"] {
    color: #D97706 !important;
}
html:not(.dark) .pipeline-step-active-green,
html:not(.dark) a[href="#step-3-production"] {
    background-color: #ECFDF5 !important;
    border: 1px solid #6EE7B7 !important;
    color: #064E3B !important;
}
html:not(.dark) .pipeline-step-active-green span,
html:not(.dark) a[href="#step-3-production"] span {
    color: #065F46 !important;
}
html:not(.dark) .pipeline-step-active-green span:first-child,
html:not(.dark) a[href="#step-3-production"] span:first-child {
    color: #047857 !important;
}
html:not(.dark) .pipeline-step-active-blue,
html:not(.dark) a[href="#step-5-dispatch"] {
    background-color: #EFF6FF !important;
    border: 1px solid #93C5FD !important;
    color: #1E3A8A !important;
}
html:not(.dark) .pipeline-step-active-blue span,
html:not(.dark) a[href="#step-5-dispatch"] span {
    color: #1E40AF !important;
}
html:not(.dark) .pipeline-step-active-blue span:first-child,
html:not(.dark) a[href="#step-5-dispatch"] span:first-child {
    color: #1D4ED8 !important;
}

/* ==========================================================================
   DESIGN COSTING CALCULATOR - CONVERTED METER COST HERO CARD & DOCK
   Guaranteed High-Contrast Readability in Light & Dark Mode
   ========================================================================== */
html:not(.dark) #costingResultsCard {
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FDFA 60%, #FFFBEB 100%) !important;
    border: 2px solid rgba(0, 95, 115, 0.25) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 95, 115, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    color: #0F172A !important;
}
html.dark #costingResultsCard,
.dark #costingResultsCard {
    background: linear-gradient(135deg, #14213D 0%, #0D1627 50%, #005F73 100%) !important;
    border: 2px solid rgba(45, 212, 191, 0.4) !important;
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.5) !important;
    color: #FFFFFF !important;
}

/* Big Hero Total Meter Cost */
html:not(.dark) #costingResultsCard #totalCostMeter {
    color: #0F172A !important;
}
html.dark #costingResultsCard #totalCostMeter,
.dark #costingResultsCard #totalCostMeter {
    color: #FFFFFF !important;
}

/* Metric Sub-Tiles */
html:not(.dark) #costingResultsCard .metric-tile-box {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
}
html.dark #costingResultsCard .metric-tile-box,
.dark #costingResultsCard .metric-tile-box {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Specific Values inside Tiles */
html:not(.dark) #costingResultsCard #stitchCostMeter,
html:not(.dark) #costingResultsCard #totalRepeatCost {
    color: #0F172A !important;
}
html.dark #costingResultsCard #stitchCostMeter,
html.dark #costingResultsCard #totalRepeatCost,
.dark #costingResultsCard #stitchCostMeter,
.dark #costingResultsCard #totalRepeatCost {
    color: #FFFFFF !important;
}

html:not(.dark) #costingResultsCard #beadCostMeter,
html:not(.dark) #costingResultsCard #batchTotalCost {
    color: #D97706 !important;
}
html.dark #costingResultsCard #beadCostMeter,
html.dark #costingResultsCard #batchTotalCost,
.dark #costingResultsCard #beadCostMeter,
.dark #costingResultsCard #batchTotalCost {
    color: #FCA311 !important;
}

html:not(.dark) #costingResultsCard #stitchesPerMeter {
    color: #005F73 !important;
}
html.dark #costingResultsCard #stitchesPerMeter,
.dark #costingResultsCard #stitchesPerMeter {
    color: #99F6E4 !important;
}

/* Mobile Sticky Summary Dock */
html:not(.dark) #mobileCostingSummaryPill {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border: 2px solid rgba(0, 95, 115, 0.35) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
    color: #0F172A !important;
}
html.dark #mobileCostingSummaryPill,
.dark #mobileCostingSummaryPill {
    background-color: rgba(20, 33, 61, 0.95) !important;
    border: 2px solid rgba(252, 163, 17, 0.6) !important;
    color: #FFFFFF !important;
}
html:not(.dark) #mobileCostingSummaryPill #mobileFloatingPerMeter {
    color: #0F172A !important;
}
html.dark #mobileCostingSummaryPill #mobileFloatingPerMeter,
.dark #mobileCostingSummaryPill #mobileFloatingPerMeter {
    color: #FFFFFF !important;
}