/* ╔══════════════════════════════════════════════════════════════════════════════╗ ║ VAIRSA ERP — Unified Design System v5.0 ║ ║ النظام البصري الموحّد — مستخرج من PO_Redesign.html ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ الهوية البصرية — Dark-First: ║ ║ ║ ║ --bg-deep #07090F خلفية الصفحة الرئيسية ║ ║ --bg-card #0E1118 سطح البطاقات والـ panels ║ ║ --bg-surface #141720 خلفية الـ action bars والـ thead ║ ║ --bg-elevated#1B1F2E hover backgrounds ║ ║ --border rgba(255,255,255,0.07) حدود عادية خفية ║ ║ --border-glow rgba(56,189,248,0.25) حدود مضيئة عند focus/hover ║ ║ --accent #38BDF8 اللون الأساسي — Sky Blue ║ ║ --emerald #34D399 النجاح والمبالغ ║ ║ --rose #FB7185 الخطأ والإلغاء ║ ║ --purple #A78BFA الحالات المعلقة ║ ║ --amber #FBBF24 التحذيرات والمفتوح ║ ║ --text-1 #F0F4FF نص رئيسي ║ ║ --text-2 #8892AA نص ثانوي ║ ║ --text-3 #4A5168 نص خافت / labels ║ ║ ║ ║ Lite Mode: أضف class="lite" على ║ ║ الكل يتغير تلقائياً بدون أي تعديل في صفحاتك ║ ║ ║ ║ الفونت — أضف في _Host.cshtml: ║ ║ ║ ║ ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ TABLE OF CONTENTS: ║ ║ 1. CSS Variables (Dark Default) ║ ║ 2. Lite Mode Overrides ║ ║ 3. Base Reset & Body ║ ║ 4. Noise Texture Overlay ║ ║ 5. AppBar ║ ║ 6. Drawer / Sidebar ║ ║ 7. Detail Pages — Container ║ ║ 8. Detail Pages — Header ║ ║ 9. Detail Pages — Action Bar & Search ║ ║ 10. Detail Pages — Filters ║ ║ 11. Detail Pages — Tables ║ ║ 12. Detail Pages — Row Action Buttons ║ ║ 13. Stats Grid Cards ║ ║ 14. Entity / PO Cards (Card View) ║ ║ 15. Avatar Colors ║ ║ 16. Status Badges ║ ║ 17. Payment Badges ║ ║ 18. Buttons ║ ║ 19. Totals Bar ║ ║ 20. Dashboard Pages ║ ║ 21. Form Pages ║ ║ 22. Alerts ║ ║ 23. Loading & Spinners ║ ║ 24. Empty States & Permission Denied ║ ║ 25. Sidebar Nav (.vairsa-nav) ║ ║ 26. Page Header Row ║ ║ 27. Utility ║ ║ 28. MudBlazor Overrides ║ ║ 29. Scrollbar ║ ║ 30. Print ║ ║ 31. Responsive ║ ╚══════════════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ 1. CSS VARIABLES — Dark (Default) نفس متغيرات PO_Redesign.html بالضبط ═══════════════════════════════════════════════════════════════════ */ :root { /* الخلفيات */ --bg-deep: #07090F; --bg-card: #0E1118; --bg-surface: #141720; --bg-elevated: #1B1F2E; /* الحدود */ --border: rgba(255,255,255,0.07); --border-glow: rgba(56,189,248,0.25); /* Accent — Sky Blue */ --accent: #38BDF8; --accent-hover: #7DD3FC; --accent-dim: rgba(56,189,248,0.12); --accent-mid: rgba(56,189,248,0.40); /* الألوان الدلالية */ --emerald: #34D399; --emerald-hover: #10B981; --emerald-dim: rgba(52,211,153,0.12); --rose: #FB7185; --rose-hover: #F43F5E; --rose-dim: rgba(251,113,133,0.12); --purple: #A78BFA; --purple-hover: #8B5CF6; --purple-dim: rgba(167,139,250,0.12); --amber: #FBBF24; --amber-hover: #F59E0B; --amber-dim: rgba(251,191,36,0.12); --teal: #2DD4BF; --teal-dim: rgba(45,212,191,0.12); --cyan: #22D3EE; --cyan-dim: rgba(34,211,238,0.12); --orange: #FB923C; --orange-dim: rgba(251,146,60,0.12); --indigo: #818CF8; --indigo-dim: rgba(129,140,248,0.12); /* النصوص */ --text-1: #F0F4FF; --text-2: #8892AA; --text-3: #4A5168; /* الظلال */ --shadow: 0 8px 40px rgba(0,0,0,0.6); --shadow-sm: 0 4px 16px rgba(0,0,0,0.4); --shadow-accent: 0 0 30px rgba(56,189,248,0.15); /* Typography */ --font: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', 'Courier New', monospace; /* Sizing */ --radius: 14px; --radius-sm: 8px; --radius-xs: 6px; /* Gradient stops للأيقونات */ --grad-blue: #2563EB; --grad-sky: #0284C7; --grad-cyan: #0891B2; --grad-teal: #0D9488; --grad-emerald: #059669; --grad-green: #16A34A; --grad-lime: #65A30D; --grad-amber: #D97706; --grad-orange: #EA580C; --grad-red: #DC2626; --grad-rose: #E11D48; --grad-pink: #DB2777; --grad-purple: #7C3AED; --grad-indigo: #4F46E5; --grad-slate: #475569; } /* ═══════════════════════════════════════════════════════════════════ 2. LITE MODE — body.lite نفس Lite Mode من PO_Redesign.html ═══════════════════════════════════════════════════════════════════ */ body.lite { --bg-deep: #EEF2F7; --bg-card: #FFFFFF; --bg-surface: #F4F7FB; --bg-elevated: #E8EDF5; --border: rgba(99,120,160,0.15); --border-glow: rgba(2,132,199,0.35); --accent: #0284C7; --accent-hover: #0369A1; --accent-dim: rgba(2,132,199,0.09); --accent-mid: rgba(2,132,199,0.35); --emerald: #059669; --emerald-dim: rgba(5,150,105,0.09); --rose: #BE123C; --rose-dim: rgba(190,18,60,0.09); --purple: #6D28D9; --purple-dim: rgba(109,40,217,0.09); --amber: #B45309; --amber-dim: rgba(180,83,9,0.09); --text-1: #0F172A; --text-2: #374151; --text-3: #9CA3AF; --shadow: 0 2px 12px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.05); --shadow-sm: 0 1px 6px rgba(15,23,42,0.06); --shadow-accent: 0 4px 20px rgba(2,132,199,0.13); } /* Lite: خلفية gradient mesh */ body.lite { background: radial-gradient(ellipse at 15% 20%, rgba(186,230,255,0.35) 0%, transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(196,181,253,0.20) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(167,243,208,0.15) 0%, transparent 60%), #EEF2F7 !important; } /* Lite: AppBar أبيض شفاف */ body.lite .mud-appbar.custom-appbar, body.lite .mud-appbar[class*="custom-appbar"], body.lite .mud-appbar[style], body.lite header.mud-appbar, body.lite .mud-appbar { background: rgba(255,255,255,0.88) !important; backdrop-filter: blur(24px); border-bottom: 1px solid rgba(99,120,160,0.12) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(15,23,42,0.06) !important; } body.lite .mud-appbar * { color: var(--text-1) !important; } /* Lite: Drawer */ body.lite .mud-drawer, body.lite .mud-drawer-content, body.lite .mud-drawer > div, body.lite .mud-drawer-content > div, body.lite .custom-drawer { background-color: #E8EDF5 !important; } /* Lite: stat cards */ body.lite .stat-card, body.lite .vairsa-stat-card { background: #FFF !important; border: 1px solid rgba(99,120,160,0.13) !important; box-shadow: var(--shadow) !important; } body.lite .stat-card:hover, body.lite .vairsa-stat-card:hover { box-shadow: 0 8px 24px rgba(15,23,42,0.10), 0 0 0 1px rgba(2,132,199,0.20) !important; transform: translateY(-2px); } body.lite .stat-card.blue { border-top: 3px solid #0284C7 !important; } body.lite .stat-card.green { border-top: 3px solid #059669 !important; } body.lite .stat-card.purple { border-top: 3px solid #6D28D9 !important; } body.lite .stat-card.amber { border-top: 3px solid #B45309 !important; } body.lite .card-blue .vairsa-stat-card { border-top: 3px solid #0284C7 !important; } body.lite .card-emerald .vairsa-stat-card { border-top: 3px solid #059669 !important; } /* Lite: table */ body.lite .detail-page thead th, body.lite .detail-page .mud-table-head .mud-table-cell { background: #F8FAFC !important; color: #6B7280 !important; border-bottom: 1px solid rgba(99,120,160,0.12) !important; } body.lite .detail-page tbody tr, body.lite .detail-page .mud-table-row { border-bottom-color: rgba(99,120,160,0.08) !important; } body.lite .detail-page tbody tr:hover, body.lite .detail-page .mud-table-row:hover { background: rgba(2,132,199,0.03) !important; } body.lite .detail-page tbody td, body.lite .detail-page .mud-table-body .mud-table-cell { color: #1E293B !important; } body.lite .detail-page tbody td.bold { color: var(--text-1) !important; } /* Lite: cards وpanels */ body.lite .detail-page .main-content-card, body.lite .entity-card, body.lite .po-card { background: #FFF !important; border-color: rgba(99,120,160,0.13) !important; box-shadow: var(--shadow) !important; } body.lite .entity-card:hover, body.lite .po-card:hover { box-shadow: 0 10px 28px rgba(15,23,42,0.10) !important; border-color: rgba(2,132,199,0.25) !important; } /* Lite: action sections */ body.lite .detail-page .action-section, body.lite .detail-page .filters-section, body.lite .detail-page .table-section { background: #FFF !important; } /* Lite: header section يبقى dark دائماً */ body.lite .detail-page .card-header-section { background: #07090F !important; } /* Lite: controls bar / totals */ body.lite .vairsa-totals-bar, body.lite .controls-bar { background: #FFF !important; border-color: rgba(99,120,160,0.13) !important; box-shadow: var(--shadow) !important; } /* Lite: search input */ body.lite .search-input, body.lite .detail-page .search-input { background: var(--bg-surface) !important; color: var(--text-1) !important; border-color: rgba(99,120,160,0.20) !important; } body.lite .search-input:focus, body.lite .detail-page .search-input:focus { background: #FFF !important; border-color: var(--accent) !important; } /* Lite: fix white text on filter labels & inputs */ body.lite .detail-page .mud-input-label, body.lite .detail-page .mud-input-label-animated { color: var(--text-2) !important; } body.lite .detail-page .vairsa-select .mud-select-input, body.lite .detail-page .vairsa-datepicker .mud-input-slot { color: var(--text-1) !important; } /* Lite: pagination / rows-per-page text */ body.lite .mud-table-pagination, body.lite .mud-table-pagination * { color: var(--text-1) !important; } /* Lite: MudBlazor paper */ body.lite .detail-page .mud-paper, body.lite .detail-page .mud-card { background: #FFF !important; } /* Lite: form fields */ body.lite .detail-page .form-input, body.lite .detail-page .form-select, body.lite .detail-page .form-textarea { background: var(--bg-surface) !important; border-color: rgba(99,120,160,0.20) !important; color: var(--text-1) !important; } /* Lite: scrollbar */ body.lite ::-webkit-scrollbar-track { background: var(--bg-deep); } body.lite ::-webkit-scrollbar-thumb { background: #CBD5E1; } body.lite ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Lite: entity stats strip */ body.lite .entity-stats { background: var(--bg-elevated) !important; } body.lite .entity-name { color: var(--text-1) !important; } body.lite .entity-email { color: #FFFFFF !important; } /* Lite: noise texture invisible */ body.lite::before { opacity: 0; } /* ═══════════════════════════════════════════════════════════════════ 3. BASE RESET & BODY ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg-deep); color: var(--text-1); min-height: 100vh; overflow-x: hidden; transition: background 0.3s ease; } /* ═══════════════════════════════════════════════════════════════════ 4. NOISE TEXTURE OVERLAY طبقة texture خفية تعطي عمق للخلفية الداكنة ═══════════════════════════════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; /* ✅ لا يمنع النقر على أي عنصر */ z-index: -1; /* 🔧 FIX: كان 0 — تغيير لـ -1 يمنعه من إخفاء أي عنصر تفاعلي */ opacity: 0.4; } /* ═══════════════════════════════════════════════════════════════════ 5. APP BAR ═══════════════════════════════════════════════════════════════════ */ :root { --mud-palette-surface: var(--bg-card); --mud-palette-background: var(--bg-deep); --mud-palette-appbar-background: #07090F; --mud-palette-appbar-text: #FFFFFF; --mud-elevation-1: 0 2px 8px rgba(0,0,0,0.5); } .mud-appbar.custom-appbar, .mud-appbar[class*="custom-appbar"], .mud-appbar[style], header.mud-appbar, .mud-appbar { background: rgba(7,9,15,0.92) !important; backdrop-filter: blur(20px); border-bottom: 1px solid var(--border) !important; box-shadow: 0 1px 0 rgba(56,189,248,0.08) !important; } .mud-appbar *, .mud-appbar .mud-typography, .mud-appbar .mud-button, .mud-appbar a, .mud-appbar span { color: white !important; } .mud-card, .mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover-paper) { background-color: var(--bg-card) !important; } /* ═══════════════════════════════════════════════════════════════════ 6. DRAWER / SIDEBAR ═══════════════════════════════════════════════════════════════════ */ .mud-drawer, .mud-drawer-content, .mud-drawer > div, .mud-drawer-content > div { background-color: #0E1118 !important; } .mud-nav-menu { background-color: transparent !important; } .custom-drawer { background-color: #0E1118 !important; } /* ═══════════════════════════════════════════════════════════════════ 7. DETAIL PAGES — CONTAINER ═══════════════════════════════════════════════════════════════════ */ .detail-page { background: var(--bg-deep); min-height: 100vh; padding: 0; font-family: var(--font); } .detail-page .list-wrapper { padding: 20px; min-height: calc(100vh - 64px); } .detail-page .list-card { max-width: 1200px; margin: 20px auto; } .detail-page .list-card-full { margin: 15px; } .detail-page .main-content-card { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); overflow: visible; /* 🔧 FIX: كان hidden — يمنع ظهور Dropdown/Datepicker */ } /* ═══════════════════════════════════════════════════════════════════ 8. DETAIL PAGES — HEADER الهيدر دائماً dark حتى في Lite Mode ═══════════════════════════════════════════════════════════════════ */ .detail-page .card-header-section { background: #07090F; padding: 18px 28px; position: relative; overflow: visible; /* 🔧 FIX: كان hidden — يمنع ظهور Popups من الهيدر */ } /* خط Accent أسفل الهيدر */ .detail-page .card-header-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, transparent 100%); } /* ضوء خلفي خفيف */ .detail-page .card-header-section::before { content: ''; position: absolute; top: -40%; right: -5%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,0.05) 0%, transparent 70%); pointer-events: none; } .detail-page .card-header-title { color: white !important; font-size: 21px; font-weight: 700; margin: 0; position: relative; z-index: 1; } /* Theme Toggle */ .detail-page .theme-toggle-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; position: relative; z-index: 1; } .detail-page .theme-toggle-btn:hover { background: var(--accent-dim); border-color: var(--border-glow); transform: scale(1.08); } .detail-page .theme-toggle-btn .icon { color: white; font-size: 18px; } /* ═══════════════════════════════════════════════════════════════════ 9. DETAIL PAGES — ACTION BAR & SEARCH ═══════════════════════════════════════════════════════════════════ */ .detail-page .action-section { padding: 14px 24px; background: var(--bg-surface); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .detail-page .search-box { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-deep); min-width: 240px; flex: 1; transition: border-color 0.2s, box-shadow 0.2s; } .detail-page .search-box:focus-within { border-color: var(--border-glow); box-shadow: 0 0 0 3px var(--accent-dim); } .detail-page .search-input { border: none; outline: none; font-size: 13px; background: transparent; color: var(--text-1); width: 100%; font-family: var(--font); } .detail-page .search-input::placeholder { color: var(--text-3); } /* MudBlazor input overrides */ .detail-page .mud-input-root { color: var(--text-1) !important; } .detail-page .mud-input-outlined .mud-input-outlined-border { border-color: var(--border) !important; border-radius: var(--radius-sm) !important; } .detail-page .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--border-glow) !important; } .detail-page .mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--accent) !important; } body:not(.lite) .detail-page .mud-input-label { color: #FFFFFF !important; } .detail-page .no-results, .vairsa-no-results { color: var(--rose); font-size: 13px; font-weight: 600; display: inline-block; margin-top: 6px; } .detail-page .btn-text { display: inline; } /* ═══════════════════════════════════════════════════════════════════ 10. DETAIL PAGES — FILTERS ═══════════════════════════════════════════════════════════════════ */ .detail-page .filters-section { padding: 14px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr 1.5fr 2fr auto; gap: 12px; align-items: end; } .detail-page .filters-section > div { width: 100%; } .detail-page .vairsa-select .mud-input-outlined-border, .detail-page .vairsa-datepicker .mud-input-outlined-border { border-color: var(--border) !important; border-radius: var(--radius-sm) !important; } .detail-page .vairsa-select:hover .mud-input-outlined-border, .detail-page .vairsa-datepicker:hover .mud-input-outlined-border { border-color: var(--border-glow) !important; } body:not(.lite) .detail-page .vairsa-select .mud-select-input { color: #FFFFFF !important; } /* ═══════════════════════════════════════════════════════════════════ 11. DETAIL PAGES — TABLES ═══════════════════════════════════════════════════════════════════ */ .detail-page .table-section { padding: 20px; background: var(--bg-card); } .detail-page .table-container { overflow-x: auto; padding: 0 20px 20px; } /* HTML table */ .detail-page .data-table, .detail-page table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg-card) !important; } .detail-page .data-table thead th, .detail-page thead th { padding: 11px 16px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; color: var(--accent); text-transform: uppercase; background: var(--bg-surface) !important; border-bottom: 1px solid var(--border); white-space: nowrap; } body.lite .detail-page .data-table thead th, body.lite .detail-page thead th { background: #FFFFFF !important; color: #1E293B !important; } .detail-page .data-table tbody tr, .detail-page tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s; } .detail-page .data-table tbody tr:hover, .detail-page tbody tr:hover { background: rgba(255,255,255,0.025) !important; } .detail-page tbody tr:last-child { border-bottom: none; } .detail-page .data-table tbody td, .detail-page tbody td { padding: 12px 16px; text-align: center; color: var(--text-1) !important; vertical-align: middle; font-size: 13px; } .detail-page tbody td.bold { color: var(--text-1) !important; font-weight: 600; } .detail-page tbody td.mono { font-family: var(--mono); font-size: 12px; } /* MudBlazor MudTable */ .detail-page .mud-table { background: var(--bg-card) !important; } .detail-page .mud-table-head .mud-table-cell { background: var(--bg-surface) !important; color: #38BDF8 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; border-bottom: 1px solid var(--border) !important; white-space: nowrap; } .detail-page .mud-table-body .mud-table-cell { color: var(--text-1) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; font-size: 13px !important; } .detail-page .mud-table-row:hover { background: rgba(255,255,255,0.025) !important; } .detail-page .mud-table-row:nth-child(even) { background: rgba(255,255,255,0.01) !important; } .detail-page .mud-table-pagination { background: var(--bg-surface) !important; color: var(--text-1) !important; border-top: 1px solid var(--border) !important; } .detail-page .mud-table-pagination .mud-typography { color: var(--text-1) !important; } body:not(.lite) .detail-page .mud-icon-button:not(.row-action-btn) { color: #FFFFFF !important; } body.lite .detail-page .mud-icon-button:not(.row-action-btn) { color: var(--text-2) !important; } .detail-page .mud-icon-button:not(.row-action-btn):hover { background: var(--bg-elevated) !important; } /* رقم PO/PR */ .po-num { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; } .vairsa-link-underline { color: var(--accent); text-decoration: none; font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: var(--accent-dim); transition: all 0.15s; } .vairsa-link-underline:hover { background: var(--accent); color: #050810; } /* ═══════════════════════════════════════════════════════════════════ 12. DETAIL PAGES — ROW ACTION BUTTONS ═══════════════════════════════════════════════════════════════════ */ .detail-page .row-action-btn { min-width: 30px !important; width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 2px !important; border-radius: 7px !important; border: none !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: transform 0.15s, filter 0.15s; } .detail-page .row-action-btn:hover { transform: scale(1.1); filter: brightness(1.2); } .detail-page .row-action-btn:active { transform: scale(0.96); } .detail-page .actions-cell { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } /* الألوان */ .detail-page .btn-preview { background: var(--accent-dim) !important; color: var(--accent) !important; } .detail-page .btn-edit { background: var(--teal-dim) !important; color: var(--teal) !important; } .detail-page .btn-approve { background: var(--emerald-dim) !important; color: var(--emerald) !important; } .detail-page .btn-delete { background: var(--rose-dim) !important; color: var(--rose) !important; } .detail-page .btn-info { background: var(--accent-dim) !important; color: var(--accent) !important; } .detail-page .btn-gray { background: rgba(74,81,104,0.2) !important; color: #FFFFFF !important; } .detail-page .btn-purple { background: var(--purple-dim) !important; color: var(--purple) !important; } .detail-page .btn-warning { background: var(--amber-dim) !important; color: var(--amber) !important; } /* Backward-compat */ .detail-page .icon-btn { width: 30px; height: 30px; border: none; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform 0.15s, filter 0.15s; } .detail-page .icon-btn:hover { transform: scale(1.1); filter: brightness(1.2); } .detail-page .icon-preview { background: var(--accent-dim) !important; color: var(--accent) !important; } .detail-page .icon-edit { background: var(--teal-dim) !important; color: var(--teal) !important; } .detail-page .icon-delete { background: var(--rose-dim) !important; color: var(--rose) !important; } .detail-page .icon-approve { background: var(--emerald-dim) !important; color: var(--emerald) !important; } .detail-page .icon-info { background: var(--accent-dim) !important; color: var(--accent) !important; } .detail-page .icon-gray { background: rgba(74,81,104,0.2) !important; color: #FFFFFF !important; } .detail-page .icon-teal { background: var(--teal-dim) !important; color: var(--teal) !important; } .detail-page .icon-block { background: var(--rose-dim) !important; color: var(--rose) !important; } .detail-page .icon-activate { background: var(--emerald-dim) !important; color: var(--emerald) !important; } .detail-page .icon-purple { background: var(--purple-dim) !important; color: var(--purple) !important; } .detail-page .icon-warning { background: var(--amber-dim) !important; color: var(--amber) !important; } /* MudBlazor row-action hover fix */ .detail-page .row-action-btn:hover, .detail-page .mud-icon-button.row-action-btn:hover { filter: brightness(1.2) !important; transform: scale(1.1) !important; background-color: unset !important; } /* ═══════════════════════════════════════════════════════════════════ 13. STATS GRID CARDS ═══════════════════════════════════════════════════════════════════ */ .stats-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; padding: 24px; width: 100%; box-sizing: border-box; } .stats-grid-container .mud-card, .stats-grid-container .mud-paper { background: var(--bg-card) !important; } .vairsa-stat-card { background: var(--bg-card) !important; border: 1px solid var(--border); border-radius: var(--radius); position: relative; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; min-height: 130px; } .vairsa-stat-card.mud-card { background: var(--bg-card) !important; } .vairsa-stat-card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-accent); transform: translateY(-4px); } /* Radial glow */ .vairsa-stat-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .vairsa-stat-card:hover::before { opacity: 1; } .card-blue::before { background: radial-gradient(ellipse at 0% 0%, rgba(56,189,248,0.06) 0%, transparent 70%); } .card-emerald::before { background: radial-gradient(ellipse at 0% 0%, rgba(52,211,153,0.06) 0%, transparent 70%); } .card-purple::before { background: radial-gradient(ellipse at 0% 0%, rgba(167,139,250,0.06) 0%, transparent 70%); } .card-amber::before { background: radial-gradient(ellipse at 0% 0%, rgba(251,191,36,0.06) 0%, transparent 70%); } .card-rose::before { background: radial-gradient(ellipse at 0% 0%, rgba(251,113,133,0.06) 0%, transparent 70%); } .vairsa-stat-card .mud-card-content { padding: 0 !important; height: 100%; } .vairsa-stat-content { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 18px; padding: 22px 26px; height: 100%; position: relative; z-index: 1; } .vairsa-stat-icon-wrapper { width: 56px; height: 56px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; } .vairsa-stat-card:hover .vairsa-stat-icon-wrapper { transform: scale(1.08) rotate(4deg); } .card-blue .vairsa-stat-icon-wrapper { background: var(--accent-dim); color: var(--accent); } .card-emerald .vairsa-stat-icon-wrapper { background: var(--emerald-dim); color: var(--emerald); } .card-purple .vairsa-stat-icon-wrapper { background: var(--purple-dim); color: var(--purple); } .card-amber .vairsa-stat-icon-wrapper { background: var(--amber-dim); color: var(--amber); } .card-rose .vairsa-stat-icon-wrapper { background: var(--rose-dim); color: var(--rose); } .vairsa-stat-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .vairsa-stat-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; line-height: 1.2; } .vairsa-stat-value { font-size: 26px; font-weight: 700; font-family: var(--mono); letter-spacing: -1px; line-height: 1; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; } .card-blue .vairsa-stat-value { color: var(--accent); } .card-emerald .vairsa-stat-value { color: var(--emerald); } .card-purple .vairsa-stat-value { color: var(--purple); } .card-amber .vairsa-stat-value { color: var(--amber); } .card-rose .vairsa-stat-value { color: var(--rose); } .vairsa-stat-unit { font-size: 11px; font-weight: 400; color: var(--text-3); font-family: var(--font); } .vairsa-stat-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; margin-top: 6px; width: fit-content; } .trend-up { background: var(--emerald-dim); color: var(--emerald); } .trend-down { background: var(--rose-dim); color: var(--rose); } /* الـ stat-card class المباشر (بدون vairsa-stat-card) */ .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .stat-card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-accent); } .stat-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .stat-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .stat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; } .blue .stat-icon { background: var(--accent-dim); color: var(--accent); } .green .stat-icon { background: var(--emerald-dim); color: var(--emerald); } .purple .stat-icon { background: var(--purple-dim); color: var(--purple); } .amber .stat-icon { background: var(--amber-dim); color: var(--amber); } .stat-value { font-size: 26px; font-weight: 700; font-family: var(--mono); letter-spacing: -1px; line-height: 1; } .blue .stat-value { color: var(--accent); } .green .stat-value { color: var(--emerald); } .purple .stat-value { color: var(--purple); } .amber .stat-value { color: var(--amber); } .stat-sub { font-size: 11px; color: var(--text-3); margin-top: 5px; } /* ═══════════════════════════════════════════════════════════════════ 14. ENTITY / PO CARDS (Card View) ═══════════════════════════════════════════════════════════════════ */ .entity-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding: 24px; } .entity-card, .po-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; cursor: pointer; } .entity-card:hover, .po-card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-accent); transform: translateY(-2px); } /* Stripe جانبي للـ PO cards */ .po-card-stripe { position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: var(--accent); } .po-card-stripe.green { background: var(--emerald); } .po-card-stripe.purple { background: var(--purple); } .po-card-stripe.amber { background: var(--amber); } .po-card-stripe.rose { background: var(--rose); } .po-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; } .po-card-num { font-family: var(--mono); font-size: 13px; color: var(--accent); font-weight: 600; } .po-card-date { font-size: 11px; color: var(--text-3); margin-top: 3px; } .po-card-sup { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .po-card-sup-name { font-size: 14px; font-weight: 600; color: var(--text-1); } .po-card-sup-dept { font-size: 11px; color: var(--text-3); margin-top: 2px; } .po-card-amount { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--emerald); margin-bottom: 14px; } .po-card-amount span { font-size: 12px; color: var(--text-3); margin-right: 4px; } .po-card-footer { display: flex; align-items: center; justify-content: space-between; } .po-card-actions { display: flex; gap: 6px; } /* Entity card layout */ .entity-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .entity-card--inactive { opacity: 0.55; } .entity-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; color: white; letter-spacing: 0.5px; flex-shrink: 0; } .entity-avatar--sm { width: 32px; height: 32px; font-size: 11px; } .entity-status-badge { position: absolute; top: 13px; left: 13px; } .entity-name { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 0; line-height: 1.3; } .entity-email { font-size: 12px; color: var(--text-2); margin: 0; word-break: break-all; } .entity-stats { display: flex; align-items: center; gap: 6px; width: 100%; background: var(--bg-elevated); border-radius: var(--radius-sm); padding: 10px 8px; margin-top: 4px; } .entity-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; } .entity-stat-num { font-size: 14px; font-weight: 800; color: var(--accent); font-family: var(--mono); } .entity-stat-ok { color: var(--emerald) !important; } .entity-stat-warn { color: var(--amber) !important; } .entity-stat-lbl { font-size: 10px; color: var(--text-3); white-space: nowrap; } .entity-stat-divider { width: 1px; height: 26px; background: var(--border); } .entity-card-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; padding-top: 6px; border-top: 1px solid var(--border); width: 100%; margin-top: 4px; } /* Supplier cell inline (in tables) */ .sup-cell { display: flex; align-items: center; gap: 8px; } .sup-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; } /* Card grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } /* ═══════════════════════════════════════════════════════════════════ 15. AVATAR COLORS ═══════════════════════════════════════════════════════════════════ */ .av-blue { background: linear-gradient(135deg, #38BDF8, #0EA5E9); } .av-teal { background: linear-gradient(135deg, #2DD4BF, #0D9488); } .av-emerald { background: linear-gradient(135deg, #34D399, #059669); } .av-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); } .av-orange { background: linear-gradient(135deg, #FB923C, #EA580C); } .av-cyan { background: linear-gradient(135deg, #22D3EE, #0891B2); } .av-rose { background: linear-gradient(135deg, #FB7185, #E11D48); } .av-indigo { background: linear-gradient(135deg, #818CF8, #4F46E5); } /* ═══════════════════════════════════════════════════════════════════ 16. STATUS BADGES ═══════════════════════════════════════════════════════════════════ */ .detail-page .badge, .status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: 0.3px; } .detail-page .badge::before, .status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* نفس classes الـ HTML */ .s-open, .detail-page .badge-warning { background: var(--amber-dim); color: var(--amber); } .s-submitted, .detail-page .badge-purple { background: var(--purple-dim); color: var(--purple); } .s-confirmed, .detail-page .badge-info { background: var(--accent-dim); color: var(--accent); } .s-closed, .detail-page .badge-success { background: var(--emerald-dim); color: var(--emerald); } .s-rejected, .detail-page .badge-danger { background: var(--rose-dim); color: var(--rose); } .detail-page .badge-gray { background: rgba(74,81,104,0.2); color: var(--text-2); } /* ═══════════════════════════════════════════════════════════════════ 17. PAYMENT BADGES ═══════════════════════════════════════════════════════════════════ */ .pay-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; display: inline-block; } .pay-cash { background: var(--emerald-dim); color: var(--emerald); } .pay-credit { background: var(--amber-dim); color: var(--amber); } /* ═══════════════════════════════════════════════════════════════════ 18. BUTTONS ═══════════════════════════════════════════════════════════════════ */ .detail-page .btn, .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; border: none; transition: all 0.18s ease; text-decoration: none; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* Primary */ .btn-primary { background: var(--accent) !important; color: #050810 !important; box-shadow: 0 0 20px rgba(56,189,248,0.3); } .btn-primary:hover { background: var(--accent-hover) !important; box-shadow: 0 0 30px rgba(56,189,248,0.5); } /* Ghost */ .btn-ghost { background: var(--bg-elevated) !important; color: var(--text-1) !important; border: 1px solid var(--border) !important; } .btn-ghost:hover { color: var(--text-1) !important; border-color: var(--border-glow) !important; } /* Success */ .btn-success { background: var(--emerald) !important; color: #050810 !important; } .btn-success:hover { background: var(--emerald-hover) !important; } /* Danger */ .btn-danger { background: var(--rose) !important; color: white !important; } .btn-danger:hover { background: var(--rose-hover) !important; } /* Purple */ .btn-purple { background: var(--purple) !important; color: #050810 !important; } .btn-purple:hover { background: var(--purple-hover) !important; } /* Dark Green */ .btn-dark-green { background: #059669 !important; color: white !important; } .btn-dark-green:hover { background: #047857 !important; } /* Outline */ .btn-outline { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-1) !important; } .btn-outline:hover { border-color: var(--border-glow) !important; color: var(--text-1) !important; background: var(--accent-dim) !important; } /* MudBlazor overrides */ .mud-button-filled.btn-primary { background: var(--accent) !important; color: #050810 !important; } .mud-button-filled.btn-primary:hover { filter: brightness(1.1) !important; } .mud-button-filled.btn-outline { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-1) !important; } /* Sizes */ .btn-sm { padding: 6px 14px !important; font-size: 12px !important; } .btn-lg { padding: 12px 28px !important; font-size: 15px !important; } .btn-full { width: 100% !important; justify-content: center !important; } .detail-page .btn-group { display: flex; gap: 12px; justify-content: flex-end; margin-top: 10px; } /* Badge counter */ .badge-count { background: var(--accent); color: #050810; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; font-family: var(--mono); } /* View Toggle */ .view-toggle { display: flex; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; } .vt-btn { padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-3); border: none; background: none; transition: all 0.15s; font-family: var(--font); display: flex; align-items: center; gap: 5px; } .vt-btn.active { background: var(--bg-elevated); color: var(--accent); } /* ═══════════════════════════════════════════════════════════════════ 19. TOTALS BAR ═══════════════════════════════════════════════════════════════════ */ .vairsa-totals-bar, .totals-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 20px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; } .total-item { display: flex; align-items: center; gap: 7px; } .total-label { font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; } .total-val { font-family: var(--mono); font-weight: 600; color: var(--text-1); font-size: 13px; } .total-val.accent { color: var(--accent); } .total-val.emerald { color: var(--emerald); } .total-sep { color: var(--text-3); } .ratio-pill { margin-right: auto; padding: 4px 12px; border-radius: 999px; background: var(--accent-dim); border: 1px solid var(--border-glow); font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; } /* inline totals text */ .vairsa-totals-row { margin-top: 8px; font-size: 13px; padding: 8px 24px; color: var(--text-2); font-family: var(--font); } .vairsa-totals-row b { color: var(--text-1); margin-left: 10px; margin-right: 4px; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════ 20. DASHBOARD PAGES ═══════════════════════════════════════════════════════════════════ */ .dashboard-page { background: var(--bg-deep); min-height: 100vh; padding: 40px 20px; font-family: var(--font); } .dashboard-page .page-header-wrapper { max-width: 1400px; margin: 0 auto 50px; padding: 0 20px; } .dashboard-page .page-hero { background: #07090F; border: 1px solid var(--border); padding: 50px 40px; border-radius: 20px; border-right: 4px solid var(--accent); position: relative; overflow: visible; /* 🔧 FIX: كان hidden */ } .dashboard-page .page-hero::before { content: ''; position: absolute; top: -60%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(56,189,248,0.04) 0%, transparent 70%); pointer-events: none; } .dashboard-page .page-hero-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 10px; } .dashboard-page .page-title { color: white; font-size: 42px; font-weight: 800; margin: 0; letter-spacing: -0.5px; flex: 1; } .dashboard-page .page-subtitle { color: var(--text-3); font-size: 17px; margin: 0; } .dashboard-page .theme-toggle-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .dashboard-page .theme-toggle-btn:hover { background: var(--accent-dim); border-color: var(--border-glow); transform: scale(1.08) rotate(8deg); } .dashboard-page .theme-toggle-btn .icon { font-size: 22px; color: white; } .dashboard-page .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; max-width: 1400px; margin: 0 auto; padding: 0 20px; } .dashboard-page .account-card { background: var(--bg-card); border-radius: var(--radius); padding: 30px 26px; transition: all 0.2s; border: 1px solid var(--border); position: relative; overflow: visible; /* 🔧 FIX: كان hidden */ } .dashboard-page .account-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.2s; transform-origin: right; } .dashboard-page .account-card:hover { transform: translateY(-4px); border-color: var(--border-glow); box-shadow: var(--shadow-accent); } .dashboard-page .account-card:hover::after { transform: scaleX(1); } .dashboard-page .card-icon-container { width: 60px; height: 60px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: transform 0.2s; } .dashboard-page .account-card:hover .card-icon-container { transform: scale(1.06) rotate(3deg); } .dashboard-page .card-icon { color: white; font-size: 28px; } /* bg classes للأيقونات */ .bg-blue { background: var(--grad-blue); } .bg-sky { background: var(--grad-sky); } .bg-cyan { background: var(--grad-cyan); } .bg-teal { background: var(--grad-teal); } .bg-green { background: var(--grad-emerald); } .bg-amber { background: var(--grad-amber); } .bg-orange { background: var(--grad-orange); } .bg-red { background: var(--grad-red); } .bg-rose { background: var(--grad-rose); } .bg-pink { background: var(--grad-pink); } .bg-purple { background: var(--grad-purple); } .bg-indigo { background: var(--grad-indigo); } .bg-slate { background: var(--grad-slate); } .bg-navy { background: #07090F; } .bg-lime { background: var(--grad-lime); } .dashboard-page .card-title { color: var(--text-1); font-size: 19px; font-weight: 700; margin-bottom: 10px; } .dashboard-page .card-description { color: var(--text-2); font-size: 13px; line-height: 1.7; margin-bottom: 22px; min-height: 44px; } .dashboard-page .card-action { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #050810; padding: 9px 22px; border-radius: var(--radius-sm); font-weight: 700; font-size: 13px; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; } .dashboard-page .card-action:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(56,189,248,0.3); } /* ═══════════════════════════════════════════════════════════════════ 21. FORM PAGES ═══════════════════════════════════════════════════════════════════ */ .detail-page .form-wrapper { display: flex; justify-content: center; align-items: flex-start; min-height: calc(100vh - 150px); padding: 20px; } .detail-page .form-card { max-width: 820px; width: 100%; margin: 28px auto; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); overflow: visible; } .detail-page .form-card-sm { max-width: 540px; width: 100%; margin: 28px auto; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); overflow: visible; } .detail-page .form-card-lg { max-width: 1060px; width: 100%; margin: 28px auto; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); overflow: visible; } /* الـ header يأخذ border-radius العلوي من البطاقة */ .detail-page .card-header-section { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; } .detail-page .form-body { padding: 28px 32px; } .detail-page .form-group { margin-bottom: 6px; } .detail-page .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; letter-spacing: 0.3px; } .detail-page .form-label .required { color: var(--rose); margin-right: 3px; } .detail-page .form-label .optional { font-weight: 400; color: var(--text-3); font-size: 11px; } .detail-page .form-input, .detail-page .form-select, .detail-page .form-textarea { width: 100%; padding: 10px 14px; font-size: 13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-1); transition: all 0.2s; box-sizing: border-box; font-family: var(--font); } .detail-page .form-input:focus, .detail-page .form-select:focus, .detail-page .form-textarea:focus { outline: none; border-color: var(--border-glow); box-shadow: 0 0 0 3px var(--accent-dim); } .detail-page .form-input::placeholder, .detail-page .form-textarea::placeholder { color: var(--text-3); } .detail-page .form-input:disabled, .detail-page .form-select:disabled { opacity: 0.45; cursor: not-allowed; } .detail-page .form-readonly { background: var(--bg-surface) !important; cursor: not-allowed; color: var(--text-2) !important; } .detail-page .form-textarea { min-height: 100px; resize: vertical; } .detail-page .form-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; display: block; } .detail-page .section-title { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 16px; margin-top: 4px; text-transform: uppercase; letter-spacing: 1.2px; display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .detail-page .password-wrapper { position: relative; } .detail-page .password-wrapper .form-input { padding-left: 40px; } .detail-page .password-toggle { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-2); padding: 4px; display: flex; align-items: center; } .detail-page .password-toggle:hover { color: var(--accent); } .detail-page .checkbox-group { display: flex; align-items: center; } .detail-page .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-1); cursor: pointer; font-weight: 500; } .detail-page .checkbox-label input[type="checkbox"], .detail-page .checkbox-label input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .detail-page .checkbox-row { display: flex; gap: 24px; flex-wrap: wrap; } .detail-page .divider { height: 1px; background: var(--border); margin: 24px 0; } .detail-page .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .detail-page .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } .detail-page .four-col { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; } .detail-page .footer-actions { padding: 16px 28px; background: var(--bg-card); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; align-items: center; } /* ═══════════════════════════════════════════════════════════════════ 22. ALERTS ═══════════════════════════════════════════════════════════════════ */ .detail-page .alert { padding: 12px 18px; border-radius: var(--radius-sm); margin: 14px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; gap: 10px; } .detail-page .alert-success { background: var(--emerald-dim); color: var(--emerald); border: 1px solid rgba(52,211,153,0.2); } .detail-page .alert-error { background: var(--rose-dim); color: var(--rose); border: 1px solid rgba(251,113,133,0.2); } .detail-page .alert-warning { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(251,191,36,0.2); } .detail-page .alert-info { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border-glow); } .detail-page .alert-close { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; padding: 0; opacity: 0.7; transition: opacity 0.15s; } .detail-page .alert-close:hover { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════ 23. LOADING & SPINNERS ═══════════════════════════════════════════════════════════════════ */ @keyframes vairsa-spin { to { transform: rotate(360deg); } } @keyframes vairsa-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.8; } } .detail-page .loading-section { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 360px; gap: 18px; background: var(--bg-card); } .detail-page .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: vairsa-spin 0.75s linear infinite; } .detail-page .spinner-sm { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.15); border-top-color: white; border-radius: 50%; animation: vairsa-spin 0.75s linear infinite; display: inline-block; } .detail-page .loading-icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--border-glow); display: flex; align-items: center; justify-content: center; animation: vairsa-pulse 1.4s ease-in-out infinite; } .detail-page .loading-text { color: var(--accent); font-size: 14px; font-weight: 600; } .detail-page .loading-sub { color: var(--text-3); font-size: 12px; margin-top: -10px; } .vairsa-progress { margin: 4px 0; } /* ═══════════════════════════════════════════════════════════════════ 24. EMPTY STATES & PERMISSION DENIED ═══════════════════════════════════════════════════════════════════ */ .detail-page .empty-state { text-align: center; padding: 48px 24px; color: var(--text-2); } .detail-page .empty-state p { margin-top: 10px; font-size: 14px; } .detail-page .no-results, .vairsa-no-results { color: var(--rose); font-size: 13px; font-weight: 600; display: inline-block; margin-top: 6px; } .detail-page .center-container { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 24px; } .detail-page .message-card { background: var(--bg-card); border-radius: var(--radius); padding: 40px; text-align: center; max-width: 440px; border: 1px solid var(--border); } .detail-page .message-icon { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } .detail-page .warning-icon { background: var(--amber-dim); } .detail-page .error-icon { background: var(--rose-dim); } .detail-page .success-icon { background: var(--emerald-dim); } .detail-page .message-card h3 { color: var(--text-1); margin-bottom: 10px; font-size: 18px; font-weight: 700; } .detail-page .message-card p { color: var(--text-2); margin-bottom: 24px; } /* ═══════════════════════════════════════════════════════════════════ 25. SIDEBAR NAV (.vairsa-nav) ═══════════════════════════════════════════════════════════════════ */ .vairsa-nav { background: transparent !important; padding: 8px 6px !important; } /* ── كل link ── */ .vairsa-nav .mud-nav-link { border-radius: 10px !important; margin: 3px 0 !important; padding: 10px 14px !important; transition: background 0.18s ease, color 0.18s ease !important; position: relative !important; color: rgba(255,255,255,0.38) !important; font-size: 13px !important; font-weight: 500 !important; } /* ── خط accent يمين (Dark) ── */ .vairsa-nav .mud-nav-link::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 3px; border-radius: 2px 0 0 2px; background: var(--accent); opacity: 0; transition: opacity 0.18s ease; } /* ── Hover ── */ .vairsa-nav .mud-nav-link:hover { background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.80) !important; } .vairsa-nav .mud-nav-link:hover::after { opacity: 0.5; } .vairsa-nav .mud-nav-link:active { transform: scale(0.98) !important; } /* ── Icons ── */ .vairsa-nav .mud-nav-link .mud-icon-root, .vairsa-nav .mud-nav-link svg { color: rgba(255,255,255,0.28) !important; fill: rgba(255,255,255,0.28) !important; transition: color 0.18s, fill 0.18s !important; } .vairsa-nav .mud-nav-link:hover .mud-icon-root, .vairsa-nav .mud-nav-link:hover svg { color: rgba(255,255,255,0.78) !important; fill: rgba(255,255,255,0.78) !important; } /* ── Disabled ── */ .vairsa-nav .mud-nav-link.mud-disabled { opacity: 0.30 !important; pointer-events: none !important; } /* ── Active ── */ .vairsa-nav .mud-nav-link.active, .vairsa-nav .mud-nav-link[aria-current] { background: var(--accent-dim) !important; color: var(--accent) !important; font-weight: 700 !important; } .vairsa-nav .mud-nav-link.active::after, .vairsa-nav .mud-nav-link[aria-current]::after { opacity: 1; } .vairsa-nav .mud-nav-link.active .mud-icon-root, .vairsa-nav .mud-nav-link[aria-current] .mud-icon-root, .vairsa-nav .mud-nav-link.active svg, .vairsa-nav .mud-nav-link[aria-current] svg { color: var(--accent) !important; fill: var(--accent) !important; } /* ══════════════════════════════════════════ Lite Mode (body.lite) — Arctic White الـ drawer background: #E8EDF5 من Section 2 ══════════════════════════════════════════ */ body.lite .vairsa-nav .mud-nav-link { color: #6b7e99 !important; font-weight: 500 !important; } /* خط accent يسار في Lite */ body.lite .vairsa-nav .mud-nav-link::after { right: auto; left: 0; border-radius: 0 2px 2px 0; background: var(--accent); } body.lite .vairsa-nav .mud-nav-link:hover { background: var(--accent-dim) !important; color: #0d1f3c !important; } body.lite .vairsa-nav .mud-nav-link .mud-icon-root, body.lite .vairsa-nav .mud-nav-link svg { color: #a0b3cc !important; fill: #a0b3cc !important; } body.lite .vairsa-nav .mud-nav-link:hover .mud-icon-root, body.lite .vairsa-nav .mud-nav-link:hover svg { color: var(--accent) !important; fill: var(--accent) !important; } body.lite .vairsa-nav .mud-nav-link.active, body.lite .vairsa-nav .mud-nav-link[aria-current] { background: var(--accent-dim) !important; color: var(--accent) !important; } body.lite .vairsa-nav .mud-nav-link.active .mud-icon-root, body.lite .vairsa-nav .mud-nav-link[aria-current] .mud-icon-root, body.lite .vairsa-nav .mud-nav-link.active svg, body.lite .vairsa-nav .mud-nav-link[aria-current] svg { color: var(--accent) !important; fill: var(--accent) !important; } /* ── Retry + Loading ── */ .nav-retry-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; } .nav-loading-bar { margin: 4px 8px; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════════ 26. PAGE HEADER ROW ═══════════════════════════════════════════════════════════════════ */ .page-header-row { display: flex; align-items: center; justify-content: space-between; width: 100%; } .page-header-left { display: flex; align-items: center; gap: 12px; } .page-header-right { display: flex; align-items: center; gap: 8px; } /* Page icon (مثل PO_Redesign) */ .page-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(56,189,248,0.25), rgba(56,189,248,0.08)); border: 1px solid var(--border-glow); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 0 20px rgba(56,189,248,0.1); } .page-title-group { display: flex; align-items: center; gap: 14px; } .page-title { font-size: 22px; font-weight: 700; color: var(--text-1); letter-spacing: -0.3px; } .page-subtitle { font-size: 12px; color: var(--text-3); margin-top: 3px; font-family: var(--mono); } .header-actions { display: flex; align-items: center; gap: 10px; } /* ═══════════════════════════════════════════════════════════════════ 27. UTILITY ═══════════════════════════════════════════════════════════════════ */ .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .vairsa-mono { font-family: var(--mono); } .amount-cell { font-family: var(--mono); font-size: 12px; color: var(--text-1); } .table-count { font-family: var(--mono); font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); font-weight: 600; } .table-title { font-size: 13px; font-weight: 600; color: var(--text-2); } .table-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); } .controls-sep { width: 1px; height: 24px; background: var(--border); } .controls-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; } .search-wrap { flex: 1; min-width: 220px; position: relative; display: flex; align-items: center; } .search-icon { position: absolute; right: 12px; font-size: 15px; color: var(--text-3); } .search-input { width: 100%; padding: 9px 36px 9px 14px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); font-family: var(--font); font-size: 13px; outline: none; transition: border-color 0.2s; } .search-input:focus { border-color: var(--border-glow); box-shadow: 0 0 0 3px rgba(56,189,248,0.08); } .search-input::placeholder { color: var(--text-3); } .filter-select { padding: 9px 14px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); font-family: var(--font); font-size: 13px; outline: none; cursor: pointer; transition: border-color 0.2s; } .filter-select:focus, .filter-select:hover { border-color: var(--border-glow); color: var(--text-1); } .pr-link { font-family: var(--mono); font-size: 12px; color: var(--purple); text-decoration: none; font-weight: 500; padding: 2px 6px; border-radius: 5px; background: var(--purple-dim); transition: all 0.15s; } .pr-link:hover { color: #C4B5FD; } /* ═══════════════════════════════════════════════════════════════════ 28. MUDBLAZOR OVERRIDES ⚠️ لا تعدّل هذا القسم إلا عند تغيير إصدار MudBlazor ═══════════════════════════════════════════════════════════════════ */ /* ── Select & Paper داخل .detail-page ── */ .detail-page .mud-select { color: var(--text-1) !important; } .detail-page .mud-select-item { color: var(--text-1) !important; background: var(--bg-card) !important; } .detail-page .mud-select-item:hover { background: var(--bg-elevated) !important; } .detail-page .mud-picker { background: var(--bg-card) !important; color: var(--text-1) !important; } .detail-page .mud-paper { background: var(--bg-card) !important; color: var(--text-1) !important; } .detail-page .mud-dialog { background: var(--bg-card) !important; } .detail-page .mud-checkbox .mud-typography { color: var(--text-1) !important; } .detail-page .mud-nav-link.active, .detail-page .mud-nav-link[aria-current] { color: var(--accent) !important; } /* ── نص Input و TextField ── */ .mud-input-root, .mud-input-slot, .mud-input-control .mud-input, .mud-input .mud-input-slot { color: var(--text-1) !important; } /* ── Label ── */ body:not(.lite) .mud-input-label, body:not(.lite) .mud-input-label-animated { color: #FFFFFF !important; } /* ── نص MudSwitch ── */ .mud-switch .mud-typography, .mud-switch-span, .mud-switch-base + span { color: var(--text-1) !important; } /* ── MudSelect Dropdown — يُرسم خارج .detail-page في الـ DOM ── */ .mud-popover-paper { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; } .mud-list-item-text .mud-typography, .mud-list .mud-list-item .mud-typography, .mud-select-item .mud-item { color: var(--text-1) !important; } .mud-list-item:hover, .mud-list-item-clickable:hover { background: var(--bg-card) !important; } /* ── Lite Mode ── */ body.lite .mud-input-root, body.lite .mud-input-slot { color: var(--text-1) !important; } body.lite .mud-input-label, body.lite .mud-input-label-animated { color: var(--text-2) !important; } body.lite .mud-switch .mud-typography { color: var(--text-1) !important; } body.lite .mud-popover-paper { background: #FFFFFF !important; border-color: rgba(99,120,160,0.15) !important; } body.lite .mud-list-item-text .mud-typography, body.lite .mud-list .mud-list-item .mud-typography { color: var(--text-1) !important; } /* ═══════════════════════════════════════════════════════════════════ 29. SCROLLBAR ═══════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: #2A2F42; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #3A4055; } /* ═══════════════════════════════════════════════════════════════════ 30. PRINT ═══════════════════════════════════════════════════════════════════ */ @media print { .hideWhenPrint { display: none !important; } body { background: white !important; color: black !important; overflow: visible !important; /* للسماح للمتصفح برؤية باقي المحتوى */ } body::before { display: none; } .detail-page { background: white !important; padding: 0 !important; } .detail-page .main-content-card { border: none !important; } .detail-page .card-header-section { background: white !important; border-bottom: 2px solid black !important; } .detail-page .card-header-section::after, .detail-page .card-header-section::before { display: none; } .detail-page .card-header-title { color: black !important; } .detail-page .action-section, .detail-page .filters-section, .detail-page .theme-toggle-btn, .detail-page .btn-group { display: none !important; } .detail-page thead th { background: #F1F5F9 !important; color: black !important; } .detail-page tbody td { color: black !important; } } /* ═══════════════════════════════════════════════════════════════════ 31. RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 1200px) { .detail-page .btn-text { display: none; } } @media (max-width: 1024px) { .detail-page .filters-section { grid-template-columns: 1fr 1fr; } .detail-page .four-col { grid-template-columns: 1fr 1fr; } .detail-page .three-col { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .stats-grid-container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .dashboard-page .page-title { font-size: 28px; } .dashboard-page .page-hero { padding: 30px 20px; } .dashboard-page .cards-grid { grid-template-columns: 1fr; gap: 16px; } .detail-page .action-section { padding: 12px 14px; } .detail-page .filters-section { grid-template-columns: 1fr; } .detail-page .list-card { margin: 10px; } .detail-page .row-action-btn { width: 26px !important; height: 26px !important; min-width: 26px !important; } .detail-page .two-col, .detail-page .three-col, .detail-page .four-col { grid-template-columns: 1fr; } .entity-cards-grid { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; } .stats-grid-container { grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; } .vairsa-stat-content { padding: 18px 20px; } .vairsa-stat-value { font-size: 22px; } .vairsa-stat-icon-wrapper { width: 50px; height: 50px; } } @media (max-width: 600px) { .detail-page .form-card { margin: 10px; } .detail-page .form-body { padding: 16px; } .detail-page .btn-group { flex-direction: column; } .detail-page .btn-group .btn { width: 100%; justify-content: center; } .detail-page .checkbox-row { flex-direction: column; gap: 10px; } .detail-page .message-card { padding: 24px; } .detail-page .card-header-section { padding: 14px 18px; } .detail-page .card-header-title { font-size: 17px; } .entity-cards-grid { grid-template-columns: 1fr; } .stats-grid-container { grid-template-columns: 1fr; } } /* ضبط محاذاة أزرار الإجراءات لتكون لليمين (أو الوسط حسب الرغبة) */ .detail-page .actions-cell { display: flex; gap: 4px; align-items: center; justify-content: flex-start; /* في RTL هذا يعني اليمين */ } /* ─── إصلاح قائمة الحسابات (Autocomplete) ─── */ /* الحاوية الأساسية */ .account-suggestions-wrapper { position: relative; width: 100%; } .account-suggestions-wrapper { position: relative; } .account-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #1B1F2E; /* نفس لون الـ Dark Theme لديك */ border: 1px solid var(--accent); z-index: 1000; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } .suggestion-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); } .suggestion-item:hover, .suggestion-active { background: var(--accent); color: #000; } /* تنسيق النصوص داخل السطر */ .suggestion-no { font-family: monospace; font-weight: bold; color: #8b4513; /* لون بني غامق يناسب الثيم */ font-size: 13px; } .suggestion-name { color: #333; font-size: 14px; text-align: right; flex: 1; margin-left: 10px; } /* ─── FIX: Account Autocomplete inside table ─── */ /* المشكلة: table-container overflow:auto يقطع الـ dropdown */ .detail-page .table-container { overflow: visible !important; } .detail-page table { overflow: visible !important; } .detail-page td { overflow: visible !important; position: relative; } /* تصميم القائمة */ .account-suggestions-wrapper { position: relative; } .account-suggestions { position: fixed !important; /* fixed بدل absolute لأن overflow يقتله */ z-index: 99999; background: var(--bg-elevated, #1B1F2E) !important; border: 1px solid var(--border-glow, rgba(56,189,248,0.4)) !important; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; min-width: 280px; max-width: 420px; max-height: 240px; overflow-y: auto !important; padding: 4px 0; } .suggestion-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s; background: transparent; } .suggestion-item:hover, .suggestion-item.suggestion-active { background: rgba(56,189,248,0.12) !important; } .suggestion-name { font-size: 13px; color: var(--text-1, #F0F4FF); flex: 1; text-align: right; } .suggestion-no { font-family: var(--mono, monospace); font-size: 12px; color: var(--accent, #38BDF8); font-weight: 600; background: rgba(56,189,248,0.1); padding: 2px 7px; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════ Guide Dialog — دليل الاستخدام أضف هذا الكود في نهاية vairsa-theme.css أو site.css ═══════════════════════════════════════════════════════════════ */ /* Container */ .guide-dialog-wrap { background: var(--bg-card); border-radius: var(--radius); max-width: 640px; } /* Step Row */ .guide-step { display: flex; gap: 16px; margin-bottom: 16px; padding: 16px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border); transition: border-color 0.2s; } .guide-step:hover { border-color: var(--border-glow); } /* Step Number Circle */ .guide-step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; } .guide-num-accent { background: var(--accent-dim); border: 1px solid var(--border-glow); color: var(--accent); } .guide-num-emerald { background: var(--emerald-dim); border: 1px solid rgba(52,211,153,0.25); color: var(--emerald); } .guide-num-purple { background: var(--purple-dim); border: 1px solid rgba(167,139,250,0.25); color: var(--purple); } .guide-num-amber { background: var(--amber-dim); border: 1px solid rgba(251,191,36,0.25); color: var(--amber); } .guide-num-teal { background: var(--teal-dim); border: 1px solid rgba(45,212,191,0.25); color: var(--teal); } /* Step Content */ .guide-step-content { flex: 1; } .guide-step-title { font-weight: 600; color: var(--text-1); margin-bottom: 4px; font-size: 14px; } .guide-step-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; } .mud-dialog { background: var(--bg-card) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; } .mud-dialog .mud-paper { background: var(--bg-card) !important; box-shadow: none !important; } /* الـ container والـ overlay يجب أن يكونا فوق كل شيء */ .mud-dialog-container { background: transparent !important; z-index: 1401 !important; } .mud-overlay { z-index: 1200 !important; /* كان 1400 — خفّضناه ليكون تحت الـ popover */ } /* الـ popover والـ picker يجب أن يكونا فوق الـ overlay دائماً */ .mud-popover, .mud-popover-paper, .mud-picker-content, .mud-picker-container, .mud-picker-inline { z-index: 1199 !important; pointer-events: auto !important; } .mud-popover, .mud-picker-paper, .mud-popover-paper { z-index: 1300 !important; } /* أزرار داخل الـ picker */ .mud-picker-calendar-day button, .mud-picker-calendar-day, .mud-button-root.mud-icon-button, .mud-picker .mud-button-root { pointer-events: auto !important; cursor: pointer !important; } /* Lite Mode */ body.lite .mud-dialog { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important; } body.lite .mud-dialog .mud-paper { background: #FFFFFF !important; } /* ═══════════════════════════════════════════════════════════════════ 32. VAIRSA CUSTOM DATE PICKER بديل — يطابق تصميم VAIRSA الداكن الاستخدام: راجع HR/Pages/Position/AssignEmployeeDialog.razor ═══════════════════════════════════════════════════════════════════ */ /* ── حقل العرض — يُظهر التاريخ المختار ── */ .vairsa-date-field { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text-1); transition: all 0.2s; font-family: var(--mono); letter-spacing: 1px; user-select: none; } .vairsa-date-field:hover { border-color: var(--border-glow); box-shadow: 0 0 0 3px var(--accent-dim); } /* ── حاوية التقويم الرئيسية ── */ .vairsa-calendar { background: var(--bg-card); border: 1.5px solid var(--border-glow); border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } /* ── هيدر التقويم — أزرق بـ gradient ── */ .vc-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(135deg, var(--accent), #0284c7); } .vc-month-label { font-size: 14px; font-weight: 700; color: white; font-family: var(--font); letter-spacing: 0.3px; } /* ── أزرار التنقل بين الشهور ── */ .vc-nav-btn { background: rgba(255, 255, 255, 0.15); border: none; border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: background 0.15s; padding: 0; } .vc-nav-btn:hover { background: rgba(255, 255, 255, 0.3); } .vc-nav-btn .mud-icon-root { font-size: 18px !important; color: white !important; } /* ── صف أسماء أيام الأسبوع ── */ .vc-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); padding: 10px 12px 4px; gap: 2px; } .vc-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; } /* ── grid الأيام ── */ .vc-days { display: grid; grid-template-columns: repeat(7, 1fr); padding: 4px 12px 10px; gap: 2px; } /* ── زر اليوم الفردي ── */ .vc-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-family: var(--mono); font-weight: 500; color: var(--text-1); background: none; border: none; cursor: pointer; transition: all 0.15s; min-width: 32px; min-height: 32px; } .vc-day:hover:not(.vc-selected):not(.vc-empty) { background: var(--accent-dim); color: var(--accent); } /* اليوم المختار */ .vc-day.vc-selected { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 2px 8px var(--accent-mid); } /* اليوم الحالي */ .vc-day.vc-today { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; } /* خلية فارغة (offset أول الشهر) */ .vc-day.vc-empty { cursor: default; pointer-events: none; } /* ── فوتر التقويم ── */ .vc-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--bg-surface); border-top: 1px solid var(--border); } /* زر "اليوم" */ .vc-today-btn { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--border-glow); border-radius: 6px; padding: 4px 14px; cursor: pointer; transition: all 0.15s; font-family: var(--font); } .vc-today-btn:hover { background: var(--accent); color: white; border-color: var(--accent); } /* زر "إغلاق" */ .vc-close-btn { font-size: 12px; font-weight: 500; color: var(--text-3); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 14px; cursor: pointer; transition: all 0.15s; font-family: var(--font); } .vc-close-btn:hover { color: var(--text-1); border-color: var(--border-hover); } /* ═══════════════════════════════════════════════════════════════════ 32. VAIRSA CUSTOM SELECT — بديل filter-select الاحترافي أضف هذا الكود في نهاية vairsa-theme.css قبل سطر END OF FILE ═══════════════════════════════════════════════════════════════════ */ /* ── الـ Wrapper ── */ .vairsa-select-wrapper { position: relative; display: inline-flex; align-items: center; } /* ── السهم الكاستم ── */ .vairsa-select-wrapper::after { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-3); pointer-events: none; transition: border-top-color 0.2s; } .vairsa-select-wrapper:hover::after, .vairsa-select-wrapper:focus-within::after { border-top-color: var(--accent); } /* ── الـ Select نفسه ── */ .vairsa-select { appearance: none; -webkit-appearance: none; padding: 8px 14px 8px 32px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); font-family: var(--font); font-size: 13px; font-weight: 500; outline: none; cursor: pointer; transition: all 0.2s; min-width: 140px; line-height: 1.4; } .vairsa-select:hover { border-color: var(--border-glow); background: var(--bg-elevated); color: var(--text-1); } .vairsa-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); color: var(--text-1); } /* ── option داخل الـ select ── */ .vairsa-select option { background: var(--bg-elevated); color: var(--text-1); font-family: var(--font); font-size: 13px; padding: 8px 12px; } /* ── Lite Mode ── */ body.lite .vairsa-select { background: #F8FAFC; border-color: #E2E8F0; color: #1E293B; } body.lite .vairsa-select:hover { border-color: #38BDF8; } body.lite .vairsa-select:focus { border-color: #0284C7; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); } body.lite .vairsa-select option { background: #FFFFFF; color: #1E293B; } body.lite .vairsa-select-wrapper::after { border-top-color: #64748B; } body.lite .vairsa-select-wrapper:hover::after, body.lite .vairsa-select-wrapper:focus-within::after { border-top-color: #0284C7; } /* ── variant مع label (للفلاتر) ── */ .vairsa-filter-group { display: flex; flex-direction: column; gap: 4px; } .vairsa-filter-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; } /* ── Responsive ── */ @media (max-width: 768px) { .vairsa-select { min-width: 100px; font-size: 12px; } } /* ═══ END OF FILE — vairsa-theme.css v5.0 ═══ */ @media (max-width: 1100px) { .acc-appgrid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 800px) { .acc-appgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 500px) { .acc-appgrid { grid-template-columns: repeat(2, 1fr); } } /* ═══════════════════════════════════════════════════════════════════ APP-STORE MODULE GRID — acc-appgrid, acc-appitem, acc-ftag استخدم في صفحات الوحدات: Accounts, HR, Assets, Sales... ═══════════════════════════════════════════════════════════════════ */ .acc-ftag { font-size: 11px; font-weight: 500; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; font-family: var(--font); transition: background .12s, color .12s, border-color .12s; } .acc-ftag:hover { background: var(--bg-elevated); color: var(--text-1); } .acc-ftag-active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-mid); } .acc-appgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; } .acc-appitem { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 12px 16px; cursor: pointer; text-align: center; transition: background .15s, border-color .15s, transform .1s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; } .acc-appitem:hover { background: var(--bg-elevated); border-color: var(--border-glow); transform: translateY(-2px); } .acc-appitem:active { transform: scale(.96); } .acc-appitem-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .acc-appitem-name { font-size: 12px; font-weight: 600; color: var(--text-1); line-height: 1.3; } .acc-appitem-cat { font-size: 10px; color: var(--text-3); letter-spacing: .3px; } @media (max-width: 1100px) { .acc-appgrid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 800px) { .acc-appgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 500px) { .acc-appgrid { grid-template-columns: repeat(2, 1fr); } } /* ═══════════════════════════════════════════════════════════════════ 🔧 CRITICAL POPUP FIXES — v5.1 إصلاحات العناصر التفاعلية المنبثقة (Dropdown / Datepicker / Popup) ═══════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── Z-INDEX SYSTEM — نظام موحّد لترتيب الطبقات الترتيب من الأدنى للأعلى: 1 → عناصر عادية 10 → sticky headers / table headers 50 → tooltips بسيطة 100 → Drawer / Sidebar 200 → AppBar 300 → Dropdowns / Selects / Datepickers ← العناصر المنبثقة 400 → Dialogs / Modals 500 → Snackbars / Notifications 9999→ Overlays خاصة ────────────────────────────────────────────────────────────── */ /* ── MudBlazor Popover (Dropdown, Select, Datepicker) ── */ /* يُرسم مباشرة على body — لا علاقة له بـ overflow الحاوية */ .mud-popover-paper, .mud-popover { z-index: 300 !important; /* 🔧 FIX: ضمان الظهور فوق كل العناصر */ pointer-events: auto !important; /* 🔧 FIX: السماح بالنقر */ position: fixed !important; /* fixed = لا يتأثر بـ overflow الآباء */ z-index: 1300 !important; } /* ── MudBlazor Dialog ── */ .mud-overlay, .mud-dialog-container { z-index: 400 !important; pointer-events: auto !important; } /* ── MudBlazor Snackbar ── */ .mud-snackbar-location { z-index: 500 !important; } /* ── AppBar ── */ .mud-appbar { z-index: 200 !important; } /* ── Drawer ── */ .mud-drawer { z-index: 100 !important; } /* ────────────────────────────────────────────────────────────── OVERFLOW FIX — منع قصّ العناصر المنبثقة الحاويات التالية كانت overflow:hidden وتقصّ الـ Popups ────────────────────────────────────────────────────────────── */ /* لا تُطبّق overflow:hidden على أي حاوية تحتوي فلاتر أو inputs */ .detail-page .filters-section, .detail-page .action-section, .detail-page .form-body, .detail-page .form-section, .detail-page .form-card, .detail-page .form-card-sm, .detail-page .form-card-lg { overflow: visible !important; /* 🔧 السماح للـ Dropdowns بالخروج خارج الحاوية */ } /* Table container — overflow-x فقط للجدول، لا overflow-y */ .detail-page .table-container { overflow-x: auto; overflow-y: visible; /* 🔧 FIX: يمنع قصّ Dropdown من داخل الجدول */ } /* ────────────────────────────────────────────────────────────── POINTER-EVENTS FIX — ضمان قابلية النقر ────────────────────────────────────────────────────────────── */ /* أي عنصر منبثق يجب أن يكون قابل للنقر */ .mud-popover-paper *, .mud-popover *, .mud-list, .mud-list-item, .mud-select-item, .mud-picker-content, .mud-picker-container, .mud-dialog, .mud-dialog * { pointer-events: auto !important; } /* ────────────────────────────────────────────────────────────── MUDBLAZOR SELECT / DROPDOWN — تنسيق موحّد ────────────────────────────────────────────────────────────── */ .mud-popover-paper { background: var(--bg-elevated) !important; border: 1px solid var(--border-glow) !important; border-radius: var(--radius-sm) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; color: var(--text-1) !important; } .mud-list-item, .mud-list-item-clickable { color: var(--text-1) !important; pointer-events: auto !important; } .mud-list-item:hover, .mud-list-item-clickable:hover { background: var(--bg-card) !important; color: var(--text-1) !important; } .mud-list-item.mud-selected, .mud-selected-item { background: var(--accent-dim) !important; color: var(--accent) !important; } /* ────────────────────────────────────────────────────────────── MUDBLAZOR DATEPICKER — تنسيق موحّد ────────────────────────────────────────────────────────────── */ .mud-picker { z-index: 300 !important; pointer-events: auto !important; } .mud-picker-content, .mud-picker-container { background: var(--bg-elevated) !important; border: 1px solid var(--border-glow) !important; border-radius: var(--radius) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; pointer-events: auto !important; z-index: 300 !important; } .mud-picker-calendar-header, .mud-picker-month-year-controls { background: var(--bg-surface) !important; color: var(--text-1) !important; } .mud-day { color: var(--text-1) !important; pointer-events: auto !important; } .mud-day:hover { background: var(--accent-dim) !important; color: var(--accent) !important; } .mud-day.mud-selected { background: var(--accent) !important; color: #050810 !important; } .mud-day.mud-today:not(.mud-selected) { border: 1px solid var(--accent) !important; color: var(--accent) !important; } /* ── Lite Mode — Datepicker & Select ── */ body.lite .mud-popover-paper, body.lite .mud-picker-content, body.lite .mud-picker-container { background: #FFFFFF !important; border-color: rgba(99,120,160,0.25) !important; box-shadow: 0 4px 20px rgba(15,23,42,0.12) !important; } body.lite .mud-list-item, body.lite .mud-list-item-clickable { color: #1E293B !important; } body.lite .mud-list-item:hover, body.lite .mud-list-item-clickable:hover { background: #F4F7FB !important; } body.lite .mud-day { color: #1E293B !important; } body.lite .mud-picker-calendar-header { background: #F4F7FB !important; color: #1E293B !important; } /* ═══ END OF POPUP FIXES v5.1 ═══ */ /* ═══════════════════════════════════════════════════════════════════ 33. NEW PR — Purchase Requisition Page ⚠️ لا يوجد ملف CSS منفصل لهذه الصفحة — كل شيء هنا تعتمد على: .detail-page, .action-section, .search-box, .table-container, .btn-*, .row-action-btn Classes جديدة مضافة فقط لما لا يغطيه الثيم ═══════════════════════════════════════════════════════════════════ */ /* ── PR Meta Row (Date / Department / Location) ─────────────────── */ .pr-meta-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 12px; width: 100%; } .pr-meta-field { display: flex; flex-direction: column; gap: 3px; } /* meta-label و meta-value — إعادة استخدام نفس أسلوب الهيدر */ .meta-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 5px; } .meta-value { font-size: 14px; font-weight: 600; color: var(--text-1); font-family: var(--mono); } /* ── Selected Item Detail Panel ──────────────────────────────────── */ /* يظهر بعد اختيار صنف — يحتوي الكمية والملاحظة */ .item-detail-section { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; flex-direction: column; gap: 14px; } .item-fields-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .item-field { display: flex; flex-direction: column; gap: 4px; min-width: 110px; } .item-field-wide { min-width: 190px; flex: 1; } /* قيمة القراءة فقط — تبدو كـ badge */ .meta-value-box { font-size: 13px; font-weight: 500; color: var(--text-1); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 6px 12px; min-height: 34px; display: flex; align-items: center; font-family: var(--font); } /* ── Qty + Remark Row ─────────────────────────────────────────────── */ .qty-remark-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .qty-field { display: flex; flex-direction: column; gap: 4px; width: 120px; flex-shrink: 0; } /* حقل الكمية — أبرز عنصر في الصفحة، accent border */ .qty-input { font-size: 20px; font-weight: 700; color: var(--accent); background: var(--bg-elevated); border: 2px solid var(--accent); border-radius: var(--radius-sm); padding: 6px 10px; width: 100%; outline: none; text-align: center; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--mono); letter-spacing: 1px; } .qty-input:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--accent-dim); } .qty-input::placeholder { color: var(--text-3); font-size: 16px; } /* إخفاء السهمين في Chrome/Firefox */ .qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .qty-input[type=number] { -moz-appearance: textfield; } .remark-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; } /* حقل الملاحظة — أكثر هدوءاً من الكمية */ .remark-input { font-size: 13px; color: var(--text-1); background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; width: 100%; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--font); min-height: 38px; } .remark-input:focus { border-color: var(--border-glow); box-shadow: 0 0 0 3px var(--accent-dim); } .remark-input::placeholder { color: var(--text-3); } .item-action-btns { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 1px; flex-shrink: 0; } /* ── Keyboard Hints Bar ──────────────────────────────────────────── */ /* تُستخدم في الهيدر لإظهار اختصارات لوحة المفاتيح */ .kbd-hints { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .kbd-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: rgba(255,255,255,0.45); /* داخل الهيدر الداكن دائماً */ white-space: nowrap; font-family: var(--font); } /* ── kbd الكيبورد المصغّر ── */ .kbd-hint kbd, .kbd-inline kbd { display: inline-flex; align-items: center; justify-content: center; padding: 1px 6px; font-size: 10px; font-family: var(--mono); font-weight: 700; color: var(--accent); background: rgba(56,189,248,0.10); border: 1px solid var(--border-glow); border-bottom-width: 2px; border-radius: 4px; line-height: 1.5; letter-spacing: 0; } .kbd-inline { margin-left: 5px; opacity: 0.65; } /* Lite Mode — kbd داخل الهيدر يبقى على الخلفية الداكنة */ body.lite .kbd-hint { color: rgba(255,255,255,0.50); } /* ── Keyboard-highlighted search result row ──────────────────────── */ /* يُضاف لـ عند التنقل بـ ↑↓ في نتائج البحث */ .row-focused { background: var(--accent-dim) !important; outline: 2px solid var(--accent); outline-offset: -2px; } .row-focused td { color: var(--text-1) !important; } /* Lite Mode */ body.lite .row-focused { background: rgba(2,132,199,0.08) !important; outline-color: var(--accent); } /* ── Lite Mode — item detail panel ──────────────────────────────── */ body.lite .item-detail-section { background: #F8FAFC; border-color: rgba(99,120,160,0.12); } body.lite .meta-value-box { background: #FFFFFF; border-color: rgba(99,120,160,0.18); color: #1E293B; } body.lite .qty-input { background: #FFFFFF; border-color: var(--accent); color: var(--accent); } body.lite .remark-input { background: #FFFFFF; border-color: rgba(99,120,160,0.20); color: #1E293B; } body.lite .remark-input:focus { border-color: var(--accent); } body.lite .meta-label { color: #6B7280; } body.lite .meta-value { color: #0F172A; } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .pr-meta-row { gap: 12px; } .item-fields-row { gap: 10px; } .qty-remark-row { gap: 10px; } .qty-field { width: 100px; } .qty-input { font-size: 18px; } .item-action-btns { width: 100%; justify-content: flex-start; } .kbd-hints { display: none; /* تُخفى على الموبايل — تشغل مساحة بلا فائدة */ } } @media (max-width: 480px) { .qty-remark-row { flex-direction: column; } .qty-field { width: 100%; } .qty-input { text-align: right; } } /* ── table section title row — "Search Results · 3 records" ─────── */ .table-header-mini { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text-1); } /* ── action-section footer variant (submit/exit row) ────────────── */ .action-section-footer { padding: 12px 24px; background: var(--bg-surface); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* ── spacing helpers (بدل inline style margin-top) ──────────────── */ .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } /* ── btn-sm override للـ Select داخل نتائج البحث ────────────────── */ .detail-page .btn.btn-sm { padding: 5px 12px; font-size: 12px; } /* ═══ END OF SECTION 33 — NEW PR ═══ */ /* ═══════════════════════════════════════════════════════════════════ 34. ADD NEW PR — Bulk Purchase Requisition (addNewPR.razor) ⚠️ لا ملف CSS منفصل — كل شيء هنا تعتمد على: .detail-page, .action-section, .search-box, .table-container, .btn-*, .kbd-hints, .row-focused Classes جديدة خاصة بالجدول الكامل وتلوين الخلايا ═══════════════════════════════════════════════════════════════════ */ /* ── Inline editable cell — القيمة صفر (افتراضي) ────────────────── */ .pr-qty-cell { width: 100%; font-size: 13px; font-weight: 500; text-align: center; padding: 4px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-2); outline: none; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; font-family: var(--mono); min-width: 70px; } .pr-qty-cell:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); } /* ── Inline editable cell — القيمة > 0 (مُدخلة) ─────────────────── */ .pr-qty-cell.has-qty { background: #DCFDD7; border-color: #07611C; color: #065F12; font-weight: 700; } body.lite .pr-qty-cell.has-qty { background: #E6F9E6; border-color: #2D8A3E; color: #1A5C28; } /* ── Remark cell ─────────────────────────────────────────────────── */ .pr-remark-cell { width: 100%; font-size: 12px; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-2); outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--font); } .pr-remark-cell:focus { border-color: var(--border-glow); box-shadow: 0 0 0 2px var(--accent-dim); } /* ── Stats bar (Items with qty / Total items) ────────────────────── */ .pr-stats-bar { display: flex; align-items: center; gap: 20px; padding: 8px 0 4px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; } .pr-stat-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--text-2); } .pr-stat-pill.active { background: #E6F9E6; border-color: #07611C; color: #065F12; } body.lite .pr-stat-pill.active { background: #D1FAD7; border-color: #2D8A3E; color: #1A5C28; } /* ── Location selector (reuse filter-select style) ───────────────── */ .pr-location-select { font-size: 13px; font-weight: 500; color: var(--text-1); background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--font); min-width: 180px; cursor: pointer; } .pr-location-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } /* ── Subject input ───────────────────────────────────────────────── */ .pr-subject-input { font-size: 13px; color: var(--text-1); background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 7px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--font); min-width: 220px; flex: 1; max-width: 360px; } .pr-subject-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .pr-subject-input::placeholder { color: var(--text-3); } /* ── ItemId badge ────────────────────────────────────────────────── */ .item-id-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.5px; } /* ── Row highlight when qty > 0 ──────────────────────────────────── */ tr.row-has-qty { background: rgba(7, 97, 28, 0.04) !important; } body.lite tr.row-has-qty { background: rgba(45, 138, 62, 0.05) !important; } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .pr-subject-input { max-width: 100%; min-width: 100%; } .pr-location-select { min-width: 100%; } .pr-stats-bar { gap: 10px; } } /* ═══ END OF SECTION 34 — ADD NEW PR ═══ */ /* ── addNewPR layout helpers (بدل inline style) ─────────────────── */ .pr-controls-row { flex-wrap: wrap; gap: 12px; align-items: flex-end; } .pr-field-col { display: flex; flex-direction: column; gap: 4px; } .pr-field-col-grow { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; } .pr-loading { padding: 24px; text-align: center; color: var(--text-3); font-size: 14px; } .pr-loading p { margin-top: 8px; } /* ─── th width helpers for addNewPR table ───────────────────────── */ .pr-th-id { width: 7%; } .pr-th-cat { width: 10%; } .pr-th-pack { width: 9%; } .pr-th-unit { width: 6%; } .pr-th-qty { width: 8%; } .pr-th-remark { width: 18%; } .pr-th-action { width: 4%; } /* ═══════════════════════════════════════════════════════ AccountsMapping — أضف في نهاية vairsa-theme01.css ═══════════════════════════════════════════════════════ */ /* ── wrapper مركزي ── */ .amp-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 10px; } /* ── شريط القراءة فقط ── */ .amp-readonly-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: color-mix(in srgb, var(--warning, #f59e0b) 8%, transparent); border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 25%, transparent); border-radius: var(--radius-md, 8px); font-size: 12px; color: var(--text-2); margin-bottom: 2px; } /* ── بطاقة القسم ── */ .amp-group { border: 1px solid var(--border); border-radius: var(--radius-md, 10px); overflow: hidden; background: var(--surface-1); margin-bottom: 10px; } /* ── هيدر القسم ── */ .amp-group-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .amp-group-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .amp-group-titles { flex: 1; display: flex; flex-direction: column; gap: 1px; } .amp-group-title { font-size: 12.5px; font-weight: 700; color: var(--text-1); } .amp-group-sub { font-size: 11px; color: var(--text-3); } /* ── Badge عداد الحالة ── */ .amp-group-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .badge-done { background: color-mix(in srgb, #10b981 12%, transparent); color: #065f46; border: 1px solid color-mix(in srgb, #10b981 30%, transparent); } .badge-none { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); } .badge-partial { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #78350f; border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); } /* ── Grid الحقول: 3 أعمدة مع خطوط فاصلة ── */ .amp-fields-grid { display: grid; grid-template-columns: repeat(3, 1fr); } /* ── حقل واحد ── */ .amp-field { padding: 13px 15px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; transition: background 0.15s; } /* إزالة border من آخر صف وآخر عمود */ .amp-fields-grid > .amp-field:nth-child(3n) { border-right: none; } .amp-fields-grid > .amp-field:nth-last-child(-n+3) { border-bottom: none; } /* تمييز المربوط بخلفية فاتحة ← */ .amp-field-mapped { background: color-mix(in srgb, #10b981 4%, var(--surface-1)); } .amp-field-empty { background: var(--surface-1); } .amp-field-label { font-size: 11px; font-weight: 600; color: var(--text-2); } /* ── قيمة مربوطة (عرض فقط) ── */ .amp-field-value { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-1); font-weight: 500; background: color-mix(in srgb, #10b981 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, #10b981 25%, transparent); border-radius: var(--radius-sm, 6px); padding: 6px 10px; min-height: 34px; } /* ── قيمة غير مربوطة (عرض فقط) ── */ .amp-field-empty-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); font-style: italic; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-sm, 6px); padding: 6px 10px; min-height: 34px; } /* ── زر الحفظ ── */ .amp-save-row { display: flex; justify-content: center; padding: 16px 0 0; margin-bottom: 4px; } .amp-save-btn { min-width: 180px; padding: 10px 32px !important; font-size: 14px !important; font-weight: 600 !important; } /* ── Responsive ── */ @media (max-width: 700px) { .amp-wrap { padding: 0 12px; } .amp-fields-grid { grid-template-columns: repeat(2, 1fr); } .amp-fields-grid > .amp-field:nth-child(3n) { border-right: 1px solid var(--border); } .amp-fields-grid > .amp-field:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); } .amp-fields-grid > .amp-field:nth-child(2n) { border-right: none; } .amp-fields-grid > .amp-field:nth-last-child(-n+2) { border-bottom: none; } } @media (max-width: 460px) { .amp-fields-grid { grid-template-columns: 1fr; } .amp-fields-grid > .amp-field { border-right: none; border-bottom: 1px solid var(--border); } .amp-fields-grid > .amp-field:last-child { border-bottom: none; } } /* ═══ END OF SECTION 34 helpers ═══ */ /* ═══════════════════════════════════════════════════════════════════ 36. NUCLEAR TABLE HEADER FIX المشكلة: MudBlazor يحقن background:white على th مباشرة الحل: specificity أعلى + !important على كل selector ممكن ═══════════════════════════════════════════════════════════════════ */ body:not(.lite) th, body:not(.lite) thead th, body:not(.lite) thead tr th, body:not(.lite) table thead th, body:not(.lite) .detail-page th, body:not(.lite) .detail-page thead th, body:not(.lite) .detail-page thead tr th, body:not(.lite) .detail-page table thead th, body:not(.lite) .detail-page .table-container table thead th, body:not(.lite) .form-card-lg table thead th, body:not(.lite) .form-card-lg thead th { background-color: var(--bg-surface) !important; background: var(--bg-surface) !important; color: var(--accent) !important; border-bottom: 1px solid var(--border) !important; } body:not(.lite) td, body:not(.lite) tbody td, body:not(.lite) tbody tr td, body:not(.lite) .detail-page td, body:not(.lite) .detail-page tbody td, body:not(.lite) .form-card-lg tbody td { background-color: transparent !important; color: var(--text-1) !important; } body:not(.lite) tbody tr, body:not(.lite) .detail-page tbody tr, body:not(.lite) .form-card-lg tbody tr { background-color: var(--bg-card) !important; border-bottom: 1px solid var(--border) !important; } body:not(.lite) tbody tr:hover, body:not(.lite) .detail-page tbody tr:hover, body:not(.lite) .form-card-lg tbody tr:hover { background-color: var(--bg-elevated) !important; } /* ── Lite Mode: ارجع للأبيض ── */ body.lite th, body.lite thead th { background-color: #FFFFFF !important; color: #1E293B !important; } body.lite td, body.lite tbody td { background-color: transparent !important; color: #1E293B !important; } /* ═══ END OF SECTION 36 ═══ */ /* ═══════════════════════════════════════════════════════════════════ PRINT STYLES — إصلاح الطباعة المشكلة: min-height: 100vh و calc(100vh - 64px) تسبب صفحات فاضية الحل: إلغاء كل القيود عند الطباعة ═══════════════════════════════════════════════════════════════════ */ @media print { /* ── إلغاء ارتفاعات الـ layout ── */ .detail-page, .detail-page .list-wrapper, .detail-page .main-content-card, .detail-page .list-card, .detail-page .list-card-full { min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; background: #fff !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* ── إلغاء ارتفاع الـ body و html ── */ html, body { min-height: 0 !important; height: auto !important; overflow: visible !important; background: #fff !important; } /* ── إخفاء العناصر التفاعلية ── */ .hideWhenPrint { display: none !important; } /* ── الجداول تمتد على صفحات متعددة ── */ table { page-break-inside: auto !important; } thead { display: table-header-group !important; } tr { page-break-inside: avoid !important; } /* ── ألوان الطباعة ── */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* ── هوامش الصفحة ── */ @page { margin: 12mm 13mm; size: A4 portrait; } }