/*
 * MTX Switch - design tokens and the three themes (Light, Soft Neutral, Black/Dark).
 * Static file (not built by Vite): loaded after the Velzon CSS, overrides its --vz-* variables.
 * The active theme is <html data-mtx-theme="light|neutral|dark">; dark also sets data-bs-theme="dark"
 * so every Bootstrap / Velzon dark rule applies.
 */

/* ------------------------------------------------------------------ shared tokens */
:root[data-mtx-theme], :root[data-mtx-theme][data-bs-theme] {
    --mtx-radius: .5rem;
    --mtx-radius-sm: .375rem;
    /* density: one spacing scale for the whole UI (all themes) */
    --mtx-space-1: 4px;
    --mtx-space-2: 8px;
    --mtx-space-3: 12px;
    --mtx-space-4: 16px;
    --mtx-gap: 12px;          /* between related sections / cards */
    --mtx-pad: 14px;          /* panel (card) padding */
    --mtx-ctl-h: 32px;        /* compact control height (filters, toolbars) */
    --mtx-ctl-h-md: 36px;     /* regular form control height */
    --mtx-cell-py: 6px;       /* table cell padding */
    --mtx-cell-px: 10px;
    --mtx-label-fs: .72rem;
    --mtx-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mtx-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --mtx-focus: 0 0 0 .2rem rgba(var(--vz-primary-rgb), .35);
    --mtx-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
    --vz-border-radius: var(--mtx-radius-sm);
    --vz-card-border-radius: var(--mtx-radius);
    --vz-card-inner-border-radius: calc(var(--mtx-radius) - 1px);
}

/* ------------------------------------------------------------------ Light: white panels, pale background, blue / cyan */
:root[data-mtx-theme="light"], :root[data-mtx-theme="light"][data-bs-theme] {
    --vz-body-bg: #f3f6fb; --vz-body-bg-rgb: 243, 246, 251;
    --vz-body-color: #1f2a37; --vz-body-color-rgb: 31, 42, 55;
    --vz-heading-color: #111b2b; --vz-emphasis-color: #0b1220;
    --vz-secondary-color: #5b6b7f; --vz-secondary-color-rgb: 91, 107, 127;
    --vz-secondary-bg: #ffffff; --vz-tertiary-bg: #f6f8fc; --vz-light: #f1f4f9; --vz-light-rgb: 241, 244, 249;
    --vz-border-color: #e1e7ef; --vz-border-color-translucent: rgba(15, 23, 42, .1);
    --vz-primary: #1d64d8; --vz-primary-rgb: 29, 100, 216; --vz-primary-text-emphasis: #134a9f;
    --vz-primary-bg-subtle: #e3edfc; --vz-primary-border-subtle: #b6cdf3;
    --vz-info: #0b9fc0; --vz-info-rgb: 11, 159, 192; --vz-info-bg-subtle: #def4f9;
    --vz-link-color: #1d64d8; --vz-link-color-rgb: 29, 100, 216; --vz-link-hover-color: #134a9f;
    --mtx-panel: #ffffff;
    --vz-header-bg: #ffffff; --vz-header-border: #e1e7ef; --vz-header-item-color: #3b4a5c; --vz-header-item-sub-color: #6b7a8c;
    --vz-topbar-user-bg: #f1f5fb;
    --vz-footer-bg: #ffffff; --vz-footer-color: #6b7a8c;
    --vz-input-bg-custom: #ffffff;
    --mtx-sidebar-bg: #0f2747; --mtx-sidebar-bg-2: #12305a; --mtx-sidebar-text: #b8c7dc; --mtx-sidebar-title: #7f95b3;
    --mtx-sidebar-active-bg: rgba(56, 189, 248, .16); --mtx-sidebar-active: #ffffff; --mtx-sidebar-accent: #38bdf8;
    --mtx-table-head: #f4f7fb; --mtx-row-hover: #f2f7ff; --mtx-kpi-accent: #1d64d8;
    --vz-success: #198754; --vz-success-rgb: 25, 135, 84; --vz-warning: #d08a00; --vz-warning-rgb: 208, 138, 0; --vz-danger: #d63b3b; --vz-danger-rgb: 214, 59, 59;
    --mtx-chart-text: #4b5b6e; --mtx-chart-grid: #e6ebf2; --mtx-chart-axis: #c9d3e0;
    --mtx-chart-colors: #1d64d8, #0b9fc0, #16a34a, #f59e0b, #dc2626, #7c3aed, #0d9488, #64748b;
}

/* ------------------------------------------------------------------ Soft Neutral: gentle warm greys, restrained accents */
:root[data-mtx-theme="neutral"], :root[data-mtx-theme="neutral"][data-bs-theme] {
    --vz-body-bg: #efede8; --vz-body-bg-rgb: 239, 237, 232;
    --vz-body-color: #2d2a26; --vz-body-color-rgb: 45, 42, 38;
    --vz-heading-color: #24211d; --vz-emphasis-color: #1a1815;
    --vz-secondary-color: #6d675f; --vz-secondary-color-rgb: 109, 103, 95;
    --vz-secondary-bg: #fbfaf7; --vz-tertiary-bg: #f5f3ee; --vz-light: #f2efe9; --vz-light-rgb: 242, 239, 233;
    --vz-border-color: #e1ddd4; --vz-border-color-translucent: rgba(45, 42, 38, .12);
    --vz-primary: #3f6475; --vz-primary-rgb: 63, 100, 117; --vz-primary-text-emphasis: #2c4855;
    --vz-primary-bg-subtle: #e3eaec; --vz-primary-border-subtle: #bccbd1;
    --vz-info: #4f7f8c; --vz-info-rgb: 79, 127, 140; --vz-info-bg-subtle: #e2ecee;
    --vz-success: #4f8a5b; --vz-success-rgb: 79, 138, 91; --vz-warning: #c08a2e; --vz-warning-rgb: 192, 138, 46;
    --vz-danger: #b9553f; --vz-danger-rgb: 185, 85, 63;
    --vz-link-color: #3f6475; --vz-link-color-rgb: 63, 100, 117; --vz-link-hover-color: #2c4855;
    --mtx-panel: #fbfaf7;
    --vz-header-bg: #fbfaf7; --vz-header-border: #e1ddd4; --vz-header-item-color: #4a453e; --vz-header-item-sub-color: #7a746b;
    --vz-topbar-user-bg: #f2efe9;
    --vz-footer-bg: #fbfaf7; --vz-footer-color: #7a746b;
    --vz-input-bg-custom: #fffefb;
    --mtx-sidebar-bg: #34393d; --mtx-sidebar-bg-2: #3b4145; --mtx-sidebar-text: #cfc9bf; --mtx-sidebar-title: #9a938a;
    --mtx-sidebar-active-bg: rgba(255, 255, 255, .09); --mtx-sidebar-active: #ffffff; --mtx-sidebar-accent: #c8b28a;
    --mtx-table-head: #f3f0ea; --mtx-row-hover: #f4f1eb; --mtx-kpi-accent: #3f6475;
    --vz-success: #4f7f5b; --vz-success-rgb: 79, 127, 91; --vz-warning: #b07d2a; --vz-warning-rgb: 176, 125, 42; --vz-danger: #b0493f; --vz-danger-rgb: 176, 73, 63;
    --mtx-chart-text: #5f594f; --mtx-chart-grid: #e7e3db; --mtx-chart-axis: #d3cdc2;
    --mtx-chart-colors: #3f6475, #7a9a6d, #c08a2e, #8c6d9e, #b9553f, #4f7f8c, #9a8f7d, #6d675f;
}

/* ------------------------------------------------------------------ Black / Dark: near-black, charcoal panels, off-white text */
:root[data-mtx-theme="dark"], :root[data-mtx-theme="dark"][data-bs-theme] {
    color-scheme: dark;
    --vz-body-bg: #0d0f12; --vz-body-bg-rgb: 13, 15, 18;
    --vz-body-color: #d5d9df; --vz-body-color-rgb: 213, 217, 223;
    --vz-heading-color: #eceef1; --vz-emphasis-color: #f4f5f7;
    --vz-secondary-color: #8f97a3; --vz-secondary-color-rgb: 143, 151, 163;
    --vz-secondary-bg: #16191e; --vz-tertiary-bg: #1b1f25; --vz-light: #1e2228; --vz-light-rgb: 30, 34, 40;
    --vz-dark: #e3e6ea; --vz-dark-rgb: 227, 230, 234;
    --vz-border-color: #2a2f37; --vz-border-color-translucent: rgba(255, 255, 255, .08);
    --vz-primary: #6b9cf0; --vz-primary-rgb: 107, 156, 240; --vz-primary-text-emphasis: #9dbdf6;
    --vz-primary-bg-subtle: rgba(107, 156, 240, .14); --vz-primary-border-subtle: rgba(107, 156, 240, .35);
    --vz-info: #4fb6cf; --vz-info-rgb: 79, 182, 207;
    --vz-success: #3fb08f; --vz-success-rgb: 63, 176, 143; --vz-warning: #d9a441; --vz-warning-rgb: 217, 164, 65;
    --vz-danger: #e07059; --vz-danger-rgb: 224, 112, 89;
    --vz-link-color: #8fb3f3; --vz-link-color-rgb: 143, 179, 243; --vz-link-hover-color: #b5cdf8;
    --mtx-panel: #16191e;
    --vz-header-bg: #111317; --vz-header-border: #23272e; --vz-header-item-color: #d5d9df; --vz-header-item-sub-color: #8f97a3;
    --vz-header-item-bg: #1b1f25; --vz-topbar-user-bg: #171a1f; --vz-topbar-search-bg: #1b1f25;
    --vz-footer-bg: #111317; --vz-footer-color: #8f97a3;
    --vz-input-bg-custom: #111317;
    --mtx-sidebar-bg: #08090b; --mtx-sidebar-bg-2: #0f1114; --mtx-sidebar-text: #a7aeb8; --mtx-sidebar-title: #6c7480;
    --mtx-sidebar-active-bg: rgba(107, 156, 240, .16); --mtx-sidebar-active: #f4f5f7; --mtx-sidebar-accent: #6b9cf0;
    --mtx-table-head: #1b1f25; --mtx-row-hover: #1d2128; --mtx-kpi-accent: #6b9cf0;
    --vz-success: #3f9e74; --vz-success-rgb: 63, 158, 116; --vz-warning: #c79a3e; --vz-warning-rgb: 199, 154, 62; --vz-danger: #d0605a; --vz-danger-rgb: 208, 96, 90;
    --mtx-chart-text: #aab1bb; --mtx-chart-grid: #262b33; --mtx-chart-axis: #3a404a;
    --mtx-chart-colors: #6b9cf0, #4fb6cf, #3fb08f, #d9a441, #e07059, #a78bfa, #2dd4bf, #9aa3af;
    --mtx-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ bridge: the layout also loads stock Bootstrap 5.3 (--bs-*),
   which drives buttons, forms, tables, dropdowns and badges. Point it at the same theme tokens. */
:root[data-mtx-theme], :root[data-mtx-theme][data-bs-theme] {
    --bs-body-bg: var(--vz-body-bg); --bs-body-bg-rgb: var(--vz-body-bg-rgb);
    --bs-body-color: var(--vz-body-color); --bs-body-color-rgb: var(--vz-body-color-rgb);
    --bs-emphasis-color: var(--vz-emphasis-color); --bs-heading-color: var(--vz-heading-color);
    --bs-secondary-color: var(--vz-secondary-color); --bs-secondary-color-rgb: var(--vz-secondary-color-rgb);
    --bs-secondary-bg: var(--mtx-panel); --bs-tertiary-bg: var(--vz-tertiary-bg);
    --bs-border-color: var(--vz-border-color); --bs-border-color-translucent: var(--vz-border-color-translucent);
    --bs-primary: var(--vz-primary); --bs-primary-rgb: var(--vz-primary-rgb);
    --bs-primary-text-emphasis: var(--vz-primary-text-emphasis); --bs-primary-bg-subtle: var(--vz-primary-bg-subtle); --bs-primary-border-subtle: var(--vz-primary-border-subtle);
    --bs-info: var(--vz-info); --bs-info-rgb: var(--vz-info-rgb);
    --bs-success: var(--vz-success); --bs-success-rgb: var(--vz-success-rgb);
    --bs-warning: var(--vz-warning); --bs-warning-rgb: var(--vz-warning-rgb);
    --bs-danger: var(--vz-danger); --bs-danger-rgb: var(--vz-danger-rgb);
    --bs-light: var(--vz-light); --bs-light-rgb: var(--vz-light-rgb);
    --bs-link-color: var(--vz-link-color); --bs-link-color-rgb: var(--vz-link-color-rgb); --bs-link-hover-color: var(--vz-link-hover-color);
    --bs-focus-ring-color: rgba(var(--vz-primary-rgb), .35);
    --bs-border-radius: var(--mtx-radius-sm);
}

/* ------------------------------------------------------------------ base */
html[data-mtx-theme] body { font-family: var(--mtx-font); background: var(--vz-body-bg); color: var(--vz-body-color); font-size: .875rem; }
html[data-mtx-theme] .font-monospace, html[data-mtx-theme] code { font-family: var(--mtx-mono); }
html[data-mtx-theme] .text-muted { color: var(--vz-secondary-color) !important; }
html[data-mtx-theme] .page-content { background: var(--vz-body-bg); }
html[data-mtx-theme] :focus-visible { outline: 2px solid rgba(var(--vz-primary-rgb), .85); outline-offset: 2px; }
html[data-mtx-theme] .skip-link { position: absolute; left: -9999px; top: .5rem; z-index: 2000; }
html[data-mtx-theme] .skip-link:focus { left: .5rem; background: var(--vz-primary); color: #fff; padding: .4rem .8rem; border-radius: var(--mtx-radius-sm); }

/* ------------------------------------------------------------------ buttons */
html[data-mtx-theme] .btn { border-radius: var(--mtx-radius-sm); font-weight: 500; }
html[data-mtx-theme] .btn-primary {
    --bs-btn-bg: var(--vz-primary); --bs-btn-border-color: var(--vz-primary); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: rgba(var(--vz-primary-rgb), .88); --bs-btn-hover-border-color: rgba(var(--vz-primary-rgb), .88);
    --bs-btn-active-bg: rgba(var(--vz-primary-rgb), .8); --bs-btn-active-border-color: rgba(var(--vz-primary-rgb), .8);
    --bs-btn-disabled-bg: var(--vz-primary); --bs-btn-disabled-border-color: var(--vz-primary); --bs-btn-focus-shadow-rgb: var(--vz-primary-rgb);
    --vz-btn-bg: var(--vz-primary); --vz-btn-border-color: var(--vz-primary);
    --vz-btn-hover-bg: rgba(var(--vz-primary-rgb), .88); --vz-btn-hover-border-color: rgba(var(--vz-primary-rgb), .88);
    --vz-btn-active-bg: rgba(var(--vz-primary-rgb), .8); --vz-btn-active-border-color: rgba(var(--vz-primary-rgb), .8);
    --vz-btn-disabled-bg: var(--vz-primary); --vz-btn-disabled-border-color: var(--vz-primary);
    --vz-btn-focus-shadow-rgb: var(--vz-primary-rgb);
}
html[data-mtx-theme="dark"] .btn-primary { --vz-btn-color: #0d0f12; --vz-btn-hover-color: #0d0f12; --vz-btn-active-color: #0d0f12; --bs-btn-color: #0d0f12; --bs-btn-hover-color: #0d0f12; --bs-btn-active-color: #0d0f12; }
html[data-mtx-theme] .btn-outline-primary { --bs-btn-color: var(--vz-primary); --bs-btn-border-color: var(--vz-primary); --bs-btn-hover-bg: var(--vz-primary); --bs-btn-hover-border-color: var(--vz-primary); --bs-btn-active-bg: var(--vz-primary); --vz-btn-color: var(--vz-primary); --vz-btn-border-color: var(--vz-primary); --vz-btn-hover-bg: var(--vz-primary); --vz-btn-hover-border-color: var(--vz-primary); --vz-btn-active-bg: var(--vz-primary); }
html[data-mtx-theme] .btn-light { --vz-btn-bg: var(--vz-light); --vz-btn-border-color: var(--vz-border-color); --vz-btn-color: var(--vz-body-color); }
html[data-mtx-theme="dark"] .btn-light, html[data-mtx-theme="dark"] .btn-secondary { --vz-btn-hover-color: #fff; }

/* ------------------------------------------------------------------ cards / panels */
html[data-mtx-theme] .card {
    background-color: var(--mtx-panel);
    border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius); box-shadow: var(--mtx-shadow); margin-bottom: var(--mtx-gap);
}
html[data-mtx-theme] .card-header { background: var(--mtx-panel); border-bottom: 1px solid var(--vz-border-color); }
html[data-mtx-theme] .card-header h4, html[data-mtx-theme] .card-header h5, html[data-mtx-theme] .card-header h6, html[data-mtx-theme] .card-title { font-weight: 600; letter-spacing: .01em; }
html[data-mtx-theme] .card-footer { background: var(--mtx-panel); border-top: 1px solid var(--vz-border-color); }
html[data-mtx-theme] .card-animate:hover { transform: none; }
html[data-mtx-theme] .card-body { padding: var(--mtx-pad); }
html[data-mtx-theme] .card-header { padding: 10px var(--mtx-pad); }
html[data-mtx-theme] .card-footer { padding: 10px var(--mtx-pad); }
html[data-mtx-theme] .card-header .card-title { margin-bottom: 0; }

/* KPI cards: label on top, big number, optional hint */
html[data-mtx-theme] .mtx-kpi { border-left: 3px solid var(--mtx-kpi-accent); }
html[data-mtx-theme] .mtx-kpi .mtx-kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vz-secondary-color); font-weight: 600; }
html[data-mtx-theme] .mtx-kpi .mtx-kpi-value { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--vz-heading-color); line-height: 1.2; }
html[data-mtx-theme] .mtx-section-title { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vz-secondary-color); }
html[data-mtx-theme] .mtx-section-title::after { content: ""; flex: 1; height: 1px; background: var(--vz-border-color); }

/* ------------------------------------------------------------------ header / topbar */
html[data-mtx-theme] #page-topbar { background: var(--vz-header-bg); border-bottom: 1px solid var(--vz-header-border); box-shadow: none; }
html[data-mtx-theme] .page-title-box {
    background: transparent; box-shadow: none; border-bottom: 1px solid var(--vz-border-color);
    padding: var(--mtx-space-2) 0; margin: 0 0 var(--mtx-gap); min-height: 0;
}
html[data-mtx-theme] .page-title-box h4 { font-size: 1rem; margin-bottom: 0; font-weight: 600; text-transform: none; color: var(--vz-heading-color); }
html[data-mtx-theme] .page-title-box .breadcrumb-item, html[data-mtx-theme] .page-title-box .breadcrumb-item a { font-size: .8rem; color: var(--vz-secondary-color); text-decoration: none; }
html[data-mtx-theme] .page-title-box .breadcrumb-item.active { color: var(--vz-heading-color); font-weight: 500; }
html[data-mtx-theme] .btn-topbar { color: var(--vz-header-item-color); }

/* ------------------------------------------------------------------ sidebar (navigation) */
html[data-mtx-theme] .app-menu.navbar-menu {
    background: linear-gradient(180deg, var(--mtx-sidebar-bg) 0%, var(--mtx-sidebar-bg-2) 100%);
    border-right: 1px solid var(--vz-border-color-translucent);
    --vz-vertical-menu-bg: transparent;
    --vz-vertical-menu-item-color: var(--mtx-sidebar-text); --vz-vertical-menu-sub-item-color: var(--mtx-sidebar-text);
    --vz-vertical-menu-item-hover-color: var(--mtx-sidebar-active); --vz-vertical-menu-sub-item-hover-color: var(--mtx-sidebar-active);
    --vz-vertical-menu-item-active-color: var(--mtx-sidebar-active); --vz-vertical-menu-sub-item-active-color: var(--mtx-sidebar-active);
    --vz-vertical-menu-item-active-bg: var(--mtx-sidebar-active-bg); --vz-vertical-menu-title-color: var(--mtx-sidebar-title);
    --vz-sidebar-user-bg: rgba(255, 255, 255, .06); --vz-sidebar-user-name-text: #fff; --vz-sidebar-user-name-sub-text: var(--mtx-sidebar-text);
}
html[data-mtx-theme] .navbar-menu .navbar-nav .nav-link { border-radius: var(--mtx-radius-sm); margin: 1px .5rem; padding-top: .55rem; padding-bottom: .55rem; font-size: .875rem; }
html[data-mtx-theme] .navbar-menu .navbar-nav .nav-link.menu-link.active,
html[data-mtx-theme] .navbar-menu .navbar-nav .nav-link.menu-link[aria-expanded="true"] { background: var(--mtx-sidebar-active-bg); color: var(--mtx-sidebar-active); }
html[data-mtx-theme] .navbar-menu .navbar-nav .nav-link.menu-link.active { box-shadow: inset 3px 0 0 var(--mtx-sidebar-accent); }
html[data-mtx-theme] .navbar-menu .navbar-nav .nav-sm .nav-link.active { color: var(--mtx-sidebar-active); font-weight: 600; }
html[data-mtx-theme] .navbar-menu .navbar-nav .nav-sm .nav-link.active::before { background-color: var(--mtx-sidebar-accent); opacity: 1; }
html[data-mtx-theme] .navbar-menu .menu-title { padding: 1rem 1.25rem .35rem; }
html[data-mtx-theme] .navbar-menu .menu-title span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--mtx-sidebar-title); }
html[data-mtx-theme] .navbar-brand-box { background: transparent; }

/* Keep the vertical sidebar scrollable inside the viewport. The brand/user/
   search block sits above #scrollbar, so #scrollbar must flex into the
   remaining height (instead of 100% of the whole sidebar) or large expanded
   groups push the last items below the window/taskbar. Scoped to the full
   sidebar so the collapsed (sm/sm-hover) flyout menus keep overflow visible. */
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu {
    display: flex;
    flex-direction: column;
}
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > .navbar-brand-box,
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > .sidebar-user,
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > .mtx-menu-search,
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > #two-column-menu,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > .navbar-brand-box,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > .sidebar-user,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > .mtx-menu-search,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > #two-column-menu {
    flex: 0 0 auto;
}
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > #scrollbar,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > #scrollbar {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > #scrollbar .simplebar-wrapper,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > #scrollbar .simplebar-wrapper {
    height: 100% !important;
    max-height: 100% !important;
}
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > #scrollbar .simplebar-content-wrapper,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu > #scrollbar .simplebar-content-wrapper {
    max-height: 100% !important;
    overflow-y: auto !important;
}

/* Clearly visible, draggable sidebar scrollbar (for users without a wheel). */
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu #scrollbar .simplebar-track.simplebar-vertical,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu #scrollbar .simplebar-track.simplebar-vertical {
    width: 10px;
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
}
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu #scrollbar .simplebar-scrollbar,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu #scrollbar .simplebar-scrollbar {
    width: 6px;
    right: 2px;
}
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu #scrollbar .simplebar-scrollbar:before,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu #scrollbar .simplebar-scrollbar:before,
html[data-layout="vertical"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu #scrollbar .simplebar-scrollbar.simplebar-visible:before,
html[data-layout="semibox"]:not([data-sidebar-size="sm"]):not([data-sidebar-size="sm-hover"]) .app-menu.navbar-menu #scrollbar .simplebar-scrollbar.simplebar-visible:before {
    background: var(--mtx-sidebar-accent);
    border-radius: 999px;
    opacity: 1;
}

/* ------------------------------------------------------------------ tables */
html[data-mtx-theme] .table {
    --vz-table-bg: transparent; --vz-table-color: var(--vz-body-color); --vz-table-border-color: var(--vz-border-color);
    --vz-table-striped-bg: rgba(var(--vz-body-color-rgb), .025); --vz-table-hover-bg: var(--mtx-row-hover); --vz-table-hover-color: var(--vz-body-color);
    font-variant-numeric: tabular-nums;
}
html[data-mtx-theme] .table > thead > tr > th,
html[data-mtx-theme] .table > thead th {
    background: var(--mtx-table-head); color: var(--vz-secondary-color); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--vz-border-color); white-space: nowrap; vertical-align: middle;
}
html[data-mtx-theme] .table > :not(caption) > * > * { padding: var(--mtx-cell-py) var(--mtx-cell-px); }
html[data-mtx-theme] .table-sm > :not(caption) > * > * { padding: 4px 8px; }
html[data-mtx-theme] .table > thead > tr > th { padding-top: 7px; padding-bottom: 7px; }
/* row actions stay small so they do not stretch the row height */
html[data-mtx-theme] .table td .btn-sm, html[data-mtx-theme] .table td .btn-icon { min-height: 0; padding: 2px 7px; font-size: .78rem; line-height: 1.35; }
html[data-mtx-theme] .table td .btn-icon { width: 26px; height: 26px; padding: 0; }
html[data-mtx-theme] .table td .form-check { min-height: 0; margin-bottom: 0; }
html[data-mtx-theme] .table-light { --vz-table-bg: var(--mtx-table-head); --vz-table-color: var(--vz-secondary-color); --vz-table-border-color: var(--vz-border-color); }
html[data-mtx-theme] .table-responsive { border-radius: var(--mtx-radius-sm); -webkit-overflow-scrolling: touch; max-width: 100%; }
html[data-mtx-theme] .table-responsive > .table { margin-bottom: 0; }
html[data-mtx-theme] .table-card { margin: -1rem -1rem 0; }
html[data-mtx-theme] .pagination { --vz-pagination-bg: var(--mtx-panel); --vz-pagination-border-color: var(--vz-border-color); --vz-pagination-color: var(--vz-body-color);
    --vz-pagination-active-bg: var(--vz-primary); --vz-pagination-active-border-color: var(--vz-primary); --vz-pagination-disabled-bg: var(--mtx-panel); --vz-pagination-hover-bg: var(--vz-tertiary-bg); gap: .2rem; }
html[data-mtx-theme] .page-link { border-radius: var(--mtx-radius-sm) !important; }

/* DataTables */
html[data-mtx-theme] div.dt-container .dt-search input, html[data-mtx-theme] div.dt-container .dt-length select { background-color: var(--vz-input-bg-custom); color: var(--vz-body-color); border-color: var(--vz-border-color); }
html[data-mtx-theme] div.dt-container .dt-info { color: var(--vz-secondary-color); font-size: .8rem; }
html[data-mtx-theme] table.dataTable > tbody > tr.selected > * { box-shadow: inset 0 0 0 9999px rgba(var(--vz-primary-rgb), .15); }
html[data-mtx-theme] table.dataTable thead > tr > th.dt-orderable-asc:hover, html[data-mtx-theme] table.dataTable thead > tr > th.dt-orderable-desc:hover { outline: 2px solid rgba(var(--vz-primary-rgb), .35); }

/* ------------------------------------------------------------------ filters & forms */
html[data-mtx-theme] .form-control, html[data-mtx-theme] .form-select, html[data-mtx-theme] .input-group-text {
    background-color: var(--vz-input-bg-custom); color: var(--vz-body-color); border-color: var(--vz-border-color); border-radius: var(--mtx-radius-sm);
}
html[data-mtx-theme] .form-control::placeholder { color: rgba(var(--vz-secondary-color-rgb), .8); }
html[data-mtx-theme] .form-control:focus, html[data-mtx-theme] .form-select:focus, html[data-mtx-theme] .form-check-input:focus { border-color: rgba(var(--vz-primary-rgb), .7); box-shadow: var(--mtx-focus); }
html[data-mtx-theme] .form-control:disabled, html[data-mtx-theme] .form-select:disabled { background-color: var(--vz-tertiary-bg); opacity: .8; }
html[data-mtx-theme] .form-label { font-weight: 600; font-size: .78rem; color: var(--vz-secondary-color); margin-bottom: .25rem; }
html[data-mtx-theme] .form-check-input { background-color: var(--vz-input-bg-custom); border-color: rgba(var(--vz-secondary-color-rgb), .55); }
html[data-mtx-theme] .form-check-input:checked { background-color: var(--vz-primary); border-color: var(--vz-primary); }
html[data-mtx-theme] label.required::after, html[data-mtx-theme] .form-label.required::after { content: " *"; color: var(--vz-danger); }
html[data-mtx-theme] .invalid-feedback { font-weight: 500; }
html[data-mtx-theme] .invalid-feedback::before { content: "\26A0\FE0E  "; }
html[data-mtx-theme] .form-text { color: var(--vz-secondary-color); }
html[data-mtx-theme] input[type="date"], html[data-mtx-theme] input[type="datetime-local"], html[data-mtx-theme] input[type="time"] { color-scheme: light; }
html[data-mtx-theme="dark"] input[type="date"], html[data-mtx-theme="dark"] input[type="datetime-local"], html[data-mtx-theme="dark"] input[type="time"] { color-scheme: dark; }
/* filter bar: one consistent toolbar row inside cards */
html[data-mtx-theme] .mtx-filters { background: var(--vz-tertiary-bg); border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius); padding: .75rem; margin-bottom: 1rem; }

/* Choices.js / select2 / flatpickr */
html[data-mtx-theme] .choices__inner, html[data-mtx-theme] .choices__list--dropdown, html[data-mtx-theme] .choices__list[aria-expanded] { background-color: var(--vz-input-bg-custom); border-color: var(--vz-border-color); color: var(--vz-body-color); }
html[data-mtx-theme] .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--vz-primary-bg-subtle); }
html[data-mtx-theme] .select2-container--default .select2-selection--single, html[data-mtx-theme] .select2-container--default .select2-selection--multiple,
html[data-mtx-theme] .select2-dropdown { background-color: var(--vz-input-bg-custom); border-color: var(--vz-border-color); color: var(--vz-body-color); }
html[data-mtx-theme] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--vz-body-color); }
html[data-mtx-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--vz-primary); }
html[data-mtx-theme] .flatpickr-calendar { background: var(--mtx-panel); border: 1px solid var(--vz-border-color); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
html[data-mtx-theme] .flatpickr-day { color: var(--vz-body-color); }
html[data-mtx-theme] .flatpickr-day.selected, html[data-mtx-theme] .flatpickr-day.startRange, html[data-mtx-theme] .flatpickr-day.endRange { background: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }

/* ------------------------------------------------------------------ dropdowns, modals, toasts, alerts */
html[data-mtx-theme] .dropdown-menu { --vz-dropdown-bg: var(--mtx-panel); --vz-dropdown-border-color: var(--vz-border-color); --vz-dropdown-link-color: var(--vz-body-color);
    --vz-dropdown-link-hover-bg: var(--vz-tertiary-bg); --vz-dropdown-link-active-bg: var(--vz-primary-bg-subtle); --vz-dropdown-link-active-color: var(--vz-primary);
    background: var(--mtx-panel); border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
html[data-mtx-theme] .modal-content { background: var(--mtx-panel); color: var(--vz-body-color); border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius); }
html[data-mtx-theme] .modal-header, html[data-mtx-theme] .modal-footer { border-color: var(--vz-border-color); }
html[data-mtx-theme="dark"] .modal-backdrop.show { opacity: .7; }
html[data-mtx-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-mtx-theme] .alert { border-radius: var(--mtx-radius); border-width: 1px; }
html[data-mtx-theme="dark"] .alert-success { --vz-alert-bg: rgba(63, 176, 143, .12); --vz-alert-color: #8fe0c6; --vz-alert-border-color: rgba(63, 176, 143, .35); }
html[data-mtx-theme="dark"] .alert-warning { --vz-alert-bg: rgba(217, 164, 65, .12); --vz-alert-color: #f0cb85; --vz-alert-border-color: rgba(217, 164, 65, .35); }
html[data-mtx-theme="dark"] .alert-danger { --vz-alert-bg: rgba(224, 112, 89, .12); --vz-alert-color: #f2a594; --vz-alert-border-color: rgba(224, 112, 89, .35); }
html[data-mtx-theme="dark"] .alert-info { --vz-alert-bg: rgba(79, 182, 207, .12); --vz-alert-color: #9bd9e8; --vz-alert-border-color: rgba(79, 182, 207, .35); }
html[data-mtx-theme] .toast { background: var(--mtx-panel); border: 1px solid var(--vz-border-color); }
html[data-mtx-theme="dark"] .swal2-popup { background: var(--mtx-panel) !important; color: var(--vz-body-color) !important; }
html[data-mtx-theme="dark"] .swal2-title, html[data-mtx-theme="dark"] .swal2-html-container { color: var(--vz-body-color) !important; }

/* badges: text always carries the meaning (never colour only) */
html[data-mtx-theme] .badge { font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .32em .65em; }
html[data-mtx-theme="dark"] .bg-light { background-color: var(--vz-light) !important; color: var(--vz-body-color) !important; }
html[data-mtx-theme="dark"] .bg-white { background-color: var(--mtx-panel) !important; }
html[data-mtx-theme="dark"] .text-dark { color: var(--vz-body-color) !important; }
html[data-mtx-theme="dark"] .text-body { color: var(--vz-body-color) !important; }
html[data-mtx-theme="dark"] .border, html[data-mtx-theme="dark"] .border-top, html[data-mtx-theme="dark"] .border-bottom { border-color: var(--vz-border-color) !important; }
html[data-mtx-theme="dark"] .bg-light-subtle, html[data-mtx-theme="dark"] .bg-body-tertiary { background-color: var(--vz-tertiary-bg) !important; }
html[data-mtx-theme="dark"] .list-group-item { background-color: var(--mtx-panel); color: var(--vz-body-color); border-color: var(--vz-border-color); }
html[data-mtx-theme="dark"] .nav-tabs { --vz-nav-tabs-link-active-bg: var(--mtx-panel); --vz-nav-tabs-border-color: var(--vz-border-color); --vz-nav-tabs-link-active-border-color: var(--vz-border-color) var(--vz-border-color) var(--mtx-panel); }
html[data-mtx-theme="dark"] .progress { background-color: var(--vz-tertiary-bg); }
html[data-mtx-theme="dark"] .footer { border-top: 1px solid var(--vz-border-color); }

/* the head-css inline styles of nav tabs: follow the theme */
html[data-mtx-theme] .card-header .nav-tabs-custom .nav-item .nav-link { color: var(--vz-secondary-color); }
html[data-mtx-theme] .card-header .nav-tabs-custom .nav-item .nav-link.active { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }
html[data-mtx-theme="dark"] .card-header .nav-tabs-custom .nav-item .nav-link.active { color: #0d0f12; }
html[data-mtx-theme] .nav-tabs-custom { border-bottom-color: var(--vz-border-color); }
html[data-mtx-theme] .nav-pills { --vz-nav-pills-link-active-bg: var(--vz-primary); }
/* compact pill tabs (section sub-navigation such as Billing) */
html[data-mtx-theme] .nav-pills.nav-sm { gap: 2px !important; margin-bottom: var(--mtx-gap) !important; }
html[data-mtx-theme] .nav-pills.nav-sm .nav-link { padding: 4px 10px; font-size: .8125rem; line-height: 1.4; }
/* DataTables top bar shares one row with the table's period / CSV strip */
html[data-mtx-theme] .billing-ajax-table .bt-bar { display: inline-flex; align-items: center; gap: var(--mtx-space-2); margin: 0 0 0 var(--mtx-space-3); }
html[data-mtx-theme] .billing-ajax-table .bt-bar:empty { display: none; }
html[data-mtx-theme] div.dt-container > .row { margin-top: 0 !important; margin-bottom: var(--mtx-space-2); row-gap: var(--mtx-space-2); }
html[data-mtx-theme] div.dt-container > .row:last-child { margin-bottom: 0; }
html[data-mtx-theme] div.dt-container .dt-length select, html[data-mtx-theme] div.dt-container .dt-search input { height: var(--mtx-ctl-h); min-height: var(--mtx-ctl-h); padding-top: 3px; padding-bottom: 3px; font-size: .8125rem; }

/* loading / empty / error / unavailable states */
html[data-mtx-theme] .mtx-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1.75rem 1rem; color: var(--vz-secondary-color); text-align: center; }
html[data-mtx-theme] .mtx-state i { font-size: 1.6rem; opacity: .8; }
html[data-mtx-theme] .mtx-state.is-error { color: var(--vz-danger); }
html[data-mtx-theme] .spinner-border { color: var(--vz-primary); }

/* scrollbars in dark */
html[data-mtx-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-mtx-theme="dark"] ::-webkit-scrollbar-thumb { background: #2f343c; border-radius: 6px; }
html[data-mtx-theme="dark"] ::-webkit-scrollbar-track { background: #0f1114; }

/* ------------------------------------------------------------------ appearance selector */
.mtx-theme-menu { width: 300px; padding: .75rem; }
.mtx-theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mtx-theme-option { border: 2px solid var(--vz-border-color); border-radius: var(--mtx-radius, .5rem); background: transparent; padding: .35rem; text-align: center; cursor: pointer; color: var(--vz-body-color); font-size: .75rem; font-weight: 600; }
.mtx-theme-option:hover { border-color: rgba(var(--vz-primary-rgb), .6); }
.mtx-theme-option[aria-checked="true"] { border-color: var(--vz-primary); box-shadow: var(--mtx-focus, 0 0 0 .2rem rgba(64, 81, 137, .3)); }
.mtx-theme-option .mtx-check { display: none; }
.mtx-theme-option[aria-checked="true"] .mtx-check { display: inline; color: var(--vz-primary); }
.mtx-swatch { display: grid; grid-template-columns: 30% 70%; height: 46px; border-radius: .3rem; overflow: hidden; margin-bottom: .3rem; border: 1px solid rgba(0, 0, 0, .08); }
.mtx-swatch > span { display: block; }
.mtx-swatch .p { display: grid; grid-template-rows: 30% 70%; }
.mtx-swatch .p > i { display: block; margin: 4px; border-radius: 2px; }
.mtx-swatch.light .s { background: #0f2747; } .mtx-swatch.light .p { background: #f3f6fb; } .mtx-swatch.light .p > i:first-child { background: #1d64d8; } .mtx-swatch.light .p > i:last-child { background: #fff; border: 1px solid #e1e7ef; }
.mtx-swatch.neutral .s { background: #34393d; } .mtx-swatch.neutral .p { background: #efede8; } .mtx-swatch.neutral .p > i:first-child { background: #3f6475; } .mtx-swatch.neutral .p > i:last-child { background: #fbfaf7; border: 1px solid #e1ddd4; }
.mtx-swatch.dark .s { background: #08090b; } .mtx-swatch.dark .p { background: #0d0f12; } .mtx-swatch.dark .p > i:first-child { background: #6b9cf0; } .mtx-swatch.dark .p > i:last-child { background: #16191e; border: 1px solid #2a2f37; }


/* ------------------------------------------------------------------ page density (shared, all themes) */
/* Velzon: 24px page gutter + 24px title margin + 16px card padding + 47px table rows. Tightened to the token scale. */
html[data-mtx-theme] .page-content { padding: calc(70px + var(--mtx-space-3)) var(--mtx-space-1) 52px; }
html[data-mtx-theme] .page-content > .container-fluid { padding-left: var(--mtx-space-3); padding-right: var(--mtx-space-3); }
html[data-mtx-theme] .page-content .row { --vz-gutter-x: var(--mtx-gap); }
html[data-mtx-theme] .page-content .row.g-0 { --vz-gutter-x: 0; }
html[data-mtx-theme] .page-content .row.g-1 { --vz-gutter-x: .25rem; }
html[data-mtx-theme] .page-content .row.g-2 { --vz-gutter-x: .5rem; }
html[data-mtx-theme] .page-content .row > * > .card, html[data-mtx-theme] .page-content .card { margin-bottom: var(--mtx-gap); }
html[data-mtx-theme] .footer { height: 44px; padding: 12px var(--mtx-space-4); font-size: .78rem; }

/* controls: compact (32px) in toolbars / small variants, 36px in regular forms */
html[data-mtx-theme] .form-control, html[data-mtx-theme] .form-select { min-height: var(--mtx-ctl-h-md); padding-top: .35rem; padding-bottom: .35rem; }
html[data-mtx-theme] .form-control-sm, html[data-mtx-theme] .form-select-sm,
html[data-mtx-theme] .input-group-sm > .form-control, html[data-mtx-theme] .input-group-sm > .form-select, html[data-mtx-theme] .input-group-sm > .input-group-text {
    min-height: var(--mtx-ctl-h); height: var(--mtx-ctl-h); padding-top: 4px; padding-bottom: 4px; font-size: .8125rem;
}
html[data-mtx-theme] textarea.form-control-sm, html[data-mtx-theme] select[multiple].form-select-sm { height: auto; }
html[data-mtx-theme] .btn { padding: .35rem .8rem; }
html[data-mtx-theme] .btn-sm, html[data-mtx-theme] .btn-group-sm > .btn { padding: 4px 10px; font-size: .8125rem; min-height: var(--mtx-ctl-h); }
html[data-mtx-theme] .btn-sm > i { font-size: .95em; vertical-align: -1px; }

/* ------------------------------------------------------------------ filter toolbar (reusable) */
/*
 * <form class="mtx-toolbar">
 *   <div class="mtx-field mtx-w-dt"><label>From</label><input class="form-control form-control-sm"></div>
 *   ...
 *   <div class="mtx-toolbar-actions">Filter / Reset / Export / Advanced toggle</div>
 *   <div class="mtx-adv">less frequently used filters (opens automatically when one is set)</div>
 * </form>
 * Fields are sized by content (width modifiers), not by equal Bootstrap columns; the bar wraps by itself.
 */
html[data-mtx-theme] .mtx-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mtx-space-2) 10px;
    padding: 10px var(--mtx-space-3); margin-bottom: var(--mtx-gap);
    background: var(--vz-tertiary-bg); border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius);
}
html[data-mtx-theme] .mtx-toolbar.is-plain { background: transparent; border: 0; padding: 0; }
html[data-mtx-theme] .mtx-field { display: flex; flex-direction: column; gap: 3px; flex: 0 1 auto; width: var(--mtx-w, 140px); min-width: 0; max-width: 100%; }
html[data-mtx-theme] .mtx-field > label, html[data-mtx-theme] .mtx-field > .mtx-label {
    margin: 0; font-size: var(--mtx-label-fs); font-weight: 600; line-height: 1.2; color: var(--vz-secondary-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-mtx-theme] .mtx-field > .form-control, html[data-mtx-theme] .mtx-field > .form-select, html[data-mtx-theme] .mtx-field > .input-group { width: 100%; margin: 0 !important; }
html[data-mtx-theme] .mtx-field .form-control, html[data-mtx-theme] .mtx-field .form-select { min-height: var(--mtx-ctl-h); height: var(--mtx-ctl-h); padding-top: 4px; padding-bottom: 4px; font-size: .8125rem; }
html[data-mtx-theme] .mtx-field select[multiple] { height: auto; }
html[data-mtx-theme] .mtx-field input[type="datetime-local"], html[data-mtx-theme] .mtx-field input[type="date"] { padding-left: 6px; padding-right: 4px; }
html[data-mtx-theme] .mtx-field .form-check { min-height: var(--mtx-ctl-h); display: flex; align-items: center; gap: .4rem; margin: 0; padding-left: 0; }
html[data-mtx-theme] .mtx-field .form-check .form-check-input { margin: 0; float: none; }
html[data-mtx-theme] .mtx-field .form-switch { padding-left: 0; }
/* widths sized to content */
html[data-mtx-theme] .mtx-w-xs { --mtx-w: 76px; }   /* MCC, MNC, short codes */
html[data-mtx-theme] .mtx-w-sm { --mtx-w: 116px; }  /* status, short selects */
html[data-mtx-theme] .mtx-w-md { --mtx-w: 140px; }  /* ids, numbers, sender */
html[data-mtx-theme] .mtx-w-lg { --mtx-w: 180px; }  /* company / customer / provider / network selectors */
html[data-mtx-theme] .mtx-w-xl { --mtx-w: 240px; }
html[data-mtx-theme] .mtx-w-date { --mtx-w: 138px; }
html[data-mtx-theme] .mtx-w-dt { --mtx-w: 172px; }  /* datetime-local */
html[data-mtx-theme] .mtx-w-auto { width: auto; }
html[data-mtx-theme] .mtx-grow { flex: 1 1 var(--mtx-w, 160px); }
/* a related pair/trio kept on one line (From - To - Preset) */
html[data-mtx-theme] .mtx-fieldset { display: flex; align-items: flex-end; gap: 6px; flex: 0 1 auto; min-width: 0; padding-right: var(--mtx-space-2); margin-right: 2px; border-right: 1px solid var(--vz-border-color); }
html[data-mtx-theme] .mtx-fieldset:last-of-type { border-right: 0; }
html[data-mtx-theme] .mtx-toolbar-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px; margin-left: auto; }
html[data-mtx-theme] .mtx-toolbar-actions .btn { white-space: nowrap; }
html[data-mtx-theme] .mtx-adv-toggle { color: var(--vz-link-color); }
html[data-mtx-theme] .mtx-adv-toggle .badge { margin-left: 2px; }
html[data-mtx-theme] .mtx-adv-toggle i.ri-arrow-down-s-line { transition: transform .15s; display: inline-block; }
html[data-mtx-theme] .mtx-toolbar.is-adv-open .mtx-adv-toggle i.ri-arrow-down-s-line { transform: rotate(180deg); }
html[data-mtx-theme] .mtx-adv { display: none; flex: 1 0 100%; flex-wrap: wrap; align-items: flex-end; gap: var(--mtx-space-2) 10px; padding-top: var(--mtx-space-2); border-top: 1px dashed var(--vz-border-color); }
html[data-mtx-theme] .mtx-toolbar.is-adv-open .mtx-adv { display: flex; }
/* a grouped block inside a toolbar (e.g. CH report Group By) */
html[data-mtx-theme] .mtx-subpanel { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--mtx-space-2) var(--mtx-space-3);
    padding: var(--mtx-space-2) 10px; background: var(--mtx-panel); border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius-sm); }
html[data-mtx-theme] .mtx-subpanel > .mtx-toolbar-note { margin-top: -2px; }
html[data-mtx-theme] .mtx-toolbar-note { flex: 1 0 100%; font-size: .75rem; color: var(--vz-secondary-color); margin: 0; }
/* list-page filter bar: the simple "search + a few selects + Filter / Clear" forms of index pages.
   Children keep their Bootstrap col-* markup; inside .mtx-listbar they size to their content instead. */
html[data-mtx-theme] .mtx-listbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mtx-space-2) 10px; margin: 0 0 var(--mtx-gap); }
html[data-mtx-theme] .mtx-listbar > [class*="col"] { flex: 0 1 auto; width: auto; max-width: 100%; padding: 0; margin: 0; }
html[data-mtx-theme] .mtx-listbar > [class*="col"]:has(> input[name="search"]), html[data-mtx-theme] .mtx-listbar > [class*="col"]:has(> input[name="q"]),
html[data-mtx-theme] .mtx-listbar > [class*="col"]:has(> .input-group) { width: 260px; }
html[data-mtx-theme] .mtx-listbar .form-select, html[data-mtx-theme] .mtx-listbar select.form-control { width: auto; min-width: 104px; max-width: 260px; }
html[data-mtx-theme] .mtx-listbar input[type="date"] { width: 132px; }
/* short selections (status, role, type, period...) stay narrow; entity pickers keep room for readable names */
html[data-mtx-theme] .mtx-listbar select:not([name*="company"]):not([name*="partner"]):not([name*="customer"]):not([name*="provider"]):not([name*="client"]):not([name*="network"]):not([name*="operator"]):not([name*="country"]) { max-width: 180px; }
html[data-mtx-theme] .mtx-listbar input[type="datetime-local"] { width: 172px; }
html[data-mtx-theme] .mtx-listbar .form-control, html[data-mtx-theme] .mtx-listbar .form-select { min-height: var(--mtx-ctl-h); height: var(--mtx-ctl-h); padding-top: 4px; padding-bottom: 4px; font-size: .8125rem; }
html[data-mtx-theme] .mtx-listbar .form-label { font-size: var(--mtx-label-fs); font-weight: 600; margin-bottom: 3px; color: var(--vz-secondary-color); }
html[data-mtx-theme] .mtx-listbar .btn { white-space: nowrap; }

/* results strip between toolbar and table: totals left, secondary actions right */
html[data-mtx-theme] .mtx-results-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mtx-space-2); margin-bottom: var(--mtx-space-2); min-height: 28px; }
html[data-mtx-theme] .mtx-results-bar .badge { font-size: .75rem; }
html[data-mtx-theme] .mtx-table-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--mtx-space-2); margin-top: var(--mtx-space-2); }
html[data-mtx-theme] .mtx-table-footer .form-select-sm { width: auto; }
/* contained horizontal scroll for wide report tables */
html[data-mtx-theme] .mtx-table-scroll { overflow-x: auto; border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius-sm); }
html[data-mtx-theme] .mtx-table-scroll > .table { margin-bottom: 0; }
html[data-mtx-theme] .mtx-table-scroll > .table > thead th { position: sticky; top: 0; z-index: 1; }

/* ------------------------------------------------------------------ sidebar menu search */
html[data-mtx-theme] .mtx-menu-search { position: relative; margin: 6px 10px 8px; }
html[data-mtx-theme] .mtx-menu-search > i {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: .85rem;
    color: var(--mtx-sidebar-title); pointer-events: none;
}
html[data-mtx-theme] .mtx-menu-search input {
    width: 100%; height: 30px; padding: 4px 26px 4px 26px; font-size: .8125rem;
    color: var(--mtx-sidebar-active); background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--mtx-radius-sm);
}
html[data-mtx-theme] .mtx-menu-search input::placeholder { color: var(--mtx-sidebar-title); }
html[data-mtx-theme] .mtx-menu-search input:focus { outline: none; border-color: var(--mtx-sidebar-accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, .18); }
html[data-mtx-theme] .mtx-menu-clear {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--mtx-sidebar-text); font-size: .9rem; line-height: 1; padding: 2px 4px;
}
html[data-mtx-theme] .mtx-menu-noresults { margin: 0 14px 6px; font-size: .78rem; color: var(--mtx-sidebar-title); }
html[data-mtx-theme] #navbar-nav .mtx-menu-hidden { display: none !important; }
/* while searching, every visible link shows its full path hierarchy */
html[data-mtx-theme] #navbar-nav.mtx-menu-searching .nav-sm .nav-link { padding-left: 1.5rem; }

/* horizontal layout: keep the menu search inline at the end of the top nav instead of its own full-width row */
@media (min-width: 1025px) {
    html[data-layout="horizontal"] .app-menu.navbar-menu { display: flex; align-items: center; }
    html[data-layout="horizontal"] .app-menu.navbar-menu > #two-column-menu { display: none; }
    html[data-layout="horizontal"] .app-menu.navbar-menu > #scrollbar { flex: 1 1 auto; min-width: 0; order: 1; }
    html[data-layout="horizontal"] .app-menu.navbar-menu > .mtx-menu-search { order: 2; flex: 0 0 200px; margin: 0 0 0 auto; }
    /* when JS relocates the search into the topbar for horizontal, style it for the light header */
    html[data-layout="horizontal"] #page-topbar .mtx-topbar-search {
        position: relative; flex: 1 1 auto; max-width: 340px; margin: 0 1.5rem; align-self: center;
    }
    html[data-layout="horizontal"] #page-topbar .mtx-topbar-search .mtx-menu-search { margin: 0; }
    html[data-layout="horizontal"] #page-topbar .mtx-topbar-search .mtx-menu-search > i { color: var(--vz-secondary-color); }
    html[data-layout="horizontal"] #page-topbar .mtx-topbar-search .mtx-menu-search input {
        color: var(--vz-body-color); background: var(--vz-tertiary-bg); border-color: var(--vz-border-color);
    }
    html[data-layout="horizontal"] #page-topbar .mtx-topbar-search .mtx-menu-search input::placeholder { color: var(--vz-secondary-color); }
    html[data-layout="horizontal"] #page-topbar .mtx-topbar-search .mtx-menu-search input:focus {
        border-color: var(--vz-primary); box-shadow: 0 0 0 2px rgba(var(--vz-primary-rgb), .18);
    }
    html[data-layout="horizontal"] #page-topbar .mtx-topbar-search .mtx-menu-search .mtx-menu-clear { color: var(--vz-secondary-color); }
    html[data-layout="horizontal"] #page-topbar .mtx-topbar-search .mtx-menu-noresults {
        position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1055; width: auto; margin: 0; padding: 6px 10px;
        background: var(--vz-body-bg); border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius-sm);
        color: var(--vz-secondary-color);
    }
    html[data-layout="horizontal"] .app-menu.navbar-menu > .mtx-menu-noresults {
        position: absolute; right: .75rem; top: calc(100% + 2px); z-index: 1001; width: 200px; margin: 0; padding: 6px 10px;
        background: var(--vz-body-bg); border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius-sm);
        color: var(--vz-secondary-color);
    }
    /* match the vertical sidebar menu colors (light text on the dark sidebar surface) */
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .nav-link { color: var(--mtx-sidebar-text); }
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .nav-link:hover,
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .nav-link:focus,
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .nav-link.active,
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"],
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .nav-sm .nav-link:hover,
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .nav-sm .nav-link.active { color: var(--mtx-sidebar-active); }
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"]:after { color: inherit; }
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .menu-dropdown {
        background-color: var(--mtx-sidebar-bg); border-color: var(--vz-border-color-translucent);
    }
    /* horizontal brand logo */
    html[data-layout="horizontal"] #page-topbar .horizontal-logo .logo-lg img { height: 50px; width: auto; }
}
html[data-layout="horizontal"] .app-menu.navbar-menu > #scrollbar { padding-top: 10px; padding-bottom: 10px; }
/* horizontal top-level active link: small left inset */
html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav > .nav-item > .nav-link.active { padding-left: 5px !important; margin-right: 0 !important; }
/* horizontal layout on mobile: active links flush right + transparent nested dropdowns */
@media (max-width: 1024.98px) {
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .nav-link.active { margin-right: 0 !important; }
    html[data-layout="horizontal"] .app-menu.navbar-menu .navbar-nav .menu-dropdown.show { background: transparent !important; }
}

/* ------------------------------------------------------------------ shared AJAX table */
html[data-mtx-theme] .mtx-dt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
html[data-mtx-theme] .mtx-dt-search { position: relative; flex: 0 1 300px; min-width: 180px; }
html[data-mtx-theme] .mtx-dt-search > i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--vz-secondary-color); font-size: .85rem; }
html[data-mtx-theme] .mtx-dt-search input { padding-left: 26px; }
html[data-mtx-theme] .mtx-dt-table { margin: 0; }
html[data-mtx-theme] .mtx-dt-table > thead > tr > th.mtx-dt-sort { user-select: none; }
html[data-mtx-theme] .mtx-dt-table > thead > tr > th.mtx-dt-sort:hover { color: var(--vz-primary); }
html[data-mtx-theme] .mtx-dt-table > thead > tr > th.sort-asc::after { content: " \25B2"; font-size: .6rem; color: var(--vz-primary); }
html[data-mtx-theme] .mtx-dt-table > thead > tr > th.sort-desc::after { content: " \25BC"; font-size: .6rem; color: var(--vz-primary); }
html[data-mtx-theme] .mtx-dt .mtx-table-scroll { max-height: none; }
html[data-mtx-theme] .mtx-dt.is-loading .mtx-dt-table { cursor: progress; }
html[data-mtx-theme] .mtx-dt-cols { max-height: 320px; overflow: auto; }
html[data-mtx-theme] .mtx-dt-cols .dropdown-item { cursor: pointer; font-size: .8125rem; }

/* ------------------------------------------------------------------ compact hint strip */
html[data-mtx-theme] .mtx-hint {
    display: flex; align-items: flex-start; gap: .4rem; padding: 6px 10px; font-size: .78rem;
    color: var(--vz-secondary-color); background: var(--vz-tertiary-bg);
    border: 1px solid var(--vz-border-color); border-radius: var(--mtx-radius-sm);
}
html[data-mtx-theme] .mtx-hint > i { color: var(--vz-info); margin-top: 1px; }

/* ------------------------------------------------------------------ Dial Plan routing (compact rows)
 * A routing rule (SMSC row) must be readable at ~30px so several rules fit
 * on one desktop screen without sacrificing the MCC/MNC identity.
 */
html[data-mtx-theme] .prefix-card { margin-bottom: 8px; }
html[data-mtx-theme] .prefix-card > .card { margin-bottom: 0; }
html[data-mtx-theme] .prefix-card > .card > .card-header { min-height: 34px; background: var(--mtx-table-head); }
html[data-mtx-theme] .prefix-card > .card > .card-header .input-group-text { background: var(--vz-tertiary-bg); color: var(--vz-secondary-color); border-color: var(--vz-border-color); }
html[data-mtx-theme] .prefix-card > .card > .card-footer { padding: 4px 8px; background: var(--vz-tertiary-bg) !important; }
html[data-mtx-theme] .dc-smsc-table > thead > tr > th { padding: 4px 5px; font-size: .68rem; }
html[data-mtx-theme] .dc-smsc-table > tbody > tr > td { padding: 3px 5px; vertical-align: middle; }
html[data-mtx-theme] .dc-smsc-table .form-control-sm,
html[data-mtx-theme] .dc-smsc-table .form-select-sm,
html[data-mtx-theme] .dc-smsc-table .input-group-sm .form-control,
html[data-mtx-theme] .dc-smsc-table .input-group-sm .input-group-text { min-height: 26px; height: 26px; padding: 2px 6px; font-size: .76rem; }
html[data-mtx-theme] .dc-smsc-table input[type="time"] { min-width: 84px; }
html[data-mtx-theme] .dc-smsc-table .form-check-input { margin: 0; }
html[data-mtx-theme] .dc-smsc-table .btn-sm { min-height: 26px; padding: 1px 5px; font-size: .72rem; }
html[data-mtx-theme] .dc-smsc-table .mnp-policy.opacity-50 { opacity: .55; }
html[data-mtx-theme] .fw-unassign { opacity: .7; }
html[data-mtx-theme] .fw-unassign:hover { opacity: 1; }

/* ------------------------------------------------------------------ global density pass
 * Applied once here (not per page) so every module shares one compact rhythm.
 */
html[data-mtx-theme] .card-body .row { --vz-gutter-x: var(--mtx-gap); --vz-gutter-y: 8px; }
html[data-mtx-theme] .card-body .mb-3 { margin-bottom: .7rem !important; }
html[data-mtx-theme] .card-body .mt-3 { margin-top: .7rem !important; }
html[data-mtx-theme] .card-body .mb-4 { margin-bottom: .9rem !important; }
html[data-mtx-theme] .card-header h5, html[data-mtx-theme] .card-title { font-size: .95rem; }
html[data-mtx-theme] .page-content h4 { font-size: 1.05rem; }
html[data-mtx-theme] .modal-header { padding: 10px 14px; }
html[data-mtx-theme] .modal-body { padding: 12px 14px; }
html[data-mtx-theme] .modal-footer { padding: 8px 14px; }
html[data-mtx-theme] .alert { padding: .55rem .8rem; }
html[data-mtx-theme] .breadcrumb { margin-bottom: 0; }
html[data-mtx-theme] .table > tbody > tr > td .badge { font-size: .68rem; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 767.98px) {
    html[data-mtx-theme] .page-title-box { flex-wrap: wrap; gap: .25rem; }
    html[data-mtx-theme] .card-body { padding: var(--mtx-space-3); }
    html[data-mtx-theme] .page-content > .container-fluid { padding-left: var(--mtx-space-2); padding-right: var(--mtx-space-2); }
    /* touch targets */
    html[data-mtx-theme] .mtx-field .form-control, html[data-mtx-theme] .mtx-field .form-select,
    html[data-mtx-theme] .form-control-sm, html[data-mtx-theme] .form-select-sm, html[data-mtx-theme] .btn-sm, html[data-mtx-theme] .btn { min-height: 40px; height: auto; }
    html[data-mtx-theme] .mtx-field { flex: 1 1 calc(50% - 10px); width: auto; }
    html[data-mtx-theme] .mtx-field.mtx-w-xs { flex-basis: calc(25% - 10px); }
    html[data-mtx-theme] .mtx-field.mtx-w-dt, html[data-mtx-theme] .mtx-field.mtx-w-xl { flex-basis: 100%; }
    html[data-mtx-theme] .mtx-fieldset { flex: 1 1 100%; flex-wrap: wrap; border-right: 0; padding-right: 0; }
    html[data-mtx-theme] .mtx-toolbar-actions { flex: 1 1 100%; justify-content: flex-end; }
    html[data-mtx-theme] .mtx-listbar > [class*="col"] { flex: 1 1 calc(50% - 10px); }
    html[data-mtx-theme] .mtx-listbar > [class*="col"]:has(> input[name="search"]) { flex-basis: 100%; }
    html[data-mtx-theme] .mtx-listbar .form-select, html[data-mtx-theme] .mtx-listbar select.form-control, html[data-mtx-theme] .mtx-listbar input[type="date"] { width: 100%; max-width: none; }
    html[data-mtx-theme] .mtx-kpi .mtx-kpi-value { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-mtx-theme] * { transition: none !important; animation-duration: .01ms !important; }
}

/* Dark: the muted accent fills are light enough that white text loses contrast; use near-black text on them */
html[data-mtx-theme="dark"] .card.bg-primary.text-white, html[data-mtx-theme="dark"] .card.bg-info.text-white,
html[data-mtx-theme="dark"] .card.bg-warning.text-white, html[data-mtx-theme="dark"] .card.bg-success.text-white { color: #0d0f12 !important; }
/* DataTables (Responsive) hides columns that don't fit: let long headers wrap rather than lose columns */
html[data-mtx-theme] div.dt-container table.dataTable thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }