:root {
    --color-primary: #16324F;
    --color-primary-light: #1E4368;
    --color-accent: #2A8C82;
    --color-accent-dark: #1F6B63;
    /* نسخه‌ی روشن‌ترِ رنگ تاکیدی، برای متن روی زمینه‌ی سرمه‌ای منو.
       خودِ #2A8C82 روی آن زمینه نسبت کنتراست حدود ۳:۱ می‌دهد که برای متن
       کوچک کم است؛ این یکی حدود ۵٫۷:۱ است. */
    --color-accent-soft: #57C2B5;
    --color-bg: #F4F6F8;
    --color-surface: #FFFFFF;
    --color-text: #1F2A37;
    --color-text-muted: #6B7684;
    --color-border: #E1E5EA;
    --color-danger: #C0392B;
    --color-success: #2F8F5B;
    --color-auth-bg-start: #EEF2F6;
    --color-auth-bg-end: #DCE4EC;
    --radius: 8px;
    --font-main: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;

    /* خطوط برداری پس‌زمینه‌ی صفحه‌های ورود */
    --auth-line: rgba(42, 140, 130, .30);
    --auth-line-soft: rgba(31, 107, 99, .14);
}

html, body {
    direction: rtl;
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

    a:hover {
        color: var(--color-accent-dark);
    }

/* ===== Auth pages ===== */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-auth-bg-start);
    background-image: linear-gradient(160deg, var(--color-auth-bg-start) 0%, var(--color-auth-bg-end) 100%);
    padding: 20px;
}

/* خطوط موجی برداری پشت کارت ورود (توسط Login.cshtml ساخته می‌شود).
   خطوط fixed و z-index:0 هستند؛ هر چه بعد از آن بیاید (کارت، هر کلاسی که
   داشته باشد) باید بالاتر باشد، پس به همه‌ی هم‌ردیف‌های بعدی z-index:1 می‌دهیم.
   سوییچ تم fixed است و جدا می‌ماند. */
.auth-bg-lines {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

    .auth-bg-lines path {
        fill: none;
        vector-effect: non-scaling-stroke;
    }

    .auth-bg-lines ~ *:not(.auth-theme-switch) {
        position: relative;
        z-index: 1;
    }

/* کارتی که Login.cshtml پیدا می‌کند و این کلاس را می‌گیرد: خطوط مورب محو بالای کارت */
.has-bg-lines {
    position: relative;
    overflow: hidden;
}

    .has-bg-lines::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 190px;
        pointer-events: none;
        background: repeating-linear-gradient(135deg, var(--auth-line-soft) 0 1px, transparent 1px 14px);
        -webkit-mask-image: linear-gradient(#000, transparent);
        mask-image: linear-gradient(#000, transparent);
    }

    .has-bg-lines > * {
        position: relative;
    }

.auth-card {
    background-color: var(--color-surface);
    border-radius: var(--radius);
    padding: 36px 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

    .auth-card .brand {
        text-align: center;
        color: var(--color-text);
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    .auth-card .form-control {
        text-align: right;
    }

    .auth-card .btn-primary {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        width: 100%;
        padding: 10px;
        font-weight: 600;
    }

        .auth-card .btn-primary:hover {
            background-color: var(--color-accent-dark);
            border-color: var(--color-accent-dark);
        }

    .auth-card .form-floating label {
        right: 0;
        left: auto;
    }

/* ===== Password toggle ===== */
.password-wrapper {
    position: relative;
}

    .password-wrapper .form-control {
        padding-left: 42px;
    }

.password-toggle-btn {
    position: absolute;
    top: 0;
    left: 0;
    height: 58px;
    width: 42px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .password-toggle-btn:hover {
        color: var(--color-accent);
    }



/* ===== Theme switch on auth pages (outside the card) ===== */
.auth-theme-switch {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
}

    .auth-theme-switch button {
        font-size: 10px;
        padding: 4px 10px;
    }


    /* ===== Theme Switch Control ===== */


    .theme-switch {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    background-color: var(--color-surface);
}

    .theme-switch button {
        border: none;
        background: transparent;
        color: var(--color-text-muted);
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-family: var(--font-main);
        cursor: pointer;
    }

        .theme-switch button.active {
            background-color: var(--color-accent);
            color: #fff;
        }

/* ===== Dark Theme ===== */
html[data-theme="dark"] {
    --color-bg: #0F1620;
    --color-surface: #1B2431;
    --color-text: #E4E8EE;
    --color-text-muted: #97A2B2;
    --color-border: #2B3646;
    --color-primary: #16324F;
    --color-primary-light: #16324F;
    --color-accent: #35A79B;
    --color-accent-dark: #2A8C82;
    --color-danger: #E0554A;
    --color-success: #43B37B;
    --color-auth-bg-start: #0E2438;
    --color-auth-bg-end: #16324F;
    --auth-line: rgba(53, 167, 155, .34);
    --auth-line-soft: rgba(53, 167, 155, .14);
}

    html[data-theme="dark"] .form-control,
    html[data-theme="dark"] .form-select {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    html[data-theme="dark"] .form-floating > label {
        color: var(--color-text-muted);
    }

    html[data-theme="dark"] .form-check-input {
        background-color: var(--color-surface);
        border-color: var(--color-border);
    }

    html[data-theme="dark"] .form-floating > .form-control:focus ~ label,
    html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label {
        color: var(--color-text-muted);
    }

        html[data-theme="dark"] .form-floating > .form-control:focus ~ label::after,
        html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
            background-color: var(--color-surface);
        }

/* =====================================================================
   App Shell — منوی کناری، نوار بالا، محتوا

   منو دو حالت دارد و هر دو در همین فایل تعریف شده‌اند:
     باز    ــ ۲۴۰ پیکسل، آیکن + متن + زیرمنو
     جمع    ــ ۶۴ پیکسل، فقط آیکن با تولتیپ (حالت «ریل»)

   حالت جمع با html[data-sidebar="collapsed"] کنترل می‌شود که theme.js
   ست می‌کند و قبل از رسم صفحه در _Layout اعمال می‌شود، پس پرش ندارد.
   ===================================================================== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    --sidebar-width: 240px;
    --sidebar-rail: 64px;

    width: var(--sidebar-width);
    flex-shrink: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 14px 0 10px;
    white-space: nowrap;

    /* شیب ملایم به‌جای رنگ تخت: لبه‌ی پایین منو کمی تیره‌تر می‌شود و
       ستون از یک مستطیل بی‌جان درمی‌آید. */
    background-color: var(--color-primary);
    background-image: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 42%, #10263C 100%);

    /* سایه سمت چپ (سمت محتوا در RTL) — همان چیزی که «عمق» می‌سازد */
    box-shadow: -1px 0 0 rgba(0,0,0,.18), -8px 0 24px -18px rgba(0,0,0,.55);
    z-index: 3;

    transition: width .18s ease;
}

html[data-sidebar="collapsed"] .app-sidebar {
    width: var(--sidebar-rail);

    /* تولتیپ باید از منو بیرون بزند. در حالت ریل حداکثر ۷ آیتم داریم،
       پس اسکرول لازم نیست و overflow می‌تواند visible بماند. */
    overflow: visible;
}

.sidebar-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    line-height: 0;
    padding: 7px 9px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

    .sidebar-toggle svg {
        width: 17px;
        height: 17px;
    }

    .sidebar-toggle:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

/* ===== برند =====

   در حالت باز، همان چیدمان دو خطی همیشگی: نام شرکت روی خط اول، نام
   دیتابیس زیرش. نشان مربعی عمداً اینجا دیده نمی‌شود و فقط در حالت ریل
   بالا می‌آید — وگرنه نام شرکت را کنار خودش فشرده می‌کرد و کل برند به
   نظر یک خط می‌آمد. */
.app-sidebar .brand {
    padding: 0 20px 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}

.brand-mark {
    display: none;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.brand-text {
    display: block;
    min-width: 0;
    line-height: 1.4;
}

.brand-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-db {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,.75);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== ناحیه‌ی پیمایش ===== */
.app-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;

    /* نوار اسکرول باریک و کم‌رنگ؛ روی زمینه‌ی تیره نوار پیش‌فرض ویندوز
       مثل یک خط سفید توی چشم می‌زند. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

    .app-nav::-webkit-scrollbar {
        width: 6px;
    }

    .app-nav::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,.20);
        border-radius: 3px;
    }

    .app-nav::-webkit-scrollbar-track {
        background: transparent;
    }

/* ===== آیتم‌های منو ===== */
.app-sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: calc(100% - 16px);
    color: rgba(255,255,255,.78);
    padding: 9px 14px;
    margin: 1px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    text-align: start;
    background: transparent;
    border: 0;
    transition: background-color .13s ease, color .13s ease;
}

    .app-sidebar .nav-link:hover,
    .app-sidebar .nav-link:focus-visible {
        background-color: rgba(255,255,255,.07);
        color: #fff;
    }

    .app-sidebar .nav-link:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: -2px;
    }

.nav-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    line-height: 0;
    opacity: .82;
}

    .nav-icon svg {
        width: 18px;
        height: 18px;
    }

.nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-caret {
    flex: 0 0 12px;
    line-height: 0;
    opacity: .5;
    transition: transform .16s ease;
}

    .nav-caret svg {
        width: 12px;
        height: 12px;
    }

/* پیکان در حالت باز رو به پایین می‌چرخد — aria-expanded را خود بوت‌استرپ
   ست می‌کند، پس هیچ جاوااسکریپتی برای این لازم نیست. */
.nav-group[aria-expanded="true"] .nav-caret {
    transform: rotate(-90deg);
}

/* ===== حالت فعال ===== */
.app-sidebar .nav-link.active {
    background-color: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 600;
}

    /* نوار سبزآبی چسبیده به لبه‌ی راست منو، نه به خود آیتم */
    .app-sidebar .nav-link.active::before {
        content: "";
        position: absolute;
        right: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 20px;
        border-radius: 3px 0 0 3px;
        background-color: var(--color-accent);
    }

    .app-sidebar .nav-link.active .nav-icon {
        opacity: 1;
        color: var(--color-accent);
    }

/* گروهی که صفحه‌ی جاری داخلش است: روشن ولی نه به پررنگی خودِ آیتم */
.app-sidebar .nav-group.active-parent {
    color: #fff;
}

    .app-sidebar .nav-group.active-parent .nav-icon {
        opacity: 1;
        color: var(--color-accent);
    }

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .app-topbar h1 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

.app-content {
    padding: 24px;
    flex: 1;
}

.card-panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
}

/* ===== User menu ===== */
.user-menu-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .user-menu-btn:hover {
        border-color: var(--color-accent);
    }

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--color-text);
}

    html[data-theme="dark"] .dropdown-item:hover {
        background-color: rgba(255,255,255,0.06);
        color: #fff;
    }


/* =====================================================================
   زیرمنوها
   ===================================================================== */

/* بدنه‌ی گروه: یک خط عمودی نازک زیر آیکن گروه، تا چشم بفهمد این‌ها
   بچه‌های همان آیتم بالایی‌اند. خط از سمت راست می‌آید چون چیدمان RTL است. */
.nav-group-body {
    position: relative;
    margin: 2px 8px 6px;
}

    .nav-group-body::before {
        content: "";
        position: absolute;
        top: 4px;
        bottom: 4px;
        right: 22px;
        width: 1px;
        background-color: rgba(255,255,255,.13);
    }

/* عنوان بخش، با خط افقی که از کنارش تا انتهای منو کشیده می‌شود.

   خط عمداً کنار عنوان است نه زیرش: خطِ زیر عنوان، عنوان را به بخش بالایی
   می‌چسباند و کاربر فکر می‌کند «خزانه‌داری» آخرین قلم بخش حساب‌هاست. با
   این شکل، عنوان و خط با هم یک جداکننده‌اند و هرچه زیرشان بیاید مال
   خودشان است. */
.nav-sub-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--color-accent-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 14px 38px 5px 14px;
}

    .nav-sub-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: rgba(255,255,255,.16);
    }

.app-sidebar .nav-sub-link {
    padding: 6px 38px 6px 12px;
    margin: 0;
    width: 100%;
    font-size: 13px;
    color: rgba(255,255,255,.66);
    border-radius: 7px;

    /* منوی کناری nowrap است؛ عنوان بلند زیرمنو (به‌ویژه ترجمه‌های عربی و کردی)
       به‌جای بریده شدن در سطر دوم ادامه پیدا می‌کند. */
    white-space: normal;
    line-height: 1.55;
}

    /* نقطه‌ی کوچک روی خط راهنما — به‌جای آیکن، که در این عمق شلوغ می‌شد */
    .app-sidebar .nav-sub-link::after {
        content: "";
        position: absolute;
        right: 19px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: rgba(255,255,255,.28);
        transition: background-color .13s ease, box-shadow .13s ease;
    }

    .app-sidebar .nav-sub-link:hover::after {
        background-color: rgba(255,255,255,.55);
    }

    .app-sidebar .nav-sub-link.active {
        font-weight: 600;
    }

        .app-sidebar .nav-sub-link.active::after {
            background-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(42,140,130,.22);
        }

        /* نوار کناری فقط برای آیتم‌های سطح اول است؛ در زیرمنو نقطه کافی است */
        .app-sidebar .nav-sub-link.active::before {
            display: none;
        }

/* =====================================================================
   گروه «اطلاعات پایه» — متمایز از بقیه‌ی منو
   =====================================================================

   این گروه جای تعریف‌هاست، نه کار روزمره؛ پس عمداً از بقیه جدا دیده
   می‌شود: یک نوار رنگی کنارش، پس‌زمینه‌ی کم‌رنگ برای بدنه، و برچسب‌های
   بخش‌هایش پررنگ‌تر. رنگ همان رنگ لهجه‌ی برنامه است تا تم تازه‌ای وارد
   منو نشود. */
.app-sidebar .nav-group-primary {
    border-right: 3px solid var(--color-accent);
    padding-right: 11px;
}

    .app-sidebar .nav-group-primary .nav-icon {
        color: var(--color-accent-soft);
    }

.nav-group-body-primary {
    background-color: rgba(42,140,130,.10);
    border-radius: 9px;
    padding: 2px 0 4px;
}

    .nav-group-body-primary::before {
        background-color: rgba(42,140,130,.38);
    }

    .nav-group-body-primary .nav-sub-label {
        color: var(--color-accent);
        font-weight: 700;
    }

        .nav-group-body-primary .nav-sub-label::after {
            background-color: rgba(42,140,130,.32);
        }

    .nav-group-body-primary .nav-sub-link::after {
        background-color: rgba(42,140,130,.55);
    }

/* ===== بخش‌های داخل «اطلاعات پایه» =====
   حساب‌ها، خزانه‌داری، انبار، … هر کدام سرتیتری دارند که با کلیک باز و بسته
   می‌شود و هر بار فقط یکی باز است. ظاهرشان همان برچسب بخشِ قبلی است، با
   پیکانی که در حالت باز می‌چرخد. */
.nav-subgroup {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 7px;
    color: var(--color-accent);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: right;
    padding: 9px 38px 7px 14px;
    cursor: pointer;
    transition: background-color .13s ease, color .13s ease;
}

    .nav-subgroup:hover,
    .nav-subgroup:focus-visible {
        background-color: rgba(255,255,255,.06);
        color: #fff;
        outline: none;
    }

    .nav-subgroup .nav-subgroup-text {
        flex: 1;
    }

    .nav-subgroup[aria-expanded="true"] {
        color: #fff;
    }

        .nav-subgroup[aria-expanded="true"] .nav-caret {
            transform: rotate(-90deg);
        }

    /* بخشی که صفحه‌ی جاری در آن است */
    .nav-subgroup.active-parent {
        color: #fff;
    }

.nav-subgroup-body {
    padding-bottom: 4px;
}

/* در منوی جمع‌شده جایی برای نوار کناری نیست */
html[data-sidebar="collapsed"] .app-sidebar .nav-group-primary {
    border-right: 0;
    padding-right: 0;
}

/* =====================================================================
   میان‌برهای داشبورد
   =====================================================================

   دکمه‌های میان‌بر داشبورد به‌جای دو ردیف دکمه‌ی ساده، کارت‌های هم‌اندازه
   با آیکن‌اند: در یک نگاه پیدا می‌شوند و در موبایل هم مرتب می‌مانند. */
.dash-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.dash-shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background-color: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

    .dash-shortcut:hover {
        border-color: var(--color-accent);
        box-shadow: 0 2px 10px rgba(0,0,0,.07);
        transform: translateY(-1px);
        color: var(--color-text);
    }

    .dash-shortcut .dash-shortcut-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 9px;
        background-color: rgba(42,140,130,.12);
        color: var(--color-accent);
    }

        .dash-shortcut .dash-shortcut-icon svg {
            width: 18px;
            height: 18px;
        }

    .dash-shortcut .dash-shortcut-text {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
    }

/* میان‌بر اصلی (ثبت سند جدید) کمی پررنگ‌تر از بقیه */
.dash-shortcut.dash-shortcut-main {
    border-color: var(--color-accent);
}

    .dash-shortcut.dash-shortcut-main .dash-shortcut-icon {
        background-color: var(--color-accent);
        color: #fff;
    }

/* =====================================================================
   حالت ریل — منوی جمع‌شده
   ===================================================================== */
html[data-sidebar="collapsed"] .app-sidebar .nav-text,
html[data-sidebar="collapsed"] .app-sidebar .nav-caret,
html[data-sidebar="collapsed"] .app-sidebar .brand-text,
html[data-sidebar="collapsed"] .app-sidebar .nav-sub-label {
    display: none;
}

/* زیرمنوها در حالت ریل جایی برای نمایش ندارند. کلاس‌های collapse بوت‌استرپ
   !important دارند، پس اینجا هم لازم است وگرنه بی‌اثر می‌ماند. */
html[data-sidebar="collapsed"] .nav-group-body {
    display: none !important;
}

/* ناحیه‌ی پیمایش هم باید overflow را باز کند، وگرنه تولتیپ همان‌جا بریده
   می‌شود و اثری از آن دیده نمی‌شود — منو خودش visible باشد کافی نیست. */
html[data-sidebar="collapsed"] .app-nav {
    overflow: visible;
}

/* در حالت ریل جایی برای نام شرکت نیست، پس نشان مربعی جایش را می‌گیرد */
html[data-sidebar="collapsed"] .app-sidebar .brand {
    display: flex;
    justify-content: center;
    padding: 0 0 14px;
}

html[data-sidebar="collapsed"] .brand-mark {
    display: flex;
}

html[data-sidebar="collapsed"] .app-sidebar .nav-link {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

html[data-sidebar="collapsed"] .app-sidebar .nav-link.active::before {
    right: -8px;
}

/* تولتیپ: متن از data-title می‌آید که در _Layout روی هر آیتم سطح اول
   نشسته. با CSS خالص است تا وابسته به کتابخانه‌ی Tooltip بوت‌استرپ نشود
   و در صفحه‌های سنگین هم بدون هزینه کار کند.

   منو سمت راست صفحه است، پس تولتیپ باید سمت چپش (به‌طرف محتوا) باز شود:
   right: 100% لبه‌ی راست تولتیپ را روی لبه‌ی چپ آیتم می‌گذارد. */
html[data-sidebar="collapsed"] .app-nav > .nav-link[data-title]:hover::after,
html[data-sidebar="collapsed"] .app-nav > .nav-link[data-title]:focus-visible::after {
    content: attr(data-title);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #10263C;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.32);
    pointer-events: none;
    z-index: 20;
}

/* تولتیپ نباید با نوار سبزآبیِ آیتم فعال قاطی شود */
html[data-sidebar="collapsed"] .app-nav > .nav-link[data-title]:hover::before {
    z-index: 1;
}

/* =====================================================================
   نمایش در عرض کم — روی نمایشگر باریک منوی باز جا را تنگ می‌کند
   ===================================================================== */
@media (max-width: 991.98px) {
    .app-sidebar {
        --sidebar-width: 210px;
    }

    .app-content {
        padding: 16px;
    }

    .app-topbar {
        padding: 12px 16px;
    }
}
/* ===== Fix: Bootstrap component colors in dark theme ===== */
html[data-theme="dark"] {
    --bs-body-color: var(--color-text);
    --bs-emphasis-color: var(--color-text);
    --bs-border-color: var(--color-border);
}

    html[data-theme="dark"] .table {
        --bs-table-color: var(--color-text);
        --bs-table-bg: var(--color-surface);
        --bs-table-border-color: var(--color-border);
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

        html[data-theme="dark"] .table > :not(caption) > * > * {
            color: var(--color-text) !important;
            border-bottom-color: var(--color-border) !important;
            background-color: transparent;
        }


/* ===== About dialog rows ===== */
.about-row {
    background: linear-gradient(135deg, #E4F3F1 0%, #D3EAE7 100%);
    color: var(--color-primary);
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
}

.about-row-title {
    font-size: 16px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #fff;
}

html[data-theme="dark"] .about-row {
    background: linear-gradient(135deg, #1E3A38 0%, #16302D 100%);
    color: var(--color-text);
}

html[data-theme="dark"] .about-row-title {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #fff;
}

/* صفحه‌ی «درباره» هم داخل قالب برنامه باز می‌شود و هم — بدون ورود — داخل
   قالب عمومی؛ پس این دو کلاس اینجا (site.css) تعریف شده‌اند نه در auth.css
   که فقط صفحه‌های احراز هویت بارگذاری‌اش می‌کنند. */
.about-card {
    max-width: 500px;
    margin: auto;
}

.about-row-bad {
    background: none;
    color: var(--color-danger);
    font-weight: 700;
}

/* ===== دکمه‌ی تاکیدی =====
   btn-accent کلاس بوت‌استرپ نیست و باید همین‌جا تعریف شود؛ بدون این تعریف
   فقط یک .btn خالی می‌ماند که رنگ متنش از بوت‌استرپ می‌آید و در تم تاریک
   روی زمینه‌ی تیره دیده نمی‌شود. */
.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

    .btn-accent:hover,
    .btn-accent:focus,
    .btn-accent:active,
    .btn-accent.active {
        background-color: var(--color-accent-dark);
        border-color: var(--color-accent-dark);
        color: #fff;
    }

    .btn-accent:focus-visible {
        box-shadow: 0 0 0 .2rem rgba(42, 140, 130, .35);
    }

    .btn-accent:disabled,
    .btn-accent.disabled {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        color: #fff;
        opacity: .5;
    }

/* دکمه‌های خنثی در تم تاریک: رنگ متن بوت‌استرپ برای زمینه‌ی روشن است */
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--color-text);
    border-color: var(--color-border);
}

    html[data-theme="dark"] .btn-outline-secondary:hover {
        background-color: var(--color-border);
        border-color: var(--color-border);
        color: var(--color-text);
    }

/* ===== انتخاب تم داخل منوی کاربر ===== */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-accent);
    color: #fff;
}

/* گزینه‌ی فعال با یک تیک هم مشخص می‌شود، نه فقط با رنگ */
.dropdown-item[data-theme-option]::after {
    content: '';
    float: left;
    opacity: .9;
}

.dropdown-item[data-theme-option].active::after {
    content: '✓';
}

html[data-theme="dark"] .dropdown-header {
    color: var(--color-text-muted);
}

/* ===== ستون‌های عددی =====
   عدد با dir=ltr نوشته می‌شود تا رقم‌ها و کاماها درست بچینند، ولی
   راست‌چین است تا یکان‌ها زیر هم بیفتند. tabular-nums هم عرض همه‌ی
   رقم‌ها را یکی می‌کند تا ستون‌ها تکان نخورند. */
.num,
.num-head {
    direction: ltr;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

/* ===== رنگ اعداد بدهکار و بستانکار =====
   تم روشن: قرمز و سبز بسیار تیره (نزدیک به سیاه) تا روی زمینه‌ی سفید
   خوانا و آرام بمانند. تم تاریک: قرمز و سبز بسیار روشن (نزدیک به سفید). */
:root {
    --amt-debit: #5C1010;
    --amt-credit: #0D3F1F;
}

html[data-theme="dark"] {
    --amt-debit: #FFD2D2;
    --amt-credit: #CFF5DC;
}

/* انتخابگر بلندتر لازم است: بوت‌استرپ رنگ سلول‌های جدول را با
   .table > :not(caption) > * > * می‌گذارد که از یک کلاس تنها قوی‌تر است. */
.amt-debit,
.table > :not(caption) > * > .amt-debit {
    color: var(--amt-debit);
}

.amt-credit,
.table > :not(caption) > * > .amt-credit {
    color: var(--amt-credit);
}

/* خانه‌های مبلغ در فرم سند؛ بوت‌استرپ هنگام فوکوس رنگ متن را برمی‌گرداند */
.form-control.amt-debit,
.form-control.amt-debit:focus {
    color: var(--amt-debit);
}

.form-control.amt-credit,
.form-control.amt-credit:focus {
    color: var(--amt-credit);
}

/* تم تاریک رنگ همه‌ی سلول‌های جدول را با !important روی رنگ متن
   می‌گذارد (بخش «جدول در تم تاریک» بالاتر)؛ اینجا باید هم !important
   داشته باشد و هم انتخابگر قوی‌تر، وگرنه رنگ‌ها در تم تاریک دیده نمی‌شوند. */
html[data-theme="dark"] .table > :not(caption) > * > .amt-debit,
html[data-theme="dark"] .amt-debit {
    color: var(--amt-debit) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > .amt-credit,
html[data-theme="dark"] .amt-credit {
    color: var(--amt-credit) !important;
}

/* مسیر پیشرفت مرور حساب‌ها */
.acc-path a {
    color: var(--color-accent);
}

    .acc-path a:hover {
        text-decoration: underline;
    }

/* ===== ستون کلیدهای مرور حساب‌ها ===== */
.review-levels {
    flex: 0 0 auto;
    width: 165px;
}

    .review-levels .dropdown,
    .review-levels .btn {
        width: 100%;
    }

    /* منوی نوع تفصیلی نباید زیر جدول برود */
    .review-levels .dropdown-menu {
        z-index: 1080;
    }

/* ===== دکمه‌های آیکنی لیست‌ها ===== */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .45rem;
    line-height: 1;
}

    .btn-icon svg {
        width: 16px;
        height: 16px;
        display: block;
    }

/* ===== پنجره‌های مودال در تم تاریک ===== */
html[data-theme="dark"] .modal-content {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-footer {
        border-color: var(--color-border);
    }

/* آیکن ضربدرِ بستن، تصویر تیره است و روی زمینه‌ی تیره دیده نمی‌شود */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ===== Fix: pagination colors in dark theme ===== */
html[data-theme="dark"] .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* ===== Detail dimension checkboxes ===== */
.dimension-groups {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dimension-card {
    flex: 1;
    min-width: 160px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dimension-card-header {
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
}

.dimension-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}

    .dimension-item:last-child {
        border-bottom: none;
    }

    .dimension-item:hover {
        background-color: var(--color-surface);
    }

    .dimension-item .form-check-input {
        margin: 0;
        cursor: pointer;
    }

    .dimension-item label {
        cursor: pointer;
        margin: 0;
    }

/* ===================== کاربران و دسترسی‌ها ===================== */

.user-box-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text);
}

.user-password-box,
.user-access-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px 16px;
}

    .user-password-box legend {
        float: none;
        width: auto;
        padding: 0 6px;
        margin-bottom: 4px;
        font-size: 15px;
    }

/* ماتریس */
.access-matrix-wrap {
    min-width: 0;
    transition: opacity .15s ease;
}

    .access-matrix-wrap.is-disabled,
    .access-matrix-wrap:disabled {
        opacity: .45;
    }

.access-matrix th,
.access-matrix td {
    vertical-align: middle;
}

.access-matrix thead th {
    font-weight: 600;
    font-size: 13px;
    border-bottom-width: 2px;
}

.access-matrix .access-op-head {
    width: 104px;
}

.access-matrix .access-group-row th {
    background-color: var(--color-bg);
    color: var(--color-accent-dark);
    font-size: 13px;
    font-weight: 600;
    padding-top: 10px;
}

.access-section-title {
    font-weight: 500;
}

.access-section-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.access-matrix .access-cb {
    width: 1.15em;
    height: 1.15em;
    cursor: pointer;
    margin: 0;
}

    .access-matrix .access-cb:checked {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }

.access-na {
    color: var(--color-border);
    user-select: none;
}

/* سرستون و «همه»ی ردیف: شکل لینک کوچک، نه دکمه‌ی توپُر */
.access-col-btn,
.access-row-btn {
    background: none;
    border: 0;
    padding: 2px 4px;
    color: inherit;
    font: inherit;
    border-bottom: 1px dotted currentColor;
    cursor: pointer;
}

.access-row-btn {
    font-size: 12px;
    color: var(--color-text-muted);
}

    .access-col-btn:hover,
    .access-row-btn:hover {
        color: var(--color-accent);
    }

    .access-col-btn:disabled,
    .access-row-btn:disabled {
        cursor: default;
        border-bottom-color: transparent;
    }

/* خلاصه‌ی دسترسی در لیست کاربران */
.access-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    white-space: nowrap;
}

.access-pill-admin {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.access-pill-none {
    color: var(--color-text-muted);
    border-style: dashed;
}

.user-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

    .user-state::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: currentColor;
    }

.user-state-on {
    color: var(--color-success);
}

.user-state-off {
    color: var(--color-text-muted);
}

/* فرمی که کاربر فقط اجازه‌ی دیدنش را دارد (PermissionLinkTagHelper → inert) */
form.perm-readonly {
    opacity: .75;
}

    form.perm-readonly [type="submit"] {
        display: none;
    }

html[data-theme="dark"] .access-pill-admin {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

/* رنگ سلول‌های جدول در تم تاریک با !important قفل شده (بخش Fix بالاتر) */
html[data-theme="dark"] .access-matrix .access-group-row th {
    color: var(--color-accent-soft) !important;
    background-color: rgba(255, 255, 255, .035);
}

/* سوییچ‌ها و تیک‌های فرم کاربر و تغییر رمز به رنگ تأکیدی برنامه، نه آبی بوت‌استرپ */
.user-form .form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.user-form .form-check-input:focus {
    border-color: var(--color-accent-soft);
    box-shadow: 0 0 0 .2rem rgba(42, 140, 130, .2);
}