/* ==========================================================================
   MBD ERP SCALABLE DESIGN SYSTEM TOKENS & BASE STYLES
   Production-ready, Accessible (WCAG 2.1 AA), Responsive, Maintainable
   ========================================================================== */

:root {
    /* Tabler Core Sync Tokens */
    --tblr-primary: #d97706;
    --tblr-primary-rgb: 217, 119, 6;
    --tblr-primary-fg: #ffffff;
    --tblr-link-color: #b45309;
    --tblr-link-hover-color: #92400e;

    /* Base Backgrounds & Surfaces (Abu-abu / Neutral Gray) */
    --mbd-color-bg: #f8fafc;
    --mbd-color-surface: #ffffff;
    --mbd-color-surface-elevated: #ffffff;
    --mbd-color-surface-secondary: #f1f5f9;
    --mbd-color-border: #e2e8f0;
    --mbd-color-border-hover: #cbd5e1;
    --mbd-color-border-strong: #94a3b8;

    /* Typography Contrast Tokens (Hitam / Deep Charcoal & Slate) */
    --mbd-color-text-primary: #09090b;
    --mbd-color-text-secondary: #475569;
    --mbd-color-text-muted: #64748b;
    --mbd-color-text-disabled: #94a3b8;
    --mbd-color-text-inverse: #ffffff;

    /* Brand & Intent Tokens (Gold / Emas) */
    --mbd-color-primary: #d97706;
    --mbd-color-primary-hover: #b45309;
    --mbd-color-primary-subtle: #fefce8;
    --mbd-color-primary-border: #fde047;

    --mbd-color-gold: #d97706;
    --mbd-color-gold-hover: #b45309;
    --mbd-color-gold-subtle: #fefce8;
    --mbd-color-gold-border: #fde047;

    --mbd-color-secondary: #475569;
    --mbd-color-secondary-hover: #334155;
    --mbd-color-secondary-subtle: #f1f5f9;

    --mbd-color-success: #059669;
    --mbd-color-success-hover: #047857;
    --mbd-color-success-subtle: #ecfdf5;
    --mbd-color-success-border: #6ee7b7;

    --mbd-color-warning: #d97706;
    --mbd-color-warning-hover: #b45309;
    --mbd-color-warning-subtle: #fffbeb;
    --mbd-color-warning-border: #fcd34d;

    --mbd-color-danger: #dc2626;
    --mbd-color-danger-hover: #b91c1c;
    --mbd-color-danger-subtle: #fef2f2;
    --mbd-color-danger-border: #fca5a5;

    --mbd-color-info: #0891b2;
    --mbd-color-info-hover: #90870e;
    --mbd-color-info-subtle: #ecfeff;
    --mbd-color-info-border: #f9ae67;

    /* Focus Ring Token (Gold Glow) */
    --mbd-color-focus-ring: rgba(217, 119, 6, 0.35);

    /* Typography Scale */
    --mbd-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mbd-font-size-display: 1.50rem;
    --mbd-font-size-h1: 1.35rem;
    --mbd-font-size-h2: 1.125rem;
    --mbd-font-size-h3: 1.00rem;
    --mbd-font-size-body: 0.875rem;
    --mbd-font-size-label: 0.8125rem;
    --mbd-font-size-caption: 0.75rem;
    --mbd-font-size-meta: 0.725rem;

    /* Spacing Scale (4px Base Grid) */
    --mbd-space-1: 0.25rem;
    --mbd-space-2: 0.50rem;
    --mbd-space-3: 0.75rem;
    --mbd-space-4: 1.00rem;
    --mbd-space-5: 1.25rem;
    --mbd-space-6: 1.50rem;
    --mbd-space-8: 2.00rem;
    --mbd-space-10: 2.50rem;

    /* Border Radius Tokens */
    --mbd-radius-sm: 0.375rem;
    --mbd-radius-md: 0.50rem;
    --mbd-radius-lg: 0.75rem;
    --mbd-radius-xl: 1.00rem;
    --mbd-radius-pill: 9999px;

    /* Elevation Tokens */
    --mbd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --mbd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --mbd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --mbd-shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   MBD CUSTOM SPACING & SHADOW UTILITIES
   Maps non-standard fractional Bootstrap classes to the nearest 4px grid value.
   These are defined as official MBD design tokens to maintain backward compatibility
   across 40+ Blade templates while adhering to AGENTS.md Rule 3 (4px Base Grid).
   ========================================================================== */

/* Padding All-sides: 1.5, 2.5, 3.5 → nearest 4px grid value */
.p-1\.5 { padding: 0.5rem !important; }
.p-2\.5 { padding: 0.75rem !important; }
.p-3\.5 { padding: 1rem !important; }

/* Padding Y-axis: 1.5, 2.5 → nearest 4px grid value */
.py-1\.5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2\.5 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.pt-1\.5 { padding-top: 0.5rem !important; }
.pb-1\.5 { padding-bottom: 0.5rem !important; }

/* Padding X-axis: 2.5 → 0.625rem (10px, nearest to 4px grid: 12px) */
.px-2\.5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* Padding X-axis: 3.5 → 0.875rem (14px, nearest to 4px grid: 16px) */
.px-3\.5 { padding-left: 1rem !important; padding-right: 1rem !important; }

/* Margin Y-axis: 2.5 → 0.625rem (10px, nearest to 4px grid: 12px) */
.my-2\.5 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }

/* Shadow XS: Lightest elevation, subtler than shadow-sm */
.shadow-xs { box-shadow: var(--mbd-shadow-xs) !important; }

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --tblr-primary: #f59e0b;
    --tblr-primary-rgb: 245, 158, 11;
    --tblr-primary-fg: #09090b;
    --tblr-link-color: #fbbf24;
    --tblr-link-hover-color: #fde047;

    /* Hitam / Deep Obsidian & Charcoal surfaces */
    --mbd-color-bg: #09090b;
    --mbd-color-surface: #141416;
    --mbd-color-surface-elevated: #1c1c1f;
    --mbd-color-surface-secondary: #1c1c1f;
    --mbd-color-border: #27272a;
    --mbd-color-border-hover: #3f3f46;
    --mbd-color-border-strong: #52525b;

    --mbd-color-text-primary: #f4f4f5;
    --mbd-color-text-secondary: #a1a1aa;
    --mbd-color-text-muted: #71717a;
    --mbd-color-text-disabled: #52525b;

    --mbd-color-primary-subtle: rgba(217, 119, 6, 0.2);
    --mbd-color-success-subtle: rgba(6, 78, 59, 0.45);
    --mbd-color-warning-subtle: rgba(120, 53, 15, 0.45);
    --mbd-color-danger-subtle: rgba(127, 29, 29, 0.45);
    --mbd-color-info-subtle: rgba(22, 78, 99, 0.45);
    --mbd-color-focus-ring: rgba(245, 158, 11, 0.35);
}

/* Force dark mode high-contrast text readability (WCAG AA) */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page,
[data-bs-theme="dark"] .page-wrapper {
    background-color: var(--mbd-color-bg) !important;
    color: var(--mbd-color-text-primary) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-reset,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5,
[data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] .page-title,
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .modal-title,
[data-bs-theme="dark"] .stat-card-value,
[data-bs-theme="dark"] strong,
[data-bs-theme="dark"] b,
[data-bs-theme="dark"] th,
[data-bs-theme="dark"] .fw-bold.text-dark {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .page-pretitle,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .small,
[data-bs-theme="dark"] .text-muted-dark {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .text-white-50 {
    color: rgba(248, 250, 252, 0.7) !important;
}

[data-bs-theme="dark"] .card {
    background-color: var(--mbd-color-surface) !important;
    border-color: var(--mbd-color-border) !important;
    color: var(--mbd-color-text-primary) !important;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    border-color: var(--mbd-color-border) !important;
    background-color: var(--mbd-color-surface) !important;
}

[data-bs-theme="dark"] .table {
    --tblr-table-bg: var(--mbd-color-surface);
    --tblr-table-color: var(--mbd-color-text-primary);
    color: #f8fafc !important;
    border-color: var(--mbd-color-border) !important;
}

[data-bs-theme="dark"] .table thead th {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: var(--mbd-color-border) !important;
}

[data-bs-theme="dark"] .table tbody td {
    color: #e2e8f0 !important;
    border-color: var(--mbd-color-border) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover td {
    background-color: rgba(217, 119, 6, 0.08) !important;
}

[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #1e293b !important;
    border-color: var(--mbd-color-border) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #1e293b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder {
    color: #64748b !important;
}

[data-bs-theme="dark"] .form-label {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .form-check-label {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .form-check-input {
    background-color: #1e293b;
    border-color: #475569;
}

[data-bs-theme="dark"] .bg-body-tertiary,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-surface,
[data-bs-theme="dark"] .bg-body {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .bg-body-secondary {
    background-color: #0d1117 !important;
    color: #cbd5e1 !important;
}

/* Subtle Badges in Dark Mode */
[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .badge-primary-subtle {
    background-color: rgba(217, 119, 6, 0.2) !important;
    color: #fde047 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-success-subtle,
[data-bs-theme="dark"] .badge-success-subtle {
    background-color: rgba(5, 150, 105, 0.25) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-warning-subtle,
[data-bs-theme="dark"] .badge-warning-subtle {
    background-color: rgba(217, 119, 6, 0.25) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-danger-subtle,
[data-bs-theme="dark"] .badge-danger-subtle {
    background-color: rgba(220, 38, 38, 0.25) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-info-subtle,
[data-bs-theme="dark"] .badge-info-subtle {
    background-color: rgba(8, 145, 178, 0.25) !important;
    color: #67e8f9 !important;
    border-color: rgba(6, 182, 212, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-secondary-subtle,
[data-bs-theme="dark"] .badge-secondary-subtle {
    background-color: rgba(148, 163, 184, 0.2) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

[data-bs-theme="dark"] .badge.bg-purple-subtle,
[data-bs-theme="dark"] .badge-purple-subtle {
    background-color: rgba(147, 51, 234, 0.25) !important;
    color: #d8b4fe !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-indigo-subtle {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #a5b4fc !important;
    border-color: rgba(129, 140, 248, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-teal-subtle {
    background-color: rgba(13, 148, 136, 0.25) !important;
    color: #5eead4 !important;
    border-color: rgba(20, 184, 166, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-pink-subtle {
    background-color: rgba(219, 39, 119, 0.25) !important;
    color: #f472b6 !important;
    border-color: rgba(236, 72, 153, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-white {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #30363d !important;
}

[data-bs-theme="dark"] .badge.bg-body-tertiary,
[data-bs-theme="dark"] .badge.bg-light {
    background-color: #21262d !important;
    color: #e2e8f0 !important;
    border-color: #30363d !important;
}

/* Alerts in Dark Mode */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(8, 145, 178, 0.18) !important;
    color: #a5f3fc !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(217, 119, 6, 0.18) !important;
    color: #fde68a !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(5, 150, 105, 0.18) !important;
    color: #a7f3d0 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 38, 38, 0.18) !important;
    color: #fecaca !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-bs-theme="dark"] .alert-secondary {
    background-color: rgba(71, 85, 105, 0.25) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Dropdowns & Modals */
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas {
    background-color: #161b22 !important;
    border-color: var(--mbd-color-border) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #21262d !important;
    color: #ffffff !important;
}

/* Accordions */
[data-bs-theme="dark"] .accordion-item {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

[data-bs-theme="dark"] .accordion-button {
    background-color: #161b22 !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #21262d !important;
    color: #fde047 !important;
}

[data-bs-theme="dark"] .accordion-body {
    background-color: #161b22 !important;
    color: #e2e8f0 !important;
}

/* List Groups */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--mbd-color-surface) !important;
    color: #e2e8f0 !important;
    border-color: var(--mbd-color-border) !important;
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: #21262d !important;
}

[data-bs-theme="dark"] .list-group-item.active {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

/* Buttons, Code, Breadcrumbs */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-white {
    background-color: #21262d !important;
    color: #f8fafc !important;
    border-color: #30363d !important;
}

[data-bs-theme="dark"] code,
[data-bs-theme="dark"] kbd,
[data-bs-theme="dark"] pre {
    background-color: #0d1117 !important;
    color: #fde047 !important;
    border-color: #30363d !important;
}

[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item a {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .module-context-nav,
[data-bs-theme="dark"] .nav-tabs-wrapper {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link.bg-body-tertiary {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}

/* ==========================================================================
   GLOBAL ACCESSIBILITY & FOCUS STYLES
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--mbd-color-focus-ring) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Accessibility Skip-to-Content Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--mbd-color-primary);
    color: #ffffff !important;
    padding: 0.5rem 1rem;
    z-index: 9999;
    border-radius: var(--mbd-radius-md);
    font-weight: 700;
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus {
    top: 1rem;
    outline: 3px solid #ffffff !important;
}


/* ==========================================================================
   HEADING-TO-DESCRIPTION RHYTHM
   Tabler's .card-header is `display:flex; align-items:center` with the
   default row direction — so a heading + description paragraph inside it
   are laid out SIDE BY SIDE, vertically centered, not stacked. No amount of
   margin-top fixes that: they aren't stacked in the box model at all. The
   real fix is to stack them: force column direction whenever a card-header
   contains a heading immediately followed by a <p> (the "title + subtitle"
   pattern used throughout this app), then give the paragraph a top gap
   since column-direction flex items don't collapse margins either.
   ========================================================================== */
.card-header:has(> h1 + p),
.card-header:has(> h2 + p),
.card-header:has(> h3 + p),
.card-header:has(> h4 + p),
.card-header:has(> h5 + p),
.card-header:has(> h6 + p) {
    flex-direction: column;
    align-items: stretch;
}

h1+p,
h2+p,
h3+p,
h4+p,
h5+p,
h6+p,
.h1+p,
.h2+p,
.h3+p,
.h4+p,
.h5+p,
.h6+p {
    margin-top: var(--mbd-space-3) !important;
}

/* ==========================================================================
   FORM CONTAINER & COMPACT LAYOUT MECHANISM
   Prevents standalone form pages from stretching awkwardly across ultrawide monitors.
   Centers and cleanly constrains forms with maximum readable proportions.
   ========================================================================== */
.form-container-compact,
.form-container-narrow {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.form-container-medium,
.form-container-constrained,
.page-form-container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.form-container-wide {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.form-section-card {
    border-radius: var(--mbd-radius-xl, 1rem);
    border: 1px solid var(--mbd-color-border, #e2e8f0);
    background: var(--mbd-color-surface, #ffffff);
    box-shadow: var(--mbd-shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.form-section-card .card-header {
    background: var(--mbd-color-surface-secondary, #f8fafc);
    border-bottom: 1px solid var(--mbd-color-border, #e2e8f0);
    padding: 1rem 1.5rem;
}

.form-section-card .card-body {
    padding: 1.5rem;
}

.form-section-card .card-footer {
    background: var(--mbd-color-surface-secondary, #f8fafc);
    border-top: 1px solid var(--mbd-color-border, #e2e8f0);
    padding: 1rem 1.5rem;
}

/* ==========================================================================
   COMPONENT STYLES & OVERRIDES
   ========================================================================== */

/* Buttons */
.btn {
    border-radius: var(--mbd-radius-md);
    font-size: var(--mbd-font-size-label);
    font-weight: 600;
    padding: var(--mbd-space-2) var(--mbd-space-4);
    transition: all 0.15s ease-in-out;
}

.btn-primary {
    background-color: var(--mbd-color-primary);
    border-color: var(--mbd-color-primary);
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: var(--mbd-shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--mbd-color-primary-hover);
    border-color: var(--mbd-color-primary-hover);
    color: #ffffff !important;
}

.btn-outline-primary {
    border-color: var(--mbd-color-primary, #d97706);
    color: var(--mbd-color-primary, #d97706);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--mbd-color-primary, #d97706);
    border-color: var(--mbd-color-primary, #d97706);
    color: #ffffff !important;
}

.btn-info {
    background-color: var(--mbd-color-info, #0891b2);
    border-color: var(--mbd-color-info, #0891b2);
    color: #ffffff !important;
    font-weight: 600;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    background-color: var(--mbd-color-info-hover, #0e7490);
    border-color: var(--mbd-color-info-hover, #0e7490);
    color: #ffffff !important;
}

.btn-outline-info {
    border-color: var(--mbd-color-info, #0891b2);
    color: var(--mbd-color-info, #0891b2);
    background-color: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    background-color: var(--mbd-color-info, #0891b2);
    border-color: var(--mbd-color-info, #0891b2);
    color: #ffffff !important;
}

/* Fallback Protection for Legacy Azure / Blue Utility Classes */
.btn-azure,
.btn-blue {
    background-color: var(--mbd-color-primary, #d97706) !important;
    border-color: var(--mbd-color-primary, #d97706) !important;
    color: #ffffff !important;
}

.btn-outline-azure,
.btn-outline-blue {
    border-color: var(--mbd-color-primary, #d97706) !important;
    color: var(--mbd-color-primary, #d97706) !important;
    background-color: transparent !important;
}

.btn-outline-azure:hover,
.btn-outline-blue:hover {
    background-color: var(--mbd-color-primary, #d97706) !important;
    color: #ffffff !important;
}

.bg-azure,
.bg-blue {
    background-color: var(--mbd-color-primary, #d97706) !important;
    color: #ffffff !important;
}

/* Global MBD Signature Hero Banner Theme (Deep Obsidian & Industrial Gold) */
.mbd-hero-banner,
.work-hero,
.plan-hero,
.pipeline-hero,
.fee-form-hero,
.discovery-form-hero,
.disc-hero,
.help-hero,
.project-form-hero {
    background: linear-gradient(135deg, #09090b 0%, #18181b 50%, #27272a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 2px solid #d97706 !important;
    border-radius: var(--mbd-radius-xl, 1rem) !important;
    color: #ffffff !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35) !important;
}

.mbd-hero-banner::after,
.work-hero::after,
.plan-hero::after,
.pipeline-hero::after,
.fee-form-hero::after,
.discovery-form-hero::after,
.disc-hero::after,
.project-form-hero::after {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.22) 0%, transparent 70%) !important;
    content: '';
    position: absolute;
    top: -6rem;
    right: -6rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    pointer-events: none;
}

/* Primary Utility Classes & High-Contrast Tokens */
.text-primary,
a.text-primary {
    color: var(--tblr-link-color, #b45309) !important;
}

[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] a.text-primary {
    color: #fbbf24 !important;
}

.bg-primary {
    background-color: var(--mbd-color-primary, #d97706) !important;
    color: #ffffff !important;
}

.border-primary {
    border-color: var(--mbd-color-primary, #d97706) !important;
}

.bg-primary-subtle {
    background-color: var(--mbd-color-primary-subtle, #fefce8) !important;
}

.text-primary-subtle {
    color: var(--mbd-color-primary-hover, #b45309) !important;
}

.border-primary-subtle {
    border-color: var(--mbd-color-primary-border, #fde047) !important;
}

.badge.bg-primary,
.badge-primary {
    background-color: var(--mbd-color-primary, #d97706) !important;
    color: #ffffff !important;
}

.badge.bg-primary-subtle {
    background-color: var(--mbd-color-primary-subtle, #fefce8) !important;
    color: #b45309 !important;
    border: 1px solid var(--mbd-color-primary-border, #fde047) !important;
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background-color: var(--mbd-color-primary, #d97706) !important;
    color: #ffffff !important;
}

.btn-outline-secondary {
    border-color: var(--mbd-color-border-strong);
    color: var(--mbd-color-text-secondary);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--mbd-color-surface-secondary);
    color: var(--mbd-color-text-primary);
}

.btn-outline-danger {
    border-color: var(--mbd-color-danger-border);
    color: var(--mbd-color-danger);
    background-color: transparent;
}

.btn-outline-danger:hover {
    background-color: var(--mbd-color-danger-subtle);
    color: var(--mbd-color-danger-hover);
}

/* Cards */
.card {
    border-radius: var(--mbd-radius-xl);
    border: 1px solid var(--mbd-color-border);
    background-color: var(--mbd-color-surface);
    box-shadow: var(--mbd-shadow-sm);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--mbd-color-border);
    padding: var(--mbd-space-4) var(--mbd-space-5);
}

.card-body {
    padding: var(--mbd-space-5);
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--mbd-color-border);
    padding: var(--mbd-space-3) var(--mbd-space-5);
}

/* Tables */
.table {
    margin-bottom: 0;
}

.table thead th {
    background-color: var(--mbd-color-surface-secondary);
    border-bottom: 1px solid var(--mbd-color-border);
    color: var(--mbd-color-text-secondary);
    font-size: var(--mbd-font-size-meta);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: var(--mbd-space-3) var(--mbd-space-4);
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody td {
    border-bottom: 1px solid var(--mbd-color-border);
    font-size: var(--mbd-font-size-body);
    padding: var(--mbd-space-3) var(--mbd-space-4);
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: var(--mbd-color-primary-subtle) !important;
}

/* ==========================================================================
   STRICT MONETARY & CURRENCY ANTI-WRAP RULE (RP 1-LINE STRICT MANDATE)
   Guarantees that ALL Rupiah (Rp) currency amounts, financial numbers,
   stat card figures, table numeric cells, and kanban prices stay strictly on 1 line.
   ========================================================================== */
.font-monospace,
.card-amount-text,
.lane-weighted-amount,
.currency-value,
.font-monospace,
.stat-card .h2,
.stat-card [class*="h2"],
.stat-card-value,
.table td.text-end,
.table th.text-end,
.table tfoot td,
.table tfoot th,
.card-table td.text-end,
.card-table th.text-end,
[data-currency],
[data-amount],
.amount-text,
.rupiah-nowrap,
.text-nowrap-currency,
.price-value,
.cost-value,
.budget-value,
.badge-currency,
.money {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* Form Controls */
.form-label {
    color: var(--mbd-color-text-primary);
    font-size: var(--mbd-font-size-label);
    font-weight: 600;
    margin-bottom: var(--mbd-space-1);
}

.form-control,
.form-select {
    border-color: var(--mbd-color-border);
    border-radius: var(--mbd-radius-md);
    font-size: var(--mbd-font-size-body);
    padding: var(--mbd-space-2) var(--mbd-space-3);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mbd-color-primary);
    box-shadow: 0 0 0 0.2rem var(--mbd-color-focus-ring);
}

/* ==========================================================================
   TABLE PAGINATION DESIGN SYSTEM STYLES
   ========================================================================== */
.pagination {
    margin-bottom: 0;
    gap: 0.25rem;
    align-items: center;
}

.pagination .page-item .page-link {
    border-radius: var(--mbd-radius-md);
    border: 1px solid var(--mbd-color-border);
    color: var(--mbd-color-text-secondary);
    background-color: var(--mbd-color-surface);
    font-size: var(--mbd-font-size-label);
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    min-width: 2.1rem;
    text-align: center;
    transition: all 0.15s ease-in-out;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-item .page-link:hover {
    background-color: var(--mbd-color-surface-secondary);
    color: var(--mbd-color-primary);
    border-color: var(--mbd-color-border-hover);
}

.pagination .page-item.active .page-link {
    background-color: var(--mbd-color-primary);
    border-color: var(--mbd-color-primary);
    color: var(--mbd-color-text-inverse);
    font-weight: 700;
    box-shadow: var(--mbd-shadow-sm);
}

.pagination .page-item.disabled .page-link {
    background-color: var(--mbd-color-surface-secondary);
    color: var(--mbd-color-text-disabled);
    border-color: var(--mbd-color-border);
    opacity: 0.65;
    cursor: not-allowed;
}

.table-pagination-wrapper {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   RESPONSIVE UX & TOUCH TARGET ENHANCEMENT ENGINE
   ========================================================================== */

/* 1. Touch Target Rule (WCAG 2.1 AA - Minimum 38px height) */
.btn,
.form-control,
.form-select,
.input-group-text,
.pagination .page-link {
    min-height: 2.375rem;
    /* 38px */
}

/* 2. Mobile Modal Viewport Containment (< 576px) */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem auto !important;
        max-width: 95% !important;
    }

    .modal-content {
        max-height: calc(100vh - 1rem) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-body {
        max-height: calc(100vh - 10rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        flex-wrap: wrap !important;
        gap: var(--mbd-space-2);
    }

    .modal-footer>* {
        flex: 1 1 9rem;
    }
}

/* 3. Smooth Mobile Table Scrolling */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* ==========================================================================
   FILTER CHIPS
   A single-select filter/legend row (stage, category, status, etc.).
   Deliberately NOT a .btn — it must not inherit the 38px touch-target
   min-height rule above, which is sized for primary actions, not compact
   filter toggles. Any page filtering a list by a category should use
   this component instead of a raw .btn-group or ad hoc pill markup, so
   spacing, active-state color, and sizing stay consistent app-wide.
   ========================================================================== */
.mbd-chip-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.mbd-chip {
    align-items: center;
    background: var(--mbd-color-surface);
    border: 1px solid var(--mbd-color-border);
    border-radius: var(--mbd-radius-pill);
    color: var(--mbd-color-text-secondary);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.375rem;
    line-height: 1.2;
    padding: 0.25rem 0.625rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mbd-chip:hover {
    background: var(--mbd-color-surface-secondary);
    border-color: var(--mbd-color-border-hover);
    color: var(--mbd-color-text-primary);
}

.mbd-chip.is-active {
    background: var(--mbd-color-primary-subtle);
    border-color: var(--mbd-color-primary-border);
    color: var(--mbd-color-primary-hover);
}

.mbd-chip .badge {
    font-size: .85em;
}

.mbd-chip-dot {
    border-radius: 50%;
    flex: 0 0 auto;
    height: .5rem;
    width: .5rem;
}

/* ==========================================================================
   GLOBAL COMPACT TABLE TOOLBAR & DATA FILTER SYSTEM
   Makes all table filters (search, sort, date, dropdowns, pills, chips)
   consistently compact, clean, readable, and perfectly aligned across all tables.
   ========================================================================== */
.mbd-table-toolbar,
.table-toolbar-container {
    background-color: var(--mbd-color-surface-secondary);
    padding: 0.5rem 0.875rem !important;
    gap: 0.5rem !important;
}

/* Compact Search Input */
.mbd-table-search {
    max-width: 18rem;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: visible;
}

.mbd-table-search .form-control,
.mbd-table-search .mbd-search-control {
    font-size: 0.8125rem !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-left: 2.5rem !important;
    padding-right: 2.25rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    background-color: var(--mbd-color-surface, #ffffff) !important;
    border: 1px solid var(--mbd-color-border, #cbd5e1) !important;
    border-radius: var(--mbd-radius-md, 0.5rem) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
    line-height: 1.4 !important;
    width: 100%;
}

.mbd-table-search .mbd-search-icon {
    position: absolute !important;
    top: 50% !important;
    left: 0.875rem !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 4 !important;
    font-size: 0.8125rem !important;
    line-height: 1 !important;
    color: var(--mbd-color-text-secondary, #64748b) !important;
}

.mbd-table-search .mbd-search-clear {
    position: absolute !important;
    top: 50% !important;
    right: 0.625rem !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 4 !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
}

.mbd-table-search .form-control:focus,
.mbd-table-search .mbd-search-control:focus {
    border-color: var(--mbd-color-primary, #d97706) !important;
    box-shadow: 0 0 0 3px var(--mbd-color-focus-ring, rgba(217, 119, 6, 0.25)) !important;
}

/* Compact Filter Controls Container (Pills / Boxes) */
.mbd-table-toolbar-actions .d-flex.align-items-center.bg-white,
.table-toolbar-container .d-flex.align-items-center.bg-white,
.mbd-table-sort-controls {
    height: 32px;
    min-height: 32px;
    padding: 0.125rem 0.5rem !important;
    border-radius: var(--mbd-radius-md, 0.5rem) !important;
    font-size: 0.785rem;
    background-color: var(--mbd-color-surface, #ffffff) !important;
    border: 1px solid var(--mbd-color-border, #cbd5e1) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
    display: inline-flex !important;
    align-items: center !important;
}

[data-bs-theme="dark"] .mbd-table-toolbar-actions .d-flex.align-items-center.bg-white,
[data-bs-theme="dark"] .table-toolbar-container .d-flex.align-items-center.bg-white,
[data-bs-theme="dark"] .mbd-table-sort-controls {
    background-color: var(--mbd-color-surface-elevated, #21262d) !important;
    border-color: var(--mbd-color-border, #30363d) !important;
}

/* Compact Selects & Date Inputs inside toolbars */
.mbd-table-toolbar .form-select-sm,
.table-toolbar-container .form-select-sm,
.mbd-table-sort-select {
    height: 26px !important;
    min-height: 26px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 1.5rem 0 0.25rem !important;
    font-size: 0.785rem !important;
    line-height: 1.3 !important;
    width: auto;
    outline: none !important;
}

.mbd-table-toolbar .form-control-sm[type="date"],
.table-toolbar-container .form-control-sm[type="date"] {
    height: 26px !important;
    min-height: 26px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 0.25rem !important;
    font-size: 0.775rem !important;
    line-height: 1.3 !important;
    width: 105px !important;
    max-width: 110px !important;
    flex: 0 0 auto !important;
    outline: none !important;
}

/* Compact Labels & Icons in Filter Controls */
.mbd-table-toolbar-actions span.small,
.table-toolbar-container span.small,
.mbd-table-sort-controls span.small {
    font-size: 0.725rem !important;
    font-weight: 600;
}

.mbd-table-toolbar-actions .bi,
.table-toolbar-container .bi {
    font-size: 0.8125rem;
}

/* Compact Reset & Action Buttons in Toolbar */
.mbd-table-toolbar-actions .btn.btn-sm,
.table-toolbar-container .btn.btn-sm {
    height: 32px;
    min-height: 32px;
    padding: 0.2rem 0.65rem !important;
    font-size: 0.775rem !important;
    font-weight: 600;
    border-radius: var(--mbd-radius-md, 0.5rem) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Compact Card-Header Filter Tabs/Buttons */
.card-header .btn-group .btn.btn-sm,
.card-header .btn.btn-sm:not(.btn-icon) {
    font-size: 0.775rem;
    padding: 0.2rem 0.6rem;
    min-height: 28px;
    border-radius: var(--mbd-radius-md, 0.5rem);
}

.mbd-th-sortable.is-active {
    background-color: color-mix(in srgb, var(--mbd-color-primary) 4%, transparent);
}

.mbd-th-sort-link {
    min-height: 2.375rem;
}

.mbd-th-sort-title {
    font-size: 0.725rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mbd-th-sort-indicator {
    height: 1.125rem;
    width: 1.125rem;
}

.mbd-th-sort-indicator .bi,
.mbd-th-sort-icon {
    font-size: 0.75rem;
}

/* Keep all data filters compact on phones without changing their query or
   click behaviour. Applies to chip filters, shared table controls, and the
   two legacy in-page activity-log filters. */
@media (max-width: 767.98px) {
    .mbd-chip-group {
        gap: var(--mbd-space-1);
    }

    .mbd-chip {
        font-size: var(--mbd-font-size-meta);
        gap: var(--mbd-space-1);
        padding: 0.1875rem var(--mbd-space-2);
    }

    .mbd-chip .badge {
        font-size: 0.7em;
    }

    .mbd-table-toolbar {
        gap: var(--mbd-space-2) !important;
        padding: var(--mbd-space-2) !important;
    }

    .mbd-table-search {
        max-width: none;
        width: 100%;
    }

    .mbd-table-toolbar .mbd-table-search .form-control,
    .mbd-table-toolbar .btn.btn-sm {
        font-size: var(--mbd-font-size-caption);
    }

    .mbd-table-toolbar .mbd-table-search .form-control {
        padding-bottom: var(--mbd-space-1) !important;
        padding-left: 2.5rem !important;
        padding-top: var(--mbd-space-1) !important;
    }

    .mbd-table-sort-controls {
        gap: var(--mbd-space-1);
        width: 100%;
    }

    .mbd-table-sort-controls .small,
    .mbd-table-sort-select {
        font-size: var(--mbd-font-size-meta) !important;
    }

    .mbd-table-sort-select {
        flex: 1 1 0;
        min-width: 0;
    }

    .filter-pill,
    .filter-log-btn {
        font-size: var(--mbd-font-size-meta) !important;
        padding: 0.25rem var(--mbd-space-2) !important;
    }

    .drawing-filter-panel {
        align-items: flex-start !important;
        gap: var(--mbd-space-2) !important;
        padding: var(--mbd-space-2) !important;
    }

    .drawing-filter-panel .drawing-status-filter {
        align-items: flex-start !important;
        gap: var(--mbd-space-1) !important;
    }

    .drawing-filter-panel .drawing-status-label {
        font-size: var(--mbd-font-size-meta) !important;
        line-height: 1.2;
    }
}

/* 4. Responsive Card Grid & Content Spacing */
@media (max-width: 767.98px) {
    .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page-header .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* 5. Modern Header Search Bar System */
.mbd-search-box {
    position: relative;
    transition: all 0.25s ease;
}

.mbd-search-input {
    background-color: var(--mbd-color-surface-secondary, #f8fafc);
    border: 1px solid var(--mbd-color-border, #cbd5e1);
    border-radius: 0.75rem !important;
    padding-left: 2.5rem !important;
    padding-right: 4.5rem !important;
    height: 2.5rem !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mbd-color-text-primary, #0f172a);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.mbd-search-input:focus {
    background-color: #ffffff;
    border-color: var(--mbd-color-primary, #d97706) !important;
    box-shadow: 0 0 0 3px var(--mbd-color-focus-ring, rgba(217, 119, 6, 0.25)), 0 6px 16px rgba(217, 119, 6, 0.08) !important;
}

[data-bs-theme="dark"] .mbd-search-input {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

[data-bs-theme="dark"] .mbd-search-input:focus {
    background-color: rgba(15, 23, 42, 0.95);
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

.mbd-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mbd-color-text-secondary, #64748b);
    pointer-events: none;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.mbd-search-box:focus-within .mbd-search-icon {
    color: var(--mbd-color-primary, #d97706);
}

.mbd-search-kbd {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mbd-color-text-secondary, #64748b);
    background-color: var(--mbd-color-surface, #ffffff);
    border: 1px solid var(--mbd-color-border, #cbd5e1);
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    pointer-events: none;
}

[data-bs-theme="dark"] .mbd-search-kbd {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

.mbd-search-results-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 440px;
    max-height: 480px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--mbd-color-border, #cbd5e1);
    border-radius: 0.875rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    z-index: 1055;
    padding: 0.5rem;
}

[data-bs-theme="dark"] .mbd-search-results-panel {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* 6. Responsive Mobile Overlay Search (< 768px) & Tablet Layout Rules */
@media (max-width: 767.98px) {
    #globalSearchForm.mobile-search-open {
        display: flex !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1060;
        background-color: var(--mbd-color-surface, #ffffff);
        padding: 0.5rem 1rem;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    [data-bs-theme="dark"] #globalSearchForm.mobile-search-open {
        background-color: #0f172a;
    }

    #globalSearchForm.mobile-search-open .mbd-search-box {
        width: 100%;
    }

    #globalSearchForm.mobile-search-open .mbd-search-input {
        width: 100% !important;
    }

    #globalSearchForm.mobile-search-open .mbd-search-results-panel {
        width: calc(100vw - 2rem) !important;
        max-width: 100%;
        left: 0;
        right: 0;
    }

    /* Notification Page Responsive Adjustments */
    .list-group-item .d-flex {
        flex-wrap: wrap;
    }

    .list-group-item .text-end {
        text-align: left !important;
        margin-top: 0.5rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* ==========================================================================
   DATE & DATETIME PICKER (flatpickr) - Compact Modern Theme
   ========================================================================== */
input.flatpickr-input,
input.mbd-datepicker-input {
    background-color: var(--mbd-color-surface, #ffffff) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem 1rem !important;
    padding-right: 2.5rem !important;
}

.flatpickr-calendar {
    background: var(--mbd-color-surface-elevated, #ffffff);
    border: 1px solid var(--mbd-color-border, #cbd5e1);
    border-radius: var(--mbd-radius-lg, 0.75rem);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    font-family: var(--tblr-font-sans-serif, 'Inter', sans-serif);
    width: 300px !important;
    padding: 0.5rem;
    font-size: 0.8125rem;
}

.flatpickr-rcontainer,
.flatpickr-days,
.dayContainer {
    width: 284px !important;
    min-width: 284px !important;
    max-width: 284px !important;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--mbd-color-border, #cbd5e1);
}

.flatpickr-months {
    padding: 0.25rem 0.25rem 0.5rem;
}

.flatpickr-months .flatpickr-month {
    background: transparent;
    color: var(--mbd-color-text-primary, #0f172a);
    height: 34px;
}

.flatpickr-current-month {
    padding-top: 2px;
    font-size: 0.9rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--mbd-color-text-primary, #0f172a);
    font-weight: 700;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--mbd-color-text-secondary, #475569);
    fill: var(--mbd-color-text-secondary, #475569);
    height: 30px;
    width: 30px;
    padding: 6px;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--mbd-color-primary, #d97706);
}

.flatpickr-weekdays {
    background: transparent;
    height: 26px;
}

span.flatpickr-weekday {
    color: var(--mbd-color-text-muted, #64748b);
    font-weight: 700;
    font-size: 0.725rem;
}

.flatpickr-day {
    color: var(--mbd-color-text-primary, #0f172a);
    border-radius: var(--mbd-radius-md, 0.375rem);
    height: 34px;
    line-height: 34px;
    max-width: 38px;
    font-weight: 500;
}

.flatpickr-day.today {
    border-color: var(--mbd-color-primary, #d97706);
    color: var(--mbd-color-primary, #d97706);
    font-weight: 700;
}

.flatpickr-day:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.prevMonthDay:hover {
    background: var(--mbd-color-surface-secondary, #f1f5f9);
    border-color: var(--mbd-color-border, #cbd5e1);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--mbd-color-primary, #d97706) !important;
    border-color: var(--mbd-color-primary, #d97706) !important;
    color: #ffffff !important;
    font-weight: 700;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--mbd-color-text-disabled, #94a3b8);
}

/* Flatpickr Timepicker Component */
.flatpickr-time {
    border-top: 1px solid var(--mbd-color-border, #e2e8f0);
    max-height: 40px;
    line-height: 40px;
}

.flatpickr-time input {
    font-weight: 700;
    color: var(--mbd-color-text-primary, #0f172a);
    font-size: 0.875rem;
}

.flatpickr-time .flatpickr-time-separator {
    color: var(--mbd-color-text-secondary, #475569);
    font-weight: 700;
}

/* Dark Theme Support */
[data-bs-theme="dark"] .flatpickr-calendar {
    background: var(--mbd-color-surface-elevated, #1e293b);
    border-color: var(--mbd-color-border, #334155);
}

[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--mbd-color-text-secondary, #94a3b8);
}

[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] .flatpickr-day {
    color: #f8fafc;
}

[data-bs-theme="dark"] .flatpickr-time {
    border-top-color: #334155;
}

/* Responsive containment: preserve intentional table scrollers while keeping
   flexible page content, media, menus, and dialogs inside the viewport. */
.page,
.page-wrapper,
.page-body,
.page-body>.container,
.page-body>.container-fluid,
main,
.card,
.card-header,
.card-body,
.card-footer,
.modal-body,
.dropdown-item,
.input-group,
.row>* {
    min-width: 0;
}

.page-wrapper,
.page-body,
main,
.card,
.modal-dialog {
    max-width: 100%;
}

img,
svg,
video,
iframe,
canvas {
    max-width: 100%;
}

.mbd-page-pretitle {
    color: color-mix(in srgb, var(--tblr-body-color) 60%, transparent);
    font-size: var(--mbd-font-size-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mbd-page-title {
    color: var(--tblr-body-color);
    font-size: clamp(1.05rem, 4.5vw, var(--mbd-font-size-h1));
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.page-header-actions,
.mbd-table-toolbar-actions {
    min-width: 0;
}

.mbd-search-results-panel {
    width: min(27.5rem, calc(100vw - var(--mbd-space-4)));
}

.pagination {
    flex-wrap: wrap;
}

/* ==========================================================================
   MODAL DIALOG SYSTEM (MBD ERP Standard Proportional Centering & Stacking)
   Tier 1: Compact/Prompt (.modal-sm): max-width: 440px
   Tier 2: Standard Form (Default): max-width: 560px
   Tier 3: Structured Multi-Field (.modal-lg): max-width: 760px
   Tier 4: Data Grid / Preview (.modal-xl): max-width: 1040px
   ========================================================================== */
.modal-backdrop {
    z-index: 1070 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(15, 23, 42, 0.6) !important;
}

.modal {
    z-index: 1075 !important;
}

.modal-dialog {
    --bs-modal-width: 35rem;
    /* 560px Default */
    max-width: min(var(--bs-modal-width), calc(100% - 2rem));
    margin: 1.75rem auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
    z-index: 1080 !important;
}

.modal-dialog.modal-sm {
    --bs-modal-width: 27.5rem;
    /* 440px */
}

.modal-dialog.modal-lg {
    --bs-modal-width: 47.5rem;
    /* 760px */
}

.modal-dialog.modal-xl {
    --bs-modal-width: 65rem;
    /* 1040px */
}

.modal-content {
    border-radius: var(--mbd-radius-xl, 1rem) !important;
    border: 1px solid var(--tblr-border-color, #e2e8f0) !important;
    background: var(--tblr-bg-surface, #ffffff);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 1px rgba(0, 0, 0, 0.1) !important;
    max-height: calc(100dvh - 3.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100%;
}

[data-bs-theme="dark"] .modal-content {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.modal-header {
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid var(--tblr-border-color, #e2e8f0);
    background: var(--tblr-bg-surface, #ffffff);
    flex-shrink: 0 !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

[data-bs-theme="dark"] .modal-header {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tblr-body-color, #0f172a);
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 1.35rem;
    overflow-y: auto !important;
    max-height: calc(100dvh - 11.5rem) !important;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: anywhere;
    flex: 1 1 auto !important;
}

.modal-footer {
    padding: 0.95rem 1.35rem;
    border-top: 1px solid var(--tblr-border-color, #e2e8f0);
    background: var(--tblr-bg-surface-secondary, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mbd-space-2, 0.5rem);
    flex-shrink: 0 !important;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

[data-bs-theme="dark"] .modal-footer {
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Horizontal 50-50 Side-by-Side Footer for Confirmation & Alert Modals */
.modal-footer-confirm,
.modal-footer-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 0.85rem 1.25rem !important;
    justify-content: stretch !important;
}

.modal-footer-confirm .btn,
.modal-footer-actions-grid .btn {
    width: 100% !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    min-height: 38px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

@media (max-width: 767.98px) {
    .page-header-actions {
        margin-left: 0 !important;
        width: 100%;
    }

    .page-header-actions>.btn,
    .mbd-table-toolbar-actions>.btn {
        flex: 1 1 auto;
    }

    .mbd-table-toolbar-actions {
        width: 100%;
    }

    .dropdown-menu {
        max-width: calc(100vw - var(--mbd-space-4));
    }

    .table-pagination-wrapper {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   FORM LAYOUT MECHANISMS (Constrained & Responsive Form Containers)
   Forms should not stretch uncontrollably across ultrawide monitors.
   Use these mechanisms to provide balanced, readable, and neat proportions.
   ========================================================================== */
.form-container-compact {
    max-width: 760px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.form-container-constrained,
.page-form-container {
    max-width: 960px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.form-container-wide {
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.form-section-card {
    border-radius: var(--mbd-radius-xl, 1rem);
    border: 1px solid var(--mbd-color-border, #cbd5e1);
    box-shadow: var(--mbd-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {

    .form-container-compact,
    .form-container-constrained,
    .page-form-container,
    .form-container-wide {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   INTERNAL CHAT & TEAM MESSENGER DESIGN SYSTEM
   ========================================================================== */
.mbd-chat-container {
    display: flex;
    height: calc(100vh - 195px);
    min-height: 580px;
    background: var(--tblr-bg-surface, #ffffff);
    border: 1px solid var(--mbd-color-border, #cbd5e1);
    border-radius: var(--mbd-radius-xl, 1rem);
    overflow: hidden;
    box-shadow: var(--mbd-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

.chat-sidebar {
    width: 360px;
    min-width: 300px;
    max-width: 400px;
    border-right: 1px solid var(--mbd-color-border, #cbd5e1);
    display: flex;
    flex-direction: column;
    background: var(--tblr-bg-surface, #ffffff);
    height: 100%;
}

.chat-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--mbd-color-border, #cbd5e1);
    background: var(--mbd-color-surface-secondary, #f8fafc);
}

.chat-sidebar-search {
    position: relative;
}

.chat-sidebar-search input {
    height: 34px;
    font-size: 0.8125rem;
    padding-left: 2rem;
    border-radius: 0.5rem;
}

.chat-sidebar-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mbd-color-text-secondary, #64748b);
    font-size: 0.85rem;
}

.chat-filter-tabs {
    display: flex;
    padding: 0.5rem 1rem;
    gap: 0.35rem;
    border-bottom: 1px solid var(--mbd-color-border, #cbd5e1);
    background: var(--tblr-bg-surface, #ffffff);
}

.chat-filter-btn {
    flex: 1;
    text-align: center;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mbd-color-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-filter-btn:hover {
    background: var(--mbd-color-surface-secondary, #f1f5f9);
    color: var(--tblr-body-color, #1e293b);
}

.chat-filter-btn.active {
    background: var(--mbd-color-primary, #d97706);
    color: #ffffff;
    font-weight: 700;
}

.chat-conversation-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}

.chat-conversation-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
    color: inherit;
}

.chat-conversation-item:hover {
    background: var(--mbd-color-surface-secondary, #f8fafc);
}

.chat-conversation-item.active {
    background: rgba(217, 119, 6, 0.08);
    border-left: 3px solid var(--mbd-color-primary, #d97706);
}

.chat-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #d97706, #ca8a04);
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tblr-bg-surface, #ffffff);
    position: relative;
}

.chat-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--mbd-color-border, #cbd5e1);
    background: var(--tblr-bg-surface, #ffffff);
    z-index: 10;
}

.chat-messages-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--tblr-bg-surface-secondary, #f8fafc);
}

.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem 0;
}

.chat-date-separator span {
    font-size: 0.725rem;
    font-weight: 600;
    padding: 0.2rem 0.75rem;
    border-radius: 1rem;
    background: var(--mbd-color-border, #e2e8f0);
    color: var(--mbd-color-text-secondary, #64748b);
}

.chat-msg-row {
    display: flex;
    gap: 0.65rem;
    align-items: flex-end;
    max-width: 80%;
}

.chat-msg-row.sent {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg-row.received {
    align-self: flex-start;
}

.chat-msg-bubble {
    padding: 0.65rem 0.95rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    word-break: break-word;
    position: relative;
}

.chat-msg-row.sent .chat-msg-bubble {
    background: var(--mbd-color-primary, #d97706);
    color: #ffffff;
    border-bottom-right-radius: 0.2rem;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.2);
}

.chat-msg-row.received .chat-msg-bubble {
    background: var(--tblr-bg-surface, #ffffff);
    color: var(--tblr-body-color, #1e293b);
    border: 1px solid var(--mbd-color-border, #e2e8f0);
    border-bottom-left-radius: 0.2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.chat-msg-time {
    font-size: 0.675rem;
    opacity: 0.75;
    margin-top: 0.25rem;
    display: block;
    text-align: right;
}

.chat-msg-row.sent .chat-msg-time {
    color: rgba(255, 255, 255, 0.85);
}

.chat-msg-row.received .chat-msg-time {
    color: var(--mbd-color-text-secondary, #64748b);
}

.chat-attachment-box {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    margin-top: 0.35rem;
    text-decoration: none;
    font-size: 0.8125rem;
}

.chat-msg-row.sent .chat-attachment-box {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.chat-msg-row.received .chat-attachment-box {
    background: var(--mbd-color-surface-secondary, #f1f5f9);
    color: var(--tblr-body-color, #1e293b);
    border: 1px solid var(--mbd-color-border, #e2e8f0);
}

/* Chat Image Attachment Card & Interactive Preview */
.chat-image-attachment-wrapper {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    max-width: 280px;
}

.chat-image-preview-card {
    position: relative;
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-image-preview-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mbd-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
}

.chat-image-preview-card img {
    display: block;
    width: 100%;
    transition: filter 0.2s ease;
}

.chat-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.chat-image-preview-card:hover .chat-image-overlay,
.chat-image-preview-card:focus-visible .chat-image-overlay {
    opacity: 1;
}

/* Chat Image Lightbox Modal */
.chat-lightbox-modal .modal-dialog {
    max-width: 92vw;
    margin: 1.75rem auto;
}

.chat-lightbox-content {
    background: rgba(15, 23, 42, 0.94) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

.chat-lightbox-header {
    background: rgba(30, 41, 59, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chat-lightbox-body {
    min-height: 480px;
    max-height: 82vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.95) 100%);
    user-select: none;
}

.chat-lightbox-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-out;
}

.chat-lightbox-img {
    max-height: 76vh;
    max-width: 86vw;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    cursor: zoom-in;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.chat-input-area {
    padding: 0.75rem 1.25rem;
    background: var(--tblr-bg-surface, #ffffff);
    border-top: 1px solid var(--mbd-color-border, #cbd5e1);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.chat-textarea {
    resize: none;
    height: 38px;
    max-height: 120px;
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
}

#filePreviewBadge.d-none {
    display: none !important;
}

.chat-empty-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--mbd-color-text-secondary, #64748b);
}

/* Dark theme overrides */
[data-bs-theme="dark"] .mbd-chat-container,
[data-bs-theme="dark"] .chat-sidebar,
[data-bs-theme="dark"] .chat-main,
[data-bs-theme="dark"] .chat-main-header,
[data-bs-theme="dark"] .chat-input-area,
[data-bs-theme="dark"] .chat-filter-tabs {
    background: var(--tblr-bg-surface, #1e293b) !important;
}

[data-bs-theme="dark"] .chat-sidebar-header,
[data-bs-theme="dark"] .chat-messages-scroll {
    background: #0f172a !important;
}

[data-bs-theme="dark"] .chat-conversation-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .chat-conversation-item.active {
    background: rgba(37, 99, 235, 0.2);
}

[data-bs-theme="dark"] .chat-msg-row.received .chat-msg-bubble {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .chat-date-separator span {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

/* Mobile responsive internal chat */
@media (max-width: 767.98px) {
    .mbd-chat-container {
        height: calc(100dvh - 135px);
        min-height: 440px;
        border-radius: 0.5rem;
        flex-direction: column;
        border-left: none;
        border-right: none;
    }

    .chat-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        border-right: none !important;
        flex: 1 1 auto;
        height: 100%;
    }

    .chat-sidebar-header {
        padding: 0.5rem 0.65rem;
    }

    .chat-filter-tabs {
        padding: 0.35rem 0.5rem;
    }

    .chat-filter-btn {
        font-size: 0.725rem;
        padding: 0.25rem 0.4rem;
    }

    .chat-conversation-item {
        padding: 0.5rem 0.65rem;
        gap: 0.5rem;
    }

    .chat-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.785rem;
    }

    .chat-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 auto;
        height: 100%;
    }

    .chat-main-header {
        padding: 0.5rem 0.65rem;
    }

    .chat-sidebar.mobile-hidden {
        display: none !important;
    }

    .chat-main.mobile-hidden {
        display: none !important;
    }

    .chat-messages-scroll {
        padding: 0.5rem 0.5rem;
        gap: 0.5rem;
    }

    .chat-msg-row {
        max-width: 92%;
        gap: 0.4rem;
    }

    .chat-msg-bubble {
        padding: 0.45rem 0.75rem;
        font-size: 0.8125rem !important;
        /* 13px compact readable text */
        line-height: 1.4;
        border-radius: 0.75rem;
    }

    .chat-msg-bubble small,
    .chat-msg-row .small {
        font-size: 0.685rem !important;
    }

    .chat-input-area {
        padding: 0.35rem 0.5rem;
        gap: 0.35rem;
    }

    .chat-textarea {
        font-size: 0.8125rem !important;
        padding: 0.35rem 0.5rem !important;
    }
}

/* ==========================================================================
   LINKEDIN-STYLE FIXED BOTTOM-RIGHT MESSAGING DOCK WIDGET
   ========================================================================== */
.mbd-floating-chat-window {
    position: fixed;
    bottom: 0;
    right: 24px;
    width: 350px;
    height: 520px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    background: var(--tblr-bg-surface, #ffffff);
    border: 1px solid var(--mbd-color-border, #cbd5e1);
    border-bottom: none;
    border-radius: 0.85rem 0.85rem 0 0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-radius 0.28s ease;
    box-sizing: border-box;
}

@media (max-width: 991.98px) {

    .mbd-floating-chat-window,
    .mbd-floating-chat-btn {
        display: none !important;
    }
}

body.modal-open .mbd-floating-chat-window {
    z-index: 1030 !important;
}

/* Collapsed state: exact 48px height bottom dock bar like LinkedIn */
.mbd-floating-chat-window.chat-window-collapsed {
    height: 48px !important;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.12);
}

.mbd-floating-chat-window.chat-window-collapsed .floating-chat-body {
    display: none !important;
}

.floating-chat-header {
    padding: 0.65rem 0.85rem;
    height: 48px;
    min-height: 48px;
    background: linear-gradient(135deg, #09090b, #18181b);
    border-bottom: 2px solid #d97706;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.floating-chat-header:hover {
    background: linear-gradient(135deg, #18181b, #27272a);
}

.floating-chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: var(--tblr-bg-surface, #ffffff);
    min-height: 0;
}

.floating-chat-tabs {
    display: flex;
    padding: 0.45rem 0.75rem;
    gap: 0.35rem;
    border-bottom: 1px solid var(--mbd-color-border, #e2e8f0);
    background: var(--mbd-color-surface-secondary, #f8fafc);
    flex-shrink: 0;
}

.floating-chat-tab-btn {
    flex: 1;
    text-align: center;
    padding: 0.35rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mbd-color-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.floating-chat-tab-btn.active {
    background: var(--mbd-color-primary, #d97706);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.25);
}

.floating-chat-search {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--mbd-color-border, #e2e8f0);
    position: relative;
    background: var(--tblr-bg-surface, #ffffff);
    flex-shrink: 0;
}

.floating-chat-search input {
    height: 34px;
    font-size: 0.8125rem;
    padding-left: 2rem;
    border-radius: 0.5rem;
}

.floating-chat-search i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mbd-color-text-secondary, #64748b);
    font-size: 0.825rem;
}

.floating-chat-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 0;
}

.floating-chat-list::-webkit-scrollbar,
.floating-chat-messages::-webkit-scrollbar {
    width: 5px;
}

.floating-chat-list::-webkit-scrollbar-thumb,
.floating-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 4px;
}

.floating-chat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--mbd-color-border, #e2e8f0);
    cursor: pointer;
    transition: background 0.15s ease;
    min-width: 0;
    box-sizing: border-box;
}

.floating-chat-item:hover {
    background: var(--mbd-color-surface-secondary, #f8fafc);
}

.floating-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: var(--tblr-bg-surface-secondary, #f8fafc);
    min-height: 0;
}

.floating-chat-messages .chat-msg-row {
    max-width: 86%;
    display: flex;
    flex-direction: column;
}

.floating-chat-messages .chat-msg-row.sent {
    align-self: flex-end;
    align-items: flex-end;
}

.floating-chat-messages .chat-msg-row.received {
    align-self: flex-start;
    align-items: flex-start;
}

.floating-chat-messages .chat-msg-bubble {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    border-radius: 0.85rem;
}

.floating-chat-messages .chat-attachment-box {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.floating-chat-attachment-bar {
    padding: 0.4rem 0.75rem 0;
    background: var(--tblr-bg-surface, #ffffff);
    flex-shrink: 0;
    box-sizing: border-box;
}

.floating-chat-attachment-bar.d-none {
    display: none !important;
}

.floating-chat-input-bar {
    padding: 0.5rem 0.75rem 0.65rem;
    background: var(--tblr-bg-surface, #ffffff);
    border-top: 1px solid var(--mbd-color-border, #e2e8f0);
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
    box-sizing: border-box;
}

.floating-chat-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--mbd-color-text-secondary, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.floating-chat-icon-btn:hover {
    background: var(--mbd-color-surface-secondary, #f1f5f9);
    color: var(--mbd-color-primary, #d97706);
}

.floating-chat-textarea {
    resize: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 96px !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    border-radius: 0.625rem !important;
    border: 1px solid var(--mbd-color-border, #cbd5e1) !important;
    background-color: var(--mbd-color-surface, #ffffff) !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.floating-chat-textarea:focus {
    border-color: var(--mbd-color-primary, #d97706) !important;
    box-shadow: 0 0 0 2px var(--mbd-color-focus-ring, rgba(217, 119, 6, 0.2)) !important;
}

.floating-chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--mbd-color-primary, #d97706);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
    padding: 0;
}

.floating-chat-send-btn:hover {
    background: var(--mbd-color-primary-hover, #b45309);
    transform: scale(1.05);
}

.floating-chat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Dark mode for floating chat */
[data-bs-theme="dark"] .mbd-floating-chat-window {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .floating-chat-tabs,
[data-bs-theme="dark"] .floating-chat-messages {
    background: #0f172a !important;
}

[data-bs-theme="dark"] .floating-chat-search,
[data-bs-theme="dark"] .floating-chat-input-bar {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-bs-theme="dark"] .floating-chat-item {
    border-color: #334155 !important;
}

[data-bs-theme="dark"] .floating-chat-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

@media (max-width: 991.98px) {
    .mbd-floating-chat-window {
        bottom: 68px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        border-radius: 0.85rem !important;
        border-bottom: 1px solid var(--mbd-color-border, #cbd5e1) !important;
    }

    .mbd-floating-chat-window.chat-window-collapsed {
        height: 46px !important;
    }

    .mbd-floating-chat-window:not(.chat-window-collapsed) {
        height: calc(100vh - 90px) !important;
    }
}

/* ==========================================================================
   23. STRICT MONETARY & CURRENCY ANTI-WRAP MANDATE (AGENTS.md Rule 23)
   ========================================================================== */
.currency-nominal,
.text-currency,
.mbd-currency,
.font-monospace,
.stat-value,
.table td.text-end,
.table th.text-end {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   24. SIDEBAR CONTEXTUAL ICON SYSTEM
   Vibrant, high-contrast, contextually color-coded icons for executive navigation
   ========================================================================== */
.navbar-vertical .nav-link-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    margin: 0;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease;
}

.navbar-vertical .nav-link:hover .nav-link-icon {
    transform: scale(1.15);
}

.navbar-vertical .nav-item.active .nav-link .nav-link-icon {
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}

.navbar-vertical .icon-sky {
    color: #38bdf8 !important;
}

.navbar-vertical .icon-emerald {
    color: #34d399 !important;
}

.navbar-vertical .icon-purple {
    color: #c084fc !important;
}

.navbar-vertical .icon-blue {
    color: #60a5fa !important;
}

.navbar-vertical .icon-amber {
    color: #fbbf24 !important;
}

.navbar-vertical .icon-cyan {
    color: #22d3ee !important;
}

.navbar-vertical .icon-pink {
    color: #f472b6 !important;
}

.navbar-vertical .icon-orange {
    color: #fb923c !important;
}

.navbar-vertical .icon-teal {
    color: #2dd4bf !important;
}

.navbar-vertical .icon-green {
    color: #4ade80 !important;
}

.navbar-vertical .icon-rose {
    color: #f43f5e !important;
}

.navbar-vertical .icon-indigo {
    color: #818cf8 !important;
}

.navbar-vertical .icon-yellow {
    color: #eab308 !important;
}

.navbar-vertical .icon-slate {
    color: #94a3b8 !important;
}

.navbar-vertical .icon-ai {
    color: #c084fc !important;
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   25. COMPREHENSIVE MOBILE UI/UX & RESPONSIVE ENGINE (WCAG 2.1 AA)
   Optimizes font scale, base 4px spacing grid, touch targets, and iOS zoom
   ========================================================================== */

/* Mobile Touch Target & iOS Safari Input Auto-Zoom Prevention (< 768px) */
@media (max-width: 767.98px) {

    .form-control,
    .form-select,
    .input-group-text {
        font-size: 1rem !important;
        /* 16px prevents iOS Safari forced auto-zoom */
        min-height: 2.5rem !important;
        /* 40px touch target */
    }

    .btn:not(.btn-sm):not(.btn-xs):not(.timeframe-pill-btn):not(.mbd-chip) {
        min-height: 2.5rem !important;
        /* 40px touch target for primary CTA actions */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm,
    .btn-xs,
    .timeframe-pill-btn,
    .mbd-chip {
        min-height: 2.0rem !important;
        /* 32px compact height for dashboard buttons & filter pills */
        font-size: 0.785rem !important;
        padding: 0.25rem 0.625rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .table> :not(caption)>*>* {
        padding: 0.625rem 0.5rem !important;
    }

    .page-header {
        margin-bottom: var(--mbd-space-4, 1rem) !important;
    }
}

/* Mobile Small Screen Fine-Tuning (< 576px) */
@media (max-width: 575.98px) {

    .page-title,
    h1,
    .h1 {
        font-size: 1.20rem !important;
        line-height: 1.3 !important;
    }

    .page-pretitle {
        font-size: 0.725rem !important;
    }

    h2,
    .h2 {
        font-size: 1.05rem !important;
    }

    h3,
    .h3 {
        font-size: 0.95rem !important;
    }

    .card-body {
        padding: 0.875rem 1rem !important;
    }

    .stat-card-value,
    .stat-value {
        font-size: 1.15rem !important;
        white-space: nowrap !important;
    }

    .stat-card-title {
        font-size: 0.75rem !important;
    }

    .quick-action-ribbon .btn,
    .timeframe-pill-container .timeframe-pill-btn,
    .page-header .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.5rem !important;
        min-height: 1.875rem !important;
        /* 30px sleek compact height on mobile dashboard */
    }

    .btn-mobile-full {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

    .mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .mobile-stack>* {
        width: 100% !important;
    }

    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
}

/* ==========================================================================
   26. TABLET UI/UX & RESPONSIVE ENGINE (768px - 991.98px) (WCAG 2.1 AA)
   Optimizes font scale, 2x2 stat grid, spacing, form inputs, and modal UX for iPad/Tablets
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* 1. Tablet Typography Scale */
    .page-title,
    h1,
    .h1 {
        font-size: 1.25rem !important;
        /* 20px */
        line-height: 1.35 !important;
    }

    .page-pretitle {
        font-size: 0.75rem !important;
    }

    h2,
    .h2 {
        font-size: 1.10rem !important;
    }

    h3,
    .h3 {
        font-size: 1.00rem !important;
    }

    /* 2. Tablet Spacing Grid & Cards */
    .page-header {
        margin-bottom: var(--mbd-space-5, 1.25rem) !important;
    }

    .card-body {
        padding: 1.125rem 1.25rem !important;
    }

    /* Stat Cards 2x2 Grid Layout for Tablet */
    .stat-card-value,
    .stat-value {
        font-size: 1.25rem !important;
        white-space: nowrap !important;
    }

    .stat-card-title {
        font-size: 0.785rem !important;
    }

    /* 3. Tablet Touch Target & Form Controls */
    .btn,
    .form-control,
    .form-select,
    .input-group-text {
        min-height: 2.375rem !important;
        /* 38px touch target */
    }

    .table> :not(caption)>*>* {
        padding: 0.75rem 0.625rem !important;
    }

    /* 4. Tablet Modal Viewport Containment */
    .modal-dialog {
        max-width: 85% !important;
        margin: 1.75rem auto !important;
    }

    .modal-content {
        max-height: calc(100vh - 3.5rem) !important;
    }

    .modal-body {
        max-height: calc(100vh - 11rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 5. Tablet Toolbar & Search Bar Layout */
    .mbd-table-toolbar {
        gap: var(--mbd-space-3, 0.75rem) !important;
    }

    .mbd-table-search {
        max-width: 320px;
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   CRM LIVE CHAT WORKSPACE
   ========================================================================== */
.live-chat-workspace {
    position: relative;
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr) 18rem;
    height: clamp(38rem, calc(100dvh - 17.5rem), 48rem);
    overflow: hidden;
    overflow: clip;
    border: 1px solid var(--mbd-color-border);
    border-radius: var(--mbd-radius-xl);
    background: var(--mbd-color-surface);
    box-shadow: var(--mbd-shadow-sm);
}

.live-chat-conversations,
.live-chat-thread,
.live-chat-profile {
    min-width: 0;
    min-height: 0;
    background: var(--mbd-color-surface);
}

.live-chat-conversations,
.live-chat-thread {
    border-right: 1px solid var(--mbd-color-border);
}

.live-chat-pane-header,
.live-chat-thread-header {
    flex: 0 0 auto;
    padding: var(--mbd-space-3);
    border-bottom: 1px solid var(--mbd-color-border);
    background: var(--mbd-color-surface);
}

.live-chat-thread-header {
    min-height: 4rem;
}

.live-chat-thread-header h3 {
    font-size: 1rem;
}

.live-chat-visitor-meta {
    display: flex;
    align-items: center;
    gap: var(--mbd-space-2);
    max-width: 32rem;
    overflow: hidden;
    font-size: 0.75rem;
    white-space: nowrap;
}

.live-chat-messages {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--mbd-space-3);
    min-height: 0;
    padding: var(--mbd-space-4);
    overflow-y: auto;
    background: var(--mbd-color-surface-secondary);
}

.live-chat-empty-copy {
    max-width: 20rem;
}

.live-chat-quick-replies {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--mbd-space-2);
    padding: var(--mbd-space-2) var(--mbd-space-3);
    overflow-x: auto;
    border-top: 1px solid var(--mbd-color-border);
    background: var(--mbd-color-surface-secondary);
}

.live-chat-reply-box {
    flex: 0 0 auto;
    padding: var(--mbd-space-3);
    border-top: 1px solid var(--mbd-color-border);
    background: var(--mbd-color-surface);
}

.live-chat-reply-input {
    max-height: 7.5rem;
    resize: none;
}

.live-chat-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: var(--mbd-radius-pill);
}

.live-chat-profile {
    overflow-y: auto;
}

.live-chat-conversations .chat-conversation-item {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
}

.live-chat-item-time,
.live-chat-item-status,
.live-chat-message-sender,
.live-chat-message-time {
    font-size: 0.725rem;
    color: var(--mbd-color-text-secondary);
}

.live-chat-item-status .bi {
    font-size: 0.5rem;
}

.live-chat-system-message {
    display: flex;
    justify-content: center;
    margin-block: var(--mbd-space-2);
}

.live-chat-system-message span {
    padding: var(--mbd-space-1) var(--mbd-space-3);
    border-radius: var(--mbd-radius-pill);
    background: var(--mbd-color-secondary-subtle);
    color: var(--mbd-color-text-secondary);
    font-size: 0.75rem;
}

.live-chat-message-row {
    display: flex;
    flex-direction: column;
    max-width: min(75%, 42rem);
}

.live-chat-message-row.is-agent {
    align-self: flex-end;
    align-items: flex-end;
}

.live-chat-message-row.is-visitor {
    align-self: flex-start;
    align-items: flex-start;
}

.live-chat-message-sender,
.live-chat-message-time {
    padding-inline: var(--mbd-space-1);
}

.live-chat-message-sender {
    margin-bottom: var(--mbd-space-1);
    font-weight: 600;
}

.live-chat-message-time {
    margin-top: var(--mbd-space-1);
}

.live-chat-message-bubble {
    padding: var(--mbd-space-3) var(--mbd-space-4);
    border: 1px solid var(--mbd-color-border);
    border-radius: var(--mbd-radius-xl);
    background: var(--mbd-color-surface);
    color: var(--mbd-color-text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.live-chat-message-row.is-agent .live-chat-message-bubble {
    border-color: var(--mbd-color-primary);
    border-bottom-right-radius: var(--mbd-space-1);
    background: var(--mbd-color-primary);
    color: var(--mbd-color-text-inverse);
}

.live-chat-message-row.is-visitor .live-chat-message-bubble {
    border-bottom-left-radius: var(--mbd-space-1);
}

.live-chat-message-bubble.is-bot {
    border-color: var(--mbd-color-info-border);
    background: var(--mbd-color-info-subtle);
}

.live-chat-attachment-image {
    max-height: 12.5rem;
    border-radius: var(--mbd-radius-lg);
    cursor: pointer;
}

.live-chat-toast-layer {
    z-index: 1090;
}

@media (max-width: 1199.98px) {
    .live-chat-workspace {
        grid-template-columns: 18rem minmax(0, 1fr);
    }

    .live-chat-thread {
        border-right: 0;
    }

    .live-chat-profile {
        position: absolute;
        z-index: 20;
        inset-block: 0;
        right: 0;
        width: min(22rem, 100%);
        border-left: 1px solid var(--mbd-color-border);
        box-shadow: var(--mbd-shadow-lg);
        transform: translateX(100%);
        transition: transform 180ms ease;
    }

    .live-chat-profile.is-open {
        transform: translateX(0);
    }
}

@media (min-width: 1200px) {
    .live-chat-profile {
        grid-column: 3;
    }
}

@media (max-width: 767.98px) {
    .live-chat-stats .stat-card .card-body {
        padding: var(--mbd-space-3) !important;
    }

    .live-chat-stats .stat-card-icon {
        width: 2rem !important;
        height: 2rem !important;
        padding: var(--mbd-space-1) !important;
    }

    .live-chat-stats .stat-card .text-secondary.mt-2 {
        display: none;
    }

    .live-chat-workspace {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100dvh - 9rem);
        min-height: 32rem;
        border-inline: 0;
        border-radius: var(--mbd-radius-lg);
    }

    .live-chat-conversations,
    .live-chat-thread {
        grid-area: 1 / 1;
        border-right: 0;
    }

    .live-chat-conversations.mobile-hidden,
    .live-chat-thread.mobile-hidden {
        display: none !important;
    }

    .live-chat-thread-header,
    .live-chat-pane-header,
    .live-chat-reply-box {
        padding: var(--mbd-space-2);
    }

    .live-chat-visitor-meta {
        max-width: 11rem;
    }

    .live-chat-messages {
        gap: var(--mbd-space-2);
        padding: var(--mbd-space-2);
    }

    .live-chat-message-row {
        max-width: 92%;
    }

    .live-chat-message-bubble {
        padding: var(--mbd-space-2) var(--mbd-space-3);
        font-size: 0.8125rem;
    }

    .live-chat-quick-replies {
        padding-inline: var(--mbd-space-2);
    }
}

/* ==========================================================================
   27. MOBILE ACTION BAR & FIELD UX ENHANCEMENTS
   ========================================================================== */
.mbd-mobile-action-bar {
    border-color: var(--mbd-color-border, #cbd5e1) !important;
}

[data-bs-theme="dark"] .mbd-mobile-action-bar {
    background: rgba(22, 27, 34, 0.95) !important;
    border-color: #30363d !important;
}

@media (max-width: 575.98px) {

    /* Prevent page footer from being covered by sticky action bar on phones */
    body {
        padding-bottom: 3.5rem;
    }
}

/* ==========================================================================
   28. MOBILE & TABLET NOTIFICATION DROPDOWN VIEWPORT FIX
   ========================================================================== */
@media (max-width: 991.98px) {
    .navbar {
        z-index: 1020 !important;
    }

    .dropdown-menu[aria-labelledby="notifDropdown"] {
        position: fixed !important;
        top: 56px !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        z-index: 1085 !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
    }

    .dropdown-menu[aria-labelledby="notifDropdown"] .list-group {
        max-height: calc(100vh - 240px) !important;
        max-height: 280px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    [data-bs-theme="dark"] .dropdown-menu[aria-labelledby="notifDropdown"] {
        background-color: #161b22 !important;
        border-color: #30363d !important;
    }
}

/* ==========================================================================
   29. TABLE TOOLBAR & RESPONSIVE FILTER CHIPS
   Ensures search controls, date range pickers, dropdown filters, and sort
   controls stay compact, intact (anti-break), and wrap gracefully on all screen sizes.
   ========================================================================== */
.mbd-table-toolbar {
    background-color: var(--mbd-color-surface-secondary, #f8fafc);
}

.mbd-table-search {
    flex: 0 1 280px;
    min-width: 180px;
}

.mbd-table-search .mbd-search-control {
    font-size: 0.8125rem;
    height: 34px;
    padding-left: 2.5rem !important;
    padding-right: 2.25rem !important;
    border-radius: var(--mbd-radius-md, 0.375rem);
    background-color: var(--mbd-color-surface, #ffffff);
}

.mbd-table-search .mbd-search-icon {
    left: 0.875rem !important;
}

/* Global Search Input & Addon Overlap Fix */
.input-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

.input-icon .input-icon-addon {
    position: absolute !important;
    top: 50% !important;
    left: 0.75rem !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: var(--mbd-color-text-secondary, #64748b) !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.input-icon .form-control,
.input-icon input[type="text"],
.input-icon input[type="search"] {
    padding-left: 2.35rem !important;
}

.input-group > .input-group-text.border-end-0 + .form-control.border-start-0 {
    padding-left: 0.65rem !important;
}

.input-group > .input-group-text.border-end-0 {
    padding-left: 0.75rem !important;
    padding-right: 0.35rem !important;
}

.mbd-table-sort-select {
    padding-left: 0.4rem !important;
    padding-right: 1.65rem !important;
    background-position: right 0.35rem center !important;
    background-size: 14px 10px !important;
    font-size: 0.78125rem !important;
    cursor: pointer;
}

.mbd-table-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mbd-table-sort-controls,
.mbd-table-toolbar .filter-chip-container {
    background-color: var(--mbd-color-surface, #ffffff);
    border: 1px solid var(--mbd-color-border, #e2e8f0);
    border-radius: var(--mbd-radius-md, 0.375rem);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.table-toolbar-container .form-control-sm[type="date"] {
    width: 88px !important;
    max-width: 92px !important;
    flex: 0 0 auto !important;
    font-size: 0.75rem !important;
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
}

[data-bs-theme="dark"] .mbd-table-toolbar {
    background-color: #0d1117 !important;
}

[data-bs-theme="dark"] .mbd-table-sort-controls,
[data-bs-theme="dark"] .mbd-table-search .mbd-search-control {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

@media (max-width: 767.98px) {
    .mbd-table-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.625rem !important;
    }

    .mbd-table-search {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .mbd-table-toolbar-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* ==========================================================================
   30. GLOBAL RESPONSIVE, MOBILE & TABLET ENGINE (WCAG 2.1 AA & UX GOVERNANCE)
   Guarantees fluid responsiveness across Mobile (320px-576px), Phablets/Large Mobile
   (576px-768px), Tablets (768px-991px), and Desktop viewports (>=992px).
   ========================================================================== */

/* Universal Touch & Overflow Hardening */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

.table-responsive,
.nav-tabs-wrapper,
.module-context-nav,
.gantt-chart-container,
.overflow-x-auto,
.btn-group-scrollable,
.project-control-grid {
    -webkit-overflow-scrolling: touch;
}

/* 1. TABLET & MOBILE VIEWPORTS (<= 991.98px) */
@media (max-width: 991.98px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .page-body>.container-fluid,
    .page-wrapper>.container-fluid,
    .page-body>.container-xl,
    .page-wrapper>.container-xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Horizontal Context Tabs Swipe Engine */
    .module-context-nav,
    .nav-tabs-wrapper ul.nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        min-height: 3rem;
        padding: 0.5rem 0.75rem !important;
        scroll-padding-inline: 0.75rem;
        border-radius: var(--mbd-radius-xl, 1rem);
        background-clip: padding-box;
    }

    .module-context-nav::-webkit-scrollbar,
    .nav-tabs-wrapper ul.nav::-webkit-scrollbar {
        display: none;
    }

    .module-context-nav__link,
    .nav-tabs-wrapper .nav-link {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.75rem !important;
        min-height: 2.125rem;
        border-radius: var(--mbd-radius-md, 0.5rem) !important;
    }

    /* Floating utilities safe zone above bottom dock */
    .toast-container {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
        width: auto !important;
    }

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

    .mbd-floating-chat-window {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 0.75rem !important;
        width: calc(100vw - 1.5rem) !important;
        max-width: 380px !important;
    }

    #pwaInstallBanner,
    #offlineStatusBar {
        bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Dropdown Menus viewport edge prevention */
    .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

/* 2. MOBILE VIEWPORTS (<= 767.98px) */
@media (max-width: 767.98px) {

    /* Page Header Dynamic Stacking */
    .page-header {
        margin-bottom: 1rem !important;
    }

    .page-header .d-flex.flex-column.flex-md-row,
    .page-header .d-flex.justify-content-between.align-items-start.flex-wrap,
    .page-header .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .page-header-actions,
    .page-header .page-header-actions,
    .page-header .d-flex.align-items-center.flex-wrap {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: stretch !important;
    }

    .page-header-actions .btn,
    .page-header-actions form,
    .page-header-actions form .btn,
    .page-header .d-flex.align-items-center.flex-wrap .btn {
        flex: 1 1 auto !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.8125rem !important;
    }

    .page-title,
    .mbd-page-title,
    h1.page-title {
        font-size: 1.20rem !important;
        line-height: 1.35 !important;
    }

    /* Stat Cards Compact Adaptive Padding & Fluid Value */
    .stat-card .card-body {
        padding: 0.85rem !important;
    }

    .stat-card .h2,
    .stat-card .stat-card-value {
        font-size: clamp(1.10rem, 4.5vw, 1.35rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .stat-card-icon {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem !important;
        font-size: 0.95rem !important;
    }

    /* Form Controls & Touch Targets */
    .form-label {
        font-size: 0.8125rem !important;
        margin-bottom: 0.25rem !important;
    }

    .form-control,
    .form-select,
    .btn {
        min-height: 38px !important;
    }

    /* Prevent iOS Safari 16px Auto-Zoom */
    @supports (-webkit-touch-callout: none) {

        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        select,
        textarea {
            font-size: 16px !important;
        }
    }

    /* Form Card Action Footers */
    .card-footer.d-flex.justify-content-between,
    .card-footer.d-flex.justify-content-end {
        flex-direction: column-reverse !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    .card-footer .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Modals Touch-Friendly Framing */
    .modal-dialog {
        margin: 0.75rem auto !important;
        min-height: calc(100% - 1.5rem) !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 1.5rem) !important;
    }

    .modal-content {
        border-radius: var(--mbd-radius-lg, 0.75rem) !important;
        max-height: calc(100dvh - 1.5rem) !important;
    }

    .modal-header {
        padding: 0.85rem 1rem !important;
    }

    .modal-body {
        padding: 1rem !important;
        max-height: calc(100dvh - 9.5rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer:not(.modal-footer-confirm):not(.modal-footer-actions-grid) {
        padding: 0.75rem 1rem !important;
        flex-direction: column-reverse !important;
        gap: 0.5rem !important;
    }

    .modal-footer:not(.modal-footer-confirm):not(.modal-footer-actions-grid) .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    .modal-footer-confirm,
    .modal-footer-actions-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* Tables Responsive Polish */
    .table-responsive {
        border-radius: var(--mbd-radius-md, 0.5rem);
        border: 1px solid var(--mbd-color-border, #e2e8f0);
    }

    .table th {
        padding: 0.65rem 0.75rem !important;
        font-size: 0.70rem !important;
    }

    .table td {
        padding: 0.65rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* Breadcrumbs Horizontal Scroll */
    .breadcrumb,
    .app-breadcrumb .breadcrumb {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-item {
        flex: 0 0 auto !important;
    }
}

/* 3. SMALL MOBILE PHONES (<= 575.98px) */
@media (max-width: 575.98px) {

    .row.g-3>.col-6,
    .row.g-2>.col-6 {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .project-control-grid {
        grid-template-columns: 1fr !important;
        padding: 0.5rem !important;
    }

    .topbar-icon-btn {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   31. GLOBAL MBD ERP PRINT & EXPORT DOCUMENT ENGINE
   High-Fidelity, Clean, Ready-to-Read, Professional Business Documents
   Customized layout, anti-wrap currency, automatic letterhead Kop, zero web UI junk
   ========================================================================== */
.mbd-print-official-header,
.mbd-print-official-footer {
    display: none;
}

@media print {

    /* 1. Page Configuration */
    @page {
        size: A4 portrait;
        margin: 12mm 15mm 15mm 15mm;
    }

    /* 2. Global Document Reset */
    *,
    *::before,
    *::after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html,
    body {
        background: #ffffff !important;
        color: #0f172a !important;
        font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
        font-size: 10.5px !important;
        line-height: 1.45 !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Absolute Elimination of Web Chrome, PWA & Interactive Elements */
    .navbar,
    .navbar-vertical,
    .navbar-expand-md,
    .topbar,
    .header,
    .sidebar,
    #appSidebar,
    #sidebarMenu,
    .sidebar-resizer,
    .module-context-nav,
    .page-header .btn,
    .page-header .dropdown,
    .page-header .btn-group,
    .page-header .d-flex.gap-2,
    .page-header .d-flex.align-items-center.gap-2,
    .breadcrumb,
    .btn,
    button,
    .btn-group,
    .dropdown,
    .dropdown-menu,
    .table-toolbar,
    .mbd-table-toolbar,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dataTables_info,
    .pagination,
    .nav-tabs,
    .chat-filter-tabs,
    .chat-sidebar,
    .chat-input-area,
    .live-chat-reply-box,
    .live-chat-quick-replies,
    .live-chat-conversations,
    .live-chat-profile,
    .toast,
    .toast-container,
    .modal,
    .modal-backdrop,
    .chat-lightbox-modal,
    #pwaInstallBanner,
    [id*="pwa"],
    [class*="pwa"],
    #offlineStatusBar,
    .mbd-mobile-role-dock,
    .mbd-mobile-bottom-nav,
    .field-quick-actions,
    #fieldQuickActionsDropdown,
    #mbdFloatingChatWindow,
    .mbd-floating-chat-window,
    .floating-chat-header,
    .floating-chat-body,
    .d-print-none,
    .btn-print-hide,
    .chat-image-overlay,
    .form-control,
    .form-select,
    input,
    textarea,
    select,
    .spinner-border,
    .alert,
    .flash-alerts,
    footer,
    .footer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* 4. Layout Layout & Containers Expansion */
    .page,
    .page-wrapper,
    .page-body,
    .container,
    .container-fluid,
    .container-xl,
    .container-lg,
    .container-md {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: auto !important;
        transform: none !important;
        margin-left: 0 !important;
    }

    /* 5. Official Print Header & Footer */
    .mbd-print-official-header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .mbd-print-official-footer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
        margin-top: 18px !important;
        padding-top: 6px !important;
        border-top: 1px solid #cbd5e1 !important;
        font-size: 8px !important;
        color: #94a3b8 !important;
        text-align: center !important;
    }

    /* 6. Typography & Headings */
    h1,
    .h1 {
        font-size: 15px !important;
        color: #0f172a !important;
        font-weight: 800 !important;
        margin-bottom: 4px !important;
    }

    h2,
    .h2 {
        font-size: 13px !important;
        color: #0f172a !important;
        font-weight: 700 !important;
        margin-top: 14px !important;
        margin-bottom: 6px !important;
        border-bottom: 1.5px solid #334155 !important;
        padding-bottom: 3px !important;
    }

    h3,
    .h3 {
        font-size: 12px !important;
        color: #0f172a !important;
        font-weight: 700 !important;
        margin-top: 10px !important;
        margin-bottom: 4px !important;
    }

    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        font-size: 11px !important;
        color: #1e293b !important;
        font-weight: 700 !important;
    }

    p,
    span,
    div {
        color: #1e293b !important;
    }

    .text-secondary,
    .text-muted {
        color: #64748b !important;
    }

    /* 7. Page Headers & Kop */
    .page-header {
        margin-bottom: 10px !important;
        padding-bottom: 6px !important;
        border-bottom: 1.5px solid #0f172a !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .page-header .page-title,
    .page-header h1 {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .page-header .page-pretitle {
        font-size: 8.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #475569 !important;
    }

    /* 8. Cards & Panels */
    .card {
        border: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        margin-bottom: 10px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .card-header {
        background: #f8fafc !important;
        border-bottom: 1px solid #cbd5e1 !important;
        padding: 5px 8px !important;
        font-weight: 700 !important;
        font-size: 10.5px !important;
    }

    .card-body {
        padding: 6px 8px !important;
    }

    .card-footer {
        background: #f8fafc !important;
        border-top: 1px solid #cbd5e1 !important;
        padding: 5px 8px !important;
    }

    /* 9. Tables Precision Engine */
    .table-responsive {
        overflow: visible !important;
        display: block !important;
        width: 100% !important;
    }

    table,
    .table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 10px !important;
        font-size: 9.5px !important;
    }

    thead {
        display: table-header-group !important;
    }

    tfoot {
        display: table-footer-group !important;
    }

    tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    th,
    td,
    .table> :not(caption)>*>* {
        border: 1px solid #cbd5e1 !important;
        padding: 4px 6px !important;
        color: #0f172a !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    th,
    .table thead th {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 8.5px !important;
        letter-spacing: 0.3px !important;
    }

    /* 10. Badges & Status */
    .badge,
    .status-badge {
        border: 1px solid #94a3b8 !important;
        color: #0f172a !important;
        background: #f1f5f9 !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        padding: 1.5px 5px !important;
        border-radius: 3px !important;
        text-transform: uppercase !important;
    }

    .badge.bg-success,
    .badge.bg-success-subtle,
    .badge-sehat {
        border-color: #059669 !important;
        color: #065f46 !important;
        background: #ecfdf5 !important;
    }

    .badge.bg-warning,
    .badge.bg-warning-subtle,
    .badge-waspada {
        border-color: #d97706 !important;
        color: #92400e !important;
        background: #fffbeb !important;
    }

    .badge.bg-danger,
    .badge.bg-danger-subtle,
    .badge-kritis {
        border-color: #dc2626 !important;
        color: #991b1b !important;
        background: #fef2f2 !important;
    }

    .badge.bg-primary,
    .badge.bg-primary-subtle {
        border-color: #d97706 !important;
        color: #92400e !important;
        background: #fefce8 !important;
    }

    /* 11. Strict Monetary & Currency Anti-Wrap */
    .amount,
    .money,
    .font-monospace,
    [class*="money"],
    [class*="amount"] {
        white-space: nowrap !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-weight: 700 !important;
    }

    /* 12. Stat Cards Grid in Print */
    .row.g-3,
    .row.g-4,
    .row.g-2 {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -4px 8px -4px !important;
    }

    .col-6.col-lg-3,
    .col-md-3,
    .col-sm-6,
    .col-lg-4,
    .col-md-4,
    .col-md-6 {
        flex: 1 0 22% !important;
        max-width: 25% !important;
        padding: 0 4px !important;
    }

    /* 13. Tabs Content Multi-Pane Print */
    .tab-content>.tab-pane {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 12px !important;
    }
}