/* ═══════════════════════════════════════════════════════════
   لایه یکپارچگی رابط (ui.css)
   - هدف: صفحات قدیمی (desktop.php) همان پوسته و سایدبار سایر صفحات را بگیرند
   - اصل طراحی: سطوح نرم + فاصله، بدون خطوط و کادرهای تکراری
   - فقط یک جداکننده افقی بسیار ملایم در جداول باقی میماند
   ═══════════════════════════════════════════════════════════ */

:root {
    --ui-sep: rgba(127, 145, 165, .13);
    --ui-sep-soft: rgba(127, 145, 165, .08);
    --ui-radius: 14px;
    --ui-surface: var(--bg-card, var(--bg-secondary));
    --ui-raised: var(--bg-tertiary, var(--bg-secondary));
    --ui-ink: var(--text-primary);
    --ui-ink-2: var(--text-secondary);
    --ui-ink-3: var(--text-muted);
    --ui-accent: var(--color-primary);
    --ui-accent-soft: var(--color-primary-light);
}

/* ─── سربرگ صفحه مشترک ─── */
.ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; }
.ui-head-main { display: flex; align-items: center; gap: 12px; }
.ui-head-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-accent-soft); color: var(--ui-accent); flex: none; }
.ui-head h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px; color: var(--ui-ink); }
.ui-head p { margin: 5px 0 0; font-size: 12px; line-height: 1.9; color: var(--ui-ink-2); max-width: 620px; }
.ui-head-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ─── ظرف و کارت ─── */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 4px; }
.card, .section-card, .stat-card, .trade-box, .coin-item, .balance-card, .announcement-box {
    background: var(--ui-surface) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: var(--ui-radius) !important;
    padding: 20px 22px !important;
    color: var(--ui-ink) !important;
}
.card + .card, .card[style*="margin-bottom"] { margin-bottom: 18px; }
.card-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--ui-ink); margin: 0 0 14px; padding: 0; border: 0; background: none; }
.card-title svg { color: var(--ui-accent); flex: none; }

/* ─── جدول: فقط جداکننده افقی ملایم ─── */
.table-container, .di-tbl-wrap { background: var(--ui-surface); border: 0 !important; box-shadow: none !important; border-radius: var(--ui-radius); overflow-x: auto; }
.table, .asset-table, .report-table, .di-recent, .di-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th, .asset-table th, .report-table th, .di-recent th, .di-tbl th {
    background: transparent !important; color: var(--ui-ink-2) !important; font-weight: 700;
    text-align: right; padding: 12px 12px; border: 0 !important; border-bottom: 1px solid var(--ui-sep) !important; white-space: nowrap;
}
.table td, .asset-table td, .report-table td, .di-recent td, .di-tbl td {
    color: var(--ui-ink) !important; padding: 12px 12px; border: 0 !important; border-bottom: 1px solid var(--ui-sep-soft) !important;
}
.table tr:last-child td, .asset-table tr:last-child td, .report-table tr:last-child td,
.di-recent tr:last-child td, .di-tbl tr:last-child td { border-bottom: 0 !important; }
.table tbody tr:hover, .asset-table tbody tr:hover, .report-table tbody tr:hover { background: var(--ui-raised); }

/* ─── دکمهها ─── */
.btn, .di-btn, .pl-btn, .ts-save, .add-member-btn, .save-btn, .trade-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border-radius: 10px; font-family: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer; text-decoration: none; line-height: 1.5;
    background: var(--ui-raised); color: var(--ui-ink); border: 0; transition: filter .15s ease, transform .15s ease;
}
.btn:hover, .di-btn:hover, .pl-btn:hover { filter: brightness(1.12); }
.btn:active, .di-btn:active { transform: translateY(1px); }
.btn svg, .di-btn svg { flex: none; }
.btn-primary, .di-btn.pri, .ts-save { background: var(--ui-accent) !important; color: var(--primary-on) !important; }
.btn-success { background: var(--color-success) !important; color: var(--ds-pos-on) !important; }
.btn-danger { background: transparent !important; color: var(--color-danger) !important; }
.btn-danger:hover { background: var(--color-danger-light) !important; }
.btn-outline, .di-btn.gho, .pl-btn.outline { background: transparent !important; color: var(--ui-ink-2) !important; }
.btn-outline:hover, .di-btn.gho:hover { color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; }
.btn-sm { padding: 6px 11px; font-size: 11.5px; border-radius: 8px; }
.btn:disabled, .di-btn:disabled { opacity: .42; cursor: not-allowed; }

/* ─── فرمها ─── */
.form-group { margin-bottom: 14px; }
.form-label, .ui-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ui-ink-2); margin-bottom: 6px; }
.form-input, .form-select, .ui-field input, .ui-field select, .ui-field textarea,
.asset-input, .di-field input, .di-field select, .di-field textarea, .ts-field select {
    width: 100%; box-sizing: border-box; padding: 10px 12px; font-family: inherit; font-size: 12.5px;
    color: var(--ui-ink) !important; background: var(--ui-raised) !important;
    border: 1px solid transparent !important; border-radius: 10px; outline: none;
}
.form-input:focus, .form-select:focus, .ui-field input:focus, .ui-field select:focus, .asset-input:focus {
    border-color: var(--ui-accent) !important;
}
.ui-field textarea, .di-field textarea { resize: vertical; min-height: 42px; }

/* ─── پیامها و نشانها ─── */
.alert, .ts-alert, .ap-alert, .pd-alert-inline, .di-alert {
    padding: 12px 15px; border-radius: 10px; font-size: 12.5px; line-height: 1.8; margin-bottom: 16px; border: 0 !important;
    background: var(--ui-raised); color: var(--ui-ink-2); display: flex; align-items: center; gap: 8px;
}
.alert-success, .ts-alert.ok, .ap-alert.ok, .pd-alert-inline.success, .di-alert.ok {
    background: var(--color-success-light) !important; color: var(--color-success) !important;
}
.alert-error, .ts-alert.no, .ap-alert.no, .pd-alert-inline.error, .di-alert.no {
    background: var(--color-danger-light) !important; color: var(--color-danger) !important;
}
.badge, .ap-badge, .di-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--ui-raised); color: var(--ui-ink-2); }
.badge-pending { background: var(--color-warning-light); color: var(--color-warning); }
.badge-approved, .di-pill.locked { background: var(--color-success-light); color: var(--color-success); }
.badge-rejected { background: var(--color-danger-light); color: var(--color-danger); }

/* ─── شبکه آمار ─── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat-label { font-size: 11.5px; color: var(--ui-ink-3); }
.stat-value { font-size: 22px; font-weight: 700; color: var(--ui-ink); margin-top: 6px; direction: ltr; text-align: right; }

/* ─── مودال ─── */
.modal-overlay { background: var(--ds-overlay); }
.modal-content { background: var(--ui-surface); border: 0 !important; border-radius: 16px; box-shadow: var(--ds-shadow-hard); }

/* ─── نقشه جریان (از  به) ─── */
.ui-flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.ui-flow-node { flex: 1 1 190px; min-width: 0; background: var(--ui-raised); border-radius: 12px; padding: 14px 16px; }
.ui-flow-node .k { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--ui-ink-3); margin-bottom: 6px; }
.ui-flow-node .v { font-size: 14px; font-weight: 700; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-flow-node .s { font-size: 11px; color: var(--ui-ink-2); margin-top: 3px; }
.ui-flow-mid { display: flex; align-items: center; justify-content: center; min-width: 76px; color: var(--ui-accent); }

/* ─── فاصلهگذاری عمومی ─── */
.ui-muted { color: var(--ui-ink-2); }
.ui-stack > * + * { margin-top: 16px; }
h2, h3 { color: var(--ui-ink); }