/* ================================================================ MALIPRO — ENTERPRISE BANKING DESIGN SYSTEM Centralized, hand-crafted. Navy brand. Light (default) + Dark. Single source of truth — component styles read design tokens, so theming flips the whole app via [data-theme] on . ================================================================ */ /* --------------------------------------------------------------- 1. DESIGN TOKENS :root = LIGHT theme (default). [data-theme="dark"] overrides. The sidebar is intentionally navy in BOTH themes (enterprise look). --------------------------------------------------------------- */ :root { /* Brand — navy / professional blue ramp */ --ds-brand-50: #eff6ff; --ds-brand-100: #dbeafe; --ds-brand-200: #bfdbfe; --ds-brand-300: #93c5fd; --ds-brand-400: #60a5fa; --ds-brand-500: #2563eb; /* primary interactive */ --ds-brand-600: #1d4ed8; --ds-brand-700: #1e40af; --ds-brand-800: #1e3a8a; /* navy */ --ds-brand-900: #172554; --ds-brand-glow: rgba(37, 130, 246, 0.18); --ds-focus: rgba(37, 99, 235, 0.30); /* Accent spectrum */ --ds-cyan: #0891b2; --ds-emerald: #059669; --ds-amber: #d97706; --ds-rose: #e11d48; --ds-violet: #7c3aed; /* Semantic */ --ds-success: #16a34a; --ds-warning: #d97706; --ds-danger: #dc2626; --ds-info: #0891b2; /* Financial semantics — credit/debit ink and the neutral amount colour. Mirrors --mp-credit/--mp-debit in the client so the two apps paint money the same way. */ --ds-credit: #15803d; --ds-credit-fg: #126a34; --ds-credit-bg: #e7f6ec; --ds-debit: #b42318; --ds-debit-fg: #9b1d14; --ds-debit-bg: #fdeceb; --ds-amount-fg: #0f1b2d; /* Surfaces (light) */ --ds-bg: #eef2f7; --ds-surface: #ffffff; --ds-elevated: #ffffff; --ds-raised: #f6f8fb; --ds-hover: #eef2f7; --ds-stripe: rgba(15, 23, 42, 0.025); /* Borders (light) */ --ds-border: #e4e9f0; --ds-border-md: #cdd6e3; --ds-border-lg: #aab6c8; /* Text (light) */ --ds-text: #0f1b2d; --ds-text-secondary: #50607a; --ds-text-muted: #8b98ad; --ds-text-accent: var(--ds-brand-600); --ds-text-on-brand: #ffffff; /* Sidebar (navy — both themes) */ --ds-sidebar-bg: linear-gradient(185deg, #0f1f3d 0%, #122b54 60%, #0e2549 100%); --ds-sidebar-text: #cdd9ee; --ds-sidebar-muted: #8095b5; --ds-sidebar-border: rgba(255, 255, 255, 0.08); --ds-sidebar-hover: rgba(255, 255, 255, 0.06); --ds-sidebar-active: #2563eb; --ds-sidebar-active-bd:#3b82f6; /* Shadows (light) */ --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --ds-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.10); --ds-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.16); /* Layout */ --ds-sidebar-width: 272px; --ds-topbar-height: 60px; /* Radius */ --ds-r-sm: 6px; --ds-r-md: 9px; --ds-r-lg: 14px; --ds-r-xl: 20px; /* Type & motion */ --ds-font: 'Estedad', 'Vazirmatn', Tahoma, sans-serif; --ds-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light; } [data-theme="dark"] { --ds-brand-glow: rgba(59, 130, 246, 0.28); --ds-focus: rgba(96, 165, 250, 0.40); --ds-credit-fg: #5fd28a; --ds-credit-bg: rgba(21, 128, 61, 0.18); --ds-debit-fg: #f4978e; --ds-debit-bg: rgba(180, 35, 24, 0.18); --ds-amount-fg: #e8eef7; /* Brighter accents for dark surfaces */ --ds-cyan: #22d3ee; --ds-emerald: #34d399; --ds-amber: #fbbf24; --ds-rose: #fb7185; --ds-violet: #a78bfa; --ds-success: #22c55e; --ds-warning: #f59e0b; --ds-danger: #ef4444; --ds-info: #06b6d4; /* Surfaces (dark navy) */ --ds-bg: #0a1120; --ds-surface: #0f1a2e; --ds-elevated: #121e35; --ds-raised: #18253f; --ds-hover: #1d2c49; --ds-stripe: rgba(255, 255, 255, 0.025); /* Borders (dark) */ /* مرزها در تمِ تیره — نسبت‌ها روی --ds-surface (#0f1a2e) اندازه‌گیری شده‌اند. مقادیرِ پیشین (0.08 / 0.14 / 0.22) به‌ترتیب 1.24 و 1.52 و 2.02 می‌دادند؛ ردیفِ اول عملاً دیده نمی‌شد و جدول و کارت بی‌مرز به نظر می‌رسیدند. border 1.52:1 جداکننده و لبهٔ کارت در حالتِ عادی border-md 2.02:1 مرزِ کنترل‌ها (ورودی، دکمهٔ ثانویه) border-lg 3.00:1 تأکید و hover — دقیقاً آستانهٔ WCAG 1.4.11 برای اجزای غیرمتنی بالاتر از این‌ها، رابط تیره به شبکه‌ای از خطوطِ روشن تبدیل می‌شود و خویشتن‌داریِ لازم برای یک سامانهٔ مالی را از دست می‌دهد. */ --ds-border: rgba(255, 255, 255, 0.14); --ds-border-md: rgba(255, 255, 255, 0.22); --ds-border-lg: rgba(255, 255, 255, 0.33); /* Text (dark) */ --ds-text: #eaf1fb; --ds-text-secondary: #9fb0cc; --ds-text-muted: #61718e; --ds-text-accent: var(--ds-brand-400); /* Shadows (dark) */ --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50); --ds-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.62); color-scheme: dark; } /* --------------------------------------------------------------- 2. BASE --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { font-family: var(--ds-font); background-color: var(--ds-bg); color: var(--ds-text); direction: rtl; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { color: var(--ds-text); font-weight: 700; } a { color: var(--ds-text-accent); text-decoration: none; transition: color var(--ds-transition); } a:hover { color: var(--ds-brand-500); } hr { border-color: var(--ds-border); opacity: 1; } :focus-visible { outline: 2px solid var(--ds-brand-500); outline-offset: 2px; } ::selection { background: var(--ds-brand-200); color: var(--ds-brand-900); } [data-theme="dark"] ::selection { background: rgba(59, 130, 246, 0.40); color: #fff; } /* --------------------------------------------------------------- 3. LAYOUT SHELL --------------------------------------------------------------- */ .page { display: flex; min-height: 100vh; background: var(--ds-bg); } .sidebar { width: var(--ds-sidebar-width); min-height: 100vh; height: 100vh; background: var(--ds-sidebar-bg); border-left: 1px solid var(--ds-sidebar-border); position: sticky; top: 0; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; z-index: 100; } .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; } main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ds-bg); } .top-bar { height: var(--ds-topbar-height); background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 90; } article.content { flex: 1; padding: 1.5rem; min-height: 0; } .content { padding-top: 1rem; } h1:focus { outline: none; } /* --------------------------------------------------------------- 4. SIDEBAR NAVIGATION --------------------------------------------------------------- */ .nav-brand { display: flex; align-items: center; gap: 0.75rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--ds-sidebar-border); } .nav-brand-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--ds-r-md); background: linear-gradient(135deg, var(--ds-brand-500), var(--ds-brand-700)); color: #fff; font-size: 1.2rem; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); } .nav-brand-text { display: flex; flex-direction: column; line-height: 1.25; } .nav-brand-name { color: #fff; font-weight: 800; font-size: 1.05rem; } .nav-brand-sub { color: var(--ds-sidebar-muted); font-size: 0.7rem; letter-spacing: 0.6px; text-transform: uppercase; } .nav-scrollable { padding: 0.75rem 0.75rem 2rem; } .nav-user-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem; margin: 0.25rem 0 0.85rem; border-radius: var(--ds-r-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ds-sidebar-border); } .nav-user-avatar { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--ds-sidebar-text); overflow: hidden; } .nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .nav-user-info { min-width: 0; } .nav-user-name { color: #fff; font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-user-org { color: var(--ds-sidebar-muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-menu { display: flex; flex-direction: column; gap: 0.15rem; } .nav-section { margin-top: 0.85rem; } .nav-section-label { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; color: var(--ds-sidebar-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .nav-menu .nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border-radius: var(--ds-r-md); color: var(--ds-sidebar-text); font-size: 0.9rem; font-weight: 500; border: none; background: transparent; width: 100%; text-align: right; cursor: pointer; position: relative; transition: background var(--ds-transition), color var(--ds-transition); } .nav-menu .nav-link:hover { background: var(--ds-sidebar-hover); color: #fff; } /* Solid brand pill: the previous 18% tint read as washed-out against the navy sidebar and barely differed from the inactive text colour. */ .nav-menu .nav-link.active { background: var(--ds-sidebar-active); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); } .nav-menu .nav-link.active .nav-icon { color: #fff; } .nav-icon { font-size: 1.05rem; width: 1.3rem; text-align: center; flex-shrink: 0; } .nav-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-link-featured { background: rgba(59, 130, 246, 0.14); color: #fff !important; font-weight: 600; } .nav-link-featured:hover { background: rgba(59, 130, 246, 0.24) !important; } .nav-link-logout { color: #fca5a5 !important; } .nav-link-logout:hover { background: rgba(239, 68, 68, 0.16) !important; color: #fecaca !important; } .nav-badge { margin-right: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; background: var(--ds-danger); color: #fff; border-radius: 50px; font-size: 0.72rem; font-weight: 700; } .nav-item { margin: 0; } .nav-item form { margin: 0; } /* Mobile toggle (hidden on desktop) */ .sidebar-toggle, .sidebar-backdrop { display: none; } /* --------------------------------------------------------------- 4b. DESKTOP — collapsible sidebar --------------------------------------------------------------- دکمهٔ جمع‌کردن داخلِ نوار بالاست، نه شناور: در RTL نوار کناری سمتِ راست است، پس دکمهٔ شناورِ موبایل روی دسکتاپ دقیقاً روی خودِ منو می‌افتاد. `margin-inline-end: auto` آن را به ابتدای ردیف (راست) می‌برد در حالی که بقیهٔ آیتم‌های نوار سرِ جای خودشان (چپ) می‌مانند. --------------------------------------------------------------- */ .sidebar-toggle-desktop { display: grid; place-items: center; margin-inline-end: auto; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--ds-r-md); border: 1px solid var(--ds-border); background: var(--ds-raised); color: var(--ds-text); cursor: pointer; transition: background var(--ds-transition), color var(--ds-transition); } .sidebar-toggle-desktop:hover { background: var(--ds-hover); } /* عرض انیمیت می‌شود چون نوار کناری عضوِ چیدمان است و باید فضایش را پس بدهد. محتوای داخلی عرضِ خودش را نگه می‌دارد تا هنگام جمع‌شدن له نشود و فقط بریده شود. */ .sidebar { transition: width 0.2s ease; } .sidebar > * { width: var(--ds-sidebar-width); } .page.sidebar-collapsed .sidebar { width: 0; border-left-width: 0; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* --------------------------------------------------------------- 5. THEME TOGGLE --------------------------------------------------------------- */ .theme-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: var(--ds-r-md); border: 1px solid var(--ds-border); background: var(--ds-raised); color: var(--ds-text-secondary); cursor: pointer; transition: all var(--ds-transition); } .theme-toggle:hover { color: var(--ds-brand-500); border-color: var(--ds-brand-400); } .theme-toggle .theme-toggle-sun { display: none; } .theme-toggle .theme-toggle-moon { display: inline; } [data-theme="dark"] .theme-toggle .theme-toggle-sun { display: inline; } [data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; } /* --------------------------------------------------------------- 6. CARDS --------------------------------------------------------------- */ .card { background: var(--ds-elevated) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-sm) !important; color: var(--ds-text) !important; transition: border-color var(--ds-transition), box-shadow var(--ds-transition); } .card:hover { box-shadow: var(--ds-shadow-md) !important; } .card-header { background: var(--ds-raised) !important; border-bottom: 1px solid var(--ds-border) !important; color: var(--ds-text) !important; font-weight: 700; padding: 1rem 1.25rem !important; } .card-body { color: var(--ds-text) !important; } .card-footer { background: var(--ds-raised) !important; border-top: 1px solid var(--ds-border) !important; color: var(--ds-text-secondary) !important; } /* Stat / KPI card */ .card-stat { background: var(--ds-elevated) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-sm); padding: 1.25rem; position: relative; overflow: hidden; } .card-stat::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 4px; height: 100%; background: var(--ds-brand-500); } .card-stat.card-stat-blue::before { background: var(--ds-brand-500); } .card-stat.card-stat-cyan::before { background: var(--ds-cyan); } .card-stat.card-stat-green::before { background: var(--ds-emerald); } .card-stat.card-stat-amber::before { background: var(--ds-amber); } .card-stat.card-stat-rose::before { background: var(--ds-rose); } /* --------------------------------------------------------------- 7. BUTTONS --------------------------------------------------------------- */ .btn { border-radius: var(--ds-r-md) !important; font-weight: 600 !important; font-family: var(--ds-font) !important; transition: all var(--ds-transition) !important; border: 1px solid transparent !important; padding: 0.55rem 1.15rem !important; display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; } .btn:focus-visible { outline: 2px solid var(--ds-brand-500) !important; outline-offset: 2px !important; box-shadow: none !important; } .btn-primary { background: var(--ds-brand-500) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(37,99,235,0.30) !important; } .btn-primary:hover { background: var(--ds-brand-600) !important; box-shadow: 0 4px 14px var(--ds-brand-glow) !important; } .btn-secondary { background: var(--ds-raised) !important; color: var(--ds-text) !important; border-color: var(--ds-border-md) !important; } .btn-secondary:hover { background: var(--ds-hover) !important; border-color: var(--ds-brand-400) !important; } .btn-success { background: var(--ds-success) !important; color: #fff !important; } .btn-success:hover { filter: brightness(0.94) !important; } .btn-danger { background: var(--ds-danger) !important; color: #fff !important; } .btn-danger:hover { filter: brightness(0.94) !important; } .btn-warning { background: var(--ds-warning) !important; color: #fff !important; } .btn-warning:hover { filter: brightness(0.94) !important; } .btn-info { background: var(--ds-info) !important; color: #fff !important; } .btn-info:hover { filter: brightness(0.94) !important; } .btn-outline-primary { background: transparent !important; color: var(--ds-brand-600) !important; border-color: var(--ds-brand-500) !important; } .btn-outline-primary:hover { background: var(--ds-brand-500) !important; color: #fff !important; } .btn-outline-secondary { background: transparent !important; color: var(--ds-text-secondary) !important; border-color: var(--ds-border-md) !important; } .btn-outline-secondary:hover { background: var(--ds-raised) !important; color: var(--ds-text) !important; } .btn-outline-danger { background: transparent !important; color: var(--ds-danger) !important; border-color: var(--ds-danger) !important; } .btn-outline-danger:hover { background: var(--ds-danger) !important; color: #fff !important; } .btn-outline-success { background: transparent !important; color: var(--ds-success) !important; border-color: var(--ds-success) !important; } .btn-outline-success:hover { background: var(--ds-success) !important; color: #fff !important; } .btn-outline-warning { background: transparent !important; color: var(--ds-warning) !important; border-color: var(--ds-warning) !important; } .btn-outline-warning:hover { background: var(--ds-warning) !important; color: #fff !important; } .btn-outline-info { background: transparent !important; color: var(--ds-info) !important; border-color: var(--ds-info) !important; } .btn-outline-info:hover { background: var(--ds-info) !important; color: #fff !important; } .btn-link { color: var(--ds-text-accent) !important; } .btn-sm { padding: 0.35rem 0.8rem !important; font-size: 0.82rem !important; } .btn-lg { padding: 0.75rem 1.6rem !important; font-size: 1.02rem !important; } /* --------------------------------------------------------------- 8. FORMS --------------------------------------------------------------- */ .form-control, .form-select { background: var(--ds-surface) !important; border: 1px solid var(--ds-border-md) !important; border-radius: var(--ds-r-md) !important; color: var(--ds-text) !important; padding: 0.6rem 0.9rem !important; font-family: var(--ds-font) !important; transition: border-color var(--ds-transition), box-shadow var(--ds-transition) !important; } .form-control::placeholder { color: var(--ds-text-muted) !important; } .form-control:focus, .form-select:focus { background: var(--ds-surface) !important; border-color: var(--ds-brand-500) !important; box-shadow: 0 0 0 3px var(--ds-focus) !important; color: var(--ds-text) !important; outline: none !important; } .form-control:disabled, .form-control[readonly] { background: var(--ds-raised) !important; opacity: 0.7 !important; cursor: not-allowed !important; } .form-select option { background: var(--ds-surface) !important; color: var(--ds-text) !important; } .form-label { color: var(--ds-text-secondary) !important; font-weight: 600 !important; font-size: 0.875rem !important; margin-bottom: 0.4rem !important; } .form-floating > label { color: var(--ds-text-muted) !important; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--ds-brand-600) !important; } .form-check-input { background-color: var(--ds-surface) !important; border-color: var(--ds-border-lg) !important; } .form-check-input:checked { background-color: var(--ds-brand-500) !important; border-color: var(--ds-brand-500) !important; } .input-group-text { background: var(--ds-raised) !important; border-color: var(--ds-border-md) !important; color: var(--ds-text-secondary) !important; } .valid.modified:not([type=checkbox]) { outline: none !important; border-color: var(--ds-success) !important; } .invalid { border-color: var(--ds-danger) !important; } .validation-message { color: var(--ds-danger) !important; font-size: 0.82rem !important; } /* --------------------------------------------------------------- 9. TABLES --------------------------------------------------------------- */ .table { color: var(--ds-text) !important; border-color: var(--ds-border) !important; font-size: 0.9rem !important; } .table thead th { background: var(--ds-raised) !important; color: var(--ds-text-secondary) !important; border-color: var(--ds-border-md) !important; font-weight: 700 !important; font-size: 0.78rem !important; letter-spacing: 0.3px !important; padding: 0.85rem 1rem !important; white-space: nowrap !important; } .table tbody tr { border-color: var(--ds-border) !important; transition: background var(--ds-transition) !important; } .table tbody td { border-color: var(--ds-border) !important; padding: 0.8rem 1rem !important; vertical-align: middle !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--ds-stripe) !important; } .table-hover > tbody > tr:hover > * { background-color: var(--ds-hover) !important; color: var(--ds-text) !important; } .table-bordered td, .table-bordered th { border-color: var(--ds-border) !important; } /* overflow-x: auto (NOT hidden) so wide tables scroll horizontally on mobile */ .table-responsive { border-radius: var(--ds-r-lg); border: 1px solid var(--ds-border); overflow-x: auto; } /* --------------------------------------------------------------- 10. BADGES & TEXT --------------------------------------------------------------- */ .badge { border-radius: var(--ds-r-sm) !important; font-weight: 600 !important; padding: 0.32rem 0.65rem !important; font-size: 0.74rem !important; } .bg-primary { background: var(--ds-brand-500) !important; color: #fff !important; } .bg-secondary { background: var(--ds-text-muted) !important; color: #fff !important; } .bg-success { background: var(--ds-success) !important; color: #fff !important; } .bg-danger { background: var(--ds-danger) !important; color: #fff !important; } .bg-warning { background: var(--ds-warning) !important; color: #fff !important; } .bg-info { background: var(--ds-info) !important; color: #fff !important; } .bg-dark { background: var(--ds-raised) !important; color: var(--ds-text) !important; } .bg-light { background: var(--ds-raised) !important; color: var(--ds-text) !important; } .text-primary { color: var(--ds-text-accent) !important; } .text-secondary { color: var(--ds-text-secondary) !important; } .text-success { color: var(--ds-success) !important; } .text-danger { color: var(--ds-danger) !important; } .text-warning { color: var(--ds-warning) !important; } .text-info { color: var(--ds-info) !important; } .text-muted { color: var(--ds-text-muted) !important; } .text-dark { color: var(--ds-text) !important; } /* --------------------------------------------------------------- 11. ALERTS --------------------------------------------------------------- */ .alert { border-radius: var(--ds-r-lg) !important; border: 1px solid transparent !important; padding: 0.85rem 1.2rem !important; font-size: 0.9rem !important; } .alert-primary { background: var(--ds-brand-50) !important; border-color: var(--ds-brand-200) !important; color: var(--ds-brand-800) !important; } .alert-success { background: rgba(22,163,74,0.10) !important; border-color: rgba(22,163,74,0.30) !important; color: #15803d !important; } .alert-danger { background: rgba(220,38,38,0.10) !important; border-color: rgba(220,38,38,0.30) !important; color: #b91c1c !important; } .alert-warning { background: rgba(217,119,6,0.10) !important; border-color: rgba(217,119,6,0.30) !important; color: #b45309 !important; } .alert-info { background: rgba(8,145,178,0.10) !important; border-color: rgba(8,145,178,0.30) !important; color: #0e7490 !important; } [data-theme="dark"] .alert-primary { background: rgba(59,130,246,0.14) !important; border-color: rgba(59,130,246,0.32) !important; color: #bfdbfe !important; } [data-theme="dark"] .alert-success { background: rgba(34,197,94,0.14) !important; border-color: rgba(34,197,94,0.32) !important; color: #86efac !important; } [data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.14) !important; border-color: rgba(239,68,68,0.32) !important; color: #fca5a5 !important; } [data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.14) !important; border-color: rgba(245,158,11,0.32) !important; color: #fde68a !important; } [data-theme="dark"] .alert-info { background: rgba(6,182,212,0.14) !important; border-color: rgba(6,182,212,0.32) !important; color: #a5f3fc !important; } /* --------------------------------------------------------------- 12. MODALS --------------------------------------------------------------- */ .modal-backdrop { background: rgba(8, 15, 30, 0.55) !important; backdrop-filter: blur(3px) !important; } /* ── مودالِ «پشت‌زمینه به‌عنوان ظرف» ─────────────────────────────────────── قاعده‌های بالا فقط مودال را رنگ می‌کنند و چیدمان را از Bootstrap انتظار دارند، یعنی ساختارِ .modal > .modal-dialog > .modal-content. ولی چند صفحه الگوی خانگیِ .modal-backdrop > .modal-content را دارند بدونِ .modal-dialog در میان. آنجا دو قاعدهٔ خودِ Bootstrap دست‌به‌دستِ هم می‌دهند و نتیجه خراب می‌شود: .modal-backdrop تمامِ صفحه را می‌گیرد و .modal-content عرضِ ۱۰۰٪ دارد، پس پنجره به نواری تمام‌عرض و چسبیده به بالای صفحه تبدیل می‌شود. صفحاتی که سالم‌اند، هرکدام جداگانه همین را در شیتِ خودشان جبران کرده‌اند — پنج نسخهٔ موازی از یک قاعده. این‌جا یک‌بار جبران می‌شود. انتخابگر عمداً «فرزندِ مستقیم» است: مودالِ استانداردِ Bootstrap را لمس نمی‌کند، چون آنجا والدِ .modal-content همیشه .modal-dialog است نه .modal-backdrop. */ .modal-backdrop:has(> .modal-content) { display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow-y: auto; } .modal-backdrop > .modal-content { width: 100%; max-width: 640px; max-height: calc(100vh - 3rem); overflow-y: auto; /* بالاتر از خودِ پشت‌زمینه بمانَد. */ position: relative; z-index: 1; } .modal-backdrop > .modal-content.modal-lg { max-width: 900px; } .modal-backdrop > .modal-content.modal-sm { max-width: 420px; } .modal-content { background: var(--ds-elevated) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-shadow-lg) !important; color: var(--ds-text) !important; } .modal-header { border-bottom: 1px solid var(--ds-border) !important; background: var(--ds-raised) !important; border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0 !important; padding: 1.15rem 1.5rem !important; } .modal-title { color: var(--ds-text) !important; font-weight: 700 !important; } .modal-body { padding: 1.5rem !important; } .modal-footer { border-top: 1px solid var(--ds-border) !important; padding: 1rem 1.5rem !important; } .btn-close { opacity: 0.6 !important; } .btn-close:hover { opacity: 1 !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) !important; } /* --------------------------------------------------------------- 13. DROPDOWNS --------------------------------------------------------------- */ .dropdown-menu { background: var(--ds-elevated) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-lg) !important; padding: 0.4rem !important; } .dropdown-item { color: var(--ds-text-secondary) !important; border-radius: var(--ds-r-sm) !important; padding: 0.5rem 1rem !important; transition: all var(--ds-transition) !important; } .dropdown-item:hover, .dropdown-item:focus { background: var(--ds-raised) !important; color: var(--ds-text) !important; } .dropdown-item.active { background: var(--ds-brand-500) !important; color: #fff !important; } .dropdown-divider { border-color: var(--ds-border) !important; } /* --------------------------------------------------------------- 14. PAGINATION --------------------------------------------------------------- */ .pagination { gap: 0.25rem !important; } .page-item .page-link { background: var(--ds-elevated) !important; border: 1px solid var(--ds-border) !important; color: var(--ds-text-secondary) !important; border-radius: var(--ds-r-sm) !important; transition: all var(--ds-transition) !important; } .page-item.active .page-link { background: var(--ds-brand-500) !important; border-color: var(--ds-brand-500) !important; color: #fff !important; } .page-item .page-link:hover { background: var(--ds-raised) !important; color: var(--ds-text) !important; border-color: var(--ds-brand-400) !important; } .page-item.disabled .page-link { background: var(--ds-raised) !important; color: var(--ds-text-muted) !important; opacity: 0.6 !important; } /* --------------------------------------------------------------- 15. PROGRESS --------------------------------------------------------------- */ .progress { background: var(--ds-raised) !important; border-radius: 50px !important; height: 8px !important; } .progress-bar { background: var(--ds-brand-500) !important; border-radius: 50px !important; } /* --------------------------------------------------------------- 16. LIST GROUPS --------------------------------------------------------------- */ .list-group-item { background: var(--ds-elevated) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; transition: background var(--ds-transition) !important; } .list-group-item:hover { background: var(--ds-raised) !important; } .list-group-item.active { background: var(--ds-brand-500) !important; border-color: var(--ds-brand-500) !important; color: #fff !important; } /* --------------------------------------------------------------- 17. TABS --------------------------------------------------------------- */ .nav-tabs { border-bottom: 1px solid var(--ds-border) !important; gap: 0.25rem !important; } .nav-tabs .nav-link { color: var(--ds-text-secondary) !important; border: none !important; border-radius: var(--ds-r-md) var(--ds-r-md) 0 0 !important; padding: 0.6rem 1.2rem !important; font-weight: 600 !important; transition: all var(--ds-transition) !important; } .nav-tabs .nav-link:hover { background: var(--ds-raised) !important; color: var(--ds-text) !important; } .nav-tabs .nav-link.active { background: var(--ds-elevated) !important; color: var(--ds-brand-600) !important; border-bottom: 2px solid var(--ds-brand-500) !important; } .tab-content { padding-top: 1.2rem !important; } /* --------------------------------------------------------------- 18. ACCORDION --------------------------------------------------------------- */ .accordion-item { background: var(--ds-elevated) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-md) !important; margin-bottom: 0.5rem !important; overflow: hidden !important; } .accordion-button { background: var(--ds-elevated) !important; color: var(--ds-text) !important; font-weight: 600 !important; font-family: var(--ds-font) !important; box-shadow: none !important; } .accordion-button:not(.collapsed) { background: var(--ds-brand-50) !important; color: var(--ds-brand-700) !important; box-shadow: none !important; } [data-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(59,130,246,0.12) !important; color: var(--ds-brand-300) !important; } [data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(0.8) !important; } .accordion-body { background: var(--ds-surface) !important; color: var(--ds-text-secondary) !important; } /* --------------------------------------------------------------- 19. SPINNERS / TOOLTIPS / POPOVERS --------------------------------------------------------------- */ .spinner-border, .spinner-grow { color: var(--ds-brand-500) !important; } .tooltip-inner { background: var(--ds-text) !important; color: var(--ds-bg) !important; border-radius: var(--ds-r-sm) !important; font-family: var(--ds-font) !important; } .popover { background: var(--ds-elevated) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-lg) !important; } .popover-header { background: var(--ds-raised) !important; color: var(--ds-text) !important; border-bottom: 1px solid var(--ds-border) !important; } .popover-body { color: var(--ds-text-secondary) !important; } /* --------------------------------------------------------------- 20. SCROLLBARS --------------------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ds-border-md); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--ds-border-lg); } /* --------------------------------------------------------------- 21. BLAZOR ERROR UI --------------------------------------------------------------- */ #blazor-error-ui { background: var(--ds-elevated); border-top: 3px solid var(--ds-danger); color: var(--ds-text); padding: 0.75rem 1.5rem; position: fixed; bottom: 0; width: 100%; z-index: 9999; display: none; align-items: center; gap: 0.75rem; font-family: var(--ds-font); box-shadow: var(--ds-shadow-lg); } #blazor-error-ui a.reload { color: var(--ds-text-accent); font-weight: 600; } #blazor-error-ui span.dismiss { cursor: pointer; margin-right: auto; font-size: 1.1rem; opacity: 0.7; } #blazor-error-ui span.dismiss:hover { opacity: 1; } .blazor-error-boundary { background: var(--ds-elevated); border-right: 4px solid var(--ds-danger); color: var(--ds-text); padding: 1rem 1rem 1rem 3.7rem; border-radius: var(--ds-r-md); } .blazor-error-boundary::after { content: "یک خطا رخ داده است." } /* --------------------------------------------------------------- 22. INACTIVITY MODAL --------------------------------------------------------------- */ .inactivity-warning-overlay { position: fixed; inset: 0; background: rgba(8,15,30,0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: ds-fade 0.25s ease; } .inactivity-warning-modal { background: var(--ds-elevated); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 2.5rem; max-width: 420px; width: 90%; text-align: center; box-shadow: var(--ds-shadow-lg); } .warning-icon { color: var(--ds-warning); font-size: 3rem; margin-bottom: 1rem; } .inactivity-warning-modal h3 { color: var(--ds-text); } .inactivity-warning-modal p { color: var(--ds-text-secondary); } .countdown-timer { font-size: 4rem; font-weight: 900; color: var(--ds-danger); font-family: monospace; margin: 1.5rem 0; } .inactivity-warning-modal .hint { font-size: 0.85rem; color: var(--ds-text-muted); margin-top: 1rem; } /* --------------------------------------------------------------- 23. PAGE HEADER & UTILITIES --------------------------------------------------------------- */ .page-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .page-header h1, .page-header h2, .page-header h3 { margin: 0; font-size: 1.45rem; font-weight: 800; color: var(--ds-text); } .page-header .page-subtitle { color: var(--ds-text-secondary); font-size: 0.875rem; margin-top: 0.25rem; } .ds-card { background: var(--ds-elevated); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-sm); padding: 1.5rem; } .ds-divider { border: none; border-top: 1px solid var(--ds-border); margin: 1.5rem 0; } .ds-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; border: 1px solid; } .ds-tag-blue { background: var(--ds-brand-50); color: var(--ds-brand-700); border-color: var(--ds-brand-200); } .ds-tag-green { background: rgba(22,163,74,0.10); color: #15803d; border-color: rgba(22,163,74,0.25); } .ds-tag-amber { background: rgba(217,119,6,0.10); color: #b45309; border-color: rgba(217,119,6,0.25); } .ds-tag-rose { background: rgba(225,29,72,0.10); color: #be123c; border-color: rgba(225,29,72,0.25); } .fs-xs { font-size: 0.75rem !important; } .fs-sm { font-size: 0.85rem !important; } .fs-90 { font-size: 0.9rem !important; } .fs-95 { font-size: 0.95rem !important; } .mw-700 { max-width: 700px !important; } .mw-900 { max-width: 900px !important; } .empty-icon-xl { font-size: 4rem; opacity: 0.3; display: block; margin-bottom: 0.75rem; } .z-toast { z-index: 9999 !important; } .modal-overlay { background-color: rgba(8, 15, 30, 0.55) !important; } .badge-dynamic { background-color: var(--badge-bg, var(--ds-brand-500)) !important; color: #fff !important; } /* --------------------------------------------------------------- 24. KEYFRAMES & SKELETON --------------------------------------------------------------- */ @keyframes ds-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes ds-fade-up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } } @keyframes ds-shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } } .skeleton { background: linear-gradient(90deg, var(--ds-raised) 25%, var(--ds-hover) 50%, var(--ds-raised) 75%); background-size: 200% 100%; animation: ds-shimmer 1.5s infinite; border-radius: var(--ds-r-md); } /* --------------------------------------------------------------- 25. RESPONSIVE — collapsible sidebar --------------------------------------------------------------- */ @media (max-width: 768px) { /* روی موبایل دکمهٔ نوار بالا جای خود را به دکمهٔ شناور می‌دهد. */ .sidebar-toggle-desktop { display: none; } /* Off-canvas sidebar (slides in from the right in RTL) */ .sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: var(--ds-sidebar-width); max-width: 85vw; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 200; box-shadow: var(--ds-shadow-lg); } .page.sidebar-open .sidebar { transform: translateX(0); } /* حالتِ جمع‌شدهٔ دسکتاپ در localStorage می‌مانَد و روی موبایل هم روی .page می‌نشیند؛ اینجا بی‌اثر می‌شود وگرنه کشو با عرضِ صفر باز می‌شد. */ .page.sidebar-collapsed .sidebar { width: var(--ds-sidebar-width); border-left-width: 1px; overflow-y: auto; } .sidebar > * { width: 100%; } /* Hamburger button (top-right). It lives in .page, NOT in .sidebar, so the sidebar's transform can't move this fixed button off-screen. */ .sidebar-toggle { display: grid; place-items: center; position: fixed; top: 0.7rem; right: 0.7rem; z-index: 210; width: 42px; height: 42px; background: var(--ds-sidebar-bg); color: #fff; border: none; border-radius: var(--ds-r-md); cursor: pointer; box-shadow: var(--ds-shadow-md); } .sidebar-toggle span, .sidebar-toggle span::before, .sidebar-toggle span::after { content: ''; display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: transform 0.2s, top 0.2s, background 0.2s; } .sidebar-toggle span::before { position: absolute; top: -6px; } .sidebar-toggle span::after { position: absolute; top: 6px; } /* Morph hamburger into an X while open */ .page.sidebar-open .sidebar-toggle span { background: transparent; } .page.sidebar-open .sidebar-toggle span::before { top: 0; transform: rotate(45deg); } .page.sidebar-open .sidebar-toggle span::after { top: 0; transform: rotate(-45deg); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 150; } .page.sidebar-open .sidebar-backdrop { display: block; } article.content { padding: 1rem; } .page-header { flex-direction: column; align-items: flex-start; } } /* --------------------------------------------------------------- FINANCIAL AMOUNT (DsAmount) + MONEY INPUT (DsMoneyInput) Server-side twins of .mp-amount / .mp-money in the client. --------------------------------------------------------------- */ .ds-amount { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; font-weight: 600; color: var(--ds-amount-fg); unicode-bidi: isolate; white-space: nowrap; } .ds-amount--credit { color: var(--ds-credit-fg); } .ds-amount--debit { color: var(--ds-debit-fg); } .ds-amount__currency { font-size: 0.82em; font-weight: 400; color: var(--ds-text-muted); margin-inline-start: 3px; } .ds-amount__sign { margin-inline-end: 1px; } .ds-amount--lg { font-size: 1.25rem; } .ds-amount__base { display: block; font-size: 0.8em; font-weight: 400; color: var(--ds-text-secondary); } .ds-currency-tag { display: inline-flex; align-items: center; gap: 0.35rem; min-height: calc(1.5em + 0.75rem + 2px); padding-inline: 0.75rem; border: 1px solid var(--ds-border-md); border-radius: var(--ds-radius, 0.5rem); background: var(--ds-raised); color: var(--ds-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-money { display: grid; gap: 0.5rem 0.75rem; grid-template-columns: minmax(150px, 190px) 1fr; align-items: start; } .ds-money--compact { grid-template-columns: 120px 1fr; } .ds-money__fx { grid-column: 1 / -1; display: grid; gap: 0.5rem 0.75rem; grid-template-columns: minmax(120px, 160px) 1fr 1fr; align-items: end; } .ds-money__label { display: block; font-size: 0.8rem; color: var(--ds-text-secondary); margin-block-end: 0.25rem; } .ds-money__base { align-self: center; font-size: 0.9rem; color: var(--ds-text-secondary); unicode-bidi: isolate; } .ds-money__hint { font-size: 0.8rem; color: var(--ds-warning); } @media (max-width: 640px) { .ds-money, .ds-money--compact, .ds-money__fx { grid-template-columns: 1fr; } }