/* ========================================================================== TourFlow UI — الروح الواحدة للمشروع (الويب والتطبيق) هوية: كحلي عميق + تيل بحري + ذهبي دافئ. يُحمَّل أخيرًا فيوحّد كل ما قبله. - المتغيرات --ui-* هي مصدر الألوان والظلال والحركة. - إعادة ربط --tf-indigo* بلون الهوية يلوّن كل الاستعمالات القديمة تلقائيًا. ========================================================================== */ :root { --ui-font: 'Segoe UI', 'IBM Plex Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, Tahoma, sans-serif; --ui-navy: #0b1120; --ui-navy-2: #14213a; --ui-primary: #0f766e; --ui-primary-2: #14b8a6; --ui-primary-deep: #115e59; --ui-primary-soft: rgba(20, 184, 166, .12); --ui-gold: #f59e0b; --ui-gold-2: #fbbf24; --ui-ok: #16a34a; --ui-warn: #d97706; --ui-bad: #dc2626; --ui-info: #2563eb; --ui-radius: 14px; --ui-radius-sm: 10px; --ui-radius-lg: 20px; --ui-ring: 0 0 0 3px rgba(20, 184, 166, .28); --ui-sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px -2px rgba(15, 23, 42, .08); --ui-sh-2: 0 10px 28px -10px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .05); --ui-sh-glow: 0 8px 24px -8px rgba(15, 118, 110, .55); --ui-ease: cubic-bezier(.22, .8, .24, 1); --ui-grad: linear-gradient(135deg, #0f766e 0%, #0d9488 52%, #14b8a6 100%); --ui-grad-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); --ui-grad-navy: linear-gradient(135deg, #0b1120 0%, #14213a 60%, #1b3a52 100%); /* إعادة ربط ألوان النظام القديمة بهوية واحدة */ --tf-indigo: #0f766e; --tf-indigo-dark: #115e59; --tf-indigo-light: #e6f6f4; --tf-indigo-soft: #cdeeea; --tf-radius-sm: 10px; --tf-radius: 14px; --tf-radius-lg: 18px; --tf-radius-xl: 22px; --tf-shadow-sm: var(--ui-sh-1); --tf-shadow: var(--ui-sh-2); } html[data-theme=dark] { --ui-primary: #2dd4bf; --ui-primary-2: #5eead4; --ui-primary-deep: #14b8a6; --ui-primary-soft: rgba(45, 212, 191, .14); --ui-ring: 0 0 0 3px rgba(45, 212, 191, .32); --ui-sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px -2px rgba(0, 0, 0, .35); --ui-sh-2: 0 14px 34px -12px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .3); --ui-sh-glow: 0 8px 26px -8px rgba(45, 212, 191, .45); --ui-grad: linear-gradient(135deg, #0f9d8f 0%, #14b8a6 55%, #2dd4bf 100%); --tf-indigo: #2dd4bf; --tf-indigo-dark: #14b8a6; --tf-indigo-light: rgba(45, 212, 191, .12); --tf-indigo-soft: rgba(45, 212, 191, .2); } /* ---------- الأساس ---------- */ html { scroll-behavior: smooth; } body { font-family: var(--ui-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[data-theme=light] body:not(.tf-client-app) { background: radial-gradient(1100px 420px at 90% -8%, rgba(20, 184, 166, .09), transparent 62%), radial-gradient(900px 380px at 0% 0%, rgba(245, 158, 11, .06), transparent 60%), var(--theme-page); background-attachment: fixed; } ::selection { background: rgba(20, 184, 166, .32); } :focus-visible { outline: none; box-shadow: var(--ui-ring); border-radius: 8px; } * { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .45) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .4); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .7); background-clip: content-box; border: 2px solid transparent; } /* دخول ناعم للصفحة */ @keyframes ui-rise { from { transform: translateY(14px); } to { transform: none; } } @keyframes ui-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } @keyframes ui-sheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } } @keyframes ui-pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 5px transparent; } } @keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* انزلاق فقط (بلا تغيير للشفافية) كي لا يُخفي محتوى ولا يكشف عناصر مخفية عمدًا */ .tf-content > :not(style):not(script):not([class*=overlay]):not([class*=drawer]):not(.modal) { animation: ui-rise .45s var(--ui-ease) backwards; } .tf-content > :nth-child(2) { animation-delay: .05s; } .tf-content > :nth-child(3) { animation-delay: .1s; } .tf-content > :nth-child(4) { animation-delay: .15s; } .tf-content > :nth-child(n+5) { animation-delay: .2s; } /* ---------- العناوين ---------- */ .tf-content h1, .tfx-head h1 { font-weight: 700; letter-spacing: -.01em; } .tfx-head h1, .tf-page-title { position: relative; padding-bottom: 10px; } .tfx-head h1::after, .tf-page-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 46px; height: 4px; border-radius: 99px; background: var(--ui-grad-gold); } /* ---------- البطاقات ---------- */ .tf-card, .card, .tfx-card, .travel-panel, .fd-card, .hd-panel { border-radius: var(--ui-radius); border: 1px solid var(--theme-line); box-shadow: var(--ui-sh-1); transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .25s; } a.card:hover, .tf-card.is-link:hover, .tfx-stat:hover, .tf-dash-card:hover, a.tf-card:hover { transform: translateY(-3px); box-shadow: var(--ui-sh-2); border-color: rgba(20, 184, 166, .45); } /* ---------- الأزرار ---------- */ .btn, .tf-btn, .travel-btn { font-family: var(--ui-font); font-weight: 600; border-radius: var(--ui-radius-sm); transition: transform .18s var(--ui-ease), box-shadow .22s var(--ui-ease), background-color .2s, border-color .2s, color .2s; } .btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); } .btn:not(:disabled):not(.disabled):active { transform: translateY(0) scale(.97); } .btn-primary, .btn-success, .btn-warning, .btn-danger { position: relative; overflow: hidden; border: 0 !important; color: #fff; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .45); } .btn-primary { background-image: var(--ui-grad) !important; background-color: var(--ui-primary) !important; box-shadow: var(--ui-sh-glow); } .btn-primary:hover { box-shadow: 0 12px 26px -10px rgba(15, 118, 110, .7); filter: saturate(1.1); } .btn-success { background-image: linear-gradient(135deg, #15803d, #22c55e) !important; background-color: #16a34a !important; } .btn-warning { background-image: var(--ui-grad-gold) !important; background-color: var(--ui-gold) !important; color: #3b2603 !important; } .btn-danger { background-image: linear-gradient(135deg, #b91c1c, #ef4444) !important; background-color: #dc2626 !important; } .btn-primary::after, .btn-success::after, .btn-warning::after, .btn-danger::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; inset-inline-start: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-130%) skewX(-18deg); pointer-events: none; } .btn-primary:hover::after, .btn-success:hover::after, .btn-warning:hover::after, .btn-danger:hover::after { animation: ui-sheen .75s var(--ui-ease); } .btn-outline-primary { --bs-btn-color: var(--ui-primary); --bs-btn-border-color: var(--ui-primary); --bs-btn-hover-bg: var(--ui-primary); --bs-btn-hover-border-color: var(--ui-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ui-primary-deep); --bs-btn-active-border-color: var(--ui-primary-deep); } html[data-theme=dark] .btn-outline-primary:hover { --bs-btn-hover-color: #06201d; } .btn-outline-secondary { border-color: var(--theme-line); color: var(--theme-secondary); background: var(--theme-card); } .btn-outline-secondary:hover { background: var(--ui-primary-soft); border-color: var(--ui-primary); color: var(--ui-primary); } .btn-sm { border-radius: 9px; } /* ---------- الحقول ---------- */ .form-control, .form-select, input.form-control, textarea.form-control { font-family: var(--ui-font); border-radius: var(--ui-radius-sm); border: 1px solid var(--theme-line); transition: border-color .2s, box-shadow .2s, background-color .2s; } .form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: rgba(20, 184, 166, .55); } .form-control:focus, .form-select:focus, .tf-content .form-control:focus, .tf-content .form-select:focus { border-color: var(--ui-primary-2); box-shadow: var(--ui-ring); } .form-control[readonly] { background: var(--theme-raised); } label { font-weight: 600; } .form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); } /* ---------- الجداول ---------- */ .table, .tfx-table, .br-table { --bs-table-hover-bg: var(--ui-primary-soft); border-collapse: separate; border-spacing: 0; } .tf-content table thead th, .tfx-table thead th, .br-table th { font-weight: 700; font-size: 12.5px; letter-spacing: .01em; color: var(--theme-secondary); border-bottom: 2px solid rgba(20, 184, 166, .35) !important; } .tf-content table tbody tr { transition: background-color .15s; } .tf-content table tbody tr:hover > * { background-color: var(--ui-primary-soft); } .tfx-card.tfx-scroll, .tf-table-wrap { border-radius: var(--ui-radius); overflow: auto; } /* ---------- الشارات والحالات (روح واحدة) ---------- */ .tfx-badge, .tf-badge, .badge, .tour-status-pill, .addon-status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: 700; font-size: 12px; line-height: 1.5; padding: 3px 11px; border: 1px solid transparent; } .tfx-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .tfx-badge.ok { background: #dcfce7; color: #166534; border-color: #86efac; } .tfx-badge.wait { background: #fef3c7; color: #92400e; border-color: #fcd34d; } .tfx-badge.info { background: #dbeafe; color: #1e40af; border-color: #93c5fd; } .tfx-badge.bad { background: #fee2e2; color: #991b1b; border-color: #fca5a5; } .tfx-badge.off { background: #f1f5f9; color: #475569; border-color: #cbd5e1; } .tfx-badge.wait::before, .tfx-badge.bad::before { animation: ui-pulse 1.8s ease-in-out infinite; } html[data-theme=dark] .tfx-badge.ok { background: rgba(34, 197, 94, .15); color: #86efac; border-color: rgba(34, 197, 94, .4); } html[data-theme=dark] .tfx-badge.wait { background: rgba(245, 158, 11, .15); color: #fcd34d; border-color: rgba(245, 158, 11, .4); } html[data-theme=dark] .tfx-badge.info { background: rgba(59, 130, 246, .16); color: #bfdbfe; border-color: rgba(59, 130, 246, .4); } html[data-theme=dark] .tfx-badge.bad { background: rgba(239, 68, 68, .16); color: #fecaca; border-color: rgba(239, 68, 68, .4); } html[data-theme=dark] .tfx-badge.off { background: rgba(148, 163, 184, .14); color: #cbd5e1; border-color: rgba(148, 163, 184, .3); } /* أزرار التصفية والتبويبات (chips) */ .br-chip, .tf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--theme-line); background: var(--ui-btn-neutral); color: var(--theme-secondary); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; transition: all .2s var(--ui-ease); } .br-chip:hover, .tf-chip:hover { border-color: var(--ui-primary-2); color: var(--ui-primary); transform: translateY(-1px); } .br-chip.on, .tf-chip.on { background: var(--ui-grad); color: #fff; border-color: transparent; box-shadow: var(--ui-sh-glow); } html[data-theme=dark] .br-chip.on, html[data-theme=dark] .tf-chip.on { color: #04211e; } /* ---------- نوافذ الرسائل (SweetAlert) ---------- */ .swal2-popup { border-radius: var(--ui-radius-lg) !important; box-shadow: 0 30px 70px -20px rgba(2, 8, 23, .55) !important; font-family: var(--ui-font) !important; } .swal2-title { font-weight: 700 !important; } .swal2-styled.swal2-confirm { background-image: var(--ui-grad) !important; background-color: var(--ui-primary) !important; border-radius: var(--ui-radius-sm) !important; font-weight: 700 !important; box-shadow: var(--ui-sh-glow) !important; } .swal2-styled.swal2-cancel { border-radius: var(--ui-radius-sm) !important; font-weight: 600 !important; } .swal2-icon { border-width: 3px !important; } /* ---------- القوائم والنوافذ ---------- */ .dropdown-menu, .modal-content { border-radius: var(--ui-radius); border: 1px solid var(--theme-line); box-shadow: var(--ui-sh-2); } .dropdown-menu { animation: ui-pop .16s var(--ui-ease); } .modal.show .modal-dialog { animation: ui-pop .25s var(--ui-ease); } .nav-tabs .nav-link.active, .nav-pills .nav-link.active { background-image: var(--ui-grad); color: #fff; border-color: transparent; } /* ---------- الشريط الجانبي والعلوي ---------- */ .tf-sb-link { transition: background-color .2s, transform .2s var(--ui-ease), box-shadow .2s; } .tf-sb-link:hover { transform: translateX(-2px); } [dir=ltr] .tf-sb-link:hover { transform: translateX(2px); } .tf-sb-link.active { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35), 0 8px 20px -10px rgba(245, 158, 11, .7); } .tf-navbar { backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); } /* ---------- عناصر جاهزة للشاشات الجديدة ---------- */ .tf-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--ui-radius); background: var(--theme-card); border: 1px solid var(--theme-line); box-shadow: var(--ui-sh-1); transition: transform .25s var(--ui-ease), box-shadow .25s; } .tf-stat strong { font-size: 26px; line-height: 1; font-weight: 700; } .tf-empty { text-align: center; padding: 38px 18px; color: var(--theme-muted); border: 1.5px dashed var(--theme-line); border-radius: var(--ui-radius); } .tf-skeleton { background: linear-gradient(90deg, var(--theme-raised) 25%, var(--theme-line) 37%, var(--theme-raised) 63%); background-size: 400% 100%; animation: ui-shimmer 1.4s linear infinite; border-radius: 8px; } .tf-hero { background: var(--ui-grad-navy); color: #fff; border-radius: var(--ui-radius-lg); padding: 22px 26px; position: relative; overflow: hidden; } .tf-hero::after { content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 191, 36, .35), transparent 65%); } /* ---------- احترام تفضيلات الحركة ---------- */ @media (prefers-reduced-motion: reduce) { *:not(.swal2-container):not(.swal2-container *), *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .tf-content > * { animation: none !important; } body { background: #fff !important; } } /* ========================================================================== المرحلة 2: لوحة القيادة، التصفية، الترويسات، الأرقام ========================================================================== */ /* ترويسة اللوحات: بطلة كحلية بتوهّج ذهبي */ .dash-heading { background: var(--ui-grad-navy) !important; color: #fff !important; border: 0 !important; border-radius: var(--ui-radius-lg) !important; box-shadow: var(--ui-sh-2); position: relative; overflow: hidden; } .dash-heading::after { content: ""; position: absolute; inset-inline-end: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 191, 36, .32), transparent 66%); pointer-events: none; } .dash-heading::before { background: var(--ui-grad-gold) !important; } .dash-heading h1 { color: #fff !important; } .dash-heading p, .dash-heading .dash-date { color: rgba(226, 232, 240, .85) !important; } .dash-eyebrow { color: var(--ui-gold-2) !important; letter-spacing: .18em; } .dash-heading .btn-outline-secondary { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); } .dash-heading .btn-outline-secondary:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: #fff; } .dash-heading .btn-primary { background-image: var(--ui-grad-gold) !important; color: #2b1c02 !important; box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .8); } .dash-role-nav { border-radius: 999px !important; } .dash-role-nav .btn { border-radius: 999px !important; } .dash-role-nav .btn[aria-current=page] { background-image: var(--ui-grad) !important; color: #fff !important; box-shadow: var(--ui-sh-glow); } /* بطاقات اللوحات */ .hd-panel, .hdx-card, .hd-seat-summary > div, .hd-kpi, .tfx-stat { border-radius: var(--ui-radius) !important; border: 1px solid var(--theme-line); box-shadow: var(--ui-sh-1); transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .25s; } .hdx-card:hover, .hd-kpi:hover, .tfx-stat:hover, .hd-seat-summary > div:hover { transform: translateY(-3px); box-shadow: var(--ui-sh-2); border-color: rgba(20, 184, 166, .45); } .hd-activity a { border-radius: 12px; transition: background-color .2s, transform .2s var(--ui-ease); } .hd-activity a:hover { background: var(--ui-primary-soft); transform: translateX(-3px); } [dir=ltr] .hd-activity a:hover { transform: translateX(3px); } .hdx-i { box-shadow: 0 8px 18px -8px var(--c, #0f766e); } /* ترويسة الصفحة الموحّدة */ .tf-page-header, .tfx-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .tf-page-header h1, .tf-page-header .tf-page-title { font-weight: 700; margin: 0; } /* التصفية على الجوال: مطوية بزر */ .tf-filter-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; margin: 0 0 10px; border-radius: var(--ui-radius-sm); border: 1px solid var(--theme-line); background: var(--theme-card); color: var(--theme-text); font-weight: 700; cursor: pointer; box-shadow: var(--ui-sh-1); } .tf-filter-toggle .tf-filter-count { background: var(--ui-grad); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: 12px; } .tf-filter-toggle i { transition: transform .25s var(--ui-ease); } .tf-filter-toggle[aria-expanded=true] i { transform: rotate(180deg); } @media (max-width: 768px) { .tf-filter-toggle { display: flex; } form.tf-filter-form.tf-filter-collapsed { display: none !important; } form.tf-filter-form { animation: ui-rise .3s var(--ui-ease) backwards; } } /* أرقام وبطاقات */ .tf-num { font-variant-numeric: tabular-nums; } table td.num, table th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .tf-debit { color: #b45309; } .tf-credit { color: #0f766e; } html[data-theme=dark] .tf-debit { color: #fbbf24; } html[data-theme=dark] .tf-credit { color: #5eead4; } /* الجداول على الجوال: تمرير أفقي بدل عصر الأعمدة حرفًا حرفًا */ td, th { font-variant-numeric: tabular-nums; } .tf-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ui-radius); } @media (max-width: 768px) { .tf-table-scroll > table, .br-scroll > table, .tfx-scroll > table, .table-responsive > table { min-width: 680px; } .tf-table-scroll > table th, .br-scroll > table th, .tfx-scroll > table th, .table-responsive > table th { white-space: nowrap; } } /* ========================================================================== مراجعة الثيم الفاتح: تباين أوضح، خلفية زرقاء هادئة تُبرز البطاقات البيضاء ========================================================================== */ html:not([data-theme=dark]) { --theme-page: #eaf0f7; --theme-card: #ffffff; --theme-raised: #e4ecf5; --theme-line: #cfd9e6; --theme-text: #0b1a2e; --theme-secondary: #26374c; --theme-muted: #52657b; --ui-sh-1: 0 1px 2px rgba(11, 26, 46, .07), 0 4px 12px -4px rgba(11, 26, 46, .10); --ui-sh-2: 0 14px 30px -12px rgba(11, 26, 46, .28), 0 3px 8px rgba(11, 26, 46, .07); } html:not([data-theme=dark]) body:not(.tf-client-app) { background: radial-gradient(1100px 460px at 92% -10%, rgba(20, 184, 166, .14), transparent 62%), radial-gradient(900px 400px at 0% 0%, rgba(245, 158, 11, .10), transparent 60%), var(--theme-page); background-attachment: fixed; } /* حقول واضحة الحدود */ html:not([data-theme=dark]) .form-control, html:not([data-theme=dark]) .form-select, html:not([data-theme=dark]) .tf-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html:not([data-theme=dark]) .tf-content select, html:not([data-theme=dark]) .tf-content textarea { border-color: #b9c7d8; background-color: #fff; } html:not([data-theme=dark]) .form-control::placeholder { color: #7a8ba0; } /* رؤوس الجداول: لون فريد بدل الرمادي الباهت */ html:not([data-theme=dark]) .tf-content table thead th, html:not([data-theme=dark]) .tfx-table thead th, html:not([data-theme=dark]) .br-table th { background: linear-gradient(180deg, #e3f3f1, #d4ebe8) !important; color: #0b3b38 !important; border-bottom: 2px solid #14b8a6 !important; } html:not([data-theme=dark]) .tf-content table tbody tr:nth-child(even) > * { background-color: #f6f9fc; } html:not([data-theme=dark]) .tf-content table tbody tr:hover > * { background-color: #def3f0; } html:not([data-theme=dark]) .table > :not(caption) > * > * { border-bottom-color: #dbe4ef; } /* بطاقات: حد أوضح وظل أعمق */ html:not([data-theme=dark]) :is(.tf-card, .card, .tfx-card, .hd-panel, .hdx-card, .fd-card, .hd-seat-summary > div, .tfx-stat, .tf-stat) { background-color: #fff; border-color: #cfd9e6; } /* أزرار ثانوية بحد أوضح */ html:not([data-theme=dark]) .btn-outline-secondary { border-color: #b3c2d4; color: #26374c; background: #fff; } html:not([data-theme=dark]) .btn-outline-secondary:hover { background: #def3f0; border-color: #14b8a6; color: #0f766e; } /* الشارات: أكثر إشباعًا ونصها داكن */ html:not([data-theme=dark]) .tfx-badge.ok { background: #c9f1d8; color: #0f5a2e; border-color: #6fd49b; } html:not([data-theme=dark]) .tfx-badge.wait { background: #fde9a8; color: #7a4a02; border-color: #f3c24b; } html:not([data-theme=dark]) .tfx-badge.info { background: #cfe3fc; color: #123f8c; border-color: #7fb0f2; } html:not([data-theme=dark]) .tfx-badge.bad { background: #fbd0cf; color: #8b1515; border-color: #f08a88; } html:not([data-theme=dark]) .tfx-badge.off { background: #e1e8f0; color: #3a4b60; border-color: #b9c6d6; } /* نصوص ثانوية أقرأ */ html:not([data-theme=dark]) .text-muted, html:not([data-theme=dark]) small, html:not([data-theme=dark]) .tfx-sub { color: #52657b !important; } /* الشريط العلوي والتبويبات */ html:not([data-theme=dark]) .br-chip, html:not([data-theme=dark]) .tf-chip { border-color: #b3c2d4; background: #fff; color: #26374c; } html:not([data-theme=dark]) .br-chip.on, html:not([data-theme=dark]) .tf-chip.on { background: var(--ui-grad); color: #fff; border-color: transparent; } /* ========================================================================== صفحة الدخول: شاشة واحدة بلا تمرير، البطاقة الرئيسية فقط ========================================================================== */ body:has(.tf-auth-page) { overflow: hidden; } body:has(.tf-auth-page) .tf-footer { display: none !important; } body:has(.tf-auth-page) .tf-main, body:has(.tf-auth-page) .tf-content { padding: 0 !important; overflow: hidden !important; height: calc(100dvh - var(--tf-navbar-h, 64px)); min-height: 0 !important; } .tf-auth-page { min-height: 0 !important; height: 100%; padding: clamp(8px, 2.2vh, 28px) 12px !important; box-sizing: border-box; } .tf-auth-card { min-height: 0 !important; max-height: 100%; width: min(100%, 1050px); border-radius: var(--ui-radius-lg) !important; border: 1px solid var(--theme-line); box-shadow: 0 30px 80px -24px rgba(11, 26, 46, .38) !important; animation: ui-pop .4s var(--ui-ease); } .tf-auth-form-panel { padding: clamp(14px, 3.2vh, 40px) clamp(20px, 3.4vw, 44px) !important; overflow-y: auto; } .tf-auth-aside { padding: clamp(16px, 3.4vh, 42px) clamp(22px, 3vw, 40px) !important; } .tf-auth-card .btn-primary, .tf-auth-card button[type=submit] { background-image: var(--ui-grad) !important; color: #fff !important; box-shadow: var(--ui-sh-glow); border: 0; } .tf-auth-role.active { border-color: var(--ui-gold) !important; box-shadow: 0 8px 20px -10px rgba(245, 158, 11, .8); } @media (max-width: 760px) { .tf-auth-aside { display: none !important; } .tf-auth-page { align-items: flex-start; padding-top: clamp(8px, 3vh, 20px) !important; } } @media (max-height: 640px) { .tf-auth-heading small, .tf-auth-heading p { display: none; } } /* دخول الموظف (حقلان) على شاشات قصيرة أو ضيقة: البطاقة تتمرر داخليًا ولا تُقصّ */ .tf-auth-form-panel, .tf-auth-aside { max-height: calc(100dvh - var(--tf-navbar-h, 64px) - 24px); } .tf-auth-form-panel { overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 980px) { .tf-auth-aside { display: none !important; } .tf-auth-card { grid-template-columns: minmax(0, 1fr) !important; width: min(100%, 560px); } } /* شاشات قصيرة: ضغط محتوى الدخول كي يظهر زر الدخول كاملًا، وزر ثابت أسفل البطاقة عند الحاجة */ @media (max-height: 760px) { .tf-auth-heading small, .tf-auth-heading p, .tf-auth-role-caption { display: none !important; } .tf-auth-heading h1 { font-size: 26px !important; margin-bottom: 4px !important; } .tf-auth-brand { margin-bottom: 6px !important; } .tf-auth-brand img { height: 34px !important; width: auto !important; } .tf-auth-form { gap: 10px !important; } .tf-auth-field { margin-bottom: 8px !important; } .tf-auth-roles legend { margin-bottom: 6px !important; } .tf-auth-role { padding-block: 10px !important; } .tf-auth-form-panel { padding-block: 14px !important; } } @media (max-height: 600px) { .tf-auth-role-name + * { display: none !important; } .tf-auth-eyebrow { display: none !important; } } .tf-auth-form button[type=submit], #loginForm button[type=submit] { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -14px 18px -10px var(--theme-card, #fff), var(--ui-sh-glow); } @media (max-height: 700px) { .tf-auth-brand, .tf-auth-eyebrow { display: none !important; } .tf-auth-role-icon { width: 30px !important; height: 30px !important; } } /* طباعة التقارير على ورقة مروسة: ختم الطباعة وزر الطباعة التلقائي */ .report-print-stamp { margin-top: 8px; font-size: 8pt; color: #64748b; text-align: end; } .tf-print-fab { position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 0; background: var(--ui-grad); color: #fff; font-weight: 700; box-shadow: var(--ui-sh-glow); cursor: pointer; transition: transform .2s var(--ui-ease), box-shadow .2s; } .tf-print-fab:hover { transform: translateY(-2px); } html[data-theme=dark] .tf-print-fab { color: #04211e; } @media print { .tf-print-fab { display: none !important; } } /* أزرار نماذج التصفية: بارتفاع الحقول نفسه وبمحاذاة أسفل الصف (لا تتمدد مع ارتفاع الشبكة) */ .go-filters > .btn, .br-filters > .btn, form.tf-filter-form > .btn, form[method=get] > .btn:not(.btn-sm), form[method=get] > button[type=submit] { align-self: end; height: 40px; min-height: 40px; padding-block: 0; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } /* أيقونات القائمة الجانبية الملوّنة بمعناها (أدوات المطوّر والذكاء الصناعي والاتصال) */ .tf-sidebar .tf-sb-link i.fa-code { color: #38bdf8; } .tf-sidebar .tf-sb-link i.fa-language { color: #60a5fa; } .tf-sidebar .tf-sb-link i.fa-sliders { color: #818cf8; } .tf-sidebar .tf-sb-link i.fa-wand-magic-sparkles { color: #e879f9; } .tf-sidebar .tf-sb-link i.fa-bug { color: #fb7185; } .tf-sidebar .tf-sb-link i.fa-stethoscope { color: #2dd4bf; } .tf-sidebar .tf-sb-link i.fa-envelope-circle-check { color: #22d3ee; } .tf-sidebar .tf-sb-link i.fa-plug { color: #4ade80; } .tf-sidebar .tf-sb-link i.fa-id-card, .tf-sidebar .tf-sb-link i.fa-address-card { color: #fbbf24; } .tf-sidebar .tf-sb-link i.fa-server, .tf-sidebar .tf-sb-link i.fa-database { color: #a78bfa; } .tf-sidebar .tf-sb-link i.fa-handshake { color: #34d399; } .tf-sidebar .tf-sb-link i.fa-plane-circle-check { color: #60a5fa; } .tf-sidebar .tf-sb-link i.fa-bus { color: #fbbf24; } .tf-sidebar .tf-sb-link i.fa-plus { color: #4ade80; } .tf-sidebar .tf-sb-link i.fa-chair { color: #f59e0b; } .tf-sidebar .tf-sb-link i.fa-file-import { color: #38bdf8; } .tf-sidebar .tf-sb-link i.fa-bag-shopping { color: #f472b6; } .tf-sidebar .tf-sb-link i.fa-champagne-glasses { color: #fbbf24; } .tf-sidebar .tf-sb-link i.fa-envelope-open-text { color: #22d3ee; } .tf-sidebar .tf-sb-link i.fa-bolt { color: #facc15; } .tf-sidebar .tf-sb-link i.fa-right-left { color: #60a5fa; } .tf-sidebar .tf-sb-link i.fa-money-bill-transfer { color: #4ade80; } .tf-sidebar .tf-sb-link i.fa-scale-unbalanced { color: #fb923c; } .tf-sidebar .tf-sb-link i.fa-building-columns { color: #a78bfa; } .tf-sidebar .tf-sb-link i.fa-user-clock { color: #2dd4bf; } .tf-sidebar .tf-sb-link i.fa-lock-open { color: #fbbf24; } .tf-sidebar .tf-sb-link i.fa-fingerprint { color: #f472b6; } .tf-sidebar .tf-sb-link i.fa-users-gear { color: #818cf8; } .tf-sidebar .tf-sb-link i.fa-shield { color: #34d399; } /* ========================================================================== نظام الأزرار الموحَّد: كل عائلات الأزرار (Bootstrap وtf-btn وfd وtravel وhd...) بنفس القياس والتنسيق في كل الشاشات، داخل الجداول وخارجها؛ الاختلاف في اللون فقط (دور الزر). ========================================================================== */ :is(.btn, .tf-btn, .fd-btn, .travel-btn, .tf-export-btn, .cs-btn, .hd-btn, .tf-cell-btn, .ao-btn, .tf-action-btn, .btn-primary-custom, .btn-success-custom, .docs-btn, .tp-hcard-btn, .journey-button):where(:not(.btn-close, .btn-link, .tf-navbar *)) { --b-bg: var(--theme-card, #fff); --b-fg: var(--theme-text, #0b1a2e); --b-bd: var(--theme-line, #cfd9e6); --b-sh: var(--ui-sh-1); display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 40px !important; height: auto !important; padding: 0 18px !important; border-radius: 12px !important; border: 1px solid var(--b-bd) !important; background: var(--b-bg) !important; color: var(--b-fg) !important; box-shadow: var(--b-sh); font-family: var(--ui-font) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; transition: transform .18s var(--ui-ease), box-shadow .22s var(--ui-ease), background-color .2s, border-color .2s, color .2s, filter .2s; } :is(.btn, .tf-btn, .fd-btn, .travel-btn, .tf-export-btn, .cs-btn, .hd-btn, .tf-cell-btn, .ao-btn, .tf-action-btn, .btn-primary-custom, .btn-success-custom, .docs-btn, .tp-hcard-btn, .journey-button):where(:not(.btn-close, .btn-link, .tf-navbar *)) i { font-size: 1em; } :is(.btn, .tf-btn, .fd-btn, .travel-btn, .tf-export-btn, .cs-btn, .hd-btn, .tf-cell-btn, .ao-btn, .tf-action-btn, .btn-primary-custom, .btn-success-custom, .docs-btn, .tp-hcard-btn, .journey-button):where(:not(.btn-close, .btn-link, .tf-navbar *)):not(:disabled):not(.disabled):hover { transform: translateY(-1px); border-color: var(--b-hover-bd, var(--ui-primary-2)) !important; color: var(--b-hover-fg, var(--ui-primary)) !important; } :is(.btn, .tf-btn, .fd-btn, .travel-btn, .tf-export-btn, .cs-btn, .hd-btn, .tf-cell-btn, .ao-btn, .tf-action-btn, .btn-primary-custom, .btn-success-custom, .docs-btn, .tp-hcard-btn, .journey-button):where(:not(.btn-close, .btn-link, .tf-navbar *)):active { transform: scale(.97); } :is(.btn, .tf-btn, .fd-btn, .travel-btn, .tf-export-btn, .cs-btn, .hd-btn, .tf-cell-btn, .ao-btn, .tf-action-btn, .btn-primary-custom, .btn-success-custom, .docs-btn, .tp-hcard-btn, .journey-button):disabled, .btn.disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } /* الأدوار الملوّنة (تدرّج + لمعة) */ :is(.btn-primary, .tf-btn-primary, .tf-btn-save, .btn-primary-custom, .travel-btn.primary, .hd-btn.primary, .journey-button.primary, .btn-success, .btn-success-custom, .tf-btn-success, .travel-btn.yes, .tf-export-btn.xls, .btn-warning, .tf-btn-warning, .btn-danger, .tf-btn-danger, .travel-btn.no, .ao-btn.ao-danger, .tf-export-btn.pdf, .btn-info, .tf-btn-info, .tf-export-btn.doc, .btn-dark, .tf-btn-dark) { --b-fg: #fff; --b-bd: transparent; --b-hover-fg: #fff; --b-hover-bd: transparent; border-color: transparent !important; color: #fff !important; } :is(.btn-primary, .tf-btn-primary, .tf-btn-save, .btn-primary-custom, .travel-btn.primary, .hd-btn.primary, .journey-button.primary) { background: var(--ui-grad) !important; box-shadow: var(--ui-sh-glow); } :is(.btn-success, .btn-success-custom, .tf-btn-success, .travel-btn.yes, .tf-export-btn.xls) { background: linear-gradient(135deg, #15803d, #22c55e) !important; box-shadow: 0 8px 20px -8px rgba(21, 128, 61, .7); } :is(.btn-warning, .tf-btn-warning) { --b-hover-fg: #3b2603; background: var(--ui-grad-gold) !important; color: #3b2603 !important; box-shadow: 0 8px 20px -8px rgba(245, 158, 11, .8); } :is(.btn-danger, .tf-btn-danger, .travel-btn.no, .ao-btn.ao-danger, .tf-export-btn.pdf) { background: linear-gradient(135deg, #b91c1c, #ef4444) !important; box-shadow: 0 8px 20px -8px rgba(185, 28, 28, .7); } :is(.btn-info, .tf-btn-info, .tf-export-btn.doc) { background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important; box-shadow: 0 8px 20px -8px rgba(29, 78, 216, .7); } :is(.btn-dark, .tf-btn-dark) { background: var(--ui-grad-navy) !important; box-shadow: var(--ui-sh-1); } :is(.btn-primary, .tf-btn-primary, .tf-btn-save, .btn-primary-custom, .travel-btn.primary, .hd-btn.primary, .journey-button.primary, .btn-success, .btn-success-custom, .tf-btn-success, .travel-btn.yes, .tf-export-btn.xls, .btn-warning, .tf-btn-warning, .btn-danger, .tf-btn-danger, .travel-btn.no, .ao-btn.ao-danger, .tf-export-btn.pdf, .btn-info, .tf-btn-info, .tf-export-btn.doc, .btn-dark, .tf-btn-dark):not(:disabled):hover { filter: brightness(1.07) saturate(1.1); color: #fff !important; border-color: transparent !important; } :is(.btn-warning, .tf-btn-warning):not(:disabled):hover { color: #3b2603 !important; } html[data-theme=dark] :is(.btn-primary, .tf-btn-primary, .tf-btn-save, .btn-primary-custom, .travel-btn.primary, .hd-btn.primary, .journey-button.primary) { color: #04211e !important; } /* مخطّط ملوّن بدل التعبئة */ :is(.btn-outline-primary, .tf-btn-outline) { --b-fg: var(--ui-primary); --b-bd: var(--ui-primary-2); background: transparent !important; box-shadow: none; } :is(.btn-outline-danger) { --b-fg: #dc2626; --b-bd: #f87171; --b-hover-fg: #dc2626; --b-hover-bd: #ef4444; background: transparent !important; box-shadow: none; } :is(.btn-outline-success) { --b-fg: #15803d; --b-bd: #4ade80; --b-hover-fg: #15803d; --b-hover-bd: #22c55e; background: transparent !important; box-shadow: none; } :is(.btn-outline-warning) { --b-fg: #b45309; --b-bd: #fbbf24; --b-hover-fg: #b45309; --b-hover-bd: #f59e0b; background: transparent !important; box-shadow: none; } :is(.btn-outline-primary, .tf-btn-outline):not(:disabled):hover { background: var(--ui-primary-soft) !important; } :is(.btn-outline-danger):not(:disabled):hover { background: rgba(239, 68, 68, .1) !important; color: #dc2626 !important; border-color: #ef4444 !important; } :is(.btn-outline-success):not(:disabled):hover { background: rgba(34, 197, 94, .1) !important; color: #15803d !important; border-color: #22c55e !important; } html[data-theme=dark] :is(.btn-outline-danger) { --b-fg: #fca5a5; } html[data-theme=dark] :is(.btn-outline-success) { --b-fg: #86efac; } html[data-theme=dark] :is(.btn-outline-warning) { --b-fg: #fcd34d; } /* شفاف/رابط */ :is(.tf-btn-ghost, .tf-btn-link) { --b-bd: transparent; background: transparent !important; box-shadow: none; } .btn-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; } /* الأحجام: الصغير داخل الجداول، وأزرار الأيقونة المربعة */ :is(.btn-sm, .tf-btn-sm) { min-height: 32px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 12.5px !important; } :is(.btn-lg, .tf-btn-lg) { min-height: 48px !important; padding: 0 26px !important; font-size: 15px !important; } :is(.tf-row-action, .tf-cell-btn, .tf-action-btn, .tf-page-btn) { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; min-width: 34px; height: 34px; padding: 0 !important; border-radius: 10px !important; border: 1px solid var(--theme-line, #cfd9e6) !important; background: var(--theme-card, #fff) !important; color: var(--theme-secondary, #26374c) !important; font-size: 14px; box-shadow: var(--ui-sh-1); text-decoration: none !important; transition: transform .18s var(--ui-ease), box-shadow .2s, background-color .2s, color .2s, border-color .2s; } :is(.tf-row-action, .tf-cell-btn, .tf-action-btn, .tf-page-btn):hover { transform: translateY(-1px); border-color: var(--ui-primary-2) !important; color: var(--ui-primary) !important; background: var(--ui-primary-soft) !important; } .tf-row-action.save { color: #15803d !important; border-color: #86efac !important; } .tf-row-action.tf-row-action-danger { color: #dc2626 !important; border-color: #fca5a5 !important; } .tf-row-action.tf-row-action-danger:hover { background: rgba(239, 68, 68, .1) !important; border-color: #ef4444 !important; } .tf-page-btn { width: auto; padding-inline: 12px !important; min-width: 36px; height: 36px; } .tf-page-btn.active { background: var(--ui-grad) !important; color: #fff !important; border-color: transparent !important; } html[data-theme=dark] .tf-page-btn.active { color: #04211e !important; } @media (max-width: 768px) { :is(.btn, .tf-btn):not(.btn-sm):not(.tf-btn-sm):where(:not(.btn-close, .btn-link, .tf-navbar *)) { min-height: 44px !important; } } @media print { :is(.btn, .tf-btn, .tf-row-action) { display: none !important; } } /* عدّاد العناصر الفرعية داخل عنصر القائمة الجانبية الأب */ .tf-sb-count { margin-inline-start: auto; margin-inline-end: 8px; min-width: 22px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(251, 191, 36, .16); color: #fbbf24; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid rgba(251, 191, 36, .35); } .tf-sb-link.active > .tf-sb-count, .tf-sb-link[aria-expanded=true] > .tf-sb-count { background: rgba(251, 191, 36, .28); } .tf-sidebar.collapsed .tf-sb-count { display: none; } /* قائمة اللغة المنسدلة (بديل جميل عن قائمة المتصفح) */ .tf-language-picker { position: relative; } .tf-language-picker select.tf-dd-native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; min-width: 0 !important; } .tf-dd { position: relative; display: inline-flex; } .tf-dd-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: #f1f5f9; font: 600 13px var(--ui-font); cursor: pointer; padding: 0 2px; } .tf-dd-btn .fa-chevron-down { font-size: 10px; opacity: .7; transition: transform .22s var(--ui-ease); } .tf-dd[aria-expanded=true] .tf-dd-btn .fa-chevron-down { transform: rotate(180deg); } .tf-dd-menu { position: absolute; top: calc(100% + 14px); inset-inline-end: -8px; min-width: 168px; z-index: 2000; margin: 0; padding: 6px; list-style: none; background: rgba(15, 27, 45, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(148, 163, 184, .25); border-radius: 16px; box-shadow: 0 22px 50px -16px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; transition: opacity .18s var(--ui-ease), transform .18s var(--ui-ease); } .tf-dd[aria-expanded=true] .tf-dd-menu { opacity: 1; transform: none; pointer-events: auto; } .tf-dd-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 11px; color: #e2e8f0; font: 600 13.5px var(--ui-font); cursor: pointer; transition: background-color .15s, color .15s; } .tf-dd-item:hover, .tf-dd-item:focus-visible { background: rgba(20, 184, 166, .18); color: #fff; outline: none; box-shadow: none; } .tf-dd-item[aria-selected=true] { background: linear-gradient(135deg, rgba(245, 158, 11, .22), rgba(251, 191, 36, .12)); color: #fbbf24; } .tf-dd-item .fa-check { font-size: 11px; opacity: 0; } .tf-dd-item[aria-selected=true] .fa-check { opacity: 1; } /* ما تبقى من أزرار بتنسيق قديم: تبويبات اللوحات، أزرار الأدوات، مفاتيح الشجرة، وأي