/* ========================================================================== FORENSIC UI -- CDR Analyzer global design system -------------------------------------------------------------------------- Yeh file poore software ka wahid design system hai. Har safha AdminLTE aur Bootstrap ke wahi classes istemal karta hai jo pehle karta tha -- yahan sirf un ka roop badla gaya hai. Koi PHP, koi query, koi route, koi form field yahan se nahi badalta. Load hone ki tarteeb (includes/headerPaths.php): bootstrap-icons -> font-awesome -> adminlte -> datatables -> leaflet -> forensic-ui.css <-- sab ke baad, taake tokens aakhri lafz hon Theme: koi attribute nahi = DARK (default, intelligence console) = LIGHT = DARK (sarahatan) appTheme localStorage key wahi hai jo headerPaths.php ka anti-flash script pehle se parhta hai -- is liye toggle us ke saath khud-ba-khud chalta hai. TARTEEB 01 Tokens 02 Base + typography 03 App shell (sidebar / topbar / content / footer) 04 Page head + case context 05 Cards 06 KPI + stat tiles 07 Buttons 08 Forms + filters 09 Tables + DataTables 10 Badges + chips 11 Alerts + toasts 12 Modals + SweetAlert2 + dropdowns + tabs 13 Upload / dropzone 14 Empty / loading / error states 15 Charts + maps + sliders 16 Utilities 17 Responsive 18 Print (reports) ========================================================================== */ /* ========================================================================== 01 TOKENS ========================================================================== */ :root { /* ---- ground: deep desaturated navy, never pure black ---- */ --fx-bg: #0a0e15; --fx-bg-2: #0e131d; --fx-surface: #131a26; --fx-surface-2: #18202e; --fx-surface-3: #1e2837; --fx-elevated: #212c3d; /* ---- lines ---- */ --fx-border: #253044; --fx-border-soft: #1b2432; --fx-border-strong: #33415a; /* ---- text ---- */ --fx-text: #e8edf5; --fx-text-2: #b6c2d4; --fx-text-muted: #8b98ad; /* 5.9:1 on --fx-surface */ --fx-text-faint: #8794a8; /* >=4.5:1 --fx-ink-2 jaise gehre panel par bhi */ --fx-text-invert: #0a0e15; /* ---- brand ---- */ --fx-primary: #3d8bfd; --fx-primary-strong: #5c9dff; --fx-primary-deep: #1f5fc4; --fx-primary-fg: #ffffff; --fx-primary-soft: rgba(61,139,253,.14); --fx-primary-line: rgba(61,139,253,.35); --fx-primary-glow: rgba(61,139,253,.30); /* ---- signal amber: intelligence, leads, "look here" ---- */ --fx-signal: #f0a92e; --fx-signal-strong: #ffc25c; --fx-signal-fg: #241a05; --fx-signal-soft: rgba(240,169,46,.14); --fx-signal-line: rgba(240,169,46,.34); /* ---- semantic ---- */ --fx-danger: #f2555a; --fx-danger-strong: #ff787c; --fx-danger-soft: rgba(242,85,90,.14); --fx-danger-line: rgba(242,85,90,.34); --fx-warning: #e8a33d; --fx-warning-strong:#ffbe5e; --fx-warning-soft: rgba(232,163,61,.14); --fx-warning-line: rgba(232,163,61,.34); --fx-success: #3fb950; --fx-success-strong:#5fd46f; --fx-success-soft: rgba(63,185,80,.14); --fx-success-line: rgba(63,185,80,.34); --fx-info: #39c5cf; --fx-info-strong: #5fe0e8; --fx-info-soft: rgba(57,197,207,.14); --fx-info-line: rgba(57,197,207,.32); --fx-violet: #a371f7; --fx-violet-soft: rgba(163,113,247,.14); --fx-violet-line: rgba(163,113,247,.32); --fx-neutral-soft: rgba(125,139,161,.14); --fx-neutral-line: rgba(125,139,161,.30); /* ---- bhare hue accent par matn ka rang ---- Dark theme mein accent raushan hote hain: un par safed matn 2.5:1 par aa jata hai. Is liye gehra matn. Light theme mein iska ulta. ---- */ --fx-on-primary: #051023; --fx-on-success: #04170a; --fx-on-danger: #23060a; --fx-on-warning: #1a1200; --fx-on-info: #04191b; --fx-on-violet: #150829; --fx-on-signal: #241a05; /* ---- fixed ink: stays dark in BOTH themes (avatars, brand chips) ---- */ --fx-ink: #0f172a; --fx-ink-2: #1e293b; --fx-on-ink: #f1f5f9; /* ---- risk ramp: one meaning, one colour, everywhere ---- */ --fx-risk-critical: var(--fx-danger); --fx-risk-high: #f0883e; --fx-risk-medium: var(--fx-warning); --fx-risk-low: var(--fx-success); --fx-risk-none: var(--fx-text-muted); /* ---- data-visualisation series (dark-legible, distinct in order) ---- */ --fx-viz-1: #3d8bfd; --fx-viz-2: #f0a92e; --fx-viz-3: #39c5cf; --fx-viz-4: #a371f7; --fx-viz-5: #3fb950; --fx-viz-6: #f2555a; --fx-viz-7: #64b5f6; --fx-viz-8: #ff9e64; --fx-grid: rgba(125,139,161,.16); /* ---- elevation ---- */ --fx-shadow-1: 0 1px 2px rgba(0,0,0,.40); --fx-shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 8px 20px -12px rgba(0,0,0,.70); --fx-shadow-3: 0 4px 10px rgba(0,0,0,.40), 0 20px 48px -24px rgba(0,0,0,.85); --fx-ring: 0 0 0 3px var(--fx-primary-soft); /* ---- geometry: three radii, no more ---- */ --fx-r-sm: 6px; --fx-r: 10px; --fx-r-lg: 14px; --fx-r-pill: 999px; /* ---- spacing scale ---- */ --fx-s1: 4px; --fx-s2: 8px; --fx-s3: 12px; --fx-s4: 16px; --fx-s5: 20px; --fx-s6: 24px; --fx-s7: 32px; --fx-s8: 44px; /* ---- type ---- */ --fx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fx-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --fx-t-hero: 1.65rem; --fx-t-title: 1.22rem; --fx-t-section: 1.02rem; --fx-t-card: .94rem; --fx-t-body: .875rem; --fx-t-sm: .8rem; --fx-t-xs: .74rem; --fx-t-micro: .68rem; /* ---- motion ---- */ --fx-fast: 120ms cubic-bezier(.4,0,.2,1); --fx-mid: 200ms cubic-bezier(.4,0,.2,1); /* ---- shell metrics ---- */ --fx-sidebar-w: 254px; --fx-topbar-h: 58px; color-scheme: dark; } /* ------------------------------------------------------------------------- LIGHT THEME -- sirf tokens badalte hain, ek bhi component rule nahi. ------------------------------------------------------------------------- */ :root[data-theme="light"] { --fx-bg: #eef1f6; --fx-bg-2: #f4f6fa; --fx-surface: #ffffff; --fx-surface-2: #f7f9fc; --fx-surface-3: #eef2f7; --fx-elevated: #ffffff; --fx-border: #dde3ec; --fx-border-soft: #e8edf3; --fx-border-strong: #c3ccda; --fx-text: #101827; --fx-text-2: #384457; --fx-text-muted: #55637a; /* 4.9:1 --fx-bg par */ --fx-text-faint: #5f6e84; /* 4.6:1 -- light theme mein bhi parhne ke qabil */ --fx-text-invert: #ffffff; --fx-primary: #1f6feb; --fx-primary-strong: #1259c7; --fx-primary-deep: #0d47a1; --fx-primary-fg: #ffffff; --fx-primary-soft: rgba(31,111,235,.09); --fx-primary-line: rgba(31,111,235,.28); --fx-primary-glow: rgba(31,111,235,.22); --fx-signal: #b46e07; --fx-signal-strong: #8f5605; --fx-signal-fg: #ffffff; --fx-signal-soft: rgba(180,110,7,.10); --fx-signal-line: rgba(180,110,7,.28); --fx-danger: #d1242f; --fx-danger-strong: #a40e19; --fx-danger-soft: rgba(209,36,47,.09); --fx-danger-line: rgba(209,36,47,.26); --fx-warning: #b25e00; --fx-warning-strong:#8c4a00; --fx-warning-soft: rgba(178,94,0,.10); --fx-warning-line: rgba(178,94,0,.26); --fx-success: #1a7f37; --fx-success-strong:#116329; --fx-success-soft: rgba(26,127,55,.09); --fx-success-line: rgba(26,127,55,.26); --fx-info: #0e7c86; --fx-info-strong: #0a5d65; --fx-info-soft: rgba(14,124,134,.09); --fx-info-line: rgba(14,124,134,.26); --fx-violet: #7c3aed; --fx-violet-soft: rgba(124,58,237,.09); --fx-violet-line: rgba(124,58,237,.26); --fx-neutral-soft: rgba(100,116,139,.10); --fx-neutral-line: rgba(100,116,139,.24); --fx-risk-high: #b04e08; /* >=4.5:1 chhote matn ke liye bhi */ --fx-viz-1: #1f6feb; --fx-viz-2: #b46e07; --fx-viz-3: #0e7c86; --fx-viz-4: #7c3aed; --fx-viz-5: #1a7f37; --fx-viz-6: #d1242f; --fx-viz-7: #2e7fd4; --fx-viz-8: #c2570c; --fx-grid: rgba(100,116,139,.16); --fx-on-primary: #ffffff; --fx-on-success: #ffffff; --fx-on-danger: #ffffff; --fx-on-warning: #ffffff; --fx-on-info: #ffffff; --fx-on-violet: #ffffff; --fx-on-signal: #ffffff; --fx-shadow-1: 0 1px 2px rgba(16,24,39,.06); --fx-shadow-2: 0 1px 2px rgba(16,24,39,.06), 0 8px 20px -14px rgba(16,24,39,.35); --fx-shadow-3: 0 2px 6px rgba(16,24,39,.08), 0 22px 48px -26px rgba(16,24,39,.45); color-scheme: light; } /* ========================================================================== 02 BASE + TYPOGRAPHY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, body.bg-body-tertiary, body.layout-fixed { font-family: var(--fx-font); font-size: var(--fx-t-body); line-height: 1.5; color: var(--fx-text); background-color: var(--fx-bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv02','cv03','cv04','ss01'; } /* Bootstrap ke apne surface variables -- taake koi bhi bhoola hua bg-body / bg-white / text-dark bhi theme ke saath chale. */ body, .app-wrapper { --bs-body-bg: var(--fx-bg); --bs-body-color: var(--fx-text); --bs-secondary-bg: var(--fx-surface-2); --bs-tertiary-bg: var(--fx-surface-2); --bs-emphasis-color: var(--fx-text); --bs-border-color: var(--fx-border); --bs-heading-color: var(--fx-text); --bs-link-color: var(--fx-primary); --bs-link-hover-color: var(--fx-primary-strong); --bs-primary: var(--fx-primary); --bs-primary-rgb: 61,139,253; --bs-font-sans-serif: var(--fx-font); } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--fx-text); font-weight: 700; letter-spacing: -.011em; text-wrap: balance; } h1,.h1 { font-size: var(--fx-t-hero); } h2,.h2 { font-size: var(--fx-t-title); } h3,.h3 { font-size: var(--fx-t-title); } h4,.h4 { font-size: var(--fx-t-section); } h5,.h5 { font-size: var(--fx-t-card); } h6,.h6 { font-size: var(--fx-t-sm); } a { color: var(--fx-primary); text-decoration: none; transition: color var(--fx-fast); } a:hover { color: var(--fx-primary-strong); } hr, .dropdown-divider { border-color: var(--fx-border); opacity: 1; } ::selection { background: var(--fx-primary-soft); color: var(--fx-text); } /* Forensic identifiers -- numbers, IMEI, cell IDs, CNIC. Ek investigator in ko hindse-ba-hindse parhta hai, is liye monospace: badla hua ya ulta hua digit nazar aa jata hai. */ .fx-id, .fx-mono, code, kbd, samp, pre, .badge-number, .badge-target, .badge-bparty { font-family: var(--fx-mono); font-variant-ligatures: none; letter-spacing: -.01em; } /* Har jagah jahan hindse column mein aate hain */ td.text-end, .fx-num, .fx-tabular { font-variant-numeric: tabular-nums; } /* Chhoti CAPS label -- section eyebrow, table sar, KPI label */ .fx-eyebrow { font-family: var(--fx-mono); font-size: var(--fx-t-micro); letter-spacing: .11em; text-transform: uppercase; color: var(--fx-text-muted); font-weight: 500; } .text-muted, .small.text-muted { color: var(--fx-text-muted) !important; } .text-dark { color: var(--fx-text) !important; } .text-body { color: var(--fx-text-2) !important; } .text-white { color: #ffffff !important; } /* Scrollbars -- theme ke andar rehte hain */ * { scrollbar-width: thin; scrollbar-color: var(--fx-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--fx-border-strong); border-radius: var(--fx-r-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--fx-text-faint); background-clip: content-box; } /* Keyboard focus -- har jagah dikhna chahiye */ :where(a, button, input, select, textarea, [tabindex], .btn, .nav-link, .page-link):focus-visible { outline: 2px solid var(--fx-primary); outline-offset: 2px; border-radius: var(--fx-r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 03 APP SHELL ========================================================================== */ .app-wrapper { background: var(--fx-bg); min-height: 100vh; } /* ---------- Sidebar ---------- */ .app-sidebar { background: var(--fx-bg-2) !important; border-right: 1px solid var(--fx-border); box-shadow: none !important; width: var(--fx-sidebar-w); } :root[data-theme="light"] .app-sidebar { background: #0d1420 !important; /* sidebar dono theme mein dark rehta hai */ border-right-color: #1b2432; } .app-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.07); height: var(--fx-topbar-h); display: flex; align-items: center; padding: 0 var(--fx-s4); } .app-sidebar .brand-link { display: flex; align-items: center; gap: 10px; color: #f1f5f9; font-weight: 700; letter-spacing: -.01em; font-size: .95rem; padding: 0; white-space: nowrap; } .app-sidebar .brand-mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--fx-primary) 0%, var(--fx-primary-deep) 100%); color: #fff; font-size: .82rem; box-shadow: 0 2px 10px -2px var(--fx-primary-glow); } .app-sidebar .brand-text small { display: block; font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(241,245,249,.45); margin-top: 1px; font-family: var(--fx-mono); } .app-sidebar .sidebar-wrapper { padding-bottom: var(--fx-s4); } .app-sidebar .nav-header { color: rgba(241,245,249,.38); font-family: var(--fx-mono); font-size: var(--fx-t-micro); letter-spacing: .13em; text-transform: uppercase; font-weight: 500; padding: var(--fx-s5) var(--fx-s4) var(--fx-s2); margin: 0; } .app-sidebar .nav-link { position: relative; display: flex; align-items: center; gap: 10px; margin: 1px var(--fx-s2); padding: 8px 10px; border-radius: var(--fx-r-sm); color: rgba(241,245,249,.72); font-size: var(--fx-t-body); font-weight: 500; transition: background var(--fx-fast), color var(--fx-fast); } .app-sidebar .nav-link p { margin: 0; } .app-sidebar .nav-link .nav-icon { width: 20px; flex: 0 0 20px; text-align: center; font-size: .95rem; opacity: .85; } .app-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #ffffff; } .app-sidebar .nav-link.active { background: var(--fx-primary-soft); color: #ffffff; font-weight: 600; } .app-sidebar .nav-link.active::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fx-primary); } .app-sidebar .nav-link.active .nav-icon { opacity: 1; color: var(--fx-primary-strong); } .app-sidebar .nav-link.text-danger { color: rgba(242,85,90,.85) !important; } .app-sidebar .nav-link.text-danger:hover { background: rgba(242,85,90,.12); color: #ff9b9e !important; } /* Sidebar ke andar chhota status khana */ .fx-sidebar-foot { margin: var(--fx-s3) var(--fx-s3) 0; padding: 10px 12px; border-radius: var(--fx-r-sm); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); font-size: var(--fx-t-micro); color: rgba(241,245,249,.5); font-family: var(--fx-mono); display: flex; align-items: center; gap: 8px; } .fx-sidebar-foot .fx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fx-success); flex: 0 0 6px; box-shadow: 0 0 0 3px rgba(63,185,80,.15); } /* Collapsed rail: sirf icon, aur hover par label ka tooltip */ .sidebar-collapse .app-sidebar:not(:hover) .brand-text, .sidebar-collapse .app-sidebar:not(:hover) .nav-link p, .sidebar-collapse .app-sidebar:not(:hover) .nav-header, .sidebar-collapse .app-sidebar:not(:hover) .fx-sidebar-foot { opacity: 0; } /* ---------- Topbar ---------- */ .app-header, .app-header.navbar { background: var(--fx-surface) !important; border-bottom: 1px solid var(--fx-border) !important; box-shadow: none !important; min-height: var(--fx-topbar-h); backdrop-filter: saturate(140%) blur(8px); } .app-header .nav-link { color: var(--fx-text-2); } .app-header .nav-link:hover { color: var(--fx-text); } .fx-topbar-toggle { width: 34px; height: 34px; border-radius: var(--fx-r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--fx-text-2); border: 1px solid transparent; background: transparent; transition: background var(--fx-fast), color var(--fx-fast); } .fx-topbar-toggle:hover { background: var(--fx-surface-3); color: var(--fx-text); } /* Breadcrumb -- "Cases / Case #2026-001 / CDR Intelligence Finder" */ .fx-crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fx-t-sm); color: var(--fx-text-muted); min-width: 0; overflow: hidden; } .fx-crumbs a { color: var(--fx-text-muted); white-space: nowrap; } .fx-crumbs a:hover { color: var(--fx-primary); } .fx-crumbs .fx-crumb-sep { color: var(--fx-text-faint); font-size: .7rem; } .fx-crumbs .fx-crumb-now { color: var(--fx-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Topbar user chip */ .fx-user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--fx-r-pill); border: 1px solid var(--fx-border); background: var(--fx-surface-2); color: var(--fx-text); font-size: var(--fx-t-sm); font-weight: 600; transition: border-color var(--fx-fast), background var(--fx-fast); } .fx-user-chip:hover { border-color: var(--fx-border-strong); background: var(--fx-surface-3); color: var(--fx-text); } .fx-avatar { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--fx-primary) 0%, var(--fx-primary-deep) 100%); color: #fff; font-size: .7rem; font-weight: 700; } /* ---------- Content ---------- */ .app-main { background: var(--fx-bg); } .app-content { padding-top: 0; padding-bottom: var(--fx-s5); } .app-content-header { padding: var(--fx-s5) 0 var(--fx-s3); } .app-content > .container-fluid, .app-content-header > .container-fluid { padding-inline: var(--fx-s5); max-width: 1760px; } /* ---------- Footer ---------- */ .app-footer { background: var(--fx-surface) !important; border-top: 1px solid var(--fx-border) !important; color: var(--fx-text-muted) !important; font-size: var(--fx-t-xs); padding: 12px var(--fx-s5); } .app-footer a { color: var(--fx-text-muted); } /* ========================================================================== 04 PAGE HEAD + CASE CONTEXT ========================================================================== */ .fx-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fx-s4); flex-wrap: wrap; padding-bottom: var(--fx-s4); margin-bottom: var(--fx-s5); border-bottom: 1px solid var(--fx-border); } .fx-page-head .fx-page-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--fx-t-hero); font-weight: 700; letter-spacing: -.018em; color: var(--fx-text); } .fx-page-head .fx-page-title i { color: var(--fx-primary); font-size: .82em; } .fx-page-head .fx-page-sub { margin: 5px 0 0; color: var(--fx-text-muted); font-size: var(--fx-t-body); max-width: 78ch; } .fx-page-actions { display: flex; align-items: center; gap: var(--fx-s2); flex-wrap: wrap; } /* ------------------------------------------------------------------------- MOJOODA app-content-header Har safhe ka apna dhaancha thora alag hai (kahin .row/.col, kahin seedha h3+p). Markup ko chherne ke bajaye yahan usi dhaanche ko wahi shakal di jati hai jo .fx-page-head ki hai -- is tarah 44 safhe ek jaise dikhte hain aur kisi safhe ka HTML nahi badalta. ------------------------------------------------------------------------- */ .app-content-header > .container-fluid { padding-bottom: var(--fx-s4); border-bottom: 1px solid var(--fx-border); } .app-content-header > .container-fluid > .row { align-items: center; } .app-content-header :is(h1, h2, h3, h4):not(.ci-hero-title):not(.fx-on-dark) { font-size: var(--fx-t-hero); font-weight: 700; letter-spacing: -.018em; color: var(--fx-text) !important; margin: 0; display: flex; align-items: center; gap: 11px; line-height: 1.15; } .app-content-header :is(h1, h2, h3, h4):not(.ci-hero-title) > i { color: var(--fx-primary); font-size: .8em; margin: 0 !important; } /* Hamesha gehre rehne wale band (CI hero) ke andar ka matn theme ke saath nahi palat-ta -- warna light theme mein gehra matn gehre band par gum ho jata hai. Yahi ghalti pehle graph ke labels ke saath hui thi. */ .ci-hero, .ci-hero * { color: inherit; } .ci-hero .ci-hero-title { color: #ffffff !important; } .ci-hero p, .ci-hero .ci-hero-sub { color: rgba(233, 240, 252, .82) !important; } .app-content-header p, .app-content-header .small { margin: 6px 0 0 !important; color: var(--fx-text-muted) !important; font-size: var(--fx-t-body) !important; max-width: 86ch; } .app-content-header .text-end, .app-content-header .text-sm-end { display: flex; gap: var(--fx-s2); justify-content: flex-end; align-items: center; flex-wrap: wrap; } @media (max-width: 768px) { .app-content-header .text-end, .app-content-header .text-sm-end { justify-content: flex-start; margin-top: var(--fx-s3); } } /* ---------- Case context band ---------- Har case safhe par ek jaisa. Batata hai ke user kis tehqeeqat ke andar hai. */ .fx-case-bar { display: flex; align-items: center; gap: var(--fx-s5); flex-wrap: wrap; padding: var(--fx-s3) var(--fx-s4); margin-bottom: var(--fx-s5); border: 1px solid var(--fx-border); border-left: 3px solid var(--fx-signal); border-radius: var(--fx-r); background: linear-gradient(90deg, var(--fx-signal-soft) 0%, transparent 42%), var(--fx-surface); } .fx-case-bar .fx-case-id { font-family: var(--fx-mono); font-size: var(--fx-t-xs); letter-spacing: .06em; color: var(--fx-signal); font-weight: 500; } .fx-case-bar .fx-case-title { font-size: var(--fx-t-section); font-weight: 700; color: var(--fx-text); margin: 2px 0 0; line-height: 1.25; } .fx-case-facts { display: flex; align-items: center; gap: var(--fx-s5); flex-wrap: wrap; margin-left: auto; } .fx-case-fact { display: flex; flex-direction: column; gap: 2px; min-width: 74px; } .fx-case-fact .fx-k { font-family: var(--fx-mono); font-size: var(--fx-t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--fx-text-muted); } .fx-case-fact .fx-v { font-size: var(--fx-t-body); font-weight: 600; color: var(--fx-text); font-variant-numeric: tabular-nums; } /* ========================================================================== 05 CARDS -------------------------------------------------------------------------- Border, fill aur shadow -- teenon ka apna kaam hai. Har cheez card nahi hoti: default card halka hai, aur sirf .fx-card-lift wala uthta hai. ========================================================================== */ .card { background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); box-shadow: var(--fx-shadow-1); color: var(--fx-text); margin-bottom: var(--fx-s5); } .card.shadow, .card.shadow-sm { box-shadow: var(--fx-shadow-1) !important; } .card.border-0 { border: 1px solid var(--fx-border) !important; } .card-header { background: transparent !important; border-bottom: 1px solid var(--fx-border); padding: var(--fx-s3) var(--fx-s4); color: var(--fx-text); border-radius: var(--fx-r-lg) var(--fx-r-lg) 0 0 !important; } /* NOTE: .card-header JAAN BOOJH KAR flex container NAHI hai -- bilkul waise hi jaise .alert. Bohat se headers ke andar poore block hote hain (alerts, filter rows, wazahat). Unhen flex items bana dene par woh sikurte nahi aur chhoti screen par card se bahar nikal jate hain. Jahan header ko flex chahiye, wahan markup pehle se apna andar ka .d-flex.justify-content-between rakhta hai. Naye code ke liye .card-header.fx-flex maujood hai. */ .card-header > * { min-width: 0; max-width: 100%; } .card-header.fx-flex { display: flex; align-items: center; gap: var(--fx-s3); flex-wrap: wrap; min-height: 50px; } .card-header.fx-flex .fx-header-tools { margin-left: auto; } .card-header.bg-white, .card-header.bg-light, .card-header.bg-body { background: transparent !important; } .card-title, .card-header h5, .card-header h4, .card-header h3, .card-header h6 { margin: 0; font-size: var(--fx-t-card); font-weight: 700; color: var(--fx-text); letter-spacing: -.008em; display: flex; align-items: center; gap: 8px; } .card-header .card-title i, .card-header h5 i { color: var(--fx-primary); font-size: .95em; } .card-subtitle, .card-header .fx-sub { font-size: var(--fx-t-xs); color: var(--fx-text-muted); font-weight: 400; } .card-header .fx-header-tools { margin-left: auto; display: flex; align-items: center; gap: var(--fx-s2); } .card-body { padding: var(--fx-s4); color: var(--fx-text-2); } .card-body > :last-child { margin-bottom: 0; } .card-footer { background: var(--fx-surface-2); border-top: 1px solid var(--fx-border); padding: var(--fx-s3) var(--fx-s4); border-radius: 0 0 var(--fx-r-lg) var(--fx-r-lg); color: var(--fx-text-muted); font-size: var(--fx-t-sm); } /* ------------------------------------------------------------------------- HOVER PAR PANEL KA JAWAB Pehle yahan hover par ooper rangeen lakeer barhti thi. User ki hidayat par woh lakeer HATA DI GAYI hai -- har panel par. Ab hover ka jawab sirf halka sa uthna, gehri parchhai aur kinare ka rang hai; ginti/matn ke ooper koi rangeen patti nahi aati. ------------------------------------------------------------------------- */ .card, .fx-panel { position: relative; } /* Halka sa uthna -- magar us card par nahi jis ke andar table ho: qatarein parhte waqt poora panel hilna pareshan karta hai. */ .card:hover:not(:has(table)) { transform: translateY(-2px); box-shadow: var(--fx-shadow-2); } .card { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color var(--fx-fast); } .card-header .card-title i, .card-header h5 i { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .card:hover .card-header .card-title i, .card:hover .card-header h5 i { transform: scale(1.15) rotate(-8deg); } @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } } /* ------------------------------------------------------------------------- WAHI HOVER ASAR -- POORE SOFTWARE KE HAR PANEL PAR Bootstrap ki .card ke ilawa har safhe ne apne naam ke panel bana rakhe hain (.ff-card, .zone-card, .rep-tile, .glass-card ...). Un sab ko wahi jawab milta hai jo .card ko: halka sa uthna aur kinare ka rang. Rangeen top lakeer user ki hidayat par kahin nahi hai. ------------------------------------------------------------------------- */ .fx-panel, .ci-card, .cd-card, .filter-card, .ff-card, .zone-card, .coord-card, .pattern-card, .coloc-card, .alert-card, .acct-card, .link-card, .intel-card, .rep-tile, .aud-card, .timeline-box, .lt-map-card, .glass-card, .anomaly-card, .threat-card, .detail-box, .det-box, .cnt-box, .res-box, .filter-box, .paste-box, .exec-brief-box, .info-box, .target-card-item, .sidebar-panel, .network-details-panel, .timeline-bottom-panel, .tsel-panel { position: relative; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color var(--fx-fast); } /* Halka sa uthna -- magar un panels par NAHI jo naqshe/graph ke ooper thehre hue hain (unhen hilana un ki jagah kharab kar deta hai), aur na us par jis ke andar table ho. */ .fx-panel:hover, .ci-card:hover, .cd-card:hover, .filter-card:hover, .ff-card:hover, .zone-card:hover, .coord-card:hover, .pattern-card:hover, .coloc-card:hover, .alert-card:hover, .acct-card:hover, .link-card:hover, .intel-card:hover, .rep-tile:hover, .aud-card:hover, .glass-card:hover, .anomaly-card:hover, .threat-card:hover, .detail-box:hover, .det-box:hover, .cnt-box:hover, .res-box:hover, .filter-box:hover, .exec-brief-box:hover, .info-box:hover, .target-card-item:hover { transform: translateY(-2px); box-shadow: var(--fx-shadow-2); } .sidebar-panel:hover, .network-details-panel:hover, .timeline-bottom-panel:hover, .tsel-panel:hover, .lt-map-card:hover, .timeline-box:hover { transform: none; } /* -------- ICONS: hover par zinda hon -------- Panel ke sar ka icon halka sa bara aur tirchha; KPI tile ka icon chip apni jagah par ubharta hai. Dono chhote asar hain -- yeh tehqeeqati software hai, tamasha nahi. */ .card .card-header i, .card-title i, .ci-card .ci-card-title i, .fx-panel > :is(h4,h5,h6) i, .fx-sec-head > i, .rep-tile i, .info-box .info-box-icon, .zone-card > i, .ff-card i:first-child { transition: transform .3s cubic-bezier(.34,1.56,.64,1), color var(--fx-fast); } :is(.card, .fx-panel, .ci-card, .cd-card, .filter-card, .ff-card, .zone-card, .coord-card, .pattern-card, .coloc-card, .alert-card, .acct-card, .link-card, .intel-card, .rep-tile, .aud-card, .glass-card, .anomaly-card, .threat-card, .info-box, .target-card-item):hover :is(.card-header i, .card-title i, .ci-card-title i, .info-box-icon, h4 > i, h5 > i, h6 > i) { transform: scale(1.16) rotate(-8deg); } /* KPI / stat tile: poori tile nahi uthti (woh ginti parhne mein khalal dalta hai), sirf icon chip zinda hota hai aur kinara raushan. */ .fx-kpi .fx-kpi-icon, .stat-card .stat-icon, .stat-card .icon-box, .small-box .small-box-icon, .small-box > .icon, .ci-kpi .ci-kpi-ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background var(--fx-fast), border-color var(--fx-fast); } .fx-kpi:hover .fx-kpi-icon, .stat-card:hover .stat-icon, .stat-card:hover .icon-box, .small-box:hover .small-box-icon, .small-box:hover > .icon, .ci-kpi:hover .ci-kpi-ico { /* `!important` yahan zaroori hai: base rule mein AdminLTE ki apni positioning todne ke liye `transform: none !important` laga hua hai. */ transform: scale(1.14) rotate(-6deg) !important; } @media (prefers-reduced-motion: reduce) { .fx-panel, .ci-card, .cd-card, .filter-card, .ff-card, .zone-card, .coord-card, .pattern-card, .coloc-card, .alert-card, .acct-card, .link-card, .intel-card, .rep-tile, .aud-card, .glass-card, .anomaly-card, .threat-card, .info-box, .target-card-item { transition: none; } .fx-panel:hover, .ci-card:hover, .cd-card:hover, .filter-card:hover, .ff-card:hover, .zone-card:hover, .rep-tile:hover, .glass-card:hover, .info-box:hover, .target-card-item:hover { transform: none; } [class]:hover i { transform: none !important; } } /* Sirf woh cards jo click hote hain */ .fx-card-lift { transition: transform var(--fx-mid), box-shadow var(--fx-mid), border-color var(--fx-mid); } .fx-card-lift:hover { transform: translateY(-2px); box-shadow: var(--fx-shadow-2); border-color: var(--fx-border-strong); } /* Ahem card -- safhe ka asal jawab */ .fx-card-primary { border-color: var(--fx-primary-line); } .fx-card-primary .card-header { border-bottom-color: var(--fx-primary-line); } .fx-card-signal { border-left: 3px solid var(--fx-signal); } .fx-card-danger { border-left: 3px solid var(--fx-danger); } .fx-card-flat { box-shadow: none; background: var(--fx-surface-2); } /* Panel: card se halka, andar ke hisson ke liye */ .fx-panel { background: var(--fx-surface-2); border: 1px solid var(--fx-border-soft); border-radius: var(--fx-r); padding: var(--fx-s4); } .fx-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-s3); margin-bottom: var(--fx-s3); } /* ========================================================================== 06 KPI + STAT TILES -------------------------------------------------------------------------- Ginti ke saath us ka matlab bhi. Value monospace mein -- instrument readout. ========================================================================== */ .fx-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: var(--fx-s3); margin-bottom: var(--fx-s5); } .fx-kpi { position: relative; background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-r); padding: var(--fx-s4); display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: border-color var(--fx-fast), background var(--fx-fast); } .fx-kpi:hover { border-color: var(--fx-border-strong); } .fx-kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--fx-accent, var(--fx-primary)); opacity: .75; } .fx-kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .fx-kpi-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--fx-r-sm); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; background: var(--fx-accent-soft, var(--fx-primary-soft)); color: var(--fx-accent, var(--fx-primary)); border: 1px solid var(--fx-accent-line, var(--fx-primary-line)); } .fx-kpi-label { font-family: var(--fx-mono); font-size: var(--fx-t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--fx-text-muted); font-weight: 500; } .fx-kpi-value { font-family: var(--fx-mono); font-size: 1.7rem; font-weight: 600; line-height: 1.05; color: var(--fx-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .fx-kpi-value .fx-unit { font-size: .9rem; color: var(--fx-text-muted); margin-left: 3px; font-weight: 500; } .fx-kpi-note { font-size: var(--fx-t-xs); color: var(--fx-text-muted); margin-top: 4px; line-height: 1.4; } .fx-kpi-note strong { color: var(--fx-text-2); font-weight: 600; } /* KPI ke rang -- semantic, marzi ke nahi */ .fx-kpi.is-primary { --fx-accent: var(--fx-primary); --fx-accent-soft: var(--fx-primary-soft); --fx-accent-line: var(--fx-primary-line); } .fx-kpi.is-signal { --fx-accent: var(--fx-signal); --fx-accent-soft: var(--fx-signal-soft); --fx-accent-line: var(--fx-signal-line); } .fx-kpi.is-success { --fx-accent: var(--fx-success); --fx-accent-soft: var(--fx-success-soft); --fx-accent-line: var(--fx-success-line); } .fx-kpi.is-warning { --fx-accent: var(--fx-warning); --fx-accent-soft: var(--fx-warning-soft); --fx-accent-line: var(--fx-warning-line); } .fx-kpi.is-danger { --fx-accent: var(--fx-danger); --fx-accent-soft: var(--fx-danger-soft); --fx-accent-line: var(--fx-danger-line); } .fx-kpi.is-info { --fx-accent: var(--fx-info); --fx-accent-soft: var(--fx-info-soft); --fx-accent-line: var(--fx-info-line); } .fx-kpi.is-violet { --fx-accent: var(--fx-violet); --fx-accent-soft: var(--fx-violet-soft); --fx-accent-line: var(--fx-violet-line); } /* ------------------------------------------------------------------------- PURANI .stat-card TILES Kai safhe apni KPI tile khud banate hain: rangeen gradient block aur ooper safed matn. Do masle the -- (1) rang dono theme mein ek jaisa chamakta tha aur baaki software se mel nahi khata, (2) ginti se pehle nazar rang par jati thi, hindse par nahi. Yahan wahi markup (.stat-value / .stat-label / .stat-icon) bina chhue .fx-kpi jaisi shakal le leta hai. Har safhe ne apni tile ka rang ab --fx-accent ke zariye diya hua hai, is liye maani wahi rehte hain (CDR = green, geo = blue, alert = red) magar shakal ek hi hai. `!important` yahan zaroori hai: safhe ka apna