/* ============================================================
   SULALA — THE single stylesheet (served by SULALA.UI at
   _content/SULALA.UI/css/sulala.css, linked once per host).
   Replicated from NEXORA.UI nexora.css (identity + shell + table +
   wizard + platform + fonts sections, historic cascade order
   preserved); brand accents re-pointed at Sulala green.
   Sections:
     1. identity  — Account/forms bridge
     2. shell     — tokens + sidebar/topbar/statusbar/dialogs
     3. table     — erp-table language
     4. wizard    — import/export wizards
      5. platform  — platform dashboard stat cards
      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.
   ============================================================ */

/* ---- Sulala identity: family green over the inherited navy ---- */
:root {
    --sl-primary: #2e7d32;
    --sl-primary-dark: #1b5e20;
    --sl-primary-light: #43a047;
}

/* ================= 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;
}

/* FocusOnNavigate parks focus on the page h1 after every navigation
   (screen-reader announcement). The focus must stay for SR users, but
   the browser's default ring must never paint around a heading. */
h1:focus {
    outline: none;
}

/* MudBlazor positions the tab slider with LTR offsets: in RTL it paints
   under the wrong header while the truly active header keeps its accent
   color. Hide the lying bar; the active header carries its own underline
   instead (inset shadow on the header itself — no coordinates, so RTL-proof). */
html[dir="rtl"] .mud-tab-slider {
    display: none;
}
html[dir="rtl"] .mud-tab.mud-tab-active {
    box-shadow: inset 0 -3px 0 currentColor;
}

/* 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;
}

/* ---- 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;
}
/* Non-clickable chip (no profile page): same row geometry as the link. */
.sidebar-footer span.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    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); }
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;
    }
}
.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-leading {
    display: flex;
    align-items: center;
    margin-inline-end: auto;
}
.page-header .actions {
    display: flex;
    align-items: center;
    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-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); } }

.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 {
    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 { 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; }

/* ================= 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 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; }

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

/* Audit trail page cell: full request URLs collapse to an ellipsis with
   the complete value on hover (scan pattern over raw URLs). */
.audit-page {
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    direction: ltr;
}

/* 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;
}

/* 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;
}

/* Small screens: MudBlazor tabs min-width 160px, so at 390px only two
   fit and the rest hide behind scroll arrows. Let detail tabs share the
   row instead (four short Arabic labels fit once the minimums go). */
@media (max-width: 640px) {
    .detail-tabs .mud-tab {
        min-width: 0;
        flex: 1 0 0;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 0.75rem;
    }
}

.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: 10px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

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

.prog-import {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.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.
   MudBlazor renders font icons inside .mud-icon-root spans (not <i>), so
   the wrapper and its descendants are excluded too — otherwise the FA
   font loses to DIN Next and every Mud-fed icon renders as tofu. */
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):not(.mud-icon-root):not(.mud-icon-root *) {
    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; }
@media print {
    body * { visibility: hidden; }
    .doc-print, .doc-print * { visibility: visible; }
    /* 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 that carry meaning. */
[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: MudBlazor tab scroll chevrons are LTR-fixed (their RightToLeft
   comes from MudRTLProvider, which this shell doesn't use). The "previous"
   button sits DOM-first — right side in RTL — yet still shows ChevronLeft.
   Mirror both glyphs so each points the way its button travels. */
html[dir="rtl"] .mud-tabs-scroll-button svg {
    transform: scaleX(-1);
}

/* RTL: a collapsed nav-group chevron is chevron-down rotated -90° (">").
   In RTL it must point the mirrored way ("<"), so twist it +90° instead. */
[dir="rtl"] .sidebar-nav .nav-group.collapsed .nav-chevron { transform: rotate(90deg); }

/* 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; }

/* RTL: MudBlazor form mirroring. MudBlazor only mirrors inputs behind its
   own .mud-application-layout-rtl gate (MudRTLProvider wrapper), which
   portaled surfaces (dialogs, select menus, popovers) never sit inside —
   so floating labels stay glued left in Arabic. These are MudBlazor 9.9.0's
   own declarations, rescoped to html[dir] so every surface follows,
   portals included. */
html[dir="rtl"] .mud-input-control.mud-input-number-control .mud-input-numeric-spin { left: 0; right: unset; }
html[dir="rtl"] .mud-input-label { transform-origin: top right; }
html[dir="rtl"] .mud-input-label-inputcontrol { left: unset; right: 0; }
html[dir="rtl"] .mud-input-label-shrink { transform-origin: top right; }
html[dir="rtl"] .mud-input-label-filled { transform: translate(-12px, 20px) scale(1); }
html[dir="rtl"] .mud-input-label-filled.mud-input-label-margin-dense { transform: translate(-12px, 17px) scale(1); }
html[dir="rtl"] .mud-input-label-outlined { transform: translate(-14px, 20px) scale(1); }
html[dir="rtl"] .mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(-14px, 12px) scale(1); }
html[dir="rtl"] .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
html[dir="rtl"] .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol,
html[dir="rtl"] .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol { transform-origin: top right; }
html[dir="rtl"] .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
html[dir="rtl"] .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
html[dir="rtl"] .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled { transform: translate(-12px, 10px) scale(0.75); }
html[dir="rtl"] .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense,
html[dir="rtl"] .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense,
html[dir="rtl"] .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense { transform: translate(-12px, 7px) scale(0.75); }
html[dir="rtl"] .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
html[dir="rtl"] .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
html[dir="rtl"] .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { transform: translate(-14px, -6px) scale(0.75); }
html[dir="rtl"] .mud-select .progress-indicator-circular--with-adornment { padding-right: 0rem !important; padding-left: 1rem !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; }

/* ================= AUTH (login / register / invite / recovery) ==== */
/* NEXORA split-screen auth parity: same class language, Sulala brand.
   One scoping line re-tints accents to family green; everything else
   tracks NEXORA so future upstream drops land cleanly. */
.auth-split { --erp-accent: var(--sl-primary); }
.auth-bar { background: #ffffff; border-bottom: 4px solid var(--sl-primary); color: #0f172a; }
.auth-bar-brand { display: inline-flex; align-items: center; gap: 10px; }
.auth-bar-brand .brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: #0f172a; }
.auth-bar-brand .brand-sub { font-size: 11px; color: #64748b; }
.authlm { position: relative; display: inline-block; margin-inline-start: auto; }
.authlm-btn {
    min-width: 64px; height: 36px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    cursor: pointer; font-family: inherit; font-size: 14px; padding: 0 12px;
}
.authlm-btn:hover { border-color: var(--sl-primary); color: var(--sl-primary); }
.authlm-drop {
    display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 6px);
    min-width: 220px; background: #fff; border-radius: 12px; border: 1px solid #eef2f6;
    box-shadow: 0 12px 32px rgba(2,6,23,.18); padding: 6px; overflow: hidden; z-index: 100;
}
.authlm.open .authlm-drop { display: block; }
.authlm-head {
    display: block; font-size: 12px; font-weight: 600; color: #fff; text-align: center;
    padding: 14px 16px; margin: -6px -6px 6px; border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
}
.authlm-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%;
    border: 0; background: none; cursor: pointer; font-family: inherit;
    font-size: 14px; color: #0f172a; border-radius: 8px; padding: 8px 10px;
    text-align: start;
}
[dir="rtl"] .authlm-item { justify-content: flex-start; text-align: right; }
.authlm-item:hover { background: #f0fdf4; color: #15803d; }
.authlm-item.active { background: #f8fafc; color: #2e7d32; font-weight: 600; }
.authlm-item img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
.authlm-item i { margin-inline-start: auto; font-size: 12px; width: 16px; text-align: center; }
.auth-split {
    display: flex;
    background: #fff;
    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-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(46, 125, 50, .15); }
.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; }
.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); }
.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-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; }
.auth-steps { margin-bottom: 18px; }
.auth-step { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.auth-step .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--erp-accent); color: #fff; font-size: 12px; font-weight: 700;
}
.auth-step.done { color: #16a34a; }
.auth-step.todo { color: #94a3b8; }
/* 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.pass { color: #16a34a; }
.pw-hint { color: #dc2626; font-size: 12.5px; margin-top: 6px; }
/* 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; }
.auth-show {
    flex: 1 1 0; position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(150deg, #0f172a 0%, #1b5e20 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(67,160,71,.35) 0, transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(46,125,50,.25) 0, transparent 40%);
    pointer-events: none;
}
.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: 56px; 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-show-title { font-size: 44px; }
}
.auth-top { display: flex; justify-content: flex-end; font-size: 13px; color: #94a3b8; margin-bottom: 24px; }
.auth-top a { color: var(--erp-accent); font-weight: 600; text-decoration: none; margin-inline-start: 4px; }
.auth-top a:hover { text-decoration: underline; }

/* Detail-page top bar: title at the inline start, actions pinned to the
   inline end (mirrors automatically in RTL). */
.detail-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.detail-topbar .detail-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Bank mark: colored initials tile always paints; the logo overlays it
   and drops out on load failure (BankLogo swaps back to initials). */
.bank-logo { position: relative; display: inline-flex; flex-shrink: 0; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.bank-logo .bank-initials { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; line-height: 1; }
.bank-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* ================= 7. FAMILY TREE — Family.Show themes =================
   Palette comes from the selected theme (Sulala default) as --ft-*
   variables set on the .ft-theme wrapper. The fallbacks below are
   Sulala so the diagram still paints before the inline vars land. */
.ft-theme {
    --ft-diagram: linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%);
    --ft-panel: linear-gradient(90deg, #f1f8e9 0%, #c8e6c9 100%);
    --ft-rail: linear-gradient(180deg, #dcedc8, #a5d6a7);
    --ft-rail-hover: #f1f8e9;
    --ft-ink: #1b5e20;
    --ft-alt: #5d7a68;
    --ft-primary: #2e7d32;
    --ft-primary-hover: #43a047;
    --ft-spouse: #a05a00;
    --ft-spouse-hover: #bd6d00;
    --ft-sibling: #4a7a96;
    --ft-sibling-hover: #5f92b1;
    --ft-star: #d4a017;
    --ft-star-stroke: #ffffff;
    --ft-selection: #2e7d32;
    --ft-border: #a5c4a8;
    --ft-connector: #81a884;
    --ft-bloodline: #4f8a63;
    --ft-tip-bg: #f3faf5;
    --ft-tip-ink: #1b5e20;
    --ft-tip-life: #5d7a68;
    --ft-photo-bg: #c8e6c9;
    --ft-shadow: rgba(27, 94, 32, .25);
    --ft-lines: #8ab894;
}
.ft-canvas { position: relative; }
/* Panning translates this layer, so the tree can move freely even when it
   is smaller than the stage (scroll offsets cannot go negative). */
.ft-pan-layer { will-change: transform; }
.ft-stage {
    background: var(--ft-diagram);
    border: 1px solid var(--ft-border);
    border-radius: 10px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    /* Fixed pane height: the details card matches it so both boxes share
       the same top and bottom edge. */
    height: 68vh;
}
/* Legend dialog: two columns of symbol + meaning rows. Symbols keep the
   selected Family.Show palette via --ft-*; row text stays dialog-dark so
   dark themes do not turn it light on the white modal. */
.ft-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
}
.ft-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 4px 2px;
    border-bottom: 1px solid #e7ebf1;
    font-size: 13px;
}
.ft-legend-symbol {
    flex: 0 0 44px;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 520px) {
    .ft-legend-grid { grid-template-columns: 1fr; }
}
.ft-stage.ft-panning { cursor: grabbing; }
.ft-chart { font-family: "Segoe UI", Tahoma, "DIN Next LT Arabic", sans-serif; }
.ft-chart .ft-name { fill: var(--ft-ink); font-size: 12px; font-weight: 500; }
.ft-chart .ft-life { fill: var(--ft-alt); font-size: 10.5px; }
.ft-chart .ft-year { fill: var(--ft-ink); font-size: 11px; }
.ft-chart .ft-year-hot { fill: var(--ft-ink); font-weight: 600; }
.ft-chart .ft-gen-line { stroke: var(--ft-lines); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 2 6; }
/* ChildConnectionPen: #80A9A9A9, i.e. #A9A9A9 at 50%. */
.ft-chart .ft-link { fill: none; stroke: var(--ft-connector); stroke-opacity: .5; stroke-width: 1; }
/* ChildPrimaryConnectionPen: opaque #90C090 for bloodline links. */
.ft-chart .ft-link.ft-bloodline { stroke: var(--ft-bloodline); stroke-opacity: 1; }
.ft-chart .ft-arc { fill: none; stroke-width: 1.5; }
/* Person form: three fixed field lines on the Identity tab. */
.ft-form-row { display: flex; gap: 8px; }
.ft-form-row-center { align-items: center; }
.ft-panel {
    background: var(--ft-panel);
    color: var(--ft-ink);
    border: 1px solid var(--ft-border);
    border-radius: 10px;
}
.ft-panel .ft-caption { color: var(--ft-alt); letter-spacing: .02em; }
/* Overview facts use the shared read-only form-field look; the grid owns
   the spacing, so drop the standalone form field margin. */
.ft-panel .erp-field { margin-bottom: 0; }
.ft-panel .mud-button-root { color: var(--ft-ink); }
.ft-panel .mud-button-outlined { border-color: var(--ft-alt); }
/* Plain shell buttons (Create relationship actions) inherit the theme ink. */
.ft-panel .btn-outline { color: var(--ft-ink); border-color: var(--ft-alt); }
.ft-panel .btn-outline:hover { background: color-mix(in srgb, var(--ft-ink) 12%, transparent); }
.ft-panel .mud-button-filled.mud-button-filled-primary { background-color: var(--ft-primary); }
.ft-panel .mud-button-filled.mud-button-filled-primary:hover { background-color: var(--ft-primary-hover); }
/* Details popup: keep the tab strip in view and let the panel content scroll.
   overflow-x must be stated: overflow-y:auto alone makes the browser compute
   overflow-x:auto too, so a few px from MudGrid's negative spacing margins
   draw a second horizontal line (scrollbar) under the panel. */
.ft-panel .mud-tabs-panels { max-height: 52vh; overflow-y: auto; overflow-x: hidden; padding-inline-end: 2px; }
/* Theme picker in View options: swatch strip per Family.Show theme. */
.ft-theme-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--ft-lines);
    border-radius: 8px;
    cursor: pointer;
}
.ft-theme-choice:hover { background: color-mix(in srgb, var(--ft-ink) 8%, transparent); }
.ft-theme-choice.active { border-color: var(--ft-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ft-primary) 35%, transparent); }
.ft-theme-swatch {
    position: relative;
    width: 56px;
    height: 34px;
    flex: 0 0 56px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    border-radius: 6px;
}
.ft-theme-swatch span { display: block; width: 9px; height: 14px; border-radius: 2px; }
.ft-theme-swatch .ft-theme-star { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; }
/* Family rows: name fills the line, relationship label trails it, and the
   edit/remove glyphs only appear for direct links. */
.ft-rel-row { display: flex; align-items: center; width: 100%; }
.ft-rel-row .mud-button-root { min-width: 0; }
.ft-rel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-rel-row .mud-icon-button { padding: 2px; }
/* View tabs: family tree / generations / all members. */
.ft-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ft-border); margin-bottom: 10px; }
.ft-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 8px 14px;
    color: var(--ft-alt);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.ft-tab:hover { color: var(--ft-ink); }
.ft-tab.active { color: var(--ft-primary); border-bottom-color: var(--ft-primary); }
.ft-tab:focus-visible { outline: 2px solid var(--ft-primary); outline-offset: -2px; }
.tree-time-rail, .tree-zoom-rail {
    background: var(--ft-rail);
    border: 1px solid var(--ft-border);
    border-radius: 10px;
    color: var(--ft-ink);
    box-shadow: 0 2px 10px var(--ft-shadow);
}
/* Native range sits at the top of its box; rotating it then throws the
   track off-centre and out of the narrow floating rail. Centre it first. */
.tree-time-rail .mud-slider, .tree-zoom-rail .mud-slider { display: flex; align-items: center; justify-content: center; }
/* Repaint the native track and thumb in the active theme so the
   year/zoom handles read on the rail. */
.tree-time-rail .mud-slider.mud-slider-dark .mud-slider-input::-webkit-slider-runnable-track,
.tree-zoom-rail .mud-slider.mud-slider-dark .mud-slider-input::-webkit-slider-runnable-track { background-color: var(--ft-lines); }
.tree-time-rail .mud-slider.mud-slider-dark .mud-slider-input::-moz-range-track,
.tree-zoom-rail .mud-slider.mud-slider-dark .mud-slider-input::-moz-range-track { background-color: var(--ft-lines); }
.tree-time-rail .mud-slider.mud-slider-dark .mud-slider-input::-webkit-slider-thumb,
.tree-zoom-rail .mud-slider.mud-slider-dark .mud-slider-input::-webkit-slider-thumb { background-color: var(--ft-primary); box-shadow: none; }
.tree-time-rail .mud-slider.mud-slider-dark .mud-slider-input::-moz-range-thumb,
.tree-zoom-rail .mud-slider.mud-slider-dark .mud-slider-input::-moz-range-thumb { background-color: var(--ft-primary); box-shadow: none; }
/* 100% detent sits dead centre of the symmetric zoom track. It is a
   passive marker: the thumb parks exactly there at 100%, so a clickable
   element would swallow every drag. Clicking the track at its centre
   still snaps to 100%; the rail's percentage label is the precise reset. */
.ft-zoom-reset {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    padding: 1px 3px;
    border: 1px solid var(--ft-lines);
    border-radius: 6px;
    background: var(--ft-rail-hover);
    color: var(--ft-ink);
    font-size: 8px;
    line-height: 10px;
    font-weight: 700;
    letter-spacing: -.2px;
    pointer-events: none;
}
.tree-zoom-rail .mud-slider { position: relative; z-index: 1; }
/* Fullscreen and snapshot float with the rails, outside the panning stage. */
.ft-fs-btn,
.ft-snap-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 6;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--ft-border);
    border-radius: 8px;
    background: var(--ft-rail);
    color: var(--ft-ink);
    cursor: pointer;
    box-shadow: 0 2px 10px var(--ft-shadow);
}
.ft-snap-btn { right: 44px; }
.ft-fs-btn:hover,
.ft-snap-btn:hover { background: var(--ft-rail-hover); }
.ft-fs-btn .ft-fs-exit { display: none; }
/* Restores the floating rails after the View options hide them. */
.ft-controls-restore {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 6;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--ft-border);
    border-radius: 8px;
    background: var(--ft-rail);
    color: var(--ft-ink);
    cursor: pointer;
    box-shadow: 0 2px 10px var(--ft-shadow);
}
.ft-controls-restore:hover { background: var(--ft-rail-hover); }
.ft-canvas:fullscreen { background: var(--ft-diagram); width: 100vw; height: 100vh; }
.ft-canvas:fullscreen .ft-stage { height: 100vh !important; max-height: none !important; border: 0; }
.ft-canvas:fullscreen .ft-fs-btn .ft-fs-enter { display: none; }
.ft-canvas:fullscreen .ft-fs-btn .ft-fs-exit { display: block; }
/* Family.Show DiagramToolTip: dark card, white border, photo left, facts
   and relationship sentences right (Silver/BlackResources.xaml). */
.ft-tip {
    position: fixed;
    z-index: 60;
    width: 286px;
    box-sizing: border-box;
    display: flex;
    padding: 4px 8px 8px 8px;
    background: var(--ft-tip-bg);
    border: 1px solid var(--ft-border);
    border-radius: 4px;
    box-shadow: 4px 4px 9px rgba(0, 0, 0, .35);
    color: var(--ft-tip-ink);
    font-family: "Segoe UI", Tahoma, "DIN Next LT Arabic", sans-serif;
    font-size: 12px;
    pointer-events: none;
}
.ft-tip-photo {
    flex: 0 0 70px;
    width: 70px;
    height: 85px;
    margin: 5px 10px 0 2px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .25);
    background: var(--ft-photo-bg);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .45);
}
.ft-tip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-tip-body { min-width: 0; max-width: 184px; padding-top: 6px; }
.ft-tip-name { font-weight: 600; font-size: 12.5px; line-height: 1.25; word-break: break-word; }
.ft-tip-life { color: var(--ft-tip-life); font-size: 11px; margin-top: 1px; }
.ft-tip-icons { display: flex; align-items: center; gap: 7px; height: 16px; margin: 6px 0 5px; }
.ft-tip-icons .mud-icon-root { width: 14px; height: 14px; }
.ft-tip-rel { line-height: 1.35; margin-top: 4px; word-break: break-word; }
/* Statistics page: theme-scoped tiles and distribution cards. */
.ft-stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.ft-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--ft-border);
    border-radius: 10px;
    background: var(--ft-panel);
    color: var(--ft-ink);
    box-shadow: 0 2px 10px var(--ft-shadow);
}
.ft-stat-icon { color: var(--ft-primary); }
.ft-stat-figure { font-size: 24px; font-weight: 700; line-height: 1.1; }
.ft-stat-label { font-size: 12px; color: var(--ft-alt); }
.ft-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.ft-stat-card {
    padding: 12px 14px;
    border: 1px solid var(--ft-border);
    border-radius: 10px;
    background: var(--ft-panel);
    color: var(--ft-ink);
}
.ft-stat-title {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--ft-alt);
}
.ft-stat-stack {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--ft-rail-hover);
}
.ft-stat-stack span { display: block; height: 100%; }
.ft-stat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 12px;
}
.ft-stat-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
}
.ft-stat-rows { display: flex; flex-direction: column; gap: 8px; }
.ft-stat-row-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ft-stat-track {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--ft-rail-hover);
}
.ft-stat-fill { height: 100%; border-radius: 3px; background: var(--ft-primary); }
.ft-stat-facts { display: flex; flex-direction: column; }
.ft-stat-fact {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ft-lines);
    font-size: 13px;
}
.ft-stat-fact:last-child { border-bottom: 0; }
.ft-stat-fact strong { font-weight: 600; }