html,
body {
    font-family: 'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    --midnight-blue: #1d273b;
    --qcs-primary: #01757A;
    background-color: var(--mud-palette-background, #F8FAFC) !important;
}

/* Dark bg applied immediately when html.dark-mode is set by the inline
   index.html script (runs before Blazor boots), preventing the white flash
   during MainLayout's first render when _isDarkMode is briefly false. */
html.dark-mode,
html.dark-mode body {
    background-color: #0F172A !important;
    color-scheme: dark;
}

.main-wrapper {
    background-color: var(--mud-palette-background, #F8FAFC) !important;
    padding: 1rem 1.25rem !important;
}

.nexus-sidebar-menu .mud-nav-link {
    padding-left: 1.25rem !important;
    font-size: 0.8125rem !important;
    color: #475569 !important;
    /* Standard Slate 600 */
    font-weight: 500 !important;
    opacity: 1 !important;
    transition: all 0.2s ease;
}

.sidebar-group .mud-nav-link {
    padding-left: 2.75rem !important;
}

/* ── Sidebar subgroup: indent + left-border to show hierarchy ── */
.sidebar-subgroup {
    margin-left: 0.875rem;
    border-left: 2px solid rgba(107, 114, 128, 0.18);
    padding-left: 0.25rem;
}

/* Subgroup header row: compact, muted, label-style */
.sidebar-subgroup>.mud-nav-group>.mud-nav-link {
    padding-left: 0.75rem !important;
    min-height: 30px !important;
    height: 30px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.55px;
    color: #9ca3af !important;
    background: transparent !important;
    opacity: 1;
}

/* Hide icon on subgroup header — icon already on parent */
.sidebar-subgroup>.mud-nav-group>.mud-nav-link .mud-nav-link-icon {
    display: none !important;
}

/* Subgroup expand chevron: smaller */
.sidebar-subgroup>.mud-nav-group>.mud-nav-link .mud-nav-group-expand-icon {
    font-size: 0.85rem !important;
    opacity: 0.5;
}

/* Links inside subgroup */
.sidebar-subgroup .mud-nav-link {
    padding-left: 1.25rem !important;
    font-size: 0.85rem !important;
}

.nexus-sidebar-menu .mud-nav-link:hover {
    color: #01757A !important;
    background-color: rgba(1, 117, 122, 0.07) !important;
}

.nexus-sidebar-menu .mud-nav-link.active {
    color: #01757A !important;
    font-weight: 600 !important;
    background-color: rgba(1, 117, 122, 0.08) !important;
    border-right: 3px solid #01757A;
}

.nexus-sidebar-menu .mud-nav-group-title .mud-nav-link-icon-default {
    color: #64748B !important;
    /* Steel Gray */
}

.nexus-sidebar-menu .mud-nav-group>.mud-nav-link {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Dark mode overrides — sidebar uses hardcoded light colors that don't flip via MudBlazor CSS vars */
html.dark-mode .nexus-sidebar-menu .mud-nav-link {
    color: #94A3B8 !important;
}

html.dark-mode .nexus-sidebar-menu .mud-nav-link:hover {
    color: #2BA5AB !important;
    background-color: rgba(43, 165, 171, 0.1) !important;
}

html.dark-mode .nexus-sidebar-menu .mud-nav-link.active {
    color: #2BA5AB !important;
    background-color: rgba(43, 165, 171, 0.1) !important;
    border-right-color: #2BA5AB;
}

html.dark-mode .nexus-sidebar-menu .mud-nav-group-title .mud-nav-link-icon-default {
    color: #64748B !important;
}

html.dark-mode .nexus-sidebar-menu .mud-nav-group>.mud-nav-link {
    color: #CBD5E1 !important;
}

html.dark-mode .sidebar-subgroup>.mud-nav-group>.mud-nav-link {
    color: #475569 !important;
}

html.dark-mode .sidebar-subgroup {
    border-left-color: rgba(203, 213, 225, 0.15);
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: #01757A;
}

.btn-primary {
    color: #fff;
    background-color: #01757A;
    border-color: #01757A;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: none !important;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Required field asterisk */
.form-label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* Invalid field border highlight */
.form-control.invalid,
.form-control.modified.invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.125rem rgba(220, 53, 69, 0.25);
}

#blazor-error-ui {
    color-scheme: light only;
    background: #fff9e6;
    color: #92400e;
    top: 1rem;
    right: 1rem;
    bottom: auto;
    left: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    display: none;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: auto;
    min-width: 300px;
    max-width: 480px;
    z-index: 9999;
    border-radius: 8px;
    border: 1px solid #ffecb5;
    border-left: 4px solid #f59e0b;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: 1rem;
    font-weight: bold;
}

#blazor-error-ui .reload {
    color: #b45309;
    font-weight: 600;
    text-decoration: underline;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTgyIDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3LjgyOSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5LjE4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDgyLjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

code {
    color: #c02d76;
}

/* Custom layout fixes for Tabler/MudBlazor */
.sidebar-drawer {
    border-right: 1px solid var(--mud-palette-divider) !important;
}

/* ==========================================================
   NexusDataTable Component Styles
   ========================================================== */
.nexus-table thead th {
    background-color: rgba(0, 0, 0, 0.02) !important;
    /* Subtle bg-light effect */
    color: var(--bs-secondary) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    border-top: 1px solid rgba(101, 109, 119, 0.12) !important;
    border-bottom: 1px solid rgba(101, 109, 119, 0.12) !important;
    vertical-align: middle !important;
}

/* Toolbar spacing */
.nexus-datatable .card-header {
    padding: 0.5rem 1rem !important;
    min-height: 40px !important;
    background-color: transparent !important;
    border-bottom: 1px solid #e6e7e9 !important;
}

.nexus-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0 !important;
}

.nexus-table tbody td {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(101, 109, 119, 0.06) !important;
    transition: background-color 0.15s ease !important;
}

.nexus-table tr:last-child td {
    border-bottom: 0 !important;
}

/* ── Zebra Stripes (QCS-inspired) ── */
.nexus-table tbody tr:nth-child(even) {
    background-color: #f8f9fc !important;
}

.nexus-table tbody tr:hover {
    background-color: #F1F5F9 !important;
}

.nexus-table.is-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.nexus-table .status-dot {
    width: 6px;
    height: 6px;
    margin-right: 0.5rem;
}

/* Checkbox columns */
.nexus-th-checkbox,
.nexus-td-checkbox {
    width: 40px !important;
    padding-left: 12px !important;
    padding-right: 4px !important;
}

/* Pagination active page */
.nexus-datatable .pagination .page-item.active .page-link {
    background-color: var(--bs-primary, #01757A);
    border-color: var(--bs-primary, #01757A);
    color: #fff;
}

/* ==========================================================
   Status Dot & Badges
   ========================================================== */

.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.375rem;
}

.status-dot-success {
    background-color: #059669;
}

.status-dot-warning {
    background-color: #f59e0b;
}

.text-status-success {
    color: #059669;
    font-weight: 500;
    font-size: 0.8125rem;
}

.badge-outline {
    background: transparent;
    border: 1px solid rgba(101, 109, 119, 0.16);
    color: #616876;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
}

/* Sidebar Dark Mode Bridge */
.sidebar-dark {
    background-color: #FFFFFF !important;
    border-right: 1px solid #E2E8F0 !important;
}

.sidebar-dark .mud-nav-link {
    color: #64748B !important;
}

.sidebar-dark .mud-nav-link.active {
    background-color: rgba(1, 117, 122, 0.08) !important;
    color: #01757A !important;
}

.sidebar-dark .mud-nav-link:hover {
    background-color: rgba(1, 117, 122, 0.05) !important;
}

.sidebar-dark .mud-nav-group-title {
    color: #94A3B8 !important;
}

/* ==========================================================
   Executive Luxury Login Page
   ========================================================== */

/* Fade-in Animation */
@keyframes nexusFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-fade-in {
    animation: nexusFadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-fill-mode: both;
}

/* Left Hero Panel */
.login-hero-luxury {
    background-image: url('../images/login-hero-bg.png');
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 100vh;
}

.login-hero-overlay-luxury {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(1, 117, 122, 0.82), rgba(0, 107, 112, 0.65));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 4rem;
}

.login-hero-content {
    max-width: 520px;
}

.login-hero-title-luxury {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.75rem;
    letter-spacing: 3px;
}

.login-hero-tagline {
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 0;
}

.login-hero-features {
    margin-top: 1.5rem;
}

/* Right Panel — Form Container */
.login-container-card {
    width: 100%;
    max-width: 380px;
    padding: 0 1.5rem;
}

/* Nexus Gradient Logo */
.nexus-login-logo {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #01757A, #019aa0);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(1, 117, 122, 0.3);
}

.nexus-login-logo-text {
    font-size: 28px;
    font-weight: 800;
    color: white;
    letter-spacing: -1px;
}

/* Form Fields */
.nexus-login-field .mud-input-outlined-border {
    border-color: #E2E8F0 !important;
    border-radius: 10px !important;
}

.nexus-login-field .mud-input-outlined-border:hover {
    border-color: #CBD5E1 !important;
}

.nexus-login-field.mud-input-has-focus .mud-input-outlined-border {
    border-color: #01757A !important;
    border-width: 2px !important;
}

/* Adornment icons (person/lock) match the idle border tone instead of the
   MudBlazor default dark gray, so they blend with the outlined field. */
.nexus-login-field .mud-input-adornment .mud-icon-root {
    color: #94A3B8 !important;
}

.nexus-login-field.mud-input-has-focus .mud-input-adornment .mud-icon-root {
    color: #01757A !important;
}

/* Browser autofill (e.g. saved "admin" credentials) repaints the input
   background pale blue/yellow via -webkit-autofill, clashing with the
   outlined field's white background and gray icon. Force it back to white
   using the box-shadow inset trick (background-color is ignored on autofill). */
.nexus-login-field input:-webkit-autofill,
.nexus-login-field input:-webkit-autofill:hover,
.nexus-login-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #1E293B !important;
    caret-color: #1E293B !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Sign In Button */
.nexus-login-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nexus-login-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 25px rgba(1, 117, 122, 0.4) !important;
    filter: brightness(1.06);
}

.nexus-login-btn:active {
    transform: translateY(0) !important;
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
    .login-container-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        margin: 1.5rem;
        padding: 2.5rem !important;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    }
}

/* ==========================================================
   Soft Pill Badges (Executive Luxury)
   ========================================================== */
.nexus-soft-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 9999px;
    white-space: nowrap;
}

.nexus-soft-badge-success {
    background-color: #D1FAE5;
    color: #059669;
}

.nexus-soft-badge-info {
    background-color: #DBEAFE;
    color: #2563EB;
}

.nexus-soft-badge-dark {
    background-color: #F1F5F9;
    color: #64748B;
}

.nexus-soft-badge-warning {
    background-color: #FEF3C7;
    color: #D97706;
}

.nexus-soft-badge-error {
    background-color: #FEE2E2;
    color: #DC2626;
}

/* ==========================================================
   Search Box – Global Standard (Executive Luxury)
   Applies to ALL MudTextField inside Toolbar / card-header
   ========================================================== */
.mud-toolbar .mud-input-outlined .mud-input-outlined-border,
.card-header .mud-input-outlined .mud-input-outlined-border,
.nexus-search-box .mud-input-outlined-border {
    border-color: #CBD5E1 !important;
    border-width: 1px !important;
    border-radius: 8px !important;
}

.mud-toolbar .mud-input-outlined:hover .mud-input-outlined-border,
.card-header .mud-input-outlined:hover .mud-input-outlined-border,
.nexus-search-box:hover .mud-input-outlined-border {
    border-color: #94A3B8 !important;
}

.mud-toolbar .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.card-header .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.nexus-search-box.mud-input-focused .mud-input-outlined-border {
    border-color: #01757A !important;
    border-width: 1.5px !important;
}

/* Remove MudBlazor default margin-bottom on search fields in toolbars */
.mud-toolbar .mud-input-control,
.card-header .mud-input-control {
    margin-bottom: 0 !important;
}

/* Custom Filter Bar for Compact Left-Aligned Filters */
.nexus-filter-bar,
.nexus-filter-bar.d-flex.align-items-center,
.d-flex.align-items-center.bg-light:has(.mud-input-control) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: start !important;
    gap: 1.5rem !important;
    width: 100% !important;
}

.nexus-filter-bar .mud-input-control,
.bg-light:has(.mud-input-control) .mud-input-control {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
}

/* ==========================================================
   Grid Row Height – 52px for airy Executive Luxury spacing
   ========================================================== */
.nexus-table tbody tr {
    height: 52px;
}

.nexus-table tbody td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    vertical-align: middle;
}

.nexus-table thead th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-weight: 600;
    color: #475569;
    font-size: 13px;
    text-transform: capitalize;
    border-bottom: 2px solid #E2E8F0 !important;
}

/* ==========================================================
   Action Icons – Slate default, Indigo on hover
   ========================================================== */
.nexus-table .mud-icon-button {
    color: #64748B !important;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nexus-table .mud-icon-button:hover {
    color: #01757A !important;
    background-color: rgba(1, 117, 122, 0.08) !important;
}

/* Expansion Fixes */
.container-xl,
.container-lg {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.page-header {
    margin-bottom: 0.75rem !important;
    /* Reduced for tighter layout */
}

/* ==========================================================
   Scrollable Tab Headers - prevents wrapping
   ========================================================== */
.card-header-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.card-header-tabs::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.card-header-tabs .nav-link {
    white-space: nowrap !important;
    cursor: pointer;
}

/* Allow tabs to scroll horizontally when content is long (e.g. Vietnamese) */
.card-header-tabs.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.card-header-tabs.nav-tabs::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Prevent card-header from clipping tab content */
.card-header {
    overflow: visible !important;
}

/* Ensure tab content is not clipped */
.tab-content {
    overflow: visible;
}

/* Responsive page header - prevent title/button overlap */
@media (max-width: 1199.98px) {
    .page-header .row {
        flex-direction: column !important;
    }

    .page-header .col-auto {
        margin-top: 0.75rem;
    }
}

/* ==========================================================
   NEXUS DESIGN SYSTEM - SAP S/4HANA Vibe
   ========================================================== */

/* ==========================================================
   NEXUS DESIGN SYSTEM - Buttons
   ========================================================== */
.nexus-btn-primary {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    padding: 6px 16px !important;
    box-shadow: 0 1px 2px rgba(1, 117, 122, 0.12) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nexus-btn-primary:hover:not(:disabled) {
    background-color: var(--mud-palette-primary-darken) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 117, 122, 0.22) !important;
}

.nexus-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.nexus-btn-outline {
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
    background-color: #FFFFFF !important;
    transition: all 0.2s ease !important;
}

.nexus-btn-outline:hover:not(:disabled) {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #1E293B !important;
}

/* --- Legacy Button Variants --- */

/* ==========================================================
   NEXUS DESIGN SYSTEM v3 — World-Class Design Tokens
   Benchmarked: SAP Fiori 3.0, Oracle Redwood, Linear, Stripe
   ========================================================== */
:root {
    /* --- Color Tokens --- */
    --nx-bg: #F8FAFC;
    --nx-text: #334155;
    --nx-text-muted: #64748B;
    --nx-primary: #01757A;
    --nx-primary-hover: #006b70;
    --nx-accent: #01757A;
    --nx-radius: 6px;
    --nx-radius-sm: 4px;
    --nx-radius-lg: 8px;

    /* --- Shadow Tiers (3-level) --- */
    --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --nx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --nx-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --nx-shadow-xl: 0 20px 50px -12px rgba(0, 0, 0, 0.12);

    /* --- Spacing Scale (4px grid) --- */
    --nx-space-1: 4px;
    --nx-space-2: 8px;
    --nx-space-3: 12px;
    --nx-space-4: 16px;
    --nx-space-5: 20px;
    --nx-space-6: 24px;
    --nx-space-8: 32px;
    --nx-space-10: 40px;
    --nx-space-12: 48px;

    /* --- Motion / Easing --- */
    --nx-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --nx-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --nx-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --nx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --nx-duration-fast: 0.15s;
    --nx-duration-normal: 0.2s;
    --nx-duration-slow: 0.35s;

    /* --- Legacy Compat --- */
    --nexus-primary: #01757A;
    --nexus-primary-hover: #006b70;
    --nexus-accent: #01757A;
    --nexus-accent-glow: 0 0 12px rgba(1, 117, 122, 0.35);
    --nexus-bg: #F8FAFC;
    --nexus-card-bg: #ffffff;
    --nexus-card-radius: 6px;
    --nexus-card-shadow: var(--nx-shadow-md);
    --nexus-card-shadow-hover: var(--nx-shadow-lg);
    --nexus-transition: var(--nx-duration-normal) var(--nx-ease-default);
    --nexus-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

    /* --- Focus Ring (Accessibility WCAG 2.1 AA) --- */
    --nx-focus-ring: 0 0 0 3px rgba(1, 117, 122, 0.35);
    --nx-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.3);

    /* --- Dashboard Theme Variables --- */
    --bg-card: #FFFFFF;
    --border-color: #E2E8F0;
    --text-heading: #1E293B;
    --text-secondary: #64748B;
    --bg-surface-alt: #F8FAFC;
}

/* --- Dark Mode Token Overrides --- */
.dark-mode {
    --nx-bg: #0F172A;
    --nx-text: #F8FAFC;
    --nx-text-muted: #94A3B8;
    --nx-primary: #2BA5AB;
    --nx-primary-hover: #4CBFC5;
    --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --nx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
    --nx-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    --nx-shadow-xl: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
    --nx-focus-ring: 0 0 0 3px rgba(43, 165, 171, 0.4);
    --nexus-primary: #2BA5AB;
    --nexus-card-bg: #1E293B;
    --nexus-bg: #0F172A;

    /* --- Dashboard Theme Variables --- */
    --bg-card: #1E293B;
    --border-color: #334155;
    --text-heading: #F8FAFC;
    --text-secondary: #94A3B8;
    --bg-surface-alt: #0F172A;
}

/* --- Global Focus: strip all outline + box-shadow from every element --- */
*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Restore focus ring ONLY on native interactive elements (keyboard accessibility).
   Using * caused MudBlazor wrapper divs to show a large box-shadow overlay when child inputs were focused. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="tab"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="switch"]:focus-visible,
a[href]:focus-visible {
    box-shadow: var(--nx-focus-ring) !important;
}

/* --- Tabular Nums for Data --- */
.erp-datagrid td,
.nexus-stat-value,
.hero-number,
.stat-number,
.qty-column input,
[class*="numeric"],
[class*="amount"],
[class*="price"],
[class*="rate"] {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
}

/* --- Smooth font rendering (all browsers) --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --- Global Layouts --- */
.master-page {
    background-color: var(--nx-bg);
    color: var(--nx-text);
    /* BR-SYS-46: was `height:100%; min-height:0; overflow:hidden`, which locked this box to the
       viewport and then CLIPPED anything taller. On a page without its own inner scroller — the
       FWD dashboard, measured 1319px of content in a 972px box — the bottom 347px was simply
       unreachable: the wrapper outside is the real scroll container, and clipping here meant it
       never saw there was more to scroll to.
       Growing with the content instead lets that wrapper do its job.
       overflow must be `visible` on BOTH axes, not `overflow-x:hidden` + `overflow-y:visible`:
       when one axis is hidden CSS computes the other to `auto`, which turns this element into a
       scroll container of its own and takes the job away from the wrapper again (measured). */
    height: auto;
    min-height: 100% !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

.master-page > .card {
    /* flex-grow: 0 (not 1) — the card sizes to its content instead of always stretching to
       fill .master-page's full forced height. A short result list (e.g. a 7-row master-data
       table) no longer leaves a stretched blank gap below its pagination footer. flex-shrink: 1
       is untouched, so long lists still get clamped to the available height and scroll
       internally instead of pushing the pagination bar off-screen (the original reason this
       chain forces flex + min-height:0 + overflow:hidden down through card-body/.nexus-datatable). */
    flex: 0 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.master-page > .card:has(~ .card) {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

.master-page .card-body,
.master-page .mud-hidden {
    /* See .master-page > .card above — same flex-grow:0 rationale, one level down the chain. */
    flex: 0 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.master-page .card-body.border-bottom,
.master-page .card-body.flex-none,
.master-page .filter-toolbar {
    flex: 0 0 auto !important;
}

.master-page .card > .p-0,
.master-page .card > .nexus-datatable,
.master-page .card > ::deep .nexus-datatable {
    /* See .master-page > .card above — same flex-grow:0 rationale, one level down the chain. */
    flex: 0 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* List pages that wrap NexusDataGrid directly in a MudPaper instead of .card/.card-body
   (PortList, ChargeTypeList, JobList, and most other master/forwarding list pages) skip the
   .master-page > .card flex chain above entirely — MudPaper isn't a flex container and never
   gets bounded, so .erp-datagrid's own flex:1/overflow:hidden/min-height:0 (which needs a
   height-bounded flex parent to do anything) has no effect. Rows then render at full natural
   height instead of scrolling internally, pushing PagerContent past .master-page's
   overflow:hidden boundary — the pagination bar exists in the DOM but is clipped off-screen.
   Give any MudPaper that directly wraps .erp-datagrid the same containment .card gets. */
.master-page > .mud-paper:has(> .erp-datagrid) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.code-link {
    color: #01757A;
    cursor: pointer;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: color 0.15s ease;
}

.code-link:hover {
    text-decoration: underline !important;
    border-bottom: none !important;
    color: #006b70 !important;
}

.rounded-sm {
    border-radius: 4px !important;
}

/* Command Ribbon / Toolbar - flat surface, tonal layering (no glassmorphism/blur) */
.glass-header {
    position: sticky !important;
    top: 48px !important;
    z-index: 1000 !important;
    background: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.dark-mode .glass-header {
    background: var(--bg-card, var(--mud-palette-surface)) !important;
    border-bottom: 1px solid var(--border-color, var(--mud-palette-lines-default)) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.odoo-sheet {
    background: var(--mud-palette-surface);
    padding: 1.5rem;
    border-radius: var(--nx-radius);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--nexus-card-shadow);
    max-width: 100%;
    margin: 1rem 0;
}

/* CSS-based Fullscreen mode */
@media (min-width: 768px) {
    .transaction-fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 1350 !important;
        overflow-y: auto !important;
        background-color: var(--nx-bg) !important;
        padding: 0 !important;
    }

    .transaction-fullscreen .odoo-sheet {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.75rem 0.75rem !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .transaction-fullscreen .glass-header {
        border-radius: 0 !important;
        margin: 0 0 16px 0 !important;
        top: 0 !important;
    }
}

/* Smart Buttons Box */
.oe_button_box {
    display: flex;
    gap: 0.5rem;
}

.oe_button_box .btn-outline-secondary {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    transition: all 0.2s;
}

.oe_button_box .btn-outline-secondary:hover {
    background: var(--mud-palette-background-grey);
    border-color: var(--nx-primary);
    transform: translateY(-1px);
}

/* Status Bar / Workflow Stepper */
.odoo-statusbar {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

.odoo-statusbar .btn {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: 0 !important;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.odoo-statusbar .btn.btn-light {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

.odoo-statusbar .btn:last-child {
    border-right: none;
}

.odoo-statusbar .btn-primary {
    background-color: #01757A;
    background-image: none;
    color: white;
}

/* ==========================================================
   NEXUS DATA GRID — Premium Design System
   Inspired by: Linear, SAP Fiori, Stripe Dashboard
   Supports: Light Mode + Dark Mode via .dark-mode class
   ========================================================== */

/* --- Design Tokens (Light) --- */
.erp-datagrid {
    --grid-bg: #FFFFFF;
    --grid-border: #E2E8F0;
    --grid-radius: 12px;
    --grid-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);

    /* Header */
    --grid-th-bg: #F8FAFC;
    --grid-th-color: #64748B;
    --grid-th-border: #E2E8F0;
    --grid-th-font: 0.72rem;

    /* Body */
    --grid-td-color: #334155;
    --grid-td-border: #F1F5F9;
    --grid-td-font: 0.875rem;

    /* Zebra */
    --grid-row-odd: #FFFFFF;
    --grid-row-even: #F8FAFC;

    /* Hover / Active */
    --grid-hover: #EFF6FF;
    --grid-active: #DBEAFE;

    /* Filter inputs */
    --grid-input-bg: #FFFFFF;
    --grid-input-border: #E2E8F0;
    --grid-input-focus: var(--nx-primary, #01757A);
    --grid-input-ring: rgba(1, 117, 122, 0.12);

    /* Pagination */
    --grid-pager-bg: #FAFBFC;
    --grid-pager-color: #64748B;
    --grid-pager-border: #E2E8F0;

    /* Accent */
    --grid-accent: #01757A;
    --grid-accent-soft: rgba(1, 117, 122, 0.08);
    --grid-accent-glow: rgba(1, 117, 122, 0.12);

    /* Scrollbar */
    --grid-scroll-thumb: #CBD5E1;
    --grid-scroll-track: transparent;
}

/* --- Design Tokens (Dark) --- */
.dark-mode .erp-datagrid {
    --grid-bg: #1E293B;
    --grid-border: #334155;
    --grid-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);

    --grid-th-bg: #1A2332;
    --grid-th-color: #94A3B8;
    --grid-th-border: #334155;

    --grid-td-color: #CBD5E1;
    --grid-td-border: #293548;

    --grid-row-odd: #1E293B;
    --grid-row-even: #233044;

    --grid-hover: #2A3F5F;
    --grid-active: #1E3A5F;

    --grid-input-bg: #1A2332;
    --grid-input-border: #475569;
    --grid-input-ring: rgba(56, 189, 248, 0.25);

    --grid-pager-bg: #1A2332;
    --grid-pager-color: #94A3B8;
    --grid-pager-border: #334155;

    --grid-accent: #2DD4BF;
    --grid-accent-soft: rgba(56, 189, 248, 0.1);
    --grid-accent-glow: rgba(56, 189, 248, 0.15);

    --grid-scroll-thumb: #475569;
    --grid-scroll-track: transparent;
}

/* --- Container --- */
.erp-datagrid {
    background: var(--grid-bg) !important;
    border-radius: var(--grid-radius) !important;
    border: 1px solid var(--grid-border) !important;
    box-shadow: var(--grid-shadow) !important;
    overflow: hidden;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.erp-datagrid .mud-table-container {
    border-radius: var(--grid-radius);
    overflow-x: auto !important;
    overflow-y: auto !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

.erp-datagrid .mud-table-pagination,
.erp-datagrid .mud-table-pager {
    flex: 0 0 auto !important;
}

.erp-datagrid .mud-table-container > table,
.erp-datagrid .mud-table-root {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
}

/* --- Header --- */
.erp-datagrid thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Accent top-line on header */
.erp-datagrid thead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--grid-accent), var(--grid-accent) 40%, transparent 100%);
    z-index: 1;
    border-radius: var(--grid-radius) var(--grid-radius) 0 0;
}

.erp-datagrid th {
    background-color: var(--grid-th-bg) !important;
    color: var(--grid-th-color) !important;
    font-weight: 600 !important;
    font-size: var(--grid-th-font) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--grid-th-border) !important;
    border-top: none !important;
    padding: 14px 16px !important;
    white-space: nowrap;
    position: sticky !important;
    top: 0;
    z-index: 3;
}

/* Align header content to match the text-alignment of the column */
.erp-datagrid th.text-end,
.erp-datagrid th[style*="text-align: right"],
.erp-datagrid th[style*="text-align:right"] {
    text-align: right !important;
}

.erp-datagrid th.text-end .mud-data-grid-header-cell-container,
.erp-datagrid th[style*="text-align: right"] .mud-data-grid-header-cell-container,
.erp-datagrid th[style*="text-align:right"] .mud-data-grid-header-cell-container {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.erp-datagrid th.text-end .mud-header-cell-wrapper,
.erp-datagrid th.text-end .mud-button-root,
.erp-datagrid th.text-end .mud-data-grid-header-cell-sort-label,
.erp-datagrid th.text-end span,
.erp-datagrid th[style*="text-align: right"] .mud-header-cell-wrapper,
.erp-datagrid th[style*="text-align: right"] .mud-button-root,
.erp-datagrid th[style*="text-align: right"] .mud-data-grid-header-cell-sort-label,
.erp-datagrid th[style*="text-align: right"] span,
.erp-datagrid th[style*="text-align:right"] .mud-header-cell-wrapper,
.erp-datagrid th[style*="text-align:right"] .mud-button-root,
.erp-datagrid th[style*="text-align:right"] .mud-data-grid-header-cell-sort-label,
.erp-datagrid th[style*="text-align:right"] span {
    margin-left: auto !important;
    text-align: right !important;
    justify-content: flex-end !important;
}

.erp-datagrid th[style*="text-align: center"] .mud-table-cell-header-wrapper,
.erp-datagrid th[style*="text-align:center"] .mud-table-cell-header-wrapper,
.erp-datagrid th.mud-text-align-center .mud-table-cell-header-wrapper,
.erp-datagrid th[style*="text-align: center"] .mud-button-root,
.erp-datagrid th[style*="text-align:center"] .mud-button-root,
.erp-datagrid th.mud-text-align-center .mud-button-root,
.erp-datagrid th.text-center .mud-table-cell-header-wrapper,
.erp-datagrid th.text-center .mud-button-root,
.erp-datagrid th.text-center .mud-data-grid-header-cell-container,
.erp-datagrid th.text-center .mud-data-grid-header-cell-sort-label,
.erp-datagrid th.text-center .header-cell-wrapper,
.erp-datagrid th[style*="text-align: center"] .mud-data-grid-header-cell-container,
.erp-datagrid th[style*="text-align: center"] .mud-data-grid-header-cell-sort-label,
.erp-datagrid th[style*="text-align: center"] .header-cell-wrapper,
.erp-datagrid th[style*="text-align:center"] .mud-data-grid-header-cell-container,
.erp-datagrid th[style*="text-align:center"] .mud-data-grid-header-cell-sort-label,
.erp-datagrid th[style*="text-align:center"] .header-cell-wrapper {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* First header cell — subtle accent tint */
.erp-datagrid th:first-child {
    padding-left: 20px !important;
}

/* Sort button inherits header color */
.erp-datagrid th .mud-button-root {
    color: var(--grid-th-color) !important;
    font-weight: 600 !important;
    font-size: var(--grid-th-font) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.erp-datagrid th .mud-button-root:hover {
    color: var(--grid-accent) !important;
}

/* --- Body Rows --- */
.erp-datagrid td {
    border-bottom: 1px solid var(--grid-td-border) !important;
    padding: 11px 16px !important;
    font-size: var(--grid-td-font) !important;
    color: var(--grid-td-color) !important;
    vertical-align: middle;
    transition: background-color 0.12s ease;
}

/* Remove bottom border on last row to prevent double line with pagination footer */
.erp-datagrid .mud-table-body .mud-table-row:last-child td {
    border-bottom: none !important;
}

/* Zebra Striping */
.erp-datagrid .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: var(--grid-row-odd) !important;
}

.erp-datagrid .mud-table-body .mud-table-row:nth-child(even) {
    background-color: var(--grid-row-even) !important;
}

/* Hover — overrides zebra */
.erp-datagrid .mud-table-body .mud-table-row:hover {
    background-color: var(--grid-hover) !important;
}

.erp-datagrid .mud-table-body .mud-table-row:hover td {
    color: var(--grid-td-color) !important;
}

/* Last row: no bottom border (cleaner card edge) */
.erp-datagrid .mud-table-body .mud-table-row:last-child td {
    border-bottom: none !important;
}

/* --- Sticky Column 2 ---
   MudBlazor's own Column.StickyLeft hardcodes left:0, which only works for ONE pinned column — see
   NexusDataGrid.razor's ApplyStickyColumns for why a second pinned column can't reuse it. This class
   is applied by that same code to whichever column is currently second-from-left; its `left` offset
   is kept in sync with column 1's actual rendered width by a ResizeObserver in nexus-datagrid.js
   (--nexus-sticky2-left), not hardcoded, since that width varies per grid/content and changes live
   on column resize. Row-parity backgrounds are redeclared explicitly (not "inherit") so the pinned
   cell shows the correct opaque color instead of letting horizontally-scrolled content show through. */
/* BR-UI-GRID-STICKY-04 — chỉ ghim cột 2 khi nexus-datagrid.js ĐÃ đo được bề rộng cột 1 và gắn
   class .nexus-sticky2-ready. Trước đây rule này áp vô điều kiện với fallback left:0px, nên khi JS
   chưa chạy (hoặc chạy lúc DOM chưa có ô) cột 2 ghim ngay tại 0 — trùng chỗ cột 1, z-index lại cao
   hơn nên đè lên và che mất tiêu đề cột 1 ("DOCUMENT NUMBER" bị cắt còn "DOC" khi cuộn ngang,
   user báo 2026-08-14). Không có class ⇒ cột 2 hiển thị bình thường, không ghim. */
.erp-datagrid.nexus-sticky2-ready .nexus-sticky-col2 {
    position: sticky !important;
    left: var(--nexus-sticky2-left, 0px);
    z-index: 1;
}
.erp-datagrid.nexus-sticky2-ready thead .nexus-sticky-col2 {
    z-index: 3;
}
.erp-datagrid .mud-table-body .mud-table-row:nth-child(odd) .nexus-sticky-col2 {
    background-color: var(--grid-row-odd) !important;
}
.erp-datagrid .mud-table-body .mud-table-row:nth-child(even) .nexus-sticky-col2 {
    background-color: var(--grid-row-even) !important;
}
.erp-datagrid .mud-table-body .mud-table-row:hover .nexus-sticky-col2 {
    background-color: var(--grid-hover) !important;
}

/* --- Sticky Column 1 (+ the MultiSelection checkbox that rides along) ---
   Column 1 is pinned through MudBlazor's own Column.StickyLeft, whose CSS paints a single flat
   surface colour. That colour does NOT follow row striping or hover, so every pinned cell stayed
   white while the row behind it went grey — a visible white/grey seam down the pinned edge (user
   report 2026-08-14, screenshot on Stock Transactions). The col-2 rules above already solved this;
   column 1 was simply never given the same treatment.
   Backgrounds are redeclared explicitly rather than `inherit` for the same reason as col 2: the cell
   must be opaque, otherwise horizontally-scrolled content shows through underneath it. */
.erp-datagrid .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell.sticky-left,
.erp-datagrid .mud-table-body .mud-table-row:nth-child(odd) td.mud-table-cell-checkbox {
    background-color: var(--grid-row-odd) !important;
}
.erp-datagrid .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell.sticky-left,
.erp-datagrid .mud-table-body .mud-table-row:nth-child(even) td.mud-table-cell-checkbox {
    background-color: var(--grid-row-even) !important;
}
.erp-datagrid .mud-table-body .mud-table-row:hover .mud-table-cell.sticky-left,
.erp-datagrid .mud-table-body .mud-table-row:hover td.mud-table-cell-checkbox {
    background-color: var(--grid-hover) !important;
}

/* --- Checkbox Column --- */
.erp-datagrid th.mud-table-cell-checkbox,
.erp-datagrid td.mud-table-cell-checkbox {
    padding-left: 20px !important;
    padding-right: 8px !important;
    width: 48px !important;
    text-align: center !important;
}

/* --- Column Filter Inputs --- */
.erp-datagrid th .mud-input-control {
    margin-top: 6px;
}

.erp-datagrid .mud-input-control {
    width: 100% !important;
    margin: 0 !important;
}

.erp-datagrid .mud-input-control-input-container {
    background-color: var(--grid-input-bg) !important;
    border: 1px solid var(--grid-input-border) !important;
    border-radius: 4px !important;
    /* Locked to 4px rounded.sm */
    padding: 0 6px !important;
    height: 28px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.erp-datagrid .mud-input {
    margin-top: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    align-items: center !important;
    width: 100% !important;
}

/* Remove default MudBlazor text variant underlines to prevent double borders inside cell boxes */
.erp-datagrid .mud-input::before,
.erp-datagrid .mud-input::after {
    display: none !important;
}

.erp-datagrid input.mud-input-slot {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important;
    align-self: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    text-overflow: clip !important;
}

.erp-datagrid .mud-input-adornment,
.erp-datagrid .mud-input-adornment-end,
.erp-datagrid .mud-numeric-spin-buttons {
    margin-top: 0 !important;
    align-self: center !important;
}

.erp-datagrid .mud-input-adornment .mud-icon-button,
.erp-datagrid .mud-icon-button.mud-input-clear-button,
.erp-datagrid .mud-input-adornment-end .mud-icon-button {
    padding: 2px !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
}



.erp-datagrid .mud-input-control-input-container:hover {
    border-color: var(--grid-input-focus) !important;
}

.erp-datagrid .mud-input-control-input-container:focus-within {
    border-color: var(--grid-input-focus) !important;
    box-shadow: 0 0 0 3px var(--grid-input-ring) !important;
}

/* --- Pagination Footer --- */
.erp-datagrid .mud-table-pagination {
    border-top: 1px solid var(--grid-pager-border) !important;
    background: var(--grid-bg) !important;
    color: var(--grid-pager-color) !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.8rem;
    position: relative;
}

.erp-datagrid .mud-table-pagination::after {
    display: none !important;
}

.erp-datagrid .mud-table-pagination .mud-button-root {
    color: var(--grid-pager-color) !important;
    border-radius: 6px !important;
    transition: all 0.15s ease;
}

.erp-datagrid .mud-table-pagination .mud-button-root.mud-button-filled,
.mud-pagination .mud-button-root.mud-button-filled {
    color: var(--mud-palette-primary-contrast-text) !important;
}

.erp-datagrid .mud-table-pagination .mud-button-root:hover {
    background-color: var(--grid-accent-soft) !important;
    color: var(--grid-accent) !important;
}

/* Page size selector */
.erp-datagrid .mud-table-pagination .mud-select {
    font-size: 0.8rem;
}

/* Fix: Remove double border on MudSelect in pagination area.
   The .mud-input-control-input-container rule (line ~1182) adds an extra border
   meant for column filter inputs, but it also hits the page-size MudSelect
   which already has its own Outlined fieldset border → 2 overlapping rectangles. */
.erp-datagrid .mud-table-pagination .mud-input-control-input-container,
.erp-datagrid .card-footer .mud-input-control-input-container {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

/* Keep the Outlined fieldset border clean in pagination */
.erp-datagrid .mud-table-pagination .mud-input-outlined-border,
.erp-datagrid .card-footer .mud-input-outlined-border {
    border-color: var(--grid-pager-border, #E2E8F0) !important;
    border-width: 1px !important;
    border-radius: 4px !important;
}

/* Fix: Reset nested card-footer inside mud-table-pagination to prevent double borders/backgrounds and wrapping layout bugs */
.erp-datagrid .mud-table-pagination .card-footer {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}


/* Collapse empty DataGrid toolbar and position the column chooser gear button inline with the header */
.erp-datagrid .mud-table-toolbar,
.erp-datagrid .mud-grid-toolbar {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
}

.erp-datagrid .mud-table-toolbar .mud-menu,
.erp-datagrid .mud-grid-toolbar .mud-menu {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 100 !important;
}

/* Adjust gear icon padding and color to fit header theme */
.erp-datagrid .mud-table-toolbar .mud-menu .mud-icon-button,
.erp-datagrid .mud-grid-toolbar .mud-menu .mud-icon-button {
    padding: 6px !important;
    color: var(--text-secondary, #64748B) !important;
}
.erp-datagrid .mud-table-toolbar .mud-menu .mud-icon-button:hover,
.erp-datagrid .mud-grid-toolbar .mud-menu .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* Push the last column header text slightly to the left to avoid overlapping the gear icon */
.erp-datagrid .mud-table-head .mud-table-row .mud-table-cell:last-child {
    padding-right: 42px !important;
}

/* BR-FWD-DOC-55: MudDataGrid inserts its native loading indicator as an extra in-flow
   <tr><th class="mud-table-loading"> inside <thead> while Loading="true", then removes it
   when the request resolves — every data row is pushed down by that row's height and snaps
   back up a moment later (measured 33px on JobList). Same class of bug already fixed for
   NexusDataTable (system.md #39): overlay the bar instead of letting it occupy flow space. */
/* Scoped to `.mud-table`, not `.erp-datagrid`: MudBlazor puts that class on the wrapper of
   BOTH MudTable and MudDataGrid, so this covers the 139 NexusDataGrid screens plus the ~36
   that still instantiate MudDataGrid/MudTable directly. NexusDataTable is unaffected — it
   renders its own `.nexus-grid-loading-bar` (system.md #39), a different element. */
.mud-table .mud-table-container {
    position: relative;
}
/* `th.` (not just the class) is required: `.erp-datagrid th:first-child` above also sets
   padding with !important, and the loading cell is the only child of its row — a bare
   class selector loses the specificity tie and the bar ends up indented 20px. */
.mud-table th.mud-table-loading {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* The <th> ships with 14px vertical padding and an opaque surface background, so
       overlaying it as-is put a 33px solid block over the header row and hid the column
       titles. Strip both: what is left is the 4px progress bar itself, sitting flush on
       the header's top edge. */
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    line-height: 0 !important;
    z-index: 20 !important;
}


/* --- Scrollbar (thin, Mac-style) --- */
.erp-datagrid .mud-table-container::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.erp-datagrid .mud-table-container::-webkit-scrollbar-track {
    background: var(--grid-scroll-track);
}

.erp-datagrid .mud-table-container::-webkit-scrollbar-thumb {
    background: var(--grid-scroll-thumb);
    border-radius: 3px;
}

.erp-datagrid .mud-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--grid-th-color);
}

/* --- Action Icons in Grid --- */
.erp-datagrid .mud-icon-button {
    opacity: 0.6;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.erp-datagrid .mud-table-row:hover .mud-icon-button {
    opacity: 1;
}

.erp-datagrid .mud-icon-button:hover {
    opacity: 1;
    background-color: var(--grid-row-even) !important;
    border-radius: 8px;
}

/* --- Empty State --- */
.erp-datagrid .mud-table-empty-row td {
    text-align: center !important;
    padding: 3rem 1rem !important;
    color: var(--grid-th-color) !important;
    font-style: italic;
    border-bottom: none !important;
}

/* --- Standardized Badges (Soft Pill) --- */
.nx-badge {
    padding: 4px 12px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.nx-badge-receipt {
    background: #DCFCE7;
    color: #166534;
}

.nx-badge-issue {
    background: #FEE2E2;
    color: #991B1B;
}

.nx-badge-transfer {
    background: #DBEAFE;
    color: #1E40AF;
}

.nx-badge-default {
    background: #F1F5F9;
    color: #475569;
}

/* Status Soft Badges */
.nexus-soft-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.nexus-soft-badge-success {
    background: #DCFCE7 !important;
    color: #15803D !important;
}

.nexus-soft-badge-warning {
    background: #FEF9C3 !important;
    color: #A16207 !important;
}

.nexus-soft-badge-danger {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
}

.nexus-soft-badge-info {
    background: #DBEAFE !important;
    color: #1D4ED8 !important;
}

.nexus-soft-badge-dark {
    background: #F1F5F9 !important;
    color: #334155 !important;
}

/* Numeric Columns */
.qty-column input {
    text-align: right !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}

/* Hover Icons */
.hover-action-icon {
    opacity: 0.4;
    transition: all 0.2s;
}

.hover-action-icon:hover {
    opacity: 1;
    background-color: #F1F5F9;
}

.hover-action-icon.danger:hover {
    color: #DC2626 !important;
    background-color: #FEE2E2 !important;
}

/* --- Dashboard Cards --- */
.hero-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
}

.hero-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

.hero-label {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
}

.hero-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.hero-icon {
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-value {
    border-left: 4px solid #01757A !important;
}

.hero-icon-value {
    background: rgba(1, 117, 122, 0.08);
    color: #01757A;
}

.hero-danger {
    border-left: 5px solid #ef4444 !important;
    background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}

.hero-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.hero-warning {
    border-left: 5px solid #f59e0b !important;
    background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}

.hero-icon-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.hero-safe {
    border-left: 5px solid #22c55e !important;
}

.hero-icon-safe {
    background: rgba(34, 197, 94, 0.08);
    color: #22c55e;
}

.stat-card {
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #E2E8F0;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.stat-number {
    font-size: 1.4rem;
    font-weight: 800;
}

/* Dashboard Pill Badges */
.pill-badge {
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid;
}

.pill-success {
    background: rgba(34, 197, 94, 0.08);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.2);
}

.pill-danger {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.2);
}

.pill-warning {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.2);
}

.pill-info {
    background: rgba(1, 117, 122, 0.08);
    color: #0284c7;
    border-color: rgba(1, 117, 122, 0.2);
}

.pill-secondary {
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.2);
}

.pill-posted {
    background: rgba(34, 197, 94, 0.08);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.2);
}

.pill-draft {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.2);
}

/* --- AI Insight Alert --- */
.insight-alert {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    color: #92400e;
    font-size: 0.85rem;
}

/* Skeleton Shimmer */
.skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* KPI Blink */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.kpi-blink {
    animation: blink 2s ease-in-out infinite;
}

/* ─── Enhanced Typography ─── */
body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================
   Executive Luxury Page Header Components
   ========================================================== */
.nexus-page-header {
    display: flex;
    align-items: center;
    /* Vertically center breadcrumbs and buttons */
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.125rem 0 0.5rem 0;
    /* Halved top padding */
    margin-bottom: 0;
}

.nexus-page-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* Tight gap between tiny breadcrumbs and large title */
}

/* 12px Light Gray Breadcrumbs */
.nexus-premium-breadcrumbs .mud-breadcrumb-item {
    font-size: 12px !important;
    font-weight: 500;
}

.nexus-premium-breadcrumbs .mud-breadcrumb-item a {
    color: #64748B !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nexus-premium-breadcrumbs .mud-breadcrumb-item a:hover {
    color: var(--nexus-primary) !important;
}

.nexus-premium-breadcrumbs .mud-breadcrumb-separator {
    color: #CBD5E1 !important;
    /* Extremely subtle separator */
    font-size: 14px;
}

/* 24px Semi-Bold Teal Page Title */
.nexus-page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.nexus-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.nexus-btn-action {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    border-radius: 6px !important;
    transition: all var(--nexus-transition) !important;
}

.nexus-btn-action:hover {
    transform: translateY(-1px);
}

/* Reset margins for MudBlazor inputs inside the header so they don't push vertical alignment */
.nexus-page-header .mud-input-control,
.nexus-page-header .mud-switch {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
    .nexus-page-header {
        flex-direction: column;
    }

    .nexus-page-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================
   NexusStatCards Component - QCS-Inspired Gradient
   ========================================================== */
.nexus-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.nexus-stat-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #E2E8F0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

/* Subtle sheen overlay */
.nexus-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: none;
    pointer-events: none;
}

/* Executive Luxury Stat Cards */
.nexus-stat-card {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #F8FAFC;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nexus-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* Compact Variation */
.nexus-stat-card-compact {
    padding: 0.75rem 1rem !important;
}
.nexus-stat-card-compact .nexus-stat-icon {
    width: 38px;
    height: 38px;
}
.nexus-stat-card-compact .nexus-stat-icon .mud-icon-root {
    font-size: 1.25rem;
}
.nexus-stat-card-compact .nexus-stat-value {
    font-size: 1.25rem;
}
.nexus-stat-card-compact .nexus-stat-label {
    font-size: 0.65rem;
}

.nexus-stat-card-inner {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.nexus-stat-chart-inline {
    opacity: 0.8;
    /* Nudge it down minimally to align with text baseline perfectly */
    transform: translateY(4px);
}

.nexus-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.nexus-stat-icon .mud-icon-root {
    color: white !important;
}

/* Icon Color Variants - brighter on dark card */
.nexus-stat-primary {
    background: linear-gradient(135deg, #01757A, #019aa0);
    box-shadow: 0 4px 10px rgba(1, 117, 122, 0.25);
}

.nexus-stat-success {
    background: linear-gradient(135deg, #059669, #10B981);
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.2);
}

.nexus-stat-warning {
    background: linear-gradient(135deg, #D97706, #F59E0B);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2);
}

.nexus-stat-error {
    background: linear-gradient(135deg, #DC2626, #EF4444);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
}

.nexus-stat-info {
    box-shadow: 0 2px 8px rgba(1, 117, 122, 0.3);
}

.nexus-stat-danger {
    background: linear-gradient(135deg, #DC2626, #EF4444);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.nexus-stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nexus-stat-value {
    font-size: 1.625rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.nexus-stat-label {
    font-size: 0.7rem;
    color: #64748B;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trend indicator */
.nexus-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.nexus-stat-trend-up {
    color: #059669;
}

.nexus-stat-trend-down {
    color: #DC2626;
}

/* ==========================================================
   Badge-Dot Status System (Tabler-inspired)
   ========================================================== */
.nexus-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem 0.2rem 0.5rem;
    border-radius: 100px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.nexus-badge::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nexus-badge-success {
    background: rgba(5, 150, 105, 0.08);
    color: #059669;
}

.nexus-badge-success::before {
    background: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
}

.nexus-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #c27803;
}

.nexus-badge-warning::before {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.nexus-badge-secondary {
    background: rgba(98, 105, 118, 0.1);
    color: #626976;
}

.nexus-badge-secondary::before {
    background: #626976;
    box-shadow: 0 0 0 2px rgba(98, 105, 118, 0.2);
}

.nexus-badge-danger {
    background: rgba(214, 57, 57, 0.1);
    color: #d63939;
}

.nexus-badge-danger::before {
    background: #d63939;
    box-shadow: 0 0 0 2px rgba(214, 57, 57, 0.2);
}

.nexus-badge-info {
    background: rgba(1, 117, 122, 0.08);
    color: #01757A;
}

.nexus-badge-info::before {
    background: #01757A;
    box-shadow: 0 0 0 2px rgba(1, 117, 122, 0.2);
}

/* ==========================================================
   Sticky Table Header
   ========================================================== */
.nexus-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.nexus-table thead th {
    background-color: var(--mud-palette-background, #F8FAFC) !important;
    backdrop-filter: blur(8px);
}

/* ==========================================================
   Micro-Animations & Transitions
   ========================================================== */
.nexus-fade-in {
    animation: nexusFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes nexusFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nexus-slide-up {
    animation: nexusSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes nexusSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered child animations */
.nexus-stagger>*:nth-child(1) {
    animation-delay: 0ms;
}

.nexus-stagger>*:nth-child(2) {
    animation-delay: 50ms;
}

.nexus-stagger>*:nth-child(3) {
    animation-delay: 100ms;
}

.nexus-stagger>*:nth-child(4) {
    animation-delay: 150ms;
}

.nexus-stagger>*:nth-child(5) {
    animation-delay: 200ms;
}

/* Card hover micro-animation */
.card {
    transition: box-shadow var(--nexus-transition), transform var(--nexus-transition) !important;
}

/* Neon Green accent button glow */
.btn-accent,
.nexus-btn-accent {
    background-color: var(--nexus-accent) !important;
    border-color: var(--nexus-accent) !important;
    color: white !important;
    font-weight: 600;
    transition: all var(--nexus-transition);
}

.btn-accent:hover,
.nexus-btn-accent:hover {
    box-shadow: var(--nexus-accent-glow);
    transform: translateY(-1px);
}

/* ==========================================================
   Code Link - Interactive Hover
   ========================================================== */
.code-link {
    cursor: pointer;
    color: var(--nexus-primary);
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: all 0.2s ease;
}

.code-link:hover {
    color: var(--nexus-primary-hover);
    text-decoration: underline !important;
    border-bottom: none !important;
}

/* ==========================================================
   Glassmorphism - Dialogs & Modals
   ========================================================== */
.mud-dialog-container .mud-dialog {
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.mud-dialog .mud-dialog-title {
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    color: var(--midnight-blue) !important;
    letter-spacing: -0.2px;
}

.mud-dialog .mud-dialog-actions {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Custom Modal (NexusEditModal / NexusConfirmModal) */
.modal-content {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

.modal-backdrop.show {
    opacity: 0.4 !important;
    backdrop-filter: blur(4px) !important;
}

/* ==========================================================
   NexusPageHeader - Subtitle
   ========================================================== */
.nexus-page-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary, #626976);
    font-weight: 400;
    margin-top: 0.125rem;
    line-height: 1.4;
}

/* ==========================================================
   Dark Mode: Design System Overrides
   ========================================================== */
.dark-mode .nexus-page-title {
    color: var(--text-heading) !important;
}

.dark-mode .nexus-page-subtitle {
    color: var(--text-secondary) !important;
}

/* Stat cards keep gradient in dark mode (already dark) */
.dark-mode .nexus-stat-card {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 60%, #1c2333 100%);
    border-color: var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dark-mode .nexus-stat-value {
    color: #e6edf3;
}

.dark-mode .nexus-stat-label {
    color: rgba(230, 237, 243, 0.45);
}

.dark-mode .nexus-stat-trend-up {
    color: #3fb950;
}

.dark-mode .nexus-stat-trend-down {
    color: #f85149;
}

.dark-mode .nexus-badge-success {
    background: rgba(47, 179, 68, 0.15);
}

.dark-mode .nexus-badge-warning {
    background: rgba(245, 158, 11, 0.15);
}

.dark-mode .nexus-badge-secondary {
    background: rgba(139, 148, 158, 0.15);
    color: #8b949e;
}

.dark-mode .nexus-badge-secondary::before {
    background: #8b949e;
}

.dark-mode .nexus-badge-danger {
    background: rgba(248, 81, 73, 0.15);
    color: #f85149;
}

.dark-mode .nexus-badge-danger::before {
    background: #f85149;
}

.dark-mode .nexus-badge-info {
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
}

.dark-mode .nexus-badge-info::before {
    background: #58a6ff;
}

.dark-mode .nexus-table thead th {
    background-color: var(--bg-elevated) !important;
}

/* Zebra stripes in dark mode */
.dark-mode .nexus-table tbody tr:nth-child(even) {
    background-color: var(--table-stripe) !important;
}

.dark-mode .nexus-table tbody tr:hover {
    background-color: var(--table-hover) !important;
}

.dark-mode .nexus-page-header-left .breadcrumb a {
    color: #58a6ff;
}

/* Glassmorphism - Dark mode */
.dark-mode .mud-dialog-container .mud-dialog {
    background: rgba(22, 27, 34, 0.92) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .mud-dialog .mud-dialog-title {
    color: var(--text-heading) !important;
}

.dark-mode .modal-content {
    background: rgba(22, 27, 34, 0.95) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Code link - dark mode */
.dark-mode .code-link {
    color: #58a6ff;
}

.dark-mode .code-link:hover {
    color: #79c0ff;
    border-bottom-color: #58a6ff;
}

/* ==========================================================
   World-Class SaaS Sidebar - High-DPI Optimized Typography
   Target: All screens (Standard, Retina, M4 Pro, 4K)
   ========================================================== */

/* ── Base Container ── */
.nexus-sidebar-menu,
.nexus-sidebar-menu * {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ── All NavLinks (Child-level default) ── */
.nexus-sidebar-menu .mud-nav-link {
    padding: 12px 16px !important;
    transition: all 0.2s ease !important;
    position: relative;
    border-left: 3px solid transparent !important;
    color: #4B5563 !important;
    /* Gray 600 */
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

.nexus-sidebar-menu .mud-nav-link-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    margin-left: 16px !important;
    transition: all 0.2s ease !important;
    color: inherit !important;
}

/* -- Icons (Inactive) — tinted with the active module's identity color (--module-accent,
   set by NavMenu.razor) instead of flat gray, so sub-menu icons match the rail -- */
.nexus-sidebar-menu .mud-nav-link-icon-default,
.nexus-sidebar-menu .mud-icon-root {
    color: var(--module-accent, #94A3B8) !important;
    opacity: 0.75;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease !important;
    font-size: 20px !important;
    margin-right: 8px !important;
}

/* -- Hover State (teal brand, duplicate-rule conflict fixed 2026-06-16: this block
   used to ship a "dark sidebar" white-on-white hover that silently won the cascade
   in light mode, making sidebar hover nearly invisible) -- */
.nexus-sidebar-menu .mud-nav-link:hover {
    background-color: rgba(1, 117, 122, 0.07) !important;
    color: #01757A !important;
}

.nexus-sidebar-menu .mud-nav-link:hover .mud-nav-link-icon-default,
.nexus-sidebar-menu .mud-nav-link:hover .mud-icon-root {
    color: #01757A !important;
    opacity: 1 !important;
    transform: translateX(2px);
}

/* ── Active Item (Teal Brand) ── */
.nexus-sidebar-menu .mud-nav-link.active,
.nexus-sidebar-menu .mud-nav-link.active:hover {
    background-color: rgba(1, 117, 122, 0.08) !important;
    border-left-color: #01757A !important;
    color: #01757A !important;
}

.nexus-sidebar-menu .mud-nav-link.active .mud-nav-link-text {
    font-weight: 600 !important;
    color: #01757A !important;
}

.nexus-sidebar-menu .mud-nav-link.active .mud-nav-link-icon-default,
.nexus-sidebar-menu .mud-nav-link.active .mud-icon-root {
    color: #01757A !important;
    opacity: 1 !important;
    filter: none !important;
}

/* ── Parent Group (15px / 600 weight) ── */
.nexus-sidebar-menu .mud-nav-group>.mud-nav-group-button>.mud-nav-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #4B5563 !important;
    /* Gray 600 */
    padding: 12px 16px !important;
}

.nexus-sidebar-menu .mud-nav-group>.mud-nav-group-button>.mud-nav-link>.mud-nav-link-text {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Expanded parent → brighter text */
.nexus-sidebar-menu .mud-nav-group.mud-nav-group-expanded>.mud-nav-group-button>.mud-nav-link {
    color: #1E293B !important;
    /* Dark Slate */
}

/* ── Child Items (14px / 400 weight + deeper indent) ── */
.nexus-sidebar-menu .mud-nav-group .mud-nav-item .mud-nav-link,
.nexus-sidebar-menu .sidebar-group .mud-nav-item .mud-nav-link {
    padding-left: 42px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #64748B !important;
    /* Steel Gray */
}

.nexus-sidebar-menu .mud-nav-group .mud-nav-item .mud-nav-link .mud-nav-link-text,
.nexus-sidebar-menu .sidebar-group .mud-nav-item .mud-nav-link .mud-nav-link-text {
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Active child */
.nexus-sidebar-menu .mud-nav-group .mud-nav-item .mud-nav-link.active,
.nexus-sidebar-menu .sidebar-group .mud-nav-item .mud-nav-link.active {
    color: #01757A !important;
}

.nexus-sidebar-menu .mud-nav-group .mud-nav-item .mud-nav-link.active .mud-nav-link-text,
.nexus-sidebar-menu .sidebar-group .mud-nav-item .mud-nav-link.active .mud-nav-link-text {
    font-weight: 600 !important;
    color: #01757A !important;
}

/* ── Expand / Collapse Arrow ── */
.nexus-sidebar-menu .mud-nav-group-expand-icon {
    transition: all 0.2s ease !important;
    color: #94A3B8 !important;
    /* Muted Steel */
}

.nexus-sidebar-menu .mud-nav-group.mud-nav-group-expanded>.mud-nav-group-button>.mud-nav-link .mud-nav-group-expand-icon {
    color: #01757A !important;
}

/* -- Section Headers — Executive Luxury Standard -- */
.sidebar-section-title {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748B;
    /* Slate-500 — crisp & readable */
    padding: 20px 16px 8px 16px;
    user-select: none;
    margin-top: 0;
    position: relative;
}

/* Thin separator above every sidebar-section-title except the first */
.sidebar-section-title~.sidebar-section-title::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #CBD5E1, transparent);
    opacity: 0.5;
}

.nav-section-header {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748B;
    /* Slate-500 */
    padding: 20px 16px 8px 42px;
    user-select: none;
    position: relative;
    margin-top: 0;
}

/* Thin separator line above each nav-section-header (except first within its parent) */
.nav-section-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 42px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, #E2E8F0, transparent);
    opacity: 0.5;
}

.nav-section-header:first-of-type::before {
    display: none;
}

/* -- Nav Pending Badge -- */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--qcs-error, #DC2626);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* Active state — teal brand */
.nexus-sidebar-menu .mud-nav-link.active {
    background-color: rgba(1, 117, 122, 0.08) !important;
    border-left: 3px solid #01757A !important;
}

/* Dark mode nav badge */
.dark-mode .nav-badge {
    background-color: #f85149;
}

/* ── Responsive: ensure crispness at every DPI ── */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .nexus-sidebar-menu .mud-nav-link-text {
        text-rendering: geometricPrecision !important;
    }
}

/* Sparkline Chart Container */
.nexus-stat-chart-container {
    margin: -0.5rem -1.25rem -1.125rem -1.25rem;
    position: relative;
    z-index: 0;
    opacity: 0.85;
}

.nexus-stat-chart-container .mud-chart-line {
    stroke-width: 3px !important;
    filter: drop-shadow(0 4px 6px rgba(1, 117, 122, 0.3));
}







/* Executive Luxury Dialog Overlays */
.glass-overlay {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-color: rgba(15, 23, 42, 0.4) !important;
}

.executive-dialog {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.executive-dialog .mud-dialog-title {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem !important;
}

.executive-dialog .mud-dialog-content {
    padding: 0 1.5rem 1.5rem 1.5rem !important;
}

.executive-dialog .mud-dialog-actions {
    padding: 0 !important;
}

/* Global Glassmorphism for Dialogs */
.mud-overlay-dialog .mud-overlay-scrim {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-color: rgba(15, 23, 42, 0.4) !important;
}

/* Executive Luxury View Modal */
.nexus-view-modal-header {
    background-color: var(--mud-palette-background, #F8FAFC) !important;
    border-bottom: 1px solid #E2E8F0;
    padding: 16px 24px;
}

.nexus-view-modal-header .mud-typography {
    color: #1E293B !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.nexus-soft-pill-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nexus-soft-pill-success {
    background-color: #DCFCE7;
    color: #166534;
}

.nexus-soft-pill-error {
    background-color: #FEE2E2;
    color: #991B1B;
}

/* ==========================================================
   MudTabs - Executive ERP Tab Styling
   Override MudBlazor default UPPERCASE text-transform
   ========================================================== */
.mud-tabs .mud-tab {
    text-transform: none !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #64748B !important;
    min-width: auto !important;
    padding: 10px 16px !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

.mud-tabs .mud-tab:hover {
    color: #01757A !important;
    background-color: rgba(1, 117, 122, 0.05) !important;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: #01757A !important;
    font-weight: 700 !important;
}

.mud-tabs .mud-tab-slider {
    background-color: #01757A !important;
    height: 2.5px !important;
    border-radius: 2px !important;
}

.mud-tabs .mud-tab .mud-tab-icon-text {
    gap: 6px !important;
}

.mud-tabs .mud-tabs-header {
    border-bottom: 1px solid #E2E8F0 !important;
}

.mud-tabs .mud-tabs-header .mud-tabs-scroll-button {
    color: #94A3B8 !important;
}

/* ==========================================================
   Bootstrap Table Dark Mode Variables (Nexus Fix)
   ========================================================== */
.dark-mode .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mud-palette-text-primary) !important;
    --bs-table-border-color: var(--mud-palette-lines-default) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-striped-color: var(--mud-palette-text-primary) !important;
    --bs-table-active-bg: rgba(255, 255, 255, 0.1);
    --bs-table-active-color: var(--mud-palette-text-primary) !important;
    --bs-table-hover-bg: var(--mud-palette-action-default-hover, rgba(255, 255, 255, 0.075)) !important;
    --bs-table-hover-color: var(--mud-palette-text-primary) !important;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.dark-mode .table> :not(caption)>*>* {
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-bottom-color: var(--bs-table-border-color);
}

.dark-mode .table-hover>tbody>tr:hover>* {
    --bs-table-bg-state: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

/* ==========================================================
   Global Filter Panel — Flexible Widths
   Uses min/max constraints with flex-grow so fields adapt
   to their content while staying within sane bounds.

   MudAutocomplete/MudSelect wrap their sized element (the one
   that receives our Class/Style) inside an extra outer
   `.mud-select` div — and that OUTER div, not the one carrying
   our class, is the actual flex item in the filter toolbar row.
   Without :has(), our max-width/flex constraints land on an
   inner box that has no effect on the outer flex item's size,
   so it grows unconstrained (flex:1 1 auto; max-width:none) and
   leaves a large empty gap after each visually-narrow input.
   MudTextField and MudDatePicker don't have that extra wrapper
   (their sized element IS the flex item), so they size correctly
   without :has().
   ========================================================== */
.filter-input,
.mud-select:has(> .filter-input) {
    min-width: 220px;
    max-width: 300px;
    flex: 1 1 240px;
}

.filter-input-small,
.mud-select:has(> .filter-input-small) {
    min-width: 120px;
    max-width: 150px;
    flex: 0 0 130px;
}

.filter-input-date {
    min-width: 165px;
    max-width: 220px;
    flex: 0 0 155px;
}

/* ==========================================================
   UNIVERSAL DARK MODE FIXES
   Covers: Stat Cards, Data Tables, Modals/Dialogs,
   Input Fields, Tabs, Status Cards, Section Labels,
   Badges, and all hardcoded light-mode colors.
   ========================================================== */

/* --- Stat Cards --- */
.dark-mode .nexus-stat-card {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 60%, #1c2333 100%) !important;
    border-color: #30363d !important;
}

/* --- Card / Card Header / Card Body --- */
.dark-mode .card,
.dark-mode .card-header,
.dark-mode .card-body {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

/* --- Bootstrap buttons left untheme'd by MudBlazor palette --- */
.dark-mode .btn-light {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    color: #F8FAFC !important;
}

.dark-mode .btn-light:hover {
    background-color: #334155 !important;
}

.dark-mode .btn-outline-secondary {
    border-color: #334155 !important;
    color: #94A3B8 !important;
    background-color: transparent !important;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
}

/* --- Data Table --- */
.dark-mode .table thead {
    background-color: #1c2333 !important;
    border-bottom: 2px solid #30363d !important;
}

.dark-mode .table thead th {
    color: #cbd5e1 !important;
    background-color: #1c2333 !important;
}

.dark-mode .table> :not(caption)>*>* {
    background-color: transparent !important;
    border-bottom-color: #21262d !important;
    color: #e6edf3 !important;
}

.dark-mode .table-hover>tbody>tr:hover>* {
    background-color: rgba(56, 189, 248, 0.06) !important;
}

/* --- MudDialog / Modal (AGGRESSIVE — overrides MudBlazor inline styles) --- */
.dark-mode .mud-dialog,
.dark-mode .mud-dialog.mud-paper,
.dark-mode .mud-dialog-container .mud-dialog,
.dark-mode .mud-paper.mud-dialog {
    background: #161b22 !important;
    background-color: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
    color: #e6edf3 !important;
}

.dark-mode .mud-dialog .mud-dialog-title,
.dark-mode .mud-dialog-title {
    color: #f0f6fc !important;
    border-bottom-color: #30363d !important;
    background-color: #161b22 !important;
}

.dark-mode .mud-dialog .mud-dialog-actions,
.dark-mode .mud-dialog-actions {
    background-color: #0d1117 !important;
    border-top: 1px solid #30363d !important;
}

.dark-mode .mud-dialog .mud-dialog-content,
.dark-mode .mud-dialog-content {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

/* MudTabs panels inside dialog */
.dark-mode .mud-tabs-panels,
.dark-mode .mud-tab-panel {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}


/* --- Dialog Header Icon Box (gradient) --- */
.dark-mode .mud-dialog [style*="background: linear-gradient(135deg, #eff6ff"] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #334155 !important;
}

.dark-mode .mud-dialog [style*="color: #2563eb"] {
    color: #58a6ff !important;
}

/* --- Dialog Scroll Area Background --- */
.dark-mode .dialog-scroll-area,
.dark-mode [style*="background-color: #f8fafc"] {
    background-color: #0d1117 !important;
}

/* --- Dialog Title / Subtitle Hardcoded Colors --- */
.dark-mode [style*="color: #0f172a"],
.dark-mode [style*="color: #0F172A"] {
    color: #f0f6fc !important;
}

.dark-mode [style*="color: #64748b"],
.dark-mode [style*="color: #64748B"] {
    color: #8b949e !important;
}

/* --- MudTabs inside Dialogs --- */
.dark-mode .mud-dialog .mud-tabs-header {
    background-color: #161b22 !important;
}

.dark-mode .mud-tabs .mud-tab {
    color: #8b949e !important;
}

.dark-mode .mud-tabs .mud-tab.mud-tab-active {
    color: #58a6ff !important;
}

.dark-mode .mud-tabs .mud-tab-slider {
    background-color: #58a6ff !important;
}

/* --- MudTextField / MudAutocomplete (Outlined) --- */
.dark-mode .mud-input-outlined .mud-input-outlined-border {
    border-color: #30363d !important;
}

.dark-mode .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #484f58 !important;
}

.dark-mode .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #58a6ff !important;
}

.dark-mode .mud-input {
    color: #e6edf3 !important;
}

.dark-mode .mud-input-label {
    color: #8b949e !important;
}

.dark-mode .mud-input-label-inputcontrol {
    color: #8b949e !important;
}

.dark-mode .mud-input-slot {
    color: #e6edf3 !important;
}


/* --- Section Headers (THÔNG TIN CƠ BẢN, etc.) --- */
.dark-mode .text-primary.fw-bold.text-uppercase {
    color: #58a6ff !important;
}

/* --- Status Card (Active/Inactive toggle area) --- */
.dark-mode .rounded-3.border[style*="background-color: #f8fafc"] {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
}

.dark-mode .text-dark {
    color: #e6edf3 !important;
}

.dark-mode .text-muted {
    color: #8b949e !important;
}

.dark-mode .bg-light {
    background-color: #0d1117 !important;
}

/* --- Divider --- */
.dark-mode .mud-divider {
    border-color: #30363d !important;
}

/* --- MudSwitch --- */
.dark-mode .mud-switch .mud-switch-track {
    background-color: #30363d !important;
}

/* --- Layout Containers Dark Mode --- */
.dark-mode .main-wrapper,
.dark-mode .mud-main-content,
.dark-mode .page-body,
.dark-mode .page-wrapper {
    background-color: var(--bg-surface, #0F172A) !important;
}

/* --- Bootstrap bg-white override --- */
.dark-mode .bg-white {
    background-color: transparent !important;
}

/* Specific styling for inputs/selects in dark mode that have bg-white class */
.dark-mode .bg-white.mud-input-control,
.dark-mode .bg-white.mud-input-control .mud-input-outlined,
.dark-mode .bg-white.mud-input-control input,
.dark-mode .bg-white.mud-input-control .mud-select-input {
    background-color: var(--bg-card, #1E293B) !important;
}



/* --- Border color overrides --- */
.dark-mode [style*="border-color: #e2e8f0"],
.dark-mode [style*="border-color: #E2E8F0"] {
    border-color: #30363d !important;
}

.dark-mode [style*="border-color: #F1F5F9"],
.dark-mode [style*="border-color: #f1f5f9"] {
    border-color: #30363d !important;
}

.dark-mode [style*="border-color: #CBD5E1"],
.dark-mode [style*="border-color: #cbd5e1"],
.dark-mode [style*="border-color: #bfdbfe"] {
    border-color: #30363d !important;
}

.dark-mode [style*="border-bottom: 1px solid #e2e8f0"] {
    border-bottom-color: #30363d !important;
}

/* --- MudSelect / MudMenu Popover --- */
.dark-mode .mud-popover {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

.dark-mode .mud-list-item:hover {
    background-color: rgba(56, 189, 248, 0.08) !important;
}

/* --- Modal Content (Bootstrap modal) --- */
.dark-mode .modal-content {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

.dark-mode .modal-header {
    border-bottom-color: #30363d !important;
}

.dark-mode .modal-footer {
    border-top-color: #30363d !important;
}

/* --- Code Link --- */
.dark-mode .code-link {
    color: #58a6ff !important;
}

.dark-mode .code-link:hover {
    color: #79c0ff !important;
}

/* --- MudNumericField / Other inputs --- */
.dark-mode .mud-input-control {
    color: #e6edf3 !important;
}

/* --- Filter bar / Search bg-white --- */
.dark-mode .card-header .mud-input-outlined .mud-input-outlined-border {
    border-color: #30363d !important;
    background-color: transparent !important;
}

/* --- Nexus Soft Badges (Dark) --- */
.dark-mode .nexus-soft-badge-success {
    background: rgba(56, 189, 80, 0.15) !important;
    color: #3fb950 !important;
}

.dark-mode .nexus-soft-badge-warning {
    background: rgba(210, 153, 34, 0.15) !important;
    color: #d29922 !important;
}

.dark-mode .nexus-soft-badge-info {
    background: rgba(88, 166, 255, 0.15) !important;
    color: #58a6ff !important;
}

.dark-mode .nexus-soft-badge-dark {
    background: rgba(139, 148, 158, 0.15) !important;
    color: #8b949e !important;
}

.dark-mode .nexus-soft-badge-danger,
.dark-mode .nexus-soft-badge-error {
    background: rgba(248, 81, 73, 0.15) !important;
    color: #f85149 !important;
}


/* Hide section titles completely or adapt when mini drawer is collapsed */
.mud-drawer--mini .sidebar-section-title {
    padding: 16px 0 8px 0 !important;
}

.mud-drawer--mini .sidebar-section-title::before {
    display: none !important;
}

.mud-drawer--mini .sidebar-section-title .mud-icon-root {
    margin: 0 !important;
}


/* ============================================================
   NEXUSERP — RESPONSIVE LINE-ITEM GRID (Mobile / Tablet)
   Strategy: Table → Stacked Card layout
   Breakpoint: < 1200px (covers phone, portrait tablet)
   Design: SAP Fiori / Odoo Mobile inspired
   ============================================================ */
@media (max-width: 1199.98px) {

    /* ── Remove horizontal scroll — card layout takes over ── */
    .table-responsive:has(.nexus-data-grid) {
        overflow-x: unset !important;
    }

    /* ── Hide thead (labels come from data-label) ── */
    .nexus-data-grid thead {
        display: none !important;
    }

    /* ── tbody / tfoot become block flow ── */
    .nexus-data-grid tbody {
        display: block !important;
    }

    .nexus-data-grid tfoot {
        display: none !important;
    }

    /* ── tfoot "Tổng cộng" row ── */
    .nexus-data-grid tfoot tr {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
        padding: 0.75rem 1rem;
        background: var(--mud-palette-background-grey);
        border: 1px solid var(--grid-border);
        border-radius: 10px;
        margin-bottom: 0.5rem;
    }

    .nexus-data-grid tfoot td {
        display: block !important;
        border: none !important;
        padding: 0.1rem 0 !important;
        width: auto !important;
        font-size: 0.82rem;
    }

    /* ════════════════════════════════════════════════════════
       CARD — each <tr> becomes a rounded card
       ════════════════════════════════════════════════════════ */
    .nexus-data-grid tbody tr {
        display: block !important;
        margin-bottom: 1rem;
        border: 1px solid var(--grid-border);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        background: var(--mud-palette-surface);
        overflow: hidden;
    }

    /* ── Row number — pill header inside card ── */
    .nexus-data-grid tbody tr td[data-label="#"] {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center;
        background: var(--mud-palette-background-grey);
        border-bottom: 1px solid var(--grid-border) !important;
        padding: 0.45rem 0.9rem !important;
        font-size: 0.72rem;
        font-weight: 700;
        color: #01757A;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .nexus-data-grid tbody tr td[data-label="#"]::before {
        content: "STT";
        margin-right: auto;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
        letter-spacing: 0.12em;
    }

    /* ════════════════════════════════════════════════════════
       FIELD ROW — label | value layout via flex
       ════════════════════════════════════════════════════════ */
    .nexus-data-grid tbody tr td:not([data-label="#"]):not(.grid-action-cell) {
        display: flex !important;
        flex-direction: row;
        align-items: flex-start;
        min-height: 46px;
        padding: 0.6rem 0.9rem !important;
        border-bottom: 1px solid var(--grid-border) !important;
        gap: 0.75rem;
    }

    /* ── Left: label from data-label ── */
    .nexus-data-grid tbody tr td:not([data-label="#"]):not(.grid-action-cell)::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-size: 0.77rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        text-align: left;
        word-break: break-word;
        line-height: 1.4;
        padding-top: 6px;
        /* align with input baseline */
    }

    /* ── Right: value / input fills remaining space ── */
    .nexus-data-grid tbody tr td:not([data-label="#"]):not(.grid-action-cell)>*,
    .nexus-data-grid tbody tr td:not([data-label="#"]):not(.grid-action-cell) .mud-input-control,
    .nexus-data-grid tbody tr td:not([data-label="#"]):not(.grid-action-cell) .mud-select,
    .nexus-data-grid tbody tr td:not([data-label="#"]):not(.grid-action-cell) .mud-picker {
        flex: 1 1 0;
        min-width: 0;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Restore normal height for inputs on mobile (undo erp-datagrid 30px) ── */
    .nexus-data-grid tbody tr td .mud-input-control-input-container {
        height: auto !important;
        min-height: 38px !important;
    }

    /* ── Static text cells: right-align the value text ── */
    .nexus-data-grid tbody tr td.text-end:not([data-label="#"]) {
        text-align: right;
    }

    .nexus-data-grid tbody tr td.text-end:not([data-label="#"]):not(.grid-action-cell)::after {
        /* push text right — value sits at end of the flex row */
        margin-left: auto;
    }

    /* Simple text value in a flex td — must right-align */
    .nexus-data-grid tbody tr td.text-end:not([data-label="#"]):not(.grid-action-cell) {
        justify-content: space-between;
    }

    /* ── Wrapper div for complex cells (ItemCode + ItemName) ── */
    .nexus-data-grid .nx-cell-val {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        gap: 2px;
        align-items: flex-start;
    }

    .nexus-data-grid .nx-cell-val>* {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    .nexus-data-grid .nx-cell-val .text-muted.small {
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
        margin-top: 4px;
    }

    /* ── Highlight important money cells ── */
    .nexus-data-grid tbody tr td[data-label].fw-bold {
        font-size: 0.9rem;
        color: var(--mud-palette-success);
    }

    /* ── Last regular field: no border ── */
    .nexus-data-grid tbody tr td:not([data-label="#"]):not(.grid-action-cell):nth-last-child(2) {
        border-bottom: none !important;
    }

    /* ── EMPTY STATE FIX FOR MOBILE ── */
    .nexus-data-grid tbody tr.mud-table-empty-row td {
        display: block !important;
        text-align: center !important;
        padding: 3rem 1rem !important;
    }

    .nexus-data-grid tbody tr.mud-table-empty-row td::before {
        display: none !important;
    }

    /* ════════════════════════════════════════════════════════
       DELETE ACTION CELL — accent red footer in card
       ════════════════════════════════════════════════════════ */
    .nexus-data-grid tbody tr td.grid-action-cell {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        padding: 0.5rem !important;
        background: var(--mud-palette-background-grey);
        border-top: 1px dashed var(--grid-border) !important;
        border-bottom: none !important;
    }

    .nexus-data-grid tbody tr td.grid-action-cell::before {
        display: none !important;
    }

    /* ── Force input right-alignment for numeric fields ── */
    .nexus-data-grid tbody tr td.text-end input,
    .nexus-data-grid tbody tr td .text-end input,
    .nexus-data-grid tbody tr td .mud-input-control.text-end input {
        text-align: right !important;
    }

    /* ── Adjust MudDatePicker ETA right-alignment ── */
    .nexus-data-grid tbody tr td[data-label="ETA"] input {
        text-align: right !important;
    }
}



/* Global highlight for total amount in data grids */
.nexus-data-grid td.fw-bold {
    color: var(--mud-palette-success) !important;
}


/* Fix Breadcrumb Alignment */



/* GLOBAL FIX: Hide text and expand icons when sidebar is mini */
.nexus-sidebar-menu.is-mini .mud-nav-link-text {
    display: none !important;
}

.nexus-sidebar-menu.is-mini .mud-nav-group-expand-icon {
    display: none !important;
}

.nexus-sidebar-menu.is-mini .nav-badge {
    display: none !important;
}

.nexus-sidebar-menu.is-mini .mud-nav-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.nexus-sidebar-menu.is-mini .mud-nav-link-icon-default {
    margin-right: 0 !important;
}

.nexus-sidebar-menu.is-mini .mud-icon-root {
    margin-right: 0 !important;
}

/* Fix missing nx-bg dark mode override for .master-page */
.dark-mode {
    --nx-bg: #0F172A;
    --nx-text: #F8FAFC;

    /* Override MudBlazor CSS variables — all mud-paper, mud-list, mud-input surfaces inherit dark */
    --mud-palette-surface: #161b22;
    --mud-palette-background: #0d1117;
    --mud-palette-background-grey: #161b22;
    --mud-palette-text-primary: rgba(230, 237, 243, 0.87);
    --mud-palette-text-secondary: rgba(139, 148, 158, 0.6);
    --mud-palette-text-disabled: rgba(139, 148, 158, 0.38);
    --mud-palette-divider: #30363d;
    --mud-palette-lines-default: #30363d;
    --mud-palette-lines-inputs: #484f58;
    --mud-palette-action-default: rgba(230, 237, 243, 0.54);
    --mud-palette-action-default-hover: rgba(56, 189, 248, 0.08);
    --mud-palette-action-disabled: rgba(139, 148, 158, 0.38);
    --mud-palette-table-hover: rgba(56, 189, 248, 0.06);
    --mud-palette-table-striped: rgba(56, 189, 248, 0.04);
    --mud-palette-overlay-dark: rgba(0, 0, 0, 0.5);
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.05);
}

/* Fix margins for inputs inside erp-datagrid */
.erp-datagrid tbody tr td .mud-input-control {
    margin: 0 !important;
}

/* ==========================================================
   GLOBAL LAYOUT HARMONIZATION (Odoo-Style Premium Flat UI)
   ========================================================== */

/* Force all container widths to stretch fully like container-fluid */
.container-xl,
.container-lg,
.container-md {
    max-width: 100% !important;
}

/* Unify inner container padding within main-wrapper to prevent double-padding and enforce consistent horizontal margins */
.main-wrapper .container-fluid,
.main-wrapper .container-xl,
.main-wrapper .container-lg,
.main-wrapper .container-md,
.main-wrapper .master-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Shared horizontal inset for MudTabs wrappers inside master-page (replaces ad-hoc mx-3 duplicated per-page) */
.nexus-tab-inset {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}


/* Standardize all cards across the system to strict 4px corners and flat outlines */
.card,
.mud-card {
    border-radius: 4px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    background-color: var(--mud-palette-surface) !important;
    transition: box-shadow var(--nexus-transition), transform var(--nexus-transition) !important;
}

/* Dark Mode support for cards and headers */
.dark-mode .card,
.dark-mode .mud-card {
    border-color: var(--mud-palette-divider, #334155) !important;
    background-color: var(--mud-palette-surface, #1E293B) !important;
}

.dark-mode .card-header {
    border-color: var(--mud-palette-divider, #334155) !important;
    background-color: var(--mud-palette-surface, #1E293B) !important;
}

/* Force all cards in master, transaction, and system pages to align perfectly to the gutter */
.main-wrapper .master-page .card,
.main-wrapper .master-page .mud-card,
.main-wrapper .container-fluid .card,
.main-wrapper .container-fluid .mud-card,
.main-wrapper .container-xl .card,
.main-wrapper .container-xl .mud-card,
.main-wrapper .container-lg .card,
.main-wrapper .container-lg .mud-card,
.main-wrapper .container-md .card,
.main-wrapper .container-md .mud-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================
   Dashboard KPI Grid — Enterprise Flat
   ========================================================== */
.nx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.nx-kpi-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 6px;
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.nx-kpi-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
}

.nx-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #01757A;
    border-radius: 6px 0 0 6px;
}

.nx-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.nx-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #64748B);
}

.nx-kpi-cat-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.nx-kpi-cat-finance {
    background: rgba(1, 117, 122, 0.1);
    color: #01757A;
}

.nx-kpi-cat-inventory {
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
}

.nx-kpi-cat-system {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
}

.nx-kpi-cat-default {
    background: var(--bg-surface-alt, #F1F5F9);
    color: #475569;
}

.nx-kpi-value {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}

.nx-kpi-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nx-kpi-target {
    font-size: 0.7rem;
    color: var(--text-secondary, #94A3B8);
}

.nx-kpi-status-dot {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.nx-kpi-dot-good {
    background: #10B981;
}

.nx-kpi-dot-warning {
    background: #F59E0B;
}

.nx-kpi-dot-critical {
    background: #EF4444;
}

.nx-kpi-dot-normal {
    background: #CBD5E1;
}

/* ==========================================================
   Dashboard Chart Cards
   ========================================================== */
.nx-chart-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 6px;
    overflow: hidden;
}

.nx-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px 0;
    border-bottom: 1px solid var(--border-color, #F1F5F9);
    padding-bottom: 12px;
}

.nx-chart-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-heading, #111827);
    letter-spacing: -0.1px;
}

.nx-chart-sub {
    font-size: 0.72rem;
    color: var(--text-secondary, #94A3B8);
    margin-top: 2px;
}

.nx-chart-body {
    padding: 12px 16px 16px;
}

.nx-empty-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 3rem 0;
    color: var(--text-secondary, #94A3B8);
    font-size: 0.8rem;
}

/* ==========================================================
   Dashboard Notifications
   ========================================================== */
.nx-notif-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 6px;
    overflow: hidden;
}

.nx-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #F1F5F9);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-heading, #334155);
}

.nx-notif-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #EF4444;
    color: #fff;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
}

.nx-notif-read-btn {
    background: none;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: background 0.15s ease;
}

.nx-notif-read-btn:hover {
    background: var(--bg-surface-alt, #F8FAFC);
}

.nx-notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color, #F8FAFC);
    transition: background 0.12s;
}

.nx-notif-row:last-child {
    border-bottom: none;
}

.nx-notif-unread {
    background: var(--bg-surface-alt, #F8FAFC);
}

.nx-notif-priority {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.nx-prio-high {
    background: #FEE2E2;
    color: #B91C1C;
}

.nx-prio-normal {
    background: #DBEAFE;
    color: #1D4ED8;
}

.nx-notif-body {
    flex: 1;
    min-width: 0;
}

.nx-notif-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-heading, #1E293B);
}

.nx-notif-msg {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nx-notif-time {
    font-size: 0.7rem;
    color: var(--text-secondary, #94A3B8);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==========================================================
   Dashboard Quick Links
   ========================================================== */
.nx-quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.nx-ql-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nx-ql-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border-color: var(--border-hover, #CBD5E1);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

.nx-ql-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nx-ql-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-heading, #1E293B);
    line-height: 1.3;
}

.nx-ql-sub {
    font-size: 0.72rem;
    color: var(--text-secondary, #94A3B8);
    margin-top: 1px;
}

/* Fix MudBlazor Outlined Input Legend overlap under Bootstrap/Tabler */
.mud-input-outlined-border legend {
    float: none !important;
    width: auto !important;
    max-width: 0.01px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.75em !important;
    line-height: inherit !important;
    border: none !important;
    display: block !important;
}

/* Open the notch when the input is focused, dirty, or has focus */
.mud-input-focused .mud-input-outlined-border legend,
.mud-input-dirty .mud-input-outlined-border legend,
.mud-input-has-focus .mud-input-outlined-border legend,
.mud-input-control:focus-within .mud-input-outlined-border legend,
.mud-input:focus-within .mud-input-outlined-border legend {
    max-width: 1000px !important;
    padding: 0 6px !important;
}

/* ==========================================================
   UNIFIED MUDBLAZOR OUTLINED INPUT STYLING (Zero Patchiness)
   ========================================================== */
.mud-input-outlined {
    background-color: var(--mud-palette-surface, #FFFFFF) !important;
    border-radius: 4px !important;
}

.mud-input-outlined .mud-input-slot,
.mud-input-outlined input,
.mud-input-outlined .mud-select-input,
.mud-input-outlined .mud-input-adornment,
.mud-input-control-input-container {
    background-color: transparent !important;
}

/* Floating Label background matches surface color seamlessly */
.mud-input-label-outlined,
.mud-input-label-animated,
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined {
    background-color: var(--mud-palette-surface, #FFFFFF) !important;
    padding: 0 4px !important;
    margin-left: -2px !important;
    border-radius: 2px !important;
    z-index: 5 !important;
    max-width: calc(100% - 20px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Disabled & Readonly input consistency */
.mud-input-control .mud-input-root.mud-disabled,
.mud-input.mud-disabled,
.mud-input-outlined.mud-disabled {
    background-color: var(--mud-palette-surface, #FFFFFF) !important;
    color: #334155 !important;
    opacity: 1 !important;
}

.mud-input-control .mud-input-root.mud-disabled .mud-input-slot,
.mud-input-control .mud-input-root.mud-disabled input,
.mud-input-control .mud-input-root.mud-disabled .mud-select-input {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    background-color: transparent !important;
    font-weight: 500;
}

.mud-input-control .mud-input-root.mud-disabled ~ .mud-input-label-outlined,
.mud-input-label-outlined.mud-disabled {
    color: #64748B !important;
}

/* Dark Mode Overrides */
.dark-mode .mud-input-outlined,
.dark-mode .mud-input-label-outlined,
.dark-mode .mud-input-label-animated,
.dark-mode .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined,
.dark-mode .mud-input-control .mud-input-root.mud-disabled,
.dark-mode .mud-input.mud-disabled,
.dark-mode .mud-input-outlined.mud-disabled {
    background-color: var(--mud-palette-surface, #1E293B) !important;
}

.dark-mode .mud-input-control .mud-input-root.mud-disabled .mud-input-slot,
.dark-mode .mud-input-control .mud-input-root.mud-disabled input,
.dark-mode .mud-input-control .mud-input-root.mud-disabled .mud-select-input {
    color: var(--mud-palette-text-primary, #F8FAFC) !important;
    -webkit-text-fill-color: var(--mud-palette-text-primary, #F8FAFC) !important;
}

/* ==========================================================
   Quill Editor Resizing & Scroll Overrides
   ========================================================== */
.ql-container.ql-snow {
    resize: vertical;
    overflow: auto;
    min-height: 250px;
    max-height: 900px;
}

/* Allow vertical resizing for all multi-line inputs (textareas) across the system */
textarea,
textarea.mud-input-slot {
    resize: vertical !important;
}




/* Smart Buttons for Master Data UI */
.smart-button {
    min-width: 80px;
    transition: all 0.2s ease;
}

.smart-button:hover {
    background-color: #e2e8f0 !important;
    transform: translateY(-2px);
}

/* ==========================================================
   Shared ERP Badges & Code Link Styling
   ========================================================== */
.code-link {
    color: #01757A;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    border-bottom: none !important;
}

.code-link:hover {
    text-decoration: underline !important;
    border-bottom: none !important;
}

.rounded-1 {
    border-radius: 4px !important;
}

.nexus-soft-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

.nexus-soft-badge-success {
    background-color: #D1FAE5;
    color: #065F46;
}

.nexus-soft-badge-info {
    background-color: #E0F2FE;
    color: #0369A1;
}

.nexus-soft-badge-warning {
    background-color: #FEF3C7;
    color: #92400E;
}

.nexus-soft-badge-danger {
    background-color: #FEE2E2;
    color: #991B1B;
}

.nexus-soft-badge-dark {
    background-color: #E2E8F0;
    color: #1E293B;
}

.nexus-soft-badge-secondary {
    background-color: #F1F5F9;
    color: #475569;
}

/* Global Master Page Layout & Teal utilities */
/* .master-page's background/layout is already defined near the top of this file using
   the --nx-bg/--nx-text variables (theme-aware); this used to be a second, later rule
   that hardcoded the light-mode values (#F8FAFC/#334155) with the same specificity,
   so it won the cascade and permanently overrode dark mode's background regardless of
   theme. Removed — keep only the variable-based definition. */
.text-teal {
    color: #01757A !important;
}

/* ==========================================================
   Business Partner View Custom Input & Tab Styles (Theme-Aware)
   ========================================================== */
.erp-input .mud-input-outlined-border {
    border-color: #cbd5e1 !important;
    transition: all 0.2s ease;
}

.erp-input .mud-input:focus-within .mud-input-outlined-border {
    border-color: #3b82f6 !important;
    border-width: 2px !important;
}

.erp-input .mud-input-slot {
    color: #334155 !important;
    font-weight: 500;
}

.erp-input .mud-input-root.mud-disabled {
    background-color: #f8fafc !important;
    border-radius: 4px;
    opacity: 0.85;
}

.erp-tab {
    color: #475569 !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    padding: 12px 24px !important;
}

.mud-tabs-tab.mud-tab-active {
    color: #2563eb !important;
    background-color: white !important;
}

/* Dark Mode Overrides for Business Partner View */
.dark-mode .erp-input .mud-input-outlined-border {
    border-color: #30363d !important;
}

.dark-mode .erp-input .mud-input:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}

.dark-mode .erp-input .mud-input-slot {
    color: var(--mud-palette-text-primary) !important;
}

.dark-mode .erp-input .mud-input-root.mud-disabled {
    background-color: var(--mud-palette-surface) !important;
    /* Slate-800 (#1E293B) - matches card bg */
    border-radius: 4px;
    opacity: 0.85;
}

.dark-mode .mud-tabs-tab.mud-tab-active {
    color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-surface) !important;
}

/* ==========================================================
   MudBlazor Global Fix: Xóa underline khỏi Outlined inputs
   MudBlazor render ::before/::after underline trên .mud-input
   cho material-design effect — Outlined variant vẫn có, cần ẩn.
   Áp dụng toàn bộ hệ thống — không cần fix từng màn hình.
   ========================================================== */
.mud-input-outlined::before,
.mud-input-outlined::after {
    border-bottom: none !important;
    content: none !important;
}

/* ==========================================================
   Nexus Expansion Panels (Collapsible Cards / WordPress Style)
   ========================================================== */
.nexus-expansion-panels {
    background: transparent !important;
}

.nexus-expansion-panels .mud-expansion-panel {
    border: 1px solid #E2E8F0 !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 1rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nexus-expansion-panels .mud-expansion-panel::before {
    display: none !important;
    /* Remove MudBlazor's default top separator lines */
}

.nexus-expansion-panels .mud-expansion-panel-header {
    padding: 12px 16px !important;
    min-height: 48px !important;
}

.nexus-expansion-panels .mud-expansion-panel-content {
    padding: 16px 20px 20px 20px !important;
    border-top: 1px solid #F1F5F9 !important;
}

/* ==========================================================
   Nexus Transaction/Master-Detail Table & Input Styling
   Standardizes grid controls, tables, and alignment globally.
   ========================================================== */
.master-page {
    background-color: var(--mud-palette-background-grey);
    color: #334155;
    min-height: 100vh;
    padding-bottom: 2rem;
}




.master-page .table td,
.master-page .table-responsive td {
    padding: 4px 8px !important;
    height: 48px;
    vertical-align: middle !important;
}

.master-page .table th,
.master-page .table-responsive th {
    padding: 8px 8px !important;
    vertical-align: middle !important;
}

.master-page .table input,
.master-page .table-responsive input {
    font-size: 0.9rem !important;
}

.master-page .table td .mud-input-control,
.master-page .table-responsive td .mud-input-control {
    margin-top: 0 !important;
    /* Bỏ khoảng trống chừa label của MudInput để input không trồi lệch dòng */
}

.master-page .table td .mud-input,
.master-page .table-responsive td .mud-input {
    width: 100% !important;
    /* MudInput mặc định co theo nội dung — ép trải hết cột để thẳng hàng với header */
}

.master-page .text-end-input input,
.master-page .table-responsive .text-end-input input {
    text-align: right !important;
    padding-right: 0 !important;
}

.master-page .text-end-input .mud-select-input,
.master-page .table-responsive .text-end-input .mud-select-input {
    text-align: right !important;
    justify-content: flex-end !important;
    flex-grow: 1 !important;
    padding-right: 16px !important;
}

/* ── Float-label mask: white bg behind outlined labels so fieldset border doesn't strike through ── */
.master-page .mud-input-control > .mud-input-control-input-container > .mud-input-label.mud-input-label-outlined.mud-input-label-inputcontrol {
    background-color: var(--mud-palette-surface) !important;
    padding: 0 4px !important;
    border-radius: 2px !important;
    max-width: calc(100% - 10px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    z-index: 3 !important;
}

/* ══════════════════════════════════════════════════════════════
   User Guide Page
   ══════════════════════════════════════════════════════════════ */
/* Overrides the global `.master-page .card-body { flex-direction: column !important }`
   so the TOC sidebar sits BESIDE the content instead of stacked above it.
   !important is required here specifically because that global rule uses it —
   higher specificity alone does not win against an !important declaration. */
.master-page .card-body.guide-split {
    display: flex !important;
    flex-direction: row !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.guide-toc {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.18s ease;
}

.guide-toc.collapsed {
    width: 52px;
}

.guide-toc-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    gap: 4px;
}

.guide-toc.collapsed .guide-toc-header {
    padding: 0.75rem 0.5rem;
    justify-content: center;
}

.guide-toc-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guide-toc.collapsed .guide-toc-title {
    display: none;
}

.guide-toc-toggle {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.guide-toc-toggle:hover {
    background: var(--mud-palette-background-grey);
    color: var(--nx-primary, #01757A);
    border-color: var(--nx-primary, #01757A);
}

.guide-toc.collapsed .guide-toc-toggle {
    margin-left: 0;
}

.guide-toc-body {
    padding: 0.5rem 0;
    flex: 1;
    overflow-y: auto;
}

.guide-toc-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.guide-toc-item:hover {
    background: var(--mud-palette-background-grey);
    color: var(--nx-primary, #01757A);
    border-left-color: var(--nx-primary, #01757A);
}

.guide-toc-item.active {
    background: var(--mud-palette-background-grey);
    color: var(--nx-primary, #01757A);
    border-left-color: var(--nx-primary, #01757A);
    font-weight: 600;
}

.guide-toc.collapsed .guide-toc-item {
    justify-content: center;
    padding: 0.65rem 0;
}

.guide-toc-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.guide-toc.collapsed .guide-toc-label {
    display: none;
}

.guide-toc.collapsed .guide-toc-item .mud-icon-root {
    margin-right: 0 !important;
}

.guide-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.75rem 2.5rem 3rem;
}

.guide-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 0.85rem;
    align-items: start;
}

.guide-steps-grid .guide-step {
    margin-bottom: 0;
    height: 100%;
}

/* ── PDF export ──
   "Xuất PDF" calls window.print(). Browsers rasterize nothing here — @page + @media print
   drive real, native A4 pagination, which is far more reliable than a DOM-to-canvas
   library (html2canvas) trying to rasterize a long, complex page: no risk of the tab
   freezing on a huge canvas, crisp vector text instead of a blurry bitmap, and correct
   page geometry because the browser's own print engine computes it, not JS math. */
.guide-pdf-index {
    display: none;
}

.guide-pdf-cover {
    text-align: center;
    padding: 3rem 1rem 2.5rem;
}

.guide-pdf-cover-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--nx-primary, #01757A);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-pdf-cover h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
    color: var(--mud-palette-text-primary);
}

.guide-pdf-cover-sub {
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.guide-pdf-cover-date {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin: 0.35rem 0 0;
}

.guide-pdf-index-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 2px solid var(--nx-primary, #01757A);
    padding-bottom: 0.5rem;
    margin: 0 0 1rem;
}

.guide-pdf-index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: guide-pdf-index;
}

.guide-pdf-index-list li {
    counter-increment: guide-pdf-index;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.65rem 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.guide-pdf-index-list li::before {
    content: counter(guide-pdf-index, decimal-leading-zero);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    width: 22px;
    flex-shrink: 0;
}

.guide-pdf-index-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

@media print {
    @page {
        size: A4;
        margin: 15mm 12mm;
    }

    /* Print only #guideContent — hide the rest of the SPA shell (top nav, sidebar,
       breadcrumb, action bar) without needing to physically move any DOM nodes. */
    body * {
        visibility: hidden;
    }

    #guideContent,
    #guideContent * {
        visibility: visible;
    }

    #guideContent {
        position: absolute;
        inset: 0;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        color: #1a1a1a !important;
    }

    .guide-pdf-index {
        display: block !important;
        page-break-after: always;
        break-after: page;
    }

    .guide-pdf-cover h1,
    .guide-pdf-index-list li {
        color: #1a1a1a !important;
    }

    .guide-steps-grid {
        grid-template-columns: 1fr !important;
    }

    .guide-section {
        page-break-before: always;
        break-before: page;
    }

    .guide-section:first-of-type {
        page-break-before: avoid;
        break-before: avoid;
    }

    .guide-step {
        page-break-inside: avoid;
        break-inside: avoid;
        background: #ffffff !important;
        border-color: #d0d5dd !important;
    }

    .guide-step-content h3,
    .guide-step-content p,
    .guide-step-content li,
    .guide-section-title,
    .guide-section-desc {
        color: #1a1a1a !important;
    }

    .guide-open-btn {
        display: none;
    }

    .guide-flow-diagram pre.mermaid,
    .guide-callout {
        background: #ffffff !important;
        border-color: #d0d5dd !important;
    }
}

.guide-section {
    margin-bottom: 2.5rem;
    scroll-margin-top: 1rem;
}

.guide-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--nx-primary, #01757A);
}

.guide-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guide-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.guide-section-desc {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin: 2px 0 0;
}

.guide-flow-diagram {
    margin: 1rem 0 1.25rem;
    max-width: 900px;
}

.guide-flow-diagram pre.mermaid {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

.guide-step {
    display: flex;
    gap: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--nx-primary, #01757A);
    border-radius: 8px;
}

.guide-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nx-primary, #01757A);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.guide-step-content {
    flex: 1;
    min-width: 0;
}

.guide-step-content h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0 0 0.4rem;
}

.guide-step-content p {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.4rem;
}

.guide-step-content ul {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.guide-step-content li {
    margin-bottom: 0.2rem;
    color: var(--mud-palette-text-secondary);
}

/* Real-screenshot preview: shown before the "Mở trang" button so the reader can see
   the actual screen (with the relevant control highlighted) before clicking through.
   Framed like a card — padding + tinted background + its own shadow on the image —
   rather than a raw screenshot glued flush to the edges. */
.guide-screenshot-wrap {
    margin: 0.75rem 0;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
}

.guide-screenshot-wrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    cursor: zoom-in;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.guide-screenshot-wrap img:hover {
    box-shadow: 0 4px 14px rgba(1, 117, 122, 0.25), 0 1px 4px rgba(15, 23, 42, 0.08);
    transform: scale(1.005);
}

.dark-mode .guide-screenshot-wrap {
    background: linear-gradient(180deg, #1E293B 0%, #17212F 100%);
    border-color: var(--mud-palette-lines-default);
}

.dark-mode .guide-screenshot-wrap img {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Screenshot lightbox — click any guide screenshot to view it full-size.
   Toggled by JS (initGuideLightbox in index.html) adding/removing .visible;
   kept out of @media print so it never shows up in the exported PDF. */
.guide-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: rgba(15, 23, 42, 0.86);
    cursor: zoom-out;
}

.guide-lightbox-overlay.visible {
    display: flex;
}

.guide-lightbox-overlay img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.guide-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.guide-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

@media print {
    .guide-lightbox-overlay {
        display: none !important;
    }
}

.guide-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--nx-primary, #01757A);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 0.4rem;
    margin-right: 0.5rem;
}

.guide-open-btn:hover {
    background: #015A5E;
}

.guide-callout {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    margin: 0.75rem 0;
}

.guide-callout-info {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.guide-callout-warn {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.guide-callout-tip {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

@media (max-width: 768px) {
    .guide-toc {
        display: none;
    }

    .guide-content {
        padding: 1rem;
    }
}