/* ================================================================
   OTC Brokerage System — Design System
   واحد پول: تومان | زبان: فارسی | جهت: RTL
   ================================================================ */

/* ─── Variables ──────────────────────────────────────────────── */
:root {
    --font: 'Vazirmatn', system-ui, sans-serif;

    /* رنگ‌های اصلی */
    --primary:       #1B4F8A;
    --primary-hover: #153D6B;
    --primary-light: #EBF2FB;

    /* سطح‌ها */
    --bg:         #F4F6F9;
    --surface:    #FFFFFF;
    --surface-2:  #F8FAFC;

    /* متن */
    --text:       #1A1D23;
    --text-muted: #6B7280;
    --text-light: #9CA3AF;

    /* حاشیه */
    --border:      #E5E7EB;
    --border-focus: #1B4F8A;

    /* وضعیت‌ها */
    --success:      #0D7A4E;
    --success-bg:   #ECFDF5;
    --error:        #C0392B;
    --error-bg:     #FEF2F2;
    --warning:      #92540A;
    --warning-bg:   #FFFBEB;
    --info:         #1B4F8A;
    --info-bg:      #EBF2FB;

    /* Sidebar */
    --sidebar-w:    240px;
    --sidebar-bg:   #0F2744;
    --sidebar-text: #B8C7DC;
    --sidebar-hover:#1B4F8A;
    --sidebar-active:#2563EB;

    /* Layout */
    --topbar-h:  56px;
    --radius:    8px;
    --radius-lg: 12px;

    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);

    /* ── Phase 20-B: Design tokens ─────────────────────────────── */

    /* مقیاس فاصله (۴px پایه) — جایگزین تدریجی مقادیر inline در فازهای بعد */
    --space-1: .25rem;   /* 4px  */
    --space-2: .5rem;    /* 8px  */
    --space-3: .75rem;   /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */

    /* رنگ‌های معنایی مالی — فقط نمایشی، بدون منطق تبدیل */
    --credit:    #0D7A4E;  /* افزایش موجودی / بستانکار (هم‌راستا با success) */
    --debit:     #C0392B;  /* کاهش موجودی / بدهکار (هم‌راستا با error) */
    --reserved:  #92540A;  /* مبلغ رزروشده (کهربایی) */
    --available: #1B4F8A;  /* موجودی قابل استفاده (آبی primary) */

    /* وضعیت «نیازمند رسیدگی» (Unknown/نامشخص) — متمایز از warning عادی */
    --attention:    #7C3AED;
    --attention-bg: #F5F3FF;

    /* حلقهٔ فوکوس مشترک */
    --focus-ring: 0 0 0 3px rgba(27,79,138,.30);
}

/* ─── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    direction: rtl;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Layout: Sidebar + Main ─────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    /* ⚠️ اسکرول از کلِ سایدبار به خودِ فهرست منتقل شد (۲۰۲۶-۰۹-۲۲).
       پیش از این کل سایدبار اسکرول می‌شد، پس نوار اسکرول تمامِ ۱۰۰vh را می‌گرفت و
       لوگو و کاربرِ پایین هم با فهرست بالا می‌رفتند. حالا سر و ته ثابت‌اند و فقط
       فهرست می‌لغزد — نوار اسکرول هم فقط به‌اندازهٔ همان فهرست است. */
    overflow: hidden;
    z-index: 100;
    transition: transform .25s ease;
}

.main-wrapper {
    margin-right: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Sidebar Header ─────────────────────────────────────────── */
.sidebar-header {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.sidebar-logo-icon {
    font-size: 1.5rem;
    color: #4B9FE1;
}

.sidebar-logo-text {
    font-size: .9375rem;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: .01em;
}

/* ─── Sidebar Nav ────────────────────────────────────────────── */
.sidebar-nav {
    flex: 1;
    padding: .75rem 0;

    /* min-height: 0 برای اسکرول داخل یک فرزند flex اجباری است؛ بدون آن، آیتم flex
       کوچک‌تر از محتوایش نمی‌شود و overflow اصلاً فعال نمی‌گردد. */
    min-height: 0;
    overflow-y: auto;

    /* ⚠️ نوار اسکرول پیش‌فرض مرورگر روی پس‌زمینهٔ تیرهٔ سایدبار، یک نوار روشن و پهن است
       که شبیه خط جداکننده دیده می‌شود — نه شبیه اسکرول. باریک و کم‌کنتراست می‌شود تا
       با سایدبار یکی شود. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;

    /* جا برای نوار همیشه رزرو می‌شود تا با ظاهر/ناپدید شدنش، آیتم‌های منو جابه‌جا نشوند. */
    scrollbar-gutter: stable;
}

/* همان ظاهر برای موتورهای WebKit/Blink که هنوز scrollbar-width را کامل پیاده نکرده‌اند. */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.38); }

.nav-group {
    margin-bottom: .5rem;
}

.nav-group-label {
    padding: .5rem 1rem .25rem;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--sidebar-text);
    opacity: .6;
    /* بدون text-transform/letter-spacing: برای متن فارسی بی‌اثر/مضر است (Phase 20-B) */
}

.nav-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 1rem;
    color: var(--sidebar-text);
    font-size: .875rem;
    border-radius: 0;
    transition: background .15s, color .15s;
    text-decoration: none;
    cursor: pointer;
}

.nav-item:hover {
    background: rgba(255,255,255,.06);
    color: #FFFFFF;
    text-decoration: none;
}

.nav-item.active {
    background: var(--sidebar-active);
    color: #FFFFFF;
}

.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .85;
    display: inline-block;
    vertical-align: middle;
}

/* ─── Sidebar Footer ─────────────────────────────────────────── */
.sidebar-footer {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sidebar-active);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-user-name {
    font-size: .8125rem;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: .6875rem;
    color: var(--sidebar-text);
    opacity: .7;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: .25rem;
    font-size: 1rem;
    border-radius: 4px;
    transition: color .15s;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.btn-icon:hover { color: #FFFFFF; }

/* ─── Topbar ─────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.topbar-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: .25rem;
    border-radius: var(--radius);
    transition: background .15s;
    align-items: center;
}

.topbar-menu-btn:hover { background: var(--bg); }

.topbar-breadcrumb {
    flex: 1;
    font-size: .875rem;
    color: var(--text-muted);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topbar-date {
    font-size: .8125rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: .25rem .625rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    white-space: nowrap;
}

.topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
    cursor: default;
    flex-shrink: 0;
}

/* ─── Content ────────────────────────────────────────────────── */
.content {
    flex: 1;
    padding: 1.5rem;
    max-width: 1200px;
    width: 100%;
}

/* ─── Page Header ────────────────────────────────────────────── */
.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem;
}

.page-subtitle {
    font-size: .875rem;
    color: var(--text-muted);
}

/* ─── Stats Grid ─────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
}

.stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .875rem;
}

.stat-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-primary   { background: var(--primary-light); color: var(--primary); }
.stat-icon-success   { background: var(--success-bg);    color: var(--success); }
.stat-icon-error     { background: var(--error-bg);      color: var(--error); }
.stat-icon-warning   { background: var(--warning-bg);    color: var(--warning); }
.stat-icon-info      { background: var(--info-bg);       color: var(--info); }
.stat-icon-attention { background: var(--attention-bg);  color: var(--attention); }

.stat-trend {
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 20px;
}

.stat-trend-up      { background: var(--success-bg); color: var(--success); }
.stat-trend-down    { background: var(--error-bg);   color: var(--error); }
.stat-trend-neutral { background: var(--bg);         color: var(--text-light); }

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: .25rem;
}

.stat-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: .125rem;
}

.stat-hint {
    font-size: .75rem;
    color: var(--text-light);
}

/* جمع مبلغ کارت آمار — فقط کارت‌های «در انتظار» دارند. عمداً از .stat-value کوچک‌تر و
   کم‌رنگ‌تر است: تعداد همچنان تیتر کارت است و مبلغ توضیح آن، نه رقیبش. */
.stat-amount {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--border);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
}

/* ─── Dashboard Grid ─────────────────────────────────────────── */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    align-items: start;
}

/* ─── Card ───────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
}

.card-body { padding: 1.25rem; }

/* ─── Empty State ────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1.25rem;
    color: var(--text-muted);
    text-align: center;
}

.empty-state p {
    font-size: .875rem;
    color: var(--text-light);
}

/* ─── Quick Actions ──────────────────────────────────────────── */
.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem;
}

.quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .875rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    font-size: .8125rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}

.quick-action-item:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    text-decoration: none;
}

.quick-action-icon {
    width: 40px;
    height: 40px;
    background: var(--bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: background .15s;
}

.quick-action-item:hover .quick-action-icon {
    background: var(--primary-light);
}

/* ─── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }

.form-group-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: .375rem;
}

.form-input {
    width: 100%;
    padding: .5625rem .875rem;
    font-family: var(--font);
    font-size: .9375rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    direction: rtl;
}

.form-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(27,79,138,.12);
}

.form-input::placeholder { color: var(--text-light); }

/*
 * ورودی‌هایی که با ‏`dir="ltr"`‎ علامت خورده‌اند واقعاً چپ‌به‌راست شوند.
 *
 * ⚠️ خودِ attribute کافی نیست: قاعدهٔ ‎.form-input‎ بالا صراحتاً ‏`direction: rtl`‎ می‌گذارد و
 * استایل‌شیت نویسنده بر attribute غلبه می‌کند. یعنی هر ورودی‌ای که در پنل ‏`dir="ltr"`‎ داشت —
 * کد ملی، شبا، موبایل، مبالغ، تاریخ جلالی — در عمل RTL رندر می‌شد.
 *
 * برای مقدارهای عددی تفاوتش دیده نمی‌شد (رقم‌ها خودشان چپ‌به‌راست رندر می‌شوند و فقط ترازشان
 * راست بود)، ولی رشته‌های لاتین مثل آدرس ترون و شناسهٔ تراکنش به لبهٔ راست می‌چسبیدند و همان
 * جایی بود که مشکل خودش را نشان داد.
 *
 * ‎.input-ltr‎ برای جاهایی می‌ماند که ورودی attribute ندارد ولی باید چپ‌چین باشد.
 */
.form-input[dir="ltr"],
.form-input.input-ltr {
    direction: ltr;
    text-align: left;
}

.form-error {
    display: block;
    font-size: .8125rem;
    color: var(--error);
    margin-top: .25rem;
}

.form-hint {
    display: block;
    font-size: .8125rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    cursor: pointer;
}

/* ─── Input with Icon ────────────────────────────────────────── */
.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    right: .8125rem;
    width: 16px;
    height: 16px;
    color: var(--text-light);
    pointer-events: none;
    flex-shrink: 0;
}

.form-input-icon {
    padding-right: 2.5rem;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5625rem 1.125rem;
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
    text-decoration: none;
}

.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
    background: var(--primary);
    color: #FFFFFF;
}
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; color: #fff; }

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg); }

.btn-danger {
    background: var(--error);
    color: #FFFFFF;
}
.btn-danger:hover { background: #9E2F22; color: #fff; text-decoration: none; }

/* Phase 20-D: تمایز بصری اکشن‌های مالی — موفق (سبز) و نیازمند رسیدگی (کهربایی) */
.btn-success {
    background: var(--success);
    color: #FFFFFF;
}
.btn-success:hover { background: #0A6340; color: #fff; text-decoration: none; }

.btn-warning {
    background: var(--warning);
    color: #FFFFFF;
}
.btn-warning:hover { background: #7A4608; color: #fff; text-decoration: none; }

.btn-full { width: 100%; }

.btn-sm {
    padding: .375rem .75rem;
    font-size: .8125rem;
}

.btn-login {
    height: 46px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--radius);
    margin-top: .25rem;
}

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    font-size: .875rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.alert-icon { flex-shrink: 0; font-weight: 600; }

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: #A7F3D0;
}

.alert-error {
    background: var(--error-bg);
    color: var(--error);
    border-color: #FECACA;
}

.alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: #FDE68A;
}

.alert-info {
    background: var(--info-bg);
    color: var(--info);
    border-color: #BFDBFE;
}

/* دکمهٔ بستن دستی — توسط site.js فقط به هشدار/خطا/اطلاع افزوده می‌شود (این‌ها auto-hide نمی‌شوند) */
.alert { position: relative; }
.alert-close {
    margin-inline-start: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: .6;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .25rem;
    flex-shrink: 0;
}
.alert-close:hover { opacity: 1; }

/* ─── Table ──────────────────────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

thead {
    background: var(--surface-2);
}

thead th {
    padding: .75rem 1rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    font-size: .8125rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* ستون «عملیات» چسبان. جدول‌های پهن در table-wrapper اسکرول افقی می‌خورند و در RTL ستون آخر
   ته سمت چپ است؛ بی این، کاربر باید تا پایین صفحه برود تا به نوار اسکرول افقی برسد، به چپ
   بکشد و دوباره بالا بیاید — برای هر ردیف. inset-inline-end در RTL یعنی لبهٔ چپ جعبهٔ اسکرول.
   پس‌زمینه لازم است وگرنه ستون‌های زیرش از پشت دیده می‌شوند؛ مرز با سایه است نه border چون
   با border-collapse مرزِ سلول چسبان همراهش جابه‌جا نمی‌شود. */
.table-wrapper th.col-actions,
.table-wrapper td.col-actions {
    position: sticky;
    inset-inline-end: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: 6px 0 8px -6px rgba(15, 23, 42, .18);
}
.table-wrapper thead th.col-actions { background: var(--surface-2); }
.table-wrapper tbody tr:hover td.col-actions { background: var(--surface-2); }

/* ─── Badges ─────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .5rem;
    font-size: .75rem;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-error   { background: var(--error-bg);   color: var(--error); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-neutral { background: var(--bg);         color: var(--text-muted); }

/* ⚠️ نشان «همین یکی در حال استفاده است» — عمداً توپُر، نه تهِ‌رنگ.

   badge-success یک تهِ‌رنگ بسیار روشن است (#ECFDF5) و کنار badge-neutral (#F4F6F9)
   در یک جدول عملاً هم‌شکل دیده می‌شود. برای صفحه‌ای که تعیین می‌کند پول کارگزار به کدام
   آدرس می‌رود، «کدام ردیف زنده است» باید از یک متر فاصله هم معلوم باشد.

   پس این یکی پس‌زمینهٔ کامل می‌گیرد و بقیه تهِ‌رنگ می‌مانند — تضاد از شدت می‌آید نه از
   اختلاف جزئی رنگ. */
.badge-live {
    background: var(--success);
    color: #fff;
    font-weight: 700;
}

/* وضعیت نیازمند رسیدگی (نامشخص/Unknown) — عمداً از warning متمایز است */
.badge-attention {
    background: var(--attention-bg);
    color: var(--attention);
    font-weight: 600;
}

/* ─── Financial Amount (Phase 20-B foundation) ───────────────── */
/* الگوی واحد نمایش مبلغ مالی. ارقام لاتین + tabular برای تشخیص آسان اشتباه ۱۰ برابری. */
.amount {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    font-weight: 600;
}

.amount-lg { font-size: 1.25rem;  font-weight: 700; }
.amount-xl { font-size: 1.75rem;  font-weight: 800; line-height: 1.2; }

/* واحد پول (تومان/ریال) کم‌رنگ‌تر و کوچک‌تر از خود عدد */
.amount-unit {
    font-size: .8em;
    font-weight: 500;
    color: var(--text-muted);
    margin-inline-start: .25rem;
}

/* خط ثانویهٔ معادل ریال — خاکستری و کوچک، زیر مبلغ اصلی */
.amount-secondary {
    display: block;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: .125rem;
}

/* رنگ جهت جریان پول — فقط نمایشی */
.amount-credit { color: var(--credit); }
.amount-debit  { color: var(--debit); }

/* جعبهٔ برجستهٔ «مبلغ نهاییِ اثرگذار» برای صفحات تأیید/پیش‌نمایش (Phase 20-D) */
.amount-callout {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .875rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}
.amount-callout-label { font-size: .8125rem; color: var(--text-muted); }
.amount-callout-primary { background: var(--primary-light); border-color: #BFDBFE; }
.amount-callout-danger  { background: var(--error-bg);      border-color: #FECACA; }
.amount-callout-success { background: var(--success-bg);    border-color: #A7F3D0; }

/* ─── JSON / Code block (Phase 20-C) ─────────────────────────── */
/* نمایش یکنواخت payload/JSON: LTR، بسته‌شدن خط طولانی، اسکرول، دکمهٔ کپی */
.json-block-wrap { margin-bottom: .75rem; }

.json-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.json-block-label {
    font-size: .8125rem;
    color: var(--text-muted);
}

.json-block {
    direction: ltr;
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .75rem;
    border-radius: var(--radius);
    overflow: auto;
    max-height: 360px;
    font-size: .8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    margin: 0;
}

/* ─── Notice Box ─────────────────────────────────────────────── */
.notice-box {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 1.25rem;
    background: var(--info-bg);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-lg);
    font-size: .875rem;
    color: #1E3A5F;
}

.notice-icon {
    font-size: 1.25rem;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: .1rem;
}

/* ─── Login Page — Split Layout ──────────────────────────────── */
.login-body {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    padding: 0;
}

.login-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
    flex-direction: row-reverse; /* RTL: form side (right) first */
}

.login-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--surface);
}

.login-form-inner {
    width: 100%;
    max-width: 380px;
}

.login-brand-mobile {
    display: none;
    align-items: center;
    gap: .625rem;
    margin-bottom: 2rem;
}

.login-brand-name-mobile {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.login-heading {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .375rem;
}

.login-subheading {
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.login-footer-note {
    margin-top: 1.75rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--text-light);
}

/* Brand side — dark navy panel */
.login-brand-side {
    width: 420px;
    flex-shrink: 0;
    background: linear-gradient(160deg, #0F2744 0%, #1B4F8A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
}

.login-brand-content {
    color: #FFFFFF;
    max-width: 320px;
}

.login-brand-logo {
    margin-bottom: 2rem;
}

.login-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.login-brand-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: .75rem;
    line-height: 1.3;
}

.login-brand-desc {
    font-size: .875rem;
    color: rgba(255,255,255,.7);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.login-brand-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.login-brand-features li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .875rem;
    color: rgba(255,255,255,.85);
}

.login-brand-features li i {
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
    color: #fff;
}

/* ─── Utility ────────────────────────────────────────────────── */
.d-inline { display: inline; }
.text-error { color: var(--error); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }

/* ─── Accessibility: focus-visible (Phase 20-B) ──────────────── */
/* حلقهٔ فوکوس آشکار برای ناوبری با کیبورد — فقط هنگام فوکوس کیبوردی */
.btn:focus-visible,
.btn-icon:focus-visible,
.nav-item:focus-visible,
.quick-action-item:focus-visible,
a:focus-visible,
.alert-close:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .login-brand-side {
        width: 360px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-wrapper {
        margin-right: 0;
    }

    .topbar-menu-btn {
        display: flex;
    }

    .content {
        padding: 1rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Login: stack vertically on mobile */
    .login-split {
        flex-direction: column;
    }

    .login-brand-side {
        display: none;
    }

    .login-brand-mobile {
        display: flex;
    }

    .login-form-side {
        align-items: flex-start;
        padding: 2rem 1.25rem;
    }

    .login-form-inner {
        max-width: 100%;
    }

    .topbar-date {
        display: none;
    }

    /* جلوگیری از سرریز نوار بالا با مسیر راهنمای طولانی */
    .topbar-breadcrumb {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* شناسه‌های طولانی در جدول‌های جزئیات روی موبایل بشکنند (نه سرریز) */
    td code { word-break: break-word; }
}

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

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    /* مبلغ خیلی بزرگ در جعبهٔ تأیید روی صفحهٔ باریک سرریز افقی ندهد */
    .amount-xl { font-size: 1.375rem; }
}

/* ─── Dashboard UI Polish (professional admin cleanup) ─────────── */

/* اندازهٔ آیکن‌های lucide (کلاس به svg منتقل می‌شود، مثل .nav-icon) */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }

/* فاصلهٔ استاندارد پایین بخش‌های داشبورد */
.dashboard-section-spaced { margin-bottom: 1.25rem; }

/* آیکن حالت خالی داشبورد */
.dashboard-empty-icon {
    width: 36px;
    height: 36px;
    color: var(--text-light);
}

/* هدر داشبورد — فشرده و حرفه‌ای */
.dashboard-meta {
    font-size: .8125rem;
    color: var(--text-light);
    margin-top: .25rem;
}

/* ارتفاع یکسان کارت‌های آمار در گرید */
.stats-grid > .stat-card { height: 100%; }

/* کارت آمار قابل‌کلیک — کل کارت لینک است */
.stat-card-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
.stat-card-link:hover {
    text-decoration: none;
    color: inherit;
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}
.stat-card-link:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}
/* پیکان ظریف که هنگام hover روی کارت قابل‌کلیک ظاهر می‌شود */
.stat-card-arrow {
    color: var(--text-light);
    opacity: 0;
    transition: opacity .15s;
}
.stat-card-link:hover .stat-card-arrow,
.stat-card-link:focus-visible .stat-card-arrow { opacity: 1; }

/* کارت فراخوان داشبورد (درخواست همکاری) — چیدمان افقی آرام */
.dashboard-callout {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.dashboard-callout-body { flex: 1; min-width: 200px; }
.dashboard-callout-title { font-weight: 700; color: var(--text); }
.dashboard-callout-text { color: var(--text-muted); font-size: .9375rem; margin-top: .125rem; }

/* حالت «نیازمند رسیدگی» ملایم (بنفش) — نه قرمز */
.card-attention {
    border-color: var(--attention);
    background: var(--attention-bg);
}

/* ─── Sidebar polish ──────────────────────────────────────────── */
/* نشانگر تمیزِ آیتم فعال (نوار لبهٔ داخلی، سازگار با RTL) */
.nav-item { position: relative; }
.nav-item.active { font-weight: 600; }
.nav-item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #FFFFFF;
    opacity: .55;
}
/* badge شمارش کنار آیتم ناوبری — تراز و خوانا، بدون جابه‌جایی چیدمان */
.nav-badge {
    margin-inline-start: auto;
    flex-shrink: 0;
    font-size: .6875rem;
    padding: .05rem .4rem;
    line-height: 1.6;
}

/* ─── Confirm Dialog (جایگزین confirm/prompt مرورگر) ──────────────
   دیالوگ بومی مرورگر دو مشکل داشت: دکمه‌هایش همیشه انگلیسی و به زبان
   سیستم‌عامل‌اند (OK/Cancel) و در صفحهٔ راست‌به‌چپ جای «تأیید» و «انصراف»
   وارونه به نظر می‌رسد، و متنش قابل قالب‌بندی نیست. روی عملیات مالی این
   یعنی احتمال کلیک اشتباه. اینجا همان نقش با زبان و جهت خودمان بازسازی شده. */

.otc-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 39, 68, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .15s ease;
}

.otc-dialog-backdrop.is-open { opacity: 1; }

.otc-dialog {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    transform: translateY(-8px) scale(.98);
    transition: transform .15s ease;
}

.otc-dialog-backdrop.is-open .otc-dialog { transform: none; }

.otc-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.25rem 1.25rem .5rem;
}

.otc-dialog-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otc-dialog-icon svg { width: 20px; height: 20px; }

.otc-dialog-danger  .otc-dialog-icon { background: var(--error-bg);   color: var(--error); }
.otc-dialog-success .otc-dialog-icon { background: var(--success-bg); color: var(--success); }
.otc-dialog-warning .otc-dialog-icon { background: var(--warning-bg); color: var(--warning); }
.otc-dialog-primary .otc-dialog-icon { background: var(--info-bg);    color: var(--info); }

.otc-dialog-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.5;
    margin: .3rem 0 0;
}

.otc-dialog-body {
    padding: 0 1.25rem;
    font-size: .9375rem;
    line-height: 1.85;
    color: var(--text-muted);
}

.otc-dialog-body p { margin: 0 0 .6rem; }
.otc-dialog-body p:last-child { margin-bottom: 0; }
.otc-dialog-body strong { color: var(--text); font-weight: 700; }

.otc-dialog-field { padding: .9rem 1.25rem 0; }

.otc-dialog-field .form-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
}

.otc-dialog-field textarea.form-input { resize: vertical; min-height: 76px; }

.otc-dialog-error {
    display: none;
    margin-top: .4rem;
    font-size: .8125rem;
    color: var(--error);
}

.otc-dialog-error.is-visible { display: block; }

.otc-dialog-actions {
    display: flex;
    gap: .625rem;
    padding: 1.25rem;
    margin-top: .25rem;
}

/* دکمهٔ تأیید اول می‌آید ولی «انصراف» عمداً هم‌عرض است تا کلیک اشتباه
   روی عملیات مالی سخت‌تر شود — نه یک دکمهٔ کوچک کنار یک دکمهٔ بزرگ. */
.otc-dialog-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 480px) {
    .otc-dialog-actions { flex-direction: column-reverse; }
}

/* دکمهٔ قفل‌شده تا بارگذاری اسکریپت دیالوگ: خودِ صفت disabled کار را می‌کند
   (هم موس هم صفحه‌کلید)؛ این فقط نشانهٔ دیداری «هنوز آماده نیست» است تا با
   دکمهٔ غیرفعالِ دائمی اشتباه گرفته نشود. در حالت عادی چند صدم ثانیه دیده می‌شود. */
.btn[data-confirm-guard] { cursor: progress; }