:root {
    /* ===== Matrix global design tokens (change here → app-wide) ===== */
    --matrix-font: 'Outfit', 'Inter', system-ui, sans-serif;
    --matrix-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
    /* Comfortable app body size (was cascading via 0.875rem on html+components) */
    --matrix-font-size: 15px;

    /* old code */
    /* --matrix-bg: #F0F2F5; */
    --matrix-bg: #F1F5F9;
    --matrix-content-gutter: 10px; /* air between navbar drawer and main content (~50% of prior 20px) */
    --matrix-surface: #FFFFFF;
    --matrix-surface-muted: #F8FAFC;
    --matrix-border: #E2E8F0;
    --matrix-border-soft: #F1F5F9;

    --matrix-text: #0F172A;
    --matrix-text-secondary: #334155;
    --matrix-text-muted: #64748B;
    --matrix-text-faint: #94A3B8;

    --matrix-primary: #0F172A;
    --matrix-info: #2563EB;
    --matrix-success: #15803D;
    --matrix-error: #DC2626;
    --matrix-warning: #D97706;

    --matrix-radius: 12px;
    --matrix-radius-sm: 8px;
    --matrix-shadow: 0 4px 12px rgba(148, 163, 184, 0.08);

    /* MudBlazor typography hook */
    --mud-typography-default-family: var(--matrix-font);

    /* Legacy app icon sizing */
    --app-card-size: 80px;
    --app-icon-size: 60px;
    --app-label-size: 0.75rem;
    --app-icon-border-radius: 16px;

    /* Dashboard-only canvas — change this without touching --matrix-bg / MainLayout */
    --matrix-dashboard-bg: #F0F2F5; /* keep classic dashboard gray; MainLayout may use #F1F5F9 */
    --matrix-dashboard-pad-x: 8px; /* light side air; can tune later */
    --matrix-dashboard-pad-y: 0px;
}

/* Keep rem root at browser-normal 16px so Mud/rem sizes don't compound smaller */
html {
    font-size: 16px;
}

html, body {
    background-color: var(--matrix-bg) !important;
    font-family: var(--matrix-font) !important;
    color: var(--matrix-text-secondary);
}

body {
    /* old code */
    /* font-size: 0.875rem; */
    font-size: var(--matrix-font-size);
}

.mud-typography,
.mud-input,
.mud-button-root,
.mud-table,
.mud-nav-link {
    font-family: var(--matrix-font) !important;
}

/* Surfaces: stable, no “float on hover” (was making forms feel clumsy) */
.mud-paper {
    transition: box-shadow 0.15s ease;
}

.mud-paper:hover {
    transform: none;
}

/* Opt-in lift only for dashboard / launcher tiles */
.matrix-tile:hover,
.app-launcher-card:hover,
.command-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08) !important;
}

/* ===== Shared layout primitives (prefer these over page-local cards) ===== */
.matrix-page {
    background: transparent;
    color: var(--matrix-text-secondary);
    font-family: var(--matrix-font);
    /* old code */
    /* font-size: 0.875rem; */
    font-size: var(--matrix-font-size);
}

.matrix-dashboard {
    background: var(--matrix-dashboard-bg);
    padding: var(--matrix-dashboard-pad-y) var(--matrix-dashboard-pad-x);
    min-height: 100%;
    box-sizing: border-box;
}

.matrix-card {
    background: var(--matrix-surface);
    border: 1px solid var(--matrix-border);
    border-radius: var(--matrix-radius);
    box-shadow: var(--matrix-shadow);
    overflow: hidden;
}

.matrix-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--matrix-surface-muted);
    border-bottom: 1px solid var(--matrix-border);
}

.matrix-card-title {
    margin: 0;
    font-family: var(--matrix-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--matrix-text);
}

.matrix-card-body {
    padding: 12px 16px 16px;
}

.matrix-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--matrix-text-muted);
    margin-bottom: 4px;
}

.matrix-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--matrix-text);
}

.matrix-muted {
    color: var(--matrix-text-muted);
}

/* ===== Shared master-list / flag-grid (User Admin, Document Master, Access) ===== */
.matrix-list-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--matrix-font);
    font-size: 0.78rem;
}
.matrix-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--matrix-surface-muted) !important;
    color: var(--matrix-text-muted) !important;
    padding: 6px 10px !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--matrix-border) !important;
    white-space: nowrap;
}
.matrix-list-table tbody td {
    padding: 5px 10px !important;
    border-bottom: 1px solid var(--matrix-border) !important;
    vertical-align: middle !important;
    font-size: 0.78rem !important;
    color: var(--matrix-text-secondary);
}
.matrix-list-table .matrix-td-id {
    font-weight: 700;
    color: var(--mud-palette-secondary);
}
.matrix-list-table .matrix-td-bool,
.matrix-list-table .ctr {
    text-align: center !important;
    padding: 3px 6px !important;
}
.matrix-list-row {
    cursor: pointer;
    transition: background .1s;
}
.matrix-list-row:hover td {
    background: rgba(249, 115, 22, 0.06);
}
.matrix-list-row.selected td {
    background: rgba(249, 115, 22, 0.12) !important;
}
.matrix-bool-on {
    color: var(--mud-palette-secondary) !important;
}
.matrix-bool-off {
    color: var(--mud-palette-action-disabled) !important;
}
.matrix-bool-icon {
    font-size: 1.15rem !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
}
.matrix-toolbar-btn {
    font-size: 0.72rem !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
}

/* Universal section caption - matches Party Information on JBDNT (ErpPartySelector):
   uppercase, bold, ~0.75rem, blue left bar via theme secondary */
.matrix-section-title {
    /* old code */
    /* font-family: var(--matrix-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--matrix-text);
    text-transform: none;
    letter-spacing: 0; */
    font-family: var(--matrix-font);
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-left: 4px solid var(--mud-palette-secondary) !important;
    padding-left: 8px !important;
    line-height: 1.4;
}

/* Financial report title band — theme gradient, icon, Close on right */
.rpt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 6px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: linear-gradient(
        125deg,
        color-mix(in srgb, var(--mud-palette-secondary, #F97316) 24%, #fff) 0%,
        color-mix(in srgb, var(--mud-palette-secondary, #F97316) 10%, #fff) 48%,
        #fff 100%
    );
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary, #F97316) 24%, var(--matrix-border, #e2e8f0));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mud-palette-secondary, #F97316) 14%, transparent);
}
.rpt-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.rpt-head-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--mud-palette-secondary, #F97316) 28%, #fff),
        color-mix(in srgb, var(--mud-palette-secondary, #F97316) 12%, #fff)
    );
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary, #F97316) 20%, #e2e8f0);
    color: var(--mud-palette-secondary, #F97316);
}
.rpt-head-icon .mud-icon-root { font-size: 1.2rem !important; }
.rpt-head-title {
    font-family: var(--matrix-font);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mud-palette-secondary, #F97316) 65%, #0f172a);
    line-height: 1.2;
}
.rpt-head-close .mud-button-root {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 0.68rem !important;
}

/* Financial report grid — scroll bars when content exceeds viewport */
.rpt-table-scroll {
    max-height: calc(100vh - 260px);
    min-height: 160px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

@media (max-width: 900px) {
    .rpt-table-scroll {
        max-height: calc(100vh - 220px);
    }
}

/* Financial report row hover — trace focus across wide grids */
.rpt-table-scroll .tb-table tbody tr td,
.rpt-table-scroll .gl-table tbody tr td {
    transition: background-color .12s ease, box-shadow .12s ease;
}

.rpt-table-scroll .tb-table tbody tr.tb-account:hover td,
.rpt-table-scroll .gl-table tbody tr.gl-row:not(.gl-open):hover td {
    background: #dbeafe !important;
    box-shadow: inset 3px 0 0 #2563eb;
}

.rpt-table-scroll .gl-table tbody tr.gl-open:hover td {
    background: #fef08a !important;
    box-shadow: inset 3px 0 0 #ca8a04;
}

.rpt-table-scroll .tb-table tbody tr.tb-node:hover td {
    box-shadow: inset 3px 0 0 #2563eb, inset 0 0 0 9999px rgba(37, 99, 235, 0.14);
}

.rpt-table-scroll .tb-table tbody tr.tb-subtotal:hover td,
.rpt-table-scroll .gl-table tbody tr.gl-subtotal:hover td {
    background: #e2e8f0 !important;
    box-shadow: inset 3px 0 0 #64748b;
}

.rpt-table-scroll .tb-table tfoot tr:hover td {
    background: #cbd5e1 !important;
    box-shadow: inset 3px 0 0 #475569;
}

/* ErpDocumentTotals — compact rows / net highlight */
.matrix-totals-card {
    border-left: 4px solid var(--mud-palette-secondary) !important;
}

.matrix-totals-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.matrix-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--matrix-border-soft, #F1F5F9);
}

.matrix-totals-label {
    color: var(--matrix-text-muted, #64748B) !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
}

.matrix-totals-value {
    font-weight: 700 !important;
    color: var(--matrix-text, #0F172A) !important;
    font-size: 0.8125rem !important;
}

.matrix-totals-discount {
    color: var(--matrix-error, #DC2626) !important;
}

.matrix-totals-net {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--matrix-radius-sm, 8px);
    background-color: #FFF7ED;
    border: 1px solid rgba(249, 115, 22, 0.15);
}

.matrix-totals-net-aed {
    margin-top: 0.15rem;
    background-color: transparent;
    border-color: var(--matrix-border-soft, #F1F5F9);
}

.matrix-totals-net-label {
    font-weight: 700 !important;
    color: var(--matrix-text-secondary, #334155) !important;
    font-size: 0.8125rem !important;
}

.matrix-totals-net-value {
    font-weight: 800 !important;
    font-size: 1rem !important;
}


.mud-appbar {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.mud-drawer {
    background: #FFFFFF !important;
}

.mud-nav-link {
    border-radius: 8px;
    margin: 4px 8px;
    transition: all 0.2s;
}

.mud-nav-link.active {
    background-color: var(--mud-palette-secondary) !important;
    color: #FFFFFF !important;
}

.mud-nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Glassmorphism Classes */
.glass-panel {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}
/* --- MATRIX ERP GLOBAL DESIGN SYSTEM --- */
.matrix-tabs .mud-tab-slider { height: 4px; background-color: var(--mud-palette-secondary) !important; }
.matrix-tabs .mud-tab { color: #64748B !important; font-weight: 600 !important; opacity: 0.9 !important; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s ease; }
.matrix-tabs .mud-tab-active { color: var(--mud-palette-secondary) !important; font-weight: 900 !important; background-color: color-mix(in srgb, var(--mud-palette-secondary) 4%, transparent); opacity: 1 !important; }

.matrix-main-card { border-radius: 12px; border: 1px solid #E2E8F0; overflow: hidden; background-color: white; }
.matrix-main-card .mud-card-header { background-color: white; padding: 16px 24px; }
.matrix-search-input { background-color: #F8FAFC; border-radius: 8px; }
.matrix-btn-bold { font-weight: 700; border-radius: 8px; }

.matrix-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(15, 23, 42, 0.4); z-index: 1200; backdrop-filter: blur(2px); }
.matrix-drawer-modal { max-width: 95vw; z-index: 1300; }
.matrix-drawer-header-dark { background-color: #FFFFFF; color: #0F172A !important; padding: 12px 24px !important; min-height: 60px !important; border-bottom: 1px solid #E2E8F0; }
.matrix-drawer-header-dark .mud-icon-root { color: var(--mud-palette-secondary) !important; }
.matrix-drawer-body { background-color: #F8FAFC; flex-grow: 1; overflow-y: auto; }

/* ErpItemGrid line-edit modal (MudDialog) — full viewport, side docked, focus-trapped */
.erp-item-line-dialog.mud-dialog {
    margin: 0 !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    height: auto !important;
    max-height: none !important;
    width: 450px !important;
    max-width: min(450px, 100vw) !important;
    border-radius: 0 !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15) !important;
    animation: dialogSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.erp-item-line-dialog .mud-dialog-title {
    padding: 12px 16px !important;
    background: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0;
}
.erp-item-line-dialog .mud-dialog-content,
.erp-item-line-dialog-content {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #F8FAFC !important;
}
.erp-item-line-dialog .mud-dialog-actions {
    flex-shrink: 0;
    margin: 0 !important;
    padding: 12px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Line-edit pricing: equal 3-col widths (Unit / Qty / Rate; Disc% / Disc Amt / spacer; VAT) */
.erp-line-price-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: end; /* Unit/VAT select bottoms align with Qty/VAT% inputs */
}
.erp-line-price-grid > .erp-line-col,
.erp-line-price-grid > .mud-input-control,
.erp-line-price-grid > .mud-select {
    min-width: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Keep MudSelect (Unit / VAT Code) same control height as MudNumericField */
.erp-line-price-grid .mud-input-control .mud-input-outlined,
.erp-line-price-grid .mud-select .mud-input-outlined {
    min-height: 40px !important;
}
.erp-line-price-grid .mud-input-slot,
.erp-line-price-grid .mud-select .mud-input-slot {
    min-height: 40px !important;
    align-items: center !important;
}
.erp-line-col-spacer {
    min-height: 1px;
}
.erp-line-item-panel .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}
.erp-line-item-panel textarea {
    min-height: 48px !important;
    padding: 6px 8px !important;
}
.erp-line-item-panel .mb-2 {
    margin-bottom: 4px !important;
}
.erp-line-item-panel .form-label {
    margin-bottom: 2px !important;
}

@media (max-width: 600px) {
    .erp-item-line-dialog.mud-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

.matrix-field-group { border: 1px solid #E2E8F0; border-radius: 12px; background-color: white; padding: 12px 14px; height: 100%; box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08); transition: all 0.2s ease; }
.group-title { font-family: var(--matrix-font-display); font-weight: 800; font-size: 0.7rem; color: var(--matrix-text); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; border-bottom: 2px solid var(--matrix-border-soft); padding-bottom: 4px; }
.dense-field { margin-bottom: 6px !important; }

.matrix-status-box { background: #FFFFFF; border-radius: 8px; border: 2px solid var(--mud-palette-secondary); height: 40px; box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent); display: flex; align-items: center; padding: 0 16px; }
.matrix-bg-readonly { background-color: #F1F5F9 !important; }
.matrix-text-right .mud-input-slot { text-align: right !important; }
.matrix-flex-1 { flex: 1 !important; }
.matrix-flex-2 { flex: 2 !important; }
.matrix-flex-3 { flex: 3 !important; }

.highlight-input .mud-input-outlined-border { border-width: 2px !important; border-color: #E2E8F0 !important; }
.highlight-input:focus-within .mud-input-outlined-border { border-color: var(--mud-palette-secondary) !important; }

/* old code */
/* .mud-input-control .mud-input-label, .mud-input-control .mud-input, .mud-switch .mud-switch-label, .mud-switch .mud-typography, .mud-checkbox .mud-checkbox-content, .mud-checkbox .mud-typography { font-size: 0.85rem !important; } */
/* old code */
/* .mud-input-control .mud-input-label, .mud-input-control .mud-input, .mud-switch .mud-switch-label, .mud-switch .mud-typography, .mud-checkbox .mud-checkbox-content, .mud-checkbox .mud-typography { font-size: 0.9375rem !important; } */
.mud-input-control .mud-input-label, .mud-input-control .mud-input, .mud-switch .mud-switch-label, .mud-switch .mud-typography, .mud-checkbox .mud-checkbox-content, .mud-checkbox .mud-typography { font-size: 0.875rem !important; /* 14px */ }
.mud-input input,
.mud-input textarea,
.mud-input-slot,
.mud-select .mud-input-slot {
    font-size: 0.875rem !important; /* 14px — input values */
}
.mud-input-label-outlined.mud-input-label-animated { color: #64748B !important; font-weight: 400 !important; opacity: 0.9 !important; }
.mud-input-label-outlined.mud-input-label-animated.mud-disabled { color: #64748B !important; opacity: 1 !important; }
.mud-input-outlined-border.mud-disabled { border-color: #94A3B8 !important; background-color: #F1F5F9 !important; }
/* old code */
/* .mud-input.mud-disabled { color: #000000 !important; -webkit-text-fill-color: #000000 !important; font-weight: 700 !important; } */
.mud-input.mud-disabled { color: #000000 !important; -webkit-text-fill-color: #000000 !important; font-weight: 400 !important; }
.mud-switch .mud-switch-label, .mud-switch .mud-typography, .mud-checkbox .mud-checkbox-content, .mud-checkbox .mud-typography { color: #000000 !important; font-weight: 900 !important; opacity: 1 !important; -webkit-text-fill-color: #000000 !important; }
.mud-switch-primary.mud-checked .mud-switch-track { background-color: color-mix(in srgb, var(--mud-palette-secondary) 40%, transparent) !important; }
.mud-switch-primary.mud-checked .mud-switch-thumb { color: var(--mud-palette-secondary) !important; }
.matrix-flex-grow-1 { flex-grow: 1 !important; }

/* Force multiline textareas like Narration to have a decent minimum height */
.narration-field textarea {
    min-height: 130px !important;
}

/* Layout Specifics */
.matrix-top-bar { background-color: #FFFFFF !important; color: #0F172A !important; border-bottom: 1px solid #E2E8F0 !important; }
.matrix-logo { font-family: var(--matrix-font-display); font-weight: 900; letter-spacing: -1px; color: var(--matrix-text) !important; }
.matrix-logo span { color: var(--mud-palette-secondary); }
.matrix-user-text { line-height: 1.2; text-align: right; }
.matrix-user-name { font-weight: 700; color: #0F172A !important; }
.matrix-user-role { color: #64748B !important; font-size: 0.75rem; }

.matrix-workspace-card { background: #F8FAFC; border-radius: 8px; padding: 8px 12px; border: 1px solid #E2E8F0; }
.matrix-workspace-label { color: #64748B; display: block; margin-bottom: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; }
.matrix-workspace-name { color: #0F172A; font-weight: 700; }

.matrix-page-header { background-color: white; border-bottom: 1px solid #F1F5F9; padding: 12px 24px 8px 24px; }
.matrix-header-icon { background-color: rgba(249, 115, 22, 0.1); padding: 8px; border-radius: 8px; margin-right: 16px; }
.matrix-header-title { font-family: var(--matrix-font-display); font-weight: 800; color: var(--matrix-text); letter-spacing: -0.5px; font-size: 1.15rem; }
.matrix-header-subtitle { color: #64748B; font-weight: 500; }

/* --- MATRIX ENTERPRISE GRID STYLING --- */
.matrix-action-cell {
    font-size: 9pt !important;
    background-color: #ffffff !important;
    z-index: 2;
    border-left: 1px solid #E2E8F0 !important;
}

.matrix-action-cell .mud-icon-root {
    font-size: 1.25rem !important;
}

/* Ensure sticky columns have a solid background and z-index */
.mud-table-cell-sticky {
    background-color: #ffffff !important;
    z-index: 2;
    border-left: 1px solid #E2E8F0 !important;
}

th.mud-table-cell-sticky {
    background-color: #f8fafc !important;
    z-index: 3 !important;
}

.mud-table-cell {
    font-size: 9pt !important;
    padding: 6px 12px !important;
    line-height: 1.1 !important;
}

.mud-table-row {
    height: auto !important;
}

.mud-table-head .mud-table-cell {
    font-weight: 700 !important;
    background-color: #f8fafc !important;
    color: #475569 !important;
    text-transform: uppercase;
}
/* --- END GRID STYLING --- */

/* --- PARTY MASTER LEGACY ALIGNMENT --- */
.matrix-bg-form-header {
    background-color: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 2px;
}

.matrix-bg-yellow .mud-input-outlined-border {
    background-color: #FEF9C3 !important;
    border-color: #FACC15 !important;
    border-width: 2px !important;
}

/* Purchase voucher — landed cost breakdown */
.pv-landed-pane {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    height: 100%;
    background: #F8FAFC;
}
.pv-landed-pane--calc {
    background: #F0F9FF;
    border-color: #BAE6FD;
}
.pv-landed-pane-title {
    display: block;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B !important;
    margin-bottom: 8px !important;
}
.pv-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.78rem;
    color: #475569;
    padding: 2px 0;
}
.pv-cost-row strong {
    font-variant-numeric: tabular-nums;
    color: #0F172A;
    font-weight: 650;
}
.pv-cost-row--sub {
    border-top: 1px dashed #CBD5E1;
    margin-top: 2px;
    padding-top: 4px;
    font-weight: 600;
}
.pv-cost-row--total {
    border-top: 1px solid #7DD3FC;
    margin-top: 4px;
    padding-top: 6px;
    font-weight: 700;
    color: #0C4A6E;
}
.pv-cost-row--total strong {
    color: #0369A1;
}
.pv-cost-row--ratio {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 2px solid #0EA5E9;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0C4A6E;
}
.pv-cost-row--ratio span {
    font-weight: 800;
}
.pv-cost-row--ratio strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0369A1;
    font-variant-numeric: tabular-nums;
}
.pv-cost-formula {
    color: #64748B !important;
    line-height: 1.35 !important;
}

.matrix-code-prefix-box {
    background-color: #FEF08A;
    border: 2px dashed #EAB308;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.matrix-code-prefix-box .mud-typography {
    font-weight: 700 !important;
    color: #854D0E !important;
}

.matrix-field-vertical-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.matrix-field-vertical-stack .stack-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #F1F5F9;
}

.matrix-field-vertical-stack .stack-actions {
    display: flex;
    gap: 2px;
    background-color: #F8FAFC;
    border-radius: 6px;
    padding: 2px;
}

.white-input .mud-input-outlined-border {
    background-color: white !important;
}

.matrix-tabs-legacy .mud-tab {
    text-transform: none !important;
    font-size: 0.8rem !important;
    padding: 0 12px !important;
}


.matrix-tabs-compact .mud-tabs-toolbar {
    height: 40px !important;
    min-height: 40px !important;
}

.matrix-tabs-compact .mud-tab {
    padding: 0 10px !important;
    font-size: 0.75rem !important;
    min-width: unset !important;
    color: #64748B !important; /* Slate color for better visibility than default gray */
}

.matrix-tabs-compact .mud-tab.mud-tab-active {
    color: var(--mud-palette-secondary) !important;
    font-weight: 700 !important;
}

.matrix-tabs-compact .mud-tab-content {
    opacity: 0.8; /* Higher than default */
}

.matrix-tabs-compact .mud-tab-active .mud-tab-content {
    opacity: 1;
}

.matrix-field-vertical-stack-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stack-item-compact {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: white;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #F1F5F9;
}

.matrix-inner-table {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.matrix-inner-table .mud-table-head .mud-table-cell {
    background-color: #F8FAFC !important;
    font-size: 0.75rem !important;
}

.matrix-text-black input, .matrix-text-black .mud-input-slot {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.matrix-text-blue input, .matrix-text-blue .mud-input-slot {
    color: #0984E3 !important;
    -webkit-text-fill-color: #0984E3 !important;
    font-weight: 700 !important;
}

.matrix-drawer-footer { 
    padding: 12px 24px; 
    background-color: white; 
    border-top: 1px solid #E2E8F0; 
    display: flex; 
    gap: 12px; 
    justify-content: flex-end; 
    align-items: center;
}

/* --- MATRIX RECONNECT MODAL PREMIUM STYLING --- */
#components-reconnect-modal {
    border: none;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    outline: none;
}

#components-reconnect-modal::backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(12px) saturate(180%);
}

.matrix-reconnect-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
}

.matrix-reconnect-card {
    background: #FFFFFF;
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border-radius: 32px;
    box-shadow: 0 50px 100px -20px rgba(15, 23, 42, 0.25), 
                0 30px 60px -30px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
    transform: perspective(1000px) rotateX(5deg);
    animation: floatingRecon 6s ease-in-out infinite;
}

@keyframes floatingRecon {
    0%, 100% { transform: perspective(1000px) rotateX(5deg) translateY(0); }
    50% { transform: perspective(1000px) rotateX(2deg) translateY(-10px); }
}

.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.reconnect-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: #0F172A;
    margin: 20px 0 10px 0;
    letter-spacing: -0.5px;
}

.alert-icon-ring {
    width: 80px;
    height: 80px;
    background: #FEF2F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.alert-icon-ring span {
    font-size: 40px;
    color: #EF4444;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.status-badge.alert { background: #FEF2F2; color: #EF4444; }

.reconnect-body {
    margin-bottom: 32px;
}

.info-text { color: #64748B; font-size: 0.95rem; line-height: 1.6; }
.error-text { color: #0F172A; font-weight: 600; font-size: 0.95rem; line-height: 1.5; }
.alert-text { color: #F59E0B; font-weight: 700; }

.retry-timer-box {
    background: #F8FAFC;
    padding: 16px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
}

.retry-timer-box .label { font-size: 0.65rem; font-weight: 800; color: #94A3B8; }
.retry-timer-box .seconds { font-size: 2rem; font-weight: 900; color: var(--matrix-text); font-family: var(--matrix-font-display); }

.reconnect-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.matrix-btn-reconnect {
    background: #0F172A;
    color: white;
    padding: 14px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.matrix-btn-reconnect:hover {
    background: var(--mud-palette-secondary);
    transform: scale(1.02);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
}

.matrix-btn-reload {
    background: #F1F5F9;
    color: #475569;
    padding: 14px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.matrix-btn-reload:hover { background: #E2E8F0; color: #0F172A; }

.matrix-reconnect-footer-note {
    margin-top: 32px;
    font-size: 0.6rem;
    color: #94A3B8;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
/* --- SIDE DIALOG (DRAWER MIMIC) ---
   Pin top+bottom to the browser viewport (not 100vh) so footers never
   extend under the Windows taskbar / below the visible window. */
.mud-dialog-container:has(.matrix-side-dialog),
.mud-dialog-container:has(.matrix-side-dialog-lg),
.mud-dialog-container:has(.matrix-side-dialog-60),
.mud-dialog-container:has(.matrix-side-dialog-wide),
.mud-dialog-container:has(.matrix-side-dialog-max),
.mud-dialog-container:has(.service-task-details-dialog),
.mud-dialog-container:has(.erp-item-line-dialog) {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
}

.matrix-side-dialog {
    margin: 0 !important;
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: 720px !important;
    border-radius: 0 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
    animation: dialogSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.matrix-side-dialog-lg {
    margin: 0 !important;
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: 1024px !important;
    border-radius: 0 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
    animation: dialogSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* ~60% viewport width — timesheet / wider editors (tablet+desktop) */
.matrix-side-dialog-60 {
    margin: 0 !important;
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 60vw !important;
    max-width: 60vw !important;
    min-width: min(100vw, 420px);
    border-radius: 0 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
    animation: dialogSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.matrix-side-dialog-wide {
    margin: 0 !important;
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: min(90vw, 1600px) !important;
    border-radius: 0 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
    animation: dialogSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.matrix-side-dialog-max {
    margin: 0 !important;
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: min(98vw, 1920px) !important;
    border-radius: 0 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
    animation: dialogSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

@keyframes dialogSlideIn {
    0% { transform: translateX(100%); opacity: 0; }
    99% { transform: translateX(0); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

/* Shared orange dialog chrome (same family as MatrixSearchDialogue) */
.matrix-orange-dialog .mud-dialog-title,
.erp-stock-dialog .mud-dialog-title {
    background: #E07B39 !important;
    padding: 8px 12px 8px 14px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
    gap: 8px;
}
.matrix-orange-dialog .mud-dialog-title .mud-typography,
.matrix-orange-dialog .mud-dialog-title .mud-icon-root,
.erp-stock-dialog .mud-dialog-title .mud-typography,
.erp-stock-dialog .mud-dialog-title .mud-icon-root {
    color: #ffffff !important;
}
/* Header X/close: visible white icon, sized & pinned to the right */
.matrix-orange-dialog .mud-dialog-title button,
.erp-stock-dialog .mud-dialog-title button {
    color: #ffffff !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 4px !important;
}
.matrix-orange-dialog .mud-dialog-title button:hover,
.erp-stock-dialog .mud-dialog-title button:hover {
    background: rgba(0, 0, 0, 0.15) !important;
}
.matrix-orange-dialog .mud-dialog-title button .mud-icon-root,
.erp-stock-dialog .mud-dialog-title button .mud-icon-root {
    color: #ffffff !important;
    font-size: 1.25rem !important;
}
.matrix-orange-dialog .mud-dialog-content {
    padding: 12px 16px !important;
    background: #ffffff;
}
.erp-stock-dialog .mud-dialog-content {
    padding: 10px 12px !important;
    background: #ffffff !important;
}
.matrix-orange-dialog .mud-dialog-actions,
.erp-stock-dialog .mud-dialog-actions {
    margin: 0 !important;
    padding: 8px 12px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Shared OK≈Success (dark green + white) / Close≈Error (red + white) dialog actions */
.matrix-btn-ok {
    background-color: var(--matrix-success) !important;
    color: #ffffff !important;
}
.matrix-btn-ok:hover {
    background-color: #166534 !important;
}
.matrix-btn-ok .mud-icon-root,
.matrix-btn-ok .mud-button-label {
    color: #ffffff !important;
}

/* Shared Refresh ≈ user theme accent (Mud Secondary) + white (MudButton / MudIconButton) */
.matrix-btn-refresh {
    background-color: var(--mud-palette-secondary, #F97316) !important;
    color: #ffffff !important;
}
.matrix-btn-refresh:hover {
    filter: brightness(0.92);
}
.matrix-btn-refresh .mud-icon-root,
.matrix-btn-refresh .mud-button-label {
    color: #ffffff !important;
}
/* Shared Close ≈ Error red + white (MudButton / MudIconButton) — mirrors .matrix-btn-refresh */
.matrix-btn-close,
.erp-stock-dialog .erp-stock-close.mud-button-filled {
    background-color: var(--matrix-error, var(--mud-palette-error)) !important;
    color: #ffffff !important;
}
.matrix-btn-close:hover,
.erp-stock-dialog .erp-stock-close.mud-button-filled:hover {
    background-color: #B91C1C !important;
}
.matrix-btn-close .mud-icon-root,
.matrix-btn-close .mud-button-label,
.erp-stock-dialog .erp-stock-close.mud-button-filled .mud-icon-root,
.erp-stock-dialog .erp-stock-close.mud-button-filled .mud-button-label {
    color: #ffffff !important;
}

/* ===== Global action buttons (toolbar + dialogs) — edit colors here only ===== */
/* Named classes only — do not rely on Mud Color.* for final look. Different action = different class. */
.matrix-btn-new,
.matrix-btn-add,
.matrix-btn-edit,
.matrix-btn-save,
.matrix-btn-cancel,
.matrix-btn-delete,
.matrix-btn-print,
.matrix-btn-search,
.matrix-btn-ok,
.matrix-btn-close,
.matrix-btn-refresh {
    text-transform: none !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-radius: var(--matrix-radius-sm, 8px) !important;
}

/* New / Add (blue) — toolbar New, Add Service, Add Task, etc. Prefer .matrix-btn-new; .matrix-btn-add is an alias. */
/* old code */
/* .matrix-btn-new { */
.matrix-btn-new,
.matrix-btn-add {
    background-color: var(--matrix-info) !important;
    color: #ffffff !important;
}
.matrix-btn-new:hover,
.matrix-btn-add:hover { background-color: #1D4ED8 !important; }
.matrix-btn-new .mud-icon-root,
.matrix-btn-new .mud-button-label,
.matrix-btn-add .mud-icon-root,
.matrix-btn-add .mud-button-label { color: #ffffff !important; }

.matrix-btn-edit {
    background-color: var(--mud-palette-secondary, #F97316) !important;
    color: #ffffff !important;
}
.matrix-btn-edit:hover { filter: brightness(0.92); }
.matrix-btn-edit .mud-icon-root,
.matrix-btn-edit .mud-button-label { color: #ffffff !important; }

.matrix-btn-save {
    background-color: var(--matrix-success) !important;
    color: #ffffff !important;
}
.matrix-btn-save:hover { background-color: #166534 !important; }
.matrix-btn-save .mud-icon-root,
.matrix-btn-save .mud-button-label { color: #ffffff !important; }

.matrix-btn-cancel {
    background-color: var(--matrix-warning) !important;
    color: #ffffff !important;
}
.matrix-btn-cancel:hover { background-color: #B45309 !important; }
.matrix-btn-cancel .mud-icon-root,
.matrix-btn-cancel .mud-button-label { color: #ffffff !important; }

.matrix-btn-delete {
    background-color: var(--matrix-error) !important;
    color: #ffffff !important;
}
.matrix-btn-delete:hover { background-color: #B91C1C !important; }
.matrix-btn-delete .mud-icon-root,
.matrix-btn-delete .mud-button-label { color: #ffffff !important; }

.matrix-btn-print {
    background-color: var(--matrix-info) !important;
    color: #ffffff !important;
}
.matrix-btn-print:hover { background-color: #1D4ED8 !important; }
.matrix-btn-print .mud-icon-root,
.matrix-btn-print .mud-button-label { color: #ffffff !important; }

.matrix-btn-search {
    background-color: var(--matrix-info) !important;
    color: #ffffff !important;
}
.matrix-btn-search:hover { background-color: #1D4ED8 !important; }

/* Text / outlined Cancel (dialogs) */
.matrix-btn-cancel-text.mud-button-text,
.matrix-btn-cancel-text {
    color: var(--matrix-text-muted) !important;
}
.matrix-btn-cancel-text:hover {
    background-color: var(--matrix-border-soft) !important;
}

/* Disabled toolbar actions — mute to slate (Delete must not stay vivid red) */
.toolbar-btn.mud-disabled,
.matrix-btn-new.mud-disabled,
.matrix-btn-add.mud-disabled,
.matrix-btn-edit.mud-disabled,
.matrix-btn-save.mud-disabled,
.matrix-btn-delete.mud-disabled,
.matrix-btn-print.mud-disabled,
.toolbar-btn:disabled,
.matrix-btn-new:disabled,
.matrix-btn-add:disabled,
.matrix-btn-edit:disabled,
.matrix-btn-save:disabled,
.matrix-btn-delete:disabled,
.matrix-btn-print:disabled {
    background-color: #CBD5E1 !important;
    border-color: #CBD5E1 !important;
    color: #FFFFFF !important;
    opacity: 0.55 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}
.toolbar-btn.mud-disabled .mud-icon-root,
.toolbar-btn.mud-disabled .mud-button-label,
.matrix-btn-new.mud-disabled .mud-icon-root,
.matrix-btn-new.mud-disabled .mud-button-label,
.matrix-btn-add.mud-disabled .mud-icon-root,
.matrix-btn-add.mud-disabled .mud-button-label,
.matrix-btn-edit.mud-disabled .mud-icon-root,
.matrix-btn-edit.mud-disabled .mud-button-label,
.matrix-btn-save.mud-disabled .mud-icon-root,
.matrix-btn-save.mud-disabled .mud-button-label,
.matrix-btn-delete.mud-disabled .mud-icon-root,
.matrix-btn-delete.mud-disabled .mud-button-label,
.matrix-btn-print.mud-disabled .mud-icon-root,
.matrix-btn-print.mud-disabled .mud-button-label,
.matrix-btn-delete:disabled .mud-icon-root,
.matrix-btn-delete:disabled .mud-button-label {
    color: #FFFFFF !important;
}

/* Default form objects */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--matrix-border) !important;
}
.mud-input:focus-within .mud-input-outlined-border,
.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--matrix-info) !important;
}
.mud-input > input.mud-input-slot,
.mud-input-slot {
    color: var(--matrix-text) !important;
}
/* Form field values / placeholders: normal weight (labels may stay stronger) */
.mud-input input,
.mud-input textarea,
.mud-select .mud-input-slot,
.mud-input-slot,
.mud-input > input.mud-input-slot {
    font-weight: 400 !important;
}
.mud-input input::placeholder,
.mud-input textarea::placeholder,
.mud-input-slot::placeholder {
    font-weight: 400 !important;
}
.mud-input-label,
.mud-input-label.mud-input-label-inputcontrol {
    color: var(--matrix-text-muted) !important;
}

/* Compact Custom Reports Assignment dialog table */
.matrix-report-settings-dialog .matrix-report-assignment-table .mud-table-cell {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.matrix-report-settings-dialog .matrix-report-assignment-table .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.matrix-report-settings-dialog .matrix-report-assignment-table .mud-input-slot {
    min-height: 32px !important;
}
.matrix-soft-table {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px;
    overflow: hidden;
}
.matrix-soft-table table,
.matrix-soft-table .mud-table-root {
    border-collapse: collapse !important;
}
.matrix-soft-table th,
.matrix-soft-table td,
.matrix-soft-table .mud-table-cell {
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}
.matrix-soft-table thead th,
.matrix-soft-table .mud-table-head .mud-table-cell {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 700 !important;
}
.matrix-soft-table tbody tr:hover {
    background: #fff3eb !important;
}

.matrix-side-dialog .mud-dialog-title, .matrix-side-dialog-lg .mud-dialog-title, .matrix-side-dialog-60 .mud-dialog-title, .matrix-side-dialog-wide .mud-dialog-title, .matrix-side-dialog-max .mud-dialog-title {
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    flex-shrink: 0;
}

.matrix-side-dialog .mud-dialog-content, .matrix-side-dialog-lg .mud-dialog-content, .matrix-side-dialog-60 .mud-dialog-content, .matrix-side-dialog-wide .mud-dialog-content, .matrix-side-dialog-max .mud-dialog-content {
    background-color: #F8FAFC;
    padding: 0 !important;
    overflow-y: auto;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.matrix-side-dialog .mud-icon-root, .matrix-side-dialog-lg .mud-icon-root, .matrix-side-dialog-60 .mud-icon-root, .matrix-side-dialog-wide .mud-icon-root, .matrix-side-dialog-max .mud-icon-root {
    margin-right: 8px;
    color: var(--mud-palette-secondary) !important;
}

/* Keep global Close button white icons inside side dialogs (overrides rule above). */
.matrix-side-dialog .matrix-btn-close .mud-icon-root,
.matrix-side-dialog-lg .matrix-btn-close .mud-icon-root,
.matrix-side-dialog-60 .matrix-btn-close .mud-icon-root,
.matrix-side-dialog-wide .matrix-btn-close .mud-icon-root,
.matrix-side-dialog-max .matrix-btn-close .mud-icon-root,
.matrix-side-dialog .matrix-btn-close .mud-button-label,
.matrix-side-dialog-lg .matrix-btn-close .mud-button-label,
.matrix-side-dialog-60 .matrix-btn-close .mud-button-label,
.matrix-side-dialog-wide .matrix-btn-close .mud-button-label,
.matrix-side-dialog-max .matrix-btn-close .mud-button-label {
    color: #ffffff !important;
}

@media (max-width: 1024px) {
    .matrix-side-dialog-60 {
        width: min(85vw, 100%) !important;
        max-width: min(85vw, 100%) !important;
    }
}

@media (max-width: 768px) {
    .matrix-side-dialog,
    .matrix-side-dialog-lg,
    .matrix-side-dialog-60,
    .matrix-side-dialog-wide,
    .matrix-side-dialog-max {
        max-width: 100vw !important;
        width: 100vw !important;
        min-width: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* --- PLAYSTORE APP GRID UI (UNIVERSAL) --- */
.command-menu { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }

.g-app-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    background-color: white !important;
    position: relative;
    border: 1px solid #edf2f7;
}

.g-app-icon .mud-icon-root { font-size: 1.5rem !important; }

.g-create-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #4285F4;
    border-radius: 12px;
    color: white;
    min-width: 22px;
    height: 22px;
    padding: 0 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border: 2px solid white;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    white-space: nowrap;
    z-index: 5;
}

.g-create-badge .mud-icon-root {
    font-size: 14px !important;
}

.g-create-badge-text {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-right: 2px;
    max-width: 0;
    opacity: 0;
    transition: all 0.2s ease;
}

.g-create-badge:hover {
    background: #3367d6;
    padding: 0 6px;
    right: -16px;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.g-create-badge:hover .g-create-badge-text {
    max-width: 40px;
    opacity: 1;
    margin-left: 2px;
}

.g-app-label {
    margin-top: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.2;
}

.app-card { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s ease; position: relative; width: 80px; }
.app-card.live:hover { transform: scale(1.05) translateY(-4px); }
.app-card.pending { opacity: 0.6; filter: grayscale(0.8); cursor: not-allowed; }

.g-color-blue { color: #4285F4 !important; }
.g-color-indigo { color: #5c6bc0 !important; }
.g-color-green { color: #34A853 !important; }
.g-color-orange { color: #FBBC05 !important; }
.g-color-teal { color: #26a69a !important; }
.g-color-purple { color: #ab47bc !important; }
.g-color-cyan { color: #00acc1 !important; }
.g-color-red { color: #EA4335 !important; }
.g-color-gray { color: #9e9e9e !important; }

/* --- MOBILE & TABLET DESIGN SYSTEM RESPONSIVENESS OVERRIDES --- */
@media (max-width: 959.98px) {
    /* 1. Dashboard Grid Reordering: Put command directory at the top for immediate access */
    .sales-pro-dashboard .mud-grid {
        display: flex;
        flex-direction: column;
    }
    
    .sales-pro-dashboard .mud-grid > .mud-grid-item {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
    
    .sales-pro-dashboard .mud-grid > .mud-grid-item:last-child {
        order: -1; /* Move Command Center / Directory to top */
        margin-bottom: 8px;
    }

    /* 2. Command Center & Menu App Grid Optimization */
    .command-center {
        background: #FFFFFF !important;
        border-radius: 20px !important;
        padding: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
        border: 1px solid #E2E8F0 !important;
    }

    .command-menu {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 8px !important;
        padding: 4px 0 !important;
    }
    
    .command-sub-group-title, .app-grid {
        grid-column: 1 / -1 !important;
    }

    .command-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        position: relative !important;
        height: 76px !important;
        padding: 8px !important;
        margin-bottom: 0 !important;
        transition: all 0.2s ease !important;
    }

    .command-item:hover {
        background: color-mix(in srgb, var(--mud-palette-secondary) 5%, transparent) !important;
        border-color: var(--mud-palette-secondary) !important;
    }

    .command-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        color: #334155 !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        gap: 4px !important;
        line-height: 1.2 !important;
    }

    .command-link:hover {
        color: var(--mud-palette-secondary) !important;
        transform: none !important;
    }

    .command-link i, .command-link .mud-icon-root {
        margin-right: 0 !important;
        font-size: 1.35rem !important;
        color: #64748B !important;
        transition: color 0.2s ease !important;
    }

    .command-item:hover .command-link .mud-icon-root {
        color: var(--mud-palette-secondary) !important;
    }

    /* Floating "+ NEW" micro action pill in the upper-right corner */
    .command-new-link {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        font-size: 0.6rem !important;
        font-weight: 800 !important;
        color: var(--mud-palette-secondary) !important;
        background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent) !important;
        padding: 2px 5px !important;
        border-radius: 6px !important;
        margin-right: 0 !important;
        transition: all 0.2s ease !important;
        letter-spacing: 0.5px !important;
        line-height: 1 !important;
    }
    
    .command-new-link:hover {
        background: var(--mud-palette-secondary) !important;
        color: white !important;
        transform: scale(1.05) !important;
    }
    
    .command-section-break {
        display: none !important;
    }

    /* Reports block spanning full width at the bottom of the grid */
    .command-link.report {
        grid-column: 1 / -1 !important;
        margin-top: 8px !important;
        height: 40px !important;
        flex-direction: row !important;
        justify-content: center !important;
        background: var(--mud-palette-secondary) !important;
        color: #FFFFFF !important;
        border-radius: 10px !important;
        gap: 8px !important;
    }
    
    .command-link.report .mud-icon-root {
        color: #FFFFFF !important;
        margin-right: 0 !important;
        font-size: 1.15rem !important;
    }
    
    /* Executive Stats Grid spacing */
    .sales-pro-dashboard .stat-row {
        margin-bottom: 12px !important;
    }
    
    .glass-stat {
        padding: 14px !important;
        border-radius: 16px !important;
        gap: 10px !important;
    }
    
    .glass-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }
    
    .glass-icon .mud-icon-root {
        font-size: 1.15rem !important;
    }
    
    .l-val {
        font-size: 1.25rem !important;
    }
    
    .pro-main-card {
        padding: 16px !important;
        border-radius: 20px !important;
        min-height: 300px !important;
    }
    
    .card-header-pro {
        margin-bottom: 16px !important;
    }
    
    .chart-canvas {
        height: 200px !important;
    }
}

/* --- DIRECTORY SCROLLBARS & HEADERS --- */
@media (min-width: 960px) {
    .command-menu {
        max-height: calc(100vh - 280px);
        overflow-y: auto;
        padding-right: 6px;
    }
}

.command-sub-group-title {
    color: var(--mud-palette-secondary);
    font-weight: 800;
    font-size: 0.725rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 16px;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid var(--mud-palette-secondary);
    width: 100%; /* Ensure title forces a break to a new row */
}

/* Make app-grid a flex container so cards wrap correctly inside it */
.app-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

/* --- COMPACT DIRECTORY OVERRIDES FOR DESKTOP --- */
@media (min-width: 960px) {
    .command-center {
        background: #FFFFFF !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important;
        border: 1px solid #E2E8F0 !important;
    }

    .command-title {
        color: #0F172A !important;
        font-weight: 800 !important;
        font-size: 0.75rem !important;
        letter-spacing: 1.5px !important;
    }

    .command-divider {
        height: 2px !important;
        background: var(--mud-palette-secondary) !important;
        margin-top: 4px !important;
        width: 30px !important;
    }

    .command-menu {
        max-height: calc(100vh - 350px) !important;
        overflow-y: auto !important;
        padding-right: 2px !important;
    }

    .command-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 2px !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }

    .command-item:hover {
        background: color-mix(in srgb, var(--mud-palette-secondary) 5%, transparent) !important;
    }

    .command-link {
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        color: #475569 !important;
        text-decoration: none !important;
        flex-grow: 1 !important;
        font-weight: 600 !important;
        font-size: 0.825rem !important;
        transition: all 0.2s ease !important;
    }

    .command-link:hover {
        color: var(--mud-palette-secondary) !important;
        transform: translateX(3px) !important;
    }

    .command-link .mud-icon-root {
        margin-right: 10px !important;
        font-size: 1.1rem !important;
        color: #64748B !important;
    }

    .command-link:hover .mud-icon-root {
        color: var(--mud-palette-secondary) !important;
    }

    .command-new-link {
        font-size: 0.6rem !important;
        font-weight: 800 !important;
        color: var(--mud-palette-secondary) !important;
        background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent) !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        margin-right: 6px !important;
        letter-spacing: 0.5px !important;
    }

    .command-new-link:hover {
        background: var(--mud-palette-secondary) !important;
        color: #FFFFFF !important;
        transform: scale(1.05) !important;
    }

    .command-sub-group-title {
        color: var(--mud-palette-secondary) !important;
        font-weight: 800 !important;
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        margin-top: 12px !important;
        margin-bottom: 6px !important;
        padding-left: 6px !important;
        border-left: 2px solid var(--mud-palette-secondary) !important;
    }

    .dashboard-command-search {
        background-color: #F8FAFC !important;
        border-radius: 8px !important;
    }
    
    .dashboard-command-search .mud-input-outlined-border {
        border-color: #E2E8F0 !important;
    }
    
    .dashboard-command-search:focus-within .mud-input-outlined-border {
        border-color: var(--mud-palette-secondary) !important;
    }
}

/* 
 * Global PlayStore Dashboard App Grid UI 
 * Variables are defined in :root above to easily scale sizes globally.
 */
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--app-card-size), 1fr));
    gap: 16px;
    margin-top: 12px;
}

.app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.app-card.pending {
    opacity: 0.6;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.app-card.pending:hover {
    opacity: 0.9;
    filter: grayscale(0.2);
    transform: none;
}

.app-card.live:hover {
    transform: scale(1.05) translateY(-4px);
}

.app-icon {
    width: var(--app-icon-size);
    height: var(--app-icon-size);
    border-radius: var(--app-icon-border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: white;
    position: relative;
}

.app-label {
    margin-top: 8px;
    font-size: var(--app-label-size);
    font-weight: 700;
    color: #4a5568;
    text-align: center;
    line-height: 1.2;
}

.live-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: white;
    border-radius: 50%;
    color: #38a169;
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.create-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: #5a67d8;
    border-radius: 50%;
    color: white;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 2px solid white;
    transition: all 0.2s ease;
    cursor: pointer;
}

.create-badge:hover {
    transform: scale(1.15);
    background: #434190;
}

/* Common App Icon Colors */
.app-color-blue { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); }
.app-color-indigo { background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%); }
.app-color-green { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); }
.app-color-orange { background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); }
.app-color-teal { background: linear-gradient(135deg, #38b2ac 0%, #319795 100%); }
    }

    .command-divider {
        height: 2px !important;
        background: var(--mud-palette-secondary) !important;
        margin-top: 4px !important;
        width: 30px !important;
    }

    .command-menu {
        max-height: calc(100vh - 350px) !important;
        overflow-y: auto !important;
        padding-right: 2px !important;
    }

    .command-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 2px !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }

    .command-item:hover {
        background: color-mix(in srgb, var(--mud-palette-secondary) 5%, transparent) !important;
    }

    .command-link {
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        color: #475569 !important;
        text-decoration: none !important;
        flex-grow: 1 !important;
        font-weight: 600 !important;
        font-size: 0.825rem !important;
        transition: all 0.2s ease !important;
    }

    .command-link:hover {
        color: var(--mud-palette-secondary) !important;
        transform: translateX(3px) !important;
    }

    .command-link .mud-icon-root {
        margin-right: 10px !important;
        font-size: 1.1rem !important;
        color: #64748B !important;
    }

    .command-link:hover .mud-icon-root {
        color: var(--mud-palette-secondary) !important;
    }

    .command-new-link {
        font-size: 0.6rem !important;
        font-weight: 800 !important;
        color: var(--mud-palette-secondary) !important;
        background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent) !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        margin-right: 6px !important;
        letter-spacing: 0.5px !important;
    }

    .command-new-link:hover {
        background: var(--mud-palette-secondary) !important;
        color: #FFFFFF !important;
        transform: scale(1.05) !important;
    }

    .command-sub-group-title {
        color: var(--mud-palette-secondary) !important;
        font-weight: 800 !important;
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        margin-top: 12px !important;
        margin-bottom: 6px !important;
        padding-left: 6px !important;
        border-left: 2px solid var(--mud-palette-secondary) !important;
    }

    .dashboard-command-search {
        background-color: #F8FAFC !important;
        border-radius: 8px !important;
    }
    
    .dashboard-command-search .mud-input-outlined-border {
        border-color: #E2E8F0 !important;
    }
    
    .dashboard-command-search:focus-within .mud-input-outlined-border {
        border-color: var(--mud-palette-secondary) !important;
    }
}

/* 
 * Global PlayStore Dashboard App Grid UI 
 * Variables are defined in :root above to easily scale sizes globally.
 */
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--app-card-size), 1fr));
    gap: 16px;
    margin-top: 12px;
}

.app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.app-card.pending {
    opacity: 0.6;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.app-card.pending:hover {
    opacity: 0.9;
    filter: grayscale(0.2);
    transform: none;
}

.app-card.live:hover {
    transform: scale(1.05) translateY(-4px);
}

.app-icon {
    width: var(--app-icon-size);
    height: var(--app-icon-size);
    border-radius: var(--app-icon-border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: white;
    position: relative;
}

.app-label {
    margin-top: 8px;
    font-size: var(--app-label-size);
    font-weight: 700;
    color: #4a5568;
    text-align: center;
    line-height: 1.2;
}

.live-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: white;
    border-radius: 50%;
    color: #38a169;
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.create-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: #5a67d8;
    border-radius: 50%;
    color: white;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 2px solid white;
    transition: all 0.2s ease;
    cursor: pointer;
}

.create-badge:hover {
    transform: scale(1.15);
    background: #434190;
}

/* Common App Icon Colors */
.app-color-blue { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); }
.app-color-indigo { background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%); }
.app-color-green { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); }
.app-color-orange { background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); }
.app-color-teal { background: linear-gradient(135deg, #38b2ac 0%, #319795 100%); }
.app-color-purple { background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%); }
.app-color-cyan { background: linear-gradient(135deg, #0bc5ea 0%, #00b5d8 100%); }
.app-color-red { background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); }
.app-color-gray { background: #e2e8f0; color: #a0aec0 !important; }

/* Apply primary (dynamic theme color) to focused text fields */
.mud-input-outlined.mud-input-focus .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}

.mud-input-control.mud-input-control-focused .mud-input-label {
    color: var(--mud-palette-primary) !important;
}

/* Apply primary (dynamic theme color) to ALL focused text fields (Underline, Outlined, Filled) */
.mud-input-underline:after {
    border-bottom-color: var(--mud-palette-primary) !important;
}

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

.mud-input-filled.mud-input-focus {
    border-bottom-color: var(--mud-palette-primary) !important;
}

/* For the label text when focused */
.mud-input-control.mud-input-control-focused .mud-input-label {
    color: var(--mud-palette-primary) !important;
}

/* Also for checkboxes, radios, and switches if needed */
.mud-checkbox-checked .mud-icon-root, 
.mud-radio-checked .mud-icon-root {
    color: var(--mud-palette-secondary) !important;
}

/* ========================================= */
/* REACT PROTOTYPE AESTHETIC OVERRIDES (2026+) */
/* ========================================= */

/* 1. Global MudPaper (Cards) - Softer corners, subtle floating shadows */
.mud-paper {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    border: 1px solid #f1f5f9 !important;
}

/* 2. Global Background Contrast for Cards + gutter beside navbar */
.mud-main-content,
.mud-main-content.matrix-main-content {
    /* old code */
    /* background-color: #EEF2F6 !important; */
    /* Class="pa-0" was wiping side padding after Mud CSS load */
    background-color: var(--matrix-bg) !important;
    padding-left: var(--matrix-content-gutter, 16px) !important;
    padding-right: var(--matrix-content-gutter, 16px) !important;
}

.mud-layout {
    background-color: var(--matrix-bg) !important;
}

/* 3. Global Section Headers - prefer .matrix-section-title (source of truth).
   Softened leftover for legacy subtitle2.uppercase captions not yet migrated. */
/* old code */
/* .mud-card .mud-typography-subtitle2.uppercase {
    border-left: 4px solid var(--mud-palette-secondary) !important;
    padding-left: 8px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.5px !important;
} */
.mud-card .mud-typography-subtitle2.uppercase:not(.matrix-section-title) {
    border-left: 4px solid var(--mud-palette-secondary);
    padding-left: 8px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.5px;
}

/* ========================================= */
/* ULTIMATE INPUT NORMALIZER (REACT STYLE)   */
/* ========================================= */

/* 1. Strip ALL native MudBlazor decorations */
.mud-input-underline::before, 
.mud-input-underline::after {
    display: none !important;
}
.mud-input-outlined-border {
    border: none !important;
}
.mud-input-outlined-border legend {
    display: none !important;
}

/* 2. Unify the box for ALL input variants */
.mud-input-control .mud-input {
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    margin-top: 18px !important; /* Create empty space at the top for the label */
    padding: 0 !important; /* Kill native MudBlazor padding */
    transition: all 0.2s ease-in-out !important;
}

/* Force strict compact height on single-line inputs */
.mud-input-control .mud-input:not(.mud-input-multiline) {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
}

/* Allow multiline inputs (textareas) to expand naturally */
.mud-input-control .mud-input.mud-input-multiline {
    min-height: 60px !important;
}

.mud-input-control .mud-input:focus-within {
    background-color: #ffffff !important;
    border-color: var(--mud-palette-secondary) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-secondary) !important;
}

/* 3. Normalize internal padding so text doesn't touch the borders */
.mud-input-control .mud-input-slot {
    padding: 0 10px !important;
    font-weight: 400 !important;
}

.mud-input-control .mud-input:not(.mud-input-multiline) .mud-input-slot {
    height: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
}

.mud-input-control .mud-input.mud-input-multiline .mud-input-slot {
    padding: 8px 10px !important;
    line-height: 1.4 !important;
}

/* 4. Force ALL labels to be static, external, and bold */
.mud-input-control .mud-input-label {
    transform: none !important; /* Kill MudBlazor floating animations */
    top: -2px !important;
    left: 0 !important;
    position: absolute !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 16px !important;
    pointer-events: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Highlight label on focus */
.mud-input-control:focus-within .mud-input-label {
    color: var(--mud-palette-secondary) !important;
}

/* Make grid headers bolder like the prototype */
.mud-table-head .mud-table-cell {
    font-weight: 700 !important;
    background-color: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}


.min-4-lines {
    min-height: calc(4 * 1.5em) !important;
    resize: vertical;
}

textarea.min-4-lines {
    min-height: 6rem !important;
    resize: vertical;
}
/* General Utility Classes extracted from Razor components */
.sap-modern-container {
    background: #F8FAFC;
    min-height: 100vh;
}
.sap-doc-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-orange-50 {
    background-color: #FFF7ED;
}
.erp-details-tabs .mud-tab {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 8.5pt;
    letter-spacing: 0.5px;
}
.font-bold {
    font-weight: 700 !important;
}
.font-black {
    font-weight: 900 !important;
}

/* ===== Purchase dashboard gadgets ===== */
.pd-gadget {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 48%, #ffffff 100%);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 12px 28px -14px rgba(15, 23, 42, 0.22),
        0 2px 6px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pd-gadget:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 16px 32px -14px rgba(15, 23, 42, 0.26),
        0 3px 8px rgba(15, 23, 42, 0.06);
}
.pd-gadget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    border-bottom: 1px solid #F1F5F9;
}
.pd-gadget-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(15,23,42,.08);
}
.pd-icon-blue { background: #EFF6FF; color: #2563EB; }
.pd-icon-orange { background: #FFF7ED; color: #EA580C; }
.pd-icon-teal { background: #F0FDFA; color: #0F766E; }
.pd-sub { color: #94A3B8 !important; display: block; margin-top: 2px; }
.pd-gadget-body { flex: 1; }
.pd-list-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow: auto; }
.pd-list-item {
    padding: 12px; border-radius: 12px; background: #F8FAFC;
    border: 1px solid #E2E8F0; box-shadow: 0 4px 10px rgba(148,163,184,.08);
}
.pd-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 36px 16px; color: #94A3B8; text-align: center;
}
.pd-empty-icon { font-size: 2rem !important; opacity: .5; }
.pd-table .mud-table-cell { font-size: 0.8125rem; color: #334155; border-bottom: 1px solid #F1F5F9 !important; }
.pd-table .mud-table-head .mud-table-cell {
    font-size: 0.68rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    color: #64748B !important; background: #F8FAFC !important;
}
.pd-chip {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; border: 1px solid transparent;
}
.pd-chip.ok { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.pd-chip.warn { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.pd-chip.bad { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
.pd-chip.neutral { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.pd-chip.pending-pr { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.pd-chip.pending-po { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.pd-chip.pending-grn { background: #F0FDFA; color: #0F766E; border-color: #99F6E4; }
.pd-reorder-item .pd-reorder-rol {
    display: block;
    color: #64748B;
    margin: 2px 0 6px;
}
.pd-reorder-item .pd-reorder-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    min-width: 0;
}
.pd-reorder-item .pd-reorder-footer {
    min-width: 0;
    gap: 8px;
}
.pd-reorder-item .pd-reorder-last {
    color: #64748B !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-reorder-item .pd-reorder-action {
    flex-shrink: 0;
}
.pd-reserved {
    min-height: 280px; border: 1px dashed #CBD5E1; border-radius: 16px;
    background: linear-gradient(145deg, #F8FAFC 0%, #EEF2FF 55%, #F0FDFA 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    display: flex; flex-direction: column; padding: 16px;
}
.pd-reserved-title { font-weight: 800; color: #0F172A; margin-bottom: 4px; }
.pd-reserved-cap { color: #64748B; font-size: 0.85rem; max-width: 42ch; }
.pd-reserved-badge {
    align-self: flex-start; margin-top: auto; margin-bottom: 0;
    font-size: 0.68rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: #6366F1; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2);
    padding: 4px 10px; border-radius: 999px;
}
/* Compact purchase pipeline lists */
.pd-list-body.pd-compact { gap: 6px; padding: 8px; max-height: 360px; }
.pd-list-item.pd-compact-row { padding: 8px 10px; border-radius: 10px; }
.pd-pipeline-panels { display: flex; flex-direction: column; gap: 6px; }
.pd-pipeline-panels .mud-expand-panel { border: 1px solid #E2E8F0 !important; border-radius: 12px !important; background: #F8FAFC; margin: 0 !important; }
.pd-pipeline-panels .mud-expand-panel .mud-expand-panel-header { min-height: 48px; padding: 8px 12px !important; }
.pd-pipeline-panels .mud-expand-panel .mud-expand-panel-content { padding: 0 8px 8px !important; }
.pd-pipeline-title { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; }
.pd-pipeline-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 4px 8px;
}
.pd-pipeline-search {
    flex: 1 1 200px;
    max-width: 320px;
    min-width: 160px;
}
.pd-rows-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}
.pd-rows-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748B;
    white-space: nowrap;
}
.pd-rowcount {
    width: 88px !important;
    min-width: 88px;
    max-width: 100px;
}
.pd-rowcount .mud-input-control,
.pd-rowcount .mud-select {
    width: 88px !important;
    min-width: 88px;
}
.pd-table-compact .mud-table-cell { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 0.78rem !important; }
.pd-dense-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow: auto; padding: 0 2px; }
.pd-dense-row {
    display: grid; grid-template-columns: 72px minmax(0,1fr) 72px auto auto;
    gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px;
    background: #fff; border: 1px solid #E2E8F0;
}
.pd-dense-id { white-space: nowrap; }
.pd-dense-main { color: #0F172A; font-weight: 600; font-size: 0.8rem; min-width: 0; }
.pd-dense-meta { color: #64748B; font-size: 0.72rem; white-space: nowrap; }
.pd-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* MatrixDataTableDialog — docked right panel + toolbar */
.mud-dialog.matrix-data-dialog-dock {
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: min(520px, 96vw) !important;
    max-width: min(520px, 96vw) !important;
}
.mud-dialog.matrix-data-dialog-dock .mud-dialog-content {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 10px !important;
}
.matrix-data-dialog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.matrix-data-dialog-search { flex: 1 1 180px; max-width: 320px; }
.matrix-data-dialog-body {
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 200px;
    height: calc(100vh - 210px);
}

.matrix-data-dialog-title-close { color: #fff !important; opacity: .9; }
.matrix-data-dialog-title-close:hover { opacity: 1; background: rgba(255,255,255,.15) !important; }

/* ── Shared status chips (dashboards / pipelines) ── */
.pd-chip.overdue,
.matrix-chip-overdue {
    background: #FFFBEB;
    color: #A16207;
    border-color: #FDE68A;
}
.pd-chip.not-approved,
.matrix-chip-not-approved {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
}
.pd-chip.approved,
.matrix-chip-approved {
    background: #ECFDF5;
    color: #047857;
    border-color: #A7F3D0;
}

.matrix-data-dialog-title-text { font-weight:700; font-size:0.85rem; color:#fff; letter-spacing:0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.matrix-data-dialog-row:hover { background:#F8FAFC; }

/* ── My Profile (compact / mobile, 2-panel) ── */
.mx-profile-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    padding: 8px 10px 6px;
    -webkit-overflow-scrolling: touch;
}
.mx-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 12px;
    align-items: start;
}
.mx-profile-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.mx-profile-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.mx-profile-side-card {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    padding: 10px;
}
.mx-profile-section { min-width: 0; }
.mx-profile-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 6px;
}
.mx-profile-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding-top: 2px;
}
.mx-profile-sig-preview {
    width: 100%;
    height: 72px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mx-profile-sig-preview img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.mx-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #E2E8F0;
    background: #F8FAFC;
    width: 100%;
}

/* ── Shared camera capture ── */
.matrix-camera-preview {
    max-width: 100%;
    border-radius: 8px;
    border: 2px solid #E2E8F0;
    padding: 2px;
    margin: 0 auto 6px;
    overflow: hidden;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
}
.matrix-camera-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.matrix-camera-avatar {
    width: 100% !important;
    height: 100% !important;
    font-size: 1.6rem !important;
    border-radius: 4px !important;
}
.matrix-media-btn {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, #CBD5E1) !important;
    color: var(--mud-palette-primary) !important;
    text-transform: none !important;
    font-weight: 700 !important;
}
.matrix-camera-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: rgba(15, 23, 42, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.matrix-camera-sheet {
    width: min(520px, 100%);
    border-radius: 12px !important;
    background: #fff !important;
}
.matrix-camera-viewport {
    position: relative;
    width: 100%;
    background: #0f172a;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    max-height: 55vh;
}
.matrix-camera-viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.matrix-camera-viewport video.matrix-camera-mirror {
    transform: scaleX(-1);
}
.matrix-camera-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Document Manager: Files | Camera ── */
.dcm-source-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.dcm-dialog-body {
    min-width: 0;
    width: 100%;
    max-height: min(78vh, 720px);
    overflow: auto;
}
.mx-photo-session {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    height: 100%;
}
.mx-photo-top,
.mx-photo-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.mx-photo-title {
    font-weight: 750 !important;
    color: #334155 !important;
    text-align: left;
    min-width: 0;
}
.mx-photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.mx-photo-btn {
    min-height: 40px !important;
    min-width: 0 !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
    box-shadow: none !important;
}
.mx-btn-back {
    background: #EEF2F7 !important;
    color: #475569 !important;
}
.mx-btn-back .mud-icon-root { color: #64748B !important; }
.mx-btn-shutter {
    background: color-mix(in srgb, var(--mud-palette-secondary) 82%, #ffffff) !important;
    color: #fff !important;
}
.mx-btn-shutter .mud-icon-root { color: #fff !important; }
.mx-btn-send {
    background: #D1FAE5 !important;
    color: #047857 !important;
}
.mx-btn-send .mud-icon-root { color: #059669 !important; }
.mx-btn-send.mud-disabled, .mx-btn-send:disabled {
    background: #F1F5F9 !important;
    color: #94A3B8 !important;
}
.mx-photo-hint { min-width: 0; color: #64748B !important; }
.mx-photo-idle-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    max-height: 22vh;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-secondary) 40%, #cbd5e1);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-secondary) 8%, #f8fafc);
    cursor: pointer;
    padding: 12px;
}
.mx-photo-idle-hero:hover {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, #ffffff);
    border-color: var(--mud-palette-secondary);
}
.mx-shot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
    overflow: auto;
    padding-bottom: 8px;
}
.mx-shot-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);
}
.mx-shot-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    cursor: pointer;
    background: color-mix(in srgb, var(--mud-palette-secondary) 6%, #f8fafc);
}
.mx-shot-actions {
    display: flex;
    justify-content: space-around;
    padding: 2px 4px;
    background: color-mix(in srgb, var(--mud-palette-secondary) 8%, var(--mud-palette-surface));
}
.mx-file-picker-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
    opacity: 0;
}

.dcm-explorer.mud-dialog,
.mx-photo-dialog.mud-dialog {
    width: min(960px, 96vw);
    max-width: 96vw !important;
    overflow: hidden;
}
.dcm-explorer.mud-dialog::before,
.mx-photo-dialog.mud-dialog::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--mud-palette-secondary) 0%,
        color-mix(in srgb, var(--mud-palette-secondary) 55%, #ffffff) 100%);
}
.dcm-explorer .mud-dialog-title,
.mx-photo-dialog .mud-dialog-title {
    color: var(--mud-palette-secondary) !important;
}
.dcm-explorer .mud-dialog-content {
    padding: 8px 12px !important;
}
.dcm-shell { min-width: 0; }
.dcm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.dcm-touch {
    min-height: 44px !important;
    text-transform: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
/* User theme (Secondary) — Primary in this app is navy/black */
.dcm-explorer .mud-button-filled,
.mx-photo-dialog .mud-button-filled,
.mx-photo-session .mud-button-filled {
    background-color: var(--mud-palette-secondary) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--mud-palette-secondary) 28%, transparent) !important;
}
.dcm-explorer .mud-button-filled:hover,
.mx-photo-dialog .mud-button-filled:hover,
.mx-photo-session .mud-button-filled:hover {
    filter: brightness(1.06);
}
.dcm-explorer .mud-button-outlined,
.mx-photo-dialog .mud-button-outlined,
.mx-photo-session .mud-button-outlined {
    color: var(--mud-palette-secondary) !important;
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 55%, #CBD5E1) !important;
    background: color-mix(in srgb, var(--mud-palette-secondary) 8%, #ffffff) !important;
}
.dcm-explorer .mud-button-outlined.mud-button-outlined-error {
    color: var(--mud-palette-error) !important;
    border-color: color-mix(in srgb, var(--mud-palette-error) 45%, #CBD5E1) !important;
    background: color-mix(in srgb, var(--mud-palette-error) 8%, #ffffff) !important;
}
.dcm-explorer .mud-icon-button,
.mx-photo-session .mud-icon-button {
    color: var(--mud-palette-secondary) !important;
}
.dcm-explorer .mud-dialog-close-button {
    color: var(--mud-palette-secondary) !important;
}
.dcm-breadcrumb {
    font-size: 0.78rem;
    color: var(--mud-palette-secondary);
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcm-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 10px;
    min-height: 360px;
    max-height: min(62vh, 560px);
}
.dcm-body.is-phone {
    grid-template-columns: 1fr;
    max-height: min(70vh, 640px);
}
.dcm-folders, .dcm-folder-sheet {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: auto;
    padding: 6px;
}
.dcm-folder-list { display: flex; flex-direction: column; gap: 2px; }
.dcm-folder {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 0 10px;
    text-align: left;
    color: #475569;
    cursor: pointer;
    font-size: 0.85rem;
}
.dcm-folder.is-child { padding-left: 28px; font-size: 0.8rem; }
.dcm-folder.is-active {
    background: color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent);
    color: var(--mud-palette-secondary);
    font-weight: 700;
}
.dcm-files {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: auto;
    background: var(--mud-palette-surface);
}
.dcm-empty {
    padding: 32px 12px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}
.dcm-file {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
}
.dcm-file.is-selected {
    background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);
}
.dcm-file-meta { min-width: 0; flex: 1; }
.dcm-file-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcm-file-sub { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }
.dcm-rename-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
}
.dcm-folder-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
}
.dcm-folder-sheet {
    width: min(280px, 86vw);
    height: 100%;
    background: var(--mud-palette-surface);
    padding: 12px;
    overflow: auto;
}

@media (max-width: 960px) {
    .mud-dialog-container:has(.dcm-explorer),
    .mud-dialog-container:has(.mx-photo-dialog) {
        top: var(--matrix-chrome-offset, 112px) !important;
        height: calc(100dvh - var(--matrix-chrome-offset, 112px)) !important;
        max-height: calc(100dvh - var(--matrix-chrome-offset, 112px)) !important;
        align-items: stretch !important;
        padding: 8px !important;
        box-sizing: border-box;
    }
    .dcm-explorer.mud-dialog,
    .mx-photo-dialog.mud-dialog {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        box-sizing: border-box;
    }
    .dcm-explorer .mud-dialog-title,
    .mx-photo-dialog .mud-dialog-title {
        padding: 8px 10px !important;
    }
    .dcm-explorer .mud-dialog-content,
    .mx-photo-dialog .mud-dialog-content {
        overflow: auto !important;
        max-height: none !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .dcm-cmdbar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .dcm-cmd { min-width: 52px; height: 48px; }
    .mx-photo-actions { width: 100%; }
    .mx-photo-hint { display: none; }
    .mx-shot-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .dcm-cam-viewport, .dcm-crop-stage, .dcm-crop-stage img { max-height: 36vh; }
}
.dcm-cam-viewport {
    position: relative;
    width: 100%;
    background: #0f172a;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-height: 42vh;
}
.dcm-cam-viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dcm-crop-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 42vh;
    user-select: none;
    touch-action: none;
    line-height: 0;
}
.dcm-crop-stage img {
    max-width: 100%;
    max-height: 42vh;
    display: block;
    border-radius: 6px;
}
.mx-crop-box {
    position: absolute;
    border: 2px solid #E07B39;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.35);
    cursor: move;
    box-sizing: border-box;
}
.mx-crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #E07B39;
    border-radius: 2px;
    z-index: 2;
}
.mx-crop-handle-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.mx-crop-handle-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.mx-crop-handle-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.mx-crop-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* ── AI document scan (drop zone + dialog) ── */
.matrix-ai-document-scan {
    --mx-ai-accent: var(--mud-palette-secondary, #F97316);
    --mx-ai-accent-soft: color-mix(in srgb, var(--mx-ai-accent) 10%, #ffffff);
    --mx-ai-accent-mid: color-mix(in srgb, var(--mx-ai-accent) 22%, #ffffff);
    --mx-ai-border: color-mix(in srgb, var(--mx-ai-accent) 45%, #CBD5E1);
}

.mx-ai-scan-desc {
    color: #64748b !important;
}

.mx-ai-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 12px 10px;
    border-radius: 10px;
    border: 2px dashed var(--mx-ai-border);
    background:
        linear-gradient(180deg, var(--mx-ai-accent-soft) 0%, #ffffff 72%);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    min-height: 96px;
}

.mx-ai-dropzone--compact {
    min-height: 88px;
    max-width: 520px;
}

.mx-ai-dropzone.is-dragover {
    border-color: var(--mx-ai-accent);
    border-style: solid;
    background: var(--mx-ai-accent-mid);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-ai-accent) 18%, transparent);
}

.mx-ai-dropzone.has-file {
    border-style: solid;
    border-color: color-mix(in srgb, var(--mx-ai-accent) 35%, #E2E8F0);
    background: #fff;
}

.mx-ai-dropzone.is-busy {
    opacity: 0.72;
    pointer-events: none;
}

.mx-ai-dropzone-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 2px 6px;
    pointer-events: none;
}

.mx-ai-dropzone-idle--compact {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    text-align: left;
    padding: 2px 4px;
}

.mx-ai-dropzone-idle-icon {
    color: var(--mx-ai-accent) !important;
    font-size: 1.5rem !important;
}

.mx-ai-dropzone-chip {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    color: var(--mx-ai-accent);
    background: color-mix(in srgb, var(--mx-ai-accent) 14%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mx-ai-accent) 28%, transparent);
}

.mx-ai-dropzone-title {
    font-weight: 600 !important;
    color: #0f172a !important;
    font-size: 0.8rem !important;
}

.mx-ai-dropzone-hint {
    color: #64748b !important;
    font-size: 0.7rem !important;
}

.mx-ai-dropzone-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px;
    min-width: 0;
}

.mx-ai-dropzone-preview--compact {
    gap: 8px;
}

.mx-ai-dropzone-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--mx-ai-accent) 8%, #F8FAFC);
    border: 1px solid color-mix(in srgb, var(--mx-ai-accent) 22%, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mx-ai-dropzone-thumb--sm {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
}

.mx-ai-dropzone-thumb--xs {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.mx-ai-dropzone-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mx-ai-dropzone-pdf-icon {
    color: var(--mx-ai-accent) !important;
    font-size: 1.35rem !important;
}

.mx-ai-dropzone-filemeta {
    flex: 1 1 auto;
    min-width: 0;
}

.mx-ai-dropzone-filename {
    font-weight: 600 !important;
    color: #0f172a !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-ai-dropzone-filesize {
    color: #64748b !important;
}

.mx-ai-dropzone-clear {
    flex: 0 0 auto;
    color: #94a3b8 !important;
}

.mx-ai-dropzone-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.mx-ai-dropzone-actions--compact {
    justify-content: flex-start;
}

.mx-ai-action-btn {
    text-transform: none !important;
}

.mx-ai-camera-inline .matrix-media-btn {
    border-color: color-mix(in srgb, var(--mud-palette-secondary, #F97316) 50%, #CBD5E1) !important;
    color: var(--mud-palette-secondary, #F97316) !important;
    text-transform: none !important;
}

.mx-ai-extract-row {
    display: flex;
    justify-content: stretch;
    max-width: 520px;
}

.mx-ai-extract-btn {
    width: 100%;
    min-height: 36px;
    font-weight: 600 !important;
    text-transform: none !important;
}

/* Review: file bar + side-by-side compare */
.mx-ai-review-filebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 6px;
}

.mx-ai-review-filebar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mx-ai-review-filebar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mx-ai-compare {
    display: grid;
    /* Fields pane gets equal-or-more width so labels/values are not clipped */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 12px;
    min-height: min(72vh, 780px);
    align-items: stretch;
}

.mx-ai-compare.is-doc-fullscreen {
    position: fixed;
    inset: 8px;
    z-index: 1600;
    background: #0f172a;
    padding: 8px;
    border-radius: 10px;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.9fr);
    min-height: calc(100vh - 16px);
}

.mx-ai-doc-pane,
.mx-ai-fields-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.mx-ai-compare.is-doc-fullscreen .mx-ai-doc-pane,
.mx-ai-compare.is-doc-fullscreen .mx-ai-fields-pane {
    background: #fff;
}

.mx-ai-doc-pane-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px solid #F1F5F9;
    background: #F8FAFC;
}

.mx-ai-pane-label {
    font-weight: 650 !important;
    color: #475569 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.68rem !important;
}

.mx-ai-doc-pane-body {
    flex: 1 1 auto;
    min-height: 240px;
    overflow: auto;
    background:
        linear-gradient(45deg, #F1F5F9 25%, transparent 25%),
        linear-gradient(-45deg, #F1F5F9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #F1F5F9 75%),
        linear-gradient(-45deg, transparent 75%, #F1F5F9 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mx-ai-doc-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.mx-ai-doc-embed {
    width: 100%;
    min-height: 100%;
    height: min(58vh, 600px);
    border: 0;
}

.mx-ai-compare.is-doc-fullscreen .mx-ai-doc-embed {
    height: calc(100vh - 72px);
}

.mx-ai-fields-pane {
    padding: 8px 10px 10px;
    overflow: auto;
}

.mx-ai-header-match {
    border: 1px solid color-mix(in srgb, #F59E0B 35%, #E2E8F0);
    border-radius: 8px;
    background: color-mix(in srgb, #F59E0B 6%, #ffffff);
}

.mx-ai-header-match .mud-expand-panel {
    background: transparent !important;
}

.mx-ai-header-match-panel .mud-expand-panel-content {
    padding-top: 4px !important;
}

.mx-ai-conf-chip {
    height: 20px !important;
    font-size: 0.65rem !important;
}

.mx-ai-dense-field .mud-input-slot,
.mx-ai-dense-field .mud-input-root {
    font-size: 0.78rem !important;
}

.mx-ai-header-grid .mud-input > input,
.mx-ai-header-grid .mud-input-control {
    font-size: 0.78rem;
}

.mx-ai-header-grid .mud-input-label,
.mx-ai-header-grid .mud-input-label-outlined {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
}

.mx-ai-fields-pane .mud-input-control {
    min-width: 0;
}

.mx-ai-field-wrap {
    position: relative;
}

.mx-ai-amber-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F59E0B;
    box-shadow: 0 0 0 2px #fff;
}

.mx-ai-uncertain-field {
    padding: 4px 2px 6px;
}

.mx-ai-lines-scroll {
    overflow: auto;
    max-height: min(42vh, 380px);
    border: 1px solid #E2E8F0;
    border-radius: 6px;
}

.mx-ai-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    min-width: 840px;
}

.mx-ai-lines-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #F8FAFC;
    color: #475569;
    font-weight: 650;
    text-align: left;
    padding: 4px 6px;
    border-bottom: 1px solid #E2E8F0;
    white-space: nowrap;
}

.mx-ai-lines-table td {
    padding: 2px 4px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
    height: 2rem;
}

.mx-ai-line-row:hover td {
    background: color-mix(in srgb, var(--mx-ai-accent) 5%, #ffffff);
}

.mx-ai-col-match {
    min-width: 96px;
    max-width: 140px;
}

.mx-ai-cell-input {
    width: 100%;
    min-width: 52px;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 2px 4px;
    height: 1.75rem;
    outline: none;
}

.mx-ai-cell-input:focus {
    background: #FFF7ED;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-ai-accent) 45%, transparent);
    border-radius: 3px;
}

.mx-ai-line-match-select {
    min-width: 88px;
    font-size: 0.7rem !important;
}

.mx-ai-match-none {
    color: #94a3b8;
}

.mx-ai-scan-dialog .mud-dialog-title {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
}

.mx-ai-scan-dialog .mud-dialog-content {
    max-height: min(82vh, 820px);
    overflow: auto;
}

/* Compact idle: ~30vw / max 480px — dropzone + Extract only */
.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--compact {
    max-width: min(30vw, 480px) !important;
    width: 100%;
}

/* After file added / after Extract: use nearly full viewport */
.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--wide {
    max-width: min(96vw, 1680px) !important;
    width: 96vw !important;
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--wide .mud-dialog-content {
    max-height: min(86vh, 920px);
    overflow: auto;
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--review {
    max-width: min(98vw, 1760px) !important;
    width: 98vw !important;
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--review .mud-dialog-content {
    max-height: min(88vh, 980px);
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--review .mx-ai-compare {
    min-height: min(76vh, 820px);
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--review .mx-ai-doc-embed {
    height: min(70vh, 720px);
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--review .mx-ai-lines-scroll {
    max-height: min(48vh, 420px);
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--compact .mud-dialog-content {
    max-height: none;
    overflow: visible;
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--compact .mx-ai-scan-desc {
    display: none;
}

.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--compact .mx-ai-dropzone--compact,
.mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--compact .mx-ai-extract-row {
    max-width: none;
}

.mx-ai-scan-dialog-title {
    position: relative;
    padding: 14px 18px 10px;
}

.mx-ai-scan-dialog-accent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--mud-palette-secondary, #F97316) 0%,
        color-mix(in srgb, var(--mud-palette-secondary, #F97316) 55%, #fdba74) 100%);
}

.mx-ai-scan-dialog-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mud-palette-secondary, #F97316);
    background: color-mix(in srgb, var(--mud-palette-secondary, #F97316) 14%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary, #F97316) 28%, transparent);
}

.mx-ai-scan-dialog-heading-wrap {
    min-width: 0;
}

.mx-ai-scan-dialog-heading {
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

.mx-ai-scan-dialog-subtitle {
    color: #64748b !important;
    line-height: 1.2 !important;
    margin-top: 1px;
}

@media (max-width: 600px) {
    .mud-dialog.mx-ai-scan-dialog.mx-ai-scan-dialog--compact {
        max-width: min(92vw, 480px) !important;
    }
}

@media (max-width: 960px) {
    .mx-ai-compare {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .mx-ai-doc-pane-body {
        min-height: 220px;
        max-height: 38vh;
    }

    .mx-ai-compare.is-doc-fullscreen {
        grid-template-columns: 1fr;
        overflow: auto;
    }
}

@media (max-width: 600px) {
    .mx-ai-dropzone {
        min-height: 84px;
        padding: 10px;
        max-width: none;
    }

    .mx-ai-extract-row {
        max-width: none;
    }

    .mx-ai-dropzone-actions {
        flex-direction: row;
        align-items: center;
    }

    .mx-ai-review-filebar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Shared signature pad ── */
.matrix-signature-host {
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 720px) {
    .mx-profile-dialog .mud-dialog-content { padding: 0 !important; }
    .mx-profile-layout {
        grid-template-columns: 1fr;
    }
    .matrix-camera-viewport { max-height: 48vh; }
    .dcm-cam-viewport, .dcm-crop-stage, .dcm-crop-stage img { max-height: 28vh; }
    .dcm-dialog-body { max-height: 85vh; }
}

/* ── Document Viewer 2026 explorer ── */
.dcm-explorer.mud-dialog {
    width: min(1040px, 96vw);
    max-width: 96vw !important;
    border-radius: 14px !important;
}
.dcm-explorer .mud-dialog-title { padding: 10px 16px 8px !important; }
.dcm-explorer .mud-dialog-content { padding: 0 12px 10px !important; }
.dcm-explorer .mud-dialog-actions { display: none !important; }
.dcm-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dcm-title-mark {
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 14%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 28%, transparent);
}
.dcm-title-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.dcm-title-kicker {
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--mud-palette-secondary);
}
.dcm-title-name {
    font-size: 0.95rem; font-weight: 750; color: #334155;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dcm-cmdbar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 4px;
    margin-bottom: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}
.dcm-cmdbar-actions {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}
.dcm-cmd {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-width: 58px; height: 52px; padding: 4px 8px;
    appearance: none; -webkit-appearance: none;
    border: 1px solid transparent;
    background: transparent !important;
    border-radius: 8px;
    color: #475569 !important;
    font-size: 0.68rem; font-weight: 650; cursor: pointer; text-decoration: none; user-select: none;
}
.dcm-cmd .mud-icon-root,
.dcm-cmd:hover .mud-icon-root,
.dcm-cmd:focus .mud-icon-root,
.dcm-cmd:focus-visible .mud-icon-root,
.dcm-cmd:active .mud-icon-root {
    color: var(--mud-palette-secondary) !important;
    font-size: 1.2rem !important;
}
.dcm-cmd:hover:not(:disabled),
.dcm-cmd:focus-visible,
.dcm-cmd:focus {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, #ffffff) !important;
    color: #334155 !important;
    outline: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-secondary) 45%, #E2E8F0);
}
.dcm-cmd.is-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, #ffffff) !important;
    color: var(--mud-palette-error) !important;
}
.dcm-cmd.is-danger:hover:not(:disabled) .mud-icon-root { color: var(--mud-palette-error) !important; }
.dcm-cmd:disabled { opacity: 0.38; cursor: default; box-shadow: none; }
.dcm-cmd-sep { width: 1px; margin: 6px 4px; background: #E2E8F0; align-self: stretch; }

.dcm-cmd-upload { background: #E0F2FE !important; color: #075985 !important; }
.dcm-cmd-upload .mud-icon-root { color: #0284C7 !important; }
.dcm-cmd-camera { background: color-mix(in srgb, var(--mud-palette-secondary) 16%, #ffffff) !important; color: #9A3412 !important; }
.dcm-cmd-camera .mud-icon-root { color: var(--mud-palette-secondary) !important; }
.dcm-cmd-rename { background: #F1F5F9 !important; color: #334155 !important; }
.dcm-cmd-rename .mud-icon-root { color: #64748B !important; }
.dcm-cmd-delete { background: #FFE4E6 !important; color: #9F1239 !important; }
.dcm-cmd-delete .mud-icon-root { color: #E11D48 !important; }
.dcm-cmd-email { background: #EDE9FE !important; color: #5B21B6 !important; }
.dcm-cmd-email .mud-icon-root { color: #7C3AED !important; }
.dcm-cmd-download { background: #CCFBF1 !important; color: #0F766E !important; }
.dcm-cmd-download .mud-icon-root { color: #14B8A6 !important; }
.dcm-cmd-refresh { background: #ECFDF5 !important; color: #047857 !important; }
.dcm-cmd-refresh .mud-icon-root { color: #10B981 !important; }
.dcm-cmd-folders { background: #FFF7ED !important; color: #9A3412 !important; }
.dcm-cmd-folders .mud-icon-root { color: #F97316 !important; }
.dcm-cmd-exit {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 68px;
    background: #E2E8F0 !important;
    color: #334155 !important;
    border: 1px solid #CBD5E1 !important;
}
.dcm-cmd-exit .mud-icon-root { color: #475569 !important; }
.dcm-cmd-exit:hover:not(:disabled) {
    background: #CBD5E1 !important;
    color: #0F172A !important;
}
.dcm-cmd-upload:hover:not(:disabled),
.dcm-cmd-camera:hover:not(:disabled),
.dcm-cmd-rename:hover:not(:disabled),
.dcm-cmd-delete:hover:not(:disabled),
.dcm-cmd-email:hover:not(:disabled),
.dcm-cmd-download:hover:not(:disabled),
.dcm-cmd-refresh:hover:not(:disabled),
.dcm-cmd-folders:hover:not(:disabled) {
    filter: brightness(0.97);
    box-shadow: none;
}
.dcm-crumb {
    display: flex; align-items: center; gap: 6px; margin: 0 2px 8px;
    font-size: 0.75rem; font-weight: 600; color: #64748B;
}
.dcm-crumb .mud-icon-root { color: var(--mud-palette-secondary) !important; font-size: 1rem !important; }
.dcm-crumb-count { margin-left: auto; font-weight: 650; color: var(--mud-palette-secondary); }
.dcm-body {
    display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 10px;
    min-height: 380px; max-height: min(62vh, 580px);
}
.dcm-body.is-phone { grid-template-columns: 1fr; max-height: min(70vh, 640px); }
.dcm-folders, .dcm-folder-sheet {
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; overflow: auto; padding: 8px 6px;
}
.dcm-pane-label {
    font-size: 0.65rem; font-weight: 750; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--mud-palette-secondary); padding: 2px 10px 8px;
}
.dcm-tree .mud-treeview-item-content {
    min-height: 34px !important; border-radius: 8px !important; padding: 2px 6px !important;
    color: #475569 !important;
    background: transparent !important;
}
.dcm-tree .mud-treeview-item-label { font-size: 0.82rem !important; font-weight: 600 !important; color: #475569 !important; }
.dcm-tree .mud-treeview-item-content .mud-icon-root { color: var(--mud-palette-secondary) !important; }
.dcm-tree-active > .mud-treeview-item-content,
.dcm-tree .mud-treeview-item-selected > .mud-treeview-item-content {
    background: color-mix(in srgb, var(--mud-palette-secondary) 16%, #ffffff) !important;
    color: #334155 !important;
}
.dcm-tree-active .mud-treeview-item-label,
.dcm-tree .mud-treeview-item-selected .mud-treeview-item-label,
.dcm-tree .mud-treeview-item-selected .mud-treeview-item-content,
.dcm-tree .mud-treeview-item-selected .mud-treeview-item-content * {
    color: #334155 !important;
}
.dcm-tree-active .mud-icon-root,
.dcm-tree .mud-treeview-item-selected .mud-icon-root {
    color: var(--mud-palette-secondary) !important;
}
.dcm-files {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: auto;
    background: #fff;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
.dcm-empty {
    padding: 48px 12px; text-align: center; color: #94A3B8;
    display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 600;
}
.dcm-file-head, .dcm-file {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 88px 40px;
    align-items: center; gap: 8px; padding: 0 12px;
}
.dcm-file-head {
    position: sticky; top: 0; z-index: 1; min-height: 32px; background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0; font-size: 0.68rem; font-weight: 750;
    letter-spacing: 0.04em; text-transform: uppercase; color: #94A3B8;
}
.dcm-file { min-height: 46px; border-bottom: 1px solid #F1F5F9; cursor: pointer; }
.dcm-file:hover { background: #F8FAFC; }
.dcm-file.is-selected { background: color-mix(in srgb, var(--mud-palette-secondary) 10%, #ffffff); }
.dcm-file-icon { color: var(--mud-palette-secondary) !important; font-size: 1.2rem !important; }
.dcm-file-meta { min-width: 0; }
.dcm-file-name {
    font-size: 0.84rem; font-weight: 650; color: #334155;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dcm-col-date, .dcm-col-size { font-size: 0.74rem; color: #64748B; white-space: nowrap; }
.dcm-col-size { text-align: right; }
.dcm-col-act { display: flex; justify-content: flex-end; }
.dcm-rename-row {
    display: flex; gap: 8px; align-items: center; padding: 8px 12px;
    border-bottom: 1px solid #E2E8F0;
    background: color-mix(in srgb, var(--mud-palette-secondary) 6%, #ffffff);
}
.dcm-folder-sheet { width: min(300px, 86vw); height: 100%; background: #fff; padding: 12px; overflow: auto; }
@media (max-width: 720px) {
    .dcm-file-head .dcm-col-date, .dcm-file-head .dcm-col-size,
    .dcm-file .dcm-col-date, .dcm-file .dcm-col-size { display: none; }
    .dcm-file-head, .dcm-file { grid-template-columns: 28px minmax(0, 1fr) 40px; }
}

@media (max-width: 960px) {
    .dcm-explorer.mud-dialog,
    .mx-photo-dialog.mud-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .mx-photo-session { max-width: 100%; overflow-x: hidden; }
    .mx-photo-actions { width: 100%; }
    .mx-photo-btn { padding: 6px 8px !important; font-size: 0.75rem !important; }
}

.dcm-explorer .mud-dialog-close-button,
.dcm-explorer .mud-dialog-title .mud-button-close,
.dcm-explorer .mud-dialog-title button[aria-label="close"],
.dcm-explorer .mud-dialog-title button[aria-label="Close"] {
    display: none !important;
}
.dcm-explorer .dcm-cmd-exit.dcm-cmd {
    background: #E2E8F0 !important;
    color: #334155 !important;
    box-shadow: none !important;
}
.dcm-explorer .dcm-cmd-exit .mud-icon-root { color: #475569 !important; }
.dcm-explorer .mx-btn-back.mud-button-root {
    background: #EEF2F7 !important;
    color: #475569 !important;
    box-shadow: none !important;
}
.dcm-explorer .mx-btn-back .mud-icon-root { color: #64748B !important; }
.dcm-explorer .mx-btn-shutter.mud-button-root {
    background: color-mix(in srgb, var(--mud-palette-secondary) 82%, #ffffff) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.dcm-explorer .mx-btn-shutter .mud-icon-root { color: #fff !important; }
.dcm-explorer .mx-btn-send.mud-button-root {
    background: #D1FAE5 !important;
    color: #047857 !important;
    box-shadow: none !important;
}
.dcm-explorer .mx-btn-send .mud-icon-root { color: #059669 !important; }

/* Toolbar More menu must sit above sticky document chrome */
.matrix-toolbar-more-popover {
    z-index: 2000 !important;
}




/* ===== Matrix desk cards (Inventory / Admin / Purchase / Sales) ===== */
.mx-desk-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.mx-desk-card {
    flex: 1 1 118px;
    min-width: 110px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    padding: 8px 8px 7px;
    color: #fff;
    position: relative;
    transform: translateY(0);
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 8px 0 rgba(0,0,0,.18),
        0 12px 18px -10px rgba(15,23,42,.45);
    text-align: center;
}
.mx-desk-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.4) inset,
        0 10px 0 rgba(0,0,0,.2),
        0 16px 22px -10px rgba(15,23,42,.5);
}
.mx-desk-card:active {
    transform: translateY(3px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 3px 0 rgba(0,0,0,.18),
        0 6px 10px -8px rgba(15,23,42,.4);
}
.mx-desk-card.is-active {
    outline: 2px solid rgba(255,255,255,.85);
    outline-offset: 1px;
}
.mx-desk-card.is-critical {
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 8px 0 rgba(127,29,29,.35),
        0 12px 18px -10px rgba(127,29,29,.55);
}
.mx-desk-card.tone-orange { background: linear-gradient(165deg, #fb923c 0%, #ea580c 55%, #c2410c 100%); }
.mx-desk-card.tone-green  { background: linear-gradient(165deg, #4ade80 0%, #16a34a 55%, #15803d 100%); }
.mx-desk-card.tone-blue   { background: linear-gradient(165deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%); }
.mx-desk-card.tone-purple { background: linear-gradient(165deg, #c084fc 0%, #9333ea 55%, #7e22ce 100%); }
.mx-desk-card.tone-teal   { background: linear-gradient(165deg, #2dd4bf 0%, #0d9488 55%, #0f766e 100%); }
.mx-desk-card.tone-sky    { background: linear-gradient(165deg, #38bdf8 0%, #0284c7 55%, #0369a1 100%); }
.mx-desk-card.tone-amber  { background: linear-gradient(165deg, #fbbf24 0%, #d97706 55%, #b45309 100%); }
.mx-desk-card.tone-rose   { background: linear-gradient(165deg, #fb7185 0%, #e11d48 55%, #be123c 100%); }
.mx-desk-card.tone-indigo { background: linear-gradient(165deg, #818cf8 0%, #4f46e5 55%, #3730a3 100%); }
.mx-desk-ico {
    width: 28px; height: 28px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22);
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    margin-bottom: 2px;
}
.mx-desk-txt {
    font-size: .58rem; font-weight: 800; letter-spacing: .01em;
    text-transform: uppercase; opacity: .95;
    text-align: center; line-height: 1.15;
    max-width: 100%;
}
.mx-desk-n {
    font-size: 1.15rem; font-weight: 900; line-height: 1.1;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.mx-desk-sub {
    font-size: .55rem; font-weight: 700; opacity: .88;
    letter-spacing: .01em;
}

/* Wide hero spend / revenue card beside desk row */
.mx-top-ops {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}
.mx-hero-card {
    border: none;
    border-radius: 14px;
    padding: 14px 16px 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 10px 0 rgba(0,0,0,.16),
        0 16px 22px -10px rgba(15,23,42,.4);
    background: linear-gradient(165deg, #4ade80 0%, #16a34a 48%, #15803d 100%);
    min-height: 132px;
}
.mx-hero-card.tone-sales {
    background: linear-gradient(165deg, #60a5fa 0%, #2563eb 48%, #1d4ed8 100%);
}
.mx-hero-card .mx-hero-top {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.mx-hero-card .mx-hero-ico {
    width: 36px; height: 36px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22);
}
.mx-hero-card .mx-hero-tag {
    font-size: .62rem; font-weight: 800; letter-spacing: .04em;
    background: rgba(255,255,255,.2); border-radius: 999px; padding: 2px 8px;
}
.mx-hero-card .mx-hero-label {
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .92;
}
.mx-hero-card .mx-hero-value {
    font-size: 1.55rem; font-weight: 900; line-height: 1.1;
    text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.mx-hero-card .mx-hero-foot {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .68rem; font-weight: 700; opacity: .92; margin-top: 2px;
}
.mx-desk-queues {
    display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
}
.mx-desk-queues .mx-desk-card {
    flex: 1 1 112px;
    max-width: 160px;
    min-width: 104px;
}
@media (max-width: 900px) {
    .mx-top-ops { grid-template-columns: 1fr; }
    .mx-desk-queues .mx-desk-card { max-width: none; }
}


/* Desk cards showing money amounts (Accounts position KPIs) */
.mx-desk-card.mx-desk-money {
    flex: 1 1 140px;
    max-width: 200px;
    min-width: 120px;
}
.mx-desk-card.mx-desk-money .mx-desk-n {
    font-size: 1.05rem;
    word-break: break-word;
}
.accounts-dashboard .mx-desk-row .mx-desk-card {
    flex: 1 1 108px;
    max-width: 168px;
}