/* ╔══════════════════════════════════════════════════════════════╗ ║ نجمة الدوار — Financial Intelligence OS ║ ║ Design System v1.0 · Built from scratch · 2026 ║ ║ Theme: Deep Space Ledger — Dark luxury meets Arabic grace ║ ╚══════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════ GOOGLE FONTS — Loaded in Display: Almarai (800/900) — Arabic authority Mono: JetBrains Mono (400/600) — numbers Body: IBM Plex Sans Arabic (300/400/600) ════════════════════════════════════════════ */ /* ════════════════════════════════════════════ 1. DESIGN TOKENS ════════════════════════════════════════════ */ :root { /* ── Canvas Depths ── */ --ink: #070a0f; /* absolute black canvas */ --d1: #0d1117; /* primary surface */ --d2: #161b25; /* raised card */ --d3: #1e2535; /* elevated element */ --d4: #273044; /* active/hover */ --d5: #2f3a52; /* pressed/selected */ /* ── Borders ── */ --b1: rgba(255,255,255,.05); --b2: rgba(255,255,255,.09); --b3: rgba(255,255,255,.15); --b4: rgba(255,255,255,.22); /* ── Text ── */ --t1: #f0f2f7; /* primary — headings */ --t2: #c8d0e0; /* secondary — labels (أوضح بكثير) */ --t3: #7a8499; /* tertiary — hints */ --t4: #404860; /* ghost */ /* ── Brand: Warm Gold — المال والثروة ── */ --gold: #e8b84b; --gold2: #d4a235; --gold-dim: rgba(232,184,75,.10); --gold-glow: rgba(232,184,75,.25); --gold-soft: rgba(232,184,75,.06); /* ── Semantic ── */ --red: #f05050; --red-dim: rgba(240,80,80,.12); --red-soft: rgba(240,80,80,.07); --green: #36d98b; --grn-dim: rgba(54,217,139,.12); --grn-soft: rgba(54,217,139,.07); --blue: #4e8ef7; --blu-dim: rgba(78,142,247,.12); --amber: #f4a922; --amb-dim: rgba(244,169,34,.12); --teal: #2dd4bf; --teal-dim: rgba(45,212,191,.12); --purple: #a78bfa; --pur-dim: rgba(167,139,250,.12); /* ── Fonts ── */ --ff-display: 'Almarai', 'Cairo', sans-serif; --ff-body: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif; --ff-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* ── Layout ── */ --sidebar-w: 256px; --sidebar-w-sm: 62px; --topbar-h: 54px; /* ── Shape ── */ --r-sm: 4px; --r: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; /* ── Shadows ── */ --shadow: 0 8px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3); --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow-card:0 0 0 1px var(--b1), 0 4px 16px rgba(0,0,0,.35); --shadow-gold:0 0 24px var(--gold-glow); /* ── Motion ── */ --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --t-fast: .12s; --t-med: .22s; --t-slow: .38s; } /* ════════════════════════════════════════════ 2. RESET + BASE ════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; border-color: var(--b1); } html { height: 100%; font-size: 14px; -webkit-text-size-adjust: 100%; } body { height: 100%; overflow: hidden; background: var(--ink); color: var(--t1); font-family: var(--ff-body); font-size: .9375rem; /* 15px */ font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: .01em; } /* كل العناصر ترث اللون من الـ body */ p, span, div, li, label, small, strong, b { color: inherit; } h1,h2,h3,h4,h5,h6 { color: var(--t1); } /* Star-field canvas background */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(232,184,75,.04) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(78,142,247,.03) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Bootstrap override — force dark theme base colors */ .table, .table > :not(caption) > * > * { background-color: transparent !important; color: var(--t1) !important; } .form-control, .form-select { color: var(--t1) !important; } .card, .modal-content { color: var(--t1) !important; } /* ════════════════════════════════════════════ 3. APP SHELL ════════════════════════════════════════════ */ .app-shell { position: relative; z-index: 1; display: flex; height: 100vh; width: 100vw; overflow: hidden; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--d1); } /* ════════════════════════════════════════════ 4. SIDEBAR ════════════════════════════════════════════ */ .sidebar { width: var(--sidebar-w); height: 100vh; display: flex; flex-direction: column; background: var(--ink); border-left: 1px solid var(--b2); flex-shrink: 0; overflow: hidden; transition: width var(--t-med) var(--ease); z-index: 200; position: relative; } /* Gold shimmer line on sidebar edge */ .sidebar::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient( to bottom, transparent 0%, var(--gold) 25%, var(--gold) 50%, transparent 100% ); opacity: .25; pointer-events: none; } /* ── Brand ── */ .sb-brand { padding: 18px 14px 14px; border-bottom: 1px solid var(--b1); flex-shrink: 0; position: relative; overflow: hidden; } .sb-brand::before { content: '✦'; position: absolute; top: -12px; left: -12px; font-size: 80px; color: var(--gold); opacity: .03; pointer-events: none; font-family: serif; } .sb-brand-row { display: flex; align-items: center; gap: 10px; } .sb-star { width: 34px; height: 34px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-gold); position: relative; } .sb-star i { font-size: 16px; color: var(--ink); } .sb-name { font-family: var(--ff-display); font-size: 15px; font-weight: 800; color: var(--t1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; } .sb-toggle { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--b2); border-radius: var(--r-sm); color: var(--t3); cursor: pointer; flex-shrink: 0; transition: var(--t-fast) var(--ease); } .sb-toggle:hover { background: var(--d3); color: var(--t2); border-color: var(--b3); } .sb-meta { margin-top: 6px; font-size: 11px; color: var(--t3); padding-right: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; } .sb-meta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex-shrink: 0; } /* ── Nav ── */ .sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px 6px; scrollbar-width: thin; scrollbar-color: var(--d4) transparent; } .sb-nav::-webkit-scrollbar { width: 3px; } .sb-nav::-webkit-scrollbar-thumb { background: var(--d4); border-radius: 3px; } .sb-section { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); padding: 16px 8px 5px; white-space: nowrap; overflow: hidden; } .sb-link { display: flex; align-items: center; gap: 10px; padding: 7.5px 8px; border-radius: var(--r); color: var(--t3); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: all var(--t-fast) var(--ease); position: relative; overflow: hidden; white-space: nowrap; margin-bottom: 1px; } .sb-link:hover { background: var(--d2); color: var(--t2); } .sb-link.active { background: var(--gold-soft); color: var(--gold); font-weight: 600; } .sb-link.active::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 2.5px; background: linear-gradient(to bottom, var(--gold), var(--gold2)); border-radius: 0 2px 2px 0; } .sb-ic { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; background: var(--d2); flex-shrink: 0; font-size: 13.5px; color: var(--t3); transition: all var(--t-fast) var(--ease); } .sb-link:hover .sb-ic { background: var(--d3); color: var(--t2); } .sb-link.active .sb-ic { background: var(--gold-dim); color: var(--gold); } /* Per-page icon tint */ .sb-link[href*="dashboard"] .sb-ic { color: var(--blue); } .sb-link[href*="upload_bank"] .sb-ic { color: var(--green); } .sb-link[href*="bank_explorer"] .sb-ic { color: var(--teal); } .sb-link[href*="pending_excluded"] .sb-ic { color: var(--t3); } .sb-link[href*="pending"] .sb-ic { color: var(--amber); } .sb-link[href*="accounts"] .sb-ic { color: var(--purple); } .sb-link[href*="cash"] .sb-ic { color: var(--green); } .sb-link[href*="reports"] .sb-ic { color: var(--amber); } .sb-link[href*="imports"] .sb-ic { color: var(--t2); } .sb-link[href*="settings"] .sb-ic { color: var(--t2); } .sb-link[href*="users"] .sb-ic { color: var(--blue); } .sb-link[href*="activity"] .sb-ic { color: var(--purple); } .sb-link[href*="backup"] .sb-ic { color: var(--gold); } .sb-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .sb-badge { font-size: 10px; font-weight: 700; background: var(--amb-dim); color: var(--amber); border: 1px solid rgba(244,169,34,.2); border-radius: 99px; padding: 1px 7px; line-height: 16px; min-width: 22px; text-align: center; flex-shrink: 0; font-family: var(--ff-mono); } /* ── Footer ── */ .sb-footer { padding: 10px 8px 14px; border-top: 1px solid var(--b1); flex-shrink: 0; } .sb-ver { font-size: 10px; color: var(--t4); margin-bottom: 8px; padding-right: 4px; font-family: var(--ff-mono); white-space: nowrap; overflow: hidden; } .sb-logout { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px; border-radius: var(--r); border: 1px solid var(--b2); color: var(--t3); text-decoration: none; font-size: 12.5px; font-weight: 500; transition: all var(--t-fast) var(--ease); white-space: nowrap; overflow: hidden; } .sb-logout:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); } /* ── Collapsed ── */ .sidebar.is-collapsed { width: var(--sidebar-w-sm); } .sidebar.is-collapsed .sb-name, .sidebar.is-collapsed .sb-meta, .sidebar.is-collapsed .sb-section, .sidebar.is-collapsed .sb-label, .sidebar.is-collapsed .sb-badge, .sidebar.is-collapsed .sb-logout span, .sidebar.is-collapsed .sb-ver { display: none; } .sidebar.is-collapsed .sb-ic { margin: 0 auto; } .sidebar.is-collapsed .sb-link { padding: 8px 10px; justify-content: center; } .sidebar.is-collapsed .sb-link.active::before { top: 10%; height: 80%; } .sidebar.is-collapsed .sb-nav { padding: 8px 6px; } .sidebar.is-collapsed .sb-brand { padding: 14px 10px; } .sidebar.is-collapsed .sb-brand-row { justify-content: center; } .sidebar.is-collapsed .sb-toggle { display: none; } .sidebar.is-collapsed .sb-footer { padding: 8px 10px 12px; } .sidebar.is-collapsed .sb-logout { padding: 7px 10px; justify-content: center; } /* ════════════════════════════════════════════ 5. TOPBAR ════════════════════════════════════════════ */ .topbar { height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; padding: 0 20px; background: var(--ink); border-bottom: 1px solid var(--b1); gap: 12px; position: relative; z-index: 100; } .topbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .topbar-brand { font-family: var(--ff-display); font-size: 16px; font-weight: 800; color: var(--gold); text-decoration: none; letter-spacing: -.01em; } /* Currency pill */ .cur-pill { display: flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--d2); border: 1px solid var(--b2); border-radius: 99px; font-size: 11.5px; color: var(--t2); font-weight: 600; font-family: var(--ff-mono); } .cur-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 5px var(--gold-glow); } /* User avatar */ .topbar-user { display: flex; align-items: center; gap: 8px; } .topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-dim), var(--gold-glow)); border: 1.5px solid var(--gold); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--gold); font-family: var(--ff-display); flex-shrink: 0; } .topbar-uname { font-size: 13px; color: var(--t2); font-weight: 500; white-space: nowrap; } /* ════════════════════════════════════════════ 6. CONTENT AREA ════════════════════════════════════════════ */ .content-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 18px 16px; scrollbar-width: thin; scrollbar-color: var(--d4) transparent; } .content-wrap::-webkit-scrollbar { width: 4px; } .content-wrap::-webkit-scrollbar-thumb { background: var(--d4); border-radius: 4px; } /* ════════════════════════════════════════════ 7. PAGE HEADER ════════════════════════════════════════════ */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .page-title { font-family: var(--ff-display); font-size: 21px; font-weight: 800; color: var(--t1); line-height: 1.25; letter-spacing: -.02em; } .page-sub { font-size: 12.5px; color: var(--t3); margin-top: 2px; } .page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ════════════════════════════════════════════ 8. CARDS ════════════════════════════════════════════ */ .card { background: var(--d2) !important; border: 1px solid var(--b1) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-card) !important; } .card-body { padding: 18px 20px !important; } .card-body.p-0 { padding: 0 !important; } /* ── KPI Cards ── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; } .kpi { background: var(--d2); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 14px 16px; text-decoration: none; display: block; transition: all var(--t-med) var(--ease); position: relative; overflow: hidden; } .kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--kpi-color, var(--gold)), transparent); opacity: .6; } .kpi:hover { border-color: var(--kpi-color, var(--b3)); background: var(--d3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px var(--kpi-color, transparent); text-decoration: none; } .kpi-icon { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--d3); border: 1px solid var(--b2); display: grid; place-items: center; font-size: 15px; color: var(--kpi-color, var(--gold)); margin-bottom: 10px; transition: all var(--t-fast) var(--ease); } .kpi:hover .kpi-icon { background: color-mix(in srgb, var(--kpi-color, var(--gold)) 12%, var(--d3)); box-shadow: 0 0 14px color-mix(in srgb, var(--kpi-color, var(--gold)) 25%, transparent); } .kpi-val { font-family: var(--ff-mono); font-size: 18px; font-weight: 600; color: var(--t1); line-height: 1; margin-bottom: 4px; letter-spacing: -.02em; } .kpi-label { font-size: 10.5px; color: var(--t3); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; } .kpi-badge { position: absolute; top: 14px; left: 14px; } /* KPI color variants */ .kpi--gold { --kpi-color: var(--gold); } .kpi--red { --kpi-color: var(--red); } .kpi--green { --kpi-color: var(--green); } .kpi--blue { --kpi-color: var(--blue); } .kpi--amber { --kpi-color: var(--amber); } .kpi--teal { --kpi-color: var(--teal); } .kpi--purple { --kpi-color: var(--purple); } /* ════════════════════════════════════════════ 9. TABLES ════════════════════════════════════════════ */ .tbl-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--d4) transparent; } .tbl-wrap::-webkit-scrollbar { height: 4px; } .tbl-wrap::-webkit-scrollbar-thumb { background: var(--d4); } .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--b1); vertical-align: middle; color: var(--t1) !important; transition: background var(--t-fast) var(--ease); } .tbl tbody tr:hover td { background: var(--d3) !important; color: var(--t1) !important; } .tbl thead th { padding: 10px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t2) !important; background: var(--d1); border-bottom: 1px solid var(--b2); white-space: nowrap; } .tbl tfoot td, .tbl tfoot th { padding: 11px 14px; border-top: 1px solid var(--b2); color: var(--t1); font-weight: 700; background: var(--d1); } .tbl-sticky thead th { position: sticky; top: 0; z-index: 2; } /* Month separator row */ .tbl-month-sep td { background: var(--d1) !important; color: var(--gold) !important; font-family: var(--ff-display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px !important; border-top: 1px solid var(--b2) !important; border-bottom: 1px solid var(--b1) !important; } /* Numeric columns */ .num { font-family: var(--ff-mono); font-feature-settings: 'tnum'; letter-spacing: -.01em; direction: ltr; display: inline-block; } .num-debit { color: var(--red); } .num-credit { color: var(--green); } .num-zero { color: var(--t3); } .num-warn { color: var(--amber); } /* Running balance cell */ .bal-cell { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } /* ════════════════════════════════════════════ 10. BADGES ════════════════════════════════════════════ */ .badge-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; line-height: 16px; white-space: nowrap; border: 1px solid transparent; } .bp-debit { background: var(--red-dim); color: var(--red); border-color: rgba(240,80,80,.2); } .bp-credit { background: var(--grn-dim); color: var(--green); border-color: rgba(54,217,139,.2); } .bp-neutral { background: var(--d3); color: var(--t3); border-color: var(--b2); } .bp-pending { background: var(--amb-dim); color: var(--amber); border-color: rgba(244,169,34,.2); } .bp-exclude { background: var(--d3); color: var(--t3); border-color: var(--b1); } .bp-gold { background: var(--gold-dim); color: var(--gold); border-color: rgba(232,184,75,.2); } .bp-blue { background: var(--blu-dim); color: var(--blue); border-color: rgba(78,142,247,.2); } .bp-purple { background: var(--pur-dim); color: var(--purple); border-color: rgba(167,139,250,.2); } /* ════════════════════════════════════════════ 11. BUTTONS ════════════════════════════════════════════ */ .btn-n { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r); border: 1px solid transparent; font-family: var(--ff-body); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all var(--t-fast) var(--ease); text-decoration: none; white-space: nowrap; line-height: 1.4; } .btn-n:hover { text-decoration: none; } /* Primary — Gold */ .btn-primary { background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%) !important; color: var(--ink) !important; border-color: var(--gold) !important; font-weight: 700 !important; } .btn-primary:hover { filter: brightness(1.1); box-shadow: 0 4px 14px var(--gold-glow); color: var(--ink) !important; } .btn-primary.btn-n { background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%); color: var(--ink); border-color: var(--gold); font-weight: 700; } .btn-primary.btn-n:hover { filter: brightness(1.1); box-shadow: 0 4px 14px var(--gold-glow); color: var(--ink); } /* Secondary — Ghost */ .btn-ghost { background: transparent; color: var(--t2); border-color: var(--b2); } .btn-ghost:hover { background: var(--d3); color: var(--t1); border-color: var(--b3); } /* Danger */ .btn-danger-n { background: var(--red-soft); color: var(--red); border-color: rgba(240,80,80,.25); } .btn-danger-n:hover { background: var(--red-dim); border-color: var(--red); } /* Success */ .btn-success-n { background: var(--grn-soft); color: var(--green); border-color: rgba(54,217,139,.25); } .btn-success-n:hover { background: var(--grn-dim); border-color: var(--green); } /* Sizes */ .btn-sm-n { padding: 5px 11px; font-size: 12px; border-radius: var(--r); } .btn-xs-n { padding: 3px 8px; font-size: 11px; border-radius: var(--r-sm); } .btn-icon { padding: 7px; } /* Override Bootstrap buttons to match dark theme */ .btn-outline-secondary, .btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-dark, .btn-outline-light { background: transparent !important; } .btn-outline-secondary { color: var(--t2) !important; border-color: var(--b2) !important; } .btn-outline-secondary:hover { background: var(--d3) !important; color: var(--t1) !important; border-color: var(--b3) !important; } .btn-outline-primary { color: var(--gold) !important; border-color: rgba(232,184,75,.3) !important; } .btn-outline-primary:hover { background: var(--gold-dim) !important; color: var(--gold) !important; } .btn-outline-success { color: var(--green) !important; border-color: rgba(54,217,139,.3) !important; } .btn-outline-success:hover { background: var(--grn-dim) !important; } .btn-outline-danger { color: var(--red) !important; border-color: rgba(240,80,80,.3) !important; } .btn-outline-danger:hover { background: var(--red-dim) !important; } .btn-sm { font-size: 12px !important; padding: 5px 11px !important; } .btn-xs { font-size: 11px !important; padding: 3px 8px !important; } .btn-success { background: var(--grn-dim) !important; color: var(--green) !important; border-color: rgba(54,217,139,.35) !important; } .btn-success:hover { background: rgba(54,217,139,.22) !important; } /* ════════════════════════════════════════════ 12. FORMS ════════════════════════════════════════════ */ .form-control, .form-select { background: var(--d1) !important; border: 1px solid var(--b2) !important; color: var(--t1) !important; border-radius: var(--r) !important; font-family: var(--ff-body) !important; font-size: 13.5px !important; padding: 8px 12px !important; transition: all var(--t-fast) var(--ease) !important; } .form-control:focus, .form-select:focus { border-color: var(--gold) !important; background: var(--d2) !important; box-shadow: 0 0 0 3px var(--gold-dim) !important; outline: none !important; } .form-control::placeholder { color: var(--t3) !important; } .form-label { font-size: 12px !important; font-weight: 600 !important; color: var(--t3) !important; margin-bottom: 5px !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .form-text { font-size: 11.5px !important; color: var(--t3) !important; } .form-select option { background: var(--d2) !important; } input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.5) sepia(1) hue-rotate(180deg) brightness(1.5); } .input-group-text { background: var(--d3) !important; border-color: var(--b2) !important; color: var(--t3) !important; } .form-control.is-invalid { border-color: var(--red) !important; } .form-control.num, input.num { font-family: var(--ff-mono) !important; } /* ════════════════════════════════════════════ 13. FLASH MESSAGES ════════════════════════════════════════════ */ .flash-area { position: fixed; top: calc(var(--topbar-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; min-width: 320px; max-width: 500px; pointer-events: none; } .flash { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; border: 1px solid transparent; box-shadow: var(--shadow); animation: flashIn var(--t-med) var(--ease-out) both; pointer-events: all; backdrop-filter: blur(20px); } .flash-ok { background: rgba(22,60,42,.9); color: var(--green); border-color: rgba(54,217,139,.25); } .flash-err { background: rgba(60,20,20,.9); color: var(--red); border-color: rgba(240,80,80,.25); } .flash-warn { background: rgba(55,42,15,.9); color: var(--amber); border-color: rgba(244,169,34,.25); } .flash-icon { font-size: 16px; flex-shrink: 0; } .flash-msg { flex: 1; } .flash-close { background: none; border: none; color: inherit; opacity: .5; cursor: pointer; font-size: 14px; padding: 0; } .flash-close:hover { opacity: 1; } .flash.is-hiding { animation: flashOut var(--t-fast) var(--ease) forwards; } @keyframes flashIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes flashOut { to { opacity: 0; transform: translateY(-8px) scale(.95); } } /* ════════════════════════════════════════════ 14. MODALS ════════════════════════════════════════════ */ .modal-content { background: var(--d2) !important; border: 1px solid var(--b2) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow) !important; } .modal-header { border-bottom: 1px solid var(--b1) !important; padding: 16px 20px !important; } .modal-footer { border-top: 1px solid var(--b1) !important; padding: 14px 20px !important; } .modal-body { padding: 20px !important; } .modal-title { font-family: var(--ff-display); font-weight: 700; font-size: 16px; } .btn-close { filter: invert(1) brightness(.6) !important; } .btn-close:hover { filter: invert(1) brightness(1) !important; } /* ════════════════════════════════════════════ 15. PENDING CARDS ════════════════════════════════════════════ */ .pending-card { border: 1px solid var(--b2) !important; border-radius: var(--r-lg) !important; transition: border-color var(--t-fast) var(--ease); } .pending-card:hover { border-color: var(--b3) !important; } .pending-amt-in { color: var(--green); } .pending-amt-out { color: var(--red); } .pending-dir { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; } .pending-dir.in { background: var(--grn-dim); color: var(--green); } .pending-dir.out { background: var(--red-dim); color: var(--red); } /* Split rows */ .split-row { display: grid; grid-template-columns: 1fr 160px 36px; gap: 8px; align-items: center; margin-bottom: 6px; } .split-meta { display: flex; gap: 16px; font-size: 12px; color: var(--t3); padding: 6px 0 2px; font-family: var(--ff-mono); } .split-ok { color: var(--green); } .split-warn { color: var(--amber); } /* ════════════════════════════════════════════ 16. ACCOUNT VIEW ════════════════════════════════════════════ */ .acc-hero { background: linear-gradient(135deg, var(--d2) 0%, var(--d3) 100%); border: 1px solid var(--b2); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 20px; position: relative; overflow: hidden; } .acc-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: radial-gradient(circle, var(--gold-dim) 0%, transparent 70%); pointer-events: none; } .acc-hero-name { font-family: var(--ff-display); font-size: 24px; font-weight: 800; color: var(--t1); margin-bottom: 12px; letter-spacing: -.02em; } .acc-hero-stats { display: flex; flex-wrap: wrap; gap: 24px; } .acc-hero-stat { } .acc-hero-stat-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 3px; } .acc-hero-stat-val { font-family: var(--ff-mono); font-size: 18px; font-weight: 600; color: var(--t1); } /* ════════════════════════════════════════════ 17. BANK EXPLORER ════════════════════════════════════════════ */ .filter-bar { background: var(--d2); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 18px; } .filter-bar .form-control, .filter-bar .form-select { font-size: 13px !important; padding: 7px 11px !important; } .status-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .status-tab { padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--b2); background: transparent; color: var(--t3); cursor: pointer; text-decoration: none; transition: all var(--t-fast) var(--ease); white-space: nowrap; } .status-tab:hover { background: var(--d3); color: var(--t2); text-decoration: none; } .status-tab.active { background: var(--gold-dim); color: var(--gold); border-color: rgba(232,184,75,.3); } /* ════════════════════════════════════════════ 18. CHARTS ════════════════════════════════════════════ */ .chart-card { background: var(--d2); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 22px; } .chart-title { font-family: var(--ff-display); font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .chart-title i { color: var(--gold); } /* ════════════════════════════════════════════ 19. EMPTY STATES ════════════════════════════════════════════ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; } .empty-ic { font-size: 40px; margin-bottom: 14px; opacity: .4; } .empty-title { font-family: var(--ff-display); font-size: 17px; font-weight: 700; color: var(--t2); margin-bottom: 6px; } .empty-sub { font-size: 13px; color: var(--t3); max-width: 340px; } /* ════════════════════════════════════════════ 20. ALERTS ════════════════════════════════════════════ */ .alert { background: var(--d2) !important; border-radius: var(--r-md) !important; font-size: 13.5px !important; } .alert-warning { background: var(--amb-dim) !important; color: var(--amber) !important; border-color: rgba(244,169,34,.2) !important; } .alert-danger { background: var(--red-dim) !important; color: var(--red) !important; border-color: rgba(240,80,80,.2) !important; } .alert-success { background: var(--grn-dim) !important; color: var(--green) !important; border-color: rgba(54,217,139,.2) !important; } .alert-info { background: var(--blu-dim) !important; color: var(--blue) !important; border-color: rgba(78,142,247,.2) !important; } .alert-light { background: var(--d3) !important; color: var(--t2) !important; border-color: var(--b2) !important; } .pending-alert { background: linear-gradient(135deg, rgba(244,169,34,.08), rgba(244,169,34,.04)); border: 1px solid rgba(244,169,34,.2); border-radius: var(--r-md); padding: 12px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; text-decoration: none; transition: all var(--t-fast) var(--ease); } .pending-alert:hover { background: linear-gradient(135deg, rgba(244,169,34,.12), rgba(244,169,34,.06)); border-color: rgba(244,169,34,.35); text-decoration: none; } .pending-alert-icon { font-size: 20px; color: var(--amber); flex-shrink: 0; } .pending-alert-text { font-size: 13.5px; font-weight: 600; color: var(--amber); } .pending-alert-sub { font-size: 12px; color: var(--t3); } .pending-alert-arrow { margin-inline-start: auto; color: var(--t3); font-size: 14px; flex-shrink: 0; } /* ════════════════════════════════════════════ 21. OFFCANVAS (mobile) ════════════════════════════════════════════ */ .offcanvas { background: var(--ink) !important; border-inline-start: 1px solid var(--b2) !important; } .offcanvas-header { border-bottom: 1px solid var(--b1) !important; } .list-group-item { background: transparent !important; border-color: var(--b1) !important; color: var(--t2) !important; transition: all var(--t-fast) var(--ease) !important; } .list-group-item:hover { background: var(--d2) !important; color: var(--t1) !important; } .list-group-item.active { background: var(--gold-soft) !important; color: var(--gold) !important; border-color: var(--b1) !important; } /* ════════════════════════════════════════════ 22. MOBILE NAV ════════════════════════════════════════════ */ .mobile-nav { display: flex; background: var(--ink); border-top: 1px solid var(--b2); padding: 6px 0 max(6px, env(safe-area-inset-bottom)); flex-shrink: 0; } .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 4px; text-decoration: none; color: var(--t3); font-size: 9.5px; font-weight: 600; letter-spacing: .03em; transition: color var(--t-fast) var(--ease); position: relative; } .mobile-nav-item i { font-size: 20px; } .mobile-nav-item span { font-size: 9px; } .mobile-nav-item.active { color: var(--gold); } .mobile-nav-item .nav-badge-mini { position: absolute; top: 2px; left: 50%; margin-left: 4px; background: var(--amber); color: var(--ink); font-size: 9px; font-weight: 800; border-radius: 99px; padding: 0 4px; line-height: 14px; min-width: 14px; text-align: center; font-family: var(--ff-mono); } /* ════════════════════════════════════════════ 23. LOGIN PAGE ════════════════════════════════════════════ */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--ink); position: relative; overflow: hidden; } .login-wrap::before { content: ''; position: absolute; top: -20%; left: -20%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(232,184,75,.07) 0%, transparent 70%); pointer-events: none; } .login-wrap::after { content: ''; position: absolute; bottom: -20%; right: -20%; width: 50%; height: 50%; background: radial-gradient(circle, rgba(78,142,247,.05) 0%, transparent 70%); pointer-events: none; } .login-card { width: 100%; max-width: 400px; background: var(--d2); border: 1px solid var(--b2); border-radius: var(--r-xl); padding: 36px 34px; box-shadow: var(--shadow); position: relative; z-index: 1; } .login-star { width: 52px; height: 52px; background: linear-gradient(135deg, var(--gold), var(--gold2)); border-radius: var(--r-lg); display: grid; place-items: center; font-size: 24px; color: var(--ink); margin: 0 auto 18px; box-shadow: var(--shadow-gold); } .login-title { font-family: var(--ff-display); font-size: 22px; font-weight: 800; color: var(--t1); text-align: center; margin-bottom: 4px; letter-spacing: -.02em; } .login-sub { font-size: 13px; color: var(--t3); text-align: center; margin-bottom: 28px; } .login-eye { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--t3); cursor: pointer; padding: 0; font-size: 15px; } .login-eye:hover { color: var(--t2); } /* ════════════════════════════════════════════ 25. MISC UTILITIES ════════════════════════════════════════════ */ .section-title { font-family: var(--ff-display); font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .section-title i { color: var(--gold); font-size: 15px; } .section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to left, transparent, var(--b2)); margin-inline-start: 10px; } .divider { height: 1px; background: var(--b1); margin: 16px 0; } .text-gold { color: var(--gold) !important; } .text-muted { color: var(--t3) !important; } .fw-num { font-family: var(--ff-mono); font-weight: 600; } .lh-1 { line-height: 1; } /* Pulse dot for live indicator */ .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(54,217,139,.4); animation: pulse 2s ease infinite; display: inline-block; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(54,217,139,.4); } 70% { box-shadow: 0 0 0 6px rgba(54,217,139,0); } 100% { box-shadow: 0 0 0 0 rgba(54,217,139,0); } } /* Skeleton loader */ .skeleton { background: linear-gradient(90deg, var(--d2) 0%, var(--d4) 50%, var(--d2) 100%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--r); } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Hover row highlight for account table */ .account-row { cursor: pointer; } .account-row:hover td:first-child { color: var(--gold) !important; } /* Collapsible section */ .collapse-trigger { cursor: pointer; user-select: none; } .collapse-trigger .chevron { transition: transform var(--t-fast) var(--ease); } .collapse-trigger.open .chevron { transform: rotate(180deg); } /* Pagination */ .pager { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px 0 4px; flex-wrap: wrap; } .pager-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--b2); background: transparent; color: var(--t3); font-family: var(--ff-mono); font-size: 12.5px; text-decoration: none; transition: all var(--t-fast) var(--ease); } .pager-btn:hover { background: var(--d3); color: var(--t1); text-decoration: none; } .pager-btn.active { background: var(--gold-dim); color: var(--gold); border-color: rgba(232,184,75,.3); } .pager-btn.disabled { opacity: .35; pointer-events: none; } /* ════════════════════════════════════════════ 24. PRINT STYLES — محسّنة بالكامل ════════════════════════════════════════════ */ @media print { /* إخفاء عناصر الواجهة */ .sidebar, .topbar, .mobile-nav, .page-actions, .no-print, .flash-area, .filter-bar, .btn, .btn-n, button:not(.print-keep), .offcanvas, .modal, .acc-hero, form:not(.print-keep) { display: none !important; } /* تصحيح الـ layout */ html, body { overflow: visible !important; height: auto !important; background: #ffffff !important; color: #000000 !important; font-size: 11pt !important; font-family: 'Segoe UI', Arial, sans-serif !important; direction: rtl !important; } .app-shell, .app-main { overflow: visible !important; height: auto !important; display: block !important; } .content-wrap { overflow: visible !important; padding: 0 !important; margin: 0 !important; } /* الكروت */ .card { border: 1px solid #cccccc !important; background: #ffffff !important; box-shadow: none !important; break-inside: avoid; margin-bottom: 12pt !important; } .card-body { padding: 8pt 10pt !important; } /* الجداول */ .tbl { width: 100% !important; border-collapse: collapse !important; font-size: 9pt !important; } .tbl thead th { background: #f0f0f0 !important; color: #000000 !important; border: 1px solid #999 !important; padding: 5pt 7pt !important; font-weight: 700 !important; } .tbl tbody td { color: #000000 !important; border: 1px solid #cccccc !important; padding: 4pt 7pt !important; background: #ffffff !important; } .tbl tbody tr:nth-child(even) td { background: #f9f9f9 !important; } .tbl tfoot td, .tbl tfoot th { background: #eeeeee !important; color: #000000 !important; border: 1px solid #999 !important; font-weight: 700 !important; padding: 5pt 7pt !important; } .tbl-month-sep td { background: #e8e8e8 !important; color: #333333 !important; font-weight: 700 !important; border: 1px solid #bbb !important; } /* الأرقام */ .num { color: #000000 !important; font-family: 'Courier New', monospace !important; } .num-debit { color: #cc0000 !important; } .num-credit { color: #006600 !important; } /* الـ badges */ .badge-pill { border: 1px solid #888 !important; color: #000000 !important; background: #f0f0f0 !important; padding: 1pt 5pt !important; font-size: 8pt !important; } .bp-debit { color: #cc0000 !important; border-color: #cc0000 !important; } .bp-credit { color: #006600 !important; border-color: #006600 !important; } /* رأس الطباعة */ .print-header { display: block !important; margin-bottom: 12pt !important; padding-bottom: 8pt !important; border-bottom: 2pt solid #000 !important; } /* فواصل الصفحة */ .page-break-before { page-break-before: always !important; } .page-break-after { page-break-after: always !important; } .no-break { break-inside: avoid !important; } /* تجنب قطع الصفوف في الجداول */ .tbl tbody tr { break-inside: avoid !important; } /* خيارات الطباعة */ @page { margin: 1.5cm 1cm; size: A4 portrait; } } /* ════════════════════════════════════════════ 26. RESPONSIVE — محسّن شامل للجوال ════════════════════════════════════════════ */ /* ── Tablet (992px وأقل) ── */ @media (max-width: 991.98px) { .sidebar { display: none; } .content-wrap { padding: 12px 12px 80px; } .topbar { padding: 0 12px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .page-head { margin-bottom: 12px; gap: 8px; } .page-title { font-size: 17px; } .chart-card { padding: 14px 14px; } .acc-hero { padding: 16px 16px; } .acc-hero-name { font-size: 19px; } .filter-bar { padding: 10px 12px; } .tbl thead th, .tbl tbody td { padding: 8px 10px; font-size: 12.5px; } .pending-card .card-body { padding: 14px 14px !important; } } /* ── Mobile (768px وأقل) ── */ @media (max-width: 767.98px) { .content-wrap { padding: 10px 10px 76px; } /* KPI Grid - 2 columns */ .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi { padding: 12px 12px; } .kpi-val { font-size: 16px; } .kpi-label { font-size: 9.5px; } .kpi-icon { width: 30px; height: 30px; font-size: 13px; margin-bottom: 8px; } /* Hero section */ .acc-hero { padding: 14px 14px; margin-bottom: 12px; } .acc-hero-name { font-size: 17px; margin-bottom: 8px; } .acc-hero-stats { gap: 12px; flex-wrap: wrap; } .acc-hero-stat-val { font-size: 15px; } /* Tables - scroll horizontally */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl thead th { font-size: 10px; padding: 7px 8px; white-space: nowrap; } .tbl tbody td { font-size: 12px; padding: 8px 8px; } /* Pending cards */ .pending-card .card-body { padding: 12px 12px !important; } .split-row { grid-template-columns: 1fr 120px 32px; gap: 6px; } /* Page header */ .page-head { flex-direction: column; align-items: stretch; margin-bottom: 10px; } .page-title { font-size: 16px; } .page-actions { display: flex; flex-wrap: wrap; gap: 6px; } .page-actions .btn-n { font-size: 12px; padding: 6px 10px; } /* Filter bar */ .filter-bar { flex-direction: column; gap: 8px !important; padding: 10px 10px; } .filter-bar .form-control, .filter-bar .form-select { max-width: 100% !important; width: 100% !important; } /* Status tabs */ .status-tabs { gap: 4px; } .status-tab { font-size: 11px; padding: 4px 9px; } /* Forms */ .form-control, .form-select { font-size: 14px !important; } /* منع iOS zoom */ /* Modal */ .modal-dialog { margin: 10px; } .modal-body { padding: 14px !important; } .modal-header { padding: 12px 14px !important; } .modal-footer { padding: 10px 14px !important; } .modal-footer { flex-wrap: wrap; gap: 6px; } .modal-footer .btn-n { flex: 1; justify-content: center; min-width: 80px; } /* Topbar mobile */ .topbar { height: 48px; } .topbar-brand { font-size: 14px; } /* Card body */ .card-body { padding: 12px 12px !important; } .section-title { font-size: 13px; margin-bottom: 10px; } /* Chart */ .chart-card { padding: 12px 12px; } canvas { max-height: 200px; } } /* ── Small Mobile (480px وأقل) ── */ @media (max-width: 479.98px) { .content-wrap { padding: 8px 8px 72px; } /* Single column KPI */ .kpi-grid { grid-template-columns: 1fr 1fr; gap: 7px; } .kpi { padding: 10px 10px; } .kpi-val { font-size: 14px; } /* Account hero - stack */ .acc-hero-stats { gap: 8px; } .acc-hero-stat-val { font-size: 13px; } /* Compact tables */ .tbl thead th { font-size: 9.5px; padding: 6px 6px; } .tbl tbody td { font-size: 11.5px; padding: 7px 6px; } /* Bottom nav */ .mobile-nav-item i { font-size: 18px; } .mobile-nav-item span { font-size: 8px; } /* Pending form */ .split-row { grid-template-columns: 1fr 100px 28px; gap: 4px; } /* Page title */ .page-title { font-size: 15px; } } /* ── Touch improvements ── */ @media (hover: none) and (pointer: coarse) { .btn-n, .status-tab, .sb-link, .mobile-nav-item, .account-row, .pager-btn { min-height: 44px; /* Apple HIG minimum tap target */ } .btn-n { padding: 10px 14px; } .btn-sm-n { min-height: 38px; padding: 8px 12px; } .btn-xs-n { min-height: 34px; } .tbl tbody tr:hover td { background: transparent !important; } /* no hover on touch */ .kpi:hover { transform: none !important; } /* no hover transform on touch */ } /* Mobile nav تحسينات */ .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; padding-bottom: max(6px, env(safe-area-inset-bottom)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(7, 10, 15, 0.95) !important; } /* ── Table column visibility ── */ @media (min-width: 768px) { .d-md-table-cell { display: table-cell !important; } } @media (max-width: 767.98px) { .tbl .d-none.d-md-table-cell { display: none !important; } } /* ── Large screen table columns ── */ @media (min-width: 992px) { .d-lg-table-cell { display: table-cell !important; } } @media (max-width: 991.98px) { .tbl .d-none.d-lg-table-cell { display: none !important; } } /* ════ filter-bar على الشاشات الصغيرة (< 480px) ════ */ @media (max-width: 479.98px) { .filter-bar > form { flex-direction: column; } .filter-bar input[type="date"] { max-width: 100% !important; } .status-tabs { flex-wrap: wrap; gap: 4px; } }