/* ============================================================
   NEXORA — THE single stylesheet (served by NEXORA.UI at
   _content/NEXORA.UI/css/nexora.css, linked once per host).
   Sections (order preserves the historic cascade):
     1. identity  — Account/forms bridge (was identity.css)
     2. shell     — tokens + sidebar/topbar/statusbar/dialogs (was erp-shell.css)
     3. table     — erp-table language (was erp-table.css)
     4. wizard    — import/export wizards (was erp-wizard.css)
      5. platform  — platform dashboard stat cards (was Admin app.css)
      6. fonts     — DIN Next LT Arabic default for the Arabic UI
   Bodies are verbatim merges; token completeness is follow-up work.
   Theme changes happen HERE and nowhere else.
   ============================================================ */

/* ================= 1. IDENTITY ================= */
/* Skip link (a11y): visually hidden until keyboard focus, then pinned
   top-start above all chrome. Target #main-content carries tabindex="-1". */
.skip-link {
    position: fixed;
    top: -48px;
    inset-inline-start: 12px;
    z-index: 2000;
    padding: 8px 14px;
    border-radius: 8px;
    background: #2A3F54;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: top 0.15s;
}
.skip-link:focus-visible {
    top: 12px;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Reduced motion: kill ambient + entrance animation for users who ask. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* Identity UI bridge — minimal styling for the stock ASP.NET Core Account pages
   (Login/Register/Manage), which use Bootstrap class names but must stay on
   plain SSR-safe inputs for cookie-auth form posts. Covers only the subset
   used under Components/Account. Brand color matches NexoraTheme primary. */

#blazor-error-ui {
    background: #ffd500;
    color: #1a1a1a;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui a {
    color: inherit;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* grid (subset) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.col-md-4, .col-md-6, .col-md-12,
.col-lg-3, .col-lg-4, .col-lg-6, .col-lg-9 {
    position: relative;
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

@media (min-width: 768px) {
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-offset-2 { margin-left: 16.666667%; }
}

/* forms */
.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #b6bfc7;
    border-radius: 4px;
}

.form-control:focus {
    border-color: #2A3F54;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(42, 63, 84, 0.25);
}

.form-control[disabled] {
    background-color: #e9ecef;
}

.form-floating {
    position: relative;
    margin-bottom: 1rem;
}

.form-floating > label {
    display: block;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.25rem;
}

.form-label {
    display: inline-block;
    margin-bottom: 0.25rem;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.4rem;
    vertical-align: middle;
    accent-color: #2A3F54;
}

.mb-3 { margin-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    color: #fff;
    background-color: #2A3F54;
    border-color: #2A3F54;
}

.btn-primary:hover {
    background-color: #1E2E3F;
    border-color: #1E2E3F;
}

.btn-lg {
    padding: 0.6rem 1.25rem;
    font-size: 1.1rem;
}

.w-100 { width: 100%; }

.btn-link {
    background: none;
    border: none;
    color: #2A3F54;
    cursor: pointer;
    padding: 0.25rem;
}

/* alerts */
.alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }

/* text helpers */
.text-danger { color: #b32121; }
.text-secondary { color: rgba(0, 0, 0, 0.6); }

/* layout helpers */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }

/* ================= 2. SHELL ================= */
/* NEXORA ERP shell — design tokens + shell frame.
   sidebar / topbar / statusbar / layout / RTL / responsive. */

/* ---- Tokens ---- */
:root {
    --erp-sidebar-bg: #0f172a;
    --erp-sidebar-surface: #1e293b;
    --erp-sidebar-border: #1e293b;
    --erp-sidebar-text: #e2e8f0;
    --erp-sidebar-muted: #64748b;
    --erp-sidebar-link: #cbd5e1;
    --erp-sidebar-link-hover-bg: #1e293b;
    --erp-sidebar-link-hover-text: #f1f5f9;
    --erp-sidebar-active-text: #38bdf8;
    --erp-accent: #6366f1;
    --erp-search-bg: #1e293b;
    --erp-search-border: #26314a;
    --erp-topbar-bg: #ffffff;
    --erp-topbar-text: #0f172a;
    --erp-topbar-muted: #64748b;
    --erp-topbar-faint: #94a3b8;
    --erp-topbar-line: #e2e8f0;
    --erp-statusbar-bg: #ffffff;
    --erp-statusbar-text: #64748b;
    --erp-ok: #22c55e;
    --erp-danger: #ef4444;
    --erp-sidebar-w: 260px;
    --erp-rail-w: 72px;
    --erp-drawer-w: 280px;
    --erp-topbar-h: 72px;
    --erp-statusbar-h: 40px;
    --erp-mobile-bp: 992px;
    /* Shared report tokens (moved from the isolated Sms Reports stylesheet:
       Blazor scopes :root there into a selector that never matches, leaving
       every var() on that page undefined). */
    --sky: #38bdf8;
    --accent: #6366f1;
    --accent-d: #4f46e5;
    --accent-soft: #eef2ff;
    --ink: #0f172a;
    --ink-2: #1e293b;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --line: #e2e8f0;
    --card-line: #eef2f6;
    --bg: #f6f8fb;
    --card: #ffffff;
    --green: #059669;
    --green-soft: #ecfdf2;
    --amber: #b45309;
    --amber-soft: #fffbeb;
    --rose: #e11d48;
    --rose-soft: #fff1f2;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .05);
    --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-ar: "DIN Next LT Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* ---- Base font: Inter over MudBlazor Roboto ---- */
html, body {
    height: 100%;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* App-frame lock: the window never scrolls. .main is exactly one viewport
       tall; only .page (between the pinned topbar and statusbar) scrolls. */
    overflow: hidden;
}

/* ================= SIDEBAR ================= */
.sidebar {
    width: var(--erp-sidebar-w);
    background: var(--erp-sidebar-bg);
    color: var(--erp-sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: width 0.32s ease, transform 0.25s ease;
    /* Only the nav region scrolls (see .sidebar-nav): brand, search and
       footer stay pinned so long groups never push content off-screen. */
    overflow: hidden;
}

.sidebar-brand {
    padding: 8px 20px 16px;
    border-bottom: 1px solid var(--erp-sidebar-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

a.brand-text {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-width: 0;
}

a.brand-text img {
    flex-shrink: 0;
}

.sidebar-brand .brand-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.sidebar-brand .brand-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sidebar-brand .brand-mark {
    font-size: 48px;
    line-height: 1;
    color: var(--erp-accent);
    flex-shrink: 0;
}

.sidebar-brand .brand-vendor {
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--erp-sidebar-faint, #94a3b8);
    white-space: nowrap;
}

.sidebar-brand .brand-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #f8fafc;
    white-space: nowrap;
}

.sidebar-brand .brand-sub {
    font-weight: 400;
    font-size: 12px;
    color: var(--erp-sidebar-faint, #94a3b8);
    display: block;
    margin-top: 2px;
    white-space: nowrap;
}

/* ---- Auth layout brand (demo standard: icon + lockup, no image) ---- */
.auth-bar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}
.auth-bar-brand .brand-mark {
    font-size: 22px;
    line-height: 1;
    color: var(--erp-accent);
}
.auth-bar-brand .brand-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.auth-bar-brand .brand-vendor {
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    opacity: .75;
    white-space: nowrap;
}
.auth-bar-brand .brand-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    white-space: nowrap;
}
.auth-bar-brand .brand-sub {
    font-weight: 400;
    font-size: 10.5px;
    opacity: .7;
    white-space: nowrap;
}
.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--erp-accent);
    color: #fff;
    font-size: 24px;
}

/* ---- In-menu search ---- */
.sidebar-search {
    padding: 10px 12px 4px;
    position: relative;
    flex-shrink: 0;
}

.sidebar-search > i {
    position: absolute;
    left: 22px;
    top: 26px;
    transform: translateY(-50%);
    color: var(--erp-sidebar-muted);
    font-size: 13px;
    pointer-events: none;
}

.sidebar-search .search-clear {
    position: absolute;
    right: 18px;
    top: 26px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--erp-sidebar-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}

.sidebar-search .search-clear:hover { color: var(--erp-sidebar-text); }

.sidebar-search input {
    width: 100%;
    background: var(--erp-search-bg);
    border: 1px solid var(--erp-search-border);
    color: var(--erp-sidebar-text);
    border-radius: 8px;
    padding: 7px 30px 7px 32px;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

.sidebar-search input::placeholder { color: var(--erp-sidebar-muted); }
.sidebar-search input:focus { border-color: var(--erp-accent); }
.sidebar-search .search-empty {
    display: none;
    color: var(--erp-sidebar-muted);
    font-size: 12px;
    text-align: center;
    padding: 14px 8px;
}
.sidebar-search .search-empty.show { display: block; }

/* ---- Nav groups + links ---- */
.sidebar-nav {
    padding: 16px 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Always-visible thin scrollbar: OS overlay scrollbars hide until
       hover, leaving long groups (Inventory) with no scroll affordance. */
    scrollbar-width: thin;
    scrollbar-color: var(--erp-sidebar-muted) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--erp-sidebar-muted);
    border-radius: 999px;
}
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.sidebar-nav .nav-group {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--erp-sidebar-border);
}
.sidebar-nav .nav-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-nav .nav-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--erp-sidebar-muted);
    padding: 10px 12px;
    font-weight: 600;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: inherit;
    text-align: left;
    transition: color 0.15s;
}
.sidebar-nav .nav-label:hover { color: #cbd5e1; }
.sidebar-nav .nav-label .nav-chevron {
    font-size: 10px;
    color: #475569;
    transition: transform 0.22s ease, color 0.22s ease;
}
.sidebar-nav .nav-group.collapsed .nav-chevron { transform: rotate(-90deg); }

.sidebar-nav .nav-group-items {
    overflow: hidden;
    /* Must exceed the tallest group: Inventory carries 16 links (~750px).
       The old 480px cap clipped its tail inside the container, so the next
       group header rendered over the cut-off row. */
    max-height: 1200px;
    opacity: 1;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}
.sidebar-nav .nav-group.collapsed .nav-group-items {
    max-height: 0;
    opacity: 0;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--erp-sidebar-link);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, gap 0.32s ease, padding 0.32s ease;
    margin-bottom: 2px;
    cursor: pointer;
}

.sidebar-nav a i {
    width: 20px;
    font-size: 16px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-nav a:hover {
    background: var(--erp-sidebar-link-hover-bg);
    color: var(--erp-sidebar-link-hover-text);
}

.sidebar-nav a.active {
    background: var(--erp-sidebar-surface);
    color: var(--erp-sidebar-active-text);
    box-shadow: inset 3px 0 0 var(--erp-accent);
}

.sidebar-nav a .badge {
    margin-left: auto;
    background: var(--erp-sidebar-surface);
    color: var(--erp-sidebar-text);
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 30px;
    font-weight: 600;
}

.sidebar-nav a .nav-text {
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.32s ease, opacity 0.32s ease;
}

/* Personal sections: section icon in the label, hover-revealed unstar. */
.sidebar-nav .nav-section-icon { margin-right: 8px; font-size: 11px; color: var(--erp-sidebar-muted); }
.sidebar-nav a .nav-unfav {
    margin-left: auto;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--erp-sidebar-muted);
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 6px;
    display: none;
    font-family: inherit;
}
.sidebar-nav a:hover .nav-unfav { display: inline-block; }
.sidebar-nav a .nav-unfav:hover { color: #f87171; }

/* ---- Sidebar footer / user chip ---- */
.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--erp-sidebar-border);
    font-size: 13px;
    color: var(--erp-sidebar-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sidebar-footer img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--erp-sidebar-surface);
    flex-shrink: 0;
}

.sidebar-footer a.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.sidebar-footer a.sidebar-user:hover img {
    outline: 2px solid var(--erp-accent);
    outline-offset: 1px;
}

/* Constrain the name/mail stack to the free space: without this the
   inline wrapper never shrinks, long unbroken emails overflow and
   paint over the sign-out button. Children blockify as flex items
   so their ellipsis rules engage. */
.sidebar-footer .user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sidebar-footer .user-name {
    font-weight: 500;
    color: var(--erp-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-footer .user-mail {
    font-size: 12px;
    color: var(--erp-sidebar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer .signout-form {
    display: flex;
    flex-shrink: 0;
}

.sidebar-footer .signout-btn {
    background: none;
    border: none;
    color: var(--erp-sidebar-muted);
    cursor: pointer;
    font-size: 15px;
    padding: 4px;
    line-height: 1;
}

.sidebar-footer .signout-btn:hover { color: var(--erp-accent); }

/* ================= COLLAPSED RAIL, 72px ================= */
.sidebar.collapsed { width: var(--erp-rail-w); }
.sidebar.collapsed .sidebar-brand { padding: 18px 6px 14px; justify-content: center; }
.sidebar.collapsed .sidebar-brand > a.home-link { display: none; }
.sidebar.collapsed .sidebar-brand .brand-text { display: none !important; }
.sidebar.collapsed .sidebar-collapse {
    position: absolute;
    left: 0; right: 0; top: 6px;
    width: 32px;
    margin: 0 auto;
    transform: none;
    padding: 4px 6px;
    font-size: 11px;
}
.sidebar.collapsed .sidebar-search { width: 0; opacity: 0; overflow: hidden; padding: 0; margin: 0; border: 0; }
.sidebar.collapsed .sidebar-nav { padding: 12px 8px; }
.sidebar.collapsed .nav-group { margin-bottom: 0; }
.sidebar.collapsed .nav-group-items { max-height: 480px; opacity: 1; }
.sidebar.collapsed .nav-label {
    opacity: 0;
    height: 0;
    padding: 0 12px;
    margin: 0;
    overflow: hidden;
    transition: opacity 0.32s ease, height 0.32s ease, padding 0.32s ease;
}
.sidebar.collapsed .sidebar-nav a { padding: 10px 18px; gap: 0; }
.sidebar.collapsed .sidebar-nav a i { margin: 0; width: 20px; }
.sidebar.collapsed .sidebar-nav a .nav-text,
.sidebar.collapsed .sidebar-nav a .badge {
    width: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
}
.sidebar.collapsed .sidebar-footer { justify-content: center; padding: 12px 8px; }
.sidebar.collapsed .sidebar-footer .sidebar-user { justify-content: center; }
.sidebar.collapsed .sidebar-footer .user-meta,
.sidebar.collapsed .sidebar-footer .signout-form {
    opacity: 0;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.32s ease, width 0.32s ease;
}

/* ================= HAMBURGER, Metronic animated ================= */
.sidebar .sidebar-collapse, .topbar-left .menu-toggle {
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.sidebar .sidebar-collapse:hover { background: var(--erp-sidebar-surface); }
.topbar-left .menu-toggle:hover { background: #f1f5f9; }
/* Mobile-drawer toggle: hidden on desktop (the rail has its own button).
   The ≤992px block below re-enables it — so MobileOpen can only ever be
   set on mobile, and the sidebar close path never misfires on desktop. */
.topbar-left .menu-toggle { display: none; }
.m-toggler { display: block; position: relative; width: 26px; height: 26px; }
.m-toggler span, .m-toggler span::before, .m-toggler span::after {
    content: ''; position: absolute; height: 1px; min-height: 1px; background: #94a3b8; border-radius: 0;
    transition: all 0.4s ease;
}
.m-toggler span { top: 13px; width: 100%; left: auto; right: 0; }
.m-toggler span::before { top: -7px; width: 50%; left: auto; right: 0; }
.m-toggler span::after { top: 7px; width: 75%; left: auto; right: 0; }
.topbar-left .menu-toggle .m-toggler span,
.topbar-left .menu-toggle .m-toggler span::before,
.topbar-left .menu-toggle .m-toggler span::after { background: #475569; }
.sidebar .sidebar-collapse:hover .m-toggler span,
.sidebar .sidebar-collapse:hover .m-toggler span::before,
.sidebar .sidebar-collapse:hover .m-toggler span::after,
.topbar-left .menu-toggle:hover .m-toggler span,
.topbar-left .menu-toggle:hover .m-toggler span::before,
.topbar-left .menu-toggle:hover .m-toggler span::after { width: 100%; left: auto; right: 0; }
.sidebar.collapsed .sidebar-collapse .m-toggler span { width: 100%; left: 0; right: auto; }
.sidebar.collapsed .sidebar-collapse .m-toggler span::before { width: 50%; left: 0; right: auto; }
.sidebar.collapsed .sidebar-collapse .m-toggler span::after { width: 75%; left: 0; right: auto; }
.sidebar.collapsed .sidebar-collapse:hover .m-toggler span,
.sidebar.collapsed .sidebar-collapse:hover .m-toggler span::before,
.sidebar.collapsed .sidebar-collapse:hover .m-toggler span::after { width: 100%; left: 0; right: auto; }
/* hamburger → X only for mobile topbar toggle */
.topbar-left .menu-toggle.active .m-toggler span { background: transparent; }
.topbar-left .menu-toggle.active .m-toggler span::before { transform: translateY(6px) rotate(45deg); background: #0f172a; }
.topbar-left .menu-toggle.active .m-toggler span::after { transform: translateY(-6px) rotate(-45deg); background: #0f172a; }

/* ================= MAIN + PAGE GUTTER ================= */
.main {
    margin-left: var(--erp-sidebar-w);
    flex: 1;
    min-width: 0;
    max-width: calc(100vw - var(--erp-sidebar-w));
    width: calc(100% - var(--erp-sidebar-w));
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    transition: margin-left 0.32s ease, margin-inline-end 0.32s ease;
    overflow-x: hidden;
    padding-bottom: 0;
}
.sidebar.collapsed + .main {
    margin-left: var(--erp-rail-w);
    max-width: calc(100vw - var(--erp-rail-w));
    width: calc(100% - var(--erp-rail-w));
}

/* ================= HELP SIDE PANEL =================
   Docked like the LHS sidebar: while a page holds an open help panel
   (.erp-help-panel.open, fixed to the inline-end edge), the whole
   .main column yields the same width instead of sliding underneath.
   Panel and content share the 0.32s slide. Below the 992px breakpoint
   the panel overlays, exactly like the sidebar. */
.erp-help-panel {
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.32s ease, visibility 0s linear 0.32s;
}
.erp-help-panel.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s ease;
}
[dir="rtl"] .erp-help-panel { transform: translateX(-105%); }
[dir="rtl"] .erp-help-panel.open { transform: translateX(0); }
/* Directional icons mirror in RTL so forward/back arrows keep their meaning.
   Up/down/rotate icons are direction-neutral and stay untouched. */
html[dir="rtl"] i.fa-arrow-right,
html[dir="rtl"] i.fa-arrow-left,
html[dir="rtl"] i.fa-chevron-right,
html[dir="rtl"] i.fa-chevron-left,
html[dir="rtl"] i.fa-angles-right,
html[dir="rtl"] i.fa-angles-left {
    transform: scaleX(-1);
}
/* Report pager uses the inline SVG sprite (Prev/Next only live here). */
html[dir="rtl"] .tbl-footer svg.i {
    transform: scaleX(-1);
}
body:has(.erp-help-panel.open) .main {
    margin-inline-end: min(380px, 92vw);
    max-width: calc(100vw - var(--erp-sidebar-w) - min(380px, 92vw));
    width: calc(100% - var(--erp-sidebar-w) - min(380px, 92vw));
}
body:has(.erp-help-panel.open) .sidebar.collapsed + .main {
    max-width: calc(100vw - var(--erp-rail-w) - min(380px, 92vw));
    width: calc(100% - var(--erp-rail-w) - min(380px, 92vw));
}
@media (max-width: 992px) {
    body:has(.erp-help-panel.open) .main {
        margin-inline-end: 0;
        max-width: 100vw;
        width: 100vw;
    }
    body:has(.filter-drawer.open) .main {
        margin-inline-end: 0;
        max-width: 100vw;
        width: 100vw;
    }
}
body:has(.filter-drawer.open) .main {
    margin-inline-end: min(380px, 92vw);
    max-width: calc(100vw - var(--erp-sidebar-w) - min(380px, 92vw));
    width: calc(100% - var(--erp-sidebar-w) - min(380px, 92vw));
}
body:has(.filter-drawer.open) .sidebar.collapsed + .main {
    max-width: calc(100vw - var(--erp-rail-w) - min(380px, 92vw));
    width: calc(100% - var(--erp-rail-w) - min(380px, 92vw));
}

/* ================= RHS FILTER DRAWER (standard) =================
   Single shell — NxFilterDrawer.razor. Contents differ per page via
   Filters / ActiveChips slots. Portable: copy this block + the component
   to rebuild on another project. */
.filter-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(380px, 92vw); z-index: 1200; background: var(--card, #fff); border-inline-start: 1px solid var(--line, #e2e8f0); box-shadow: -8px 0 24px rgba(15, 23, 42, .12); display: flex; flex-direction: column; }
.filter-drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--card-line, #eef2f6); }
.filter-drawer-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.filter-drawer-title strong { font-size: 14px; }
.filter-drawer-title span { font-size: 11.5px; color: var(--muted, #64748b); }
.filter-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.filter-drawer-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--card-line, #eef2f6); }
.filter-drawer-foot .btn { flex: 1; justify-content: center; }
.filter-drawer { transform: translateX(105%); visibility: hidden; transition: transform 0.32s ease, visibility 0s linear 0.32s; }
.filter-drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.32s ease; }
[dir="rtl"] .filter-drawer { transform: translateX(-105%); }
[dir="rtl"] .filter-drawer.open { transform: translateX(0); }
.filter-drawer .f-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft, #eef2ff); color: var(--accent, #4f46e5); flex: none; }
.filter-drawer .chips-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.filter-drawer .chips-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2, #94a3b8); margin-inline-end: 2px; }
html[lang="ar"] .filter-drawer .chips-label { text-transform: none; letter-spacing: 0; }
.filter-drawer .chip { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 3px 0 9px; border-radius: 7px; border: 1px solid #dbe3ef; background: #f8fafc; color: #334155; font-size: 11px; font-weight: 500; }
.filter-drawer .chip-x { border: 0; background: transparent; color: var(--muted-2, #94a3b8); font-size: 14px; padding: 0 4px; line-height: 1; border-radius: 4px; }
.filter-drawer .chip-x:hover { background: #e2e8f0; color: var(--ink-2, #1e293b); }
.filter-drawer .chips-empty { font-size: 11.5px; color: var(--muted-2, #94a3b8); }

/* ================= REPORT SHELL + DIALOG CHROME (standard) =================
   Unscoped owners for BiReportShell / NxReportExportDialog /
   NxReportPrintSheet markup. Blazor isolation keeps per-page .razor.css out
   of these shared components, so their chrome lives here. Values are verbatim
   from the canonical report template (Sms Reports.razor.css); bare vars carry
   fallbacks. Slot-inner classes (kpi/article, ps-table, chips, format-grid,
   radio-list, foot-note, progress/done, .btn*, .tbl-*) stay page-scoped. */
.context-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted, #64748b); padding: 6px 2px; border-radius: 6px; }
.back-link:hover { color: var(--ink-2, #1e293b); }
.back-link svg.i { width: 15px; height: 15px; }
html[dir="rtl"] .back-link svg.i { transform: rotate(180deg); }
.btn-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 6px; background: var(--accent-soft, #eef2ff); color: var(--accent-d, #4f46e5); font-size: 10.5px; font-weight: 800; letter-spacing: 0; }
.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; background: linear-gradient(120deg, #fff 0%, #fbfcff 58%, #f6f8ff 100%); border: 1px solid var(--card-line, #eef2f6); border-radius: var(--radius, 16px); padding: 22px 24px; box-shadow: var(--shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .05)); margin-bottom: 16px; position: relative; overflow: hidden; }
.report-head::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent, #6366f1), var(--sky, #38bdf8) 55%, transparent 92%); }
html[dir="rtl"] .report-head::before { background: linear-gradient(270deg, var(--accent, #6366f1), var(--sky, #38bdf8) 55%, transparent 92%); }
.rh-main h1.rh-title { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.rh-main > p { color: var(--muted, #64748b); font-size: 13px; margin-top: 4px; max-width: 720px; }
.rh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; margin-top: 12px; font-size: 11.5px; color: var(--muted, #64748b); }
.rh-meta span { display: inline-flex; align-items: center; gap: 5px; }
.rh-meta svg.i { width: 13px; height: 13px; color: var(--muted-2, #94a3b8); }
.rh-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 520px; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.card { background: #fff; border: 1px solid var(--card-line, #eef2f6); border-radius: var(--radius, 16px); box-shadow: var(--shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .05)); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; }
.card-head h3 { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; color: var(--ink-2, #1e293b); }
.card-head h3 svg.i { width: 16px; height: 16px; color: var(--muted-2, #94a3b8); }
.card-head p { font-size: 11.5px; color: var(--muted, #64748b); margin-top: 3px; }
.chart-card { margin-bottom: 16px; }
.chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 2px; }
.chart-wrap { padding: 0 12px 12px; }
.chart-wrap svg { width: 100%; height: auto; display: block; direction: ltr; }
.run-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 4px 0; font-size: 10.5px; color: var(--muted-2, #94a3b8); border-top: 1px solid var(--line, #e2e8f0); margin-top: 4px; }
.run-foot span { display: inline-flex; align-items: center; gap: 5px; }
.run-foot svg.i { width: 12px; height: 12px; }
.run-foot .live { margin-inline-start: auto; color: var(--green, #059669); font-weight: 600; }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(5, 150, 105, .13); }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 9px; color: var(--muted, #64748b); position: relative; }
.icon-btn:hover { background: #f1f5f9; color: var(--ink-2, #1e293b); }
.modal { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 570px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); background: #fff; border-radius: 0 0 20px 20px; z-index: 70; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); display: none; flex-direction: column; overflow: hidden; opacity: 0; }
.modal.open { display: flex; opacity: 1; transform: translateX(-50%); animation: erp-dialog-in .45s ease; }
.modal.wide { width: 780px; }
.modal-head { display: flex; align-items: flex-start; gap: 11px; padding: 20px 24px 16px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; flex: none; }
.modal-head > div:nth-child(2) { flex: 1; min-width: 0; }
.modal-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal-head p { font-size: 11.5px; color: var(--muted, #64748b); margin-top: 2px; }
.modal-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft, #eef2ff); color: var(--accent, #6366f1); }
.modal-ico.sky { background: #e0f2fe; color: #0284c7; }
.modal-ico.indigo { background: #eef2ff; color: #4338ca; }
.modal-ico.slate { background: #f1f5f9; color: #475569; }
.modal-ico svg.i { width: 18px; height: 18px; }
.modal-close { margin-inline-start: auto; }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid #e2e8f0; background: #f1f5f9; flex-wrap: wrap; flex: none; }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.export-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: #f8fafc; border: 1px solid #eef2f7; font-size: 10.5px; line-height: 1.45; color: var(--muted, #64748b); }
.export-note svg.i { width: 13px; height: 13px; margin-top: 1px; color: var(--muted-2, #94a3b8); flex: none; }
.seg { display: flex; border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: #fff; padding: 5px 11px; font-size: 10.5px; font-weight: 600; color: var(--muted, #64748b); }
.seg button.active { background: var(--ink-2, #1e293b); color: #fff; }
.print-modal { width: 880px; }
.print-body { background: #eef2f7; padding: 12px 16px 16px; }
.print-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.check { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #475569; font-weight: 500; }
.check input { accent-color: var(--accent, #6366f1); width: 13px; height: 13px; }
.print-hint { margin-inline-start: auto; font-size: 10px; color: var(--muted-2, #94a3b8); }
.preview-stage { display: flex; justify-content: center; }
.preview-sheet { background: #fff; width: 100%; max-width: 660px; padding: 24px 26px 16px; box-shadow: 0 6px 24px rgba(15, 23, 42, .16); border-radius: 2px; font-family: var(--font, "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif); color: var(--ink, #0f172a); }
/* gap-close: icon sizing (svg.i base + rh-actions buttons + foot-note) + responsive for component-owned classes */
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn svg.i { width: 15px; height: 15px; stroke-width: 1.9; }
.btn-sm svg.i { width: 14px; height: 14px; }
.foot-note { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted-2, #94a3b8); }
.foot-note svg.i { width: 13px; height: 13px; }
@media (max-width: 1320px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .report-head { flex-direction: column; gap: 14px; }
  .rh-actions { max-width: none; justify-content: flex-start; }
}
@media (max-width: 1080px) {
  .report-head { flex-direction: column; gap: 14px; }
  .rh-actions { justify-content: flex-start; max-width: none; }
}
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-foot .live { margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .report-head { padding: 18px 16px; }
  .rh-actions { gap: 5px; }
  .rh-actions .btn span:not(.btn-count) { display: none; }
  .rh-actions .btn { width: 38px; padding: 0; }
  .rh-actions .btn-count { display: none; }
  .rh-actions .icon-btn { display: none; }
  .kpi-grid { grid-template-columns: 1fr; }
  .card-head { flex-direction: column; gap: 8px; padding: 14px 14px 10px; }
  .modal { max-height: calc(100vh - 20px); }
  .modal.wide { width: 100%; }
  .modal-body { padding: 14px 14px; }
  .modal-head, .modal-foot { padding-inline: 14px; }
  .print-modal .modal-foot .foot-note { display: none; }
}

/* ================= DETAIL SIDE PANEL =================
   Embedded record view (CRM leads today): slides in from the inline-end
   edge over a scrim instead of navigating away from the list. The list
   keeps its scroll position because .page is locked, not reflowed. */
.erp-detail-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: calc((100vw - var(--erp-sidebar-w)) * 0.7);
    max-width: 100vw;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface, #fff);
    border-inline-start: 1px solid rgba(45, 49, 66, 0.12);
    box-shadow: -8px 0 24px rgba(45, 49, 66, 0.12);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.32s ease, visibility 0s linear 0.32s;
}
.erp-detail-panel.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s ease;
}
[dir="rtl"] .erp-detail-panel {
    transform: translateX(-105%);
    box-shadow: 8px 0 24px rgba(45, 49, 66, 0.12);
}
[dir="rtl"] .erp-detail-panel.open { transform: translateX(0); }
.erp-detail-panel > .page-header {
    flex: 0 0 auto;
    padding: 18px 24px 12px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(45, 49, 66, 0.08);
}
.erp-detail-panel > .detail-tabs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 24px 28px;
}
.erp-detail-panel > .mud-progress-circular,
.erp-detail-panel > .empty-note { margin: 24px; }
.erp-detail-scrim {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(15, 23, 42, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.erp-detail-scrim.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.32s ease;
}
body:has(.erp-detail-panel.open) .page { overflow: hidden; }
@media (max-width: 992px) {
    .erp-detail-panel { width: 100vw; }
}
/* Present mode (workflow panel toolbar): the slider takes the screen. */
.erp-detail-panel:fullscreen { width: 100vw; overflow-y: auto; }

/* ============ INVENTORY WORKFLOW PANEL (archify viewer parity) ============ */
/* Header toolbar: theme toggle, style preset, motion, present. */
/* Top toolbar (archify viewer parity): one floating pill — theme switch,
   style preset, motion pill, icon actions, solid export. */
.wf-toolbar {
    position: relative;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 14px;
    background: color-mix(in srgb, #ffffff 88%, transparent);
    border: 1px solid rgba(45, 49, 66, 0.12);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px -14px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-width: 100%;
    flex-wrap: wrap;
}
.wf-dark .wf-toolbar { background: rgba(15, 23, 42, 0.88); border-color: #334155; }
.wf-toolbar .btn {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-toolbar .btn:hover { background: rgba(45, 49, 66, 0.08); }
.wf-dark .wf-toolbar .btn { color: #cbd5e1; }
.wf-dark .wf-toolbar .btn:hover { background: rgba(148, 163, 184, 0.14); }
.wf-toolbar .btn-primary { background: #111827; color: #f8fafc; }
.wf-toolbar .btn-primary:hover { background: #334155; }
.wf-dark .wf-toolbar .btn-primary { background: #f1f5f9; color: #0f172a; }
.wf-dark .wf-toolbar .btn-primary:hover { background: #ffffff; }
.wf-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 999px;
    color: #b45309;
    font-size: 13px;
}
.wf-theme-switch:hover { background: rgba(45, 49, 66, 0.08); }
.wf-dark .wf-theme-switch { color: #fbbf24; }
.wf-dark .wf-theme-switch:hover { background: rgba(148, 163, 184, 0.14); }
.wf-theme-switch .wf-track {
    display: flex;
    align-items: center;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: rgba(45, 49, 66, 0.20);
    padding: 2px;
    box-sizing: border-box;
    flex: none;
}
.wf-theme-switch .wf-knob {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    margin-inline-start: 0;
    transition: margin-inline-start 0.18s ease;
}
.wf-theme-switch[aria-pressed="true"] .wf-knob { margin-inline-start: 12px; }
.wf-theme-switch[aria-pressed="true"] .wf-track { background: rgba(5, 150, 105, 0.45); }
.wf-style-menu { position: relative; }
.wf-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    padding: 7px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}
.wf-pill:hover { background: rgba(45, 49, 66, 0.08); }
.wf-dark .wf-pill { color: #cbd5e1; }
.wf-dark .wf-pill:hover { background: rgba(148, 163, 184, 0.14); }
.wf-style-ic { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 2.5px; opacity: 0.7; flex: none; }
.wf-pill .fa-chevron-down { font-size: 10px; opacity: 0.65; }
.wf-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    inset-inline-end: auto;
    min-width: 160px;
    background: #fff;
    border: 1px solid rgba(45, 49, 66, 0.14);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(45, 49, 66, 0.18);
    padding: 4px;
    display: flex;
    flex-direction: column;
    z-index: 60;
}
.wf-dark .wf-menu { background: #0f172a; border-color: #334155; }
.wf-menu > button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    padding: 7px 10px;
    border-radius: 6px;
    text-align: start;
}
.wf-menu > button:hover { background: rgba(45, 49, 66, 0.07); }
.wf-menu > button.active { color: #059669; }
.wf-dark .wf-menu > button { color: #e8edf3; }
.wf-dark .wf-menu > button:hover { background: rgba(148, 163, 184, 0.14); }
.wf-tick { width: 14px; flex: none; font-size: 11px; }
.wf-motion-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    margin-inline-end: 6px;
    animation: wf-dot-pulse 2s infinite;
}
.wf-paused .wf-motion-dot { background: #9aa3b8; animation: none; }
@keyframes wf-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Style presets recolor the travelling dots only — geometry never changes. */
.erp-detail-panel[data-preset="signal-flow"] .wf-flow {
    stroke: #22d3ee;
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.9));
}
.erp-detail-panel[data-preset="blueprint"] .wf-flow {
    stroke: #d97706;
    stroke-linecap: butt;
    filter: none;
}
.erp-detail-panel[data-preset="editorial"] .wf-flow {
    stroke: #c2410c;
    filter: none;
}

/* Panel dark theme. CSS rules beat SVG presentation attributes, so a small
   set of attribute selectors re-skins both diagrams without touching markup. */
.wf-dark svg { background: #0f172a; border-radius: 8px; }
.wf-dark svg rect[fill="#f5f5f5"] { fill: #1e293b; }
.wf-dark svg [stroke="#4f5d75"] { stroke: #94a3b8; }
.wf-dark svg [fill="#4f5d75"] { fill: #94a3b8; }
.wf-dark svg text[fill="#2d3142"] { fill: #e8edf3; }
.wf-dark svg text[fill="#4f5d75"] { fill: #9aa7b8; }
.wf-dark svg text[fill="#7a8399"] { fill: #7d8da1; }
.wf-dark svg rect[fill="var(--mud-palette-success-lighten, #d6e9d6)"] { fill: rgba(46, 125, 50, 0.45); }
.wf-dark svg [stroke="var(--mud-palette-success, #2e7d32)"] { stroke: #4ade80; }
.wf-dark svg rect[fill="var(--mud-palette-error-lighten, #f3c9c9)"] { fill: rgba(211, 47, 47, 0.4); }
.wf-dark svg [stroke="var(--mud-palette-error, #d32f2f)"] { stroke: #f87171; }
.wf-dark .wf-explain-card { background: #0f172a; border-color: #334155; color: #cbd5e1; }
.wf-dark .wf-explain-card h4 { color: #e8edf3; }
.wf-dark .wf-node-detail { color: #94a3b8; background: #0f172a; border-color: #334155; }
.wf-dark .wf-pass-head b { color: #e8edf3; }
.wf-dark .wf-legend { color: #94a3b8; }
.wf-dark .wf-legend-title { color: #e8edf3; }
.wf-dark .wf-legend-count { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.wf-dark .wf-nav { background: rgba(15, 23, 42, 0.92); border-color: #334155; }
.wf-dark .wf-nav-btn,
.wf-dark .wf-nav-zoom,
.wf-dark .wf-nav-status { color: #cbd5e1; }
.wf-dark .wf-nav-btn:hover { background: rgba(148, 163, 184, 0.16); }
.wf-dark .wf-nav-menu { background: #0f172a; border-color: #334155; }
.wf-dark .wf-nav-menu > button { color: #e8edf3; }
.wf-dark .wf-nav-menu > button:hover { background: rgba(148, 163, 184, 0.14); }
.wf-dark .wf-nav-search input { background: #0f172a; border-color: #334155; color: #e8edf3; }

/* Legend bar under each diagram. */
.wf-legend {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    margin: 10px 2px 0;
    font-size: 12px;
    color: #4f5d75;
}
.wf-legend-title { font-weight: 700; color: #2d3142; letter-spacing: 0.08em; font-size: 11px; }
.wf-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.wf-legend-swatch { width: 18px; height: 12px; border-radius: 2.5px; display: inline-block; }
.wf-legend-flow { height: 4px; border-radius: 2px; background: #059669; box-shadow: 0 0 3px rgba(5, 150, 105, 0.8); }
.wf-legend-taken { background: #d6e9d6; border: 1px solid #2e7d32; }
.wf-legend-count {
    background: rgba(45, 49, 66, 0.08);
    border-radius: 999px;
    padding: 0 7px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Keyboard-focusable diagram nodes. */
.wf-node[role="button"] { cursor: pointer; }
.wf-node[role="button"]:focus { outline: none; }
.wf-node[role="button"]:focus-visible { filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.9)); }
/* Node halo (archify glow parity): soft lift on every node, kind-colored
   emphasis on selection — green for states, red for the Rejected terminal
   (matched on its error stroke, same technique as the dark-theme rules). */
.wf-node rect {
    filter: drop-shadow(0 1px 4px rgba(45, 49, 66, 0.30));
}
.wf-dark .wf-node rect {
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.65));
}
.wf-node[tabindex="0"]:hover rect {
    filter: drop-shadow(0 3px 9px rgba(45, 49, 66, 0.42));
}
.wf-dark .wf-node[tabindex="0"]:hover rect {
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8));
}
.wf-node[aria-pressed="true"] rect {
    filter: drop-shadow(0 0 7px rgba(46, 125, 50, 0.8));
    animation: wf-halo-breathe 2.4s ease-in-out infinite;
}
.wf-node[aria-pressed="true"] rect[stroke="var(--mud-palette-error, #d32f2f)"] {
    filter: drop-shadow(0 0 7px rgba(211, 47, 47, 0.8));
    animation-name: wf-halo-breathe-red;
}
.wf-dark .wf-node[aria-pressed="true"] rect {
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.85));
    animation: wf-halo-breathe 2.4s ease-in-out infinite;
}
.wf-dark .wf-node[aria-pressed="true"] rect[stroke="var(--mud-palette-error, #d32f2f)"] {
    filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.85));
    animation-name: wf-halo-breathe-red;
}
@keyframes wf-halo-breathe {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(46, 125, 50, 0.55)); }
    50% { filter: drop-shadow(0 0 11px rgba(46, 125, 50, 0.9)); }
}
@keyframes wf-halo-breathe-red {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(211, 47, 47, 0.55)); }
    50% { filter: drop-shadow(0 0 11px rgba(211, 47, 47, 0.9)); }
}
.wf-node-detail {
    margin: 10px 2px 0;
    font-size: 12.5px;
    color: #4f5d75;
    border: 1px solid rgba(45, 49, 66, 0.14);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    display: grid;
    gap: 3px;
    max-width: 460px;
}
.wf-pass-head { display: flex; align-items: baseline; gap: 8px; }
.wf-pass-head b { color: #2d3142; font-size: 13px; }
.wf-pass-count { font-size: 11px; letter-spacing: 0.04em; }
.wf-pass-rel { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.wf-pass-dir { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 10.5px; color: #7a8399; min-width: 46px; }
.wf-pass-verb { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 10.5px; color: #059669; }
.wf-nav-btn i { margin-inline-end: 5px; }

/* Explainer cards above each diagram. */
.wf-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.wf-explain-card {
    background: #f8fafc;
    border: 1px solid rgba(45, 49, 66, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
}
.wf-explain-card h4 { margin: 0 0 4px; font-size: 13px; color: #2d3142; }
.wf-explain-card ul { margin: 0; padding-inline-start: 18px; font-size: 12.5px; color: #4f5d75; }
.wf-explain-card li + li { margin-top: 2px; }

/* Floating bottom nav (route / lens / search / guide / zoom). */
.wf-nav {
    position: absolute;
    bottom: 12px;
    inset-inline-end: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100% - 24px);
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 4px;
    background: color-mix(in srgb, var(--mud-palette-surface, #fff) 88%, transparent);
    border: 1px solid rgba(45, 49, 66, 0.14);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(45, 49, 66, 0.16);
    backdrop-filter: blur(8px);
}
.wf-nav-btn {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #4f5d75;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.wf-nav-btn:hover { background: rgba(45, 49, 66, 0.08); }
.wf-nav-btn.active { color: #059669; background: rgba(5, 150, 105, 0.12); }
.wf-nav-status {
    font-size: 12px;
    color: #4f5d75;
    padding: 0 8px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-nav-zoom {
    font-size: 12px;
    color: #4f5d75;
    min-width: 52px;
    text-align: center;
    border: 0;
    background: transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 6px;
}
.wf-nav-zoom:hover { background: rgba(45, 49, 66, 0.08); }
.wf-nav-lens,
.wf-nav-search,
.wf-nav-help { position: relative; }
.wf-nav-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid rgba(45, 49, 66, 0.14);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(45, 49, 66, 0.18);
    padding: 4px;
    display: flex;
    flex-direction: column;
    z-index: 6;
}
.wf-nav-menu > button {
    border: 0;
    background: transparent;
    text-align: start;
    font: inherit;
    font-size: 12.5px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #2d3142;
}
.wf-nav-menu > button:hover { background: rgba(45, 49, 66, 0.07); }
.wf-nav-menu > button.active { color: #059669; font-weight: 700; }
.wf-nav-search input {
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline-end: 0;
    width: 200px;
    padding: 8px 10px;
    border: 1px solid rgba(45, 49, 66, 0.2);
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    box-shadow: 0 8px 24px rgba(45, 49, 66, 0.18);
    z-index: 6;
}
.wf-nav-help-menu { min-width: 260px; font-size: 12px; color: #4f5d75; gap: 5px; padding: 10px 12px; }
.wf-nav-help-menu b {
    font-family: 'Cascadia Mono', Consolas, monospace;
    background: rgba(45, 49, 66, 0.08);
    border-radius: 4px;
    padding: 0 5px;
}

/* Route / lens highlight state. */
.wf-dim { opacity: 0.15; transition: opacity 0.25s ease; }
.wf-flow.wf-path { stroke-width: 3.4; }
line.wf-path:not(.wf-flow),
path.wf-path:not(.wf-flow) { stroke: #059669; }
/* De-dup review body (LeadDuplicates panel): key pickers on top, group
   cards scroll; each row holds the keeper radio, action checkbox and chips. */
.erp-detail-panel > .dedup-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 24px 28px; }
.dedup-keys { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.dedup-card { border: 1px solid rgba(45, 49, 66, 0.12); border-radius: 10px; padding: 12px 14px; }
.dedup-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.dedup-row.picked { background: rgba(99, 102, 241, 0.07); }
.dedup-row .dedup-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; }
.dedup-row .dedup-main .text-muted { font-size: 12px; }
.dedup-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    font-size: 13px;
}
.page {
    padding: 28px 32px 40px;
    flex: 1;
    min-height: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    box-sizing: border-box;
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 16px;
}
.page-header .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ================= BUTTONS ================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    border: none;
    cursor: pointer;
    transition: 0.15s;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: inherit;
    background: none;
    color: inherit;
}
.btn-primary { background: #0f172a; color: #fff; }
.btn-primary:hover { background: #1e293b; }
.btn-outline { background: transparent; border: 1px solid #e2e8f0; color: #1e293b; }
.btn-outline:hover { background: #f1f5f9; }
.btn-outline.active { background: #0f172a; border-color: #0f172a; color: #fff; }
.btn-success { background: #0b8a5e; color: #fff; }
.btn-success:hover { background: #0a7a52; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-warning { background: #d97706; color: #fff; }
.btn-warning:hover { background: #b45309; }
.btn-sm { padding: 5px 14px; font-size: 12px; }
.btn-xs { padding: 2px 10px; font-size: 11px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-outline:disabled:hover { background: transparent; }
/* Busy spinner inside standard buttons (ErpButton): currentColor ring,
   direction-neutral rotation. */
.btn-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: btn-spin .7s linear infinite;
    vertical-align: -2px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Refreshing state (ErpRefreshButton): tinted back-color while OnRefresh
   runs. Disabled + spinner come from the ErpButton busy state. */
.btn.is-refreshing { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

.text-muted { color: #94a3b8; }

/* ================= CARDS ================= */
.erp-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef2f6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 24px;
}
.erp-card-header {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
}
.erp-card-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
.erp-card-actions { display: flex; gap: 8px; align-items: center; }
.erp-card-subtitle { font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.4; }
.erp-card-body { padding: 20px 24px 24px; }

/* Header date filters: keep the textbox compact WITHOUT shrinking the calendar.
   MudPicker forwards its Style to the calendar paper too, so max-width must
   target the input control only — never the picker root. */
.erp-card-actions .date-filter-picker .mud-input-control { max-width: 175px; }

/* ================= TOPBAR ================= */
.topbar {
    background: var(--erp-topbar-bg);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 4px solid var(--erp-accent);
    /* Pinned by the .main flex column (which is exactly viewport-tall), so no
       sticky needed — sticky fails here because .main clips overflow-x. */
    flex-shrink: 0;
    z-index: 50;
    min-height: var(--erp-topbar-h);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
}

.tb-company-logo {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.tb-company-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--erp-topbar-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.topbar-left .menu-toggle {
    display: none;
    font-size: 22px;
    color: #1e293b;
}

.topbar-left h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--erp-topbar-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tb-titles {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.topbar-left .page-desc {
    font-size: 12px;
    color: var(--erp-topbar-faint);
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46vw;
}

.topbar-left .tb-title-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.topbar-left .breadcrumb {
    font-size: 13px;
    color: var(--erp-topbar-muted);
}

.topbar-left .breadcrumb span {
    color: #1e293b;
    font-weight: 500;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.topbar-right .icon-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #475569;
    cursor: pointer;
    position: relative;
    padding: 6px;
    line-height: 1;
}

.topbar-right .icon-btn .dot {
    width: 8px;
    height: 8px;
    background: var(--erp-danger);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
    border: 2px solid #fff;
}

.topbar-right .avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    font-size: 14px;
    border: none;
    font-family: inherit;
}

/* account + notification dropdown anchors */
.topbar-right .user-menu, .topbar-right .notif-menu, .topbar-right .lang-menu { position: relative; }

.topbar-right .topbar-user {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.topbar-right .topbar-logout-form { display: flex; }

.topbar-right .topbar-logout-btn,
.topbar-right .topbar-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    padding: 6px 4px;
}

.topbar-right .topbar-logout-btn:hover,
.topbar-right .topbar-login:hover { color: var(--erp-accent); }

/* ---- Language switcher (demo: 36px bordered box) ---- */
.topbar-right .lang-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.topbar-right .lang-btn:hover { border-color: var(--erp-accent); color: var(--erp-accent); }

/* ---- Dropdown cards (demo: white / 14px / deep shadow) ---- */
.lang-menu-pop, .account-menu-pop, .erp-notif-menu {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    padding: 0;
    overflow: hidden;
}

/* ---- Language menu ---- */
.lang-menu-pop { min-width: 220px; max-width: 92vw; }
.lang-menu-pop .lang-head {
    padding: 14px 16px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%), url('https://images.unsplash.com/photo-1557682224-33bb0a46e88b?w=600&h=100&fit=crop') center/cover;
    background-blend-mode: overlay;
    position: relative;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}
.lang-menu-pop .lang-head::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(30,41,59,.85), rgba(51,65,85,.75));
}
.lang-menu-pop .lang-head > * { position: relative; z-index: 1; }
.lang-menu-pop .lang-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    text-align: left;
}
[dir="rtl"] .lang-menu-pop .lang-item {
    justify-content: flex-end;
    text-align: right;
}
.lang-menu-pop .lang-item:hover { background: #eff6ff; color: #1e40af; }
.lang-menu-pop .lang-item.active { background: #f8fafc; color: #1d4ed8; font-weight: 600; }
.lang-menu-pop .lang-item img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
.lang-menu-pop .lang-item i { margin-inline-start: auto; font-size: 12px; }

/* ---- Notifications dropdown (demo hero head + tabs) ---- */
.erp-notif-menu { width: 360px; max-width: 92vw; }
.erp-notif-head {
    padding: 16px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%), url('https://images.unsplash.com/photo-1557682224-33bb0a46e88b?w=600&h=120&fit=crop') center/cover;
    background-blend-mode: overlay;
    position: relative;
    color: #fff;
    text-align: center;
}
.erp-notif-head::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(30,41,59,.85), rgba(51,65,85,.75));
}
.erp-notif-head > * { position: relative; z-index: 1; }
.erp-notif-head .nh-title { display: block; font-size: 16px; font-weight: 700; }
.erp-notif-head .nh-sub { display: block; font-size: 12px; opacity: .8; }
.erp-notif-tabs { display: flex; gap: 0; border-bottom: 1px solid #e2e8f0; }
.erp-notif-tabs button {
    flex: 1; padding: 10px 8px; background: none; border: none;
    font-size: 12px; font-weight: 600; color: #64748b;
    border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit;
}
.erp-notif-tabs button.active { color: #1d4ed8; border-bottom-color: #1d4ed8; background: #f8fafc; }
.erp-notif-body { max-height: 300px; overflow: auto; }
.erp-notif-list { max-height: 300px; overflow: auto; padding: 0; }
.erp-notif-list .mud-menu-item, .erp-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; text-decoration: none; }
a.erp-notif-item:hover { background: #f8fafc; }
.erp-notif-list .mud-menu-item:last-child, .erp-notif-item:last-child { border-bottom: none; }
.erp-notif-list .notif-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; margin-top: 6px; }
.erp-notif-list .notif-dot.green { background: #22c55e; }
.erp-notif-list .notif-dot.blue { background: #38bdf8; }
.erp-notif-list .notif-dot.amber { background: #f59e0b; }
.erp-notif-list .notif-dot.red { background: #ef4444; }
.erp-notif-list .notif-text {
    flex: 1; min-width: 0;
    font-size: 12.5px; color: #1e293b; line-height: 1.4;
}
.erp-notif-list .notif-time { font-size: 11px; color: #94a3b8; white-space: nowrap; margin-top: 2px; flex-shrink: 0; }
.erp-notif-list .notif-badge {
    font-size: 10px; font-weight: 700; color: #fff;
    padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.erp-notif-list .notif-badge.red { background: #ef4444; }
.erp-notif-empty { padding: 28px 16px; text-align: center; color: var(--erp-topbar-muted); font-size: 13px; }
.erp-notif-all { border-top: 1px solid #f1f5f9; justify-content: center; color: var(--erp-accent); font-weight: 600; }
/* Notification center: unread count badge, mark-all-read, unread rows. */
.notif-btn { position: relative; }
.notif-count {
    position: absolute; top: 2px; inset-inline-end: 2px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
}
.nh-readall { background: none; border: none; cursor: pointer; color: var(--erp-accent); font-size: 12px; font-weight: 600; padding: 2px 0; }
.erp-notif-item.unread .notif-text { font-weight: 700; }

/* ---- Account menu card (demo hero head) ---- */
.um-head {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 16px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%), url('https://images.unsplash.com/photo-1557682224-33bb0a46e88b?w=600&h=200&fit=crop') center/cover;
    background-blend-mode: overlay;
    position: relative;
}
.um-head::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(30,41,59,0.85) 0%, rgba(51,65,85,0.75) 100%);
}
.um-head > * { position: relative; z-index: 1; }
.um-head img {
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 48px;
    border: 3px solid rgba(255,255,255,0.3);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.um-head .um-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.um-head .um-id b {
    font-size: 14px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.um-head .um-id span {
    font-size: 12px; color: rgba(255,255,255,0.8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.um-head .um-role {
    margin-inline-start: auto; flex-shrink: 0;
    font-size: 10.5px; font-weight: 700; color: #7c3aed;
    background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 999px;
    padding: 2px 9px; white-space: nowrap;
}

/* ---- Platform forms (provision, department, password dialogs) ---- */
.pf-field { margin-bottom: 12px; }
.pf-field label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 4px; }
.pf-field .mud-input-control { width: 100%; }
.pf-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.tenant-pick { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.tenant-pick label { font-size: 12.5px; font-weight: 600; color: #334155; }
.tenant-pick .mud-input-control { min-width: 240px; }
.um-section {
    padding: 6px 16px 4px;
    font-size: 10.5px; font-weight: 700; color: var(--erp-topbar-muted);
    letter-spacing: .6px; text-transform: uppercase;
    text-align: start;
}
.topbar-right .mud-menu-item.um-link { color: #334155; min-width: 0; overflow: hidden; }
/* MudMenuItem wraps ChildContent in p.mud-menu-item-text — the flex row lives there. */
.topbar-right .mud-menu-item.um-link .mud-menu-item-text { display: flex; align-items: center; gap: 12px; margin: 0; }
.topbar-right .mud-menu-item.um-link .mud-menu-item-text > i,
.topbar-right .mud-menu-item.um-link .mud-menu-item-text > .um-check-spot { width: 20px; text-align: center; flex-shrink: 0; font-size: 15px; }
/* The current-module tick is status, not a second icon: small and green. */
.topbar-right .mud-menu-item.um-link .mud-menu-item-text > i.um-check { width: 16px; font-size: 12px; color: #16a34a; }
.account-menu-pop { width: 300px; min-width: 280px; max-width: 92vw; overflow-x: clip; box-sizing: border-box; }
.account-menu-pop .um-divider { border-top: 1px solid #f1f5f9; }
.account-menu-pop .um-list { max-height: 264px; overflow-y: auto; overflow-x: hidden; padding: 2px 0; }
.account-menu-pop .signout-form { padding: 4px 8px 8px; margin: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.account-menu-pop .um-list .signout-form { padding: 1px 8px; }
.account-menu-pop .um-item-btn, .account-menu-pop .signout-btn {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; max-width: 100%;
    min-width: 0; overflow: hidden; box-sizing: border-box; white-space: nowrap;
    padding: 9px 12px; border-radius: 9px;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 500; text-align: start;
}
/* Company rows are neutral; only Sign out is red. */
.account-menu-pop .um-item-btn { color: #334155; }
.account-menu-pop .um-item-btn:hover { background: #f1f5f9; }
.account-menu-pop .um-item-btn:disabled { opacity: .75; cursor: default; background: #f8fafc; font-weight: 600; }
.account-menu-pop .signout-btn { color: #dc2626; }
[dir="rtl"] .account-menu-pop .um-item-btn, [dir="rtl"] .account-menu-pop .signout-btn { justify-content: flex-end; text-align: right; }
.account-menu-pop .signout-btn:hover { background: #fef2f2; }
.account-menu-pop .um-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-pop .um-item-btn > i:first-child, .account-menu-pop .signout-btn > i:first-child { flex-shrink: 0; width: 20px; text-align: center; font-size: 15px; }
.account-menu-pop .um-item-btn > i.fa-check:first-child { width: 16px; font-size: 12px; color: #16a34a; }
/* Module rows are plain anchors (MudMenuItem wraps content where flex
   spacing can't reach reliably) — same row geometry as the buttons. */
.account-menu-pop a.um-item-btn { text-decoration: none; }
.account-menu-pop .um-item-btn > i:not(:first-child) { flex-shrink: 0; width: 20px; text-align: center; }
.account-menu-pop .um-check, .account-menu-pop .um-check-spot { width: 16px; flex-shrink: 0; text-align: center; }

/* Dark primary action button (MudBlazor has no navy;
   this class pairs with MudButton sizing/typography). */
.btn-erp-primary,
.mud-button-filled.btn-erp-primary {
    background-color: #0f172a;
    color: #fff;
}
.btn-erp-primary:hover,
.mud-button-filled.btn-erp-primary:hover { background-color: #1e293b; }

/* Finance module wears the SULALA green (#2E7D32 family, same as the
   public pages): the shell tags finance pages .mod-finance (see
   NxShell MainCss), and everything primary inside follows. Other
   modules keep the navy product standard untouched. */
.mod-finance .btn-primary { background-color: #2E7D32; border-color: #2E7D32; }
.mod-finance .btn-primary:hover { background-color: #1B5E20; border-color: #1B5E20; }
.mod-finance {
    --mud-palette-primary: #2E7D32;
    --mud-palette-primary-rgb: 46, 125, 50;
    --mud-palette-primary-darken: #1B5E20;
    --mud-palette-primary-hover: rgba(46, 125, 50, 0.08);
    --mud-palette-primary-lighten: #43A047;
    --mud-palette-primary-text: #ffffff;
}

/* ================= ERP DIALOGS =================
   Applied only to dialogs carrying Class="erp-modal" opened through
   ErpDialog.Options() (TopCenter). */
.mud-overlay.erp-dialog-backdrop {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

/* Flush top docking (MudBlazor default is 32px). Safe: only our factory uses TopCenter. */
.mud-dialog-container.mud-dialog-topcenter { padding-top: 0; }

.mud-dialog.erp-modal {
    border-radius: 0 0 20px 20px;
    max-height: calc(100vh - 40px);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    animation: erp-dialog-in 0.45s ease;
}

@keyframes erp-dialog-in {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

.mud-dialog.erp-modal .mud-dialog-title {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 20px 24px 16px;
    margin: 0;
}

.mud-dialog.erp-modal .mud-dialog-title h6 { font-size: 20px; font-weight: 700; color: #0f172a; }

.mud-dialog.erp-modal .mud-dialog-content { padding: 24px; }

.mud-dialog.erp-modal .mud-dialog-actions {
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    padding: 16px 24px;
    justify-content: flex-end;
}

/* ERP dialog forms — only size-affecting, high-confidence selectors: never
   touch colors or focus states, so MudBlazor's own focus ring keeps working. */
.mud-dialog.erp-modal .mud-input-control { margin-bottom: 16px; }
.mud-dialog.erp-modal .mud-input-slot { font-size: 14px; }
.mud-dialog.erp-modal .mud-input-outlined-border { border-radius: 10px; }

/* Fixed top labels for MudBlazor inputs rendered WITHOUT Label —
   the input keeps validation/adornments. */
.erp-field { margin-bottom: 16px; min-width: 0; }
.erp-field > label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 4px;
}
.erp-field .mud-input-control { margin-bottom: 0; }

/* Read-only form value: same box geometry as a dense outlined MudBlazor
   input so detail views read like the edit form. */
.ro-value {
    border: 1px solid var(--mud-palette-lines-inputs, #e2e8f0);
    border-radius: 10px;
    background-color: #f8fafc;
    padding: 8px 12px;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1e293b;
    overflow-wrap: anywhere;
}
.ro-value strong { color: #0f172a; }

/* Mobile (reference ≤640px): bottom sheet. */
@media (max-width: 640px) {
    .mud-dialog-container.mud-dialog-topcenter { padding: 0; align-items: flex-end; }
    .mud-dialog.erp-modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 85vh;
        animation: erp-dialog-up 0.32s cubic-bezier(0.32,0.72,0,1);
    }
    .mud-dialog.erp-modal .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
    }
}

@keyframes erp-dialog-up {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

/* Warehouse coordinate picker (Leaflet lives inside the edit dialog). */
.wh-map {
    height: 300px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #e2e8f0;
    z-index: 0;
}
.wh-map .leaflet-container { font: inherit; }

/* user-menu link rows (dropdown content) */
.um-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #334155;
    font-size: 13px;
    text-decoration: none;
    text-align: left;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
[dir="rtl"] .um-link {
    justify-content: flex-end;
    text-align: right;
}

/* Category tree + products split panel (demo: Inventory/categories).
   Indent uses data-level margins (mirrored in RTL); the collapsed twist
   rotates with the direction. */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 1;
    white-space: nowrap;
}
.status-badge.active { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.status-badge.inactive { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.4;
    border: 1px solid transparent; white-space: nowrap;
}
.pill-green { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pill-yellow { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.pill-gray { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.pill-red { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.pill-blue { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
/* Grouped-table band row (e.g. permissions per module): full-width
   label band separating server-ordered groups. */
.grp-header td {
    background: #f8fafc;
    font-size: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.cat-tree { min-width: 0; overflow-x: auto; max-height: 560px; overflow-y: auto; }
.cat-tree::-webkit-scrollbar { height: 6px; }
.cat-tree::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.cat-tree .cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background .15s ease;
    cursor: pointer;
}
.cat-tree .cat-row:hover { background: #f8fafc; }
.cat-tree .cat-row.cat-root { font-weight: 600; }
.cat-tree .cat-row.cat-root + .cat-row { border-top: 1px solid #eef2f7; }
.cat-tree [data-level="0"] { padding-left: 12px; margin-left: 0; }
.cat-tree [data-level="1"] { margin-left: 18px; }
.cat-tree [data-level="2"] { margin-left: 36px; }
.cat-tree [data-level="3"] { margin-left: 54px; }
.cat-tree [data-level="4"] { margin-left: 72px; }
.cat-tree [data-level="5"] { margin-left: 90px; }
.cat-tree [data-level="6"] { margin-left: 108px; }
.cat-tree [data-level="1"],
.cat-tree [data-level="2"],
.cat-tree [data-level="3"],
.cat-tree [data-level="4"],
.cat-tree [data-level="5"],
.cat-tree [data-level="6"] {
    position: relative;
}
.cat-tree [data-level="1"]:before,
.cat-tree [data-level="2"]:before,
.cat-tree [data-level="3"]:before,
.cat-tree [data-level="4"]:before,
.cat-tree [data-level="5"]:before,
.cat-tree [data-level="6"]:before {
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e2e8f0;
}
.cat-tree .cat-twist {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 0;
    font-family: inherit;
}
.cat-tree .cat-twist:hover { background: #e2e8f0; color: #334155; }
.cat-tree .cat-twist i { font-size: 12px; transition: transform .2s ease; }
.cat-tree .cat-twist-leaf { visibility: hidden; }
.cat-tree .cat-folder { flex: 0 0 auto; color: #f59e0b; font-size: 15px; display: inline-flex; }
.cat-tree .cat-name { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-tree .cat-code { flex: 0 0 auto; font-size: 12px; color: #64748b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cat-tree .cat-count { flex: 0 0 auto; font-size: 12px; color: #475569; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
.cat-count-tip { display: inline-flex; flex: 0 0 auto; }
.cat-tree .cat-count i { color: #38bdf8; }
.cat-tree .cat-badge { flex: 0 0 auto; font-weight: 400; font-size: 10px; }
.cat-tree .cat-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
    opacity: 0;
    transition: opacity .15s ease;
}
.cat-tree .cat-row:hover .cat-actions,
.cat-tree .cat-row.selected .cat-actions,
.cat-tree .cat-row:focus-within .cat-actions { opacity: 1; }
/* Dialogs where the row control is the point (e.g. template import
   checkboxes): always show actions, not only on hover. */
.cat-tree-show-actions .cat-tree .cat-actions { opacity: 1; }
.cat-tree .cat-actions .mud-icon-button {
    width: 28px; height: 28px; padding: 0; flex-shrink: 0;
    border: 1px solid #e2e8f0; border-radius: 6px;
    background: #fff; color: #475569; font-size: 12px;
}
.cat-tree .cat-actions .mud-icon-button:hover { background: #f8fafc; color: #0f172a; }
.cat-tree .cat-row.collapsed .cat-twist i { transform: rotate(-90deg); }
.cat-tree-legend {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.cat-tree-legend i { color: #38bdf8; }
.cat-tree-legend .cat-legend-count { font-weight: 600; color: #0f172a; }
html[dir="rtl"] .cat-tree [data-level="1"], html[dir="rtl"] .cat-tree [data-level] { margin-left: 0; }
html[dir="rtl"] .cat-tree [data-level="1"] { margin-right: 18px; }
html[dir="rtl"] .cat-tree [data-level="2"] { margin-right: 36px; }
html[dir="rtl"] .cat-tree [data-level="3"] { margin-right: 54px; }
html[dir="rtl"] .cat-tree [data-level="4"] { margin-right: 72px; }
html[dir="rtl"] .cat-tree [data-level="5"] { margin-right: 90px; }
html[dir="rtl"] .cat-tree [data-level="6"] { margin-right: 108px; }
html[dir="rtl"] .cat-tree [data-level="1"]:before,
html[dir="rtl"] .cat-tree [data-level="2"]:before,
html[dir="rtl"] .cat-tree [data-level="3"]:before,
html[dir="rtl"] .cat-tree [data-level="4"]:before,
html[dir="rtl"] .cat-tree [data-level="5"]:before,
html[dir="rtl"] .cat-tree [data-level="6"]:before {
    left: auto;
    right: -14px;
}
html[dir="rtl"] .cat-tree .cat-actions { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .cat-tree .cat-row.collapsed .cat-twist i { transform: rotate(90deg); }
.cat-tree .cat-row.selected {
    background: #eff6ff;
    outline: 1px solid #38bdf8;
    outline-offset: -1px;
}
.cat-tree .cat-row.selected .cat-name { color: #0369a1; font-weight: 600; }
/* Drag-drop reorganization: dimmed source, dashed outline on the target. */
.cat-tree .cat-row.dragging, tr.dragging { opacity: .45; }
.cat-tree .cat-row.drop-target {
    outline: 2px dashed #38bdf8;
    outline-offset: -2px;
    background: #f0f9ff;
}
.cat-tree .cat-row.selected:hover { background: #e0f2fe; }
/* Keyboard operation: visible focus on rows (Tab + Enter/Space/arrows). */
.cat-tree .cat-row:focus { outline: none; }
.cat-tree .cat-row:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
}
.prod-scope {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0c4a6e;
    font-size: 13px;
    font-weight: 500;
}
html[dir="rtl"] .prod-scope { text-align: right; }
.panel-split {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.panel-split > .cat-panel {
    flex: 0 0 var(--cat-w, 33.333%);
    min-width: 0;
}
.panel-split > .product-panel { flex: 1 1 auto; min-width: 0; }
.panel-divider {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.panel-divider::before {
    content: "";
    width: 3px;
    height: 60px;
    border-radius: 999px;
    background: #e2e8f0;
    transition: background .15s ease, height .15s ease;
}
.panel-divider:hover::before,
.panel-divider.dragging::before { background: #38bdf8; height: 90px; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none; }
@media (max-width: 1100px) {
    .panel-split { flex-direction: column; }
    .panel-split > .cat-panel { flex-basis: auto; width: 100%; }
    .panel-divider { display: none; }
}
/* Industry-attribute rows (demo: product-detail tab). */
.attr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px;
    font-size: 13.5px;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
}
.attr-row:last-child { border-bottom: none; }
.um-link:hover { background: #eff6ff; color: #1e40af; transform: translateX(1px); }
.um-link i { width: 16px; text-align: center; color: #94a3b8; transition: color 0.12s, transform 0.12s; }
.um-link:hover i { color: #6366f1; transform: scale(1.08); }
.um-link:active { background: #dbeafe; }
.um-link.danger { color: #dc2626; }
.um-link.danger i { color: #dc2626; }
.um-link.danger:hover { background: #fef2f2; color: #b91c1c; }
.um-divider { height: 1px; background: #f1f5f9; margin: 6px 4px; }

/* ================= STATUSBAR ================= */
.statusbar {
    position: relative;
    height: var(--erp-statusbar-h);
    background: var(--erp-statusbar-bg);
    border-top: 1px solid var(--erp-topbar-line);
    color: var(--erp-statusbar-text);
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 20px;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    margin-top: auto;
    flex-shrink: 0;
}
.statusbar .sb-section { display: flex; align-items: center; gap: 14px; min-width: 0; }
.statusbar .sb-spacer { flex: 1; }
.statusbar .sb-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--erp-ok); display: inline-block; margin-right: 6px;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
}
/* Live circuit: green, gently blinking while connected. */
.statusbar .sb-dot.live { animation: sb-pulse 1.6s ease-in-out infinite; }
@keyframes sb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* Reachable server but circuit down / retrying. */
.statusbar .sb-dot.warn {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.2);
}
/* Browser offline. */
.statusbar .sb-dot.down {
    background: var(--erp-danger);
    box-shadow: 0 0 0 3px rgba(239,68,68,.2);
}
/* Subscription pill: same dot language, steady (ambient state, not a
   live circuit — no blink). The pill is a plain link inheriting bar
   color; it is never hidden on mobile. */
.statusbar .sb-dot.still { animation: none; }
.statusbar a.sb-pill {
    color: inherit; text-decoration: none;
    display: inline-flex; align-items: center;
}
.statusbar a.sb-pill:hover { text-decoration: underline; }
/* Reconnect banner: the statusbar dot's big sibling. Shown above the
   bar while the circuit is down — Blazor Server can't queue writes
   offline, so the copy says to wait, not to keep working. */
.sb-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 20px; font-size: 12px; font-weight: 600;
    flex-shrink: 0;
}
.sb-banner.warn { background: #fffbeb; color: #92400e; border-top: 1px solid #fcd34d; }
.sb-banner.down { background: #fef2f2; color: #991b1b; border-top: 1px solid #fca5a5; }
.statusbar .sb-secondary { color: var(--erp-topbar-faint); }
.statusbar .sb-section img {
    width: 20px; height: 20px; border-radius: 50%;
    vertical-align: middle; margin-right: 6px; display: inline-block;
}
.statusbar i { color: var(--erp-topbar-faint); margin-right: 4px; }

/* ================= RTL ================= */
[dir="rtl"] .sidebar { left: auto; right: 0; }
[dir="rtl"] .main {
    margin-left: 0; margin-right: var(--erp-sidebar-w);
    max-width: calc(100vw - var(--erp-sidebar-w));
    width: calc(100% - var(--erp-sidebar-w));
}
[dir="rtl"] .sidebar.collapsed + .main {
    margin-right: var(--erp-rail-w); margin-left: 0;
    max-width: calc(100vw - var(--erp-rail-w));
    width: calc(100% - var(--erp-rail-w));
}
[dir="rtl"] .sidebar.collapsed { left: auto; right: 0; }
[dir="rtl"] .topbar { direction: rtl; justify-content: space-between; }
[dir="rtl"] .topbar-right { direction: rtl; }
[dir="rtl"] .topbar-left .page-desc { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .sidebar-nav a.active { box-shadow: inset -3px 0 0 var(--erp-accent); }
[dir="rtl"] .sidebar-search > i { left: auto; right: 22px; }
[dir="rtl"] .sidebar-search .search-clear { right: auto; left: 18px; }
[dir="rtl"] .sidebar-search input { padding: 7px 32px 7px 30px; }
[dir="rtl"] .sidebar .sidebar-collapse, [dir="rtl"] .topbar-left .menu-toggle { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sidebar-nav a .badge { margin-left: 0; margin-right: auto; }

/* ================= RESPONSIVE: drawer ≤992px ================= */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--erp-drawer-w);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.collapsed, .sidebar.open.collapsed { width: var(--erp-drawer-w); }
    .sidebar.collapsed + .main { margin-left: 0; }
    /* collapsed rail styles are disabled on mobile: full labels back */
    .sidebar.collapsed .sidebar-brand .brand-text { display: block !important; }
    .sidebar.collapsed .sidebar-search { width: auto; opacity: 1; padding: 10px 12px 4px; }
    .sidebar.collapsed .nav-label { opacity: 1; height: auto; padding: 10px 12px; }
    .sidebar.collapsed .sidebar-nav a { gap: 14px; }
    .sidebar.collapsed .sidebar-nav a .nav-text { width: auto; opacity: 1; }
    .main {
        margin-left: 0;
        max-width: 100vw;
        width: 100vw;
    }
    .topbar-left .menu-toggle { display: flex; }
    .topbar { padding: 12px 16px; }
    .topbar-left { gap: 10px; }
    .topbar-left .page-desc, .topbar-left .breadcrumb { display: none; }
    .tb-company-logo { height: 32px; max-width: 84px; }
    .topbar-right { gap: 12px; }
    .page { padding: 20px 16px 24px; }
    .statusbar .sb-hide-mobile { display: none; }
    .statusbar { gap: 10px; padding: 0 12px; }
    /* Drawer scrim (tap-outside-to-close): below the drawer (z 100),
       above everything else in .main. */
    .drawer-scrim {
        position: fixed; inset: 0; z-index: 90;
        background: rgba(2,6,23,.5); border: 0; padding: 0; cursor: pointer;
    }
    /* Open drawer: the brand-row button reads as close (X morph). */
    .sidebar.open .sidebar-collapse .m-toggler span { background: transparent; }
    .sidebar.open .sidebar-collapse .m-toggler span::before { transform: translateY(6px) rotate(45deg); }
    .sidebar.open .sidebar-collapse .m-toggler span::after { transform: translateY(-6px) rotate(-45deg); }
    /* A arrived-collapsed drawer (desktop rail → resize, or the old dead
       toggle) must still render as a drawer: rail rules floating the
       button over the logo and centering the brand row are neutralized. */
    .sidebar.collapsed .sidebar-brand { padding: 8px 20px 16px; justify-content: flex-start; }
    .sidebar.collapsed .sidebar-collapse { position: static; margin: 0 0 0 auto; }
}
@media (max-width: 992px) {
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    [dir="rtl"] .sidebar.open { transform: translateX(0); }
    [dir="rtl"] .main { margin-right: 0; max-width: 100vw; width: 100vw; }
    [dir="rtl"] .sidebar.collapsed { transform: translateX(100%); width: var(--erp-drawer-w); }
    [dir="rtl"] .sidebar.collapsed + .main { margin-right: 0; }
    [dir="rtl"] .sidebar.collapsed .sidebar-collapse { margin: 0 auto 0 0; }
}

/* ================= RESPONSIVE: compact topbar ≤640px ================= */
@media (max-width: 640px) {
    .topbar { padding: 10px 12px; gap: 8px; }
    .topbar-left { gap: 8px; }
    .topbar-left h2 { font-size: 16px; }
    .tb-company-name { display: none; }
    .tb-company-logo { height: 28px; max-width: 64px; }
    .topbar-right { gap: 8px; }
    .topbar-right .icon-btn { padding: 4px; font-size: 16px; }
    .topbar-right .lang-btn { width: 32px; height: 32px; font-size: 16px; }
    .topbar-right .avatar { width: 34px; height: 34px; font-size: 13px; }
}

/* ================= 3. TABLE ================= */
/* NEXORA standard table language — data tables are plain
   <table class="erp-table"> markup (see ErpTableFooter and ErpSortButton);
   MudTable is retired. */

.table-wrap { overflow-x: auto; }

table.erp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.erp-table thead { background-color: #eef2f7; }
.erp-table th {
    text-align: left;
    padding: 12px 12px 12px 0;
    font-weight: 600;
    color: #475569;
    background-color: #eef2f7;
    border-bottom: 1px solid #cbd5e1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.erp-table thead th:first-child {
    padding-left: 12px;
    border-radius: 8px 0 0 0;
}
.erp-table thead th:last-child { border-radius: 0 8px 0 0; }
.th-sort {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.th-sort:hover { color: #0f172a; }
.th-sort i { font-size: 10px; color: #94a3b8; }
.erp-table td {
    /* 45px rows: 30px tile + 6px top/bottom padding + 1px divider = 45.
       The tr height floors shorter rows at 45; cells stay centered. */
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    font-size: 14px;
    white-space: nowrap;
    vertical-align: middle;
}
.erp-table td strong { color: #0f172a; }
.erp-table tbody tr { height: 45px; }
.erp-table tbody tr.clickable { cursor: pointer; }
.erp-table tbody tr:last-child td { border-bottom: none; }
.erp-table tbody tr:hover { background-color: #f8fafc; }
.erp-table tbody tr.selected { background-color: #eff6ff; }
.erp-table .actions-cell { text-align: right; white-space: nowrap; }
.erp-table tfoot td { background-color: #eef2f7; border-top: 2px solid #cbd5e1; font-weight: 700; }
.erp-table td .btn-xs { padding: 4px 9px; border-radius: 6px; }
.erp-table td .btn-xs i { font-size: 13px; }
.erp-table td .btn + .btn { margin-left: 6px; }
.erp-table td .mud-icon-button + .mud-icon-button { margin-inline-start: 6px; }
/* Clickable status legend (e.g. SCM orders): unstyled button row, chip fills when active. */
.status-legend-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 4px; border-radius: 8px; cursor: pointer; font: inherit; }
.status-legend-btn:hover { background: #f1f5f9; }
.status-legend-btn .legend-hint { font-size: 12px; }
.erp-table .center-cell { text-align: center; }

/* 30px thumbnail / initial tile + 16px native status checkbox. */
.logo-thumb {
    height: 30px;
    width: auto;
    max-width: 64px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    display: block;
}
.logo-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #eef2f7;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}
.row-check {
    width: 16px;
    height: 16px;
    accent-color: #0b8a5e;
    cursor: pointer;
    vertical-align: middle;
    margin: 0;
}

.site-link {
    color: #1e293b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.site-link:hover { text-decoration: underline; }
.site-link i { color: #38bdf8; font-size: 12px; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge.active { background: #dcfce7; color: #15803d; }
.status-badge.inactive { background: #f1f5f9; color: #475569; }
.status-badge.pending { background: #fef9c3; color: #854d0e; }
.status-badge.danger { background: #fee2e2; color: #b91c1c; }
/* Legacy aliases used across pages (same hues). */
.status-badge.success { background: #dcfce7; color: #15803d; }
.status-badge.warning { background: #fef9c3; color: #854d0e; }
.status-badge.info { background: #dbeafe; color: #1d4ed8; }
.tab-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0; }
.muted-note { color: #64748b; font-size: .85rem; margin: .5rem 0; }
.kv-table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.kv-table th, .kv-table td { padding: .45rem .6rem; border-bottom: 1px solid #e2e8f0; text-align: start; font-size: .88rem; }
.kv-table th { font-weight: 600; }
.actions-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.wizard-step { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid #e2e8f0; }
.wizard-step:last-of-type { border-bottom: 0; }

.empty-note {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 18px 0;
}

/* Department template tree: scrollable checkable hierarchy with
   depth indentation (inline padding), code hints and exists badges. */
.dept-tree {
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 0;
    background: #fff;
}
.dept-node {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.dept-node:last-child { border-bottom: none; }
.dept-node:hover { background: #f8fafc; }
.dept-name { flex: 1; font-size: 13.5px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dept-name .tbl-muted { margin-inline-start: 6px; }

/* Template footer: plain row under a divider — "show [10] perPage
   Showing 1-10 of 56" left, "< PREV  Page 1 of 6  NEXT >" right. */
.tbl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
    padding-top: 12px;
}
.tbl-foot-side { display: flex; align-items: center; gap: 8px; }
.tbl-muted { color: #64748b; font-size: 12.5px; }
.tbl-range { color: #94a3b8; font-size: 12.5px; }
.tbl-page { color: #0f172a; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tbl-size {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 12.5px;
    color: #1e293b;
    padding: 4px 6px;
    font-family: inherit;
}

/* Collapsible filter row under the card header (toggled by Filter button). */
.filter-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.filter-search { flex: 1 1 260px; max-width: 340px; }
.filter-check { padding-bottom: 4px; }

[dir="rtl"] .erp-table th,
[dir="rtl"] .erp-table td { text-align: right; }
[dir="rtl"] .erp-table thead th:first-child { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .erp-table .center-cell { text-align: center; }
[dir="rtl"] .erp-table .actions-cell { text-align: left; }
[dir="rtl"] .erp-table td .btn + .btn { margin-left: 0; margin-right: 6px; }

/* ================= 4. WIZARD ================= */
/* Import/export wizards. */
.tabs {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    gap: 4px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}

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

.tab {
    padding: 10px 18px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex: 0 0 auto;
    cursor: grab;
}

.tab i {
    color: #94a3b8;
}

.tab:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.tab.active {
    color: #0f172a;
    border-bottom-color: #38bdf8;
    background: #f8fafc;
}

.tab.active i {
    color: #38bdf8;
}

/* Two-level wizard nav: level 1 stays .tabs; level 2 migration steps
   render as a numbered stepper (sequence + progress, not free navigation). */
.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    align-items: stretch;
    margin-bottom: 18px;
}
.step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
}
.step:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.step-n {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
}
.step.current {
    color: #0f172a;
    border-bottom-color: #38bdf8;
}
.step.current .step-n {
    border-color: #38bdf8;
    color: #0284c7;
}
.step.done {
    color: #475569;
}
.step.done .step-n {
    border-color: #38bdf8;
    background: #38bdf8;
    color: #fff;
    font-size: 0;
}
.step.done .step-n::before {
    content: "\2713";
    font-size: 12px;
}

/* Segmented single-choice toggle (a method choice, not navigation). */
.seg-toggle {
    display: inline-flex;
    gap: 2px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 14px;
    max-width: 100%;
    flex-wrap: wrap;
}
.seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
}
.seg-btn:hover {
    color: #1e293b;
}
.seg-btn.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.seg-btn.active i {
    color: #38bdf8;
}

/* Zoho migration page: the shared wizard classes are sized for the compact
   import modal (11–12px copy); on a full Admin page they read smaller than
   the ERP body (14px tables, 13px controls). Lift them for this page only. */
.zoho-migrate .erp-card-body { font-size: 13.5px; }
.zoho-migrate .preview-title { font-size: 13.5px; }
.zoho-migrate .wizard-note,
.zoho-migrate p.wizard-note { font-size: 13px; line-height: 1.55; }
.zoho-migrate .map-input,
.zoho-migrate .map-select { font-size: 13px; }
.zoho-migrate .status-pill,
.zoho-migrate .prog-row { font-size: 12.5px; }
.zoho-migrate .report-ok,
.zoho-migrate .report-error { font-size: 13px; }
.zoho-migrate code { font-size: 12px; }

/* API sub-steps stack vertically; pull stays visible but dimmed until connect. */
.api-step {
    margin-bottom: 6px;
}
.api-step.is-locked {
    opacity: .55;
}
.api-step.is-locked .preview-title {
    color: #94a3b8;
}

/* Detail tabs (MudTabs.detail-tabs + .tab-body panels): breathing room
   between the tab header row and the body container on every page. */
.detail-tabs .mud-tabs-panels {
    margin-top: 12px;
}

.wizard-pane {
    display: none;
}

.wizard-pane.active {
    display: block;
}

.wizard-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.wizard-note {
    font-size: 11px;
    align-self: center;
}

p.wizard-note {
    font-size: 12px;
    margin: 0 0 10px;
}

.import-drop {
    display: block;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    padding: 26px 22px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s, background .15s;
}

.import-drop:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.import-drop.drag {
    border-color: #ef4444;
    background: #fef2f2;
}

.drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    font-size: 20px;
}

.import-drop-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-top: 10px;
}

.browse-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0f172a;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 18px;
    border-radius: 8px;
    margin-top: 10px;
}

.import-drop-sub {
    display: block;
    font-size: 11px;
    margin-top: 10px;
}

.file-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 12.5px;
}

.file-chip > i {
    color: #0d9488;
}

.file-chip-name {
    flex: 1;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chip-remove {
    border: none;
    background: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
}

.chip-remove:hover {
    color: #dc2626;
}

.hidden-input {
    display: none;
}

.preview-block {
    margin-top: 12px;
}

.preview-title {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 6px;
}

.preview-scroll {
    max-height: 170px;
    overflow: auto;
    border: 1px solid #eef2f6;
    border-radius: 8px;
}

.preview-table {
    width: 100%;
    min-width: 520px;
    font-size: 12px;
}

.preview-table thead {
    background: #f8fafc;
}

.preview-stats {
    font-size: 11px;
    margin-top: 6px;
}

.map-wrap {
    border: 1px solid #eef2f6;
    border-radius: 8px;
    overflow: auto;
}

.map-table {
    min-width: 620px;
    font-size: 12.5px;
}

.map-table th,
.map-table td {
    padding: 8px;
}

.map-note {
    font-size: 11px;
}

.map-select {
    width: 140px;
    max-width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px;
    font-size: 12.5px;
    background: #fff;
}

.map-input {
    flex: 1;
    min-width: 200px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
}

.prog-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 6px;
}

.prog-track {
    height: 4px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.prog-fill {
    height: 100%;
    width: 0%;
    transition: width .3s;
}

.prog-import {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.prog-fill.done {
    background: linear-gradient(90deg, #15803d, #16a34a);
}

.prog-export {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.report-ok {
    padding: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 12.5px;
    margin-top: 14px;
}

.report-ok i {
    color: #0d9488;
}

.report-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 640px) {
    .report-grid {
        grid-template-columns: 1fr;
    }
}

.report-title {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 6px;
}

.report-title.ok {
    color: #15803d;
}

.report-title.bad {
    color: #b91c1c;
}

table.report-uploaded thead {
    background: #f0fdf4;
}

table.report-discarded thead {
    background: #fef2f2;
}

table.report-uploaded,
table.report-discarded {
    font-size: 11.5px;
}

.scope-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
}

.col-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.col-check {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12.5px;
    cursor: pointer;
}

.wizard-sub {
    font-weight: 700;
    font-size: 12px;
    margin: 10px 0 6px;
}

.format-row {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
}

.format-opt {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12.5px;
    cursor: pointer;
}

.report-error {
    padding: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 12.5px;
    margin-top: 14px;
}

.report-error i {
    color: #b91c1c;
}

/* ================= 5. PLATFORM ================= */
/* Platform dashboard stat cards (was Admin app.css). */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.stat-num { font-size: 26px; font-weight: 700; color: #0f172a; }
.stat-sub { font-size: 12px; color: #64748b; }

/* Row delete affordance (replaces inline display/cursor styles). */
.row-del { display: inline-flex; cursor: pointer; }
/* ================= 6. FONTS ================= */
/* DIN Next LT Arabic — the Arabic-interface default (licensed asset, the
   same files the mobile app ships: regular/medium/bold only). Served by
   NEXORA.UI so both web hosts get it; applied wherever the UI is Arabic
   (html lang, set on every load by the host head script). The inherit
   rule beats component-level font stacks (MudBlazor included) without
   enumerating them: <i> keeps FontAwesome icons, code/pre keep mono. */
html[lang="ar"] body {
    font-family: "DIN Next LT Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
html[lang="ar"] body *:not(i):not(code):not(pre):not(kbd):not(samp) {
    font-family: inherit;
}
@font-face {
    font-family: "DIN Next LT Arabic";
    src: url("../fonts/din-next-lt-arabic-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next LT Arabic";
    src: url("../fonts/din-next-lt-arabic-medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next LT Arabic";
    src: url("../fonts/din-next-lt-arabic-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ================= FLOOR PRINT (GRN / pick / handover / bin labels) ================= */
.doc-print { background: #fff; color: #000; }
.doc-print table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.doc-print th, .doc-print td { border: 1px solid #000; padding: 4px 8px; font-size: 12px; text-align: left; }
[dir="rtl"] .doc-print th, [dir="rtl"] .doc-print td { text-align: right; }
.doc-print .doc-title { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.doc-print .doc-meta { font-size: 12px; margin-bottom: 8px; }
.doc-print .doc-total { font-size: 13px; font-weight: 700; margin-top: 8px; }
.doc-print .doc-sign { display: flex; gap: 24px; margin-top: 28px; font-size: 12px; }
.doc-print .doc-sign div { flex: 1; border-top: 1px solid #000; padding-top: 4px; }
.doc-print .bin-label { text-align: center; padding: 24px 8px; }
.doc-print .bin-label .code { font-size: 64px; font-weight: 800; letter-spacing: 2px; }
.doc-print .bin-label .sub { font-size: 16px; margin-top: 4px; }

/* Print host for sheets cloned out of dialogs (DocPrintDialog.razor.js):
   off screen while the app is live, the sheet carrier when printing. */
.nxr-print-host { display: none; }
@media print {
    body * { visibility: hidden; }
    .doc-print, .doc-print * { visibility: visible; }
    /* App-frame lock (.main = viewport height, .page = the scroller)
       clips in-place dialogs to a blank page: dialogs like the label
       print render inside .page, so release the frame for print
       (same fix the help shell already uses for its guides). */
    .main { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; }
    .page { overflow: visible !important; height: auto !important; max-height: none !important; }
    /* Release the dialog frame around the sheet: the sheet is absolutely
       positioned (below), so it leaves the flow and the dialog scroll
       box (.mud-dialog-content, overflow:auto) collapses empty and
       clips it - only the first line (the product name) printed.
       Static + overflow:visible puts the sheet containing block back
       at the page, so the whole label lands on sheet one. */
    .mud-dialog-container { position: static !important; display: block !important; width: auto !important; height: auto !important; overflow: visible !important; }
    .mud-overlay { display: none !important; }
    .mud-dialog { position: static !important; display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; }
    .mud-dialog-title, .mud-dialog-actions { display: none !important; }
    .mud-dialog-content { position: static !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; }
    /* The cloned sheet carrier: shown on the page, so the sheet inside
       (absolutely positioned) prints from the page origin. */
    .nxr-print-host { display: block !important; }
    /* The cloned sheet prints alone. Visibility:hidden keeps the whole app
       in flow, so a long list still emits blank pages behind the sheet, and
       an absolutely positioned sheet can ride fragmentation into a later
       page. Hiding the shell makes the job exactly the sheet - in normal
       flow, with nothing above it to clip or contain it. */
    body.nxr-printing > *:not(.nxr-print-host) { display: none !important; }
    body.nxr-printing > .nxr-print-host { display: block !important; }
    body.nxr-printing { height: auto !important; overflow: visible !important; background: #fff !important; }
    body.nxr-printing .nxr-print-host .doc-print {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
    /* Fallback for a print without the JS clone: a drawer is fixed and
       transformed, so it captures the sheet and pushes it off the
       printable width - the job comes out blank. */
    .erp-detail-panel { position: static !important; transform: none !important; width: auto !important; max-width: none !important; }
    /* Page-absolute millimetres, NOT viewport %: % resolves against
    the (wide) viewport and the browser shrink-fits the page into a
    miniature. 190mm = A4 minus the @page margins below. */
    .doc-print { position: absolute; left: 0; top: 0; width: 190mm; max-width: 190mm; margin: 0; }
    .doc-print img { max-width: 130px; }
    .d-print-none { display: none !important; }
}

@page {
    size: A4 portrait;
    margin: 10mm;
}

/* Command palette (ErpSearchDialog): sectioned listbox rows with keyboard
   active state + pin stars. Lives in the theme (plain-CSS gate). */
.palette-list { max-height: 320px; overflow: auto; margin-top: 8px; }
.palette-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; padding: 10px 8px 2px; }
.palette-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.palette-row:hover { background: #f1f5f9; }
.palette-row.active { background: #eef2ff; outline: 1px solid #c7d2fe; }
.palette-row .palette-icon { width: 20px; text-align: center; color: #64748b; flex-shrink: 0; }
.palette-row .palette-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0f172a; }
.palette-row .palette-group { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.palette-row .palette-star { border: 0; background: transparent; padding: 2px 4px; cursor: pointer; font-size: 13px; flex-shrink: 0; }
.palette-empty { padding: 12px 8px; font-size: 13px; color: #94a3b8; }
.palette-hint { margin-top: 8px; font-size: 11px; color: #94a3b8; }

/* ================= 7. RESPONSIVE + RTL POLISH =================
   Audit-driven safety nets for ~360px widths and Arabic RTL.
   Additive only: extends the sections above, redefines nothing. */

/* Unwrapped erp-tables (BI/HR/GL report cards render raw <table>) scroll
   inside the card instead of clipping: th/td are nowrap, .page clips-x. */
.erp-card-body { overflow-x: auto; }

/* Card headers wrap: long AR titles + date-filter/actions share one row. */
.erp-card-header { flex-wrap: wrap; }
.erp-card-title { min-width: 0; flex: 1 1 auto; }
.erp-card-actions { flex-wrap: wrap; }

/* Dialog content scrolls on desktop too (was ≤640px only); wide dialog
   tables (e.g. BI statement) scroll instead of breaking the modal. */
.mud-dialog.erp-modal .mud-dialog-content { overflow-y: auto; }
.mud-dialog.erp-modal .mud-dialog-actions { flex-wrap: wrap; }

/* Table footers wrap per side, not just between sides. */
.tbl-foot-side { flex-wrap: wrap; }

/* Tiny phones (≤480px): the nowrap topbar (toggle + logo + 6 icon-btns)
   clips the account avatar — let the right cluster drop to a second row. */
@media (max-width: 480px) {
    .topbar { flex-wrap: wrap; }
    .topbar-right { margin-inline-start: auto; }
}

/* RTL: mirror directional icons (Back arrows, wizard Next/Prev, pager
   Prev/Next chevrons). Vertical icons (sort, chevron-down twists) untouched. */
[dir="rtl"] i.fa-arrow-left,
[dir="rtl"] i.fa-arrow-right,
[dir="rtl"] i.fa-chevron-left,
[dir="rtl"] i.fa-chevron-right { transform: scaleX(-1); }

/* RTL: physical margins/paddings that landed on the wrong side. */
[dir="rtl"] .statusbar i { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .statusbar .sb-dot { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .statusbar .sb-section img { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .cat-tree .cat-count { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .sidebar-nav .nav-section-icon { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .sidebar-nav a .nav-unfav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .topbar-right .icon-btn .dot { right: auto; left: 2px; }
[dir="rtl"] .dept-node { padding-right: 0; padding-left: 8px; }
[dir="rtl"] #blazor-error-ui .dismiss { right: auto; left: 0.75rem; }
/* Panel docks inline-end; its shadow is inline-styled, hence !important. */
[dir="rtl"] .erp-help-panel { box-shadow: 8px 0 24px rgba(45,49,66,0.12) !important; }

/* Logical alignment (same cascade weight as the rule above, wins by order). */
.move-pick button { text-align: start; }

/* ---- Split-screen auth (login / register): form panel + indigo showcase.
   Flex row auto-flips under dir="rtl"; showcase hides on narrow screens. */
.auth-split {
    display: flex;
    background: #fff;
    /* App-frame lock (body overflow hidden) leaves auth pages with no
       scroll container: tall wizard steps (trial picker on phones) clip
       with the button out of reach. Cap the split at the viewport and
       scroll inside it. */
    overflow-x: hidden;
    overflow-y: auto;
    min-height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
}
.auth-form { flex: 1 1 0; padding: 40px 48px; min-width: 0; }
.auth-form > * { max-width: 480px; }
.auth-form .auth-logo-sm { width: 44px; height: 44px; font-size: 19px; border-radius: 13px; }
.auth-form .brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: #0f172a; }
.auth-form .brand-sub { font-size: 11px; color: #64748b; }
.auth-top { display: flex; justify-content: flex-end; font-size: 13px; color: #94a3b8; margin-bottom: 56px; }
.auth-top a { color: var(--erp-accent); font-weight: 600; text-decoration: none; margin-inline-start: 4px; }
.auth-top a:hover { text-decoration: underline; }
.auth-title { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: #0f172a; margin: 0 0 6px; }
.auth-sub { font-size: 14px; color: #94a3b8; margin: 0 0 28px; }
.auth-split .form-control { border-radius: 8px; padding-top: 1.4rem; }
.auth-split .form-control:focus { border-color: var(--erp-accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
/* Stacked labels (label above input): undo the floating-label top pad. */
.auth-stacked > .form-label { display: block; font-weight: 600; margin-bottom: 6px; }
.auth-stacked .form-control { padding-top: .5rem; padding-bottom: .5rem; }
.auth-field { position: relative; }
.auth-field > i {
    position: absolute; inset-inline-end: 14px; top: 50%;
    transform: translateY(-50%); color: #cbd5e1; font-size: 15px; pointer-events: none;
}
.auth-field .form-control { padding-inline-end: 40px; }
/* Password step: show/hide eye replaces the static lock icon (same slot). */
.auth-field > button.pw-eye {
    position: absolute; inset-inline-end: 8px; top: 50%;
    transform: translateY(-50%); background: transparent; border: 0;
    color: #94a3b8; font-size: 15px; cursor: pointer; padding: 6px;
}
.auth-field > button.pw-eye:hover { color: var(--erp-accent); }
/* Resend cooldown timer (registration code step): big tabular digits in
   the accent color — noticeable at first look, not a button suffix. */
.resend-timer {
    font-size: 28px; font-weight: 800; line-height: 1.2;
    color: var(--erp-accent); font-variant-numeric: tabular-nums;
}
/* OTP digit boxes (registration code step): six boxes, auto-advance,
   accent focus ring. Mirror of the OTP Verify Mockup. */
.otp-field {
    flex-direction: row;
    column-gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.otp-field input {
    height: 45px;
    width: 42px;
    border-radius: 6px;
    outline: none;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid #ddd;
    color: #0f172a;
    background: #fff;
    caret-color: var(--erp-accent);
    font-variant-numeric: tabular-nums;
}
.otp-field input:focus { border-color: var(--erp-accent); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(99, 102, 241, .15); }
.otp-field input:disabled { background: #f1f5f9; color: #94a3b8; }
.otp-sep { font-size: 1.25rem; font-weight: 700; color: #94a3b8; user-select: none; }
/* Logo dropzone (registration company step): dashed drop area replacing
   the raw file input. The native input stays keyboard-focusable. */
.logo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.logo-drop {
    position: relative; display: flex; align-items: center; justify-content: center;
    gap: 12px; min-height: 96px; padding: 12px 16px; cursor: pointer;
    border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc;
    transition: border-color .15s ease, background-color .15s ease;
}
.logo-drop:hover { border-color: var(--erp-accent); background: #eff6ff; }
.logo-drop.drag { border-color: var(--erp-accent); background: #dbeafe; }
.logo-drop:focus-within { border-color: var(--erp-accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.logo-thumb { height: 72px; width: 72px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; }
.logo-drop-text { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.logo-drop-text > i { font-size: 22px; color: var(--erp-accent); }
.logo-remove {
    position: absolute; inset-inline-end: 8px; top: 8px; width: 26px; height: 26px;
    border-radius: 50%; border: 0; background: #fee2e2; color: #dc2626;
    font-size: 16px; line-height: 1; cursor: pointer;
}
.logo-remove:hover { background: #fecaca; }
/* Password strength meter (progressive enhancement; server stays truth). */
.pw-meter { margin-top: 8px; }
.pw-meter-top { display: flex; justify-content: space-between; font-size: 12.5px; color: #64748b; margin-bottom: 6px; }
.pw-meter-top strong.weak { color: #dc2626; }
.pw-meter-top strong.medium { color: #d97706; }
.pw-meter-top strong.strong { color: #16a34a; }
.pw-bar { height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.pw-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: #dc2626; transition: width .2s ease, background-color .2s ease; }
.pw-bar > span.medium { background: #d97706; }
.pw-bar > span.strong { background: #16a34a; }
.pw-rules { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; margin: 8px 0 0; font-size: 12.5px; color: #94a3b8; }
.pw-rules li::before { content: "○  "; }
.pw-rules li.pass { color: #16a34a; }
.pw-rules li.pass::before { content: "●  "; }
.pw-hint { color: #dc2626; font-size: 12.5px; margin-top: 6px; }
/* Register wizard: trial-module picks read as cards, not a checkbox wall. */
.mod-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.mod-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; }
.mod-pick input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--erp-accent); flex-shrink: 0; }
.mod-pick span { font-weight: 600; flex-grow: 1; }
.mod-pick small { white-space: nowrap; }
.auth-div { display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: 12.5px; margin: 24px 0 16px; }
.auth-div::before, .auth-div::after { content: ""; flex: 1; height: 1px; background: #eef2f7; }
.auth-links { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; font-size: 13.5px; }
.auth-links a { color: var(--erp-accent); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
/* Finger-friendly "Remember me" (login): 24px box on a padded full-width
   tap row — the 1.1em global checkbox is a desktop-mouse target. */
.auth-split .checkbox label {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; margin: 0; cursor: pointer;
}
.auth-split .checkbox .form-check-input {
    width: 24px; height: 24px; margin: 0; flex-shrink: 0;
    accent-color: var(--erp-accent);
}
.auth-show {
    flex: 1 1 0; position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(150deg, #0f172a 0%, #1e293b 100%);
    padding: 64px 56px; display: flex; flex-direction: column; min-width: 0;
}
.auth-show::before {
    content: ""; position: absolute; inset: -40%;
    background:
        radial-gradient(circle at 75% 20%, rgba(99,102,241,.35) 0, transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(56,189,248,.18) 0, transparent 40%);
    pointer-events: none;
}
/* ---- Dark auth (cookie toggle in MudAuthLayout): the showcase is already
   indigo, so only the light-hardcoded form chrome flips. MudBlazor
   components follow the provider's dark palette on their own. */
.auth-dark { background: #0b1120; }
.auth-dark .auth-split { background: #0b1120; }
.auth-dark .auth-title, .auth-dark .auth-form .brand-name { color: #f8fafc; }
.auth-dark .auth-stacked > .form-label, .auth-dark .auth-split .checkbox label { color: #e2e8f0; }
.auth-dark .auth-split .form-control {
    background: #111c33; border-color: #334155; color: #f1f5f9;
}
.auth-dark .auth-split .form-control::placeholder { color: #64748b; }
.auth-dark .otp-field input { background: #111c33; border-color: #334155; color: #f1f5f9; }
.auth-dark .otp-field input:disabled { background: #1e293b; color: #64748b; }
.auth-dark .logo-drop { background: #111c33; border-color: #475569; }
.auth-dark .logo-drop:hover { background: #16213a; }
.auth-dark .mod-pick { border-color: #334155; color: #e2e8f0; }
.auth-dark .auth-div::before, .auth-dark .auth-div::after { background: #334155; }
.auth-dark .auth-top { color: #64748b; }
.auth-quote {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--erp-accent); color: #fff; font-size: 20px; margin-bottom: 32px;
}
.auth-show-title {
    position: relative; font-size: 64px; line-height: 1.04;
    font-weight: 800; letter-spacing: -1.5px; margin: 0;
}
.auth-show-foot { position: relative; margin-top: auto; border-inline-start: 1px solid rgba(255,255,255,.35); padding-inline-start: 24px; }
.auth-show-text { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.85); margin: 0 0 24px; max-width: 340px; }
.auth-show-person { display: flex; align-items: center; gap: 12px; }
.auth-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; letter-spacing: .5px;
}
.auth-show-person strong { display: block; font-size: 14px; }
.auth-show-person small { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
@media (max-width: 960px) {
    .auth-show { display: none; }
    .auth-form { padding: 32px 24px; }
    .auth-split { min-height: calc(100dvh - 48px); }
    .auth-top { margin-bottom: 32px; }
    .auth-show-title { font-size: 44px; }
}
/* ---- Idle screen lock (portal-wide): full-viewport veil + centered
   unlock card. Above every shell layer (dialogs, snackbars). */
.idle-lock {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.idle-lock-card {
    background: #fff; border-radius: 16px; padding: 28px;
    width: 100%; max-width: 380px;
    box-shadow: 0 24px 64px rgba(2, 6, 23, .45); text-align: center;
}
.idle-lock-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--erp-accent); color: #fff; font-size: 20px; margin-bottom: 16px;
}
.idle-lock-title { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 6px; }
.idle-lock-sub { font-size: 14px; color: #64748b; margin: 0 0 20px; }
.idle-lock-card .mud-alert { text-align: start; }

/* Master-detail library: batch timeline (list) + batch dossier (detail). */
.lib-split {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}
.lib-timeline {
    display: flex;
    flex-direction: column;
    border-inline-start: 2px solid #e2e8f0;
    margin-inline-start: 8px;
    max-height: 560px;
    overflow: auto;
}
.lib-item {
    position: relative;
    display: grid;
    gap: 2px;
    justify-items: start;
    text-align: start;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 12px;
    padding-inline-start: 18px;
    cursor: pointer;
    width: 100%;
}
.lib-item:hover {
    background: #f8fafc;
}
.lib-item.active {
    background: #eff6ff;
}
.lib-item:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
}
.lib-item > span {
    display: block;
}
.lib-dot {
    position: absolute;
    inset-inline-start: -7px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
}
.lib-item.active .lib-dot {
    border-color: #38bdf8;
    background: #38bdf8;
}
.lib-top {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
.lib-detail {
    min-width: 0;
}

/* Existing-batch picker in the migration wizard's source step. */
.batch-pick {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}
.batch-pick-item {
    display: grid;
    gap: 4px;
    text-align: start;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
}
.batch-pick-item:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.batch-pick-item:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}
.batch-pick-item:disabled {
    opacity: .55;
    cursor: default;
}
.batch-pick-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.api-step {
    margin-bottom: 6px;
}
.api-step.is-locked {
    opacity: .55;
}
.api-step.is-locked .preview-title {
    color: #94a3b8;
}
@media (max-width: 900px) {
    .lib-split {
        grid-template-columns: 1fr;
    }
    .lib-timeline {
        max-height: 320px;
    }
}

/* ================= WORKFLOW DIAGRAMS ================= */
/* ErpDiagramZoom frames are scoped CSS, but diagram SVG markup lives in
   other components — scoped selectors can never match it. These global
   rules style the svg canvas, animated flows, and the motion-pause flag. */
.wfz-wrap svg,
.wfz-bare svg {
    width: 100%;
    display: block;
    touch-action: none;
    cursor: grab;
    user-select: none;
    direction: ltr;
    animation: wf-canvas-in .45s ease;
}

.wfz-wrap svg.wf-grabbing,
.wfz-bare svg.wf-grabbing {
    cursor: grabbing;
}

/* Animated flow (archify-grade pulses): layered comet dots — bright core +
   wide halo — travelling along each connector and breathing as they go.
   Diagrams draw one .wf-flow twin over each base edge (same geometry, no
   arrowhead); the dash period (9.1) matches the keyframe travel for a
   seamless loop. Dashes run from edge start to edge end. */
.wf-flow {
    fill: none;
    stroke: #059669;
    stroke-width: 3.1;
    stroke-linecap: round;
    /* Per-edge px dash, set by staggerFlows() from getTotalLength() (one
       comet ≈ 8% of the edge). The fallback below only paints pre-JS. */
    stroke-dasharray: 26 294;
    filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.9)) drop-shadow(0 0 10px rgba(5, 150, 105, 0.45));
    animation: wf-flow-move 1.4s linear infinite;
    pointer-events: none;
}

@keyframes wf-flow-move {
    0% { stroke-dashoffset: 0; opacity: 0; }
    12%, 78% { opacity: 0.95; }
    100% { stroke-dashoffset: calc(var(--flow-travel, 320px) * -1); opacity: 0; }
}

/* Traced route / lens highlight: the current surges — faster, thicker,
   brighter. Applies to the flow twins; base edges stay put. */
.wf-flow.wf-path {
    stroke-width: 3.6;
    filter: drop-shadow(0 0 5px rgba(5, 150, 105, 1)) drop-shadow(0 0 14px rgba(5, 150, 105, 0.6));
    animation-duration: 0.7s;
}

@keyframes wf-canvas-in {
    from { opacity: 0; transform: translateY(10px); }
}

/* Motion control: pausing freezes flows, halos and the entrance — the glow
   stays exactly where it stopped, nothing else. */
.wf-paused .wf-flow,
.wf-paused .wf-node rect,
.wf-paused svg {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .wf-flow,
    .wf-node rect,
    .wfz-wrap svg,
    .wfz-bare svg {
        animation: none;
    }
}

/* Report form types: a form is bound to the launch point that offers it,
   not to a free-text purpose. Shared by the /crm/forms list and builder. */
.nxr-ftypes { display: grid; gap: 6px; margin-top: 6px; }
.nxr-ftype { display: grid; grid-template-columns: 18px minmax(0, 1fr) 16px; grid-template-rows: auto auto; align-items: center; column-gap: 9px; width: 100%; padding: 7px 10px; border: 1px solid rgba(45, 49, 66, .14); border-radius: 10px; background: var(--mud-palette-surface, #fff); color: inherit; text-align: start; cursor: pointer; }
.nxr-ftype:hover:not(:disabled) { border-color: var(--mud-palette-primary); }
.nxr-ftype.on { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px rgba(59, 110, 232, .10); }
.nxr-ftype:disabled { cursor: not-allowed; opacity: .7; }
.nxr-ftype > i:first-child { grid-column: 1; grid-row: 1 / span 2; color: var(--mud-palette-primary); }
.nxr-ftype-name { grid-column: 2; grid-row: 1; font-size: 12.5px; font-weight: 600; }
.nxr-ftype-launch { grid-column: 2; grid-row: 2; font-size: 11px; color: var(--mud-palette-text-secondary); }
.nxr-ftype-on { grid-column: 3; grid-row: 1 / span 2; color: var(--mud-palette-primary); }
.nxr-ftype-default { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: 999px; background: rgba(46, 125, 50, .12); color: #2e7d32; }
.nxr-ftype-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nxr-ftype-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid rgba(45, 49, 66, .14); border-radius: 999px; background: transparent; color: inherit; font-size: 12px; cursor: pointer; }
.nxr-ftype-pill.on { border-color: var(--mud-palette-primary); background: rgba(59, 110, 232, .08); color: var(--mud-palette-primary); font-weight: 600; }
.nxr-ftype-count { font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: rgba(45, 49, 66, .08); }