/* Shared — loaded after theme for overrides */

/*
 * تاپ‌بار: عنوان اولویت اول؛ ساعت فقط به‌اندازه متن؛ ابزارها جمع‌شونده.
 * Flex (نه grid با عرض ثابت ساعت) تا عنوان دیگر به چند پیکسل فشرده نشود.
 */
.topbar {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.65rem;
    min-width: 0;
    /* visible: دراپ‌داون اعلان/کاربر نباید زیر محتوا برود یا بریده شود؛
       کوتاه‌کردن عنوان با overflow روی .topbar-start / .page-title است. */
    overflow: visible;
}

/* Projects & contracts v2 — control-room UI */
.project-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 150px;
    padding: 28px 32px;
    color: #fff;
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 120%, rgba(255,255,255,.18), transparent 32%),
        linear-gradient(125deg, #0b3558 0%, #125d86 55%, #0f766e 100%);
    box-shadow: 0 16px 40px rgba(11,53,88,.18);
}
.project-hero::after {
    content: "";
    position: absolute;
    inset: -80% auto auto -4%;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255,255,255,.04), 0 0 0 48px rgba(255,255,255,.035), 0 0 0 78px rgba(255,255,255,.025);
    pointer-events: none;
}
.project-hero h2 { font-size: clamp(1.35rem,2.3vw,2rem); font-weight: 800; }
.project-hero p { max-width: 820px; color: rgba(255,255,255,.82); }
.project-hero > * { position: relative; z-index: 1; }
.project-hero-badge { display:flex;align-items:center;gap:12px;min-width:max-content;padding:12px 16px;border:1px solid rgba(255,255,255,.24);border-radius:18px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px); }
.project-hero-badge > i { font-size:1.55rem;color:#8ff1d9; }
.project-hero-badge small { color:rgba(255,255,255,.7); }
.project-ring { --progress:0;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:conic-gradient(#6ee7c3 calc(var(--progress)*1%),rgba(255,255,255,.18) 0);position:relative; }
.project-ring::before { content:"";position:absolute;inset:7px;border-radius:50%;background:#0f5671; }
.project-ring b { position:relative;z-index:1;font-size:.95rem; }
.project-nav { display:flex;align-items:center;gap:8px;overflow-x:auto;padding:5px 2px 10px;scrollbar-width:thin; }
.project-nav-item { display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 13px;color:#456078;text-decoration:none;border:1px solid #dce7ef;border-radius:999px;background:#fff;transition:.2s ease;box-shadow:0 3px 10px rgba(15,46,70,.04); }
.project-nav-item:hover { color:#0f5f84;border-color:#8ec7dc;transform:translateY(-1px); }
.project-nav-item.active { color:#fff;border-color:#176489;background:linear-gradient(120deg,#124f73,#0f766e);box-shadow:0 7px 18px rgba(18,95,122,.22); }
.project-entry { overflow:visible;border:1px solid #dbe7ee!important;border-radius:18px!important; }
.project-entry > summary { display:flex;align-items:center;padding:15px 18px;cursor:pointer;font-weight:800;color:#184d6d;list-style:none; }
.project-entry > summary::-webkit-details-marker { display:none; }
.project-entry[open] > summary { border-bottom:1px solid #e6eef3; }
.project-entry .form-label { color:#486175;font-weight:650;font-size:.85rem; }
.project-entry .form-control,.project-entry .form-select { min-height:42px;border-color:#d9e5ec;border-radius:10px; }
.project-entry .form-control:focus,.project-entry .form-select:focus { border-color:#4ca6ba;box-shadow:0 0 0 3px rgba(76,166,186,.13); }
.project-kpi { display:flex;flex-direction:column;min-height:125px;padding:16px;border:1px solid #dce8ef;border-radius:18px;background:linear-gradient(145deg,#fff,#f7fbfd);box-shadow:0 8px 24px rgba(18,62,88,.06); }
.project-kpi > i { color:var(--kpi,#167b86);font-size:1.25rem;margin-bottom:11px; }
.project-kpi small { color:#6b7f8f;line-height:1.45; }
.project-kpi strong { color:#173f59;font-size:1.1rem;margin-top:auto;padding-top:7px; }
.project-kpi > span { color:#81919d;font-size:.72rem; }
.project-facts small { display:block;color:#7b8d99;margin-bottom:5px; }
.project-facts strong { display:block;color:#183f56; }
.project-link-grid { display:grid;gap:9px; }
.project-link-grid > a { display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #e0eaf0;border-radius:13px;color:#214c65;text-decoration:none;background:#fbfdfe; }
.project-link-grid > a:hover { border-color:#67aebd;background:#f1faf9; }
.project-link-grid i { color:#16808a; }
.project-link-grid span { display:flex;flex-direction:column; }
.project-link-grid small { color:#7b8c97;font-size:.72rem;margin-top:2px; }
.project-coverage { display:flex;justify-content:space-between;align-items:center;padding:9px 2px;color:#34566b;text-decoration:none;border-bottom:1px dashed #dce6eb; }
.project-coverage:last-child { border-bottom:0; }
.project-coverage b { display:grid;place-items:center;min-width:30px;height:26px;padding:0 7px;color:#0c6d72;background:#eaf8f6;border-radius:9px; }
.content-area .project-kpi-grid + .table-card { border-radius:18px;overflow:visible; }
.content-area .table-card > .table-responsive { max-height:none;overscroll-behavior:auto; }
.content-area .table-card > .table-responsive > .table > thead > tr > th { top:0!important;z-index:5!important;background:#f2f7fa!important; }
@media (max-width:767.98px) {
    .project-hero { min-height:130px;padding:22px 18px;border-radius:18px; }
    .project-hero-badge { display:none; }
    .project-nav-item { padding:8px 11px;font-size:.82rem; }
    .project-kpi { min-height:112px;padding:13px; }
}

.topbar-start {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto !important;
    min-width: 12rem !important;
    max-width: none;
    overflow: hidden;
    position: relative;
    z-index: 4;
}
.topbar-start .topbar-menu-btn,
.topbar-start #sidebarToggle {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    position: relative;
    z-index: 5;
    background-color: #fff !important;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.topbar-start .topbar-help-btn {
    flex: 0 0 auto !important;
    margin-inline: 0;
    order: 0;
}
.topbar-start .btn-sidebar-collapse {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}
.topbar-clock-cluster {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto !important;
    min-width: 0;
    max-width: none;
    position: relative;
    z-index: 2;
    background: transparent;
    border-radius: 8px;
    overflow: visible;
}
.topbar-end {
    display: flex !important;
    align-items: center;
    gap: 0.5rem !important;
    flex: 0 1 auto !important;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    position: relative;
    z-index: 5;
    overflow: visible;
}
.topbar-end > .erp-context-switcher,
.topbar-end > .small.text-muted {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 20rem;
    overflow: hidden;
}
.topbar-end > .live-loc-status,
.topbar-end > .topbar-tools,
.topbar-end > .topbar-notif-menu,
.topbar-end > .topbar-user-menu {
    flex: 0 0 auto !important;
    position: relative;
    z-index: 6;
}
.topbar-tools {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    overflow: visible;
}
.topbar-notif-dropdown.dropdown-menu,
.topbar-user-dropdown.dropdown-menu {
    z-index: 1060;
}

.topbar .page-title {
    flex: 1 1 auto !important;
    min-width: 10rem !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.4;
    margin: 0;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0;
}
.topbar .page-title.page-title--rich {
    display: block;
    overflow: hidden !important;
}
.topbar .page-title .page-title-rich {
    display: none; /* پیش‌فرض: متن ساده تا جا تنگ نشود */
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.topbar .page-title .page-title-plain {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* فقط در عرض خیلی عریض پلاک گرافیکی در عنوان نشان داده شود */
@media (min-width: 1600px) {
    .topbar .page-title.page-title--rich .page-title-rich {
        display: inline-flex;
        max-width: 100%;
    }
    .topbar .page-title.page-title--rich .page-title-plain {
        display: none;
    }
    .topbar .page-title .page-title-prefix {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar .page-title .cc-iran-plate {
        flex: 0 0 auto;
        vertical-align: middle;
    }
}

.topbar-help-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    border-radius: 8px;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.topbar-help-btn .fa {
    font-size: 14px;
}
.topbar-help-btn:hover,
.topbar-help-btn:focus {
    color: #fff;
    border-color: #2081af;
    background: #2081af;
}

/* مدال راهنمای صفحه — ارتفاع ثابت تا بدنه اسکرول شود و فوتر روی متن ننشیند */
#pageHelpModal .modal-dialog.page-help-dialog {
    height: min(92dvh, 56rem) !important;
    max-height: min(92dvh, 56rem) !important;
    margin: 4vh auto !important;
    display: flex !important;
    flex-direction: column !important;
}
#pageHelpModal .modal-content.page-help-modal {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.page-help-modal .modal-header {
    flex: 0 0 auto !important;
    border-bottom-color: rgba(15, 23, 42, 0.08);
    background: var(--bs-modal-bg, #fff);
    z-index: 2;
}
.page-help-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
}
.page-help-block {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.page-help-block:last-child {
    margin-bottom: 0;
}
.page-help-label {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1a567a;
    margin-bottom: 0.45rem;
}
.page-help-html {
    line-height: 1.85;
}
.page-help-html h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    color: #1a567a;
}
.page-help-html h3:first-child { margin-top: 0; }
.page-help-html ul,
.page-help-html ol {
    padding-inline-start: 1.25rem;
    margin-bottom: 0.75rem;
}
.page-help-steps,
.page-help-errors,
.page-help-terms,
.page-help-checklist {
    padding-right: 1.15rem;
    padding-left: 0;
}
.page-help-steps li,
.page-help-errors li,
.page-help-terms li,
.page-help-checklist li {
    margin-bottom: 0.45rem;
}
.page-help-checklist li::marker {
    content: "☐ ";
}
.page-help-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 1.25rem;
}
.page-help-modal .modal-footer {
    flex: 0 0 auto !important;
    position: relative;
    z-index: 2;
    background: var(--bs-modal-bg, #fff);
}
.page-help-meta {
    max-width: 75%;
}

/* ساعت زنده شمسی — فقط به‌اندازه متن (بدون عرض ثابت و فضای خالی) */
.topbar-server-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto !important;
    box-sizing: border-box;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 1.75rem;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: #475569;
    white-space: nowrap;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    line-height: 1.3;
    overflow: visible;
    justify-content: flex-start;
    direction: ltr;
}
.topbar-server-clock::before {
    content: '\f017';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    opacity: 0.7;
    flex-shrink: 0;
    width: 0.9rem;
    text-align: center;
}
.topbar-server-clock .clk-text {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
@media (max-width: 1399.98px) {
    .topbar-server-clock {
        font-size: 12px;
    }
    .erp-context-switcher .erp-ctx-select {
        max-width: 8.5rem;
    }
}
@media (max-width: 1199.98px) {
    .topbar-start {
        min-width: 10rem !important;
    }
    .topbar .page-title {
        min-width: 8rem !important;
        font-size: 1.0625rem !important;
    }
}
@media (max-width: 991.98px) {
    .erp-context-switcher--inline {
        display: none !important;
    }
}
@media (min-width: 992px) {
    .erp-context-compact {
        display: none !important;
    }
}
.erp-context-compact > .btn {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.erp-context-compact .dropdown-menu {
    min-width: 16rem;
    padding: 0.75rem;
}
.erp-context-compact .erp-ctx-select {
    max-width: none;
    width: 100%;
}
@media (max-width: 991.98px) {
    .topbar-server-clock {
        font-size: 11.5px;
        padding: 0.15rem 0.4rem;
    }
}
@media (max-width: 767.98px) {
    .topbar {
        gap: 0.45rem;
        padding-inline: 10px;
    }
    .topbar-clock-cluster {
        display: none !important;
    }
    .topbar-start {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        gap: 0.4rem !important;
    }
    .topbar-end {
        flex: 0 0 auto !important;
    }
    .topbar-start .topbar-menu-btn,
    .topbar-start #sidebarToggle,
    .topbar-help-btn {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
    }
    .topbar .page-title {
        min-width: 6rem !important;
        font-size: 1rem !important;
    }
}
@media (max-width: 575.98px) {
    .topbar-help-btn {
        flex-shrink: 0 !important;
    }
}
@media (max-width: 379.98px) {
    .topbar-clock-cluster {
        display: none !important;
    }
}

/* Topbar ERP company / fiscal-year switcher (RTL-safe caret) */
.erp-context-switcher {
    flex: 0 1 auto;
    flex-shrink: 1;
    min-width: 0;
    max-width: 20rem;
    overflow: hidden;
}
.erp-context-switcher .erp-ctx-select {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 10rem;
    padding-inline-start: 0.55rem;
    padding-inline-end: 1.85rem;
    background-position: left 0.45rem center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.erp-context-switcher .erp-ctx-select--fy {
    max-width: 9.5rem;
}

/* Admin-selected UI font (settings → ui_font) */
html {
    --app-font-family: 'Vazirmatn', Tahoma, sans-serif;
}
body,
button,
input,
select,
textarea,
.btn,
.badge,
.form-control,
.form-select,
.sidebar,
.table,
.dropdown-menu,
.alert,
.nav,
.modal,
.card {
    font-family: var(--app-font-family) !important;
}

/* Sidebar menu search */
.sidebar-search {
    padding: 0 12px 10px;
}
.sidebar-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.sidebar-search-icon {
    position: absolute;
    right: 10px;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    pointer-events: none;
}
.sidebar-search-input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .18);
    color: #fff;
    border-radius: 8px;
    padding: 7px 32px 7px 10px;
    font-size: 12.5px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, .45);
}
.sidebar-search-input:focus {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(0, 0, 0, .28);
}
.sidebar-tree .tree-node.is-search-hidden {
    display: none !important;
}
.sidebar-tree .tree-node-leaf.is-search-miss {
    display: none !important;
}
.sidebar-tree.is-filtering .tree-node[data-group-id] {
    /* keep matching groups open while filtering */
}
.sidebar-tree.is-filtering .tree-node[data-group-id].is-open > .tree-children {
    display: block !important;
}

/* زیرمنوی چندسطحی + آیتم سفارشی */
.sidebar-tree .tree-node-submenu > .tree-item-parent {
    margin-inline-start: 0.25rem;
}
.sidebar-tree .tree-node-submenu > .tree-item-parent .tree-parent-label {
    font-weight: 600;
    font-size: 12.5px;
    min-height: 34px;
}
.sidebar-tree .tree-node-submenu > .tree-item-parent .tree-parent-icon {
    font-size: 12px;
}
.sidebar-tree .tree-node-submenu > .tree-children {
    margin-inline-start: 0.5rem;
    border-inline-start: 1px dashed rgba(148, 163, 184, .4);
    padding-inline-start: 0.1rem;
}
.sidebar-tree .tree-node[data-depth="2"] > .tree-item-leaf {
    min-height: 34px;
    font-size: 13px;
}
.sidebar-tree .tree-node[data-depth="3"] > .tree-item-leaf {
    min-height: 32px;
    font-size: 12.5px;
}
.sidebar-tree .tree-item-leaf .sidebar-ext-icon {
    margin-inline-start: auto;
    font-size: 10px;
    opacity: .55;
}
.sidebar-tree .tree-node-submenu.is-search-hidden {
    display: none !important;
}

/* ─── آیکن‌های رنگی سایدبار (چیپ نرم + رنگ معنایی) ─── */
.sidebar-tree .sidebar-nav-icon {
    --si-c: #64748b;
    --si-bg: rgba(100, 116, 139, .12);
    --si-ring: rgba(100, 116, 139, .22);
    width: 28px !important;
    height: 28px;
    min-width: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    font-size: 13px !important;
    line-height: 1;
    color: var(--si-c) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--si-bg) 70%, #fff) 0%, var(--si-bg) 100%);
    box-shadow:
        inset 0 0 0 1px var(--si-ring),
        0 1px 2px rgba(15, 23, 42, .04);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease,
        filter .18s ease;
}

.sidebar-tree .tree-node-submenu > .tree-item-parent .sidebar-nav-icon {
    width: 24px !important;
    height: 24px;
    min-width: 24px;
    border-radius: 7px;
    font-size: 11.5px !important;
}

.sidebar-tree .tree-item-leaf:hover > .sidebar-nav-icon,
.sidebar-tree .tree-parent-label:hover > .sidebar-nav-icon {
    transform: translateY(-1px) scale(1.06);
    filter: saturate(1.15);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--si-c) 28%, transparent),
        0 4px 10px color-mix(in srgb, var(--si-c) 22%, transparent);
}

.sidebar-tree .tree-item-leaf.active > .sidebar-nav-icon {
    transform: scale(1.04);
    filter: saturate(1.2);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--si-c) 35%, transparent),
        0 0 0 3px color-mix(in srgb, var(--si-c) 14%, transparent),
        0 3px 8px color-mix(in srgb, var(--si-c) 20%, transparent);
}

.sidebar-tree .tree-node.has-active > .tree-item-parent .sidebar-nav-icon,
.sidebar-tree .tree-node.is-open > .tree-item-parent .sidebar-nav-icon {
    filter: saturate(1.12);
}

/* دامنه L1 — رنگ گروه */
.sidebar-tree .tree-node-group[data-group-id="accounting_finance"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #0284c7; --si-bg: rgba(2, 132, 199, .14); --si-ring: rgba(2, 132, 199, .22);
}
.sidebar-tree .tree-node-group[data-group-id="treasury_bank"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #059669; --si-bg: rgba(5, 150, 105, .14); --si-ring: rgba(5, 150, 105, .22);
}
.sidebar-tree .tree-node-group[data-group-id="sales_commerce"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #ea580c; --si-bg: rgba(234, 88, 12, .14); --si-ring: rgba(234, 88, 12, .22);
}
.sidebar-tree .tree-node-group[data-group-id="purchases_group"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #7c3aed; --si-bg: rgba(124, 58, 237, .14); --si-ring: rgba(124, 58, 237, .22);
}
.sidebar-tree .tree-node-group[data-group-id="supply_warehouse"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #4f46e5; --si-bg: rgba(79, 70, 229, .14); --si-ring: rgba(79, 70, 229, .22);
}
.sidebar-tree .tree-node-group[data-group-id="fixed_assets_group"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #0d9488; --si-bg: rgba(13, 148, 136, .14); --si-ring: rgba(13, 148, 136, .22);
}
.sidebar-tree .tree-node-group[data-group-id="hr_payroll"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #db2777; --si-bg: rgba(219, 39, 119, .14); --si-ring: rgba(219, 39, 119, .22);
}
.sidebar-tree .tree-node-group[data-group-id="carcare_group"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #0891b2; --si-bg: rgba(8, 145, 178, .14); --si-ring: rgba(8, 145, 178, .22);
}
.sidebar-tree .tree-node-group[data-group-id="crm_tasks"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #9333ea; --si-bg: rgba(147, 51, 234, .14); --si-ring: rgba(147, 51, 234, .22);
}
.sidebar-tree .tree-node-group[data-group-id="system_admin"] > .tree-item-parent .sidebar-nav-icon {
    --si-c: #475569; --si-bg: rgba(71, 85, 105, .14); --si-ring: rgba(71, 85, 105, .24);
}

/* پین / خانه */
.sidebar-tree .tree-node-pinned .sidebar-nav-icon.fa-home,
.sidebar-tree .sidebar-nav-icon.fa-home {
    --si-c: #2563eb; --si-bg: rgba(37, 99, 235, .15); --si-ring: rgba(37, 99, 235, .24);
}

/* رنگ معنایی بر اساس نوع آیکن */
.sidebar-tree .sidebar-nav-icon.fa-calculator,
.sidebar-tree .sidebar-nav-icon.fa-balance-scale,
.sidebar-tree .sidebar-nav-icon.fa-book,
.sidebar-tree .sidebar-nav-icon.fa-folder-tree,
.sidebar-tree .sidebar-nav-icon.fa-project-diagram,
.sidebar-tree .sidebar-nav-icon.fa-list-ol,
.sidebar-tree .sidebar-nav-icon.fa-landmark {
    --si-c: #0284c7; --si-bg: rgba(2, 132, 199, .14); --si-ring: rgba(2, 132, 199, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-file-invoice,
.sidebar-tree .sidebar-nav-icon.fa-file-invoice-dollar,
.sidebar-tree .sidebar-nav-icon.fa-copy,
.sidebar-tree .sidebar-nav-icon.fa-receipt,
.sidebar-tree .sidebar-nav-icon.fa-file-alt,
.sidebar-tree .sidebar-nav-icon.fa-file-contract,
.sidebar-tree .sidebar-nav-icon.fa-file-signature {
    --si-c: #0ea5e9; --si-bg: rgba(14, 165, 233, .14); --si-ring: rgba(14, 165, 233, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-wallet,
.sidebar-tree .sidebar-nav-icon.fa-money-bill-transfer,
.sidebar-tree .sidebar-nav-icon.fa-money-bill-wave,
.sidebar-tree .sidebar-nav-icon.fa-money-check-alt,
.sidebar-tree .sidebar-nav-icon.fa-hand-holding-usd,
.sidebar-tree .sidebar-nav-icon.fa-cash-register,
.sidebar-tree .sidebar-nav-icon.fa-coins,
.sidebar-tree .sidebar-nav-icon.fa-building-columns,
.sidebar-tree .sidebar-nav-icon.fa-university {
    --si-c: #059669; --si-bg: rgba(5, 150, 105, .14); --si-ring: rgba(5, 150, 105, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-chart-pie,
.sidebar-tree .sidebar-nav-icon.fa-chart-line,
.sidebar-tree .sidebar-nav-icon.fa-chart-bar,
.sidebar-tree .sidebar-nav-icon.fa-chart-column,
.sidebar-tree .sidebar-nav-icon.fa-chart-area,
.sidebar-tree .sidebar-nav-icon.fa-table {
    --si-c: #7c3aed; --si-bg: rgba(124, 58, 237, .14); --si-ring: rgba(124, 58, 237, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-store,
.sidebar-tree .sidebar-nav-icon.fa-shopping-cart,
.sidebar-tree .sidebar-nav-icon.fa-cart-shopping,
.sidebar-tree .sidebar-nav-icon.fa-tags,
.sidebar-tree .sidebar-nav-icon.fa-address-book {
    --si-c: #ea580c; --si-bg: rgba(234, 88, 12, .14); --si-ring: rgba(234, 88, 12, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-boxes,
.sidebar-tree .sidebar-nav-icon.fa-boxes-stacked,
.sidebar-tree .sidebar-nav-icon.fa-box,
.sidebar-tree .sidebar-nav-icon.fa-cube,
.sidebar-tree .sidebar-nav-icon.fa-cubes,
.sidebar-tree .sidebar-nav-icon.fa-warehouse,
.sidebar-tree .sidebar-nav-icon.fa-layer-group,
.sidebar-tree .sidebar-nav-icon.fa-sitemap,
.sidebar-tree .sidebar-nav-icon.fa-arrow-down,
.sidebar-tree .sidebar-nav-icon.fa-arrow-up,
.sidebar-tree .sidebar-nav-icon.fa-clipboard-check {
    --si-c: #4f46e5; --si-bg: rgba(79, 70, 229, .14); --si-ring: rgba(79, 70, 229, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-users,
.sidebar-tree .sidebar-nav-icon.fa-user-tie,
.sidebar-tree .sidebar-nav-icon.fa-user-plus,
.sidebar-tree .sidebar-nav-icon.fa-users-gear,
.sidebar-tree .sidebar-nav-icon.fa-id-card,
.sidebar-tree .sidebar-nav-icon.fa-door-open,
.sidebar-tree .sidebar-nav-icon.fa-plane,
.sidebar-tree .sidebar-nav-icon.fa-calendar-minus,
.sidebar-tree .sidebar-nav-icon.fa-laptop {
    --si-c: #db2777; --si-bg: rgba(219, 39, 119, .14); --si-ring: rgba(219, 39, 119, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-building,
.sidebar-tree .sidebar-nav-icon.fa-city,
.sidebar-tree .sidebar-nav-icon.fa-wrench,
.sidebar-tree .sidebar-nav-icon.fa-tools {
    --si-c: #0d9488; --si-bg: rgba(13, 148, 136, .14); --si-ring: rgba(13, 148, 136, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-car,
.sidebar-tree .sidebar-nav-icon.fa-car-side,
.sidebar-tree .sidebar-nav-icon.fa-gauge,
.sidebar-tree .sidebar-nav-icon.fa-oil-can,
.sidebar-tree .sidebar-nav-icon.fa-cogs {
    --si-c: #0891b2; --si-bg: rgba(8, 145, 178, .14); --si-ring: rgba(8, 145, 178, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-briefcase,
.sidebar-tree .sidebar-nav-icon.fa-comments,
.sidebar-tree .sidebar-nav-icon.fa-clipboard-list,
.sidebar-tree .sidebar-nav-icon.fa-tasks,
.sidebar-tree .sidebar-nav-icon.fa-check-double,
.sidebar-tree .sidebar-nav-icon.fa-magic {
    --si-c: #9333ea; --si-bg: rgba(147, 51, 234, .14); --si-ring: rgba(147, 51, 234, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-cog,
.sidebar-tree .sidebar-nav-icon.fa-gear,
.sidebar-tree .sidebar-nav-icon.fa-sliders-h,
.sidebar-tree .sidebar-nav-icon.fa-shield-alt,
.sidebar-tree .sidebar-nav-icon.fa-shield-halved,
.sidebar-tree .sidebar-nav-icon.fa-bars-staggered,
.sidebar-tree .sidebar-nav-icon.fa-puzzle-piece,
.sidebar-tree .sidebar-nav-icon.fa-print,
.sidebar-tree .sidebar-nav-icon.fa-th-large,
.sidebar-tree .sidebar-nav-icon.fa-stethoscope,
.sidebar-tree .sidebar-nav-icon.fa-question-circle,
.sidebar-tree .sidebar-nav-icon.fa-calendar-check {
    --si-c: #475569; --si-bg: rgba(71, 85, 105, .14); --si-ring: rgba(71, 85, 105, .24);
}
.sidebar-tree .sidebar-nav-icon.fa-folder,
.sidebar-tree .sidebar-nav-icon.fa-folder-open {
    --si-c: #ca8a04; --si-bg: rgba(202, 138, 4, .14); --si-ring: rgba(202, 138, 4, .22);
}
.sidebar-tree .sidebar-nav-icon.fa-link,
.sidebar-tree .sidebar-nav-icon.fa-bolt,
.sidebar-tree .sidebar-nav-icon.fa-handshake,
.sidebar-tree .sidebar-nav-icon.fa-ruler,
.sidebar-tree .sidebar-nav-icon.fa-hourglass-half,
.sidebar-tree .sidebar-nav-icon.fa-ellipsis {
    --si-c: #6366f1; --si-bg: rgba(99, 102, 241, .14); --si-ring: rgba(99, 102, 241, .22);
}

/* تم کلاسیک — سایدبار آبی تیره: پالت یخی/فیروزه‌ای یکدست (بدون رنگین‌کمان) */
body.theme-classic .sidebar-tree .sidebar-nav-icon {
    --si-c: #7dd3fc;
    --si-bg: rgba(125, 211, 252, .14);
    --si-ring: rgba(186, 230, 253, .22);
    color: #bae6fd !important;
    background: rgba(255, 255, 255, .1) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .14),
        0 1px 2px rgba(0, 0, 0, .12) !important;
    filter: none;
}
/* همهٔ رنگ‌های معنایی را روی طیف آبی کلاسیک هم‌تراز کن */
body.theme-classic .sidebar-tree .sidebar-nav-icon,
body.theme-classic .sidebar-tree .tree-node-group > .tree-item-parent .sidebar-nav-icon,
body.theme-classic .sidebar-tree .sidebar-nav-icon[class*="fa-"] {
    --si-c: #7dd3fc;
    --si-bg: rgba(125, 211, 252, .14);
    --si-ring: rgba(186, 230, 253, .22);
    color: #bae6fd !important;
    background: rgba(255, 255, 255, .1) !important;
}
/* تمایز خیلی ملایم فقط برای گروه‌های L1 (همان خانواده آبی) */
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="accounting_finance"] > .tree-item-parent .sidebar-nav-icon,
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="treasury_bank"] > .tree-item-parent .sidebar-nav-icon {
    color: #e0f2fe !important;
    background: rgba(224, 242, 254, .14) !important;
}
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="sales_commerce"] > .tree-item-parent .sidebar-nav-icon,
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="purchases_group"] > .tree-item-parent .sidebar-nav-icon {
    color: #7dd3fc !important;
    background: rgba(125, 211, 252, .16) !important;
}
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="supply_warehouse"] > .tree-item-parent .sidebar-nav-icon,
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="fixed_assets_group"] > .tree-item-parent .sidebar-nav-icon {
    color: #67e8f9 !important;
    background: rgba(103, 232, 249, .12) !important;
}
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="hr_payroll"] > .tree-item-parent .sidebar-nav-icon,
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="crm_tasks"] > .tree-item-parent .sidebar-nav-icon,
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="carcare_group"] > .tree-item-parent .sidebar-nav-icon {
    color: #93c5fd !important;
    background: rgba(147, 197, 253, .14) !important;
}
body.theme-classic .sidebar-tree .tree-node-group[data-group-id="system_admin"] > .tree-item-parent .sidebar-nav-icon {
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, .08) !important;
}
body.theme-classic .sidebar-tree .tree-item-leaf:hover > .sidebar-nav-icon,
body.theme-classic .sidebar-tree .tree-parent-label:hover > .sidebar-nav-icon {
    transform: translateY(-1px) scale(1.04);
    filter: none;
    color: #fff !important;
    background: rgba(255, 255, 255, .18) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .28),
        0 4px 10px rgba(0, 0, 0, .18) !important;
}
body.theme-classic .sidebar-tree .tree-item-leaf.active > .sidebar-nav-icon {
    transform: scale(1.04);
    filter: none;
    color: #fff !important;
    background: rgba(125, 211, 252, .28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(186, 230, 253, .45),
        0 0 0 2px rgba(125, 211, 252, .2),
        0 3px 8px rgba(0, 0, 0, .16) !important;
}
body.theme-classic .sidebar-tree .tree-node.has-active > .tree-item-parent .sidebar-nav-icon,
body.theme-classic .sidebar-tree .tree-node.is-open > .tree-item-parent .sidebar-nav-icon {
    filter: none;
    color: #e0f2fe !important;
    background: rgba(255, 255, 255, .14) !important;
}

/* زمینه ناوبری بین‌ماژولی — گروه مبدأ در سایدبار */
.sidebar-tree .tree-node.nav-context-origin > .tree-item-parent .tree-parent-label {
    outline: 1px dashed rgba(13, 110, 253, .45);
    outline-offset: 1px;
    border-radius: 8px;
}
.sidebar-tree .nav-context-origin-tag {
    margin-inline-start: auto;
    font-size: 10px;
    font-weight: 600;
    color: #0d6efd;
    background: rgba(13, 110, 253, .08);
    border: 1px solid rgba(13, 110, 253, .25);
    border-radius: 6px;
    padding: 1px 6px;
    line-height: 1.4;
}
.nav-context-banner {
    border-inline-start: 4px solid #0d6efd;
}

@media (min-width: 992px) {
    body.sidebar-collapsed .sidebar-search {
        display: none;
    }
}

/* Notification bell */
.topbar-notif-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.topbar-notif-dropdown {
    width: min(360px, 92vw);
    max-height: 70vh;
    overflow: hidden;
}
.topbar-notif-list {
    max-height: 320px;
    overflow-y: auto;
}
.topbar-notif-item {
    white-space: normal;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.topbar-notif-item.is-unread {
    background: rgba(32, 129, 175, 0.08);
}
.topbar-notif-badge {
    font-size: 10px;
    min-width: 1.1rem;
}
.topbar-notif-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    cursor: zoom-in;
}
.notification-full-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
}
.notification-portal-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    cursor: zoom-in;
}

/* Lightbox تصویر اعلان */
.notif-lightbox {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(4px);
}
.notif-lightbox.is-open {
    display: flex;
}
body.notif-lightbox-open {
    overflow: hidden;
}
.notif-lightbox-img {
    max-width: min(960px, 94vw);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
    background: #fff;
}
.notif-lightbox-img[hidden] {
    display: none !important;
}
.notif-lightbox-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #0f172a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.notif-lightbox-close:hover {
    background: #fff;
}

/* Dynamic fill tables: usable inputs */
.dynamic-table {
    table-layout: fixed;
    width: 100%;
}
.dynamic-table th,
.dynamic-table td {
    vertical-align: middle;
    text-align: center;
}
.dynamic-table th.col-desc,
.dynamic-table td.col-desc {
    text-align: right;
    width: 56%;
    min-width: 0;
}
.dynamic-table input {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.dynamic-table th.col-row,
.dynamic-table td.col-row {
    width: 36px;
    max-width: 36px;
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 12px;
}
.dynamic-table th.col-qty,
.dynamic-table td.col-qty { width: 88px; }
.dynamic-table th.col-price,
.dynamic-table td.col-price { width: 110px; }
.dynamic-table th.col-total,
.dynamic-table td.col-total { width: 100px; }
.dynamic-table th.col-action,
.dynamic-table td.col-action {
    width: 72px;
    position: sticky;
    left: 0;
    z-index: 4;
    background: #fff;
    box-shadow: 6px 0 14px rgba(0, 0, 0, 0.08);
}
.dynamic-table thead th.col-action {
    z-index: 5;
    background: var(--bs-table-bg, #fff);
}
.dynamic-table .billable-search-wrap {
    width: 100%;
    min-width: 0;
}
.dynamic-table .billable-search-wrap .billable-search {
    flex: 1 1 auto;
    min-width: 0;
    width: 1%;
}

.billable-search-wrap {
    position: relative;
    flex-wrap: nowrap;
    display: flex;
    width: 100%;
}
.billable-search-wrap .billable-pick-btn {
    flex: 0 0 auto;
    min-width: 2.25rem;
}

.billable-composer .billable-draft-row {
    background: rgba(13, 110, 253, 0.04);
}
.billable-composer .billable-draft-row.billable-draft-dirty {
    background: rgba(255, 193, 7, 0.12);
    outline: 1px solid rgba(255, 193, 7, 0.55);
}
.billable-composer .billable-draft-row td.col-action {
    background: rgba(232, 242, 255, 0.98);
}
.billable-draft-actions {
    display: inline-flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.billable-draft-actions .btn {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    box-shadow: none;
}
.billable-draft-actions .btn-outline-secondary {
    box-shadow: none;
}

.dynamic-table-wrap.hide-billable-prices .col-price,
.dynamic-table-wrap.hide-billable-prices .col-total {
    display: none !important;
}

/* لایهٔ شناور سراسری — منوی پیشنهاد/دراپ‌داون نباید داخل overflow جدول بماند */
:root {
    --z-ui-float: 20050;
}
.ui-float-root {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}
.ui-float-root > * {
    pointer-events: auto;
}
.ui-float-portal {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    z-index: var(--z-ui-float);
}
/* مگامنو: در دسکتاپ زیرشاخه‌ها داخل سایدبار باز نشوند */
@media (min-width: 992px) {
    .tree-node-group[data-mega-panel="1"] > .tree-children {
        display: none !important;
    }
    .sidebar-nav.is-filtering .tree-node-group[data-mega-panel="1"] > .tree-children {
        display: block !important;
    }
    .tree-node-group[data-mega-panel="1"] > .tree-item-parent .tree-toggle {
        display: none;
    }
    .tree-node-group[data-mega-panel="1"].is-mega-open > .tree-item-parent .tree-parent-label,
    .tree-node-group[data-mega-panel="1"].has-active > .tree-item-parent .tree-parent-label {
        background: rgba(32, 129, 175, 0.22);
        box-shadow: inset -3px 0 0 #2081af;
    }
    body.theme-classic .tree-node-group[data-mega-panel="1"].is-mega-open > .tree-item-parent .tree-parent-label,
    body.theme-classic .tree-node-group[data-mega-panel="1"].has-active > .tree-item-parent .tree-parent-label {
        background: rgba(255, 255, 255, 0.16);
        box-shadow: inset -3px 0 0 #fff;
    }
}

.erp-mega-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    z-index: 1015;
}
body.erp-mega-open {
    overflow: hidden;
    padding-right: var(--erp-mega-sbw, 0px);
}
@media (min-width: 992px) {
    body.erp-mega-open .sidebar {
        right: var(--erp-mega-sbw, 0px);
    }
}
@media (max-width: 991.98px) {
    /* مگامنو روی موبایل استفاده نمی‌شود؛ اگر کلاس گیر کرد، صفحه را قفل نکند */
    body.erp-mega-open {
        overflow: auto;
        padding-right: 0;
    }
    .erp-mega-panel,
    .erp-mega-backdrop {
        display: none !important;
    }

    /*
     * دراور موبایل: مخفی‌سازی با right (نه translateX).
     * در html[dir=rtl] بعضی مرورگرهای موبایل translateX(100%) را معکوس می‌کنند
     * و سایدبار همیشه روی صفحه می‌ماند — X و overlay بی‌اثر به نظر می‌رسند.
     */
    .sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        width: min(86vw, 20rem) !important;
        max-width: 86vw;
        transform: none !important;
        z-index: 1040;
        left: auto !important;
        transition: right 0.28s ease, visibility 0s linear 0.28s, width 0.25s ease;
    }
    .sidebar:not(.open) {
        right: -110% !important;
        visibility: hidden;
        pointer-events: none;
    }
    .sidebar.open {
        right: 0 !important;
        visibility: visible;
        pointer-events: auto;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.28);
        transition: right 0.28s ease, visibility 0s, width 0.25s ease;
    }
    .sidebar-close {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.18);
        color: #fff;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        z-index: 6;
        pointer-events: auto;
        cursor: pointer;
    }
    .sidebar-brand { position: relative; }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1035;
        pointer-events: auto;
    }
    .sidebar-backdrop.show,
    .sidebar-backdrop.is-closing {
        display: block !important;
    }
    .sidebar-backdrop.is-closing {
        opacity: 0;
    }
    body.sidebar-open { overflow: hidden; }
    .main-wrapper { margin-right: 0 !important; }
    #sidebarToggle.topbar-menu-btn {
        display: inline-flex !important;
    }
    .sidebar-footer {
        position: relative;
        z-index: 4;
        flex-shrink: 0;
    }
    .sidebar-foot-link {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
        padding: 10px 8px;
        font-size: 0.9rem;
        pointer-events: auto;
        cursor: pointer;
    }
}
.erp-mega-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #1e293b;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
    border-left: 1px solid #e2e8f0;
    direction: rtl;
    overflow: hidden;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0;
}
.erp-mega-panel.d-none { display: none !important; }
.erp-mega-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid #eef2f7;
    flex: 0 0 auto;
}
.erp-mega-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
}
.erp-mega-search-wrap i { color: #94a3b8; }
.erp-mega-search {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    font-size: 0.875rem;
}
.erp-mega-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.erp-mega-chip-label {
    font-size: 0.7rem;
    color: #64748b;
    margin-inline-start: 4px;
}
.erp-mega-chip {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
}
.erp-mega-chip:hover { background: #e2e8f0; }
.erp-mega-fav {
    border: 0;
    background: transparent;
    color: #cbd5e1;
    padding: 0 2px;
    margin-inline-start: auto;
    cursor: pointer;
}
.erp-mega-fav.is-on { color: #f59e0b; }
.sidebar-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.sidebar-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.9;
    font-size: 0.78rem;
    padding: 4px 6px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}
.sidebar-foot-link:hover { background: rgba(255,255,255,0.08); opacity: 1; }
body.sidebar-collapsed .sidebar-footer-links .sidebar-label { display: none; }
body.sidebar-collapsed .tree-node-group .tree-parent-text { /* tooltip via title attr */ }

.erp-mega-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #eef2f7;
    flex: 0 0 auto;
}
.erp-mega-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.erp-mega-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.erp-mega-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
/* ستون‌ها تا ارتفاع پنل پر می‌شوند و ادامه به ستون بعدی می‌رود؛ اسکرول فقط روی body */
.erp-mega-body {
    --erp-mega-col-w: 168px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 20px;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 12px 18px;
}
.erp-mega-col {
    flex: 0 0 var(--erp-mega-col-w);
    width: var(--erp-mega-col-w);
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.erp-mega-section {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px 8px 6px;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.erp-mega-col > .erp-mega-section + .erp-mega-section {
    margin-top: 12px;
}
.erp-mega-col-title {
    margin: 0 0 6px;
    padding: 0 0 5px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    flex: 0 0 auto;
}
.erp-mega-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}
.erp-mega-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #334155;
    text-decoration: none;
    line-height: 1.3;
}
.erp-mega-link:hover {
    background: #f0f7fb;
    color: #17698f;
}
.erp-mega-link.active {
    background: #e8f4fa;
    color: #146387;
    font-weight: 600;
}
.erp-mega-link i {
    width: 1rem;
    text-align: center;
    color: #64748b;
    flex: 0 0 auto;
    font-size: 0.78rem;
}
.erp-mega-link .sidebar-label { flex: 1 1 auto; }

/* سازگاری نام قدیمی */
.sales-mega-panel { /* deprecated alias */ }

/* ─── Command palette / جستجوی هدر ─── */
.erp-cmd-palette {
    position: fixed;
    inset: 0;
    z-index: 20060;
}
.erp-cmd-palette.d-none { display: none !important; }
.erp-cmd-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.erp-cmd-dialog {
    position: relative;
    width: min(560px, calc(100vw - 24px));
    margin: 12vh auto 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    direction: rtl;
}
.erp-cmd-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
}
.erp-cmd-search-icon { color: #94a3b8; }
.erp-cmd-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    font-size: 1rem;
    background: transparent;
    min-width: 0;
}
.erp-cmd-kbd {
    font-size: 0.72rem;
    padding: 3px 7px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.erp-cmd-results {
    max-height: min(420px, 52vh);
    overflow: auto;
    padding: 8px;
}
.erp-cmd-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #1e293b;
}
.erp-cmd-item i { margin-top: 3px; color: #64748b; width: 1.1rem; text-align: center; }
.erp-cmd-item.is-active,
.erp-cmd-item:hover { background: #f0f7fb; }
.erp-cmd-item-label { display: block; font-weight: 600; font-size: 0.92rem; }
.erp-cmd-item-path { display: block; font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }
.erp-cmd-empty { padding: 24px; text-align: center; }
.erp-cmd-foot { padding: 8px 16px 12px; border-top: 1px solid #eef2f7; }

/* ─── هدر دوردیفی ─── */
.topbar.topbar--erp {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
}
.topbar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}
.topbar-row-main {
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.topbar-row-sub {
    padding: 6px 16px 10px;
    gap: 0.65rem;
}
.topbar-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 42rem;
    margin-inline: auto;
}
.topbar-search-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    text-align: right;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.topbar-search-btn:hover,
.topbar-search-btn:focus {
    background: #fff;
    border-color: #2081af;
    box-shadow: 0 0 0 3px rgba(32, 129, 175, 0.12);
    outline: none;
    color: #334155;
}
.topbar-search-btn .fa-search { flex: 0 0 auto; }
.topbar-search-placeholder {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}
.topbar-search-kbd {
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    font-family: ui-monospace, monospace;
    direction: ltr;
}
.topbar-icon-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #dbe3ec;
    background: #fff;
    color: #475569;
    text-decoration: none;
    position: relative;
}
.topbar-icon-btn:hover {
    border-color: #2081af;
    color: #2081af;
    background: #f0f7fb;
}
.topbar-utils {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.topbar-utils::-webkit-scrollbar { display: none; }
.topbar-util-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
.topbar-util-chip:hover {
    border-color: #2081af;
    color: #17698f;
    background: #f0f7fb;
}
.topbar-util-chip i { font-size: 0.78rem; }
.topbar.topbar--erp .topbar-start {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none;
    overflow: visible;
}
.topbar.topbar--erp .topbar-end {
    flex: 0 0 auto !important;
}
.topbar.topbar--erp .page-title {
    flex: 1 1 auto !important;
    min-width: 8rem !important;
    font-size: 1rem !important;
}
@media (max-width: 991px) {
    .topbar-search { max-width: none; }
    .topbar-search-kbd { display: none; }
    .topbar-util-chip span { display: none; }
    .topbar-util-chip { padding: 7px 9px; border-radius: 10px; }
}
@media (max-width: 768px) {
    .topbar-row-main { flex-wrap: wrap; }
    .topbar-search { order: 3; flex: 1 1 100%; max-width: none; }
    .topbar.topbar--erp .topbar-start {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100%;
        overflow: hidden;
    }
    .topbar.topbar--erp .topbar-end {
        flex: 0 1 auto !important;
        min-width: 0;
        max-width: 58%;
    }
    .topbar.topbar--erp .page-title {
        min-width: 0 !important;
    }
}
.ui-float-portal.list-group .list-group-item,
.ui-float-portal .list-group-item {
    border-left: 0;
    border-right: 0;
}
.ui-float-portal.list-group .list-group-item:first-child,
.ui-float-portal .list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.ui-float-portal.list-group .list-group-item:last-child,
.ui-float-portal .list-group-item:last-child {
    border-bottom: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.ui-float-root > .dropdown-menu,
.dropdown-menu.ui-float-bs {
    z-index: var(--z-ui-float) !important;
}

/* پیشنهاد جستجوی خدمات/کالا — روی body تا زیر table-responsive بریده نشود */
.billable-suggest-portal {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.billable-suggest-portal .list-group-item {
    border-left: 0;
    border-right: 0;
}
.billable-suggest-portal .list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.billable-suggest-portal .list-group-item:last-child {
    border-bottom: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Product picker — جستجوی کالا انبار/فروش */
.product-search-wrap {
    position: relative;
    min-width: 180px;
}
.product-search-wrap .product-pick-btn {
    flex: 0 0 auto;
}
.product-suggest-portal {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.product-suggest-portal .list-group-item {
    border-left: 0;
    border-right: 0;
}
.product-suggest-portal .list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.product-suggest-portal .list-group-item:last-child {
    border-bottom: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Customer picker — جستجوی طرف‌حساب فاکتور/اسناد */
.customer-search-wrap {
    position: relative;
    min-width: 160px;
}
.customer-search-wrap > select.customer-id {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.customer-search-wrap .customer-pick-btn {
    flex: 0 0 auto;
}

/* User picker — select مخفی است؛ فقط جستجو دیده می‌شود */
.user-search-wrap {
    position: relative;
    min-width: 160px;
}
.user-search-wrap > select.user-id {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.user-search-wrap .user-pick-btn {
    flex: 0 0 auto;
}
.user-suggest-portal {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.customer-suggest-portal {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.customer-suggest-portal .list-group-item {
    border-left: 0;
    border-right: 0;
}
.customer-suggest-portal .list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.customer-suggest-portal .list-group-item:last-child {
    border-bottom: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Mobile: فرم‌ها خوانا — خدمت/کالا به‌صورت جدول افقی (نه کارت) */
@media (max-width: 768px) {
    .form-card {
        padding: 14px;
    }

    .main-wrapper,
    .content-area {
        min-width: 0;
        max-width: 100%;
    }
    .content-area {
        overflow-x: hidden;
    }

    .form-control,
    .form-select,
    textarea.form-control {
        font-size: 16px;
        min-height: 44px;
        padding: 10px 12px;
    }

    textarea.form-control {
        min-height: 96px;
    }

    .dynamic-table-wrap,
    .table-responsive.dynamic-table-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin-inline: 0;
        padding-inline: 0;
    }

    .dynamic-table {
        display: table;
        width: 100%;
        min-width: 640px;
        table-layout: fixed;
        margin: 0;
    }

    .dynamic-table-wrap.hide-billable-prices .dynamic-table {
        min-width: 480px;
    }

    .dynamic-table thead {
        display: table-header-group;
    }

    .dynamic-table tbody {
        display: table-row-group;
    }

    .dynamic-table tr {
        display: table-row;
        background: transparent;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }

    .dynamic-table td,
    .dynamic-table th {
        display: table-cell;
        max-width: none;
        min-width: 0;
        padding: 6px 4px !important;
        border: 1px solid var(--border, #e0e0e0) !important;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    .dynamic-table th.col-desc,
    .dynamic-table td.col-desc {
        width: 56% !important;
        text-align: right;
        white-space: normal;
        min-width: 160px;
    }

    .dynamic-table td[data-label]::before {
        content: none;
        display: none;
    }

    .dynamic-table th.col-row,
    .dynamic-table td.col-row {
        width: 32px !important;
        max-width: 32px !important;
        font-weight: 600;
        font-size: 11px;
        color: var(--primary, #2081af);
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .dynamic-table th.col-action,
    .dynamic-table td.col-action {
        width: 68px !important;
        position: sticky;
        left: 0;
        z-index: 6;
        background: #fff;
        box-shadow: 6px 0 14px rgba(0, 0, 0, 0.1);
    }

    .billable-composer .billable-draft-row td.col-action {
        background: rgba(232, 242, 255, 0.98);
    }

    .dynamic-table input,
    .dynamic-table .form-control {
        width: 100% !important;
        min-width: 0;
        min-height: 40px;
        font-size: 14px;
        padding: 6px 8px;
        box-sizing: border-box;
    }

    .dynamic-table .billable-search-wrap {
        width: 100%;
        min-width: 140px;
    }

    .dynamic-table .total-cell {
        font-size: 13px;
        font-weight: 600;
        background: transparent;
        border-style: solid !important;
        border-radius: 0;
    }

    .dynamic-table .btn-remove-row {
        width: 100%;
        min-height: 36px;
        padding: 4px 6px;
        border: 1px solid #f5c2c7;
        border-radius: 4px;
        background: #fff5f5;
        color: #dc3545;
        font-size: 12px;
        white-space: nowrap;
    }

    .billable-draft-actions {
        flex-direction: row;
        gap: 4px;
        width: auto;
        min-width: 0;
    }

    .billable-draft-actions .btn {
        width: 30px;
        height: 30px;
        min-height: 30px;
        font-size: 12px;
        font-weight: 600;
        padding: 0;
        white-space: nowrap;
    }
}

/* ─── Desktop sidebar collapse (icon rail) ───────────────── */
:root {
    --sidebar-collapsed-width: 72px;
}

@media (min-width: 992px) {
    body.sidebar-collapsed {
        --sidebar-width: var(--sidebar-collapsed-width);
    }

    body.sidebar-collapsed .sidebar-brand {
        padding: 12px 6px;
    }
    body.sidebar-collapsed .sidebar-brand .company-name,
    body.sidebar-collapsed .sidebar-brand .system-name {
        display: none;
    }
    body.sidebar-collapsed .sidebar-logo img {
        max-width: 40px !important;
        max-height: 40px !important;
    }

    /* ریل آیکونی: فقط دامنه‌های L1 و پین‌ها */
    body.sidebar-collapsed .sidebar-tree .tree-node-group > .tree-children {
        display: none !important;
    }
    body.sidebar-collapsed .sidebar-tree .tree-item-parent {
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin: 3px 8px;
        padding: 0;
    }
    body.sidebar-collapsed .sidebar-tree .tree-toggle {
        display: none !important;
    }
    body.sidebar-collapsed .sidebar-tree .tree-parent-label {
        justify-content: center;
        width: 100%;
        padding: 11px 0;
        border-radius: 8px;
        gap: 0;
    }
    body.sidebar-collapsed .sidebar .sidebar-tree .tree-parent-text,
    body.sidebar-collapsed .sidebar .sidebar-tree .nav-context-origin-tag,
    body.sidebar-collapsed .sidebar .sidebar-tree .tree-item-leaf span,
    body.sidebar-collapsed .sidebar .sidebar-nav .nav-link span,
    body.sidebar-collapsed .sidebar .sidebar-label {
        display: none !important;
    }
    /* مگامنو بیرون سایدبار است؛ جمع‌شدن ریل نباید اسم آیتم‌های پنل را مخفی کند */
    body.sidebar-collapsed .erp-mega-panel .sidebar-label,
    body.sidebar-collapsed .erp-mega-link .sidebar-label,
    body.sidebar-collapsed .erp-mega-link span {
        display: inline !important;
        flex: 1 1 auto;
        width: auto;
        overflow: visible;
        white-space: nowrap;
    }
    body.sidebar-collapsed .sidebar-tree .tree-item-leaf {
        justify-content: center;
        gap: 0;
        margin: 3px 8px;
        padding: 11px 0;
        border-radius: 8px;
    }
    body.sidebar-collapsed .sidebar-tree .tree-parent-icon,
    body.sidebar-collapsed .sidebar-tree .tree-item-leaf i,
    body.sidebar-collapsed .sidebar-nav .nav-link i {
        width: 30px !important;
        height: 30px;
        min-width: 30px;
        font-size: 14px !important;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body.sidebar-collapsed .tree-node-group.is-mega-open > .tree-item-parent .tree-parent-label,
    body.sidebar-collapsed .tree-node-group.has-active > .tree-item-parent .tree-parent-label {
        background: rgba(32, 129, 175, 0.35);
    }

    body.sidebar-collapsed .sidebar-footer {
        padding: 10px 6px;
        text-align: center;
    }
    body.sidebar-collapsed .sidebar-user-card {
        justify-content: center;
        margin-bottom: 8px;
    }
    body.sidebar-collapsed .sidebar-user-meta {
        display: none;
    }
    body.sidebar-collapsed .sidebar-footer .btn-logout {
        padding: 8px;
        width: auto;
        min-width: 40px;
        margin: 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body.sidebar-collapsed .sidebar-footer .btn-logout .sidebar-label {
        display: none;
    }

    body.sidebar-collapsed .sidebar-nav {
        padding: 8px 0;
    }
}

.btn-sidebar-collapse {
    display: none;
}
@media (min-width: 992px) {
    .btn-sidebar-collapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid #d0d7de;
        border-radius: 8px;
        background: #fff;
        color: #475569;
        cursor: pointer;
        line-height: 1;
    }
    .btn-sidebar-collapse:hover {
        border-color: #2081af;
        color: #2081af;
        background: #f0f7fb;
    }
    body.sidebar-collapsed .btn-sidebar-collapse .icon-collapse { display: none; }
    body.sidebar-collapsed .btn-sidebar-collapse .icon-expand { display: inline-block; }
    body:not(.sidebar-collapsed) .btn-sidebar-collapse .icon-expand { display: none; }
    body:not(.sidebar-collapsed) .btn-sidebar-collapse .icon-collapse { display: inline-block; }
}

/* ─── پیوست قبل/بعد فرم فنی ─── */
.task-media-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.task-media-actions .js-media-submit {
    min-height: 40px;
}
.task-media-source-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1080;
}
.task-media-source-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1081;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.task-media-source-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: right;
    padding: 14px 12px;
    border-radius: 10px;
    font-size: 15px;
    color: #0f2744;
    cursor: pointer;
}
.task-media-source-item i {
    width: 1.25rem;
    text-align: center;
    color: #2081af;
}
.task-media-source-item:hover,
.task-media-source-item:focus {
    background: #f0f7fb;
}
.task-media-source-cancel {
    margin-top: 4px;
    width: 100%;
    border: 0;
    background: #f8fafc;
    color: #64748b;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    cursor: pointer;
}
.task-media-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.task-media-chip {
    position: relative;
    width: 88px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
}
.task-media-chip img {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: cover;
}
.task-media-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    color: #64748b;
    font-size: 1.4rem;
}
.task-media-chip-name {
    display: block;
    padding: 4px 6px;
    font-size: 10px;
    line-height: 1.3;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-media-chip-remove {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.task-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.task-media-item {
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    color: inherit;
}
.task-media-item img {
    display: block;
    width: 100%;
    height: 88px;
    object-fit: cover;
}
.task-media-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    background: #f1f5f9;
    color: #dc2626;
    font-size: 1.5rem;
}
.task-media-name {
    display: block;
    padding: 5px 6px;
    font-size: 11px;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 768px) {
    .task-media-actions .js-media-submit {
        min-height: 44px;
        width: 100%;
    }
}

/* ─── آپلود پیشرفته تصویر کالا ─── */
.product-image-composer {
    outline: none;
}
.product-image-drop {
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.product-image-drop:hover,
.product-image-drop.is-dragover {
    border-color: #2081af;
    background: #f0f7fb;
    box-shadow: 0 0 0 3px rgba(32, 129, 175, .12);
}
.product-image-drop.is-busy {
    opacity: .65;
    pointer-events: none;
}
.product-image-drop-icon {
    font-size: 1.75rem;
    color: #2081af;
    margin-bottom: 8px;
}
.product-image-drop-title {
    font-weight: 600;
    color: #0f2744;
    margin-bottom: 4px;
}
.product-image-drop-hint {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}
.product-image-drop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.product-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.product-image-chip {
    position: relative;
    width: 104px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.product-image-chip img {
    display: block;
    width: 100%;
    height: 88px;
    object-fit: cover;
}
.product-image-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    color: #64748b;
}
.product-image-chip-name {
    display: block;
    padding: 4px 6px;
    font-size: 10px;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-image-chip-remove {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .75);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.product-image-chip-primary {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .65);
    color: #fbbf24;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.product-image-chip.is-primary {
    border-color: #2081af;
    box-shadow: 0 0 0 2px rgba(32, 129, 175, .25);
}
.product-image-chip.is-primary .product-image-chip-primary {
    background: #2081af;
    color: #fff;
}
.product-image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.product-image-thumb {
    position: relative;
    width: 120px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.product-image-thumb.is-primary {
    border-color: #2081af;
    box-shadow: 0 0 0 2px rgba(32, 129, 175, .2);
}
.product-image-thumb img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.product-image-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #2081af;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
}
.product-image-thumb-actions {
    display: flex;
    gap: 4px;
    padding: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

/* تب‌های کارت حساب کالا (سبک حسابفا) */
.product-card-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid var(--border, #e2e8f0);
    gap: 0;
    -webkit-overflow-scrolling: touch;
}
.product-card-tabs .nav-item {
    flex: 1 1 0;
    min-width: max-content;
    text-align: center;
}
.product-card-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    padding: 0.7rem 0.85rem;
    white-space: nowrap;
}
.product-card-tabs .nav-link:hover {
    color: #2081af;
    border-color: transparent;
}
.product-card-tabs .nav-link.active {
    color: #2081af;
    background: transparent;
    border-bottom-color: #2081af;
}
@media (max-width: 768px) {
    .product-card-tabs .nav-item {
        flex: 0 0 auto;
    }
}

/* کارتابل مکاتبات: هدر مدیریتی فشرده و فضای کاری یکپارچه */
.requests-page {
    width: 100%;
    min-width: 0;
}
.requests-list-card {
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    overflow: visible;
    border: 1px solid #dce5ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 44, 66, .07);
}
.requests-command-center {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.35fr) auto;
    align-items: center;
    gap: .85rem 1rem;
    min-height: 84px;
    padding: .8rem 1rem;
    border-bottom: 1px solid #e5edf3;
    border-radius: 16px 16px 0 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(32, 129, 175, .105), transparent 28%),
        linear-gradient(135deg, #fbfdff 0%, #f5f9fc 100%);
}
.requests-command-copy {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.requests-command-icon {
    display: inline-grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #cfe5f1;
    border-radius: 13px;
    color: #176b96;
    background: #e9f5fb;
    font-size: 17px;
}
.requests-command-copy h2 {
    margin: 0 0 .16rem;
    color: #123d5a;
    font-size: 15.5px;
    font-weight: 850;
    line-height: 1.45;
}
.requests-command-copy p {
    margin: 0;
    color: #738697;
    font-size: 11px;
    line-height: 1.55;
    white-space: nowrap;
}
.requests-command-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .42rem;
    white-space: nowrap;
}
.requests-command-actions .btn {
    min-height: 34px;
    padding-inline: .68rem;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}
.requests-primary-action {
    box-shadow: 0 5px 13px rgba(32, 129, 175, .2);
}
.requests-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    gap: .42rem;
    min-width: 0;
}
.requests-kpi {
    appearance: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    min-height: 50px;
    padding: .42rem .55rem;
    border: 1px solid #e1e9ef;
    border-radius: 11px;
    color: #556b7b;
    background: rgba(255, 255, 255, .88);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}
.requests-kpi:hover:not(:disabled) {
    border-color: #a9cadc;
    box-shadow: 0 5px 14px rgba(20, 79, 112, .09);
    transform: translateY(-1px);
}
.requests-kpi:focus-visible {
    outline: 3px solid rgba(32, 129, 175, .2);
    outline-offset: 2px;
}
.requests-kpi.is-selected {
    border-color: #2081af;
    background: #eef8fc;
    box-shadow: inset 0 0 0 1px rgba(32, 129, 175, .12), 0 5px 15px rgba(32, 129, 175, .1);
}
.requests-kpi.is-selected .requests-kpi-icon {
    color: #fff !important;
    background: #2081af !important;
}
.requests-kpi:disabled {
    cursor: not-allowed;
    opacity: .58;
}
.requests-kpi-icon {
    display: inline-grid;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    color: #60788a;
    background: #eef3f6;
    font-size: 12px;
}
.requests-kpi > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.25;
}
.requests-kpi strong {
    color: #173e59;
    font-size: 15px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.requests-kpi small {
    margin-top: .12rem;
    overflow: hidden;
    color: #738697;
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.requests-kpi-unread.is-active {
    border-color: #f4c9cb;
    background: #fff7f7;
}
.requests-kpi-unread.is-active .requests-kpi-icon {
    color: #c5353e;
    background: #fee9ea;
}
.requests-kpi-action.is-active {
    border-color: #cce5d7;
    background: #f5fbf7;
}
.requests-kpi-action.is-active .requests-kpi-icon {
    color: #168152;
    background: #e2f4ea;
}
.requests-kpi-priority.is-active {
    border-color: #f3dca9;
    background: #fffbf2;
}
.requests-kpi-priority.is-active .requests-kpi-icon {
    color: #a96808;
    background: #fff0cc;
}
.requests-list-card > .alert {
    margin: .65rem .8rem 0;
}
.requests-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
    align-items: center;
    gap: .5rem .75rem;
    padding: .55rem .8rem;
    border-bottom: 1px solid #e5edf3;
    background: #fff;
}
.requests-tools-slot {
    min-width: 0;
    grid-column: 1 / -1;
}
.requests-tools-slot:empty {
    min-height: 38px;
}
.requests-filter-bar {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    min-height: 38px;
    padding: .2rem .3rem;
    border: 1px solid #e1e8ee;
    border-radius: 10px;
    background: #f8fafc;
}
.requests-filter-toggle {
    flex: 0 0 auto;
    min-height: 31px;
    border-color: #d6e0e7;
    border-radius: 8px;
    background: #fff;
}
.requests-sort-form{display:flex;align-items:center;gap:8px;margin:0;min-width:0;flex:0 1 auto}
.requests-sort-form label{white-space:nowrap;margin:0;font-size:11px}
.requests-sort-form .form-select{width:215px;max-width:100%;min-width:0;min-height:32px;font-size:11px}
.requests-number-sort{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;min-height:32px;white-space:nowrap}
.requests-number-sort:hover{color:var(--primary,#2081af)}
.requests-number-sort:focus-visible{outline:2px solid var(--primary,#2081af);outline-offset:3px;border-radius:4px}
@media(max-width:575px){.requests-sort-form{flex:1 1 190px;flex-wrap:wrap;gap:4px}.requests-sort-form .form-select{width:100%;min-height:40px}.requests-filter-bar .requests-filter-summary{flex-basis:100%;white-space:normal}.requests-number-sort{min-height:44px}}
.requests-filter-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #758797;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.requests-filter-summary.is-active {
    color: var(--primary, #2081af) !important;
    font-weight: 700;
}
.requests-filter-toggle .requests-filter-chevron {
    font-size: 9px;
    transition: transform .2s ease;
}
.requests-filter-toggle[aria-expanded="true"] .requests-filter-chevron {
    transform: rotate(180deg);
}
.requests-filter-body {
    grid-column: 1 / -1;
    width: 100%;
}
.requests-filter-form {
    margin: .15rem 0 0 !important;
    padding: .6rem .7rem .15rem;
    border: 1px dashed #d9e4eb;
    border-radius: 10px;
    background: #fbfdfe;
}
.requests-filter-form .form-label {
    color: #52697b;
    font-weight: 700;
}
.requests-list-card .list-grid-toolbar {
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr);
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}
.requests-list-card .list-grid-toolbar-tools {
    direction: rtl;
    gap: .3rem;
    padding: .2rem;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
}
.requests-list-card .list-tool-btn {
    width: 31px;
    height: 31px;
    border-radius: 7px;
    color: #526779;
}
.requests-list-card .list-grid-group-hint {
    min-width: 0;
    min-height: 38px;
    padding: .35rem .55rem;
    border-color: #dbe5ec;
    border-style: dashed;
    border-radius: 9px;
    background: #f8fbfd;
    color: #8a9aa7;
    font-size: 9.5px;
}
.requests-table-wrap {
    margin: 0 !important;
    border: 0;
    border-radius: 0 0 16px 16px;
    max-height: none !important;
    overflow-y: visible !important;
    scrollbar-color: #aab8c4 #f1f5f9;
    scrollbar-width: thin;
}
.requests-table {
    min-width: 1120px !important;
}
.requests-table > :is(thead, tbody) > tr > :is(th, td) {
    padding: .52rem .65rem !important;
    line-height: 1.48;
}
.requests-table > thead > tr:first-child > th {
    color: #526779;
    background: #f4f7fa !important;
    border-bottom-color: #d7e0e8 !important;
}
.requests-table > thead > tr.list-filter-row > th {
    padding: .35rem .45rem !important;
    background: #fbfcfd !important;
}
.requests-table .list-col-filter {
    height: 31px;
    border-color: #dde5eb;
    border-radius: 7px;
    background-color: #fff;
}
.requests-table [data-col="ticket"] {
    min-width: 8.25rem !important;
    width: 8.25rem;
}
.requests-table [data-col="subject"] {
    min-width: 21rem !important;
    width: 28rem;
    max-width: 34rem !important;
    white-space: normal !important;
}
.requests-table [data-col="contact"],
.requests-table [data-col="org"],
.requests-table [data-col="assignee"],
.requests-table [data-col="action_owner"] {
    min-width: 10.5rem !important;
}
.requests-table [data-col="created"] {
    min-width: 9.5rem !important;
    direction: ltr;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}
.requests-table [data-col="actions"] {
    min-width: 6.5rem !important;
    width: 6.5rem;
    text-align: center !important;
}
.requests-table [data-col="ticket"] {
    color: #466074;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.requests-table [data-col="actions"] .btn {
    min-width: 62px;
    border-radius: 8px;
    box-shadow: none;
    font-size: 10.5px;
}
.requests-subject-cell {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
    min-width: 0;
}
.requests-subject-text {
    min-width: 0;
    color: #243b4d;
    overflow-wrap: anywhere;
    word-break: normal;
}
.requests-unread-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .3rem;
    min-height: 24px;
    padding: .18rem .5rem;
    border: 1px solid #fecaca;
    border-radius: 999px;
    color: #b42318;
    background: #fff1f2;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.requests-row-unread > td {
    background: #fff !important;
}
.requests-row-unread > td:first-child {
    box-shadow: inset -3px 0 0 #e53945;
}
.requests-row-unread .requests-subject-text {
    color: #102f46;
    font-weight: 750;
}
.requests-table > tbody > tr:hover > td,
.requests-table > tbody > tr.requests-row-unread:hover > td {
    background: #f8fbfd !important;
}
.requests-table > tbody > tr.requests-row-unread > td[data-col="actions"] {
    background: #fff !important;
}
.requests-table > tbody > tr.requests-row-unread:hover > td[data-col="actions"] {
    background: #f8fbfd !important;
}
.requests-mobile-unread {
    border-inline-start: 4px solid #e53945 !important;
    background: linear-gradient(90deg, #fff 0%, #fff 88%, #fff7f7 100%);
}

@media (max-width: 1399.98px) {
    .requests-command-center {
        grid-template-columns: minmax(230px, 1fr) auto;
    }
    .requests-kpi-strip {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 991.98px) {
    .requests-command-center {
        grid-template-columns: 1fr;
        padding: .75rem;
    }
    .requests-command-actions,
    .requests-kpi-strip {
        grid-column: 1;
    }
    .requests-command-actions {
        justify-content: flex-start;
        white-space: normal;
    }
    .requests-command-copy p {
        white-space: normal;
    }
    .requests-workbench {
        grid-template-columns: 1fr;
        padding-inline: .6rem;
    }
    .requests-filter-bar,
    .requests-filter-body {
        grid-column: 1;
    }
    .requests-list-card .list-grid-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .requests-list-card .list-grid-toolbar-tools {
        width: 100%;
        justify-content: flex-start;
    }
    .requests-list-card .list-grid-group-hint {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .requests-list-card {
        border-radius: 12px;
    }
    .requests-command-center {
        border-radius: 12px 12px 0 0;
    }
    .requests-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .requests-command-actions .btn {
        flex: 1 1 auto;
    }
}

/* ─── Global nav / submit loading (branded) ───────────────── */
.app-nav-loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    background: rgba(12, 28, 42, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.app-nav-loading.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.app-nav-loading.is-instant {
    transition: none !important;
}
.app-nav-loading.is-instant .app-nav-loading__panel {
    transition: none !important;
    transform: none !important;
}
.app-nav-loading__panel {
    width: min(280px, 100%);
    padding: 1.75rem 1.5rem 1.4rem;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(12, 28, 42, 0.28);
    text-align: center;
    transform: translateY(10px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-transform: translateZ(0);
}
.app-nav-loading.is-visible .app-nav-loading__panel {
    transform: translateY(0) scale(1);
}
.app-nav-loading__orb {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-nav-loading__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(32, 129, 175, 0.18);
    border-top-color: var(--primary, #2081af);
    border-right-color: rgba(32, 129, 175, 0.55);
    animation: app-nav-spin 0.9s linear infinite;
}
.app-nav-loading__ring::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: rgba(32, 129, 175, 0.35);
    animation: app-nav-spin 1.4s linear infinite reverse;
}
.app-nav-loading__logo-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--primary-light, #edf9ff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    animation: app-nav-breathe 1.8s ease-in-out infinite;
}
.app-nav-loading__logo {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}
.app-nav-loading__icon {
    font-size: 28px;
    color: var(--primary, #2081af);
}
.app-nav-loading__title {
    margin: 0 0 0.25rem;
    font-size: 15px;
    font-weight: 700;
    color: #1a2b3a;
}
.app-nav-loading__subtitle {
    margin: 0;
    font-size: 12.5px;
    color: #6b7c8c;
}
@keyframes app-nav-spin {
    to { transform: rotate(360deg); }
}
@keyframes app-nav-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
@media (max-width: 768px) {
    .app-nav-loading {
        background: rgba(12, 28, 42, 0.82);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .app-nav-loading__panel {
        width: min(300px, calc(100vw - 40px));
        padding: 1.5rem 1.25rem 1.25rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .app-nav-loading,
    .app-nav-loading__panel {
        transition: none;
    }
    .app-nav-loading__ring,
    .app-nav-loading__ring::after,
    .app-nav-loading__logo-wrap {
        animation: none;
    }
}

/*
 * استاندارد ظاهر جدول داده (مرجع: مکاتبات)
 * بعد از تم لود می‌شود تا border/alignment تم را override کند.
 * مستثنی: dynamic-table، no-std-table
 */
.content-area .form-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table),
.content-area .table-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table),
.content-area .form-card > table.table:not(.dynamic-table):not(.no-std-table),
.content-area .table-card > table.table:not(.dynamic-table):not(.no-std-table),
.content-area .list-table-view > table.table {
    border-collapse: separate !important;
    border-spacing: 0;
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}
.content-area .form-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table) > :is(thead, tbody) > tr > :is(th, td),
.content-area .table-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table) > :is(thead, tbody) > tr > :is(th, td),
.content-area .form-card > table.table:not(.dynamic-table):not(.no-std-table) > :is(thead, tbody) > tr > :is(th, td),
.content-area .table-card > table.table:not(.dynamic-table):not(.no-std-table) > :is(thead, tbody) > tr > :is(th, td),
.content-area .list-table-view > table.table > :is(thead, tbody) > tr > :is(th, td) {
    border: 1px solid #e2e8f0 !important;
    vertical-align: middle;
    padding: 0.45rem 0.55rem;
    white-space: nowrap;
}
.content-area .form-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table) > thead,
.content-area .table-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table) > thead,
.content-area .form-card > table.table:not(.dynamic-table):not(.no-std-table) > thead,
.content-area .table-card > table.table:not(.dynamic-table):not(.no-std-table) > thead,
.content-area .list-table-view > table.table > thead {
    /* عنوان ستون و ردیف فیلتر یک هدر واحدند؛ از جداشدن آن‌ها در Chrome جلوگیری می‌کند. */
    position: sticky !important;
    top: 0 !important;
    z-index: 8;
}
.content-area .form-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table) > thead > tr > th,
.content-area .table-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table) > thead > tr > th,
.content-area .form-card > table.table:not(.dynamic-table):not(.no-std-table) > thead > tr > th,
.content-area .table-card > table.table:not(.dynamic-table):not(.no-std-table) > thead > tr > th,
.content-area .list-table-view > table.table > thead > tr > th {
    background: #f8fafc !important;
    font-weight: 700;
    text-align: start;
    min-width: 5.5rem;
    position: sticky;
    top: auto !important;
    z-index: 5;
}
.content-area .list-table-view > table.table > thead > tr.list-filter-row > th {
    top: auto !important;
    z-index: 4;
    background: #f7f9fb !important;
}
.content-area .form-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table) > tbody > tr > td,
.content-area .table-card .table-responsive > table.table:not(.dynamic-table):not(.no-std-table) > tbody > tr > td,
.content-area .form-card > table.table:not(.dynamic-table):not(.no-std-table) > tbody > tr > td,
.content-area .table-card > table.table:not(.dynamic-table):not(.no-std-table) > tbody > tr > td,
.content-area .list-table-view > table.table > tbody > tr > td {
    text-align: start;
    min-width: 5.5rem;
}
.content-area .form-card .table-responsive > table.table :is(th, td)[dir="ltr"],
.content-area .table-card .table-responsive > table.table :is(th, td)[dir="ltr"],
.content-area .list-table-view > table.table :is(th, td)[dir="ltr"] {
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.content-area .form-card .table-responsive > table.table td:has(.form-control),
.content-area .form-card .table-responsive > table.table td:has(.form-select),
.content-area .form-card .table-responsive > table.table td:has(input),
.content-area .table-card .table-responsive > table.table td:has(.form-control),
.content-area .table-card .table-responsive > table.table td:has(input) {
    white-space: normal;
    min-width: 6.5rem;
}
.content-area .form-card .table-responsive:not(.dynamic-table-wrap),
.content-area .table-card .table-responsive:not(.dynamic-table-wrap),
.content-area .form-card:has(> table.table:not(.dynamic-table):not(.no-std-table)),
.content-area .table-card:has(> table.table:not(.dynamic-table):not(.no-std-table)),
.content-area .list-table-view.table-responsive,
.content-area .list-enhance .list-table-view {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    max-height: none !important;
    overscroll-behavior-inline: contain;
}

/*
 * الگوی سراسری جداول ERP: تنها صفحه اسکرول عمودی دارد.
 * table-scroll-ux.js کنترل افقی بالای جدول و سرستون شناور را اضافه می‌کند.
 */
.content-area .table-scroll-pane {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    scrollbar-width: thin;
    scrollbar-color: #aab8c4 #eef2f5;
}
.content-area .has-table-scroll-ux {
    overflow: visible !important;
}
.table-x-controller[hidden] {
    display: none !important;
}
.table-x-controller {
    --table-ux-top: 0px;
    position: sticky;
    top: var(--table-ux-top);
    z-index: 94;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 31px;
    padding: .28rem .65rem;
    border: 1px solid #dbe5ec;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    color: #607487;
    background: rgba(248, 250, 252, .97);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .06);
    backdrop-filter: blur(8px);
}
.table-x-controller-label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .4rem;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.table-x-controller-label i {
    color: #2081af;
}
.table-x-rail {
    flex: 1 1 auto;
    min-width: 4rem;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: #7f96a8 #e7edf2;
}
.table-x-rail:focus-visible {
    border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(32, 129, 175, .16);
}
.table-x-rail-inner {
    height: 1px;
    min-width: 100%;
}
.table-x-rail::-webkit-scrollbar,
.table-scroll-pane::-webkit-scrollbar {
    height: 10px;
}
.table-x-rail::-webkit-scrollbar-track,
.table-scroll-pane::-webkit-scrollbar-track {
    background: #e7edf2;
    border-radius: 999px;
}
.table-x-rail::-webkit-scrollbar-thumb,
.table-scroll-pane::-webkit-scrollbar-thumb {
    background: #8ea2b2;
    border: 2px solid #e7edf2;
    border-radius: 999px;
}
.table-x-rail::-webkit-scrollbar-thumb:hover,
.table-scroll-pane::-webkit-scrollbar-thumb:hover {
    background: #607a8f;
}
.table-sticky-head-shell {
    position: fixed;
    z-index: 93;
    display: none;
    overflow: hidden;
    border: 1px solid #d7e0e8;
    border-top: 0;
    background: #f4f7fa;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .11);
    pointer-events: none;
}
.table-sticky-head-shell.is-visible {
    display: block;
}
.table-sticky-head-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.table-sticky-head-table {
    position: absolute;
    top: 0;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    table-layout: fixed;
    background: #f4f7fa;
}
.table-sticky-head-table > thead {
    position: static !important;
}
.table-sticky-head-table > thead > tr > th {
    position: static !important;
    top: auto !important;
    padding: .45rem .55rem;
    border: 1px solid #dfe7ed !important;
    color: #526779;
    background: #f4f7fa !important;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.55;
    vertical-align: middle;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .table-x-controller {
        gap: .4rem;
        padding-inline: .45rem;
    }
    .table-x-controller-label span {
        display: none;
    }
    .table-x-controller-label {
        font-size: 12px;
    }
}

/* قفل عرض موبایل: اسکرول افقی صفحه (نه اسکرول داخل جدول) */
@media (max-width: 991.98px) {
    html {
        overflow-x: hidden;
        max-width: 100%;
    }
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .main-wrapper,
    .content-area,
    .form-card,
    .table-card,
    .list-enhance,
    .tc-wrap,
    .tc-card {
        max-width: 100%;
        min-width: 0;
    }
    .content-area {
        overflow-x: hidden;
        padding-inline: 12px;
    }
}

/* فیلدهای نامعتبر — هایلایت قرمز پس از خطا (سراسری) */
.form-control.is-invalid,
.form-select.is-invalid,
textarea.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-was-validated .form-control:invalid,
.form-was-validated .form-select:invalid {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .18) !important;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus,
.form-was-validated .form-control:invalid:focus,
.form-was-validated .form-select:invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .28) !important;
}
.input-group.is-invalid .form-control,
.input-group.is-invalid .form-select,
.input-group.is-invalid .btn,
.user-search-wrap.is-invalid .form-control,
.customer-search-wrap.is-invalid .form-control,
.user-search-wrap.is-invalid .btn,
.customer-search-wrap.is-invalid .btn {
    border-color: #dc3545 !important;
}
.user-search-wrap.is-invalid .form-control,
.customer-search-wrap.is-invalid .form-control,
.input-group.is-invalid .form-control {
    background-color: #fff5f5 !important;
}
.invalid-feedback.d-block,
.field-error-msg {
    display: block;
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

/* ── پرونده ۳۶۰ و گاوصندوق امن مشتری ───────────────────────────── */
.customer-vault-page .content-area { background: #f4f7fb; }
.vault-shell {
    --vault-navy: #123f67;
    --vault-blue: #1769a3;
    --vault-cyan: #1aa6b7;
    --vault-ink: #18324a;
    --vault-muted: #65798b;
    --vault-line: #dce7ef;
    max-width: 1540px;
    margin: 0 auto;
    padding-bottom: 48px;
    color: var(--vault-ink);
}
.vault-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(130deg, #0c3154 0%, #155d8f 62%, #138a9c 100%);
    box-shadow: 0 18px 45px rgba(18, 63, 103, .18);
}
.vault-hero::before,
.vault-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
}
.vault-hero::before { width: 330px; height: 330px; inset: -220px auto auto -70px; }
.vault-hero::after { width: 220px; height: 220px; inset: auto 38% -170px auto; }
.vault-hero__identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.vault-avatar {
    width: 66px; height: 66px; flex: 0 0 66px;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px;
    background: rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    font-size: 28px; font-weight: 800;
}
.vault-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: #bfe9f0; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.vault-hero h1 { margin: 0 0 9px; color: #fff; font-size: clamp(22px, 2vw, 32px); font-weight: 900; }
.vault-customer-meta { display: flex; flex-wrap: wrap; gap: 8px 17px; color: rgba(255,255,255,.8); font-size: 13px; }
.vault-customer-meta span { display: inline-flex; align-items: center; gap: 6px; }
.vault-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.vault-hero__actions .btn { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; border-radius: 11px; font-weight: 700; }
.vault-notice { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 13px 17px; border: 1px solid; border-radius: 14px; }
.vault-notice > i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 10px; }
.vault-notice div { display: flex; flex-direction: column; gap: 2px; }
.vault-notice span { color: var(--vault-muted); font-size: 12px; }
.vault-notice--secure { border-color: #bee5db; background: #f1fbf8; }
.vault-notice--secure > i { color: #08785f; background: #d6f3ea; }
.vault-notice--warning { color: #7d5310; border-color: #f1d59b; background: #fff9ec; }
.vault-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.vault-stat-grid article {
    display: flex; align-items: center; gap: 13px;
    min-height: 84px; padding: 16px 18px;
    border: 1px solid var(--vault-line); border-radius: 16px; background: #fff;
    box-shadow: 0 7px 24px rgba(31, 68, 98, .05);
}
.vault-stat-grid article > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--vault-blue); background: #eaf4fb; font-size: 17px; }
.vault-stat-grid article.is-alert > i { color: #a4610c; background: #fff1d5; }
.vault-stat-grid article div { display: flex; flex-direction: column; line-height: 1.2; }
.vault-stat-grid strong { font-size: 23px; font-weight: 900; }
.vault-stat-grid span { margin-top: 6px; color: var(--vault-muted); font-size: 12px; }
.vault-tabs {
    position: sticky; top: 72px; z-index: 15;
    display: flex; gap: 6px; margin: 0 0 14px; padding: 7px;
    width: max-content; max-width: 100%; overflow-x: auto;
    border: 1px solid var(--vault-line); border-radius: 15px; background: rgba(255,255,255,.94);
    box-shadow: 0 7px 24px rgba(31, 68, 98, .07); backdrop-filter: blur(12px);
}
.vault-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 10px; color: #506a80; background: transparent; font-weight: 750; white-space: nowrap; }
.vault-tabs button:hover { color: var(--vault-blue); background: #edf5fb; }
.vault-tabs button.is-active { color: #fff; background: var(--vault-navy); box-shadow: 0 7px 16px rgba(18,63,103,.22); }
.vault-tabs button:focus-visible,
.vault-icon-button:focus-visible,
.vault-input-action button:focus-visible,
.vault-file-menu > summary:focus-visible,
.vault-inline-share summary:focus-visible {
    outline: 3px solid rgba(26, 166, 183, .35);
    outline-offset: 2px;
}
.vault-dropzone:focus-within { border-color: var(--vault-cyan); box-shadow: 0 0 0 4px rgba(26,166,183,.13); }
.vault-panel { display: none; padding: 23px; border: 1px solid var(--vault-line); border-radius: 20px; background: #fff; box-shadow: 0 12px 38px rgba(31,68,98,.06); }
.vault-panel.is-active { display: block; animation: vaultPanelIn .22s ease-out both; }
@keyframes vaultPanelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.vault-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #e7eef4; }
.vault-section-heading h2 { margin: 2px 0 5px; color: var(--vault-ink); font-size: 20px; font-weight: 900; }
.vault-section-heading p { margin: 0; color: var(--vault-muted); font-size: 13px; }
.vault-kicker { color: var(--vault-cyan); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.vault-section-heading .btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 11px; white-space: nowrap; }
.vault-credential-list { display: grid; gap: 14px; }
.vault-credential { border: 1px solid var(--vault-line); border-radius: 16px; overflow: hidden; background: #fbfdff; transition: border-color .2s, box-shadow .2s; }
.vault-credential:hover { border-color: #b6d0e2; box-shadow: 0 10px 28px rgba(24,68,100,.08); }
.vault-credential.is-expiring { border-color: #edcf87; }
.vault-credential.is-expired { border-color: #efb9b9; }
.vault-credential > header { display: flex; align-items: center; gap: 11px; min-height: 65px; padding: 11px 14px; border-bottom: 1px solid #e7eef4; background: #fff; }
.vault-kind-icon, .vault-file-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 12px; color: var(--vault-blue); background: #e9f4fb; }
.vault-card-title { display: flex; flex-direction: column; min-width: 130px; margin-inline-end: auto; }
.vault-card-title strong { color: var(--vault-ink); font-size: 14px; }
.vault-card-title span { margin-top: 3px; color: var(--vault-muted); font-size: 11px; }
.vault-classification, .vault-expiry { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.vault-classification--restricted { color: #9f2525; background: #ffebeb; }
.vault-classification--confidential { color: #8a5c0c; background: #fff3d5; }
.vault-classification--internal { color: #246785; background: #e8f5fb; }
.vault-expiry { color: #8a5c0c; background: #fff3d5; }
.vault-expiry.is-danger { color: #a32828; background: #ffe6e6; }
.vault-icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; }
.vault-icon-button:hover { background: #f2f6f9; }
.vault-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; padding: 16px; }
.vault-fields label, .vault-text-grid label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vault-fields label > span, .vault-text-grid label > span { color: #486176; font-size: 11px; font-weight: 800; }
.vault-fields .form-control, .vault-fields .form-select, .vault-upload-fields .form-control, .vault-upload-fields .form-select { min-height: 41px; border-color: #d7e3eb; border-radius: 10px; background-color: #fff; font-size: 12px; }
.vault-fields .form-control:focus, .vault-fields .form-select:focus { border-color: #54a4cf; box-shadow: 0 0 0 3px rgba(23,105,163,.11); }
.vault-field-wide { grid-column: span 2; }
.vault-field-full { grid-column: 1 / -1; }
.vault-ltr { direction: ltr; text-align: left; }
.vault-input-action { display: flex; direction: ltr; }
.vault-input-action input { border-radius: 0 10px 10px 0 !important; }
.vault-input-action button { width: 40px; flex: 0 0 40px; border: 1px solid #d7e3eb; border-left: 0; color: #567186; background: #f7fafc; }
.vault-input-action button:last-child { border-radius: 10px 0 0 10px; }
.vault-input-action button:hover { color: var(--vault-blue); background: #eaf4fb; }
.vault-inline-share { margin: 0 16px 14px; border: 1px dashed #cddde8; border-radius: 11px; background: #fff; }
.vault-inline-share summary { padding: 10px 12px; color: #3f627a; font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.vault-share-form { display: grid; grid-template-columns: 1.2fr 90px 2fr auto; gap: 8px; padding: 0 11px 11px; }
.vault-share-form .form-control, .vault-share-form .form-select { min-height: 38px; border-radius: 9px; font-size: 11px; }
.vault-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.vault-text-card { min-width: 0; padding: 15px; border: 1px solid var(--vault-line); border-radius: 14px; background: #fbfdff; }
.vault-text-card > label { padding: 0; border: 0; background: transparent; }
.vault-text-card > .vault-inline-share { margin: 12px 0 0; background: #fff; }
.vault-text-grid textarea { border-color: #d7e3eb; border-radius: 10px; resize: vertical; font-size: 12px; line-height: 2; }
.vault-sticky-actions { position: sticky; bottom: 12px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 11px 14px; border: 1px solid #cddde8; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(24,63,90,.15); backdrop-filter: blur(12px); }
.vault-sticky-actions span { color: var(--vault-muted); font-size: 11px; }
.vault-upload-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 15px; margin-bottom: 18px; padding: 15px; border: 1px solid #cfe0eb; border-radius: 16px; background: #f8fbfd; }
.vault-dropzone { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 146px; padding: 16px; border: 2px dashed #a9c7d9; border-radius: 13px; color: var(--vault-ink); background: #fff; cursor: pointer; text-align: center; transition: .2s; }
.vault-dropzone:hover { border-color: var(--vault-cyan); background: #f3fcfd; }
.vault-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vault-dropzone i { margin-bottom: 8px; color: var(--vault-cyan); font-size: 28px; }
.vault-dropzone span { margin-top: 5px; color: var(--vault-muted); font-size: 10px; }
.vault-upload-fields { display: grid; gap: 8px; align-content: center; }
.vault-file-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.vault-file-card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--vault-line); border-radius: 14px; background: #fff; }
.vault-file-main { display: flex; flex-direction: column; min-width: 0; }
.vault-file-main strong { overflow: hidden; color: var(--vault-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.vault-file-main span, .vault-file-main small { margin-top: 3px; color: var(--vault-muted); font-size: 10px; }
.vault-file-card > .btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; white-space: nowrap; }
.vault-file-menu { position: relative; }
.vault-file-menu > summary { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--vault-line); border-radius: 9px; list-style: none; cursor: pointer; }
.vault-file-menu > div { position: absolute; inset: calc(100% + 6px) auto auto 0; z-index: 20; width: 300px; padding: 11px; border: 1px solid var(--vault-line); border-radius: 12px; background: #fff; box-shadow: 0 14px 38px rgba(26,56,78,.18); }
.vault-file-menu form { display: grid; gap: 8px; }
.vault-file-menu form + form { margin-top: 9px; padding-top: 9px; border-top: 1px solid #edf1f4; }
.vault-sharing-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr); gap: 16px; }
.vault-share-master { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-content: start; padding: 16px; border: 1px solid #f0d2d2; border-radius: 15px; background: #fffafa; }
.vault-share-master > :not(.vault-file-icon):not(div) { grid-column: 1 / -1; }
.vault-share-master p { margin: 4px 0 0; color: var(--vault-muted); font-size: 11px; }
.vault-share-master .form-control, .vault-share-master .form-select { min-height: 40px; border-radius: 9px; font-size: 12px; }
.vault-active-shares { padding: 15px; border: 1px solid var(--vault-line); border-radius: 15px; }
.vault-active-shares h3 { margin: 0 0 12px; font-size: 15px; font-weight: 900; }
.vault-share-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid #edf1f4; }
.vault-share-row > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--vault-blue); background: #edf6fb; }
.vault-share-row div { display: flex; flex-direction: column; }
.vault-share-row strong { font-size: 12px; }
.vault-share-row span { margin-top: 3px; color: var(--vault-muted); font-size: 10px; }
.vault-audit-list { position: relative; }
.vault-audit-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 11px; align-items: center; min-height: 58px; padding: 8px 6px; border-bottom: 1px solid #edf1f4; }
.vault-audit-dot { width: 10px; height: 10px; border: 3px solid #d2f0e7; border-radius: 50%; background: #15946e; box-shadow: 0 0 0 4px #effaf6; }
.vault-audit-dot.is-failed { border-color: #f5caca; background: #c13d3d; box-shadow: 0 0 0 4px #fff3f3; }
.vault-audit-row div { display: flex; flex-direction: column; }
.vault-audit-row strong { font-size: 12px; }
.vault-audit-row span, .vault-audit-row time { color: var(--vault-muted); font-size: 10px; }
.vault-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 230px; padding: 30px; border: 1px dashed #c8d8e3; border-radius: 15px; color: var(--vault-muted); background: #fbfdff; text-align: center; }
.vault-empty i { margin-bottom: 10px; color: #9bb2c2; font-size: 32px; }
.vault-empty h3 { margin: 0 0 6px; color: var(--vault-ink); font-size: 16px; }
.vault-empty p { margin: 0; font-size: 12px; }
.vault-empty--compact { min-height: 100px; }
.vault-empty--compact i { font-size: 22px; }
.vault-toast { position: fixed; z-index: 9999; inset: auto auto 26px 26px; transform: translateY(20px); padding: 11px 16px; border-radius: 11px; color: #fff; background: #16775f; box-shadow: 0 12px 34px rgba(20,55,75,.24); opacity: 0; pointer-events: none; transition: .2s; }
.vault-toast.is-error { background: #b63838; }
.vault-toast.is-visible { transform: none; opacity: 1; }

@media (max-width: 1199.98px) {
    .vault-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vault-file-grid { grid-template-columns: 1fr; }
    .vault-file-menu > div { inset-inline: auto 0; }
}
@media (max-width: 991.98px) {
    .vault-hero { align-items: flex-start; flex-direction: column; padding: 22px; }
    .vault-hero__actions { justify-content: flex-start; }
    .vault-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vault-tabs { top: 62px; }
    .vault-upload-card, .vault-sharing-layout { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .vault-hero__identity { align-items: flex-start; }
    .vault-avatar { width: 50px; height: 50px; flex-basis: 50px; border-radius: 15px; font-size: 21px; }
    .vault-hero__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .vault-hero__actions .btn:first-child { grid-column: 1 / -1; }
    .vault-stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .vault-stat-grid article { min-height: 72px; padding: 11px; }
    .vault-panel { padding: 15px; border-radius: 16px; }
    .vault-section-heading { align-items: stretch; flex-direction: column; }
    .vault-fields { grid-template-columns: 1fr; padding: 12px; }
    .vault-field-wide, .vault-field-full { grid-column: auto; }
    .vault-credential > header { align-items: flex-start; flex-wrap: wrap; }
    .vault-card-title { width: calc(100% - 56px); margin-inline-end: 0; }
    .vault-classification { margin-inline-start: 51px; }
    .vault-share-form { grid-template-columns: 1fr; }
    .vault-text-grid { grid-template-columns: 1fr; }
    .vault-sticky-actions { align-items: stretch; flex-direction: column; }
    .vault-file-card { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .vault-file-card > .vault-classification { display: none; }
    .vault-file-card > .btn { grid-column: 1 / -1; justify-content: center; }
    .vault-file-menu { grid-column: 3; grid-row: 1; }
    .vault-file-menu > div { position: fixed; inset: auto 14px 14px 14px; width: auto; }
    .vault-audit-row { grid-template-columns: 14px 1fr; }
    .vault-audit-row time { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .vault-panel.is-active { animation: none; }
    .vault-credential, .vault-dropzone, .vault-toast { transition: none; }
}

/* People, Payroll & Petty Cash workbench v1 */
.people-finance-ui {
    --pf-navy: #123f60;
    --pf-blue: #176fa3;
    --pf-teal: #0d8a7a;
    --pf-ink: #17364d;
    --pf-muted: #6c8293;
    --pf-line: #dce7ee;
    --pf-surface: #fff;
    --pf-bg: #f4f8fb;
    background: var(--pf-bg);
}
.people-finance-ui .page-content { color: var(--pf-ink); }
.pf-module-hero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; min-height: 250px; margin-bottom: 18px; padding: 34px 38px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; color: #fff; background: linear-gradient(125deg,#103b59 0%,#176b8f 58%,#0d8a7a 100%); box-shadow: 0 18px 45px rgba(19,66,94,.18); }
.pf-module-hero::before, .pf-module-hero::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.pf-module-hero::before { width: 360px; height: 360px; inset: -150px auto auto -85px; }
.pf-module-hero::after { width: 230px; height: 230px; inset: auto -65px -135px auto; }
.pf-module-hero--payroll { background: linear-gradient(125deg,#143a5b,#176fa3 62%,#238fa5); }
.pf-module-hero--petty { background: linear-gradient(125deg,#17445f,#116d77 58%,#0c8c72); }
.pf-hero-copy { max-width: 760px; }
.pf-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #e1f7fb; background: rgba(255,255,255,.09); font-size: 11px; font-weight: 800; }
.pf-hero-copy h1 { margin: 0 0 11px; color: #fff; font-size: clamp(23px,2.3vw,34px); font-weight: 950; line-height: 1.45; }
.pf-hero-copy p { max-width: 700px; margin: 0; color: rgba(255,255,255,.81); font-size: 13px; line-height: 2; }
.pf-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.pf-hero-actions .btn { display: inline-flex; align-items: center; gap: 7px; min-height: 41px; padding-inline: 17px; border-radius: 11px; font-weight: 850; }
.pf-hero-actions .btn-outline-light:hover { color: var(--pf-navy); }
.pf-hero-orbit { position: relative; display: grid; place-items: center; width: 150px; height: 150px; flex: 0 0 150px; margin-inline-start: 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.pf-hero-orbit::before, .pf-hero-orbit span { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.pf-hero-orbit::before { inset: 14px; }
.pf-hero-orbit span { inset: 29px; }
.pf-hero-orbit i { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; color: var(--pf-navy); background: #fff; font-size: 27px; box-shadow: 0 15px 35px rgba(7,40,59,.25); }
.pf-period-chip { display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 190px; min-height: 142px; margin-inline-start: 28px; padding: 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(255,255,255,.11); box-shadow: inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(7px); text-align: center; }
.pf-period-chip small { color: rgba(255,255,255,.7); }
.pf-period-chip strong { margin: 8px 0 5px; color: #fff; font-size: 23px; font-weight: 950; }
.pf-period-chip span { color: #cdebf1; font-size: 11px; }
.pf-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 18px; }
.pf-kpi { display: flex; align-items: center; min-height: 96px; padding: 17px; border: 1px solid var(--pf-line); border-radius: 17px; background: var(--pf-surface); box-shadow: 0 7px 22px rgba(30,71,96,.06); }
.pf-kpi > i { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; margin-inline-end: 12px; border-radius: 14px; color: var(--pf-blue); background: #eaf5fb; font-size: 18px; }
.pf-kpi:nth-child(2) > i { color: #8b6715; background: #fff6dc; }
.pf-kpi:nth-child(3) > i { color: #b14a4a; background: #fff0ef; }
.pf-kpi:nth-child(4) > i { color: #087965; background: #e9f8f4; }
.pf-kpi div { display: flex; flex-direction: column; }
.pf-kpi strong { color: var(--pf-ink); font-size: 22px; font-weight: 950; line-height: 1.25; }
.pf-kpi span { margin-top: 4px; color: var(--pf-muted); font-size: 11px; font-weight: 700; }
.pf-section { margin-bottom: 18px; padding: 20px; border: 1px solid var(--pf-line); border-radius: 20px; background: #fff; box-shadow: 0 8px 26px rgba(28,66,91,.055); }
.pf-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid #e9f0f4; }
.pf-section-heading div { display: flex; flex-direction: column; }
.pf-section-heading div > span { margin-bottom: 3px; color: var(--pf-teal); font-size: 10px; font-weight: 900; letter-spacing: .2px; }
.pf-section-heading h2 { margin: 0; color: var(--pf-ink); font-size: 17px; font-weight: 950; }
.pf-section-heading small { color: var(--pf-muted); font-size: 10px; }
.pf-action-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.pf-action-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 82px; padding: 13px; border: 1px solid #dfe9ef; border-radius: 15px; color: inherit; background: #fbfdfe; text-decoration: none; transition: transform .18s,border-color .18s,box-shadow .18s; }
.pf-action-card:hover { transform: translateY(-2px); border-color: #a9cfdf; color: inherit; background: #fff; box-shadow: 0 10px 24px rgba(26,83,112,.10); }
.pf-action-card > i { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: var(--pf-blue); background: #e9f5fb; font-size: 16px; }
.pf-action-card div { display: flex; flex-direction: column; min-width: 0; }
.pf-action-card strong { overflow: hidden; color: var(--pf-ink); font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.pf-action-card span { overflow: hidden; margin-top: 5px; color: var(--pf-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.pf-action-card b { color: #9eb1bd; font-size: 15px; transition: transform .18s; }
.pf-action-card:hover b { transform: translateX(-3px); color: var(--pf-teal); }
.pf-feed-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.pf-feed-card { overflow: hidden; border: 1px solid #e0e9ef; border-radius: 16px; background: #fbfdfe; }
.pf-feed-card > header { display: flex; align-items: center; justify-content: space-between; min-height: 51px; padding: 10px 13px; border-bottom: 1px solid #e7eef2; background: #fff; }
.pf-feed-card > header > a:first-child { color: var(--pf-ink); font-size: 12px; font-weight: 900; text-decoration: none; }
.pf-mini-add { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--pf-blue); background: #eaf5fb; text-decoration: none; }
.pf-feed-list { padding: 5px 12px 9px; }
.pf-feed-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 58px; border-bottom: 1px solid #eaf0f3; }
.pf-feed-row:last-child { border-bottom: 0; }
.pf-feed-row div { display: flex; flex-direction: column; min-width: 0; }
.pf-feed-row strong { overflow: hidden; font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.pf-feed-row div span { overflow: hidden; margin-top: 4px; color: var(--pf-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.pf-feed-row > .badge { flex: 0 0 auto; font-size: 9px; }
.pf-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 110px; padding: 16px; color: #8ba0ae; text-align: center; }
.pf-empty i { margin-bottom: 7px; color: #a9bbc6; font-size: 21px; }
.pf-empty span { font-size: 10px; }
.pf-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #17668e; background: #eaf5fb; font-size: 10px; font-weight: 850; }
.people-finance-ui .form-card, .people-finance-ui .table-card { border: 1px solid var(--pf-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(28,66,91,.055); }
.people-finance-ui .form-card { padding: 20px !important; }
.people-finance-ui .form-card .form-label { color: #496679; font-size: 11px; font-weight: 800; }
.people-finance-ui .form-control, .people-finance-ui .form-select { min-height: 40px; border-color: #d7e3ea; border-radius: 10px; background-color: #fff; }
.people-finance-ui .form-control:focus, .people-finance-ui .form-select:focus { border-color: #63a8c8; box-shadow: 0 0 0 3px rgba(23,111,163,.10); }
.people-finance-ui .table-responsive { max-height: none !important; overflow-y: visible !important; border-radius: 13px; }
.people-finance-ui .table { --bs-table-hover-bg: #f3f8fb; color: #29485d; }
.people-finance-ui .table thead th { padding-block: 12px; border-color: #dce7ed; color: #466377; background: #f4f8fb; font-size: 10px; font-weight: 900; white-space: nowrap; }
.people-finance-ui .table tbody td { padding-block: 11px; border-color: #e3ebf0; font-size: 11px; vertical-align: middle; }
.people-finance-ui .btn { border-radius: 9px; font-weight: 800; }

@media (max-width: 1199.98px) {
    .pf-action-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
    .pf-module-hero { align-items: flex-start; min-height: 0; padding: 27px; }
    .pf-hero-orbit { display: none; }
    .pf-period-chip { min-width: 165px; min-height: 125px; }
    .pf-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .pf-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .pf-feed-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .pf-module-hero { flex-direction: column; padding: 22px 18px; border-radius: 18px; }
    .pf-hero-copy h1 { font-size: 22px; }
    .pf-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .pf-hero-actions .btn { justify-content: center; }
    .pf-period-chip { width: 100%; min-height: 105px; margin: 19px 0 0; }
    .pf-kpi-grid { gap: 8px; }
    .pf-kpi { min-height: 82px; padding: 12px; }
    .pf-kpi > i { width: 38px; height: 38px; flex-basis: 38px; }
    .pf-kpi strong { font-size: 17px; }
    .pf-section { padding: 14px; border-radius: 16px; }
    .pf-section-heading { align-items: flex-start; flex-direction: column; }
    .pf-action-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-action-card, .pf-action-card b { transition: none; }
}
/* ── Passwordless SMS OTP / password recovery ───────────────── */
.auth-login-wrapper{max-width:460px}.auth-login-card{position:relative;overflow:hidden}.auth-login-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#0d6f8f,#23a88f)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#91a1af;font-size:11px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#e3e9ef;flex:1}.auth-secondary-action{display:flex;align-items:center;justify-content:center;gap:6px;position:relative}.auth-soon-badge{position:absolute;left:8px;font-size:9px;color:#8a6417;background:#fff4cf;border-radius:999px;padding:3px 7px}.auth-text-link,.auth-back-link{display:block;text-align:center;text-decoration:none;font-size:12px;margin-top:14px;color:#537086}.auth-text-link:hover,.auth-back-link:hover{color:#126987}
.auth-step-icon{width:58px;height:58px;margin:4px auto 14px;border-radius:18px;display:grid;place-items:center;color:#08789a;background:linear-gradient(145deg,#e6f6fb,#eefaf6);box-shadow:0 8px 24px rgba(16,113,142,.12);font-size:24px}.auth-step-icon.is-verify{color:#2466b2;background:linear-gradient(145deg,#eaf2ff,#f0f7ff)}.auth-step-icon.is-success{color:#168460;background:linear-gradient(145deg,#e6faf3,#f1fbf7)}.auth-compact-logo{margin-bottom:20px}.auth-compact-logo .sys-name{max-width:360px;margin:7px auto 0;line-height:1.9}.auth-alert{font-size:12px;line-height:1.8}.auth-service-notice{display:flex;gap:10px;align-items:flex-start;background:#fff8e4;border:1px solid #f5dfa1;color:#785b18;border-radius:12px;padding:11px 12px;margin-bottom:16px;font-size:12px}.auth-service-notice i{margin-top:3px}.auth-service-notice strong,.auth-service-notice span{display:block}.auth-service-notice span{margin-top:3px;color:#967735;line-height:1.7}.auth-input-group .input-group-text{min-width:44px;justify-content:center}.auth-primary-action{min-height:44px;font-weight:700}.auth-safe-note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding:10px 12px;background:#f3f8fb;border-radius:11px;color:#60788a;font-size:11px;line-height:1.8}.auth-safe-note i{color:#1b7d99;margin-top:4px}.auth-otp-code{height:58px;text-align:center;letter-spacing:12px;font:700 25px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;border:2px solid #d8e3eb;border-radius:13px}.auth-otp-code:focus{border-color:#2185a4;box-shadow:0 0 0 .2rem rgba(33,133,164,.12)}.auth-resend-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:11px}.auth-resend-row form{margin:0}.auth-resend-row a{text-decoration:none}.auth-resend-btn{font-size:11px;padding:0;text-decoration:none}.auth-password-rules{display:flex;flex-direction:column;gap:3px;background:#f4f8fb;border:1px solid #e3ebf0;border-radius:11px;padding:10px 12px;margin-bottom:16px;color:#61798a;font-size:11px;line-height:1.8}.auth-password-rules strong{color:#264c62}@media(max-width:520px){.auth-login-wrapper{padding:12px}.auth-login-card{padding:24px 18px}.auth-soon-badge{display:none}.auth-resend-row{align-items:flex-start;flex-direction:column}}