/* =========================================================================== CyberSee Dashboard — Master Stylesheet ملف الأنماط الرئيسي — لوحة تحكم سايبرسي =========================================================================== Table of Contents | فهرس المحتويات ───────────────────────────────────── §01 CSS Variables & Theme System | متغيرات CSS ونظام السمات §02 Font Declarations | تعريف الخطوط §03 Base Styles & Typography | الأنماط الأساسية والخطوط §04 Header, Footer & Layout | الهيكل والترويسة §05 Dashboard Cards & Variants | بطاقات لوحة التحكم §06 Sidebar Navigation | القائمة الجانبية §07 Filters, Dropdowns & Search | الفلاتر والقوائم والبحث §08 Data Tables & Skeletons | الجداول وحالات التحميل §09 Microservices Toggle Cards | بطاقات الخدمات §10 Modals, Offcanvas & Panels | النوافذ المنبثقة واللوحات §11 IntroJS Tour & Checklist | جولة التعريف وقائمة المهام §12 Permissions System | نظام الصلاحيات §13 Authentication Pages | صفحات التسجيل والدخول §14 Policy & Legal Pages | صفحات السياسات والشروط §15 API Documentation | توثيق الـ API §16 KPI Cards & Panels | بطاقات مؤشرات الأداء §17 Reports & Analytics Panel | لوحة التقارير والتحليلات §18 Domain Details & DNS Grid | تفاصيل النطاقات §19 Charts & Visualizations | الرسوم البيانية §20 Tagify Input Styling | تنسيق حقل التاجات §21 Status Badges | شارات الحالة §22 Action Buttons | أزرار الإجراءات §23 Theme Toggle (Light/Dark) | مفتاح تبديل السمة §24 Terms & Consent Banner | بانر الموافقة والشروط §25 Date Picker Styling | تنسيق منتقي التاريخ §26 Advanced Dashboard Components | مكونات لوحة التحكم المتقدمة §27 Miscellaneous Utilities | أدوات متنوعة §28 Keyframe Animations | الرسوم المتحركة §29 Responsive Media Queries | استعلامات الشاشة المتجاوبة =========================================================================== */ /* ============================================================================= §01 CSS Variables & Theme System | متغيرات CSS ونظام السمات ============================================================================= */ /* ============================================================================= Brand Palette & Bootstrap Bridge (Primary = #4C0EE5) - DRY setup: names in :root, values per theme (light/dark) - Semantic scales keep consistent grades (50..900) - NON-BREAKING: variable names unchanged ============================================================================= */ /* ============================================================================ 0) SHARED NAMES (tokens, no values) — keep names stable for both themes ============================================================================ */ :root { --font-base: "SpaceGrotesk", sans-serif; /* Base font family */ --sidebar-width: 280px; /* Sidebar expanded width */ --sidebar-collapsed-width: 68px; /* Sidebar collapsed width */ /* Brand scale placeholders (values set per theme) */ --brand-primary: 0; --brand-primary-50: 0; --brand-primary-100: 0; --brand-primary-200: 0; --brand-primary-300: 0; --brand-primary-400: 0; --brand-primary-500: 0; --brand-primary-600: 0; --brand-primary-700: 0; --brand-primary-800: 0; --brand-primary-900: 0; /* Neutral & surface system (values set per theme) */ --brand-bg: 0; /* App/page background */ --brand-fg: 0; /* Primary text color */ --brand-muted: 0; /* Secondary text / helpers */ --brand-border: 0; /* Divider/border color */ --brand-elev: 0; /* Surface 1 (cards, sheets) */ --brand-elev-2: 0; /* Surface 2 (headers, modals) */ --brand-sidebar-bg: 0; /* Sidebar background */ --brand-sidebar-fg: 0; /* Sidebar text/icons */ --brand-card-bg: 0; /* Card background */ /* Semantic statuses */ --brand-success: 0; --brand-success-600: 0; --brand-warning: 0; --brand-warning-600: 0; --brand-danger: 0; --brand-danger-600: 0; --brand-info: 0; --brand-info-600: 0; /* Effects */ --brand-shadow: 0; --brand-focus-ring: 0; /* Dashboard accents (module-specific) */ --card-bg: 0; --keyword-accent: 0; --domain-accent: 0; --email-accent: 0; --username-accent: 0; --cases-accent: 0; --pending-cases-accent: 0; --progress-cases-accent: 0; --fixed-cases-accent: 0; --takedown-accent: 0; --pending-takedown-accent: 0; --progress-takedown-accent: 0; --fixed-takedown-accent: 0; /* Selects */ --select-bg: 0; --select-border: 0; --select-fg: 0; --select-arrow-svg: 0; --app-bg: 0; /* Alias for page bg */ } /* ============================================================================ 1) LIGHT THEME — glare-reduced, comfortable neutrals, crisp borders - Goal: lower eye strain vs. pure white while keeping clean look ============================================================================ */ :root, html[data-bs-theme="light"] { /* -------- Primary (base = #4C0EE5) -------- */ --brand-primary: #4C0EE5; /* Main brand hue */ --brand-primary-50: #F5F3FF; /* Subtle backgrounds, chips */ --brand-primary-100: #ECE7FF; /* Hover fills on subtle UI */ --brand-primary-200: #DCD1FF; /* Selected states (quiet) */ --brand-primary-300: #C2B0FF; /* Light badges */ --brand-primary-400: #A488FF; /* Links on hover (alt) */ --brand-primary-500: #7F5BFF; /* Medium emphasis */ --brand-primary-600: #5E2FEF; /* Hover/active on brand */ --brand-primary-700: #4C0EE5; /* Brand buttons/links */ --brand-primary-800: #3A0CB4; /* Focus outlines alt */ --brand-primary-900: #2A0885; /* High-contrast text on brand */ /* -------- Neutrals (comfort tune) -------- Tip: bg slightly warm-grey, surfaces white, borders crisp */ --brand-bg: #F4F6F9; /* App/page bg (reduced glare) */ --brand-fg: #0F172A; /* Primary text (≈ Slate-900) */ --brand-muted: #667085; /* Secondary text/icons */ --brand-border: rgba(2, 6, 23, 0.10); /* Hairline borders (1:0.10) */ --brand-elev: #FFFFFF; /* Surface 1 (cards, tables) */ --brand-elev-2: #FAFBFF; /* Surface 2 (headers, sheets) */ /* -------- Semantics -------- */ --brand-success: #22C55E; /* Success bg */ --brand-success-600: #16A34A; /* Success text/hover */ --brand-warning: #F59E0B; /* Warning bg */ --brand-warning-600: #D97706; /* Warning text/hover */ --brand-danger: #EF4444; /* Error bg */ --brand-danger-600: #DC2626; /* Error text/hover */ --brand-info: #0EA5E9; /* Info bg */ --brand-info-600: #0284C7; /* Info text/hover */ /* -------- Component specifics -------- */ --brand-sidebar-bg: #FFFFFF; /* Sidebar surface */ --brand-sidebar-fg: #475569; /* Sidebar icons/labels */ --brand-card-bg: var(--brand-elev); /* -------- Effects -------- */ --brand-shadow: 0 10px 28px rgba(2, 6, 23, .06); /* Soft elevation */ --brand-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 28%, transparent); /* -------- Dashboard tokens -------- */ --card-bg: hsla(220, 20%, 98%, 1); /* Panels behind widgets */ --keyword-accent: #16A34A; /* "Keywords" chip/border */ --domain-accent: #0369A1; /* Domain labels/links */ --email-accent: #C2410C; /* Email markers/badges */ --username-accent: #7E22CE; /* Username markers */ --cases-accent: #475569; /* Neutral cases count */ --pending-cases-accent: #CA8A04; /* Pending status */ --progress-cases-accent: #0891B2; /* In-progress status */ --fixed-cases-accent: #65A30D; /* Resolved status */ --takedown-accent: #0F766E; --pending-takedown-accent: #B45309; --progress-takedown-accent: #1E40AF; --fixed-takedown-accent: #BE185D; /* -------- Selects (comfortable contrast) -------- */ --select-bg: #FFFFFF; /* Field bg */ --select-border: rgba(2, 6, 23, 0.18); /* Field border */ --select-fg: #0F172A; /* Text color */ --select-arrow-svg: url("data:image/svg+xml;utf8,"); /* -------- Bootstrap bridge (light) -------- */ --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-fg); --bs-border-color: var(--brand-border); --bs-card-bg: var(--brand-card-bg); --bs-card-border-color: var(--brand-border); --bs-sidebar-bg: var(--brand-sidebar-bg); --bs-sidebar-color: var(--brand-sidebar-fg); --bs-primary: var(--brand-primary); --bs-primary-rgb: 76, 14, 229; /* #4C0EE5 */ --bs-link-color: var(--brand-primary); --bs-link-hover-color: var(--brand-primary-600); --bs-success: var(--brand-success); --bs-warning: var(--brand-warning); --bs-danger: var(--brand-danger); --bs-info: var(--brand-info); --bs-muted: var(--brand-muted); --app-bg: var(--brand-bg); /* -------- Legacy/custom system tokens (kept for parity) -------- */ --cs-bg: #F4F6F9; /* Matches page bg */ --cs-text: #0B1324; /* High-contrast text */ --cs-muted: #5B6474; /* Secondary text */ --cs-border: rgba(2, 6, 23, .12); /* Dividers */ --cs-card: rgba(255, 255, 255, .96); /* Translucent card */ --cs-shadow: 0 18px 48px rgba(2, 6, 23, .10); } /* ============================================================================ 2) DARK THEME (kept; minor tuning already good for comfort) ============================================================================ */ html[data-bs-theme="dark"] { /* Primary scale (dark-friendly) */ --brand-primary: #4C0EE5; --brand-primary-50: #2A2350; --brand-primary-100: #342A66; --brand-primary-200: #40327F; --brand-primary-300: #5239A6; --brand-primary-400: #6B46D9; --brand-primary-500: #825BFF; --brand-primary-600: #9C7DFF; --brand-primary-700: #B8A4FF; --brand-primary-800: #D6CBFF; --brand-primary-900: #EEE8FF; /* Neutrals (dark) */ --brand-bg: #0F1319; --brand-fg: #E5E7EB; --brand-muted: #9CA3AF; --brand-border: rgba(255, 255, 255, .10); --brand-elev: #121721; --brand-elev-2: #151B24; /* Semantics (bright for dark) */ --brand-success: #22C55E; --brand-success-600: #16A34A; --brand-warning: #FBBF24; --brand-warning-600: #F59E0B; --brand-danger: #F87171; --brand-danger-600: #EF4444; --brand-info: #38BDF8; --brand-info-600: #0EA5E9; /* Components */ --brand-sidebar-bg: #0F1319; --brand-sidebar-fg: #CBD5E1; --brand-card-bg: var(--brand-elev); /* Effects */ --brand-shadow: 0 10px 28px rgba(0, 0, 0, .35); --brand-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 45%, transparent); /* Dashboard */ --card-bg: hsla(224, 66%, 8%, 1); /* Accents (consistent across themes) */ --keyword-accent: #22C55E; --domain-accent: #0284C7; --email-accent: #F97316; --username-accent: #A855F7; --cases-accent: #64748B; --pending-cases-accent: #EAB308; --progress-cases-accent: #06B6D4; --fixed-cases-accent: #84CC16; --takedown-accent: #0D9488; --pending-takedown-accent: #F59E0B; --progress-takedown-accent: #2563EB; --fixed-takedown-accent: #EC4899; /* Selects (dark) */ --select-bg: var(--dark-surface-2, #2A2D3A); --select-border: var(--dark-border, rgba(255, 255, 255, .15)); --select-fg: #FFFFFF; --select-arrow-svg: url("data:image/svg+xml;utf8,"); /* Bootstrap bridge (dark) */ --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-fg); --bs-border-color: var(--brand-border); --bs-card-bg: var(--brand-card-bg); --bs-card-border-color: var(--brand-border); --bs-sidebar-bg: var(--brand-sidebar-bg); --bs-sidebar-color: var(--brand-sidebar-fg); --bs-primary: var(--brand-primary); --bs-primary-rgb: 76, 14, 229; --bs-link-color: var(--brand-primary); --bs-link-hover-color: var(--brand-primary-600); --bs-success: var(--brand-success); --bs-warning: var(--brand-warning); --bs-danger: var(--brand-danger); --bs-info: var(--brand-info); --bs-muted: var(--brand-muted); --app-bg: var(--brand-bg); /* Custom system tokens (kept) */ --cs-primary: #4C0EE5; --cs-primary-2: #00E5FF; --cs-bg: #0B1224; --cs-text: #E6EEF8; --cs-muted: #9AA3B2; --cs-border: rgba(255, 255, 255, .12); --cs-card: rgba(16, 22, 35, .78); --cs-rad: 18px; --cs-shadow: 0 24px 64px rgba(0, 0, 0, .4); --success: #22C55E; --info: #0EA5E9; } /* Global scrollbar thumb: white (dark) / black (light) */ /* Light theme = black thumb */ :root, html[data-bs-theme="light"] { --scroll-track: var(--brand-elev, #ffffff); --scroll-thumb: #0f0f0f; /* black */ --scroll-thumb-hover: #000000; --scroll-thumb-active: #1a1a1a; --scrollbar-size: 12px; } /* Dark theme = white thumb */ html[data-bs-theme="dark"] { --scroll-track: var(--brand-elev, #121721); --scroll-thumb: #ffffff; /* white */ --scroll-thumb-hover: #ffffff; --scroll-thumb-active: #e9e9e9; --scrollbar-size: 12px; } /* ============================================================ Marketplace dropdown lists — scroll buttons + theming only (CSS) Targets: .dropdown-menu-filter .dropdown-scroll (Authors/Sources) - No HTML/JS changes required - Uses brand tokens to match light/dark - Shows real vertical scrollbar buttons (Chrome/Edge/Safari) - Firefox gets thin themed scrollbar + fade shadows ============================================================ */ /* --- Theme tokens for the scrollbar --- */ :root, html[data-bs-theme="light"] { --scroll-track: var(--brand-elev); } html[data-bs-theme="dark"] { --scroll-track: var(--brand-elev); } /* ========================================================= Minimal, scoped styles for the banner & tooltip - Works in dark/light automatically ========================================================= */ :root { --cs-primary: #4C0EE5; --cs-info: #0EA5E9; --cs-danger: #F59E0B; /* amber-ish warning for better contrast on dark */ --cs-bg-elev: var(--brand-elev, #121721); --cs-border: rgba(255, 255, 255, .12); --cs-text: var(--brand-fg, #E5E7EB); } html[data-bs-theme='light'] { --cs-bg-elev: var(--brand-elev, #ffffff); --cs-border: rgba(2, 6, 23, .12); --cs-text: var(--brand-fg, #0B1324); } /*html[data-bs-theme=light] .sidebar {*/ /* background: #0F1319;*/ /* border-right: 1px solid #dee2e6*/ /*}*/ /*html[data-bs-theme="light"] .sidebar .sidebar-item.active > a, html[data-bs-theme="light"] sidebar .sidebar-item.active > button,*/ /*html[data-bs-theme="light"] .submenu-item.active > a, .submenu-item > a[aria-current="page"] {*/ /* background: #EAEDFB;*/ /* color: #fff;*/ /* box-shadow: none;*/ /*}*/ /*html[data-bs-theme=light] .submenu-item.active > a, .submenu-item > a[aria-current="page"] i,*/ /*html[data-bs-theme=light] .submenu-item.active > a, .submenu-item > a[aria-current="page"] i {*/ /* color: #ffffff;*/ /*}*/ /*html[data-bs-theme=light] .sidebar .has-submenu.open > .submenu-toggle {*/ /* background: #EAEDFB;*/ /* color: #fff;*/ /* box-shadow: none;*/ /*}*/ /*html[data-bs-theme="light"] .sidebar .sidebar-item a:hover,*/ /*html[data-bs-theme="light"] .sidebar .sidebar-item button:hover {*/ /* !*background: #EAEDFB;*!*/ /* color: #fff;*/ /*}*/ /*html[data-bs-theme=light] .sidebar .sidebar-item a:hover, html[data-bs-theme=light].sidebar .sidebar-item button:hover {*/ /* color: #fff;*/ /* !*background: #EAEDFB;*!*/ /*}*/ /* ===== CyberSee Hotspot + Checklist (theme-aware, no hardcoded colors) ===== */ /* Token bridge so we always read your system first */ :root { --cs-primary: var(--brand-primary, var(--bs-primary, #4C0EE5)); --cs-success: var(--brand-success, var(--bs-success, #22c55e)); --cs-fg: var(--brand-fg, var(--bs-body-color, #e6e8ee)); --cs-bg: var(--brand-elev, var(--bs-card-bg, #121721)); --cs-bg-2: var(--brand-elev-2, color-mix(in srgb, var(--bs-body-bg, #0e1320) 88%, #fff 12%)); --cs-border: var(--brand-border, var(--bs-border-color, rgba(148, 163, 184, .18))); --cs-shadow: var(--brand-shadow, 0 24px 60px rgba(0, 0, 0, .35)); --cs-muted: var(--brand-muted, #9ca3af); } /* Light tweaks when app theme is light */ html[data-bs-theme="light"] { --cs-fg: var(--brand-fg, var(--bs-body-color, #0f172a)); --cs-bg: var(--brand-elev, var(--bs-card-bg, #ffffff)); --cs-bg-2: var(--brand-elev-2, #f8fafc); --cs-border: var(--brand-border, var(--bs-border-color, rgba(2, 6, 23, .10))); } /* ============================================================================= §02 Font Declarations | تعريف الخطوط ============================================================================= */ /* ============================================================================= Fonts — keep original sources and weights (no visual change) ============================================================================= */ @font-face { font-family: "SpaceGrotesk"; src: url("../fonts/Space_Grotesk/SpaceGrotesk-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "SpaceGrotesk"; src: url("../fonts/Space_Grotesk/SpaceGrotesk-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "SpaceGrotesk"; src: url("../fonts/Space_Grotesk/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "SpaceGrotesk"; src: url("../fonts/Space_Grotesk/SpaceGrotesk-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "SpaceGrotesk"; src: url("../fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "IBMPlexSans_Condensed"; src: url("../fonts/IBM_Plex_Sans/IBMPlexSans_Condensed-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "IBMPlexSans_Condensed"; src: url("../fonts/IBM_Plex_Sans/IBMPlexSans_Condensed-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "IBMPlexSans_Condensed"; src: url("../fonts/IBM_Plex_Sans/IBMPlexSans_Condensed-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "IBMPlexSans_Condensed"; src: url("../fonts/IBM_Plex_Sans/IBMPlexSans_Condensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "JetBrainsMono"; src: url("../fonts/IBM_Plex_Sans/JetBrainsMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } /* ============================================================================= §03 Base Styles & Typography | الأنماط الأساسية والخطوط ============================================================================= */ /* ============================================================================= Base — typography, helpers, and form controls ============================================================================= */ body { background-color: var(--brand-bg); color: var(--brand-fg); overflow-x: hidden; overflow-y: auto !important; font-family: var(--font-base); font-weight: 400; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: var(--brand-fg); } h1, h2, h3, .dashboard-title { font-weight: 600; } /* headings */ .number-val, code, .badge { font-weight: 500; } /* semibold accents */ ul { list-style: none; padding: 0; margin: 0; } .btn { height: 40px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; } .bg-light { background: var(--brand-elev) !important; } /* Buttons — keep exact palette */ .btn-primary { color: #fff; background: var(--brand-primary); border-color: var(--brand-primary); } .btn-outline-danger { color: var(--brand-danger); border-color: var(--brand-danger); } .btn-outline-danger:hover { color: #fff; background-color: var(--brand-danger); border-color: var(--brand-danger); } .btn-outline-success { color: var(--brand-success); } .btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); } .btn-outline-primary:hover { color: #fff; background-color: var(--brand-primary); } .btn-danger { color: #fff; background-color: var(--brand-danger); border-color: var(--brand-danger); } .btn-danger:hover { color: #fff; background-color: var(--brand-danger-600); border-color: var(--brand-danger-600); } .border { border-color: var(--brand-border) !important; } .text-light, .text-dark, .dark-swal-title, .text-white { color: var(--brand-fg) !important; } .text-success { color: var(--brand-success) !important; } .text-danger { color: var(--brand-danger) !important; } .text-warning { color: var(--brand-warning) !important; } .text-info { color: var(--brand-info) !important; } .text-muted { color: var(--brand-muted) !important; } .header .theme-icon, .header .user-icon { color: var(--brand-fg); } .form-control { background-color: var(--brand-elev-2); border-color: var(--brand-border) !important; color: var(--brand-fg); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); } /* Chrome/Edge/Safari */ *::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); background: var(--scroll-track); } *::-webkit-scrollbar-track { background: var(--scroll-track); } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 3px solid var(--scroll-track); /* ring for contrast */ } *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } *::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-active); } .footer, .dashboard-header, body.sidebar-expanded .main-content { margin-left: var(--sidebar-width) !important; width: calc(100% - var(--sidebar-width)) !important; } .header h1 { font-size: 32px; font-weight: 600; flex: 1; margin: 0; } .sidebar.collapsed ul.sidebar-menu { padding: 0; } /* Menu list */ .sidebar ul.sidebar-menu { padding: 0 10px; margin: 0; list-style: none; } /* Layout shift via body flags */ body.sidebar-expanded .layout-header, body.sidebar-expanded .layout-footer, body.sidebar-expanded .main-content { margin-inline-start: var(--sidebar-width) !important; inline-size: calc(100% - var(--sidebar-width)) !important; width: calc(100% - var(--sidebar-width)) !important; } body.sidebar-collapsed .layout-header, body.sidebar-collapsed .layout-footer, body.sidebar-collapsed .main-content { margin-inline-start: var(--sidebar-collapsed-width) !important; inline-size: calc(100% - var(--sidebar-collapsed-width)) !important; width: calc(100% - var(--sidebar-collapsed-width)) !important; } /* Global show when body is collapsed (top-level + submenu) */ /* Legacy collapsed ::after tooltip — disabled (using real DOM tooltip now) */ body.sidebar-collapsed #sidebar [data-tip]:hover::after, body.sidebar-collapsed #sidebar [data-tip]:focus-visible::after { display: none !important; content: none !important; } td .badge { color: #fff !important; } .form-select { background-color: var(--brand-elev-2); } .dropdown-menu-filter .regex-filter .form-control { background-color: var(--brand-elev); color: var(--brand-fg); border-color: var(--brand-border); } .regex-filter .form-control::placeholder { color: var(--bs-muted); opacity: .8; } .btn-30 { height: 30px; } .regex-list .form-control, .regex-list .form-select { height: 40px; } .regex-filter .btn-outline-primary { color: #60a5fa; border-color: #60a5fa; } .stat-label { color: var(--brand-muted); } .dropdown-scroll .input-group-sm .btn-outline-danger { height: 45px; } /* --- WebKit/Blink scrollbar (Chrome/Edge/Safari) --- */ .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar { width: 8px; /* vertical bar width */ height: 8px; /* horizontal (rare here) */ } .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar-track { background: var(--scroll-track); border-left: 1px solid var(--brand-border); } .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); /* creates padding around thumb */ border-radius: 12px; width: 4px; } .dropdown-menu-filter .dropdown-scroll:hover::-webkit-scrollbar-thumb { background: var(--scroll-thumb-hover); } .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-active); } /* --- Real vertical scroll buttons (blink/webkit) --- */ .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar-button { height: 14px; /* ensure buttons are visible */ background: var(--scroll-button-bg); border-left: 1px solid var(--brand-border); } /* Up button */ .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar-button:single-button:vertical:decrement { background: var(--scroll-button-bg) center/10px 10px no-repeat; /* inline SVG arrow using current brand color */ -webkit-mask: url("data:image/svg+xml;utf8,\ \ \ ") center / 12px 12px no-repeat; mask: url("data:image/svg+xml;utf8,\ \ \ ") center / 12px 12px no-repeat; color: var(--scroll-button-ico); } /* Down button */ .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar-button:single-button:vertical:increment { background: var(--scroll-button-bg) center/10px 10px no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,\ \ \ ") center / 12px 12px no-repeat; mask: url("data:image/svg+xml;utf8,\ \ \ ") center / 12px 12px no-repeat; color: var(--scroll-button-ico); } .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar-button:hover { filter: brightness(1.06); } .dropdown-menu-filter .dropdown-scroll::-webkit-scrollbar-button:active { filter: brightness(0.96); } /* --- Tiny polish: counter alignment & type scale --- */ .dropdown-menu-filter .dropdown-item-option .form-check-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; } .dropdown-menu-filter .dropdown-item-option .form-check-label span:last-child { min-width: 38px; text-align: end; opacity: .75; } tbody.force-table-group { display: table-row-group !important; } /* ============================================================================= STABLE LOADING - Prevent layout shift during table loading ============================================================================= */ /* Skeleton tbody - hidden by default, shown during loading */ .skeleton-tbody { display: none; } /* Show skeleton during loading */ .skeleton-tbody.skeleton-visible { display: table-row-group; } /* Data tbody - smooth fade during loading */ .data-tbody { transition: opacity 0.15s ease-out; } /* Fade data during loading */ .data-tbody.data-loading { opacity: 0; pointer-events: none; position: absolute; visibility: hidden; } /* ============================================================================= END STABLE LOADING ============================================================================= */ .skeleton-box.skeleton-btn { width: 32px; height: 32px; border-radius: 6px; } .btn-export-filters, .btn-clear-filters { padding: 6px 12px; line-height: 1.2; flex: 0 0 100px; font-size: 12px; cursor: pointer; transition: .2s; height: 40px; } /* Hide scrollbar for Chrome, Safari, and newer Edge */ .table-viewport::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } label { font-size: 14px; } .offcanvas-surface-body { padding-top: 1rem; } .btn-close-white { filter: invert(1) grayscale(100%) brightness(180%); } .detail-label { color: #cbd5e1; font-size: .9rem; white-space: nowrap; } .break-all { word-break: break-all; overflow-wrap: anywhere; } html[data-bs-theme='light'] .detail-label { color: #475569; } .intro-cybersee .introjs-bullets ul li a { background: var(--intro-bullet-off); } .intro-cybersee .introjs-bullets ul li a.active { background: var(--intro-bullet-on); } .btn-icon { position: relative; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--brand-border); background: var(--brand-elev-2); color: var(--brand-fg); cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } .btn-icon .pill-counter { position: absolute; top: -7px; right: -7px; } .btn-icon:disabled, .btn-icon.disabled { opacity: .35; cursor: not-allowed; transform: none; } .btn-icon i { font-size: 16px; line-height: 1; } .btn-spinner { width: 16px; height: 16px; border-width: 2px; color: #fff; } .form-control, .form-select { height: 45px; } /* Compact button size for header actions */ .btn-xxs { font-size: .75rem; --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .75rem; line-height: 1; gap: .25rem; } .modal, .modal-dialog, .modal-content, .modal-body { overscroll-behavior: contain; } html.modal-open, body.modal-open { overflow: hidden !important; touch-action: none; } .modal-dialog.modal-dialog-scrollable .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } #export_phishing .btn-close { filter: invert(0); /* stays visible on light */ } html[data-bs-theme="dark"] #export_phishing .btn-close { filter: invert(1); /* visible on dark */ } #export_phishing .modal-body { background: var(--brand-elev); padding: 16px 18px; } #export_phishing .form-check-label { color: var(--brand-fg); font-size: 14px; margin-inline-start: 8px; cursor: pointer; user-select: none; } /* Brand buttons (non-breaking: just styling) */ #export_phishing .btn-brand-secondary { /* Outline look based on tokens */ background: transparent; color: var(--brand-fg); border: 1px solid var(--brand-border); } #export_phishing .btn-brand-secondary:hover { background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--brand-border)); } #export_phishing .btn-brand-primary { background: var(--brand-primary); border: 1px solid color-mix(in srgb, var(--brand-primary) 65%, black); color: #fff; } #export_phishing .btn-brand-primary:hover { background: var(--brand-primary-600); border-color: color-mix(in srgb, var(--brand-primary-600) 70%, black); } /* Small, consistent button height with your base scale */ #export_phishing .btn { height: 38px; padding: 6px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } /* Disabled look while loading */ .btn.is-loading { opacity: 0.85; cursor: wait; transition: all .25s ease; } .config-table textarea.form-control { height: 75px !important; } .tab-loading-overlay .spinner-border { position: absolute; left: calc(50% - 16px); top: calc(50% - 16px); } .perm-module { font-weight: 700; letter-spacing: .2px; } /* Body */ .perm-card-body { padding: 12px 16px 16px; border-top: 1px solid rgba(148, 163, 184, .16); } /* Module master toggle */ .perm-module-master { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .perm-module-master .form-check-input { width: 18px; height: 18px; border-radius: 5px; } .perm-chip .label { font-size: 14px; letter-spacing: .1px; } .perm-save .btn { height: 44px; min-width: 160px; border-radius: 10px; font-weight: 700; box-shadow: 0 8px 18px rgba(34, 197, 94, .18); } .perm-title-block label { font-size: 13px; color: #cbd5e1; } .perm-title-block .form-control { height: 44px; border-radius: 10px; background: #11151d; color: #E5E7EB; border: 1px solid rgba(148, 163, 184, .22); } .perm-title-block .form-control:focus { border-color: #6E8EEA; box-shadow: 0 0 0 3px rgba(110, 142, 234, .18); } /* Indeterminate master checkbox look (optional) */ .form-check-input.indeterminate { position: relative; } .form-check-input.indeterminate::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 60%; height: 2px; transform: translate(-50%, -50%); background: currentColor; border-radius: 2px; } .page-toolbar .btn { display: inline-flex; align-items: center; gap: .5rem; height: 40px; border-radius: 10px; font-weight: 600; } /* ---------- Title ---------- */ .page-title { display: flex; align-items: center; gap: .6rem; color: var(--tp-text); margin: 0 0 .75rem 0; } .page-title i { opacity: .9; } body.sidebar-collapsed #sidebar .submenu-item { padding: 0; } .export-btn { background: var(--brand-primary); border: 1px solid var(--brand-primary); border-radius: 6px; color: #fff; font-size: 13px; font-weight: 500; padding: 10px 18px; display: flex; align-items: center; cursor: pointer; transition: background-color 0.2s; } .export-btn:hover { background: var(--brand-primary-600); } .config-table tbody tr:hover { background: var(--brand-elev-2); } /* منع الـ Livewire من كسر تنسيق الجدول */ tbody[wire\:loading] { display: none; } /* Enhanced spinner */ .table-loading-overlay .spinner-border { width: 3rem !important; height: 3rem !important; border-width: 0.25rem; color: var(--brand-primary, #4C0EE5) !important; } .auth-hero h1 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.1; margin: 1rem 0 .5rem; } /* Form */ .form-label { color: var(--cs-muted); font-weight: 600; margin-bottom: 4px; } .form-control { border: 1px solid var(--cs-border); color: var(--cs-text); border-radius: 10px; padding: 10px 12px; transition: .25s; } .form-control:focus { border-color: color-mix(in srgb, var(--cs-primary) 60%, var(--cs-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-primary) 26%, transparent); } .form-check-input:checked { background-color: var(--cs-primary); border-color: var(--cs-primary); } /* Buttons & footer */ .btn-primary-gradient { background: linear-gradient(135deg, var(--cs-primary), var(--cs-primary-2)); border: none; color: #fff; font-weight: 800; letter-spacing: .2px; border-radius: 10px; padding: 11px 14px; transition: .25s; } .btn-primary-gradient:hover { transform: translateY(-1px); } .policy-title h1 { font-size: clamp(1.25rem, 2vw + .5rem, 1.75rem); font-weight: 800; margin: 0; } .policy-actions .btn { border-radius: 10px; } .policy-doc ul, .policy-doc ol { padding-left: 1.25rem; } .consent-actions .btn { border-radius: 10px; min-width: 180px; } /* Small helpers */ .text-muted-2 { color: var(--brand-muted); } .sep { width: 1px; height: 20px; background: var(--border-color); opacity: .6; } .icon-pill { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-primary) 14%, transparent); border: 1px solid var(--border-color); color: var(--brand-fg); } .token-wrap .form-control { height: 44px; border-radius: 0.375rem; color: var(--brand-fg); background: var(--brand-elev-2); border: 1px solid var(--brand-border); } .btn-pro { display: inline-flex; align-items: center; gap: .5rem; border-radius: 10px; height: 42px; padding: .4rem .9rem; } .btn-pro i { font-size: 1rem; } /* Disabled input visual for tokens (keep cursor text) */ .form-control:disabled { background-color: var(--brand-elev-2); opacity: 1; cursor: text; color: var(--brand-fg); } /* Divider */ .divider { height: 1px; background: var(--brand-border); margin: 1rem 0; } body.sidebar-collapsed .sidebar-expiry-tooltip { left: calc(var(--sidebar-collapsed-width, 68px) + 12px); } .sidebar-expiry-tooltip .tip-body { display: flex; align-items: center; gap: 10px; } .cs-filter .sub-label { font-size: .75rem; color: var(--cs-muted); margin: 0 0 4px 2px; } /* Inputs */ .cs-filter .form-control { background: color-mix(in srgb, var(--cs-bg) 70%, transparent); border: 1px solid var(--cs-border); color: var(--cs-fg); border-radius: 10px !important; appearance: none; height: 40px; font-size: .95rem; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .cs-filter .form-control:focus { border-color: var(--cs-primary); box-shadow: var(--cs-focus); outline: none; background: color-mix(in srgb, var(--cs-bg) 80%, transparent) !important; } /* Helpers */ .cs-filter .btn-clear { border: 1px solid var(--cs-border); background: transparent; color: #ef4444; font-size: .85rem; border-radius: 10px; padding: 6px 10px; } .cs-filter .btn-clear:hover { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); } .cs-filter .btn-clear-all { border: 1px solid var(--cs-border); background: transparent; color: #ef4444; border-radius: 10px; padding: 6px 10px; font-weight: 700; } .apexcharts-legend { margin-top: 6px !important; } .panel { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 18px; height: 100%; } /* Helpers */ .m0 { margin: 0 } .mt8 { margin-top: 8px } .mt12 { margin-top: 12px } .mt16 { margin-top: 16px } /* ---------------- Google GeoChart tooltip theming ---------------- */ .google-visualization-tooltip, .google-visualization-tooltip * { color: var(--bs-body-color, #e5e7eb) !important; } .http-body { padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* Key (label) */ .kv-label { margin: 0; /* dt default reset */ font-weight: 800; color: var(--bs-body-color, #cbd5e1); white-space: nowrap; } html[data-bs-theme=light] body { background: #F4F5F9 } html[data-bs-theme=light] .dashboard-header .theme-icon { color: var(--brand-fg) !important; } html[data-bs-theme=light] .dashboard-header .theme-icon:hover { color: var(--brand-primary) !important; } html[data-bs-theme=light] .header .notification-bell i, html[data-bs-theme=light] .header .theme-icon, html[data-bs-theme=light] .header .user-icon { color: var(--brand-primary); } .btn-icon:active { transform: translateY(1px); } .btn-icon.ghost { border-color: color-mix(in srgb, var(--bs-border-color) 70%, transparent); } /* Hide whatever the component renders visually (but keep it clickable) */ .theme-toggle-skin>*:first-child { position: absolute; inset: 0; opacity: 0; /* keep events */ } /* ===== Avatar trigger (replace boring circle icon with initials chip) ===== */ .avatar-trigger { --_size: 36px; inline-size: var(--_size); block-size: var(--_size); display: inline-grid; place-items: center; border-radius: 50%; text-decoration: none; background: color-mix(in srgb, var(--brand-primary) 16%, var(--bs-card-bg)); border: 1px solid var(--bs-border-color); box-shadow: 0 1px 0 rgba(2, 6, 23, .05) inset; } .avatar-initials { font-weight: 700; font-size: 12px; letter-spacing: .3px; color: color-mix(in srgb, var(--brand-primary) 20%, var(--bs-body-color)); } /* Hover states */ .avatar-trigger:hover { background: color-mix(in srgb, var(--brand-primary) 24%, var(--bs-card-bg)); } /* ===== High-contrast adjustments for Light ===== */ html[data-bs-theme="light"] .btn-icon { color: #0F172A; } /* View-all icon button */ .btn-icon.subtle { --_s: 36px; inline-size: var(--_s); block-size: var(--_s); display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--bs-border-color); background: var(--bs-card-bg); color: var(--bs-body-color); transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease; } .btn-icon.subtle:hover { background: color-mix(in srgb, var(--brand-primary-50, #f5f3ff) 60%, var(--bs-card-bg)); color: var(--brand-primary); } .btn-icon.subtle:active { transform: translateY(1px); } .empty-ico { inline-size: 36px; block-size: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px dashed var(--bs-border-color); } .empty-ico i { font-size: 18px; } /* Grid span utilities (desktop defaults) */ .col-12 { grid-column: span 12; } /* Small polish for the “view all” icon button used above */ .btn-icon.subtle { --_s: 36px; inline-size: var(--_s); block-size: var(--_s); display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--bs-border-color); background: var(--bs-card-bg); color: var(--bs-body-color); transition: background .2s, color .2s, box-shadow .2s, transform .12s; } .btn-icon.subtle:hover { background: color-mix(in srgb, var(--brand-primary-50, #f5f3ff) 55%, var(--bs-card-bg)); color: var(--brand-primary); } .metric-label { font-size: 13px; color: var(--bs-muted); } .number-val { font-size: 28px; font-weight: 800; color: var(--bs-body-color); line-height: 1.1; } /* Buttons: base */ .driver-popover-btn { font-size: 10px !important; padding: 5px 10px !important; border-radius: 999px !important; border: 1px solid transparent; box-shadow: none !important; transition: all 0.18s ease; display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; } .driver-popover-btn:focus-visible { outline: none !important; box-shadow: var(--brand-focus-ring); } /* Next button */ .driver-popover-btn-next { background: var(--brand-primary-700) !important; color: #ffffff !important; border-color: var(--brand-primary-700) !important; font-weight: 600; } .driver-popover-btn-next:hover { background: var(--brand-primary-600) !important; border-color: var(--brand-primary-600) !important; transform: translateY(-1px); } /* Previous button */ .driver-popover-btn-prev { background: transparent !important; color: var(--brand-primary-700) !important; border-color: var(--brand-primary-200) !important; } .driver-popover-btn-prev:hover { background: var(--brand-primary-50) !important; } /* Close/Skip button */ .driver-popover-btn-close { background: transparent !important; color: var(--brand-muted) !important; border-color: transparent !important; opacity: 0.9; } .driver-popover-btn-close:hover { color: var(--brand-danger-600) !important; opacity: 1; } /* High z-index for help button if you keep it */ #cs-tour-help-btn { z-index: 2147483646 !important; } /* Header tour icon (ghost) */ #cs-tour-trigger.btn-icon.ghost { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent); background: color-mix(in srgb, var(--bs-card-bg) 80%, transparent); color: var(--bs-body-color); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; } #cs-tour-trigger.btn-icon.ghost:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--bs-primary) 40%, var(--bs-border-color)); box-shadow: var(--brand-shadow); } .driver-popover-footer .cs-skip-tips-btn { color: var(--brand-fg) !important; text-shadow: none !important; } /* Split label: text on the left, number pinned to inline-end (RTL/LTR-safe) */ .label-split { display: flex; align-items: center; justify-content: space-between; /* pushes count to inline-end */ gap: .5rem; inline-size: 100%; } .label-split .label-text { flex: 1 1 auto; /* take remaining space */ min-width: 0; /* allow wrapping/ellipsis if needed */ } .label-split .label-count { flex: 0 0 auto; /* keep its size */ white-space: nowrap; /* keep (123) together */ text-align: end; /* align numerals to edge */ direction: ltr; /* keep numbers clean in RTL */ unicode-bidi: isolate; /* isolate bidi context */ font-variant-numeric: tabular-nums; /* nicer aligned digits */ opacity: .9; } .cs-label { flex: 1 } /* Playlist (اللي جنب الجولة) */ #cs-tour-checklist .cs-item.is-done .cs-label { text-decoration: line-through; opacity: .65; } /* Dark theme: white calendar icon for date inputs */ html[data-bs-theme='dark'] .form-control[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) grayscale(1) brightness(1.2); opacity: .9; } html[data-bs-theme='dark'] .form-control[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; } .cs-tour-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--brand-border, var(--bs-border-color, #e7e7e9)); background: var(--brand-elev-2, color-mix(in srgb, var(--brand-primary, #4C0EE5) 6%, var(--brand-elev, #fff))); color: var(--brand-fg, var(--bs-body-color, #111)); line-height: 1; cursor: pointer; transition: box-shadow .18s ease, background .18s ease, border-color .18s ease, transform .06s ease; } .cs-tour-btn:hover { background: color-mix(in srgb, var(--brand-primary, #4C0EE5) 10%, var(--brand-elev, #fff)); border-color: color-mix(in srgb, var(--brand-primary, #4C0EE5) 35%, var(--brand-border, #e7e7e9)); transform: translateY(-1px); } .cs-tour-btn:focus-visible { outline: none; box-shadow: var(--brand-focus-ring, 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4C0EE5) 35%, transparent)); } .cs-tour-btn .bi { font-size: 1.05rem; } .cs-tour-btn.is-running { pointer-events: none; opacity: .75; } .cs-tour-btn.is-running .label::after { content: ' (running…)'; font-weight: 600; } .form-check-input[type=checkbox] { flex: 0 0 14px; } /* Tagify */ #keyword_tags.form-control { height: auto; min-height: 44px; padding: 6px 10px; } /* 2) Tagify container: true wrapping + auto height + no horizontal overflow */ #formKeyword #keyword_tags.form-control { height: auto; /* ensure container grows with tags */ min-height: 46px; padding: 6px 10px; } .btn-primary-custom { background: var(--brand-primary); color: white; border: none; padding: 0.875rem 2rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary) 30%, transparent); } .btn-primary-custom:hover { background: var(--brand-primary-600); transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-primary) 40%, transparent); } .btn-secondary-custom { background: color-mix(in srgb, var(--brand-muted) 15%, transparent); color: var(--brand-fg); border: 1px solid color-mix(in srgb, var(--brand-muted) 25%, transparent); padding: 0.875rem 2rem; border-radius: 10px; font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-secondary-custom:hover { background: color-mix(in srgb, var(--brand-muted) 25%, transparent); border-color: var(--brand-muted); transform: translateY(-1px); } .btn-danger-custom { background: color-mix(in srgb, var(--brand-danger) 15%, transparent); color: var(--brand-danger-600); border: 1px solid color-mix(in srgb, var(--brand-danger) 25%, transparent); padding: 0.875rem 2rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; } .btn-danger-custom:hover { background: var(--brand-danger); color: white; border-color: var(--brand-danger); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-danger) 30%, transparent); } .modal-body [wire\:loading] { animation: fadeIn 0.3s ease-in-out; } .modal-body [wire\:loading\.remove] { animation: fadeIn 0.3s ease-in-out; } .trend-label { font-size: 12px; color: var(--brand-muted); } .lifecycle-card .number-val, .pending-card .number-val, .todays-data-card .number-val, .takedown-summary-card .number-val { font-size: 32px; font-weight: 700; color: var(--brand-fg); font-variant-numeric: tabular-nums; line-height: 1.2; } .card-main-value .sublabel { font-size: 11px; color: var(--brand-muted); } .pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.5s ease-in-out infinite; } .lifecycle-label { flex: 1; font-size: 11px; color: var(--brand-muted); } .queue-label { font-size: 10px; color: var(--brand-muted); } .keywords-sublabel { font-size: 11px; color: var(--brand-muted); margin-bottom: 12px; } .takedown-sublabel, .keywords-sublabel { font-size: 12px; color: var(--brand-muted); } .takedown-label, .keywords-label { font-size: 11px; color: var(--brand-muted); } /* ============================================================================= §04 Header, Footer & Layout | الهيكل والترويسة ============================================================================= */ /* ============================================================================= Header & Layout ============================================================================= */ .footer { background: var(--brand-elev) !important; /* keep original token name as used */ border-color: var(--brand-border) !important; } .dashboard-header { padding: 12px; display: flex; align-items: center; justify-content: space-between; background: var(--brand-elev-2); border-bottom: 1px solid var(--brand-border); position: fixed; top: 0; left: 0; right: 0; z-index: 1030; } html[data-bs-theme='light'] .dashboard-header { background: #fff; } html[data-bs-theme='dark'] .main-content { background-color: var(--brand-bg); } .header .description-header { margin: 0; font-size: 14px; color: #9B9B9B; } .main-content { flex: 1; padding: 120px 20px 40px; max-width: 100%; box-sizing: border-box; } .filters-footer { background: rgba(15, 19, 25, .95); border-radius: 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .06); margin-top: 12px; } .offcanvas-surface-footer { padding: .75rem 1rem; background: var(--brand-elev-2); border-top: 1px solid var(--brand-border); } /* Footer */ #export_phishing .modal-footer { border-top: 1px solid var(--brand-border); background: var(--brand-elev-2); padding: 12px 16px; gap: 8px; } /* ---------- Page shell ---------- */ main.main-content .page-wrap { background: var(--tp-surface-1); border: 1px solid var(--tp-border); border-radius: 12px; box-shadow: var(--tp-shadow); padding: 14px; } .footer-legal a { color: var(--brand-info) !important; } /* Footer layout */ .driver-popover-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .kpi-stat-footer { margin-top: auto; padding-top: 12px; } /* ============================================================================= §05 Dashboard Cards & Variants | بطاقات لوحة التحكم ============================================================================= */ /* ============================================================================= Dashboard Cards (base + dark gradient) ============================================================================= */ .dashboard-card { border-radius: 8px; min-height: 100px; width: 100%; padding: 16px; position: relative; background: #fff; } html[data-bs-theme=dark] .dashboard-card { background: linear-gradient(105deg, rgba(29, 57, 136, 0.15) 49.97%, rgba(29, 136, 130, 0.08) 99.87%); } .dashboard-card .card-value { position: relative; } /* Icon tone — base + dark inversion override later (kept order) */ .dashboard-card .icon-state { position: absolute; top: 16px; right: 16px; filter: grayscale(1) brightness(0); } html[data-bs-theme="dark"] .dashboard-card .icon-state { filter: grayscale(1) brightness(0) invert(1); } .dashboard-card .card-value .metric-label { color: var(--brand-muted); font-size: 14px; } .dashboard-card .card-value .number-val { color: var(--brand-fg); font-size: 32px; font-weight: 600; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .dashboard-card .card-value .metric-subtitle { color: var(--brand-muted); font-size: 12px; } .card-value span { display: block; } .card-value .metric-status { display: flex; align-items: center; gap: 6px; } .card-value .metric-status .status-text { color: var(--brand-fg); font-size: 12px; margin-top: 2px; } .status-badge { display: flex; height: 22px; padding: 4px 6px; justify-content: center; align-items: center; gap: 10px; align-self: stretch; border-radius: 8px; background: #4E1E23; color: #D62923; font-size: 10px; } .metric-status .status-dot { width: 8px; height: 8px; background: #9CA3AF; border-radius: 50%; } /* ============================================================================= Card Variants (color via currentColor + variant badges) ============================================================================= */ .keyword-card, .domain-card, .email-card, .username-card, .cases-card, .pending-cases-card, .progress-cases-card, .fixed-cases-card, .takedown-card, .pending-takedown-card, .progress-takedown-card, .fixed-takedown-card { border: 1px solid var(--brand-border) !important; } /* Assign currentColor per variant */ .keyword-card { color: var(--keyword-accent); } .domain-card { color: var(--domain-accent); } .email-card { color: var(--email-accent); } .username-card { color: var(--username-accent); } .cases-card { color: var(--cases-accent); } .pending-cases-card { color: var(--pending-cases-accent); } .progress-cases-card { color: var(--progress-cases-accent); } .fixed-cases-card { color: var(--fixed-cases-accent); } .takedown-card { color: var(--takedown-accent); } .pending-takedown-card { color: var(--pending-takedown-accent); } .progress-takedown-card { color: var(--progress-takedown-accent); } .fixed-takedown-card { color: var(--fixed-takedown-accent); } /* Variant-specific badge/dot fills */ .keyword-card .status-badge { background: color-mix(in srgb, var(--keyword-accent) 20%, transparent); color: var(--keyword-accent); } .keyword-card .status-dot { background: var(--keyword-accent); } .domain-card .status-badge { background: color-mix(in srgb, var(--domain-accent) 20%, transparent); color: var(--domain-accent); } .domain-card .status-dot { background: var(--domain-accent); } .email-card .status-badge { background: color-mix(in srgb, var(--email-accent) 20%, transparent); color: var(--email-accent); } .email-card .status-dot { background: var(--email-accent); } .username-card .status-badge { background: color-mix(in srgb, var(--username-accent) 20%, transparent); color: var(--username-accent); } .username-card .status-dot { background: var(--username-accent); } .cases-card .status-badge { background: color-mix(in srgb, var(--cases-accent) 20%, transparent); color: var(--cases-accent); } .cases-card .status-dot { background: var(--cases-accent); } .pending-cases-card .status-badge { background: color-mix(in srgb, var(--pending-cases-accent) 20%, transparent); color: var(--pending-cases-accent); } .pending-cases-card .status-dot { background: var(--pending-cases-accent); } .progress-cases-card .status-badge { background: color-mix(in srgb, var(--progress-cases-accent) 20%, transparent); color: var(--progress-cases-accent); } .progress-cases-card .status-dot { background: var(--progress-cases-accent); } .fixed-cases-card .status-badge { background: color-mix(in srgb, var(--fixed-cases-accent) 20%, transparent); color: var(--fixed-cases-accent); } .fixed-cases-card .status-dot { background: var(--fixed-cases-accent); } .takedown-card .status-badge { background: color-mix(in srgb, var(--takedown-accent) 20%, transparent); color: var(--takedown-accent); } .takedown-card .status-dot { background: var(--takedown-accent); } .pending-takedown-card .status-badge { background: color-mix(in srgb, var(--pending-takedown-accent) 20%, transparent); color: var(--pending-takedown-accent); } .pending-takedown-card .status-dot { background: var(--pending-takedown-accent); } .progress-takedown-card .status-badge { background: color-mix(in srgb, var(--progress-takedown-accent) 20%, transparent); color: var(--progress-takedown-accent); } .progress-takedown-card .status-dot { background: var(--progress-takedown-accent); } .fixed-takedown-card .status-badge { background: color-mix(in srgb, var(--fixed-takedown-accent) 20%, transparent); color: var(--fixed-takedown-accent); } .fixed-takedown-card .status-dot { background: var(--fixed-takedown-accent); } /* Status / tags */ .phishing-table .status-badge { background: color-mix(in srgb, var(--brand-info) 20%, transparent); background: linear-gradient(180deg, #5b6cff 0%, #3f51f3 100%); color: #fff; border: 1px solid #3f51f3; border-radius: 12px; padding: 4px 10px; font-size: 12px; line-height: 1.2; display: inline-flex; align-items: center; gap: 4px; } /* -------------------------------------------- Status badge (base) - On light background, use subtle tinted fill - Borderless pill to keep it airy -------------------------------------------- */ /* ============================================ Card Variants (color via currentColor) - Keep your existing variant classes; we only adapt how they render on light backgrounds. ============================================ */ html[data-bs-theme="light"] .keyword-card, html[data-bs-theme="light"] .domain-card, html[data-bs-theme="light"] .email-card, html[data-bs-theme="light"] .username-card, html[data-bs-theme="light"] .cases-card, html[data-bs-theme="light"] .pending-cases-card, html[data-bs-theme="light"] .progress-cases-card, html[data-bs-theme="light"] .fixed-cases-card, html[data-bs-theme="light"] .takedown-card, html[data-bs-theme="light"] .pending-takedown-card, html[data-bs-theme="light"] .progress-takedown-card, html[data-bs-theme="light"] .fixed-takedown-card { /* Use a thinner border on light to avoid heavy frames */ border: 1px solid color-mix(in srgb, currentColor 45%, transparent); } /* Assign currentColor per variant (inherits your tokens) */ html[data-bs-theme="light"] .keyword-card { color: var(--keyword-accent); } html[data-bs-theme="light"] .domain-card { color: var(--domain-accent); } html[data-bs-theme="light"] .email-card { color: var(--email-accent); } html[data-bs-theme="light"] .username-card { color: var(--username-accent); } html[data-bs-theme="light"] .cases-card { color: var(--cases-accent); } html[data-bs-theme="light"] .pending-cases-card { color: var(--pending-cases-accent); } html[data-bs-theme="light"] .progress-cases-card { color: var(--progress-cases-accent); } html[data-bs-theme="light"] .fixed-cases-card { color: var(--fixed-cases-accent); } html[data-bs-theme="light"] .takedown-card { color: var(--takedown-accent); } html[data-bs-theme="light"] .pending-takedown-card { color: var(--pending-takedown-accent); } html[data-bs-theme="light"] .progress-takedown-card { color: var(--progress-takedown-accent); } html[data-bs-theme="light"] .fixed-takedown-card { color: var(--fixed-takedown-accent); } /* -------------------------------------------- Badge / dot backgrounds per variant (Light) - Softer tints for light UI -------------------------------------------- */ html[data-bs-theme="light"] .keyword-card .status-badge { background: color-mix(in srgb, var(--keyword-accent) 14%, #ffffff); color: var(--keyword-accent); border-color: color-mix(in srgb, var(--keyword-accent) 35%, transparent); } html[data-bs-theme="light"] .keyword-card .status-dot { background: var(--keyword-accent); } html[data-bs-theme="light"] .domain-card .status-badge { background: color-mix(in srgb, var(--domain-accent) 14%, #ffffff); color: var(--domain-accent); border-color: color-mix(in srgb, var(--domain-accent) 35%, transparent); } html[data-bs-theme="light"] .domain-card .status-dot { background: var(--domain-accent); } html[data-bs-theme="light"] .email-card .status-badge { background: color-mix(in srgb, var(--email-accent) 14%, #ffffff); color: var(--email-accent); border-color: color-mix(in srgb, var(--email-accent) 35%, transparent); } html[data-bs-theme="light"] .email-card .status-dot { background: var(--email-accent); } html[data-bs-theme="light"] .username-card .status-badge { background: color-mix(in srgb, var(--username-accent) 14%, #ffffff); color: var(--username-accent); border-color: color-mix(in srgb, var(--username-accent) 35%, transparent); } html[data-bs-theme="light"] .username-card .status-dot { background: var(--username-accent); } html[data-bs-theme="light"] .cases-card .status-badge { background: color-mix(in srgb, var(--cases-accent) 14%, #ffffff); color: var(--cases-accent); border-color: color-mix(in srgb, var(--cases-accent) 35%, transparent); } html[data-bs-theme="light"] .cases-card .status-dot { background: var(--cases-accent); } html[data-bs-theme="light"] .pending-cases-card .status-badge { background: color-mix(in srgb, var(--pending-cases-accent) 14%, #ffffff); color: var(--pending-cases-accent); border-color: color-mix(in srgb, var(--pending-cases-accent) 35%, transparent); } html[data-bs-theme="light"] .pending-cases-card .status-dot { background: var(--pending-cases-accent); } html[data-bs-theme="light"] .progress-cases-card .status-badge { background: color-mix(in srgb, var(--progress-cases-accent) 14%, #ffffff); color: var(--progress-cases-accent); border-color: color-mix(in srgb, var(--progress-cases-accent) 35%, transparent); } html[data-bs-theme="light"] .progress-cases-card .status-dot { background: var(--progress-cases-accent); } html[data-bs-theme="light"] .fixed-cases-card .status-badge { background: color-mix(in srgb, var(--fixed-cases-accent) 14%, #ffffff); color: var(--fixed-cases-accent); border-color: color-mix(in srgb, var(--fixed-cases-accent) 35%, transparent); } html[data-bs-theme="light"] .fixed-cases-card .status-dot { background: var(--fixed-cases-accent); } html[data-bs-theme="light"] .takedown-card .status-badge { background: color-mix(in srgb, var(--takedown-accent) 14%, #ffffff); color: var(--takedown-accent); border-color: color-mix(in srgb, var(--takedown-accent) 35%, transparent); } html[data-bs-theme="light"] .takedown-card .status-dot { background: var(--takedown-accent); } html[data-bs-theme="light"] .pending-takedown-card .status-badge { background: color-mix(in srgb, var(--pending-takedown-accent) 14%, #ffffff); color: var(--pending-takedown-accent); border-color: color-mix(in srgb, var(--pending-takedown-accent) 35%, transparent); } html[data-bs-theme="light"] .pending-takedown-card .status-dot { background: var(--pending-takedown-accent); } html[data-bs-theme="light"] .progress-takedown-card .status-badge { background: color-mix(in srgb, var(--progress-takedown-accent) 14%, #ffffff); color: var(--progress-takedown-accent); border-color: color-mix(in srgb, var(--progress-takedown-accent) 35%, transparent); } html[data-bs-theme="light"] .progress-takedown-card .status-dot { background: var(--progress-takedown-accent); } html[data-bs-theme="light"] .fixed-takedown-card .status-badge { background: color-mix(in srgb, var(--fixed-takedown-accent) 14%, #ffffff); color: var(--fixed-takedown-accent); border-color: color-mix(in srgb, var(--fixed-takedown-accent) 35%, transparent); } html[data-bs-theme="light"] .fixed-takedown-card .status-dot { background: var(--fixed-takedown-accent); } .metric-state { display: none !important; } /* ===== Metrics grid (auto, non-breaking) ===== */ /* ===== Card skin ===== */ .dashboard-card { position: relative; background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 14px; padding: 16px 16px 16px 16px; min-height: 140px; overflow: hidden; box-shadow: 0 6px 18px rgba(2, 6, 23, .05); display: flex; align-items: flex-start; gap: 12px; } /* Content column */ .dashboard-card .card-value { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* Status row */ .metric-state { margin-top: auto; } .metric-status { display: inline-flex; align-items: center; gap: 6px; color: var(--bs-muted); font-size: 12px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-success, #22C55E); } .status-badge { background: color-mix(in srgb, var(--brand-primary) 16%, var(--bs-card-bg)); color: color-mix(in srgb, var(--brand-primary) 20%, var(--bs-body-color)); border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--bs-border-color)); padding: 4px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; } /* Icon at the right (consistent size + tint) */ .icon-state { margin-inline-start: auto; width: 48px; height: 48px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 0 rgba(2, 6, 23, .05)); opacity: .95; } /* Accent per type (soft background ribbon) */ .dashboard-card::after { content: ""; position: absolute; inset-inline-end: -30px; inset-block: 0 0; width: 110px; transform: skewX(-12deg); background: color-mix(in srgb, var(--brand-primary) 12%, transparent); opacity: .35; pointer-events: none; } /* Optional: distinct accents (use existing classes) */ .keyword-card::after { background: color-mix(in srgb, var(--username-accent, #7E22CE) 16%, transparent); } .domain-card::after { background: color-mix(in srgb, var(--domain-accent, #0369A1) 16%, transparent); } .email-card::after { background: color-mix(in srgb, var(--email-accent, #C2410C) 16%, transparent); } .username-card::after { background: color-mix(in srgb, var(--username-accent, #7E22CE) 16%, transparent); } .cases-card::after { background: color-mix(in srgb, var(--cases-accent, #475569) 16%, transparent); } .pending-cases-card::after { background: color-mix(in srgb, var(--pending-cases-accent, #CA8A04) 16%, transparent); } .progress-cases-card::after { background: color-mix(in srgb, var(--progress-cases-accent, #0891B2) 16%, transparent); } .fixed-cases-card::after { background: color-mix(in srgb, var(--fixed-cases-accent, #65A30D) 16%, transparent); } .takedown-card::after { background: color-mix(in srgb, var(--takedown-accent, #0F766E) 16%, transparent); } .pending-takedown-card::after { background: color-mix(in srgb, var(--pending-takedown-accent, #B45309) 16%, transparent); } .progress-takedown-card::after { background: color-mix(in srgb, var(--progress-takedown-accent, #1E40AF) 16%, transparent); } .fixed-takedown-card::after { background: color-mix(in srgb, var(--fixed-takedown-accent, #BE185D) 16%, transparent); } .lifecycle-card, .pending-card, .todays-data-card, .takedown-summary-card, .keywords-config-card { padding: 16px; display: flex; flex-direction: column; } .card-main-value { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; } /* ============================================================================= §06 Sidebar Navigation | القائمة الجانبية ============================================================================= */ /* ============================================================================= Sidebar — theme-aware, active/open states, collapsed tooltips ============================================================================= */ .sidebar { position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 100vh; width: 280px; z-index: 9; display: flex; flex-direction: column; padding: 14px 10px; overflow: hidden; background: var(--brand-sidebar-bg); border-inline-end: 1px solid var(--brand-border); box-shadow: 0 0 10px rgba(0, 0, 0, .1); overflow: visible; /* needed for tooltip bubbles */ } /* Expanded / collapsed toggles */ .sidebar.expanded { width: 280px; padding: 20px 0; } /* Brand/logo */ .sidebar .logo { display: flex; align-items: center; gap: 12px; padding: 0 20px 20px; margin-bottom: 12px; border-bottom: 1px solid var(--brand-border); position: relative; } .sidebar .logo img { width: 40px; height: 40px; border-radius: 8px; display: block; } .sidebar .logo .site-name { font-size: 18px; font-weight: 600; line-height: 20px; color: var(--brand-fg); text-decoration: none; white-space: nowrap; } .sidebar .sidebar-item { color: var(--brand-muted); } /* Tappable rows (links or submenu buttons) */ .sidebar .sidebar-item a, .sidebar .sidebar-item button { color: inherit; background: transparent; border: 0; cursor: pointer; width: 100%; height: 44px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; align-self: stretch; border-radius: 12px; font-size: 14px; line-height: 20px; text-decoration: none; transition: background .25s ease, color .25s ease, box-shadow .25s ease; position: relative; } .sidebar .submenu-item i { width: 18px; height: 18px; font-size: 16px; color: inherit; } /* Hover (non-active) */ .sidebar .sidebar-item a:hover, .sidebar .sidebar-item button:hover { background: color-mix(in srgb, var(--brand-primary) 18%, transparent); color: var(--brand-fg); } /* ACTIVE (top-level item) */ .sidebar .sidebar-item.active>a, .sidebar .sidebar-item.active>button { background: color-mix(in srgb, var(--brand-primary) 18%, transparent); color: var(--brand-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 40%, transparent); } /* Left active strip */ .submenu-item.active>a::before, .sidebar .sidebar-item.active>a::before, .sidebar .sidebar-item.active>button::before { content: ""; position: absolute; inset-block: 6px 6px; inset-inline-start: 6px; width: 3px; border-radius: 3px; background: var(--brand-primary); } /*html[data-bs-theme="light"] .sidebar .sidebar-item:hover i,*/ /*html[data-bs-theme="light"] .sidebar .sidebar-item.active i {*/ /* color: var(--brand-fg) !important;*/ /*}*/ /* Submenu container (closed by default) */ .sidebar-item.has-submenu .submenu { max-height: 0; overflow: hidden; background: transparent; border-radius: 10px; margin-top: 4px; transition: max-height .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; opacity: .0; display: grid; gap: 3px; } /* Submenu open */ .sidebar-item.has-submenu.open>.submenu { padding: 10px; max-height: 800px; opacity: 1; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 12%, transparent); } .sidebar-collapsed .sidebar-item.has-submenu.open>.submenu { padding: 2px; } /* Toggle arrow rotation */ .sidebar-item.has-submenu>.submenu-toggle .arrow-icon { margin-inline-start: auto; transition: transform .25s ease, color .25s ease; color: inherit; } .sidebar-item.has-submenu.open>.submenu-toggle .arrow-icon { transform: rotate(180deg); /*color: var(--brand-primary);*/ } .submenu-item>a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 10px 12px; border-radius: 10px; color: var(--brand-muted); text-decoration: none; transition: background .25s ease, color .25s ease, box-shadow .25s ease; } /* Submenu hover/active */ .submenu-item>a:hover { background: color-mix(in srgb, var(--brand-primary) 10%, transparent); color: var(--brand-fg); } .submenu-item.active>a, .submenu-item>a[aria-current="page"] { background: color-mix(in srgb, var(--brand-primary) 18%, transparent); color: var(--brand-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 40%, transparent); } /* Collapsed visuals */ .sidebar.collapsed .sidebar-item a, .sidebar.collapsed .sidebar-item button { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 10px; } .sidebar.collapsed .sidebar-item .sidebar-text, .sidebar.collapsed .sidebar-item .arrow-icon { display: none; } /* Collapsed + open emphasis */ .sidebar .has-submenu.open>.submenu-toggle { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 45%, transparent); background: color-mix(in srgb, var(--brand-primary) 15%, transparent); color: var(--brand-fg); } #sidebar .sidebar-text { font-weight: 500; } /*html[data-bs-theme=light] .sidebar .logo .site-name {*/ /* color: #fff;*/ /*}*/ html[data-bs-theme=light] .submenu-item.active>a::before, html[data-bs-theme=light] .sidebar .sidebar-item.active>a::before, html[data-bs-theme=light] .sidebar .sidebar-item.active>button::before { background: var(--brand-primary); } /*html[data-bs-theme=light] .sidebar-item.has-submenu.open > .submenu {*/ /* background: #fff;*/ /* box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 6%, transparent);*/ /*}*/ /* Focus ring for keyboard nav */ .sidebar .sidebar-item a:focus-visible, .sidebar .sidebar-item button:focus-visible, .submenu-item>a:focus-visible { outline: none; box-shadow: var(--brand-focus-ring); } /*html[data-bs-theme="light"] .sidebar .sidebar-item.active > a,*/ /*html[data-bs-theme="light"] .sidebar .sidebar-item.active > button,*/ /*html[data-bs-theme="light"] .submenu-item.active > a {*/ /* background: color-mix(in srgb, var(--brand-primary) 22%, #ffffff);*/ /*}*/ /* === Sidebar Tooltip (real DOM element appended to ) === */ /* Legacy ::after tooltip — fully disabled */ #sidebar [data-tip]::after { display: none !important; content: none !important; } /* Real tooltip element (#sidebar-tooltip) lives on */ #sidebar-tooltip { position: fixed; z-index: 2147483647; /* max z-index — above everything */ pointer-events: none; opacity: 0; transition: opacity .14s ease, transform .14s ease; white-space: nowrap; font-size: 12px; line-height: 1; padding: 8px 12px; border-radius: 8px; background: var(--brand-elev-2); color: var(--brand-fg); border: 1px solid var(--brand-border); box-shadow: var(--brand-shadow); max-width: 260px; overflow-wrap: break-word; white-space: normal; } #sidebar-tooltip.visible { opacity: 1; } /* Light theme tweak */ html[data-bs-theme="light"] #sidebar-tooltip { background: #EAEDFB; } /* Sidebar tooltip */ .sidebar-expiry-tooltip { position: fixed; top: 88px; /* align next to sidebar (expanded vs collapsed) */ left: calc(var(--sidebar-width, 280px) + 12px); z-index: 999; background: var(--cs-bg-elev); border: 1px solid var(--cs-border); color: var(--cs-text); border-radius: 14px; padding: 10px 12px; box-shadow: 0 18px 36px rgba(0, 0, 0, .25); max-width: 280px; } .sidebar-expiry-tooltip.is-hidden { display: none; } .sidebar-expiry-tooltip .bi-calendar-event { color: var(--cs-info); font-size: 1.1rem; } .sidebar-expiry-tooltip .tip-title { font-weight: 800; line-height: 1; } .sidebar-expiry-tooltip .tip-sub { font-size: .9rem; opacity: .9; } .sidebar-expiry-tooltip .tip-text { flex: 1 1 auto; } .sidebar-expiry-tooltip .tip-close { border: none; background: transparent; color: inherit; border-radius: 8px; padding: 4px; } .sidebar-expiry-tooltip .tip-close:hover { color: var(--cs-info); } /* ============================================================================= §07 Filters, Dropdowns & Search | الفلاتر والقوائم والبحث ============================================================================= */ /* ============================================================================= Selects / Filters — structure + responsiveness ============================================================================= */ .filter-dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--brand-elev-2); border: 1px solid var(--brand-border); border-radius: 16px; color: var(--brand-fg); font-size: 13px; padding: 12px 40px 12px 12px; /* space for arrow */ min-width: 120px; outline: none; background-image: var(--select-arrow-svg); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; } .filter-dropdown::-ms-expand { display: none; } .filter-dropdown:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, .25); border-color: rgba(99, 102, 241, .6); } .filter-chip { background: var(--brand-elev-2); border: 1px solid var(--brand-border); color: var(--brand-fg); padding: 6px 12px; line-height: 1.2; } .filter-chip:hover { background: rgba(148, 163, 184, .12); border-color: var(--brand-border); } .dropdown-menu-filter .regex-filter .group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: .5rem; } .dropdown-menu-filter .regex-filter .input-group-text { background: transparent; border-color: var(--brand-border); color: var(--bs-muted); } .regex-filter .group-title { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; } .regex-filter .group-title .icon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; } .group-head .count-badge { font-size: 11px; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--brand-border); color: #60a5fa; background: color-mix(in srgb, #60a5fa 18%, transparent); } .group-head .count-badge.danger { color: var(--brand-danger); background: color-mix(in srgb, var(--brand-danger) 18%, transparent); } .regex-filter .regex-remove { border-color: var(--brand-border); } .regex-filter .input-group button { height: 45px; } /*.regex-filter .form-select,*/ .regex-input { background-color: var(--brand-elev); color: var(--brand-fg); border-color: var(--brand-border); } .filter-chip { position: relative; } .filter-chip .chip-count { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; margin-inline-start: .5rem; background: color-mix(in srgb, var(--bs-primary) 20%, transparent); background: linear-gradient(180deg, #5b6cff 0%, #3f51f3 100%); color: #fff; border: 1px solid #3f51f3; } .regex-actions { display: flex; gap: .5rem; } .group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .stat-value { color: var(--brand-fg); } .dropdown-menu-filter { min-width: 320px; max-width: min(90vw, 520px); background: var(--brand-elev); border: 1px solid var(--brand-border); border-radius: 6px; } .dropdown-scroll { max-height: min(60vh, 420px); padding: 4px; } /* --- Scroller base: keep it smooth and themed --- */ .dropdown-menu-filter .dropdown-scroll { /* in case inline style forces overflow, we embrace it and theme the bar */ scrollbar-gutter: stable both-edges; scroll-behavior: smooth; /* Firefox theming */ scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); /* Edge fade (top/bottom) without wrappers */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%); overflow: auto; } /* --- Dropdown Filter Search Component --- */ .dropdown-filter-search { position: relative; margin-bottom: 12px; } .dropdown-filter-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--brand-muted, #6c757d); font-size: 14px; pointer-events: none; z-index: 1; } .dropdown-filter-search-input { padding-left: 36px !important; padding-right: 12px; height: 38px; font-size: 13px; background: var(--brand-bg, #0f1319); border: 1px solid var(--brand-border, #2a2f3a); border-radius: 6px; color: var(--brand-fg, #fff); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dropdown-filter-search-input::placeholder { color: var(--brand-muted, #6c757d); opacity: 0.8; } .dropdown-filter-search-input:focus { background: var(--brand-bg, #0f1319); border-color: var(--brand-primary, #3b82f6); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); outline: none; color: var(--brand-fg, #fff); } /* --- List items visuals (better affordance) --- */ .dropdown-menu-filter .dropdown-item-option { border-radius: 8px; } .dropdown-menu-filter .dropdown-item-option:hover { background: color-mix(in srgb, var(--brand-primary) 10%, transparent); } .dropdown-menu-filter .dropdown-item-option .form-check-input:focus-visible { box-shadow: var(--brand-focus-ring, 0 0 0 3px color-mix(in srgb, var(--brand-primary) 35%, transparent)); } /* --- Make the inner lists inherit smooth scrolling too --- */ #authors-list, #sources-list { scroll-behavior: smooth !important; } .menu-grid { display: grid; grid-template-columns: , 1fr; gap: 6px 14px; } .menu-check { display: flex; align-items: center; gap: 8px; margin: 0; overflow-wrap: anywhere; } /* Quick actions chips */ .filters-actions { align-items: center; row-gap: 6px; } .filters-actions .btn.btn-sm { background: var(--brand-elev-2); color: var(--brand-fg); border: 1px solid var(--brand-border); padding: 6px 10px; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; transition: all .18s ease; } .filters-actions .btn.btn-sm:active { transform: translateY(0); } /* Outline-light (inactive) */ .filters-actions .btn-outline-light { --qa-bg: transparent; --qa-text: #cbd5e1; --qa-border: rgba(255, 255, 255, .18); background: var(--qa-bg); color: var(--qa-text); border-color: var(--qa-border); } .filters-actions .btn-outline-light:hover { background: rgba(148, 163, 184, .10); color: #ffffff; border-color: rgba(255, 255, 255, .28); } /* Primary (active) */ .filters-actions .btn-primary { background: linear-gradient(180deg, #5b6cff 0%, #3f51f3 100%); border: 1px solid rgba(99, 102, 241, .45); color: #fff; box-shadow: 0 4px 10px rgba(63, 81, 243, .20); } .filters-actions .btn-primary:hover { filter: brightness(1.04); box-shadow: 0 6px 14px rgba(63, 81, 243, .28); } .filters-actions .btn .bi { font-size: 14px; line-height: 1; } .filters-actions .btn .bi-check { opacity: .95; } .filters-actions .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .35); } .filters-actions .btn.disabled, .filters-actions .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } /* Filter bar layout */ .filters-bar { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px 16px; } .filters-left, .filters-right { display: flex; flex-direction: column; gap: 10px; } /* Wrapping chips row */ .filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; } .filters-actions { display: flex; align-items: center; justify-content: flex-end; min-width: max-content; } .search-container { position: relative; max-width: 320px; min-width: 220px; } .search-input { width: 100%; padding-left: 36px; transition: box-shadow .18s ease, border-color .18s ease; } .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .8; } /* inline spinner inside the search */ .search-spinner { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 18px; height: 18px; } .found-cell { display: flex; flex-flow: column; align-items: center; gap: 6px; } .search-bar-compact { max-width: 300px; } .search-bar-compact input { height: 40px; } .filters-actions .btn-clear-filters { position: unset; } .found-value { background: #1b1f2a; } /* Section spacing */ .filter-block+.filter-block { padding-top: .5rem; border-top: 1px dashed rgba(148, 163, 184, .18); margin-bottom: 16px; } .filter-block+.filter-block:last-child { margin-bottom: 0; } /* ---------- Color chip ---------- */ .color-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 34px; padding: 0 10px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .2px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .22); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .14); cursor: pointer; transition: transform .12s ease, filter .12s ease; } .color-chip:hover { transform: translateY(-1px); filter: brightness(1.03); } .search-dark { width: min(360px, 100%); background: var(--tp-surface-2); border: 1px solid var(--tp-border); color: var(--tp-text); border-radius: 10px; height: 40px; } .search-dark::placeholder { color: color-mix(in srgb, var(--tp-text) 45%, transparent); } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: 2.25rem 1rem; color: var(--tp-text-dim); } .empty-state i { font-size: 2rem; opacity: .9; } .dropdown-menu-filter .filter-block .btn.btn-outline-danger { height: 30px; } .search-input { color: var(--brand-fg); background: var(--brand-elev-2); border: 1px solid var(--brand-border); border-radius: 0.375rem; font-size: 14px; padding: 10px 18px 10px 40px; outline: none; } .search-input::placeholder { color: rgba(255, 255, 255, 0.4); } .filter-dropdown:focus, .search-input:focus { border-color: rgb(95 63 232 / 60%); box-shadow: 0 0 0 2px rgb(95 63 232 / 20%); } .found-value { font-size: 14px; font-weight: 600; background: var(--brand-elev-2); padding: 2px 8px; border-radius: 4px; border: 1px solid var(--brand-border); color: var(--brand-fg); } /* Role filters as “chips” */ .filter-chips .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border: 1px solid var(--brand-border); border-radius: 0.375rem; background: var(--brand-elev-2); color: var(--brand-fg); cursor: pointer; transition: .15s ease; text-decoration: none; } .filter-chips .chip:hover { background: var(--brand-primary-600); border-color: var(--brand-primary-600); color: #fff; } .filter-chips .chip.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } /* ========================================================= CyberSee – Filter Dropdown (scoped, no backend changes) ========================================================= */ .cs-filter { --cs-bg: var(--brand-elev, #121721); --cs-border: var(--brand-border, rgba(255, 255, 255, .12)); --cs-fg: var(--brand-fg, #e5e7eb); --cs-muted: var(--brand-muted, #9ca3af); --cs-primary: var(--brand-primary, #4C0EE5); --cs-focus: 0 0 0 3px color-mix(in srgb, var(--cs-primary) 26%, transparent); --cs-shadow: 0 16px 38px rgba(0, 0, 0, .35); } html[data-bs-theme='light'] .cs-filter { --cs-bg: var(--brand-elev, #ffffff); --cs-border: var(--brand-border, rgba(2, 6, 23, .12)); --cs-fg: var(--brand-fg, #0b1324); --cs-muted: #64748b; --cs-shadow: 0 18px 38px rgba(2, 6, 23, .12); } .dropdown-menu-filter.cs-filter { padding: 14px; } /* Header */ .cs-filter .filter-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--cs-border); } .cs-filter .filter-title { display: flex; align-items: center; gap: 8px; font-weight: 800; } .cs-filter .filter-title .bi { color: var(--cs-primary); } /* Blocks */ .cs-filter .block { padding: 12px 6px; } .cs-filter .block+.block { border-top: 1px dashed var(--cs-border); } .cs-filter .block-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; } .cs-filter .block-title .bi { color: var(--cs-primary); } /* Fields */ .cs-filter .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cs-filter .field { position: relative; } /* Icon inside input (decorative) */ .cs-filter .icon-end { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .8; background: var(--cs-bg); padding: 5px; z-index: 10; } /* ============================================================================= §08 Data Tables & Skeletons | الجداول وحالات التحميل ============================================================================= */ /* Skeleton Loading System */ .skeleton-box { height: 14px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--bs-body-color) 8%, transparent) 0%, color-mix(in srgb, var(--bs-body-color) 15%, transparent) 50%, color-mix(in srgb, var(--bs-body-color) 8%, transparent) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } .skeleton-row { height: 52px; border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 50%, transparent); } .skeleton-row td { padding: 14px 12px; vertical-align: middle; } .skeleton-row td:nth-child(odd) .skeleton-box { width: 75%; } .skeleton-row td:nth-child(even) .skeleton-box { width: 60%; } .skeleton-row td:first-child .skeleton-box { width: 85%; } .skeleton-row td:last-child .skeleton-box { width: 40%; margin-inline-start: auto; } .skeleton-row:nth-child(1) .skeleton-box { animation-delay: 0s; } .skeleton-row:nth-child(2) .skeleton-box { animation-delay: 0.1s; } .skeleton-row:nth-child(3) .skeleton-box { animation-delay: 0.15s; } .skeleton-row:nth-child(4) .skeleton-box { animation-delay: 0.2s; } .skeleton-row:nth-child(5) .skeleton-box { animation-delay: 0.25s; } .skeleton-row:nth-child(6) .skeleton-box { animation-delay: 0.3s; } .skeleton-row:nth-child(7) .skeleton-box { animation-delay: 0.35s; } .skeleton-row:nth-child(8) .skeleton-box { animation-delay: 0.4s; } .skeleton-row:nth-child(9) .skeleton-box { animation-delay: 0.45s; } .skeleton-row:nth-child(10) .skeleton-box { animation-delay: 0.5s; } .skeleton-box.skeleton-badge { width: 70px; height: 22px; border-radius: 12px; } .skeleton-box.skeleton-progress { height: 6px; border-radius: 3px; width: 100%; } /* ============================================================================= Table (Phishing) + Viewport — scroll, sizing, statuses, actions ============================================================================= */ .responsive-table { position: relative; margin: 0 auto; overflow: hidden; } .table-viewport { position: relative; max-width: 100%; max-height: calc(100vh - 240px); min-height: 520px; /* Stable height to prevent collapse during loading */ overflow: auto; -webkit-overflow-scrolling: touch; /* Hide scrollbar for Firefox */ scrollbar-width: none; /* Hide scrollbar for IE and Edge */ -ms-overflow-style: none; } /* Optional: Sticky Header to improve UX since scroll is now on the viewport */ .phishing-table thead { position: sticky; top: 0; z-index: 10; background-color: inherit; } .config-table, .phishing-table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto !important; border: 1px solid var(--brand-border); overflow: hidden; } .phishing-table col { width: auto !important; } .phishing-table thead th, .phishing-table tbody td { white-space: nowrap; vertical-align: middle; width: auto !important; min-width: 0 !important; } /* Sensible min-widths per column */ .phishing-table thead th:nth-child(1), .phishing-table tbody td:nth-child(1) { min-width: 140px; } .phishing-table thead th:nth-child(2), .phishing-table tbody td:nth-child(2) { min-width: 120px; } .phishing-table thead th:nth-child(3), .phishing-table tbody td:nth-child(3) { min-width: 320px; } .phishing-table thead th:nth-child(4), .phishing-table tbody td:nth-child(4) { min-width: 160px; } .phishing-table thead th:nth-child(5), .phishing-table tbody td:nth-child(5) { min-width: 160px; } .phishing-table thead th:nth-child(6), .phishing-table tbody td:nth-child(6) { min-width: 140px; } .phishing-table thead th:nth-child(7), .phishing-table tbody td:nth-child(7) { min-width: 160px; } .phishing-table thead th:nth-child(8), .phishing-table tbody td:nth-child(8) { min-width: 140px; } .phishing-table thead th:nth-child(9), .phishing-table tbody td:nth-child(9) { min-width: 140px; text-align: start !important; } /* Sorting affordances */ .phishing-table thead th.sortable { cursor: pointer; user-select: none; } .phishing-table thead th .sort-icon { font-size: 12px; margin-inline-start: 6px; } .phishing-table thead th .sort-icon.inactive { opacity: .25; } .phishing-table thead th .sort-icon.active { opacity: .9; } /* Body cells */ .config-table tbody td, .phishing-table tbody td { border-bottom: 1px solid rgba(255, 255, 255, .08); color: #E8E8E8; padding: 12px 14px; font-size: 14px; line-height: 1.5; overflow: hidden; } /* Row hover */ .phishing-table tbody tr:hover { background: rgba(148, 163, 184, .08) !important; } /* Links */ .phishing-table .link-cell a { color: var(--brand-info) !important; text-decoration: underline; border-bottom: 1px dashed var(--brand-info); } .phishing-table .link-cell a:hover { color: var(--brand-info) !important; border-bottom: 1px solid var(--brand-info); } .link-cell a { display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-decoration: none !important; } .phishing-table .tags-cell .badge { background: rgba(31, 111, 235, .16); border: 1px solid rgba(31, 111, 235, .28); color: #dbeafe; padding: 3px 8px; font-size: 12px; border-radius: 10px; line-height: 1; display: inline-block; margin: 1px 2px; } .phishing-table .green-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; margin-right: 6px; } .phishing-table thead th:last-child, .phishing-table tbody td:last-child { width: 1% !important; text-align: start; } .phishing-table thead th:first-child, .phishing-table tbody td:first-child { width: 1% !important; } /* Header cell helpers */ .th-content { display: flex; align-items: center; justify-content: flex-start; gap: 6px; } .sort-icons { display: flex; flex-direction: column; align-items: center; line-height: 1; } .sort-icons .sort-icon { font-size: 12px; cursor: pointer; } .section-title { font-weight: 600; margin: .25rem 0 .5rem; } .detail-section { margin-bottom: 1rem; } .score-badge { border-radius: 16px; padding: 2px 10px; font-size: .75rem; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .15); } /* ===== Actions Bar (UI فقط) ===== */ .actions-bar { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; } .actions-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, .25); margin-inline: .25rem; } /* Base loading dots animation */ .loading-dots { display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; } .loading-dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 2px; background-color: var(--brand-primary); animation: dotPulse 1.2s infinite ease-in-out; } .loading-dots span:nth-child(1) { animation-delay: 0s; } .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .loading-dots span:nth-child(3) { animation-delay: 0.4s; } .loading-text { color: var(--brand-fg); font-weight: 500; letter-spacing: .5px; } /* ===== Tabs: disable look & loading overlay ===== */ .nav-tabs .nav-link[disabled] { opacity: .5; pointer-events: none; /* Prevent clicks */ cursor: not-allowed; } .tab-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25); /* Dim the content */ backdrop-filter: blur(1px); border-radius: .5rem; z-index: 10; width: 100%; height: 100%; transition: opacity .15s ease, visibility .15s ease; } /* Optional: smoother fades cause overlap; this tightens it */ .tab-pane.fade:not(.show) { display: none; /* Avoid overlapped fading panes */ } /* Tabs polish */ .nav-tabs { border-bottom: 1px solid var(--brand-border); gap: 6px; margin-bottom: 16px; } .nav-tabs .nav-link { color: var(--brand-fg); border: none; border-bottom: 2px solid transparent; padding: 8px 10px; font-size: 13px; background: var(--brand-elev-2); } .nav-tabs .nav-link:hover { color: var(--brand-primary-600); } .nav-tabs .nav-link.active { color: var(--brand-primary-600); border-bottom-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 15%, transparent); border-radius: 6px 6px 0 0; } /* ---------- Toolbar (Add + Search) ---------- */ .page-toolbar { display: grid; gap: 10px 12px; align-items: center; grid-template-columns: 1fr auto; /* left grows, right is search */ margin: 6px 0 14px 0; } /* First col width */ .config-table td:first-child, .config-table th:first-child { width: 64px; } .config-table thead th, .phishing-table thead th { background: var(--brand-elev-2); border: 1px solid var(--brand-border); border-bottom: 1px solid rgba(255, 255, 255, .2); color: var(--brand-fg); font-size: 14px; font-weight: 500; padding: 12px 14px; text-align: left; line-height: 1.5; vertical-align: middle; } .config-table thead th.sortable, .phishing-table thead th.sortable { cursor: pointer; user-select: none; } .config-table tbody td, .phishing-table tbody td { border-bottom: 1px solid var(--brand-border); color: var(--brand-fg); font-size: 14px; font-weight: 400; line-height: 1.5; vertical-align: middle; padding: 12px 14px; overflow: hidden; } .phishing-table .type-text { font-size: 14px; } .phishing-table .brand-text { font-size: 14px; } .phishing-table .similarity-cell .progress { background: var(--brand-elev-2); border-radius: 6px; height: 8px; } .phishing-table .similarity-cell .progress-bar { border-radius: 6px; } .phishing-table .similarity-cell .percent { font-size: 11px; color: #fff; min-width: 32px; line-height: 1; display: inline-block; } .phishing-table .tags-cell .badge { background: rgba(0, 123, 255, 0.2); border: 1px solid rgba(0, 123, 255, .3); color: #fff; padding: 3px 8px; font-size: 12px; border-radius: 10px; display: inline-block; line-height: 1; vertical-align: baseline; margin: 1px 2px; } .phishing-table .green-dot { width: 8px; height: 8px; background: #28a745; border-radius: 50%; display: inline-block; margin-right: 6px; } .loading-more { color: var(--brand-secondary) !important; } .management-panel { background: var(--brand-elev); border-radius: 8px; border: 1px solid var(--brand-border) !important; } .modals-offcanvas-right .responsive-table { padding: 0; } .header-toolbar { padding: 1rem; } .skeleton-box { background: linear-gradient(90deg, #1d2026 25%, #2d323c 50%, #1d2026 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite linear; border-radius: 4px; height: 14px; width: 100%; display: block; } .force-table-group { display: table-row-group !important; } .skeleton-row td { padding: 1rem 0.75rem; vertical-align: middle; border-bottom: 1px solid #2d323c; } /* إخفاء الـ overlay القديم لأنه بيغطي الداتا أثناء السكرول */ .table-loading-overlay { display: none !important; } /* =============================== Table Loading Overlay =============================== */ .table-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.08); backdrop-filter: blur(3px); z-index: 10; display: flex; align-items: start; justify-content: center; min-height: 150px; border-radius: 12px; padding-top: 0; } /* Inner loading content - centered in viewport */ .table-loading-overlay>div { position: sticky; top: 50%; left: 50%; transform: translate(-50%, calc((-50%) - (-50px))); transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.98); padding: 1.5rem 2.5rem; border-radius: 16px; box-shadow: 0 8px 32px rgba(76, 14, 229, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1); border: 1px solid rgba(76, 14, 229, 0.1); margin-top: 50px !important; width: max-content; height: max-content; } /* Dark theme support */ html[data-bs-theme="dark"] .table-loading-overlay>div { background: rgba(15, 19, 25, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(76, 14, 229, 0.2); } /* Loading text styling */ .table-loading-overlay span { color: var(--brand-fg, #1e293b); font-size: 14px; font-weight: 500; } html[data-bs-theme="dark"] .table-loading-overlay span { color: var(--brand-fg, #e2e8f0); } /* Smooth transitions for table rows */ .phishing-table tbody tr { transition: opacity 0.2s ease-in-out; } /* Loading state for scroll trigger */ .scroll-trigger { height: 20px; margin: 10px 0; } .table-download { width: 100%; border-collapse: collapse; } .table-download th, .table-download td { padding: 12px 10px; border-top: 1px solid var(--bs-border-color); } .badge-fmt { border-radius: 999px; padding: 4px 10px; border: 1px solid var(--bs-border-color); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); } html[data-bs-theme="light"] .config-table thead th, html[data-bs-theme="light"] .phishing-table thead th { background: #f1f1f1; } html[data-bs-theme="light"] .score-badge { color: #fff !important; } /* Loading overlay (as is) */ .tab-loading-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .06); backdrop-filter: blur(1px); z-index: 2; } /* ============================================================================= §09 Microservices Toggle Cards | بطاقات الخدمات ============================================================================= */ /* ============================================================================= Microservices Toggles — Enhanced UX Design ============================================================================= */ /* ============================================================================= Microservices Toggles — Professional Unified Design ============================================================================= */ .microservices-toggles { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } /* Service Card */ .service-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--brand-primary); opacity: 0; transition: opacity 0.3s ease; } .service-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--border)); transform: translateX(4px); } .service-card:hover::before { opacity: 0.4; } /* ===== DISABLED STATE (Default) ===== */ .service-card { --card-bg: var(--surface-1); --icon-bg: var(--surface-3, #e5e7eb); --icon-color: var(--text-muted); --name-color: var(--text-muted); --desc-color: var(--text-muted); } /* ===== ENABLED STATE (Checked) ===== */ .service-card:has(input:checked) { --card-bg: color-mix(in srgb, var(--brand-primary) 6%, var(--surface-1)); --icon-bg: var(--brand-primary); --name-color: var(--text); --desc-color: var(--text-secondary, var(--text-muted)); background: var(--card-bg); border-color: var(--brand-primary); } .service-card:has(input:checked)::before { opacity: 1; } /* Service Card Content */ .service-card-content { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } /* ===== Service Icon ===== */ .service-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; transition: all 0.3s ease; background: var(--icon-bg); color: var(--icon-color); } /* Icon color when ENABLED */ .service-card:has(input:checked) .service-icon { background: var(--brand-primary); color: #ffffff; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary) 40%, transparent); } /* Service Info */ .service-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .service-name { font-size: 14px; font-weight: 600; color: var(--name-color); transition: color 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .service-desc { font-size: 12px; color: var(--desc-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; } .service-card:has(input:checked) .service-desc { opacity: 1; } /* Service Toggle Area */ .service-toggle { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ===== Custom Toggle Switch ===== */ .toggle-switch { position: relative; display: inline-block; width: 52px; height: 28px; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3, #6b7280); border: 2px solid var(--border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 34px; } .toggle-slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 4px; background-color: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Toggle ENABLED State */ .toggle-switch input:checked+.toggle-slider { background: var(--brand-primary); border-color: var(--brand-primary); } .toggle-switch input:checked+.toggle-slider::before { transform: translateX(24px); } /* Toggle Focus State */ .toggle-switch input:focus+.toggle-slider { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent); } /* Toggle Disabled/Loading State */ .toggle-switch input:disabled+.toggle-slider { opacity: 0.5; cursor: not-allowed; } /* Loading Spinner */ .toggle-loader { display: flex; align-items: center; justify-content: center; } .spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } /* ============================================================================= DARK THEME ============================================================================= */ html[data-bs-theme="dark"] .service-card { background: var(--surface-2); --icon-bg: var(--surface-3, #374151); --icon-color: #9ca3af; } html[data-bs-theme="dark"] .service-card:has(input:checked) { background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-2)); } html[data-bs-theme="dark"] .service-card:has(input:checked) .service-icon { color: #ffffff; } html[data-bs-theme="dark"] .service-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } html[data-bs-theme="dark"] .toggle-slider { background-color: #4b5563; } html[data-bs-theme="dark"] .toggle-slider::before { background-color: #e5e7eb; } /* ============================================================================= LIGHT THEME ============================================================================= */ html[data-bs-theme="light"] .service-card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); --icon-bg: #f3f4f6; --icon-color: #9ca3af; } html[data-bs-theme="light"] .service-card:has(input:checked) .service-icon { color: #ffffff; } html[data-bs-theme="light"] .service-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } html[data-bs-theme="light"] .toggle-slider { background-color: #d1d5db; } .toggle-switch-sidebar { flex: 0 0 42px; z-index: 1100; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--brand-border); background: transparent; backdrop-filter: blur(4px); box-shadow: 0 4px 18px rgba(0, 0, 0, .18); cursor: pointer; transition: background-color .15s ease, transform .12s ease, border-color .15s ease, box-shadow .2s ease; } .toggle-switch-sidebar i { color: var(--brand-fg); } .toggle-switch-sidebar:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); } .toggle-switch-sidebar:active { transform: translateY(0); } .toggle-switch-sidebar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .35); } .toggle-switch i { font-size: 18px; line-height: 1; } /* Use a clearer glyph for sidebar toggle on hover */ .toggle-switch-sidebar:hover i { color: var(--brand-primary); } /* ============================================================================= §10 Modals, Offcanvas & Panels | النوافذ المنبثقة واللوحات ============================================================================= */ /* ============================================ Offcanvas Alert (details drawer) ============================================ */ .offcanvas-alert { --bs-offcanvas-width: min(920px, 100vw); background: var(--dark-surface-2, #0F1319); color: #e5e7eb; border-left: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; overflow-y: auto; } .offcanvas-surface-header { background: var(--brand-elev-2); border-bottom: 1px solid var(--brand-border); } .detail-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; } .detail-item { display: grid; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; background: rgba(255, 255, 255, .02); flex: 1; } .detail-value { color: #ffffff; font-size: .95rem; } /* ============================================ DLM Cards (scoped recommendations/timeline) ============================================ */ .dlm-row { row-gap: 12px; } .dlm-card { --dlm-surface: var(--dark-surface-2, #10151d); --dlm-border: rgba(255, 255, 255, .10); --dlm-shadow: 0 6px 16px rgba(0, 0, 0, .18); --dlm-text: #e6eaf2; background: var(--dlm-surface); border: 1px solid var(--dlm-border); border-radius: 12px; padding: 14px 14px 12px; color: var(--dlm-text); box-shadow: var(--dlm-shadow); } .dlm-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 600; } .dlm-title-accent { width: 6px; height: 14px; border-radius: 3px; background: #var(--brand-primary); display: inline-block; } .dlm-title-warn .dlm-title-accent { background: #f59e0b; } .dlm-title-ok .dlm-title-accent { background: var(--brand-success); } .dlm-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .dlm-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #d7dde6; } .dlm-list li::before { content: "✔"; position: absolute; left: 0; top: 1px; font-size: 12px; color: var(--brand-primary); } .dlm-meta { margin: 0; font-size: 14px; line-height: 1.6; color: #cbd5e1; } .dlm-brand { color: var(--brand-primary-600); } .dlm-timeline #leakTimelineChart { width: 100%; min-height: 100px; } /* Light versions */ html[data-bs-theme='light'] .offcanvas-alert { background: #ffffff; color: #0f172a; border-left: 1px solid rgba(2, 6, 23, .08); } html[data-bs-theme='light'] .detail-item { border-color: rgba(2, 6, 23, .08); background: #ffffff; } html[data-bs-theme='light'] .detail-value { color: #0f172a; } html[data-bs-theme='light'] .dlm-card { --dlm-surface: #ffffff; --dlm-border: rgba(2, 6, 23, .10); --dlm-shadow: 0 6px 16px rgba(2, 6, 23, .08); --dlm-text: #0f172a; } html[data-bs-theme='light'] .dlm-list li { color: #334155; } html[data-bs-theme='light'] .dlm-list li::before { color: #2563eb; } html[data-bs-theme='light'] .dlm-meta { color: #475569; } html[data-bs-theme='light'] .dlm-brand { color: #1d4ed8; } /* Off-canvas-like modal from the right */ .modals-offcanvas-right .modal { --bs-modal-margin: 0; } .modals-offcanvas-right .modal .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; margin: 0; height: 100%; width: 55vw; /* adjust as needed */ max-width: 1120px; transform: translateX(100%); transition: transform .3s ease-in-out; pointer-events: none; /* KEEP Bootstrap default so backdrop clicks work */ z-index: 1055; } /* open state */ .modals-offcanvas-right .modal.show .modal-dialog, .modals-offcanvas-right .modal.fade.show .modal-dialog { transform: translateX(0); } /* keep default pointer behavior: content receives clicks */ .modals-offcanvas-right .modal .modal-content { height: 100%; border-radius: 0; pointer-events: auto; overflow: auto; background: var(--brand-sidebar-bg); border-color: var(--brand-border); } /* ------------------------------ Scoped theme for this modal Uses your design tokens: --brand-elev/bg/fg/border/primary/shadow ... ------------------------------ */ #export_phishing .modal-content { background: var(--brand-elev); color: var(--brand-fg); border: 1px solid var(--brand-border); box-shadow: var(--brand-shadow); border-radius: 14px; overflow: hidden; } #export_phishing .modal-header { background: var(--brand-elev-2); border-bottom: 1px solid var(--brand-border); padding: 14px 18px; } #export_phishing .modal-title { font-weight: 600; font-size: 18px; color: var(--brand-fg); } #export_phishing .helper-text { color: var(--brand-muted); font-size: 13px; margin: 6px 0 14px; } /* Grid & cards for options */ #export_phishing .option-card { border: 1px solid var(--brand-border); background: var(--brand-elev-2); border-radius: 10px; padding: 10px 12px; transition: background .2s ease, border-color .2s ease; } #export_phishing .option-card:hover { background: color-mix(in srgb, var(--brand-primary) 6%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--brand-border)); } /* Form controls aligned with brand */ #export_phishing .form-check-input { /* Modern browsers support accent-color */ accent-color: var(--brand-primary); width: 1.05rem; height: 1.05rem; cursor: pointer; } /* Select-All block */ #export_phishing .select-all { border: 1px dashed var(--brand-border); background: var(--brand-elev-2); border-radius: 10px; padding: 12px; margin-bottom: 10px; } #statuses_list .modal-dialog, #data_sources_list .modal-dialog, #types_list .modal-dialog, #socialMediaFormModal .modal-dialog, #apps_monitoring .modal-dialog, #users_monitoring_show .modal-dialog, #threatOffcanvas .modal-dialog, #show_bins .modal-dialog { width: 40vw; } #roleDelete .modal-dialog, #delete .modal-dialog, #active .modal-dialog, #deleteKeyword .modal-dialog, #takeDown .modal-dialog { width: 30vw; } #CECheck .modal-dialog, #socialMediaDeleteModal .modal-dialog { width: 35vw; } .modal.show { display: flex !important; align-items: center; justify-content: center; } .modal-content { pointer-events: auto; } /* ============================================================================= §11 IntroJS Tour & Checklist | جولة التعريف وقائمة المهام ============================================================================= */ .intro-text { font-size: 1rem; line-height: 1.6; margin: 0; } /* Shared */ .intro-cybersee.introjs-tooltip { border-radius: 12px; max-width: min(420px, 90vw); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); border: 1px solid var(--intro-border); background: var(--intro-bg); color: var(--intro-fg); } .intro-cybersee .introjs-tooltip-header { border-bottom: 1px solid var(--intro-border); padding-bottom: .5rem; margin-bottom: .5rem; } .intro-cybersee .introjs-tooltiptext { font-size: .95rem; line-height: 1.55; } .intro-cybersee .introjs-skipbutton, .intro-cybersee .introjs-prevbutton, .intro-cybersee .introjs-nextbutton, .intro-cybersee .introjs-donebutton { display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--intro-btn-border); background: var(--intro-btn-bg); color: var(--intro-btn-fg); padding: .35rem .7rem; width: max-content; height: 35px; font-size: .8rem; line-height: 1.55; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; transition: all .15s ease-in-out; top: 5px; right: 5px; } .intro-cybersee .introjs-nextbutton, .intro-cybersee .introjs-donebutton { border-color: var(--intro-primary); background: var(--intro-primary); color: #fff; } .intro-highlight { box-shadow: 0 0 0 2px var(--intro-primary), 0 0 0 8px rgba(0, 0, 0, .25) !important; } /* Dark */ html[data-bs-theme='dark'] .intro-cybersee.introjs-tooltip { --intro-bg: #0F1319; --intro-fg: #E5E7EB; --intro-border: rgba(255, 255, 255, .08); --intro-bullet-off: rgba(148, 163, 184, .25); --intro-bullet-on: #8fb4ff; --intro-btn-bg: #12151d; --intro-btn-fg: #E5E7EB; --intro-btn-border: rgba(255, 255, 255, .12); --intro-primary: #5562f6; } html[data-bs-theme='dark'] .introjs-helperLayer { background: rgba(85, 98, 246, 0.12); } /* Light */ html[data-bs-theme='light'] .intro-cybersee.introjs-tooltip { --intro-bg: #ffffff; --intro-fg: #0f172a; --intro-border: rgba(2, 6, 23, .10); --intro-bullet-off: rgba(2, 6, 23, .15); --intro-bullet-on: #1d4ed8; --intro-btn-bg: #f8fafc; --intro-btn-fg: #0f172a; --intro-btn-border: rgba(2, 6, 23, .12); --intro-primary: #2563eb; } html[data-bs-theme='light'] .introjs-helperLayer { background: rgba(37, 99, 235, 0.10); } /* ================================ Guided tour (Driver.js) styling - Aligned with CyberSee design tokens - No behavior changes, visuals only ================================ */ /* Overlay */ .driver-overlay { transition: background-color 0.25s ease, backdrop-filter 0.25s ease; z-index: 2147483640 !important; } html[data-bs-theme="light"] .driver-overlay { background: radial-gradient(circle at top, rgba(76, 14, 229, 0.065), transparent), rgba(15, 23, 42, 0.40); } /* Popover container */ .driver-popover { border-radius: 18px !important; padding: 14px 14px 10px !important; box-shadow: var(--brand-shadow) !important; max-width: 320px !important; border: 1px solid var(--brand-border) !important; z-index: 2147483645 !important; } html[data-bs-theme="light"] .driver-popover { background: var(--brand-card-bg) !important; color: var(--brand-fg) !important; } html[data-bs-theme="dark"] .driver-popover { background: var(--brand-elev) !important; color: var(--brand-fg) !important; } /* Arrow */ .driver-popover-arrow { width: 14px; height: 14px; border-width: 1px; } /* Title */ .driver-popover-title { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em; margin-bottom: 4px !important; color: var(--brand-primary-600) !important; display: flex; align-items: center; gap: 6px; } .driver-popover-title::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--brand-primary) !important; flex-shrink: 0; } /* Description */ .driver-popover-description { font-size: 11px !important; line-height: 1.5; color: var(--brand-muted) !important; margin-bottom: 8px !important; } /* Progress text */ .driver-popover-progress-text { font-size: 10px !important; color: var(--brand-muted) !important; letter-spacing: 0.04em; text-transform: uppercase; } /* === FAB toggle (like chat button) === */ #cs-tour-fab { position: fixed; right: 18px; bottom: 18px; z-index: 1050; width: 54px; height: 54px; border-radius: 999px; border: none; cursor: pointer; background: var(--primary-color, #646cfc); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; gap: 0; transition: transform .15s ease, box-shadow .2s ease; } #cs-tour-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, .42); } #cs-tour-fab .cs-fab-icon { font: 700 16px/1 system-ui, Segoe UI, Roboto; } #cs-tour-fab .cs-fab-badge { position: absolute; top: -6px; left: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #0f0f13; color: #fff; font: 600 11px/24px system-ui; border: 1px solid rgba(255, 255, 255, .12); text-align: center; } /* === Checklist panel (kept from previous message; safe to re-use) === */ #cs-tour-checklist { position: fixed; right: 16px; top: 88px; width: 280px; z-index: 1040; background: var(--secondary-background-color, #0f0f13); color: var(--text-color, #fff); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); padding: 14px; display: none; } #cs-tour-checklist.open { display: block; } .cs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px } .cs-close { margin-left: auto; background: transparent; border: 0; color: inherit; opacity: .7; cursor: pointer } .cs-progress { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden } .cs-progress-bar { height: 100%; width: 0%; background: var(--primary-color, #646cfc); transition: width .3s ease } .cs-progress-text { font-size: 12px; opacity: .75; margin: 6px 0 8px } .cs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 45vh; overflow: auto } .cs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03) } .cs-item.is-active { outline: 1px solid rgba(255, 255, 255, .12) } .cs-item.is-done { opacity: .6 } .cs-dot { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 12px } .cs-link { font-size: 12px; cursor: pointer; text-decoration: underline; opacity: .85 } /* ---- Hotspot ---- */ #cs-hotspot { position: fixed; right: 22px; bottom: 22px; z-index: 999; width: 56px; height: 56px; border-radius: 999px; background: var(--cs-primary); box-shadow: var(--cs-shadow); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease; } #cs-hotspot .dot { width: 22px; height: 22px; border-radius: 999px; background: var(--cs-bg, #fff); /* keep slight prominence across themes */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cs-fg) 18%, transparent); opacity: .95; } #cs-hotspot:hover { transform: translateY(-1px); } /* ---- Checklist Panel ---- */ #cs-checklist { position: fixed; right: 22px; bottom: 88px; z-index: 2147483000; width: 420px; max-width: 92vw; background: var(--cs-bg); color: var(--cs-fg); border: 1px solid var(--cs-border); border-radius: 16px; box-shadow: var(--cs-shadow); padding: 14px; } #cs-checklist[hidden] { display: none; } #cs-checklist .cl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; background: transparent !important; } #cs-checklist .t { font-weight: 700; letter-spacing: .2px; } #cs-checklist .cl-close { background: transparent; border: 0; color: inherit; font-size: 20px; opacity: .7; cursor: pointer; } #cs-checklist .cl-progress { position: relative; height: 8px; background: color-mix(in srgb, var(--cs-fg) 8%, transparent); border-radius: 999px; margin: 8px 0 12px; } #cs-checklist .cl-progress-bar { height: 100%; background: var(--cs-primary); border-radius: 999px; transition: width .35s; } #cs-checklist .cl-progress-text { position: absolute; right: 8px; top: -22px; font-size: 12px; color: var(--cs-muted); opacity: .9; } #cs-checklist .cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow: auto; } #cs-checklist .cl-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--cs-fg) 6%, transparent); border: 1px solid var(--cs-border); } #cs-checklist .cl-item .ico { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--cs-fg) 35%, transparent); color: color-mix(in srgb, var(--cs-fg) 75%, transparent); font-size: 14px; } #cs-checklist .cl-item .title { font-size: 13px; line-height: 1.2; } #cs-checklist .cl-item .d-flex { margin-left: auto; } #cs-checklist .cl-item .skip, #cs-checklist .cl-item .go { font-size: 12px; text-decoration: underline; color: var(--cs-muted); cursor: pointer; } #cs-checklist .cl-item.is-active { outline: 2px solid var(--cs-primary); background: color-mix(in srgb, var(--cs-primary) 14%, transparent); } #cs-checklist .cl-item.is-done .ico { border-color: var(--cs-success); color: var(--cs-success); } #cs-checklist .cl-item .sub { display: block; font-size: 11.5px; color: var(--cs-muted); margin-top: 2px; } #cs-checklist .cl-foot { display: flex; justify-content: flex-end; margin-top: 10px; } #cs-checklist .cl-dismiss { background: transparent; color: var(--cs-muted); border: 0; text-decoration: underline; cursor: pointer; font-size: 12px; } /* Optional: lighten surfaces in light mode a bit more for contrast */ html[data-bs-theme="light"] #cs-checklist { background: var(--cs-bg-2); } /* Master checklist */ #cs-checklist .cl-item.is-done .title { text-decoration: line-through; opacity: .65; } #cs-checklist .cl-item.is-done .ico { border-color: var(--success-color, #42d07f); color: var(--success-color, #42d07f); } #cs-tour-checklist .cs-item.is-done .cs-dot { border-color: var(--success-color, #42d07f); color: var(--success-color, #42d07f); } /* Context menu for #cs-hotspot (right-click) */ #cs-hotspot-menu { position: fixed; z-index: 2147483001; min-width: 200px; padding: 6px; background: var(--cs-bg, #111); color: var(--cs-fg, #fff); border: 1px solid var(--cs-border, rgba(255, 255, 255, .18)); border-radius: 12px; box-shadow: var(--cs-shadow, 0 18px 40px rgba(0, 0, 0, .28)); } #cs-hotspot-menu[hidden] { display: none; } #cs-hotspot-menu .mi { padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13px; } #cs-hotspot-menu .mi:hover { background: color-mix(in srgb, var(--cs-fg, #fff) 8%, transparent); } /* Optional: draggable feedback */ #cs-hotspot.dragging { opacity: .85; transform: scale(.98); } /* ============================================================================= §12 Permissions System | نظام الصلاحيات ============================================================================= */ .configurations>.bg-surface-1 { background: var(--brand-elev); } /* ============================================================ Permissions (Accordion Layout) — Pro UI No logic/class name changes to Livewire bindings ============================================================ */ /* Wrapper rhythm */ .permissions-wrap { display: grid; gap: 16px; } /* Master toggle block */ .perm-master { background: var(--surface-1, #0F1319); color: var(--text-1, #E5E7EB); border: 1px solid rgba(148, 163, 184, .18); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; } /* Accordion base */ .perm-accordion { display: grid; gap: 12px; } /* Card */ .perm-card { background: var(--surface-1, #0F1319); color: var(--text-1, #E5E7EB); border: 1px solid rgba(148, 163, 184, .18); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(2, 6, 23, .35); } /* Header */ .perm-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(180deg, rgba(148, 163, 184, .10), rgba(148, 163, 184, .05)); padding: 12px 16px; cursor: pointer; user-select: none; } .perm-card-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .perm-slug { font-size: 12px; opacity: .7; } /* Right header actions */ .perm-head-actions { display: flex; align-items: center; gap: 12px; } .perm-count { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(110, 142, 234, .14); color: #c7d2fe; border: 1px solid rgba(110, 142, 234, .28); white-space: nowrap; } .perm-toggle-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 1px solid rgba(148, 163, 184, .24); background: rgba(148, 163, 184, .08); transition: transform .2s ease; } .perm-card-header.collapsed .perm-toggle-icon { transform: rotate(-90deg); } /* Row: “module master” + quick actions */ .perm-row { display: grid; gap: 12px; } /* Quick links (Select/Deselect/Advanced) */ .perm-quick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .perm-link { font-size: 12px; color: #93c5fd; text-decoration: none; } .perm-link:hover { text-decoration: underline; } /* Actions grid (checkbox chips) */ .perm-actions { display: grid; gap: 10px; margin-top: 6px; } /* Chip */ .perm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(148, 163, 184, .08); border: 1px solid rgba(148, 163, 184, .22); transition: transform .12s ease, background .12s ease, border-color .12s ease; height: 44px; } .perm-chip:hover { transform: translateY(-1px); background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .28); } .perm-chip .form-check-input { width: 18px; height: 18px; border-radius: 5px; } /* Unsupported action visual */ .perm-chip--disabled { opacity: .55; background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .22); color: #fecaca; } /* Save button */ .perm-save { display: flex; gap: 10px; justify-content: flex-start; } /* Title field polish */ .perm-title-block { max-width: 100%; background: var(--surface-1, #0F1319); border: 1px solid rgba(148, 163, 184, .18); border-radius: 12px; padding: 14px 16px; } /* Light mode */ html[data-bs-theme='light'] .perm-card, html[data-bs-theme='light'] .perm-master, html[data-bs-theme='light'] .perm-title-block { background: #fff; color: #0f172a; border-color: rgba(2, 6, 23, .12); } html[data-bs-theme='light'] .perm-card-header { background: #f8fafc; } /* ============================================================================= §13 Authentication Pages | صفحات التسجيل والدخول ============================================================================= */ /*.loading-more {*/ /* padding: 1rem 0;*/ /*}*/ /* =========================================================== CyberSee Auth — Shared Styles (Login & Register) Primary: #4C0EE5 | Secondary: #00E5FF =========================================================== */ /* Page shell */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(900px 600px at 12% 10%, color-mix(in srgb, var(--cs-primary) 26%, transparent), transparent 60%), radial-gradient(1000px 700px at 88% 90%, color-mix(in srgb, var(--cs-primary-2) 22%, transparent), transparent 60%), linear-gradient(120deg, #0A0F1F, #101735 55%, #0B1226); padding: clamp(20px, 4vw, 48px); overflow: hidden; } .auth-wrapper { width: 100%; max-width: 1080px; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--cs-card); border: 1px solid var(--cs-border); border-radius: var(--cs-rad); overflow: hidden; box-shadow: var(--cs-shadow); } /* Left hero */ .auth-hero { background: radial-gradient(circle at 20% 30%, rgba(76, 14, 229, .25), transparent 60%), radial-gradient(circle at 80% 70%, rgba(0, 229, 255, .2), transparent 60%), var(--cs-bg); padding: clamp(2rem, 5vw, 3.5rem); color: var(--cs-text); display: flex; flex-direction: column; justify-content: center; } .auth-hero p { color: var(--cs-muted); max-width: 50ch; margin-bottom: 1.25rem; } /* Right card */ .auth-card { background: rgba(17, 23, 39, .9); backdrop-filter: blur(10px); color: var(--cs-text); padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; } .auth-card h2 { font-weight: 800; text-align: center; margin-bottom: .25rem; } .auth-card p { color: var(--cs-muted); text-align: center; margin-bottom: 1.25rem; } /* Alerts */ .auth-card .alert { border-radius: 12px; border: 1px solid var(--cs-border); margin-bottom: 10px; } .auth-card .alert-success { background: rgba(16, 185, 129, .10); color: #86efac; border-color: rgba(16, 185, 129, .35); } .auth-card .alert-danger { background: rgba(244, 63, 94, .12); color: #fecdd3; border-color: rgba(244, 63, 94, .35); } .auth-card .alert-info { background: rgba(59, 130, 246, .12); color: #bfdbfe; border-color: rgba(59, 130, 246, .35); } .auth-foot { text-align: center; color: var(--cs-muted); margin-top: 1rem; } .auth-foot a { color: var(--info); text-decoration: none; } .auth-foot a:hover { text-decoration: underline; } /* ============================================================================= §14 Policy & Legal Pages | صفحات السياسات والشروط ============================================================================= */ .policy-hero { display: grid; gap: 12px; background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 14px; padding: 20px; box-shadow: var(--brand-shadow, 0 8px 24px rgba(0, 0, 0, .06)); } .policy-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .policy-title { display: flex; align-items: center; gap: 12px; margin: 0; } .policy-meta { display: flex; align-items: center; gap: 10px; color: var(--brand-muted); } .policy-meta i { opacity: .75; } /* ===== Content / editor ===== */ .policy-card { margin-top: 16px; background: var(--brand-card-bg); border: 1px solid var(--brand-border); border-radius: 14px; padding: 18px; } .policy-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* CKEditor fit */ .ck-editor__editable { min-height: 320px; } /* ===== Rendered document ===== */ .policy-doc { line-height: 1.7; color: var(--brand-fg); } .policy-doc h2, .policy-doc h3 { margin-top: 1.2em; margin-bottom: .5em; font-weight: 800; } .policy-doc p { margin: .6em 0; } .policy-doc a { color: var(--brand-primary-600); } /* ===== Footer actions (accept/decline) ===== */ .consent-bar { position: sticky; bottom: -1px; margin-top: 16px; background: var(--brand-elev); border: 1px solid var(--brand-border); border-radius: 12px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .policy-hero { display: grid; gap: 12px; background: var(--bs-card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; box-shadow: var(--brand-shadow, 0 8px 24px rgba(0, 0, 0, .06)); } /* ===== Content / editor ===== */ .policy-card { margin-top: 16px; background: var(--brand-elev-2); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px; } /* CKEditor fit */ .ck-editor__editable { min-height: 360px; } /* ===== Rendered document ===== */ .policy-doc { line-height: 1.7; color: var(--bs-body-color); } /* ============================================================================= §15 API Documentation | توثيق الـ API ============================================================================= */ .brand-chip { display: inline-flex; gap: .6rem; align-items: center; padding: .55rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--cs-border); width: max-content; font-weight: 800; } .logo-hex { width: 28px; height: 28px; background: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; background-image: url('{{ asset(' assets/branding/cybersee-logo.png ') }}'); background-size: cover; background-position: center; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3)); } .features { display: grid; gap: .7rem; } .features .item { display: flex; gap: .6rem; align-items: center; } .features .item i { color: var(--success); } .editor-wrap { background: color-mix(in srgb, var(--brand-primary) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border)); border-radius: 12px; padding: 12px; } /* ====== Page Shell ====== */ .api-card { background: var(--brand-elev-2); color: var(--brand-fg); border: 1px solid var(--brand-border); border-radius: 14px; padding: 18px; } .api-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .api-sub { opacity: .75; font-size: .9rem; margin: 0; } /* ====== Token Row ====== */ .token-row { display: flex; align-items: center; gap: .5rem; max-width: 720px; } .token-wrap { position: relative; flex: 1; } .token-actions { display: flex; align-items: center; gap: .35rem; } /* ====== Editor ====== */ .editor-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* Optional improved code/markdown area inside docs preview */ .doc-content :where(pre, code) { background: var(--brand-elev); border: 1px solid var(--brand-border); border-radius: 0.375rem; } .doc-content pre { padding: .9rem; overflow: auto; } .doc-content code { padding: .15rem .35rem; } /* Small helpers */ .hint { font-size: .85rem; opacity: .75; } /* ================================ Query UI — layout & theme ================================ */ /* Page scaffold */ .query-shell { display: grid; gap: 16px; } /* Search bar */ .query-searchbar { position: relative; } .query-input { width: 100%; height: 48px; padding: 0 48px 0 16px; border-radius: 12px; border: 1px solid var(--bs-border-color); background: var(--bs-card-bg); color: var(--bs-body-color); box-shadow: var(--brand-shadow, 0 4px 18px rgba(0, 0, 0, .12)); transition: box-shadow .18s ease, border-color .18s ease; } .query-input:focus { outline: none; box-shadow: var(--brand-focus-ring); border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--bs-border-color)); } .query-searchbar .bi-search { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); opacity: .7; font-size: 18px; color: var(--bs-body-color); } /* Tabs (Results, Dashboard, etc.) */ .query-tabs .nav-link { border: 1px solid var(--bs-border-color); background: var(--bs-card-bg); color: var(--bs-body-color); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; } .query-tabs .nav-link .bi { font-size: 18px; } .query-tabs .nav-link:focus-visible { box-shadow: var(--brand-focus-ring); } .query-tabs .nav-link.active { background: color-mix(in srgb, var(--brand-primary) 18%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--bs-border-color)); } /* 2-column grid (sidebar + content) */ .query-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } /* Sidebar widgets */ .side-widget { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 14px; padding: 14px; } .side-widget h6 { margin: 0 0 10px; font-weight: 700; display: flex; align-items: center; gap: 8px; } /* Tag cloud */ .tag-cloud { display: flex; gap: 8px; flex-wrap: wrap; } .tag-chip { font-size: .85rem; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--bs-border-color); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); transition: transform .1s ease, border-color .15s ease; } .tag-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--bs-border-color)); } /* Mini lists (Top Countries/Ports/Tech) */ .list-mini { margin: 0; padding: 0; list-style: none; } .list-mini li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; } .list-mini li+li { margin-top: 6px; } .list-mini .pill { background: color-mix(in srgb, var(--brand-primary) 16%, transparent); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 2px 8px; font-weight: 700; min-width: 44px; text-align: center; } /* Cards shell */ .cards-wrap { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 14px; padding: 14px; } .cards-wrap .grid { display: grid; gap: 14px; grid-template-columns: 1fr; } /* Result card */ .asset-card { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 16px; display: grid; gap: 10px; transition: border-color .15s ease, transform .12s ease; } .asset-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--bs-border-color)); } .asset-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .asset-tags { display: flex; gap: 8px; flex-wrap: wrap; } .asset-tag { font-size: .8rem; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--bs-border-color); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); } .asset-title { font-size: 1.1rem; font-weight: 700; } .asset-sub { color: var(--bs-muted); font-size: .92rem; } .asset-meta { display: flex; gap: 10px; flex-wrap: wrap; } .meta-badge { border: 1px dashed var(--bs-border-color); border-radius: 10px; padding: 4px 8px; } /* CTA button */ .asset-cta { margin-left: auto; background: linear-gradient(90deg, var(--brand-primary), var(--brand-info, #0ea5e9)); color: #fff; border: none; border-radius: 10px; padding: 8px 12px; font-weight: 700; } .asset-cta .bi { margin-left: 6px; } .asset-cta:focus-visible { outline: none; box-shadow: var(--brand-focus-ring); } .code-badge { padding: 4px 8px; border-radius: 8px; font-weight: 800; background: color-mix(in srgb, var(--brand-success) 12%, transparent); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); } /* ============================================================================= §16 KPI Cards & Panels | بطاقات مؤشرات الأداء ============================================================================= */ .dash-grid { display: grid; grid-template-columns: 1fr; gap: 18px } /* KPI & panels */ .kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .kpi-card { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 18px; } .kpi-title { opacity: .85; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } /* ============================================================================= §17 Reports & Analytics Panel | لوحة التقارير والتحليلات ============================================================================= */ /* ===== Panel shell ===== */ .reports-panel { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(2, 6, 23, .05); } /* ===== Header ===== */ .reports-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-block-end: 8px; } .reports-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--bs-body-color); } .reports-subtitle { margin: 4px 0 0; color: var(--bs-muted); font-size: 13px; } /* ===== List ===== */ .reports-list { list-style: none; padding: 4px; margin: 0; display: grid; gap: 4px; max-height: 375px; overflow-y: scroll; } /* Row */ .reports-item { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; transition: background .18s ease, box-shadow .18s ease; border: 1px solid transparent; /* keeps height stable */ } .reports-item:hover { background: color-mix(in srgb, var(--brand-primary-50, #f5f3ff) 35%, var(--bs-card-bg)); border-color: color-mix(in srgb, var(--brand-primary) 20%, transparent); } /* Leading icon (in a soft pill) */ .reports-icon { inline-size: 36px; block-size: 36px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--brand-primary) 12%, var(--bs-card-bg)); border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--bs-border-color)); color: var(--brand-primary); flex: none; } .reports-icon i { font-size: 18px; line-height: 1; } /* Content */ .reports-content { min-width: 0; } .reports-link { color: var(--bs-body-color); font-weight: 700; text-decoration: none; display: inline-block; max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* single-line clamp */ } .reports-link:hover { color: var(--brand-primary); text-decoration: underline; } .reports-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--bs-muted); } /* Empty state */ .reports-empty { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 12px; background: color-mix(in srgb, var(--bs-border-color) 16%, transparent); color: var(--bs-muted); } /* Card skin (apply to .chart & .reports-panel) */ .chart, .reports-panel { width: 100%; max-width: 100%; background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(2, 6, 23, .05); overflow: hidden; box-sizing: border-box; } /* Header bar */ .header-card, .reports-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .header-card h2, .reports-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--bs-body-color); } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; height: 100%; } .col-4 { grid-column: span 4; } .kpi-hero-trend .trend-line { width: 80px; height: 24px; } .kpi-hero-trend .trend-value { font-size: 15px; font-weight: 700; } .kpi-service-trend .trend-spark { width: 50px; height: 20px; } .kpi-service-trend .trend-pct { font-size: 12px; font-weight: 600; } .trend-info { display: flex; align-items: center; gap: 8px; } .trend-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .trend-badge.trend-up { background: rgba(34, 197, 94, 0.15); color: #22C55E; } .trend-badge.trend-down { background: rgba(239, 68, 68, 0.15); color: #EF4444; } .trend-badge.trend-neutral { background: rgba(100, 116, 139, 0.15); color: #64748B; } .trend-badge.small { padding: 1px 6px; font-size: 10px; } .sparkline-indicator { display: flex; align-items: center; gap: 12px; } .sparkline-chart { width: 60px; height: 24px; } .sparkline-chart.up { color: #22C55E; } .sparkline-chart.down { color: #EF4444; } .sparkline-percent { font-size: 14px; font-weight: 700; } .sparkline-percent.up { color: #22C55E; } .sparkline-percent.down { color: #EF4444; } .sparkline-inline { display: flex; align-items: center; gap: 6px; } .sparkline-inline svg { width: 36px; height: 14px; } .sparkline-inline.up { color: #22C55E; } .sparkline-inline.down { color: #EF4444; } .sparkline-pct { font-size: 12px; font-weight: 600; } /* ============================================================================= §18 Domain Details & DNS Grid | تفاصيل النطاقات ============================================================================= */ /* Custom tooltip content */ .geo-tip { display: grid; gap: 4px; } .geo-tip .t { font-weight: 700; letter-spacing: .2px; } .geo-tip .s { opacity: .85; } /* Breakdown styling (under gauge) */ .gauge-breakdown { margin-top: -4px; display: grid; gap: 6px; font-size: .925rem; } .gauge-breakdown .gb-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--bs-border-color); background: var(--bs-card-bg); border-radius: 10px; } .gauge-breakdown .dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; margin-right: 8px; display: inline-block; } .gauge-breakdown .lbl { flex: 1; color: var(--brand-muted, #94a3b8); } .gauge-breakdown .val { font-weight: 700; color: var(--bs-body-color, #e5e7eb); } .gauge-breakdown .gb-total { text-align: right; opacity: .85; margin-top: 2px; } /* ========================= Shell Layout ========================= */ .domain-shell { display: grid; gap: 18px; grid-template-columns: 1fr; } /* ========================= Sidebar ========================= */ .domain-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; align-self: start; } .dw-card { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 14px; box-shadow: var(--brand-shadow); } .dw-card h6 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--bs-body-color); font-weight: 800; letter-spacing: .2px; } /* Map box */ .map-box { height: 240px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--brand-primary) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--brand-primary) 28%, var(--bs-border-color)); } /* Chips (Ports / Tech / Services) */ .domain-shell .chips { display: flex; flex-wrap: wrap; gap: 8px; } .domain-shell .chip { padding: 6px 10px; font-size: .9rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); } .domain-shell .chip .bi { margin-right: 6px; opacity: .85 } /* HTTP panel (headers preview) */ .http-box { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 12px; overflow: hidden; } .http-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 10px 12px; background: color-mix(in srgb, var(--brand-info) 8%, transparent); border-bottom: 1px solid var(--bs-border-color); } .http-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px; align-items: center; } .kv+.kv { margin-top: 6px; } .kv .k { color: var(--brand-muted); } .kv .v { color: var(--bs-body-color); word-break: break-word } /* Last seen */ .last-seen { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--brand-success) 10%, transparent); border: 1px solid var(--bs-border-color); } .last-seen .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-success); } /* ========================= Main content ========================= */ .domain-main { display: flex; flex-direction: column; gap: 14px; } /* Card wrapper */ .kv-card { background: var(--bs-card-bg, #0b1220); border: 1px solid var(--bs-border-color, #233042); border-radius: 16px; padding: 12px; } /* Responsive grid of key-value blocks */ .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0; /* dl default */ } /* Each key-value block */ .kv-item { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--brand-primary, #4C0EE5) 6%, transparent); border: 1px solid var(--bs-border-color, #233042); border-radius: 12px; } /* Value */ .kv-value { margin: 0; /* dd default reset */ color: var(--bs-body-color, #cbd5e1); overflow: hidden; text-overflow: ellipsis; } /* Section header */ .section { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 14px; } .section h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--bs-body-color); font-weight: 900; letter-spacing: .2px } .section .sub { color: var(--brand-muted); font-weight: 700; margin-bottom: 8px; } /* DNS list */ .dns-grid { display: grid; gap: 10px; grid-template-columns: 160px 1fr; } .dns-type { font-weight: 900; color: var(--brand-warning); display: flex; align-items: center; gap: 6px; } .dns-values { display: flex; flex-wrap: wrap; gap: 8px; } .pill { padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); border: 1px solid var(--bs-border-color); font-weight: 700; } /* Open ports – pro list */ .port-card { border: 1px solid var(--bs-border-color); background: var(--bs-card-bg); border-radius: 14px; padding: 12px; } .port-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 10px; } .port-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .port-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-weight: 800; border: 1px solid var(--bs-border-color); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); } .port-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .status-bad { color: #ef4444; background: color-mix(in srgb, var(--brand-danger) 12%, transparent); } .status-ok { color: #10b981; } /* Accordion-like HTTP raw details */ .raw { margin-top: 8px; border-top: 1px dashed var(--bs-border-color); padding-top: 10px; font-family: ui-monospace, monospace; font-size: .95rem; color: var(--bs-body-color); white-space: pre-wrap; word-break: break-word; } .map-area { width: 100%; min-height: 280px; display: block; position: relative; } .map-area>div { width: 100% !important; height: 100% !important; } .map-area svg { width: 100% !important; height: 100% !important; } .status-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 9px; font-weight: 600; text-transform: uppercase; } .status-indicator.active { background: rgba(34, 197, 94, 0.15); color: #22C55E; } /* ============================================================================= §19 Charts & Visualizations | الرسوم البيانية ============================================================================= */ .chart { border: 1px solid var(--brand-border); background-color: var(--brand-elev); padding: 15px; border-radius: 8px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .google-visualization-tooltip { background: var(--tooltip-bg, #151b24) !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; padding: 10px 12px !important; } .google-visualization-tooltip-item-list, .google-visualization-tooltip-item { color: inherit !important; } html[data-bs-theme="light"] .google-visualization-tooltip { --tooltip-bg: #ffffff; border-color: rgba(2, 6, 23, .12) !important; } html[data-bs-theme="dark"] .google-visualization-tooltip { --tooltip-bg: #151b24; } /* ===== Charts layout (12-column responsive grid) ===== */ .charts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; width: 100%; max-width: 100%; box-sizing: border-box; } /* Chart default height */ .chart-height { height: 320px; } /* ============================================================================= §20 Tagify Input Styling | تنسيق حقل التاجات ============================================================================= */ /* Tagify remove (x) — theme-aware */ .tagify__tag__removeBtn { width: 16px; height: 16px; margin-inline-start: 8px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--brand-fg); /* default text color */ opacity: .85; transition: background .15s ease, opacity .15s ease; } /* The visible "×" glyph */ .tagify__tag__removeBtn::after { content: "×"; font-size: 12px; line-height: 1; color: currentColor; } /* Hover/focus feedback */ .tagify__tag__removeBtn:hover, .tagify__tag__removeBtn:focus { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); outline: none; } /* Light theme: darker x for contrast */ html[data-bs-theme='light'] .tagify__tag__removeBtn { color: #0f172a; } /* Dark theme: white x for contrast (requested) */ html[data-bs-theme='dark'] .tagify__tag__removeBtn { color: #ffffff; } .tagify { --tags-border-color: rgba(148, 163, 184, .22) !important; --tags-hover-border-color: var(--brand-primary-600, #5E2FEF) !important; --tag-bg: rgba(76, 14, 229, .14) !important; --tag-hover: rgba(76, 14, 229, .22) !important; --tag-text-color: var(--brand-primary-900, #EEE8FF) !important; --tag-remove-bg: rgba(76, 14, 229, .25) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; background: var(--brand-elev-2); border-radius: 10px; overflow-x: hidden; border-radius: 10px; background: var(--brand-elev-2); min-height: 46px; } .tagify__tag { border-radius: 999px; padding: 3px 7px; font-size: 11px; } .tagify__input { color: var(--brand-fg, #E5E7EB); font-size: 12px; } /* Chips themselves */ .tagify__tag { display: inline-flex; max-width: 100%; border-radius: 999px; padding: 4px 8px; font-size: 11px; } /* Chip inner box/text: truncate long text gracefully */ .tagify__tag>div { max-width: 100%; } .tagify__tag-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The typing input should wrap onto a new line when needed */ .tagify__input { flex: 1 1 160px; /* grow/shrink; avoid squeezing */ min-width: 120px; /* line break threshold */ color: var(--brand-fg, #E5E7EB); font-size: 12px; } /* ============================================================================= §21 Status Badges | شارات الحالة ============================================================================= */ .badge-primary { background-color: var(--brand-primary); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 12px; display: flex; align-items: center; line-height: 1; vertical-align: baseline; margin: 1px 2px; } .badge-primary:hover { background-color: var(--brand-primary-600); } .badge-danger { background-color: var(--brand-danger); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 12px; display: flex; align-items: center; line-height: 1; vertical-align: baseline; margin: 1px 2px; } .badge-soft { font-size: .75rem; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--brand-border); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); } .badge-soft { border: 1px solid var(--bs-border-color); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border-radius: 999px; padding: 4px 10px; font-weight: 700; } /* ---------- Status badges (high contrast, dark/light friendly) ---------- */ .badge-status { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .65rem; border-radius: 999px; font-weight: 700; font-size: .82rem; letter-spacing: .2px; border: 1px solid transparent; line-height: 1; } .badge-processing { color: #2b2100; background: rgba(255, 193, 7, .22); border-color: rgba(255, 193, 7, .45); } .badge-completed { color: #062b18; background: rgba(25, 135, 84, .18); border-color: rgba(25, 135, 84, .35); } .badge-failed { color: #2b0b10; background: rgba(220, 53, 69, .16); border-color: rgba(220, 53, 69, .35); } /* Better visibility on dark backgrounds */ html[data-bs-theme="dark"] .badge-processing { color: #ffe9a3; background: rgba(255, 193, 7, .15); border-color: rgba(255, 193, 7, .35); } html[data-bs-theme="dark"] .badge-completed { color: #bdf5d6; background: rgba(25, 135, 84, .14); border-color: rgba(25, 135, 84, .30); } html[data-bs-theme="dark"] .badge-failed { color: #ffb9c2; background: rgba(220, 53, 69, .14); border-color: rgba(220, 53, 69, .30); } html[data-bs-theme="dark"] .badge-processing, html[data-bs-theme="dark"] .badge-completed { color: var(--brand-fg); } /* ============================================================================= §22 Action Buttons | أزرار الإجراءات ============================================================================= */ /* Actions column alignment */ .action-buttons { display: flex; gap: 4px; justify-content: flex-end; align-items: center; } .action-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--brand-border); background: var(--brand-elev-2); color: var(--brand-fg) !important; cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } /* ---------- Actions alignment ---------- */ .action-buttons { display: inline-flex; gap: .5rem; align-items: center; justify-content: flex-end; } /* ---------- Action button for columns ---------- */ .action-btn.action-btn-columns { border: 1px solid rgba(13, 110, 253, .28); background: rgba(13, 110, 253, .10); color: rgba(13, 110, 253, .95); } html[data-bs-theme="dark"] .action-btn.action-btn-columns { border-color: rgba(13, 110, 253, .40); background: rgba(13, 110, 253, .12); color: rgba(157, 195, 255, .95); } .action-btn.action-btn-columns:hover { transform: translateY(-1px); filter: brightness(1.05); } .action-btn.action-btn-columns.is-disabled { opacity: .45; cursor: not-allowed; transform: none; } .delete-confirm-modal { background: var(--brand-card-bg); border: 1px solid color-mix(in srgb, var(--brand-danger) 30%, transparent); border-radius: 16px; padding: 2.5rem; max-width: 450px; width: 100%; text-align: center; box-shadow: var(--brand-shadow); } .delete-confirm-modal h4 { color: var(--brand-fg); margin: 1.5rem 0 1rem; font-size: 1.5rem; font-weight: 700; } .delete-confirm-modal p { color: var(--brand-muted); margin-bottom: 2rem; line-height: 1.6; } .delete-confirm-actions { display: flex; gap: 1rem; justify-content: center; } /* ============================================================================= §23 Theme Toggle (Light/Dark) | مفتاح تبديل السمة ============================================================================= */ /* ===== Header shell: glassy card feel ===== */ .header-bar { padding: 8px 12px; background: color-mix(in srgb, var(--bs-card-bg) 92%, transparent); border: 1px solid var(--bs-border-color); border-radius: 14px; box-shadow: 0 6px 18px rgba(2, 6, 23, .06); } /* ===== Theme toggle skin (keeps Livewire inside working) ===== - We overlay our visual icons; clicks pass through to Livewire. */ .theme-toggle-skin { position: relative; width: 56px; height: 34px; border-radius: 999px; background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 6%, transparent); } /* Visual layer (icons + slider) */ .theme-visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; /* let clicks hit Livewire element */ } .theme-visual .icon-sun, .theme-visual .icon-moon { font-size: 16px; transition: opacity .2s ease, transform .2s ease; } /* Light vs Dark icons */ html[data-bs-theme="light"] .theme-visual .icon-sun { opacity: 1; transform: none; color: #eab308; } html[data-bs-theme="light"] .theme-visual .icon-moon { opacity: .25; transform: scale(.9); color: #64748B; } html[data-bs-theme="dark"] .theme-visual .icon-sun { opacity: .25; transform: scale(.9); color: #cbd5e1; } html[data-bs-theme="dark"] .theme-visual .icon-moon { opacity: 1; transform: none; color: #f5faff; } html[data-bs-theme="light"] .header-bar { box-shadow: 0 8px 22px rgba(2, 6, 23, .05); } /* ============================================================================= §24 Terms & Consent Banner | بانر الموافقة والشروط ============================================================================= */ /* Top banner */ .subscription-banner { position: absolute; top: 82px; z-index: 99999; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--cs-danger) 35%, transparent), transparent), var(--cs-bg-elev); border-bottom: 1px solid var(--cs-border); color: var(--cs-text); left: 0; width: 100%; } .subscription-banner.is-hidden { display: none; } .subscription-banner .banner-content { display: flex; align-items: center; gap: 10px; } .subscription-banner .bi-exclamation-triangle-fill { color: var(--cs-danger); font-size: 1.1rem; } .subscription-banner .banner-text { font-size: .95rem; line-height: 1.3; } .subscription-banner .banner-dismiss { border: 1px solid var(--cs-border); background: transparent; color: inherit; border-radius: 10px; padding: 6px 10px; font-weight: 600; transition: .2s; } .subscription-banner .banner-dismiss:hover { border-color: color-mix(in srgb, var(--cs-primary) 45%, var(--cs-border)); } /* ===== Sticky Terms Banner (Light/Dark aware) ===== */ .terms-banner { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1080; top: 80px; background: var(--bs-card-bg); border-bottom: 1px solid var(--bs-border-color); box-shadow: 0 12px 24px rgba(2, 6, 23, .12); animation: terms-drop .28s ease-out both; margin-inline-start: var(--sidebar-width) !important; inline-size: calc(100% - var(--sidebar-width)) !important; width: calc(100% - var(--sidebar-width)) !important; } .terms-banner__inner { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; } .terms-banner__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: var(--brand-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent); } .terms-banner__title { margin: 0 0 4px; font-weight: 800; letter-spacing: .2px; color: var(--bs-body-color) } .terms-banner__text { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--bs-body-color); font-size: .95rem; line-height: 1.45 } .terms-banner__checkbox { margin: 0; transform: translateY(-1px) } .terms-banner__link { color: var(--brand-primary); text-decoration: underline } .terms-banner__link:hover { color: var(--brand-primary-600) } .terms-banner__error { margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--bs-danger) } .terms-banner__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .terms-banner__spacer { height: 64px } /* ============================================================================= §25 Date Picker Styling | تنسيق منتقي التاريخ ============================================================================= */ /* Input with calendar icon */ .date-input-container { position: relative; } .date-input-container .calendar-icon { opacity: .7; color: var(--brand-fg); } /* ============================================================================= §26 Advanced Dashboard Components | مكونات لوحة التحكم المتقدمة ============================================================================= */ .kpi-value { font-size: 2rem; font-weight: 800; } /* ============================================================================= Premium KPI Dashboard ============================================================================= */ .kpi-dashboard { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 100%; } .kpi-hero-section { width: 100%; max-width: 100%; } .kpi-hero-card { background: var(--bs-card-bg); border: 1px solid var(--brand-border); border-radius: 16px; padding: 28px; display: flex; gap: 40px; width: 100%; box-sizing: border-box; } .kpi-hero-left { min-width: 220px; max-width: 280px; flex-shrink: 0; padding-right: 40px; border-right: 1px solid var(--brand-border); } .kpi-hero-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .kpi-hero-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-muted); } .kpi-volume-badge { padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .kpi-volume-badge.high { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1)); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); } .kpi-volume-badge.medium { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1)); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3); } .kpi-volume-badge.low { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.3); } .kpi-hero-value { font-size: 56px; font-weight: 800; line-height: 1; color: var(--brand-fg); font-variant-numeric: tabular-nums; margin-bottom: 16px; } .kpi-hero-trend { display: flex; align-items: center; gap: 10px; } .kpi-hero-trend.up { color: #22C55E; } .kpi-hero-trend.down { color: #EF4444; } .kpi-hero-right { flex: 1; display: flex; align-items: center; min-width: 0; overflow: hidden; } .kpi-services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; } .kpi-service-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%); border: 1px solid var(--brand-border); border-top: 3px solid var(--svc-color, #64748B); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: all 0.25s ease; position: relative; } .kpi-service-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--svc-color, #64748B); border-color: var(--svc-color, #64748B); } .kpi-service-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; background: linear-gradient(180deg, rgba(var(--svc-color-rgb, 100, 116, 139), 0.08) 0%, transparent 100%); border-radius: 12px 12px 0 0; pointer-events: none; } .kpi-service-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--svc-color, #64748B); position: relative; z-index: 1; } .kpi-service-icon svg { width: 20px; height: 20px; } .kpi-service-label { font-size: 11px; font-weight: 500; color: var(--brand-muted); position: relative; z-index: 1; } .kpi-service-value { font-size: 26px; font-weight: 700; color: var(--brand-fg); font-variant-numeric: tabular-nums; line-height: 1; position: relative; z-index: 1; } .kpi-service-trend { display: flex; align-items: center; gap: 6px; margin-top: auto; position: relative; z-index: 1; } .kpi-service-trend.up { color: #22C55E; } .kpi-service-trend.down { color: #EF4444; } /* Secondary Section */ .kpi-secondary-section { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; width: 100%; max-width: 100%; box-sizing: border-box; } .kpi-stat-card { background: var(--bs-card-bg); border: 1px solid var(--brand-border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; transition: all 0.2s ease; } .kpi-stat-card:hover { border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .kpi-keywords-card { grid-column: span 2; } .kpi-stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .kpi-stat-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--brand-muted); } .kpi-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 9px; font-weight: 600; text-transform: uppercase; } .kpi-status-badge.active { background: rgba(34, 197, 94, 0.15); color: #22C55E; } .kpi-status-badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: kpiPulse 1.5s ease-in-out infinite; } .kpi-alert-badge { padding: 3px 10px; border-radius: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; background: rgba(239, 68, 68, 0.15); color: #EF4444; animation: kpiBlink 1.2s ease-in-out infinite; } .kpi-live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 9px; font-weight: 700; text-transform: uppercase; background: rgba(239, 68, 68, 0.15); color: #EF4444; } .kpi-live-badge .live-pulse { width: 6px; height: 6px; border-radius: 50%; background: #EF4444; animation: livePulseAnim 1s ease-in-out infinite; } .kpi-stat-value { font-size: 36px; font-weight: 700; color: var(--brand-fg); font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi-stat-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .kpi-stat-sublabel { font-size: 11px; color: var(--brand-muted); } .kpi-mini-stat { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .kpi-mini-stat .mini-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .kpi-mini-stat .mini-icon.fp { background: rgba(249, 115, 22, 0.15); color: #F97316; } .kpi-mini-stat .mini-icon.ok { background: rgba(34, 197, 94, 0.15); color: #22C55E; } .kpi-mini-stat .mini-label { flex: 1; font-size: 11px; color: var(--brand-muted); } .kpi-mini-stat .mini-value { font-size: 14px; font-weight: 600; color: var(--brand-fg); } .kpi-progress-bar { height: 6px; background: var(--brand-border); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .kpi-progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } .kpi-progress-fill.low { background: linear-gradient(90deg, #22C55E, #4ADE80); } .kpi-progress-fill.medium { background: linear-gradient(90deg, #F59E0B, #FBBF24); } .kpi-progress-fill.high { background: linear-gradient(90deg, #EF4444, #F87171); } .kpi-progress-label { font-size: 10px; color: var(--brand-muted); } .kpi-trend-inline { display: flex; align-items: center; gap: 6px; } .kpi-trend-inline svg { width: 50px; height: 20px; } .kpi-trend-inline.up { color: #22C55E; } .kpi-trend-inline.down { color: #EF4444; } .kpi-trend-inline span { font-size: 13px; font-weight: 600; } .kpi-shield { color: var(--brand-muted); opacity: 0.6; } .kpi-stacked-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--brand-border); margin: 12px 0 8px; } .kpi-stacked-bar .bar-seg { height: 100%; min-width: 3px; } .kpi-stacked-bar .bar-seg.pending { background: #0EA5E9; } .kpi-stacked-bar .bar-seg.progress { background: #8B5CF6; } .kpi-stacked-bar .bar-seg.fixed { background: #22C55E; } .kpi-legend { display: flex; flex-wrap: wrap; gap: 8px; } .kpi-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--brand-muted); } .kpi-legend .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .kpi-legend .dot.pending { background: #0EA5E9; } .kpi-legend .dot.progress { background: #8B5CF6; } .kpi-legend .dot.fixed { background: #22C55E; } .kpi-count-badge { font-size: 28px; font-weight: 700; color: var(--brand-fg); } .kpi-keywords-sublabel { font-size: 11px; color: var(--brand-muted); margin-bottom: 12px; } .kpi-keywords-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--brand-border); margin-bottom: 12px; } .kpi-keywords-bar .kw-seg { height: 100%; min-width: 3px; } .kpi-keywords-tags { display: flex; flex-wrap: wrap; gap: 8px; } .kw-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--brand-border); border-radius: 20px; font-size: 11px; color: var(--brand-muted); transition: all 0.2s ease; } .kw-tag:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); } .kw-tag strong { color: var(--brand-fg); font-weight: 600; } .kw-tag .kw-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .lifecycle-breakdown { display: flex; flex-direction: column; gap: 8px; margin-top: auto; } .lifecycle-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .lifecycle-icon { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .lifecycle-icon.false-positive { background: rgba(249, 115, 22, 0.15); color: #F97316; } .lifecycle-icon.fixed { background: rgba(34, 197, 94, 0.15); color: #22C55E; } .lifecycle-count { font-size: 13px; font-weight: 600; color: var(--brand-fg); } .urgency-badge { padding: 2px 6px; border-radius: 4px; font-size: 8px; font-weight: 600; text-transform: uppercase; animation: urgencyBlink 1s ease-in-out infinite; } .urgency-badge.high { background: rgba(239, 68, 68, 0.15); color: #EF4444; } .pending-queue { display: flex; flex-direction: column; gap: 6px; margin-top: auto; } .queue-bar { height: 5px; background: var(--brand-border); border-radius: 3px; overflow: hidden; } .queue-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } .queue-fill.low { background: #22C55E; } .queue-fill.medium { background: #F59E0B; } .queue-fill.high { background: #EF4444; } .live-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: rgba(239, 68, 68, 0.15); font-size: 9px; font-weight: 600; color: #EF4444; text-transform: uppercase; } .live-dot { width: 5px; height: 5px; border-radius: 50%; background: #EF4444; animation: livePulse 1s ease-in-out infinite; } .shield-icon { color: var(--brand-muted); opacity: 0.7; } .takedown-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--brand-muted); } .legend-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .legend-item .dot.pending { background: #0284C7; } .legend-item .dot.in-progress { background: #8B5CF6; } .legend-item .dot.fixed { background: #22C55E; } .keywords-total-badge { font-size: 24px; font-weight: 700; color: var(--brand-fg); } .keywords-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .keyword-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--brand-elev-2); border-radius: 16px; font-size: 11px; color: var(--brand-muted); } .keyword-tag strong { color: var(--brand-fg); font-weight: 600; } .keyword-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .takedown-header, .keywords-header { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .takedown-total, .keywords-total { font-size: 24px; font-weight: 600; color: var(--brand-fg); } .takedown-bar, .keywords-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--brand-border); } .takedown-segment, .keywords-segment { height: 100%; min-width: 2px; } .takedown-segment.pending { background: #0284C7; } .takedown-segment.in-progress { background: #8B5CF6; } .takedown-segment.fixed { background: #22C55E; } .takedown-breakdown, .keywords-breakdown { display: flex; flex-wrap: wrap; gap: 12px; } .takedown-item, .keywords-item { display: flex; align-items: center; gap: 6px; } .takedown-dot, .keywords-dot { width: 8px; height: 8px; border-radius: 50%; } .takedown-dot.pending { background: #0284C7; } .takedown-dot.in-progress { background: #8B5CF6; } .takedown-dot.fixed { background: #22C55E; } .takedown-count, .keywords-count { font-size: 12px; font-weight: 600; color: var(--brand-fg); } /* ============================================================================= §28 Keyframe Animations | الرسوم المتحركة ============================================================================= */ @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes dotPulse { 0%, 80%, 100% { transform: scale(0); opacity: .4; } 40% { transform: scale(1); opacity: 1; } } @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes terms-drop { from { transform: translateY(-100%); opacity: 0 } to { transform: translateY(0); opacity: 1 } } /* Smooth transitions for table rows */ /* Loading state for scroll trigger */ /* PII Modal Loading Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes kpiPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } @keyframes kpiBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes livePulseAnim { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } @keyframes urgencyBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); } } /* ============================================================================= §29 Responsive Media Queries | استعلامات الشاشة المتجاوبة ============================================================================= */ @media (min-width: 576px) { .perm-actions { grid-template-columns: repeat(2, minmax(180px, 1fr)); } } @media (min-width: 768px) { .perm-row { grid-template-columns: 1fr auto; align-items: center; } .kpi-grid { grid-template-columns: repeat(3, 1fr); } /* Keep Type, Keyword, Level as half width */ #formKeyword .form-group.col-md-12:has(#type_id), #formKeyword .form-group.col-md-12:has(#keyword_name_text), #formKeyword .form-group.col-md-12:has(#level_id) { grid-column: span 1; } /* Make Tags full width to avoid cramped chips */ #formKeyword .form-group.col-md-12:has(#keyword_tags) { grid-column: 1 / -1; } } @media (min-width: 992px) { .perm-actions { grid-template-columns: repeat(4, minmax(160px, 1fr)); } .query-grid { grid-template-columns: 320px 1fr; } .dash-grid { grid-template-columns: 320px 1fr } } @media (min-width: 1200px) { .query-grid>aside { position: sticky; top: 12px; align-self: start; } .domain-shell { grid-template-columns: 360px 1fr; } } @media (min-width: 1800px) { .kpi-secondary-section { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 1600px) { .kpi-services-grid { grid-template-columns: repeat(5, 1fr); } .kpi-secondary-section { grid-template-columns: repeat(4, 1fr); } .kpi-keywords-card { grid-column: span 2; } } @media (max-width: 1400px) { .kpi-secondary-section { grid-template-columns: repeat(3, 1fr); } .kpi-keywords-card { grid-column: span 3; } .unified-cases-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1399px) { .col-8 { grid-column: span 12; } /* Map drops full-width */ .col-6 { grid-column: span 6; } .col-4 { grid-column: span 6; } } @media (max-width: 1200px) { .kpi-services-grid { grid-template-columns: repeat(4, 1fr); } .unified-cases-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 992px) { .filters-bar { grid-template-columns: 1fr; } .filters-actions { justify-content: stretch; } .filters-actions .btn-group { width: 100%; } .filters-actions .btn-group .btn { flex: 1 1 0; } .phishing-table { display: block; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modals-offcanvas-right .modal .modal-dialog { width: 92vw; } .auth-wrapper { grid-template-columns: 1fr; } .auth-hero { display: none; } .kpi-hero-card { flex-direction: column; gap: 24px; } .kpi-hero-left { border-right: none; border-bottom: 1px solid var(--brand-border); padding-right: 0; padding-bottom: 24px; max-width: 100%; } .kpi-secondary-section { grid-template-columns: repeat(2, 1fr); } .kpi-keywords-card { grid-column: span 2; } .kpi-services-grid { grid-template-columns: repeat(3, 1fr); } .unified-cases-wrapper { flex-direction: column; } .unified-cases-main { border-right: none; border-bottom: 1px solid var(--brand-border); padding-right: 0; padding-bottom: 16px; width: 100%; } .unified-cases-grid { grid-template-columns: repeat(2, 1fr); width: 100%; } } @media (max-width: 768px) { .offcanvas-alert { --bs-offcanvas-width: min(100vw, 100%); } .footer, .dashboard-header, body.sidebar-expanded .main-content { margin-left: 0 !important; width: 100% !important; } .left-header { display: none !important; } .sidebar { transform: translateX(-68px); } .sidebar.expanded { transform: translateX(0); } .sidebar.expanded { top: 80px; } .sidebar.collapsed ul.sidebar-menu { display: flex; flex-flow: column; align-items: center; } body.sidebar-expanded .layout-header, body.sidebar-expanded .layout-footer, body.sidebar-expanded .main-content, body.sidebar-collapsed .layout-header, body.sidebar-collapsed .layout-footer, body.sidebar-collapsed .main-content { margin-inline-start: 0 !important; inline-size: 100% !important; width: 100% !important; } .filters-actions { justify-content: start; min-width: auto; margin-bottom: 12px; } .filters-slab .btn-clear-filters { position: unset; } .filters-left, .filters-right { gap: 0; } .actions-divider { display: none; } .page-toolbar { grid-template-columns: 1fr; } .page-toolbar>div { display: flex; flex-wrap: wrap; gap: 8px; } .sidebar.expanded { width: 320px; } .chart { width: 100%; } .chart-height { min-height: 200px !important; } .dns-grid { grid-template-columns: 1fr; } #pane-dashboard .domain-actions { display: none; } #pane-dashboard .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi-card { text-align: center; } .kpi-title { flex-direction: column; } #pane-results .stat-pill { flex-direction: column; text-align: center; } .asset-cta-text { display: none; } .query-shell { display: flex; flex-flow: column; } .port-head .btn-outline-primary { display: none; } .kv { grid-template-columns: 1fr; } .col-6, .col-4 { grid-column: span 12; } .terms-banner__inner { grid-template-columns: 1fr; gap: 10px } .terms-banner__icon { display: none } .terms-banner__spacer { height: 84px } .terms-banner__actions { justify-content: flex-end } .kpi-services-grid { grid-template-columns: repeat(2, 1fr); } .kpi-secondary-section { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .actions-bar { gap: .25rem; } } @media (max-width: 576px) { .menu-grid { grid-template-columns: 1fr; } .search-container { flex-basis: 100%; max-width: none; } .filters-row { gap: 8px; } .dropdown-menu-filter { max-width: 92vw; } .service-card { padding: 12px 14px; } .service-icon { width: 36px; height: 36px; font-size: 16px; } .service-name { font-size: 13px; } .service-desc { display: none; } .toggle-switch { width: 46px; height: 24px; } .toggle-slider::before { height: 16px; width: 16px; } .toggle-switch input:checked+.toggle-slider::before { transform: translateX(22px); } .detail-list { grid-template-columns: 1fr; } .consent-actions .btn { min-width: auto; flex: 1; } .sidebar-expiry-tooltip { top: 76px; left: 12px; right: 12px; } .kpi-secondary-section { grid-template-columns: 1fr; } .kpi-keywords-card { grid-column: span 1; } .kpi-services-grid { grid-template-columns: repeat(2, 1fr); } .kpi-hero-card { padding: 16px; } .kpi-hero-value { font-size: 40px; } .kpi-service-card { padding: 12px; } .kpi-service-value { font-size: 20px; } .unified-cases-grid { grid-template-columns: 1fr; } .lifecycle-breakdown { flex-direction: column; gap: 8px; } .keywords-breakdown { flex-direction: column; gap: 8px; } } @media (max-width: 480px) { .kv-item { grid-template-columns: 1fr; /* ستاك عمودي */ gap: 6px; } .kv-label { opacity: .85; } .cs-tour-btn .label { display: none; } } @media (max-width: 420px) { .dropdown-menu-filter.cs-filter { min-width: 94vw; } .cs-filter .row-2 { grid-template-columns: 1fr; } .reports-panel { padding: 12px; } .reports-item { padding: 8px; } } @media (prefers-reduced-motion: reduce) { .skeleton-box { animation: none; opacity: 0.7; } } { }