Spaces:
Sleeping
Sleeping
| /** | |
| * Admin Dashboard Styles | |
| * | |
| * DUAL THEME SUPPORT: | |
| * - DARK MODE: COMMAND CENTER / KING'S THRONE Theme | |
| * → Deep black with cyan/purple/gold accents | |
| * → Neon glows, matrix effects, power animations | |
| * - LIGHT MODE: Clean White/Blue Professional Theme | |
| */ | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); | |
| /* =========================================== | |
| CSS VARIABLES - THEME COLORS | |
| =========================================== */ | |
| :root, | |
| [data-theme="dark"] .admin-container { | |
| /* COMMAND CENTER DARK THEME */ | |
| --admin-bg: #000000; | |
| --admin-bg-deep: #020208; | |
| --admin-primary: #00f0ff; | |
| --admin-primary-rgb: 0, 240, 255; | |
| --admin-secondary: #a855f7; | |
| --admin-secondary-rgb: 168, 85, 247; | |
| --admin-accent: #fbbf24; | |
| --admin-accent-rgb: 251, 191, 36; | |
| --admin-danger: #ff3366; | |
| --admin-danger-rgb: 255, 51, 102; | |
| --admin-success: #00ff88; | |
| --admin-success-rgb: 0, 255, 136; | |
| --admin-text: #e8e8e8; | |
| --admin-text-bright: #ffffff; | |
| --admin-text-muted: #5a6270; | |
| --admin-border: rgba(0, 240, 255, 0.12); | |
| --admin-border-glow: rgba(0, 240, 255, 0.35); | |
| --admin-card-bg: rgba(5, 5, 15, 0.85); | |
| --admin-card-bg-hover: rgba(10, 10, 25, 0.95); | |
| --admin-sidebar-bg: rgba(0, 0, 5, 0.98); | |
| --admin-topbar-bg: rgba(0, 0, 8, 0.95); | |
| --admin-font: 'Rajdhani', 'JetBrains Mono', 'Fira Code', monospace; | |
| --admin-font-display: 'Orbitron', 'Rajdhani', sans-serif; | |
| --admin-grid-color: rgba(0, 240, 255, 0.025); | |
| --admin-glow: 0 0 20px rgba(0, 240, 255, 0.4); | |
| --admin-glow-intense: 0 0 40px rgba(0, 240, 255, 0.6), 0 0 80px rgba(0, 240, 255, 0.3); | |
| --admin-glow-purple: 0 0 30px rgba(168, 85, 247, 0.5); | |
| --admin-glow-gold: 0 0 25px rgba(251, 191, 36, 0.4); | |
| } | |
| [data-theme="light"] .admin-container { | |
| --admin-bg: #f8fafc; | |
| --admin-primary: #d000d0; | |
| --admin-primary-rgb: 79, 124, 130; | |
| --admin-secondary: #d000d0; | |
| --admin-text: #191970; | |
| --admin-text-muted: #7272a8; | |
| --admin-border: rgba(79, 124, 130, 0.15); | |
| --admin-card-bg: rgba(255, 255, 255, 0.9); | |
| --admin-sidebar-bg: rgba(255, 255, 255, 0.98); | |
| --admin-topbar-bg: rgba(255, 255, 255, 0.95); | |
| --admin-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --admin-grid-color: rgba(79, 124, 130, 0.03); | |
| --admin-glow: 0 4px 20px rgba(79, 124, 130, 0.15); | |
| } | |
| /* =========================================== | |
| CONTAINER & LAYOUT | |
| =========================================== */ | |
| .admin-container { | |
| min-height: 100vh; | |
| background: var(--admin-bg); | |
| position: relative; | |
| overflow-x: hidden; | |
| font-family: var(--admin-font); | |
| color: var(--admin-text); | |
| } | |
| /* Dark mode: Hexagonal grid pattern with glow */ | |
| [data-theme="dark"] .admin-container::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-image: | |
| radial-gradient(ellipse at 50% 0%, rgba(0, 240, 255, 0.08) 0%, transparent 50%), | |
| radial-gradient(ellipse at 100% 100%, rgba(168, 85, 247, 0.06) 0%, transparent 40%), | |
| linear-gradient(var(--admin-grid-color) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--admin-grid-color) 1px, transparent 1px); | |
| background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px; | |
| pointer-events: none; | |
| z-index: 0; | |
| animation: gridPulse 8s ease-in-out infinite; | |
| } | |
| @keyframes gridPulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| /* Dark mode: Enhanced scanline + vignette effect */ | |
| [data-theme="dark"] .admin-container::after { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%), | |
| repeating-linear-gradient(0deg, | |
| rgba(0, 0, 0, 0.06) 0px, | |
| rgba(0, 0, 0, 0.06) 1px, | |
| transparent 1px, | |
| transparent 3px); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Light mode: Grid pattern overlay */ | |
| [data-theme="light"] .admin-container::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-image: | |
| linear-gradient(var(--admin-grid-color) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--admin-grid-color) 1px, transparent 1px); | |
| background-size: 24px 24px; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Light mode: Remove scanlines, add subtle gradient */ | |
| [data-theme="light"] .admin-container::after { | |
| background: linear-gradient(135deg, rgba(79, 124, 130, 0.02) 0%, rgba(79, 124, 130, 0.02) 100%); | |
| } | |
| /* =========================================== | |
| ADMIN TOPBAR - COMMAND CENTER HEADER | |
| =========================================== */ | |
| .admin-topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 28px; | |
| background: var(--admin-topbar-bg); | |
| border-bottom: 1px solid var(--admin-border); | |
| backdrop-filter: blur(20px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| /* Dark mode: Animated power line at bottom */ | |
| [data-theme="dark"] .admin-topbar { | |
| background: linear-gradient(180deg, rgba(5, 5, 15, 0.98) 0%, rgba(0, 0, 10, 0.95) 100%); | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.15); | |
| } | |
| [data-theme="dark"] .admin-topbar::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, | |
| transparent 0%, | |
| rgba(168, 85, 247, 0.5) 20%, | |
| rgba(0, 240, 255, 0.8) 50%, | |
| rgba(168, 85, 247, 0.5) 80%, | |
| transparent 100%); | |
| animation: powerLineFlow 3s ease-in-out infinite; | |
| } | |
| @keyframes powerLineFlow { | |
| 0%, 100% { opacity: 0.6; transform: scaleX(1); } | |
| 50% { opacity: 1; transform: scaleX(1.02); } | |
| } | |
| [data-theme="dark"] .admin-topbar::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, | |
| transparent 0%, | |
| rgba(0, 240, 255, 0.6) 25%, | |
| rgba(168, 85, 247, 0.8) 50%, | |
| rgba(0, 240, 255, 0.6) 75%, | |
| transparent 100%); | |
| animation: powerLineGlow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes powerLineGlow { | |
| 0% { opacity: 0.5; filter: blur(0px); } | |
| 100% { opacity: 1; filter: blur(1px); } | |
| } | |
| [data-theme="light"] .admin-topbar::before { | |
| display: none; | |
| } | |
| @keyframes blink { | |
| 50% { | |
| opacity: 1; | |
| } | |
| } | |
| [data-theme="light"] .admin-topbar { | |
| background: var(--admin-topbar-bg); | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| } | |
| [data-theme="light"] .admin-topbar::after { | |
| background: linear-gradient(90deg, transparent, rgba(79, 124, 130, 0.3), transparent); | |
| } | |
| .admin-topbar-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .admin-logo-icon { | |
| color: var(--admin-primary); | |
| filter: drop-shadow(0 0 8px rgba(var(--admin-primary-rgb), 0.7)); | |
| } | |
| [data-theme="dark"] .admin-logo-icon { | |
| animation: iconPulse 2s ease-in-out infinite; | |
| } | |
| @keyframes iconPulse { | |
| 0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.7)); } | |
| 50% { filter: drop-shadow(0 0 15px rgba(0, 240, 255, 1)) drop-shadow(0 0 25px rgba(168, 85, 247, 0.5)); } | |
| } | |
| [data-theme="light"] .admin-logo-icon { | |
| filter: none; | |
| animation: none; | |
| } | |
| .admin-logo-text { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--admin-primary); | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| text-shadow: 0 0 15px rgba(var(--admin-primary-rgb), 0.6); | |
| } | |
| [data-theme="dark"] .admin-logo-text { | |
| background: linear-gradient(90deg, #00f0ff, #a855f7, #00f0ff); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: textGradientShift 4s linear infinite; | |
| } | |
| @keyframes textGradientShift { | |
| 0% { background-position: 0% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| .admin-logo-text::before { | |
| content: '◆ '; | |
| color: rgba(0, 240, 255, 0.6); | |
| font-size: 0.7em; | |
| } | |
| .admin-logo-text::after { | |
| content: ' ◆'; | |
| color: rgba(168, 85, 247, 0.6); | |
| font-size: 0.7em; | |
| } | |
| [data-theme="dark"] .admin-logo-text::before, | |
| [data-theme="dark"] .admin-logo-text::after { | |
| -webkit-text-fill-color: initial; | |
| } | |
| [data-theme="light"] .admin-logo-text { | |
| color: var(--admin-primary); | |
| text-shadow: none; | |
| letter-spacing: 0; | |
| text-transform: none; | |
| font-size: 1.1rem; | |
| font-family: var(--admin-font); | |
| background: none; | |
| -webkit-text-fill-color: initial; | |
| } | |
| [data-theme="light"] .admin-logo-text::before, | |
| [data-theme="light"] .admin-logo-text::after { | |
| display: none; | |
| } | |
| .admin-topbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .admin-user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 20px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(168, 85, 247, 0.08)); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| border-radius: 30px; | |
| font-family: var(--admin-font-display); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| color: var(--admin-primary); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| [data-theme="dark"] .admin-user-info::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent); | |
| transform: translateX(-100%); | |
| transition: transform 0.6s ease; | |
| } | |
| [data-theme="dark"] .admin-user-info:hover::before { | |
| transform: translateX(100%); | |
| } | |
| .admin-user-info:hover { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(168, 85, 247, 0.15)); | |
| border-color: rgba(0, 240, 255, 0.4); | |
| box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); | |
| } | |
| [data-theme="light"] .admin-user-info { | |
| background: rgba(79, 124, 130, 0.08); | |
| border-color: rgba(79, 124, 130, 0.2); | |
| color: #d000d0; | |
| } | |
| .admin-topbar-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 18px; | |
| background: rgba(10, 10, 20, 0.6); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| border-radius: 10px; | |
| color: rgba(0, 240, 255, 0.8); | |
| font-family: var(--admin-font); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| } | |
| [data-theme="dark"] .admin-topbar-btn:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| border-color: rgba(0, 240, 255, 0.4); | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), inset 0 0 15px rgba(0, 240, 255, 0.05); | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .admin-topbar-btn { | |
| background: rgba(79, 124, 130, 0.05); | |
| border: 1px solid rgba(79, 124, 130, 0.15); | |
| color: #d000d0; | |
| } | |
| .admin-topbar-btn:hover { | |
| background: rgba(0, 240, 255, 0.12); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| color: #00f0ff; | |
| } | |
| .admin-topbar-btn.logout { | |
| background: rgba(239, 68, 68, 0.1); | |
| border-color: rgba(239, 68, 68, 0.3); | |
| color: #f87171; | |
| } | |
| .admin-topbar-btn.logout:hover { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #fca5a5; | |
| } | |
| .admin-main { | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| padding: 32px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* =========================================== | |
| HEADER - Premium Gradient Title | |
| =========================================== */ | |
| .admin-header { | |
| margin-bottom: 36px; | |
| } | |
| .admin-header .header-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .admin-header .header-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| } | |
| .admin-header .header-icon-wrapper { | |
| width: 64px; | |
| height: 64px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 16px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(168, 85, 247, 0.2)); | |
| color: #00f0ff; | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| box-shadow: | |
| 0 0 30px rgba(0, 240, 255, 0.3), | |
| inset 0 0 20px rgba(0, 240, 255, 0.1); | |
| animation: iconPowerPulse 3s ease-in-out infinite; | |
| } | |
| @keyframes iconPowerPulse { | |
| 0%, 100% { | |
| box-shadow: 0 0 30px rgba(0, 240, 255, 0.3), inset 0 0 20px rgba(0, 240, 255, 0.1); | |
| } | |
| 50% { | |
| box-shadow: 0 0 50px rgba(0, 240, 255, 0.5), 0 0 80px rgba(168, 85, 247, 0.3), inset 0 0 30px rgba(0, 240, 255, 0.15); | |
| } | |
| } | |
| @keyframes iconFloat { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-4px); } | |
| } | |
| .admin-header h1 { | |
| font-family: var(--admin-font-display); | |
| font-size: 2rem; | |
| font-weight: 800; | |
| letter-spacing: 0.05em; | |
| background: linear-gradient(135deg, #00f0ff 0%, #a855f7 50%, #00f0ff 100%); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin: 0; | |
| animation: titleGlow 4s linear infinite; | |
| } | |
| @keyframes titleGlow { | |
| 0% { background-position: 0% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| [data-theme="light"] .admin-header h1 { | |
| background: linear-gradient(135deg, #191970 0%, #d000d0 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| animation: none; | |
| } | |
| .admin-header p { | |
| font-family: var(--admin-font); | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| margin: 4px 0 0; | |
| letter-spacing: 0.02em; | |
| } | |
| /* =========================================== | |
| STATS GRID - Command Center Power Cards | |
| =========================================== */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 24px; | |
| margin-bottom: 32px; | |
| } | |
| .stat-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| padding: 28px; | |
| border-radius: 16px; | |
| background: linear-gradient(135deg, rgba(5, 5, 15, 0.95), rgba(10, 10, 25, 0.9)); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| box-shadow: | |
| 0 4px 30px rgba(0, 0, 0, 0.5), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.03); | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Top edge glow line */ | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.6) 50%, transparent 100%); | |
| opacity: 0.5; | |
| transition: opacity 0.3s ease; | |
| } | |
| .stat-card:hover::before { | |
| opacity: 1; | |
| } | |
| /* Hover glow effect */ | |
| .stat-card::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(0, 240, 255, 0.05) 0%, transparent 50%); | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| } | |
| .stat-card:hover::after { | |
| opacity: 1; | |
| } | |
| [data-theme="light"] .stat-card { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9)); | |
| border: 1px solid rgba(79, 124, 130, 0.15); | |
| box-shadow: 0 4px 24px rgba(79, 124, 130, 0.08); | |
| } | |
| [data-theme="dark"] .stat-card:hover { | |
| transform: translateY(-6px); | |
| border-color: rgba(0, 240, 255, 0.4); | |
| box-shadow: | |
| 0 15px 50px rgba(0, 0, 0, 0.5), | |
| 0 0 40px rgba(0, 240, 255, 0.15), | |
| inset 0 1px 0 rgba(0, 240, 255, 0.1); | |
| } | |
| [data-theme="light"] .stat-card:hover { | |
| box-shadow: 0 12px 40px rgba(79, 124, 130, 0.15); | |
| } | |
| .stat-icon { | |
| width: 58px; | |
| height: 58px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 14px; | |
| flex-shrink: 0; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover .stat-icon { | |
| transform: scale(1.1); | |
| } | |
| /* Command Center stat icon colors */ | |
| [data-theme="dark"] .stat-icon.users { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(0, 200, 255, 0.1)); | |
| color: #00f0ff; | |
| border: 1px solid rgba(0, 240, 255, 0.25); | |
| box-shadow: 0 0 25px rgba(0, 240, 255, 0.3); | |
| } | |
| [data-theme="dark"] .stat-icon.active { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 200, 100, 0.1)); | |
| color: #00ff88; | |
| border: 1px solid rgba(0, 255, 136, 0.25); | |
| box-shadow: 0 0 25px rgba(0, 255, 136, 0.3); | |
| } | |
| [data-theme="dark"] .stat-icon.new { | |
| background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(139, 92, 246, 0.1)); | |
| color: #a855f7; | |
| border: 1px solid rgba(168, 85, 247, 0.25); | |
| box-shadow: 0 0 25px rgba(168, 85, 247, 0.3); | |
| } | |
| [data-theme="dark"] .stat-icon.interviews { | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1)); | |
| color: #fbbf24; | |
| border: 1px solid rgba(251, 191, 36, 0.25); | |
| box-shadow: 0 0 25px rgba(251, 191, 36, 0.3); | |
| } | |
| .stat-icon.users { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(168, 85, 247, 0.15)); | |
| color: #00f0ff; | |
| box-shadow: 0 0 20px rgba(0, 240, 255, 0.3); | |
| } | |
| .stat-icon.active { | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.25)); | |
| color: #4ade80; | |
| box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); | |
| } | |
| .stat-icon.new { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25)); | |
| color: #60a5fa; | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); | |
| } | |
| .stat-icon.interviews { | |
| background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(219, 39, 119, 0.25)); | |
| color: #f472b6; | |
| box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); | |
| } | |
| [data-theme="light"] .stat-icon.users { | |
| color: #d000d0; | |
| box-shadow: 0 4px 15px rgba(79, 124, 130, 0.2); | |
| } | |
| [data-theme="light"] .stat-icon.active { | |
| color: #16a34a; | |
| box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2); | |
| } | |
| [data-theme="light"] .stat-icon.new { | |
| color: #d000d0; | |
| box-shadow: 0 4px 15px rgba(79, 124, 130, 0.2); | |
| } | |
| [data-theme="light"] .stat-icon.interviews { | |
| color: #ec4899; | |
| box-shadow: 0 4px 15px rgba(236, 72, 153, 0.2); | |
| } | |
| .stat-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .stat-value { | |
| font-family: var(--admin-font-display); | |
| font-size: 2.2rem; | |
| font-weight: 800; | |
| letter-spacing: 0.02em; | |
| line-height: 1.2; | |
| } | |
| [data-theme="dark"] .stat-value { | |
| background: linear-gradient(135deg, #00f0ff 0%, #ffffff 50%, #a855f7 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: none; | |
| filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.3)); | |
| } | |
| [data-theme="light"] .stat-value { | |
| background: linear-gradient(135deg, #191970 0%, #2b2b8a 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| font-family: var(--admin-font); | |
| font-size: 0.8rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| [data-theme="light"] .stat-label { | |
| color: #7272a8; | |
| } | |
| /* =========================================== | |
| USERS SECTION - Command Center Panel | |
| =========================================== */ | |
| .users-section { | |
| background: linear-gradient(135deg, rgba(5, 5, 15, 0.95), rgba(10, 10, 25, 0.9)); | |
| backdrop-filter: blur(20px); | |
| border-radius: 16px; | |
| border: 1px solid rgba(0, 240, 255, 0.12); | |
| box-shadow: | |
| 0 8px 40px rgba(0, 0, 0, 0.5), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.02); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* Corner bracket decorations */ | |
| [data-theme="dark"] .users-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 15px; | |
| left: 15px; | |
| width: 40px; | |
| height: 40px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.4); | |
| border-top: 2px solid rgba(0, 240, 255, 0.4); | |
| pointer-events: none; | |
| } | |
| [data-theme="dark"] .users-section::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 15px; | |
| right: 15px; | |
| width: 40px; | |
| height: 40px; | |
| border-right: 2px solid rgba(168, 85, 247, 0.4); | |
| border-bottom: 2px solid rgba(168, 85, 247, 0.4); | |
| pointer-events: none; | |
| } | |
| .users-section .section-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.5), rgba(168, 85, 247, 0.3), transparent); | |
| } | |
| [data-theme="light"] .users-section { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9)); | |
| border: 1px solid rgba(79, 124, 130, 0.12); | |
| box-shadow: 0 8px 32px rgba(79, 124, 130, 0.08); | |
| } | |
| [data-theme="light"] .users-section::before, | |
| [data-theme="light"] .users-section::after { | |
| display: none; | |
| } | |
| .users-section .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 22px 28px; | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.1); | |
| background: rgba(0, 240, 255, 0.02); | |
| position: relative; | |
| } | |
| [data-theme="light"] .users-section .section-header { | |
| border-bottom: 1px solid rgba(79, 124, 130, 0.08); | |
| background: rgba(79, 124, 130, 0.02); | |
| } | |
| .users-section .section-header h2 { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-family: var(--admin-font-display); | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| color: #00f0ff; | |
| margin: 0; | |
| text-transform: uppercase; | |
| } | |
| [data-theme="light"] .users-section .section-header h2 { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| text-transform: none; | |
| } | |
| .users-section .section-header h2 svg { | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5)); | |
| } | |
| .user-count { | |
| font-family: var(--admin-font-display); | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| letter-spacing: 0.1em; | |
| color: #00f0ff; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(168, 85, 247, 0.08)); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| padding: 8px 18px; | |
| border-radius: 6px; | |
| box-shadow: 0 0 20px rgba(0, 240, 255, 0.15); | |
| } | |
| /* =========================================== | |
| FILTERS BAR - Command Center Style | |
| =========================================== */ | |
| .filters-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 16px 24px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.08); | |
| flex-wrap: wrap; | |
| } | |
| [data-theme="light"] .filters-bar { | |
| background: rgba(0, 0, 0, 0.02); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.06); | |
| } | |
| .search-box { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex: 1; | |
| min-width: 250px; | |
| max-width: 400px; | |
| padding: 10px 16px; | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| border-radius: 8px; | |
| transition: border-color 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| [data-theme="light"] .search-box { | |
| background: #f8fafc; | |
| border: 1px solid #e2e8f0; | |
| } | |
| .search-box:focus-within { | |
| border-color: #00f0ff; | |
| box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.15), 0 0 20px rgba(0, 240, 255, 0.1); | |
| } | |
| .search-box svg { | |
| color: rgba(0, 240, 255, 0.5); | |
| flex-shrink: 0; | |
| } | |
| .search-box input { | |
| flex: 1; | |
| border: none; | |
| background: none; | |
| font-family: var(--admin-font); | |
| font-size: 0.9rem; | |
| color: #e0e7ff; | |
| outline: none; | |
| } | |
| [data-theme="light"] .search-box input { | |
| color: #191970; | |
| } | |
| .search-box input::placeholder { | |
| color: rgba(255, 255, 255, 0.3); | |
| } | |
| .clear-search { | |
| background: none; | |
| border: none; | |
| padding: 4px; | |
| color: #6b7280; | |
| cursor: pointer; | |
| opacity: 0.7; | |
| } | |
| .clear-search:hover { | |
| opacity: 1; | |
| color: #e0e7ff; | |
| } | |
| .filter-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: #9ca3af; | |
| } | |
| .filter-group select { | |
| padding: 10px 16px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.05); | |
| color: #e0e7ff; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| [data-theme="light"] .filter-group select { | |
| background: #f8fafc; | |
| border: 1px solid #e2e8f0; | |
| color: #191970; | |
| } | |
| .filter-group select:focus { | |
| border-color: #00f0ff; | |
| } | |
| /* =========================================== | |
| ERROR BANNER | |
| =========================================== */ | |
| .admin-main .error-banner { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px 24px; | |
| background: rgba(239, 68, 68, 0.15); | |
| border-bottom: 1px solid rgba(239, 68, 68, 0.3); | |
| color: #f87171; | |
| } | |
| .admin-main .error-banner button { | |
| margin-left: auto; | |
| padding: 6px 16px; | |
| background: #dc2626; | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| } | |
| .admin-main .error-banner button:hover { | |
| background: #b91c1c; | |
| } | |
| /* =========================================== | |
| LOADING STATE | |
| =========================================== */ | |
| .loading-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| padding: 60px 24px; | |
| color: #9ca3af; | |
| } | |
| .loading-state .spin { | |
| animation: spin 1s linear infinite; | |
| color: #00f0ff; | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* =========================================== | |
| USERS TABLE | |
| =========================================== */ | |
| .users-table-container { | |
| overflow-x: auto; | |
| } | |
| .users-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .users-table th { | |
| text-align: left; | |
| padding: 14px 20px; | |
| font-family: var(--admin-font-display); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: rgba(0, 240, 255, 0.6); | |
| background: rgba(0, 0, 0, 0.3); | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| [data-theme="light"] .users-table th { | |
| background: rgba(0, 0, 0, 0.02); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.06); | |
| color: #7272a8; | |
| } | |
| .users-table td { | |
| padding: 16px 20px; | |
| font-family: var(--admin-font); | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.85); | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.05); | |
| } | |
| [data-theme="light"] .users-table td { | |
| color: #191970; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.04); | |
| } | |
| [data-theme="dark"] .users-table tr:hover td { | |
| background: rgba(0, 240, 255, 0.05); | |
| } | |
| .users-table tr.inactive td { | |
| opacity: 0.5; | |
| } | |
| /* User Cell */ | |
| .user-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .user-avatar { | |
| width: 42px; | |
| height: 42px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 10px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(168, 85, 247, 0.2)); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| color: #00f0ff; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| flex-shrink: 0; | |
| } | |
| .user-avatar.large { | |
| width: 64px; | |
| height: 64px; | |
| font-size: 1.5rem; | |
| border-radius: 14px; | |
| } | |
| .user-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .user-name { | |
| font-weight: 600; | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| [data-theme="light"] .user-name { | |
| color: #191970; | |
| } | |
| .user-email { | |
| font-size: 0.8rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| } | |
| /* Status Badge */ | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 6px 12px; | |
| border-radius: 6px; | |
| font-family: var(--admin-font); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| [data-theme="dark"] .status-badge.active { | |
| background: rgba(0, 255, 136, 0.1); | |
| border: 1px solid rgba(0, 255, 136, 0.3); | |
| color: #00ff88; | |
| } | |
| [data-theme="dark"] .status-badge.inactive { | |
| background: rgba(255, 51, 102, 0.1); | |
| border: 1px solid rgba(255, 51, 102, 0.3); | |
| color: #ff3366; | |
| } | |
| .status-badge.active { | |
| background: rgba(34, 197, 94, 0.15); | |
| color: #4ade80; | |
| } | |
| .status-badge.inactive { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: #f87171; | |
| } | |
| [data-theme="light"] .status-badge.active { | |
| color: #16a34a; | |
| } | |
| [data-theme="light"] .status-badge.inactive { | |
| color: #dc2626; | |
| } | |
| /* Role Badge */ | |
| .role-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 6px 12px; | |
| border-radius: 6px; | |
| font-family: var(--admin-font); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .role-badge.user { | |
| background: rgba(100, 116, 139, 0.1); | |
| border: 1px solid rgba(100, 116, 139, 0.2); | |
| color: #94a3b8; | |
| } | |
| [data-theme="dark"] .role-badge.admin { | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1)); | |
| border: 1px solid rgba(251, 191, 36, 0.3); | |
| color: #fbbf24; | |
| box-shadow: 0 0 15px rgba(251, 191, 36, 0.1); | |
| } | |
| .role-badge.admin { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(168, 85, 247, 0.12)); | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .role-badge.admin { | |
| color: #d000d0; | |
| } | |
| .interview-count { | |
| font-family: var(--admin-font-display); | |
| font-weight: 700; | |
| color: rgba(0, 240, 255, 0.8); | |
| } | |
| [data-theme="light"] .interview-count { | |
| color: #191970; | |
| } | |
| .date-cell { | |
| font-size: 0.8rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| } | |
| /* =========================================== | |
| ACTIONS MENU - Command Center | |
| =========================================== */ | |
| .actions-cell { | |
| width: 60px; | |
| } | |
| .action-menu { | |
| position: relative; | |
| } | |
| .action-trigger { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 8px; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| color: rgba(0, 240, 255, 0.5); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .action-trigger:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .action-trigger:hover { | |
| background: rgba(0, 0, 0, 0.05); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| color: #191970; | |
| } | |
| .action-dropdown { | |
| position: absolute; | |
| top: calc(100% + 6px); | |
| right: 0; | |
| min-width: 200px; | |
| padding: 10px; | |
| border-radius: 14px; | |
| background: linear-gradient(135deg, rgba(5, 5, 20, 0.98), rgba(10, 15, 30, 0.95)); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| box-shadow: | |
| 0 12px 40px rgba(0, 0, 0, 0.6), | |
| 0 0 30px rgba(0, 240, 255, 0.1), | |
| inset 0 1px 0 rgba(0, 240, 255, 0.08); | |
| z-index: 100; | |
| animation: dropdownSlide 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| /* Top glow accent line */ | |
| .action-dropdown::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 20%; | |
| right: 20%; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.6), transparent); | |
| } | |
| [data-theme="light"] .action-dropdown { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)); | |
| border: 1px solid rgba(79, 124, 130, 0.15); | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); | |
| } | |
| [data-theme="light"] .action-dropdown::before { | |
| display: none; | |
| } | |
| @keyframes dropdownSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .action-dropdown button { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| width: 100%; | |
| padding: 12px 14px; | |
| border: none; | |
| background: transparent; | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| color: rgba(255, 255, 255, 0.85); | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| text-align: left; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .action-dropdown button svg { | |
| transition: transform 0.2s ease, color 0.2s ease; | |
| } | |
| [data-theme="dark"] .action-dropdown button:hover { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(168, 85, 247, 0.08)); | |
| color: #00f0ff; | |
| } | |
| [data-theme="dark"] .action-dropdown button:hover svg { | |
| transform: scale(1.1); | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .action-dropdown button { | |
| color: #191970; | |
| } | |
| [data-theme="light"] .action-dropdown button:hover { | |
| background: rgba(79, 124, 130, 0.08); | |
| color: #d000d0; | |
| } | |
| .action-dropdown button.danger { | |
| color: #ff6b8a; | |
| } | |
| [data-theme="dark"] .action-dropdown button.danger:hover { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.15), rgba(239, 68, 68, 0.1)); | |
| color: #ff3366; | |
| } | |
| [data-theme="light"] .action-dropdown button.danger { | |
| color: #dc2626; | |
| } | |
| [data-theme="light"] .action-dropdown button.danger:hover { | |
| background: rgba(239, 68, 68, 0.08); | |
| } | |
| .action-dropdown hr { | |
| border: none; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.15), transparent); | |
| margin: 8px 0; | |
| } | |
| [data-theme="light"] .action-dropdown hr { | |
| background: rgba(0, 0, 0, 0.06); | |
| } | |
| /* =========================================== | |
| PAGINATION | |
| =========================================== */ | |
| .pagination { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 18px; | |
| padding: 22px; | |
| border-top: 1px solid rgba(0, 240, 255, 0.08); | |
| background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%); | |
| } | |
| [data-theme="light"] .pagination { | |
| border-top: 1px solid rgba(79, 124, 130, 0.08); | |
| background: transparent; | |
| } | |
| .pagination button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 42px; | |
| height: 42px; | |
| border-radius: 10px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| color: rgba(0, 240, 255, 0.6); | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="light"] .pagination button { | |
| background: #f8fafc; | |
| border: 1px solid #e2e8f0; | |
| color: #191970; | |
| } | |
| [data-theme="dark"] .pagination button:hover:not(:disabled) { | |
| background: rgba(0, 240, 255, 0.15); | |
| border-color: rgba(0, 240, 255, 0.5); | |
| color: #00f0ff; | |
| box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| [data-theme="light"] .pagination button:hover:not(:disabled) { | |
| background: rgba(79, 124, 130, 0.1); | |
| border-color: #d000d0; | |
| color: #d000d0; | |
| } | |
| .pagination button:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| } | |
| .page-info { | |
| font-family: var(--admin-font-display); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| color: rgba(0, 240, 255, 0.5); | |
| } | |
| [data-theme="light"] .page-info { | |
| color: #7272a8; | |
| font-family: var(--admin-font); | |
| } | |
| /* =========================================== | |
| MODALS | |
| =========================================== */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(0, 0, 10, 0.92), rgba(5, 5, 20, 0.88)); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| padding: 24px; | |
| animation: modalOverlayFade 0.25s ease-out; | |
| } | |
| /* Matrix grid effect on overlay */ | |
| [data-theme="dark"] .modal-overlay::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| pointer-events: none; | |
| opacity: 0.5; | |
| } | |
| [data-theme="light"] .modal-overlay { | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(8px); | |
| } | |
| [data-theme="light"] .modal-overlay::before { | |
| display: none; | |
| } | |
| @keyframes modalOverlayFade { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .modal-content { | |
| width: 100%; | |
| max-width: 580px; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| background: linear-gradient(145deg, rgba(8, 10, 25, 0.98), rgba(12, 15, 35, 0.95)); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| border-radius: 20px; | |
| box-shadow: | |
| 0 30px 60px rgba(0, 0, 0, 0.6), | |
| 0 0 50px rgba(0, 240, 255, 0.08), | |
| inset 0 1px 0 rgba(0, 240, 255, 0.1); | |
| animation: modalSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Corner accents for modal */ | |
| [data-theme="dark"] .modal-content::before { | |
| content: ''; | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| width: 30px; | |
| height: 30px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.4); | |
| border-top: 2px solid rgba(0, 240, 255, 0.4); | |
| pointer-events: none; | |
| } | |
| [data-theme="dark"] .modal-content::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 10px; | |
| right: 10px; | |
| width: 30px; | |
| height: 30px; | |
| border-right: 2px solid rgba(168, 85, 247, 0.4); | |
| border-bottom: 2px solid rgba(168, 85, 247, 0.4); | |
| pointer-events: none; | |
| } | |
| [data-theme="light"] .modal-content { | |
| background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)); | |
| border: 1px solid rgba(79, 124, 130, 0.15); | |
| box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15); | |
| } | |
| [data-theme="light"] .modal-content::before, | |
| [data-theme="light"] .modal-content::after { | |
| display: none; | |
| } | |
| @keyframes modalSlideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal-content.confirm-modal { | |
| max-width: 440px; | |
| } | |
| .modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 22px 28px; | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.1); | |
| background: linear-gradient(180deg, rgba(0, 240, 255, 0.03) 0%, transparent 100%); | |
| position: relative; | |
| } | |
| /* Neon accent line at bottom of header */ | |
| .modal-header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.5), rgba(168, 85, 247, 0.3), transparent); | |
| } | |
| [data-theme="light"] .modal-header { | |
| border-bottom: 1px solid rgba(79, 124, 130, 0.1); | |
| background: rgba(79, 124, 130, 0.02); | |
| } | |
| [data-theme="light"] .modal-header::after { | |
| display: none; | |
| } | |
| .modal-header h3 { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| letter-spacing: 0.03em; | |
| color: #00f0ff; | |
| margin: 0; | |
| text-transform: uppercase; | |
| } | |
| [data-theme="light"] .modal-header h3 { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| text-transform: none; | |
| } | |
| .modal-header.danger { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| background: linear-gradient(180deg, rgba(255, 51, 102, 0.1) 0%, transparent 100%); | |
| border-bottom-color: rgba(255, 51, 102, 0.2); | |
| } | |
| .modal-header.danger::after { | |
| background: linear-gradient(90deg, transparent, rgba(255, 51, 102, 0.6), transparent); | |
| } | |
| .modal-header.danger h3 { | |
| color: #ff6b8a; | |
| text-shadow: 0 0 15px rgba(255, 51, 102, 0.3); | |
| } | |
| [data-theme="light"] .modal-header.danger { | |
| background: rgba(239, 68, 68, 0.06); | |
| border-bottom-color: rgba(239, 68, 68, 0.15); | |
| } | |
| [data-theme="light"] .modal-header.danger h3 { | |
| color: #dc2626; | |
| text-shadow: none; | |
| } | |
| .modal-close { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 10px; | |
| border: 1px solid transparent; | |
| background: transparent; | |
| color: rgba(255, 255, 255, 0.4); | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="dark"] .modal-close:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| color: #00f0ff; | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); | |
| } | |
| [data-theme="light"] .modal-close { | |
| color: #9ca3af; | |
| } | |
| [data-theme="light"] .modal-close:hover { | |
| background: rgba(0, 0, 0, 0.05); | |
| color: #191970; | |
| } | |
| .modal-body { | |
| padding: 28px; | |
| position: relative; | |
| } | |
| /* User Detail Modal */ | |
| .user-detail-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| margin-bottom: 28px; | |
| } | |
| .user-detail-header h4 { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| margin: 0; | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .user-detail-header h4 { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| } | |
| .user-detail-header p { | |
| font-size: 0.9rem; | |
| margin: 6px 0 0; | |
| color: rgba(255, 255, 255, 0.45); | |
| } | |
| .detail-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 18px; | |
| margin-bottom: 28px; | |
| } | |
| .detail-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 14px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.08); | |
| border-radius: 10px; | |
| transition: all 0.2s ease; | |
| } | |
| .detail-item:hover { | |
| border-color: rgba(0, 240, 255, 0.2); | |
| background: rgba(0, 240, 255, 0.03); | |
| } | |
| [data-theme="light"] .detail-item { | |
| background: rgba(79, 124, 130, 0.03); | |
| border: 1px solid rgba(79, 124, 130, 0.1); | |
| } | |
| .detail-item .label { | |
| font-family: var(--admin-font-display); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: rgba(0, 240, 255, 0.5); | |
| } | |
| [data-theme="light"] .detail-item .label { | |
| color: #7272a8; | |
| } | |
| .detail-item .value { | |
| font-family: var(--admin-font); | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| [data-theme="light"] .detail-item .value { | |
| color: #191970; | |
| } | |
| /* Recent Interviews */ | |
| .recent-interviews h5 { | |
| font-family: var(--admin-font-display); | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: rgba(0, 240, 255, 0.6); | |
| margin-bottom: 14px; | |
| } | |
| [data-theme="light"] .recent-interviews h5 { | |
| color: #7272a8; | |
| font-family: var(--admin-font); | |
| text-transform: none; | |
| } | |
| .interview-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .interview-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 18px; | |
| border-radius: 12px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.06); | |
| transition: all 0.2s ease; | |
| } | |
| .interview-item:hover { | |
| border-color: rgba(0, 240, 255, 0.15); | |
| background: rgba(0, 240, 255, 0.03); | |
| } | |
| [data-theme="light"] .interview-item { | |
| background: rgba(79, 124, 130, 0.03); | |
| border: 1px solid rgba(79, 124, 130, 0.08); | |
| } | |
| .interview-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .interview-info .role { | |
| font-weight: 600; | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| [data-theme="light"] .interview-info .role { | |
| color: #191970; | |
| } | |
| .interview-info .date { | |
| font-size: 0.8rem; | |
| color: #9ca3af; | |
| } | |
| .interview-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .status-tag { | |
| padding: 4px 10px; | |
| border-radius: 12px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| } | |
| .status-tag.completed { | |
| background: rgba(34, 197, 94, 0.15); | |
| color: #4ade80; | |
| } | |
| [data-theme="light"] .status-tag.completed { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: #16a34a; | |
| } | |
| .status-tag.in_progress { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: #fbbf24; | |
| } | |
| [data-theme="light"] .status-tag.in_progress { | |
| background: rgba(245, 158, 11, 0.1); | |
| color: #d97706; | |
| } | |
| .interview-meta .score { | |
| font-weight: 600; | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .interview-meta .score { | |
| color: #d000d0; | |
| } | |
| /* Delete Confirm Modal */ | |
| .user-preview { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 18px; | |
| border-radius: 12px; | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)); | |
| border: 1px solid rgba(255, 51, 102, 0.15); | |
| margin: 18px 0; | |
| } | |
| [data-theme="dark"] .user-preview { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(255, 51, 102, 0.05)); | |
| } | |
| [data-theme="light"] .user-preview { | |
| background: rgba(239, 68, 68, 0.05); | |
| border-color: rgba(239, 68, 68, 0.15); | |
| } | |
| .user-preview strong { | |
| font-family: var(--admin-font); | |
| font-weight: 600; | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| [data-theme="light"] .user-preview strong { | |
| color: #191970; | |
| } | |
| .user-preview span { | |
| font-size: 0.88rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .modal-body .warning { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| color: #ff6b8a; | |
| margin-top: 18px; | |
| padding: 12px 14px; | |
| background: rgba(255, 51, 102, 0.08); | |
| border: 1px solid rgba(255, 51, 102, 0.2); | |
| border-radius: 10px; | |
| } | |
| [data-theme="light"] .modal-body .warning { | |
| color: #dc2626; | |
| background: rgba(239, 68, 68, 0.06); | |
| border-color: rgba(239, 68, 68, 0.15); | |
| } | |
| .modal-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 14px; | |
| padding: 20px 28px; | |
| border-top: 1px solid rgba(0, 240, 255, 0.08); | |
| background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%); | |
| } | |
| [data-theme="light"] .modal-actions { | |
| border-top: 1px solid rgba(79, 124, 130, 0.1); | |
| background: transparent; | |
| } | |
| .btn-danger { | |
| background: linear-gradient(135deg, #ff3366, #dc2626); | |
| color: white; | |
| border: 1px solid rgba(255, 51, 102, 0.5); | |
| font-family: var(--admin-font); | |
| font-weight: 600; | |
| padding: 12px 24px; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 15px rgba(255, 51, 102, 0.25); | |
| } | |
| .btn-danger:hover { | |
| background: linear-gradient(135deg, #dc2626, #b91c1c); | |
| box-shadow: 0 6px 25px rgba(255, 51, 102, 0.35); | |
| transform: translateY(-2px); | |
| } | |
| .btn-danger:active { | |
| transform: translateY(0); | |
| } | |
| /* =========================================== | |
| RESPONSIVE | |
| =========================================== */ | |
| @media (max-width: 1024px) { | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .detail-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .admin-topbar { | |
| padding: 12px 16px; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .admin-topbar-left { | |
| gap: 8px; | |
| } | |
| .admin-logo-text { | |
| font-size: 1rem; | |
| } | |
| .admin-topbar-right { | |
| gap: 8px; | |
| } | |
| .admin-user-info { | |
| padding: 6px 12px; | |
| font-size: 0.8rem; | |
| } | |
| .admin-topbar-btn { | |
| padding: 8px 12px; | |
| } | |
| .admin-topbar-btn span { | |
| display: none; | |
| } | |
| .admin-main { | |
| padding: 16px; | |
| } | |
| .admin-header .header-content { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .filters-bar { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .search-box { | |
| max-width: none; | |
| } | |
| .filter-group { | |
| width: 100%; | |
| } | |
| .filter-group select { | |
| flex: 1; | |
| } | |
| .users-table th, | |
| .users-table td { | |
| padding: 12px; | |
| } | |
| .users-table .date-cell { | |
| display: none; | |
| } | |
| .admin-sidebar { | |
| display: none; | |
| } | |
| .admin-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* =========================================== | |
| SIDEBAR NAVIGATION - Premium Glowing | |
| =========================================== */ | |
| .admin-layout { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| min-height: calc(100vh - 70px); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .admin-sidebar { | |
| background: linear-gradient(180deg, rgba(2, 2, 10, 0.98) 0%, rgba(5, 5, 18, 0.99) 100%); | |
| border-right: 1px solid rgba(0, 240, 255, 0.1); | |
| padding: 28px 16px; | |
| backdrop-filter: blur(20px); | |
| position: relative; | |
| overflow: hidden; | |
| isolation: isolate; | |
| } | |
| /* Animated edge glow for sidebar */ | |
| [data-theme="dark"] .admin-sidebar::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 2px; | |
| height: 100%; | |
| background: linear-gradient(180deg, | |
| transparent 0%, | |
| rgba(0, 240, 255, 0.6) 20%, | |
| rgba(168, 85, 247, 0.8) 50%, | |
| rgba(0, 240, 255, 0.6) 80%, | |
| transparent 100%); | |
| animation: sidebarEdgeGlow 4s ease-in-out infinite; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| @keyframes sidebarEdgeGlow { | |
| 0%, 100% { opacity: 0.5; } | |
| 50% { opacity: 1; } | |
| } | |
| /* Subtle corner accents */ | |
| [data-theme="dark"] .admin-sidebar::after { | |
| content: ''; | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| width: 60px; | |
| height: 60px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.3); | |
| border-top: 2px solid rgba(0, 240, 255, 0.3); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| [data-theme="light"] .admin-sidebar { | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%); | |
| border-right-color: rgba(79, 124, 130, 0.12); | |
| } | |
| [data-theme="light"] .admin-sidebar::before { | |
| background: linear-gradient(180deg, transparent, rgba(79, 124, 130, 0.3), transparent); | |
| animation: none; | |
| } | |
| [data-theme="light"] .admin-sidebar::after { | |
| display: none; | |
| } | |
| .admin-nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .admin-nav .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px 18px; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| color: rgba(255, 255, 255, 0.5); | |
| font-family: var(--admin-font); | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| letter-spacing: 0.03em; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| text-align: left; | |
| width: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .admin-nav .nav-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 3px; | |
| height: 0; | |
| background: linear-gradient(180deg, #00f0ff, #a855f7); | |
| border-radius: 0 4px 4px 0; | |
| transition: height 0.3s ease; | |
| box-shadow: 0 0 10px rgba(0, 240, 255, 0.5); | |
| } | |
| .admin-nav .nav-item:hover { | |
| background: rgba(0, 240, 255, 0.05); | |
| color: rgba(0, 240, 255, 0.9); | |
| border-color: rgba(0, 240, 255, 0.15); | |
| } | |
| .admin-nav .nav-item:hover::before { | |
| height: 50%; | |
| } | |
| .admin-nav .nav-item:hover svg { | |
| filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6)); | |
| } | |
| .admin-nav .nav-item.active { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(168, 85, 247, 0.08)); | |
| color: #00f0ff; | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| box-shadow: | |
| 0 0 25px rgba(0, 240, 255, 0.15), | |
| inset 0 0 20px rgba(0, 240, 255, 0.03); | |
| } | |
| .admin-nav .nav-item.active::before { | |
| height: 70%; | |
| } | |
| .admin-nav .nav-item.active svg { | |
| filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.8)); | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .admin-nav .nav-item { | |
| color: #7272a8; | |
| } | |
| [data-theme="light"] .admin-nav .nav-item:hover { | |
| background: rgba(79, 124, 130, 0.06); | |
| color: #4f46e5; | |
| border-color: rgba(79, 124, 130, 0.12); | |
| } | |
| [data-theme="light"] .admin-nav .nav-item.active { | |
| background: linear-gradient(135deg, rgba(79, 124, 130, 0.12), rgba(147, 177, 181, 0.08)); | |
| color: #d000d0; | |
| border-color: rgba(79, 124, 130, 0.25); | |
| box-shadow: 0 4px 15px rgba(79, 124, 130, 0.1); | |
| } | |
| /* =========================================== | |
| ADMIN PANEL COMPONENTS | |
| =========================================== */ | |
| /* Panel Headers */ | |
| .panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 28px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.1); | |
| position: relative; | |
| } | |
| [data-theme="dark"] .panel-header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 120px; | |
| height: 2px; | |
| background: linear-gradient(90deg, #00f0ff, transparent); | |
| } | |
| [data-theme="light"] .panel-header { | |
| border-bottom-color: rgba(79, 124, 130, 0.12); | |
| } | |
| .panel-header .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .panel-header .header-left h2 { | |
| margin: 0; | |
| font-size: 1.5rem; | |
| color: rgba(255, 255, 255, 0.95); | |
| font-family: var(--admin-font-display); | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| } | |
| [data-theme="dark"] .panel-header .header-left h2 { | |
| background: linear-gradient(135deg, #ffffff 0%, #00f0ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| [data-theme="light"] .panel-header .header-left h2 { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| } | |
| .panel-header .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .auto-refresh-toggle { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.9rem; | |
| color: #9ca3af; | |
| cursor: pointer; | |
| } | |
| .auto-refresh-toggle input { | |
| accent-color: #00f0ff; | |
| } | |
| .refresh-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px 20px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(168, 85, 247, 0.08)); | |
| border: 1px solid rgba(0, 240, 255, 0.25); | |
| border-radius: 12px; | |
| color: #00f0ff; | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .refresh-btn:hover { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(168, 85, 247, 0.12)); | |
| box-shadow: 0 4px 20px rgba(0, 240, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .refresh-btn svg { | |
| transition: transform 0.3s ease; | |
| } | |
| .refresh-btn:hover svg { | |
| transform: rotate(180deg); | |
| } | |
| [data-theme="light"] .refresh-btn { | |
| background: rgba(79, 124, 130, 0.08); | |
| border-color: rgba(79, 124, 130, 0.2); | |
| color: #d000d0; | |
| } | |
| [data-theme="light"] .refresh-btn:hover { | |
| background: rgba(79, 124, 130, 0.12); | |
| } | |
| .last-update { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| } | |
| /* =========================================== | |
| METRICS GRID | |
| =========================================== */ | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 24px; | |
| } | |
| .metric-card { | |
| padding: 24px; | |
| } | |
| .metric-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| margin-bottom: 16px; | |
| } | |
| .metric-icon { | |
| padding: 12px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(168, 85, 247, 0.12)); | |
| border-radius: 12px; | |
| color: #00f0ff; | |
| } | |
| .metric-content h3 { | |
| font-size: 0.9rem; | |
| color: #9ca3af; | |
| margin: 0 0 8px; | |
| font-weight: 500; | |
| } | |
| .metric-value { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 4px; | |
| } | |
| .metric-value .value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: #e0e7ff; | |
| } | |
| [data-theme="light"] .metric-value .value { | |
| color: #191970; | |
| } | |
| .metric-value .unit { | |
| font-size: 1rem; | |
| color: #6b7280; | |
| } | |
| .progress-bar-container { | |
| height: 8px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| margin-top: 12px; | |
| overflow: hidden; | |
| } | |
| [data-theme="light"] .progress-bar-container { | |
| background: rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| } | |
| .metric-description { | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| margin-top: 8px; | |
| } | |
| /* =========================================== | |
| REALTIME STATS | |
| =========================================== */ | |
| .realtime-stats-row { | |
| display: flex; | |
| gap: 28px; | |
| padding: 20px 28px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(168, 85, 247, 0.05)); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| border-radius: 16px; | |
| margin-bottom: 28px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| [data-theme="dark"] .realtime-stats-row::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, | |
| transparent 0%, | |
| rgba(0, 240, 255, 0.6) 20%, | |
| rgba(168, 85, 247, 0.6) 50%, | |
| rgba(0, 240, 255, 0.6) 80%, | |
| transparent 100%); | |
| } | |
| [data-theme="light"] .realtime-stats-row { | |
| background: rgba(79, 124, 130, 0.05); | |
| border-color: rgba(79, 124, 130, 0.12); | |
| } | |
| .realtime-stat { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 18px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| transition: all 0.2s ease; | |
| } | |
| .realtime-stat:hover { | |
| border-color: rgba(0, 240, 255, 0.2); | |
| } | |
| .realtime-stat .stat-icon { | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.4)); | |
| } | |
| .realtime-stat .stat-icon.warning { | |
| color: #fbbf24; | |
| filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4)); | |
| } | |
| .realtime-stat .stat-value { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.95); | |
| } | |
| [data-theme="light"] .realtime-stat .stat-value { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| } | |
| .realtime-stat .stat-label { | |
| font-size: 0.85rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| font-family: var(--admin-font); | |
| letter-spacing: 0.02em; | |
| } | |
| /* =========================================== | |
| DATABASE STATS | |
| =========================================== */ | |
| .database-stats, | |
| .process-info { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 18px; | |
| padding: 24px 28px; | |
| margin-top: 28px; | |
| position: relative; | |
| } | |
| [data-theme="dark"] .database-stats::before, | |
| [data-theme="dark"] .process-info::before { | |
| content: ''; | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; | |
| width: 40px; | |
| height: 40px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.2); | |
| border-top: 2px solid rgba(0, 240, 255, 0.2); | |
| pointer-events: none; | |
| } | |
| [data-theme="light"] .database-stats, | |
| [data-theme="light"] .process-info { | |
| background: rgba(255, 255, 255, 0.8); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .database-stats h3, | |
| .process-info h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-family: var(--admin-font-display); | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: rgba(0, 240, 255, 0.6); | |
| margin: 0 0 20px; | |
| } | |
| [data-theme="light"] .database-stats h3, | |
| [data-theme="light"] .process-info h3 { | |
| color: #7272a8; | |
| font-family: var(--admin-font); | |
| text-transform: none; | |
| } | |
| .table-stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 14px; | |
| } | |
| .table-stat { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 14px 18px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: 12px; | |
| transition: all 0.2s ease; | |
| } | |
| .table-stat:hover { | |
| border-color: rgba(0, 240, 255, 0.15); | |
| background: rgba(0, 240, 255, 0.03); | |
| } | |
| [data-theme="light"] .table-stat { | |
| background: rgba(79, 124, 130, 0.04); | |
| border-color: rgba(79, 124, 130, 0.08); | |
| } | |
| .table-stat .table-name { | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 0.88rem; | |
| font-family: var(--admin-font); | |
| } | |
| .table-stat .table-count { | |
| color: #00f0ff; | |
| font-family: var(--admin-font-display); | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| } | |
| [data-theme="light"] .table-stat .table-count { | |
| color: #d000d0; | |
| font-family: var(--admin-font); | |
| } | |
| .process-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 18px; | |
| } | |
| .process-stat { | |
| text-align: center; | |
| padding: 16px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| } | |
| .process-stat .label { | |
| display: block; | |
| font-size: 0.8rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| margin-bottom: 6px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .process-stat .value { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.95); | |
| } | |
| [data-theme="light"] .process-stat .value { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| } | |
| /* =========================================== | |
| ERROR & API LOGS | |
| =========================================== */ | |
| .error-stats-bar { | |
| display: flex; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .error-stats-bar .stat-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 16px; | |
| border-radius: 10px; | |
| font-size: 0.9rem; | |
| } | |
| .error-stats-bar .stat-item.critical { | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06)); | |
| border: 1px solid rgba(239, 68, 68, 0.25); | |
| color: #f87171; | |
| padding: 12px 18px; | |
| border-radius: 12px; | |
| } | |
| .error-stats-bar .stat-item.error { | |
| background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.06)); | |
| border: 1px solid rgba(249, 115, 22, 0.25); | |
| color: #fb923c; | |
| } | |
| .error-stats-bar .stat-item.warning { | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06)); | |
| border: 1px solid rgba(251, 191, 36, 0.25); | |
| color: #fbbf24; | |
| } | |
| .error-stats-bar .stat-item.info { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(59, 130, 246, 0.06)); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| color: #00f0ff; | |
| } | |
| .filters-bar { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .filters-bar select, | |
| .filters-bar input { | |
| padding: 10px 16px; | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| color: #e0e7ff; | |
| font-size: 0.9rem; | |
| } | |
| [data-theme="light"] .filters-bar select, | |
| [data-theme="light"] .filters-bar input { | |
| background: rgba(255, 255, 255, 0.8); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| color: #191970; | |
| } | |
| .filters-bar input { | |
| min-width: 200px; | |
| } | |
| /* =========================================== | |
| ADMIN TABLE | |
| =========================================== */ | |
| .admin-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .admin-table th, | |
| .admin-table td { | |
| padding: 16px 18px; | |
| text-align: left; | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.06); | |
| } | |
| [data-theme="light"] .admin-table th, | |
| [data-theme="light"] .admin-table td { | |
| border-bottom-color: rgba(79, 124, 130, 0.08); | |
| } | |
| .admin-table th { | |
| font-family: var(--admin-font-display); | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| color: rgba(0, 240, 255, 0.5); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| [data-theme="light"] .admin-table th { | |
| color: #7272a8; | |
| font-family: var(--admin-font); | |
| } | |
| .admin-table td { | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.85); | |
| font-family: var(--admin-font); | |
| } | |
| [data-theme="light"] .admin-table td { | |
| color: #191970; | |
| } | |
| .admin-table tr { | |
| transition: all 0.2s ease; | |
| } | |
| .admin-table tr:hover { | |
| background: rgba(0, 240, 255, 0.03); | |
| } | |
| [data-theme="light"] .admin-table tr:hover { | |
| background: rgba(79, 124, 130, 0.04); | |
| } | |
| .admin-table .mono { | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.82rem; | |
| color: rgba(0, 240, 255, 0.7); | |
| } | |
| [data-theme="light"] .admin-table .mono { | |
| color: #d000d0; | |
| } | |
| .admin-table .message-cell { | |
| max-width: 200px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .admin-table .endpoint-cell { | |
| max-width: 250px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .admin-table .actions-cell { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .icon-btn { | |
| padding: 10px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 10px; | |
| color: rgba(0, 240, 255, 0.6); | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .icon-btn:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| color: #00f0ff; | |
| box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| [data-theme="light"] .icon-btn { | |
| background: rgba(79, 124, 130, 0.05); | |
| border-color: rgba(79, 124, 130, 0.12); | |
| color: #d000d0; | |
| } | |
| [data-theme="light"] .icon-btn:hover { | |
| background: rgba(79, 124, 130, 0.1); | |
| } | |
| /* =========================================== | |
| BADGES | |
| =========================================== */ | |
| .severity-badge, | |
| .status-badge, | |
| .method-badge, | |
| .status-code-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 5px 12px; | |
| border-radius: 8px; | |
| font-family: var(--admin-font); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| border: 1px solid transparent; | |
| } | |
| .response-time { | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.82rem; | |
| color: rgba(0, 240, 255, 0.7); | |
| } | |
| /* =========================================== | |
| STATS CARDS (API Logs) | |
| =========================================== */ | |
| .stats-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 18px; | |
| margin-bottom: 28px; | |
| } | |
| .stats-cards .stat-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| padding: 22px; | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 16px; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stats-cards .stat-card:hover { | |
| border-color: rgba(0, 240, 255, 0.2); | |
| } | |
| [data-theme="light"] .stats-cards .stat-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .stats-cards .stat-card.success svg { | |
| color: #00ff88; | |
| filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.4)); | |
| } | |
| .stats-cards .stat-card.error svg { | |
| color: #ff3366; | |
| filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.4)); | |
| } | |
| .stats-cards .stat-content .stat-value { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.95); | |
| display: block; | |
| } | |
| [data-theme="light"] .stats-cards .stat-content .stat-value { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| } | |
| .stats-cards .stat-content .stat-label { | |
| font-size: 0.82rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| letter-spacing: 0.02em; | |
| } | |
| /* =========================================== | |
| TOP ENDPOINTS | |
| =========================================== */ | |
| .top-endpoints { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 18px; | |
| padding: 24px; | |
| margin-bottom: 28px; | |
| position: relative; | |
| } | |
| [data-theme="dark"] .top-endpoints::before { | |
| content: ''; | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; | |
| width: 35px; | |
| height: 35px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.2); | |
| border-top: 2px solid rgba(0, 240, 255, 0.2); | |
| pointer-events: none; | |
| } | |
| [data-theme="light"] .top-endpoints { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .top-endpoints h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-family: var(--admin-font-display); | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: rgba(0, 240, 255, 0.6); | |
| margin: 0 0 20px; | |
| } | |
| [data-theme="light"] .top-endpoints h3 { | |
| color: #7272a8; | |
| font-family: var(--admin-font); | |
| text-transform: none; | |
| } | |
| .endpoints-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .endpoint-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 12px 16px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| border-radius: 12px; | |
| transition: all 0.2s ease; | |
| } | |
| .endpoint-item:hover { | |
| border-color: rgba(0, 240, 255, 0.12); | |
| background: rgba(0, 240, 255, 0.02); | |
| } | |
| [data-theme="light"] .endpoint-item { | |
| background: rgba(79, 124, 130, 0.04); | |
| border-color: rgba(79, 124, 130, 0.06); | |
| } | |
| .endpoint-item .rank { | |
| font-family: var(--admin-font-display); | |
| font-weight: 700; | |
| color: #00f0ff; | |
| min-width: 32px; | |
| text-shadow: 0 0 10px rgba(0, 240, 255, 0.4); | |
| } | |
| .endpoint-item .endpoint-path { | |
| flex: 1; | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.82rem; | |
| color: rgba(255, 255, 255, 0.85); | |
| } | |
| [data-theme="light"] .endpoint-item .endpoint-path { | |
| color: #191970; | |
| } | |
| .endpoint-item .endpoint-count { | |
| font-family: var(--admin-font); | |
| font-size: 0.85rem; | |
| color: rgba(168, 85, 247, 0.8); | |
| font-weight: 600; | |
| } | |
| /* =========================================== | |
| SETTINGS PANEL | |
| =========================================== */ | |
| .settings-section { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 18px; | |
| padding: 28px; | |
| margin-bottom: 28px; | |
| position: relative; | |
| } | |
| [data-theme="dark"] .settings-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; | |
| width: 40px; | |
| height: 40px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.2); | |
| border-top: 2px solid rgba(0, 240, 255, 0.2); | |
| pointer-events: none; | |
| } | |
| [data-theme="light"] .settings-section { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .settings-section .section-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| margin-bottom: 24px; | |
| padding-bottom: 18px; | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.1); | |
| position: relative; | |
| } | |
| [data-theme="dark"] .settings-section .section-header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 100px; | |
| height: 2px; | |
| background: linear-gradient(90deg, #00f0ff, transparent); | |
| } | |
| [data-theme="light"] .settings-section .section-header { | |
| border-bottom-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .settings-section .section-header h2 { | |
| margin: 0; | |
| font-family: var(--admin-font-display); | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| color: rgba(255, 255, 255, 0.95); | |
| } | |
| [data-theme="dark"] .settings-section .section-header h2 { | |
| background: linear-gradient(135deg, #ffffff 0%, #00f0ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| [data-theme="light"] .settings-section .section-header h2 { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| } | |
| .maintenance-status { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 22px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: 14px; | |
| margin-bottom: 22px; | |
| transition: all 0.2s ease; | |
| } | |
| .maintenance-status.active { | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05)); | |
| border: 1px solid rgba(251, 191, 36, 0.3); | |
| box-shadow: 0 0 30px rgba(251, 191, 36, 0.1); | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| } | |
| .status-indicator svg.active { | |
| color: #fbbf24; | |
| filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5)); | |
| } | |
| .status-text .status-label { | |
| display: block; | |
| font-family: var(--admin-font); | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.95); | |
| margin-bottom: 5px; | |
| } | |
| [data-theme="light"] .status-text .status-label { | |
| color: #191970; | |
| } | |
| .status-text p { | |
| margin: 0; | |
| font-size: 0.88rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .toggle-btn { | |
| padding: 14px 26px; | |
| border: 1px solid transparent; | |
| border-radius: 12px; | |
| font-family: var(--admin-font); | |
| font-size: 0.92rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .toggle-btn.success { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.08)); | |
| border-color: rgba(0, 255, 136, 0.3); | |
| color: #00ff88; | |
| } | |
| .toggle-btn.success:hover { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 255, 136, 0.12)); | |
| box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .toggle-btn.danger { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.15), rgba(255, 51, 102, 0.08)); | |
| border-color: rgba(255, 51, 102, 0.3); | |
| color: #ff3366; | |
| } | |
| .toggle-btn.danger:hover { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.25), rgba(255, 51, 102, 0.12)); | |
| box-shadow: 0 4px 20px rgba(255, 51, 102, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .maintenance-message-editor { | |
| margin-top: 20px; | |
| } | |
| .maintenance-message-editor label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.9rem; | |
| color: #9ca3af; | |
| margin-bottom: 8px; | |
| } | |
| .maintenance-message-editor textarea { | |
| width: 100%; | |
| padding: 14px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| color: #e0e7ff; | |
| font-size: 0.95rem; | |
| resize: vertical; | |
| } | |
| [data-theme="light"] .maintenance-message-editor textarea { | |
| background: rgba(0, 0, 0, 0.05); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| color: #191970; | |
| } | |
| .save-message-btn, | |
| .save-limits-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 14px; | |
| padding: 14px 24px; | |
| background: linear-gradient(135deg, #00f0ff, #a855f7); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| border-radius: 12px; | |
| color: #0a0a0f; | |
| font-family: var(--admin-font); | |
| font-size: 0.92rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 20px rgba(0, 240, 255, 0.25); | |
| } | |
| .save-message-btn:hover:not(:disabled), | |
| .save-limits-btn:hover:not(:disabled) { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 30px rgba(0, 240, 255, 0.35); | |
| } | |
| .save-message-btn:active:not(:disabled), | |
| .save-limits-btn:active:not(:disabled) { | |
| transform: translateY(-1px); | |
| } | |
| .save-message-btn:disabled, | |
| .save-limits-btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| background: linear-gradient(135deg, #6b7280, #9ca3af); | |
| box-shadow: none; | |
| } | |
| .rate-limits-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .limit-item label { | |
| display: block; | |
| font-size: 0.9rem; | |
| color: #9ca3af; | |
| margin-bottom: 8px; | |
| } | |
| .limit-item input { | |
| width: 100%; | |
| padding: 12px 16px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| color: #e0e7ff; | |
| font-size: 1rem; | |
| } | |
| [data-theme="light"] .limit-item input { | |
| background: rgba(0, 0, 0, 0.05); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| color: #191970; | |
| } | |
| /* =========================================== | |
| INTEGRATIONS PANEL | |
| =========================================== */ | |
| .integrations-stats { | |
| display: flex; | |
| gap: 28px; | |
| margin-bottom: 28px; | |
| } | |
| .integrations-stats .stat { | |
| text-align: center; | |
| padding: 18px 28px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 14px; | |
| transition: all 0.2s ease; | |
| } | |
| .integrations-stats .stat:hover { | |
| border-color: rgba(0, 240, 255, 0.2); | |
| } | |
| .integrations-stats .stat-value { | |
| display: block; | |
| font-family: var(--admin-font-display); | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| color: #00f0ff; | |
| text-shadow: 0 0 20px rgba(0, 240, 255, 0.3); | |
| } | |
| [data-theme="light"] .integrations-stats .stat-value { | |
| color: #d000d0; | |
| text-shadow: none; | |
| font-family: var(--admin-font); | |
| } | |
| .integrations-stats .stat-label { | |
| font-size: 0.82rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-top: 6px; | |
| } | |
| .integrations-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 22px; | |
| } | |
| .integration-card { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 18px; | |
| padding: 26px; | |
| transition: all 0.25s ease; | |
| position: relative; | |
| } | |
| .integration-card:hover { | |
| border-color: rgba(0, 240, 255, 0.2); | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| [data-theme="light"] .integration-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .integration-card.disabled { | |
| opacity: 0.5; | |
| filter: grayscale(30%); | |
| } | |
| .integration-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 18px; | |
| margin-bottom: 18px; | |
| } | |
| .integration-icon { | |
| padding: 16px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(168, 85, 247, 0.12)); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| border-radius: 14px; | |
| color: #00f0ff; | |
| } | |
| .integration-info { | |
| flex: 1; | |
| } | |
| .integration-info h3 { | |
| margin: 0 0 5px; | |
| font-family: var(--admin-font); | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.95); | |
| } | |
| [data-theme="light"] .integration-info h3 { | |
| color: #191970; | |
| } | |
| .integration-info p { | |
| margin: 0; | |
| font-size: 0.82rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .integration-details { | |
| margin-bottom: 18px; | |
| } | |
| .integration-details .detail-row { | |
| display: flex; | |
| gap: 10px; | |
| padding: 10px 0; | |
| border-bottom: 1px dashed rgba(0, 240, 255, 0.08); | |
| } | |
| .integration-details .label { | |
| color: rgba(255, 255, 255, 0.4); | |
| font-size: 0.82rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| } | |
| .integration-details .value { | |
| color: rgba(0, 240, 255, 0.7); | |
| font-size: 0.82rem; | |
| font-family: var(--admin-font-mono); | |
| } | |
| .integration-edit-form { | |
| padding: 18px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 240, 255, 0.08); | |
| border-radius: 14px; | |
| margin-bottom: 18px; | |
| } | |
| .integration-edit-form .form-row { | |
| margin-bottom: 14px; | |
| } | |
| .integration-edit-form label { | |
| display: block; | |
| font-size: 0.82rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| } | |
| .password-input { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .password-input input { | |
| flex: 1; | |
| padding: 12px 16px; | |
| background: rgba(0, 0, 0, 0.35); | |
| border: 1px solid rgba(0, 240, 255, 0.12); | |
| border-radius: 10px; | |
| color: rgba(255, 255, 255, 0.9); | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.88rem; | |
| transition: border-color 0.2s ease; | |
| } | |
| .password-input input:focus { | |
| outline: none; | |
| border-color: rgba(0, 240, 255, 0.3); | |
| } | |
| [data-theme="light"] .password-input input { | |
| background: rgba(255, 255, 255, 0.6); | |
| border-color: rgba(79, 124, 130, 0.15); | |
| color: #191970; | |
| } | |
| .toggle-visibility { | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 10px; | |
| color: rgba(0, 240, 255, 0.6); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .toggle-visibility:hover { | |
| border-color: rgba(0, 240, 255, 0.25); | |
| color: #00f0ff; | |
| } | |
| .health-result { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 14px 18px; | |
| border-radius: 12px; | |
| margin-bottom: 18px; | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| } | |
| .health-result.healthy { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.12), rgba(0, 255, 136, 0.06)); | |
| border: 1px solid rgba(0, 255, 136, 0.25); | |
| color: #00ff88; | |
| } | |
| .health-result.error { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.12), rgba(255, 51, 102, 0.06)); | |
| border: 1px solid rgba(255, 51, 102, 0.25); | |
| color: #ff3366; | |
| } | |
| .integration-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .integration-actions button { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 18px; | |
| border-radius: 10px; | |
| font-family: var(--admin-font); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| border: 1px solid transparent; | |
| } | |
| .integration-actions .toggle-btn { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.12), rgba(0, 255, 136, 0.06)); | |
| border-color: rgba(0, 255, 136, 0.2); | |
| color: #00ff88; | |
| } | |
| .integration-actions .toggle-btn:hover { | |
| box-shadow: 0 4px 15px rgba(0, 255, 136, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| .integration-actions .toggle-btn.enabled { | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06)); | |
| border-color: rgba(251, 191, 36, 0.2); | |
| color: #fbbf24; | |
| } | |
| .integration-actions .edit-btn { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.05)); | |
| border-color: rgba(0, 240, 255, 0.2); | |
| color: #00f0ff; | |
| } | |
| .integration-actions .edit-btn:hover { | |
| box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| .integration-actions .health-btn { | |
| background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.06)); | |
| border-color: rgba(168, 85, 247, 0.2); | |
| color: #a855f7; | |
| } | |
| .integration-actions .health-btn:hover { | |
| box-shadow: 0 4px 15px rgba(168, 85, 247, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| .integration-actions .save-btn { | |
| background: linear-gradient(135deg, #00ff88, #00cc6a); | |
| border-color: rgba(0, 255, 136, 0.3); | |
| color: #0a0a0f; | |
| font-weight: 700; | |
| } | |
| .integration-actions .save-btn:hover { | |
| box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .integration-actions .cancel-btn { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.12), rgba(255, 51, 102, 0.06)); | |
| border-color: rgba(255, 51, 102, 0.2); | |
| color: #ff3366; | |
| } | |
| .integration-actions .cancel-btn:hover { | |
| box-shadow: 0 4px 15px rgba(255, 51, 102, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| /* =========================================== | |
| USAGE STATS PANEL | |
| =========================================== */ | |
| .usage-stats-panel .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 22px; | |
| margin-bottom: 36px; | |
| } | |
| .usage-stat-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 22px; | |
| padding: 26px; | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 18px; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| } | |
| .usage-stat-card:hover { | |
| border-color: rgba(0, 240, 255, 0.2); | |
| } | |
| [data-theme="dark"] .usage-stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| width: 30px; | |
| height: 30px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.15); | |
| border-top: 2px solid rgba(0, 240, 255, 0.15); | |
| pointer-events: none; | |
| } | |
| [data-theme="light"] .usage-stat-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .usage-stat-card .stat-icon { | |
| padding: 18px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(168, 85, 247, 0.12)); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| border-radius: 16px; | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3)); | |
| } | |
| .usage-stat-card .stat-value { | |
| font-family: var(--admin-font-display); | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.95); | |
| display: block; | |
| } | |
| [data-theme="light"] .usage-stat-card .stat-value { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| } | |
| .usage-stat-card .stat-title { | |
| font-family: var(--admin-font); | |
| font-size: 0.92rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| display: block; | |
| margin-top: 5px; | |
| } | |
| .usage-stat-card .stat-subtitle { | |
| font-family: var(--admin-font); | |
| font-size: 0.82rem; | |
| color: #a855f7; | |
| display: block; | |
| margin-top: 5px; | |
| } | |
| .charts-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 26px; | |
| margin-bottom: 36px; | |
| } | |
| .chart-container { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 18px; | |
| padding: 26px; | |
| position: relative; | |
| } | |
| [data-theme="dark"] .chart-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; | |
| width: 35px; | |
| height: 35px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.15); | |
| border-top: 2px solid rgba(0, 240, 255, 0.15); | |
| pointer-events: none; | |
| } | |
| [data-theme="light"] .chart-container { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .simple-bar-chart h4 { | |
| margin: 0 0 22px; | |
| font-family: var(--admin-font-display); | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: rgba(0, 240, 255, 0.6); | |
| } | |
| [data-theme="light"] .simple-bar-chart h4 { | |
| color: #7272a8; | |
| font-family: var(--admin-font); | |
| text-transform: none; | |
| } | |
| .chart-bars { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| height: 160px; | |
| gap: 10px; | |
| } | |
| .bar-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| height: 100%; | |
| } | |
| .bar { | |
| width: 100%; | |
| max-width: 42px; | |
| background: linear-gradient(180deg, #00f0ff, #a855f7); | |
| border-radius: 6px 6px 0 0; | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: center; | |
| min-height: 4px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); | |
| } | |
| .bar:hover { | |
| box-shadow: 0 0 25px rgba(0, 240, 255, 0.4); | |
| } | |
| .bar-value { | |
| font-family: var(--admin-font); | |
| font-size: 0.72rem; | |
| color: white; | |
| font-weight: 700; | |
| padding: 5px; | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| } | |
| .bar-label { | |
| font-family: var(--admin-font); | |
| font-size: 0.72rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| margin-top: 10px; | |
| text-align: center; | |
| } | |
| .daily-breakdown { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 18px; | |
| padding: 26px; | |
| position: relative; | |
| } | |
| [data-theme="dark"] .daily-breakdown::before { | |
| content: ''; | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; | |
| width: 35px; | |
| height: 35px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.15); | |
| border-top: 2px solid rgba(0, 240, 255, 0.15); | |
| pointer-events: none; | |
| } | |
| [data-theme="light"] .daily-breakdown { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .daily-breakdown h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin: 0 0 22px; | |
| font-family: var(--admin-font-display); | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.95); | |
| } | |
| [data-theme="dark"] .daily-breakdown h3 { | |
| background: linear-gradient(135deg, #ffffff 0%, #00f0ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| [data-theme="light"] .daily-breakdown h3 { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| } | |
| /* =========================================== | |
| BUG REPORTS PANEL | |
| =========================================== */ | |
| .bug-report-modal .report-header-info { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 16px; | |
| } | |
| .bug-report-modal .report-title { | |
| font-size: 1.25rem; | |
| color: #e0e7ff; | |
| margin: 0 0 12px; | |
| } | |
| [data-theme="light"] .bug-report-modal .report-title { | |
| color: #191970; | |
| } | |
| .bug-report-modal .report-meta { | |
| display: flex; | |
| gap: 16px; | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| margin-bottom: 16px; | |
| } | |
| .bug-report-modal .report-meta span { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .bug-report-modal .report-url { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 14px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .bug-report-modal .report-url a { | |
| color: #00f0ff; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| } | |
| .bug-report-modal .report-url a:hover { | |
| text-decoration: underline; | |
| } | |
| .bug-report-modal .report-description { | |
| margin-bottom: 16px; | |
| } | |
| .bug-report-modal .report-description label, | |
| .bug-report-modal .report-browser label { | |
| display: block; | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| margin-bottom: 8px; | |
| } | |
| .bug-report-modal .report-description p { | |
| color: #e0e7ff; | |
| line-height: 1.6; | |
| } | |
| [data-theme="light"] .bug-report-modal .report-description p { | |
| color: #191970; | |
| } | |
| .bug-report-modal .report-browser code { | |
| display: block; | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| color: #9ca3af; | |
| overflow-x: auto; | |
| } | |
| .bug-report-modal .status-selector { | |
| margin-bottom: 16px; | |
| } | |
| .bug-report-modal .status-selector label { | |
| display: block; | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| margin-bottom: 8px; | |
| } | |
| .bug-report-modal .status-selector select { | |
| width: 100%; | |
| padding: 12px 16px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| color: #e0e7ff; | |
| font-size: 0.95rem; | |
| } | |
| [data-theme="light"] .bug-report-modal .status-selector select { | |
| background: rgba(0, 0, 0, 0.05); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| color: #191970; | |
| } | |
| .bug-report-modal .admin-notes label { | |
| display: block; | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| margin-bottom: 8px; | |
| } | |
| .bug-report-modal .admin-notes textarea { | |
| width: 100%; | |
| padding: 14px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| color: #e0e7ff; | |
| font-size: 0.95rem; | |
| resize: vertical; | |
| } | |
| [data-theme="light"] .bug-report-modal .admin-notes textarea { | |
| background: rgba(0, 0, 0, 0.05); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| color: #191970; | |
| } | |
| /* =========================================== | |
| EMPTY STATE & LOADING | |
| =========================================== */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 70px 24px; | |
| color: rgba(255, 255, 255, 0.4); | |
| } | |
| .empty-state svg { | |
| margin-bottom: 18px; | |
| opacity: 0.4; | |
| color: rgba(0, 240, 255, 0.5); | |
| } | |
| .empty-state p { | |
| font-family: var(--admin-font); | |
| font-size: 1.1rem; | |
| letter-spacing: 0.02em; | |
| } | |
| .admin-loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 90px 24px; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .admin-loading svg { | |
| color: #00f0ff; | |
| margin-bottom: 18px; | |
| filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.5)); | |
| } | |
| .admin-error { | |
| text-align: center; | |
| padding: 70px 24px; | |
| color: #ff3366; | |
| } | |
| .admin-error button { | |
| margin-top: 18px; | |
| padding: 12px 24px; | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.15), rgba(255, 51, 102, 0.08)); | |
| border: 1px solid rgba(255, 51, 102, 0.3); | |
| border-radius: 12px; | |
| color: #ff3366; | |
| font-family: var(--admin-font); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| } | |
| .admin-error button:hover { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.25), rgba(255, 51, 102, 0.12)); | |
| box-shadow: 0 4px 20px rgba(255, 51, 102, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| /* =========================================== | |
| ANIMATION | |
| =========================================== */ | |
| .spinning { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* =========================================== | |
| PERIOD SELECTOR | |
| =========================================== */ | |
| .period-selector { | |
| padding: 12px 18px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| border-radius: 12px; | |
| color: rgba(255, 255, 255, 0.9); | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .period-selector:hover { | |
| border-color: rgba(0, 240, 255, 0.3); | |
| } | |
| .period-selector:focus { | |
| outline: none; | |
| border-color: rgba(0, 240, 255, 0.4); | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.1); | |
| } | |
| [data-theme="light"] .period-selector { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-color: rgba(79, 124, 130, 0.15); | |
| color: #191970; | |
| } | |
| /* =========================================== | |
| PREMIUM ADMIN BUTTON OVERRIDES | |
| =========================================== */ | |
| .admin-container .btn-secondary { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(168, 85, 247, 0.08)); | |
| border: 1px solid rgba(0, 240, 255, 0.25); | |
| color: #00f0ff; | |
| border-radius: 14px; | |
| padding: 14px 22px; | |
| font-family: var(--admin-font); | |
| font-weight: 700; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .admin-container .btn-secondary:hover { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(168, 85, 247, 0.12)); | |
| border-color: rgba(0, 240, 255, 0.4); | |
| box-shadow: 0 4px 25px rgba(0, 240, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| [data-theme="light"] .admin-container .btn-secondary { | |
| background: linear-gradient(135deg, rgba(79, 124, 130, 0.1), rgba(147, 177, 181, 0.08)); | |
| border-color: rgba(79, 124, 130, 0.25); | |
| color: #d000d0; | |
| } | |
| .admin-container .btn-primary { | |
| background: linear-gradient(135deg, #00f0ff, #a855f7); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| color: #0a0a0f; | |
| border-radius: 14px; | |
| padding: 14px 26px; | |
| font-family: var(--admin-font); | |
| font-weight: 700; | |
| box-shadow: 0 4px 25px rgba(0, 240, 255, 0.3); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .admin-container .btn-primary:hover { | |
| box-shadow: 0 8px 35px rgba(0, 240, 255, 0.45); | |
| transform: translateY(-3px) scale(1.02); | |
| } | |
| .admin-container .btn-primary:active { | |
| transform: translateY(-1px) scale(1); | |
| } | |
| /* =========================================== | |
| PULSE ANIMATION FOR ACTIVE ELEMENTS | |
| =========================================== */ | |
| @keyframes glowPulse { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 20px rgba(0, 240, 255, 0.2), inset 0 0 20px rgba(0, 240, 255, 0.03); | |
| } | |
| 50% { | |
| box-shadow: 0 0 35px rgba(0, 240, 255, 0.35), inset 0 0 25px rgba(0, 240, 255, 0.05); | |
| } | |
| } | |
| .admin-nav .nav-item.active { | |
| animation: glowPulse 3s ease-in-out infinite; | |
| } | |
| /* =========================================== | |
| SCROLLBAR STYLING | |
| =========================================== */ | |
| .admin-container ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| .admin-container ::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 4px; | |
| } | |
| .admin-container ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, rgba(0, 240, 255, 0.4), rgba(168, 85, 247, 0.3)); | |
| border-radius: 4px; | |
| } | |
| .admin-container ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, rgba(139, 92, 246, 0.7), rgba(236, 72, 153, 0.5)); | |
| } | |
| [data-theme="light"] .admin-container ::-webkit-scrollbar-track { | |
| background: rgba(240, 244, 248, 0.8); | |
| } | |
| [data-theme="light"] .admin-container ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, rgba(79, 124, 130, 0.4), rgba(147, 177, 181, 0.3)); | |
| } | |
| /* =========================================== | |
| CONSOLE PANEL - Terminal Style | |
| =========================================== */ | |
| .console-panel { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)); | |
| border-radius: 20px; | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| overflow: hidden; | |
| box-shadow: | |
| 0 8px 40px rgba(0, 0, 0, 0.5), | |
| inset 0 1px 0 rgba(0, 240, 255, 0.05); | |
| position: relative; | |
| } | |
| [data-theme="dark"] .console-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.5), rgba(168, 85, 247, 0.5), transparent); | |
| } | |
| [data-theme="light"] .console-panel { | |
| background: linear-gradient(135deg, #191970, #191970); | |
| } | |
| .console-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 20px 28px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| .console-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .console-title svg { | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5)); | |
| } | |
| .console-title h2 { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| color: rgba(255, 255, 255, 0.95); | |
| margin: 0; | |
| } | |
| [data-theme="dark"] .console-title h2 { | |
| background: linear-gradient(135deg, #ffffff 0%, #00f0ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .console-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 16px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(168, 85, 247, 0.08)); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| border-radius: 20px; | |
| font-family: var(--admin-font); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| color: #00f0ff; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| animation: statusPulse 2s ease-in-out infinite; | |
| } | |
| .status-dot.active { | |
| background: #00ff88; | |
| box-shadow: 0 0 12px rgba(0, 255, 136, 0.6); | |
| } | |
| .status-dot.paused { | |
| background: #fbbf24; | |
| box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); | |
| animation: none; | |
| } | |
| @keyframes statusPulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.6; | |
| transform: scale(0.9); | |
| } | |
| } | |
| .console-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .console-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 12px; | |
| color: rgba(0, 240, 255, 0.6); | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .console-btn:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| color: #00f0ff; | |
| box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| .console-btn.active { | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08)); | |
| border-color: rgba(251, 191, 36, 0.3); | |
| color: #fbbf24; | |
| } | |
| /* Console Stats Bar */ | |
| .console-stats { | |
| display: flex; | |
| gap: 28px; | |
| padding: 16px 28px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.03), rgba(168, 85, 247, 0.03)); | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.08); | |
| } | |
| .console-stats .stat-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-family: var(--admin-font); | |
| font-size: 0.85rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .console-stats .stat-item svg { | |
| color: rgba(0, 240, 255, 0.5); | |
| } | |
| .console-stats .stat-item strong { | |
| color: rgba(255, 255, 255, 0.9); | |
| font-family: var(--admin-font-display); | |
| } | |
| .console-stats .status-ok { | |
| color: #00ff88; | |
| text-shadow: 0 0 8px rgba(0, 255, 136, 0.4); | |
| } | |
| /* Console Filters */ | |
| .console-filters { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 18px; | |
| padding: 14px 28px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.05); | |
| } | |
| .filter-buttons { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .filter-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| color: #6b7280; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| } | |
| .filter-btn:hover { | |
| background: rgba(0, 240, 255, 0.05); | |
| color: rgba(0, 240, 255, 0.7); | |
| } | |
| .filter-btn.active { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(168, 85, 247, 0.08)); | |
| border-color: rgba(0, 240, 255, 0.25); | |
| color: #00f0ff; | |
| } | |
| .filter-btn.error.active { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.15), rgba(255, 51, 102, 0.08)); | |
| border-color: rgba(255, 51, 102, 0.3); | |
| color: #ff3366; | |
| } | |
| .filter-btn.warning.active { | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08)); | |
| border-color: rgba(251, 191, 36, 0.3); | |
| color: #fbbf24; | |
| } | |
| .filter-btn.success.active { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.08)); | |
| border-color: rgba(0, 255, 136, 0.3); | |
| color: #00ff88; | |
| } | |
| .filter-btn .count { | |
| padding: 3px 8px; | |
| background: rgba(0, 240, 255, 0.15); | |
| border-radius: 6px; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| } | |
| .console-filters .search-box { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 16px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 12px; | |
| min-width: 220px; | |
| transition: border-color 0.2s ease; | |
| } | |
| .console-filters .search-box:focus-within { | |
| border-color: rgba(0, 240, 255, 0.3); | |
| } | |
| .console-filters .search-box svg { | |
| color: rgba(0, 240, 255, 0.5); | |
| } | |
| .console-filters .search-box input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: rgba(255, 255, 255, 0.9); | |
| font-family: var(--admin-font); | |
| font-size: 0.85rem; | |
| outline: none; | |
| } | |
| .console-filters .search-box input::placeholder { | |
| color: rgba(255, 255, 255, 0.3); | |
| } | |
| /* Console Output */ | |
| .console-output { | |
| min-height: 350px; | |
| max-height: 450px; | |
| overflow-y: auto; | |
| padding: 18px; | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.85rem; | |
| line-height: 1.7; | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| .console-output .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 200px; | |
| color: rgba(0, 240, 255, 0.3); | |
| gap: 14px; | |
| } | |
| .log-entry { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| margin-bottom: 5px; | |
| transition: all 0.15s ease; | |
| border-left: 2px solid transparent; | |
| } | |
| .log-entry:hover { | |
| background: rgba(0, 240, 255, 0.03); | |
| border-left-color: rgba(0, 240, 255, 0.3); | |
| } | |
| .log-icon { | |
| display: flex; | |
| align-items: center; | |
| padding-top: 2px; | |
| } | |
| .log-entry.info .log-icon { | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.4)); | |
| } | |
| .log-entry.success .log-icon { | |
| color: #00ff88; | |
| filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.4)); | |
| } | |
| .log-entry.warning .log-icon { | |
| color: #fbbf24; | |
| filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4)); | |
| } | |
| .log-entry.error .log-icon { | |
| color: #ff3366; | |
| filter: drop-shadow(0 0 4px rgba(255, 51, 102, 0.4)); | |
| } | |
| .log-entry.command .log-icon { | |
| color: #a855f7; | |
| filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.4)); | |
| } | |
| .log-time { | |
| color: rgba(255, 255, 255, 0.3); | |
| font-size: 0.72rem; | |
| min-width: 75px; | |
| } | |
| .log-source { | |
| color: #a855f7; | |
| font-size: 0.72rem; | |
| min-width: 65px; | |
| font-weight: 600; | |
| } | |
| .log-message { | |
| flex: 1; | |
| color: rgba(255, 255, 255, 0.85); | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| font-family: inherit; | |
| } | |
| .log-entry.error .log-message { | |
| color: #ff6b8a; | |
| } | |
| .log-entry.warning .log-message { | |
| color: #ffe066; | |
| } | |
| .log-entry.success .log-message { | |
| color: #66ffaa; | |
| } | |
| .log-entry.command .log-message { | |
| color: #c4b5fd; | |
| font-weight: 700; | |
| } | |
| .log-entry.loading { | |
| color: rgba(255, 255, 255, 0.5); | |
| padding: 10px 12px; | |
| } | |
| .log-entry.loading svg { | |
| animation: spin 1s linear infinite; | |
| } | |
| /* Console Input */ | |
| .console-input-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 16px 22px; | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.35)); | |
| border-top: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| .console-input-container .prompt { | |
| color: #00f0ff; | |
| font-family: var(--admin-font-mono); | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); | |
| } | |
| .console-input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: rgba(255, 255, 255, 0.9); | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.95rem; | |
| outline: none; | |
| caret-color: #00f0ff; | |
| } | |
| .console-input::placeholder { | |
| color: #4b5563; | |
| } | |
| .execute-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background: linear-gradient(135deg, #00f0ff, #a855f7); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| border-radius: 12px; | |
| color: #0a0a0f; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 15px rgba(0, 240, 255, 0.25); | |
| } | |
| .execute-btn:hover:not(:disabled) { | |
| transform: scale(1.08); | |
| box-shadow: 0 6px 25px rgba(0, 240, 255, 0.4); | |
| } | |
| .execute-btn:active:not(:disabled) { | |
| transform: scale(1.02); | |
| } | |
| .execute-btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| background: linear-gradient(135deg, #6b7280, #9ca3af); | |
| box-shadow: none; | |
| } | |
| /* Quick Commands */ | |
| .quick-commands { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 22px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.03), rgba(168, 85, 247, 0.03)); | |
| border-top: 1px solid rgba(0, 240, 255, 0.08); | |
| } | |
| .quick-commands .label { | |
| color: rgba(0, 240, 255, 0.5); | |
| font-family: var(--admin-font); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .quick-cmd { | |
| padding: 8px 16px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(168, 85, 247, 0.06)); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| border-radius: 10px; | |
| color: #00f0ff; | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| } | |
| .quick-cmd:hover:not(:disabled) { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(168, 85, 247, 0.1)); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| box-shadow: 0 4px 18px rgba(0, 240, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .quick-cmd:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| /* Console Scrollbar */ | |
| .console-output::-webkit-scrollbar { | |
| width: 7px; | |
| } | |
| .console-output::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.3); | |
| } | |
| .console-output::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, rgba(0, 240, 255, 0.4), rgba(168, 85, 247, 0.3)); | |
| border-radius: 4px; | |
| } | |
| .console-output::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, rgba(0, 240, 255, 0.6), rgba(168, 85, 247, 0.5)); | |
| } | |
| /* =========================================== | |
| HACKER TERMINAL SIDEBAR STYLES | |
| =========================================== */ | |
| .sidebar-section { | |
| padding: 16px 18px 8px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .section-label { | |
| font-family: var(--admin-font-display); | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| color: #00f0ff; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| opacity: 0.6; | |
| position: relative; | |
| display: inline-block; | |
| z-index: 1; | |
| } | |
| [data-theme="dark"] .section-label::before { | |
| content: '//'; | |
| margin-right: 6px; | |
| color: rgba(168, 85, 247, 0.7); | |
| } | |
| .admin-nav .nav-item { | |
| font-family: var(--admin-font); | |
| font-size: 0.85rem; | |
| text-transform: lowercase; | |
| letter-spacing: 0.02em; | |
| border: 1px solid transparent; | |
| position: relative; | |
| } | |
| .admin-nav .nav-item span:first-of-type:not(.nav-shortcut) { | |
| flex: 1; | |
| } | |
| .nav-shortcut { | |
| font-family: var(--admin-font-display); | |
| font-size: 0.6rem; | |
| color: rgba(0, 240, 255, 0.4); | |
| font-weight: 700; | |
| padding: 3px 8px; | |
| background: rgba(0, 240, 255, 0.05); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 4px; | |
| margin-left: auto; | |
| letter-spacing: 0.05em; | |
| } | |
| .admin-nav .nav-item:hover .nav-shortcut { | |
| color: #00f0ff; | |
| background: rgba(0, 240, 255, 0.1); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| } | |
| .admin-nav .nav-item.active .nav-shortcut { | |
| color: #00f0ff; | |
| background: rgba(0, 240, 255, 0.15); | |
| border-color: rgba(0, 240, 255, 0.4); | |
| box-shadow: 0 0 8px rgba(0, 240, 255, 0.2); | |
| } | |
| /* Command Center active indicator */ | |
| .admin-nav .nav-item::before { | |
| background: linear-gradient(180deg, #00f0ff, #a855f7) ; | |
| box-shadow: 0 0 12px rgba(0, 240, 255, 0.6); | |
| } | |
| .admin-nav .nav-item:hover { | |
| background: rgba(0, 240, 255, 0.05); | |
| color: #00f0ff; | |
| border-color: rgba(0, 240, 255, 0.1); | |
| } | |
| .admin-nav .nav-item.active { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(168, 85, 247, 0.05)); | |
| color: #00f0ff; | |
| border: 1px solid rgba(0, 240, 255, 0.25); | |
| box-shadow: | |
| 0 0 20px rgba(0, 240, 255, 0.12), | |
| inset 0 0 30px rgba(0, 240, 255, 0.03); | |
| } | |
| .admin-nav .nav-item:hover svg, | |
| .admin-nav .nav-item.active svg { | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6)); | |
| } | |
| /* Sidebar Footer - System Status */ | |
| .sidebar-footer { | |
| margin-top: auto; | |
| padding: 20px 18px; | |
| border-top: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| .system-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-family: var(--admin-font-display); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| color: #00ff88; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| animation: statusPulse 2s ease-in-out infinite; | |
| position: relative; | |
| } | |
| .status-indicator::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -3px; | |
| border-radius: 50%; | |
| border: 1px solid currentColor; | |
| opacity: 0.3; | |
| animation: statusRing 2s ease-in-out infinite; | |
| } | |
| @keyframes statusRing { | |
| 0%, 100% { transform: scale(1); opacity: 0.3; } | |
| 50% { transform: scale(1.3); opacity: 0; } | |
| } | |
| .status-indicator.online { | |
| background: #00ff88; | |
| box-shadow: 0 0 15px rgba(0, 255, 136, 0.7); | |
| color: #00ff88; | |
| } | |
| .status-indicator.offline { | |
| background: #ff3366; | |
| box-shadow: 0 0 15px rgba(255, 51, 102, 0.7); | |
| color: #ff3366; | |
| } | |
| @keyframes statusPulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.6; } | |
| } | |
| /* =========================================== | |
| PANEL PLACEHOLDER STYLES | |
| =========================================== */ | |
| .panel-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 400px; | |
| padding: 52px; | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 20px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| [data-theme="dark"] .panel-placeholder::before { | |
| content: ''; | |
| position: absolute; | |
| top: 15px; | |
| left: 15px; | |
| width: 50px; | |
| height: 50px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.15); | |
| border-top: 2px solid rgba(0, 240, 255, 0.15); | |
| pointer-events: none; | |
| } | |
| .panel-placeholder svg { | |
| color: #00f0ff; | |
| margin-bottom: 26px; | |
| filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.5)); | |
| } | |
| .panel-placeholder h2 { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| color: rgba(255, 255, 255, 0.95); | |
| margin-bottom: 14px; | |
| text-transform: uppercase; | |
| } | |
| [data-theme="dark"] .panel-placeholder h2 { | |
| background: linear-gradient(135deg, #ffffff 0%, #00f0ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .panel-placeholder p { | |
| color: rgba(255, 255, 255, 0.5); | |
| font-family: var(--admin-font); | |
| font-size: 0.95rem; | |
| max-width: 420px; | |
| line-height: 1.7; | |
| } | |
| .placeholder-stats { | |
| display: flex; | |
| gap: 36px; | |
| margin-top: 36px; | |
| padding-top: 36px; | |
| border-top: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| .placeholder-stats .stat { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .placeholder-stats .stat .value { | |
| font-family: var(--admin-font-display); | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| color: #00f0ff; | |
| text-shadow: 0 0 20px rgba(0, 240, 255, 0.4); | |
| } | |
| .placeholder-stats .stat .label { | |
| font-family: var(--admin-font); | |
| font-size: 0.72rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| } | |
| /* =========================================== | |
| COMMAND CENTER THEME OVERRIDES | |
| =========================================== */ | |
| /* Cyan/Purple Command Center accent colors */ | |
| .admin-sidebar { | |
| background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(5, 5, 5, 0.98) 100%) ; | |
| border-right: 1px solid rgba(0, 240, 255, 0.12) ; | |
| } | |
| .admin-sidebar::before { | |
| background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.4), rgba(168, 85, 247, 0.3), transparent) ; | |
| } | |
| .admin-main { | |
| background: transparent; | |
| } | |
| /* Stats cards with Command Center theme */ | |
| .stat-card { | |
| background: rgba(0, 0, 0, 0.5) ; | |
| border: 1px solid rgba(0, 240, 255, 0.08) ; | |
| } | |
| .stat-card:hover { | |
| border-color: rgba(0, 240, 255, 0.2) ; | |
| box-shadow: 0 0 30px rgba(0, 240, 255, 0.1) ; | |
| } | |
| .stat-card::before { | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.4), transparent) ; | |
| } | |
| /* Users section with Command Center theme */ | |
| .users-section { | |
| background: rgba(0, 0, 0, 0.5) ; | |
| border: 1px solid rgba(0, 240, 255, 0.1) ; | |
| } | |
| .users-section::before { | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.4), transparent) ; | |
| } | |
| /* Header Command Center theme */ | |
| .admin-header h1 { | |
| color: #00f0ff ; | |
| background: linear-gradient(135deg, #ffffff 0%, #00f0ff 100%) ; | |
| -webkit-background-clip: text ; | |
| -webkit-text-fill-color: transparent ; | |
| background-clip: text ; | |
| text-shadow: none; | |
| } | |
| .admin-header .header-icon-wrapper { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(168, 85, 247, 0.12)) ; | |
| border: 1px solid rgba(0, 240, 255, 0.25); | |
| box-shadow: 0 0 25px rgba(0, 240, 255, 0.2) ; | |
| } | |
| .admin-header .header-icon-wrapper svg { | |
| color: #00f0ff; | |
| } | |
| /* Button overrides */ | |
| .admin-container .btn-secondary { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(168, 85, 247, 0.08)) ; | |
| border: 1px solid rgba(0, 240, 255, 0.2) ; | |
| color: #00f0ff ; | |
| } | |
| .admin-container .btn-secondary:hover { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(168, 85, 247, 0.12)) ; | |
| border-color: rgba(0, 240, 255, 0.35) ; | |
| box-shadow: 0 4px 20px rgba(0, 240, 255, 0.2) ; | |
| } | |
| /* Console with Command Center theme */ | |
| .console-panel { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)) ; | |
| border: 1px solid rgba(0, 240, 255, 0.12) ; | |
| } | |
| .console-title svg { | |
| color: #00f0ff ; | |
| filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6)) ; | |
| } | |
| .console-status { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(168, 85, 247, 0.08)) ; | |
| border: 1px solid rgba(0, 240, 255, 0.2) ; | |
| color: #00f0ff ; | |
| } | |
| .quick-cmd { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(168, 85, 247, 0.06)) ; | |
| border: 1px solid rgba(0, 240, 255, 0.15) ; | |
| color: #00f0ff ; | |
| } | |
| .quick-cmd:hover:not(:disabled) { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(168, 85, 247, 0.1)) ; | |
| border-color: rgba(0, 240, 255, 0.3) ; | |
| box-shadow: 0 4px 18px rgba(0, 240, 255, 0.2) ; | |
| } | |
| /* Filter buttons Command Center theme */ | |
| .filter-btn.active { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(168, 85, 247, 0.08)) ; | |
| border-color: rgba(0, 240, 255, 0.25) ; | |
| color: #00f0ff ; | |
| } | |
| /* Execute button Command Center theme */ | |
| .execute-btn { | |
| background: linear-gradient(135deg, #00f0ff, #a855f7) ; | |
| } | |
| .execute-btn:hover:not(:disabled) { | |
| box-shadow: 0 6px 30px rgba(0, 240, 255, 0.45) ; | |
| } | |
| /* =========================================== | |
| LIGHT MODE - PROFESSIONAL WHITE/BLUE THEME | |
| =========================================== */ | |
| [data-theme="light"] .admin-sidebar { | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%) ; | |
| border-right: 1px solid rgba(79, 124, 130, 0.12) ; | |
| } | |
| [data-theme="light"] .admin-sidebar::before { | |
| background: linear-gradient(180deg, transparent, rgba(79, 124, 130, 0.2), transparent) ; | |
| } | |
| [data-theme="light"] .section-label { | |
| color: #d000d0; | |
| } | |
| [data-theme="light"] .admin-nav .nav-item { | |
| color: #7272a8; | |
| font-family: 'Inter', sans-serif; | |
| text-transform: capitalize; | |
| } | |
| [data-theme="light"] .admin-nav .nav-item:hover { | |
| background: rgba(79, 124, 130, 0.06); | |
| color: #d000d0; | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| [data-theme="light"] .admin-nav .nav-item.active { | |
| background: rgba(79, 124, 130, 0.1); | |
| color: #d000d0; | |
| border: 1px solid rgba(79, 124, 130, 0.2); | |
| box-shadow: 0 2px 8px rgba(79, 124, 130, 0.1); | |
| } | |
| [data-theme="light"] .admin-nav .nav-item::before { | |
| background: linear-gradient(180deg, #d000d0, #d000d0) ; | |
| box-shadow: none; | |
| } | |
| [data-theme="light"] .admin-nav .nav-item:hover svg, | |
| [data-theme="light"] .admin-nav .nav-item.active svg { | |
| color: #d000d0; | |
| filter: none; | |
| } | |
| [data-theme="light"] .nav-shortcut { | |
| color: #94a3b8; | |
| background: rgba(0, 0, 0, 0.03); | |
| } | |
| [data-theme="light"] .admin-nav .nav-item:hover .nav-shortcut, | |
| [data-theme="light"] .admin-nav .nav-item.active .nav-shortcut { | |
| color: #d000d0; | |
| background: rgba(79, 124, 130, 0.1); | |
| } | |
| [data-theme="light"] .sidebar-footer { | |
| border-top: 1px solid rgba(79, 124, 130, 0.1); | |
| } | |
| [data-theme="light"] .system-status { | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .status-indicator.online { | |
| background: #00f0ff; | |
| box-shadow: 0 0 8px rgba(0, 240, 255, 0.5); | |
| } | |
| /* Light mode stats cards */ | |
| [data-theme="light"] .stat-card { | |
| background: rgba(255, 255, 255, 0.9) ; | |
| border: 1px solid rgba(79, 124, 130, 0.1) ; | |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); | |
| } | |
| [data-theme="light"] .stat-card:hover { | |
| border-color: rgba(79, 124, 130, 0.2) ; | |
| box-shadow: 0 4px 20px rgba(79, 124, 130, 0.1) ; | |
| } | |
| [data-theme="light"] .stat-card::before { | |
| background: linear-gradient(90deg, transparent, rgba(79, 124, 130, 0.2), transparent) ; | |
| } | |
| [data-theme="light"] .stat-value { | |
| background: linear-gradient(135deg, #191970, #2b2b8a) ; | |
| -webkit-background-clip: text ; | |
| background-clip: text ; | |
| -webkit-text-fill-color: transparent ; | |
| } | |
| /* Light mode users section */ | |
| [data-theme="light"] .users-section { | |
| background: rgba(255, 255, 255, 0.95) ; | |
| border: 1px solid rgba(79, 124, 130, 0.1) ; | |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); | |
| } | |
| [data-theme="light"] .users-section::before { | |
| background: linear-gradient(90deg, transparent, rgba(79, 124, 130, 0.2), transparent) ; | |
| } | |
| /* Light mode header */ | |
| [data-theme="light"] .admin-header h1 { | |
| color: #191970 ; | |
| background: none ; | |
| -webkit-text-fill-color: #191970 ; | |
| text-shadow: none; | |
| } | |
| [data-theme="light"] .admin-header .header-icon-wrapper { | |
| background: linear-gradient(135deg, #d000d0, #d000d0) ; | |
| border: none; | |
| box-shadow: 0 4px 15px rgba(79, 124, 130, 0.3) ; | |
| } | |
| [data-theme="light"] .admin-header .header-icon-wrapper svg { | |
| color: white; | |
| } | |
| /* Light mode buttons */ | |
| [data-theme="light"] .admin-container .btn-secondary { | |
| background: rgba(79, 124, 130, 0.08) ; | |
| border: 1px solid rgba(79, 124, 130, 0.2) ; | |
| color: #d000d0 ; | |
| } | |
| [data-theme="light"] .admin-container .btn-secondary:hover { | |
| background: rgba(79, 124, 130, 0.12) ; | |
| border-color: rgba(79, 124, 130, 0.3) ; | |
| box-shadow: 0 2px 10px rgba(79, 124, 130, 0.15) ; | |
| } | |
| [data-theme="light"] .admin-container .btn-primary { | |
| background: linear-gradient(135deg, #d000d0, #d000d0) ; | |
| box-shadow: 0 4px 15px rgba(79, 124, 130, 0.3) ; | |
| } | |
| /* Light mode console */ | |
| [data-theme="light"] .console-panel { | |
| background: #191970 ; | |
| border: 1px solid rgba(79, 124, 130, 0.2) ; | |
| } | |
| [data-theme="light"] .console-title svg { | |
| color: #60a5fa ; | |
| filter: none ; | |
| } | |
| [data-theme="light"] .console-status { | |
| background: rgba(79, 124, 130, 0.15) ; | |
| border: 1px solid rgba(79, 124, 130, 0.25) ; | |
| color: #60a5fa ; | |
| } | |
| [data-theme="light"] .quick-cmd { | |
| background: rgba(79, 124, 130, 0.1) ; | |
| border: 1px solid rgba(79, 124, 130, 0.2) ; | |
| color: #60a5fa ; | |
| } | |
| [data-theme="light"] .quick-cmd:hover:not(:disabled) { | |
| background: rgba(79, 124, 130, 0.2) ; | |
| border-color: rgba(79, 124, 130, 0.3) ; | |
| } | |
| [data-theme="light"] .execute-btn { | |
| background: linear-gradient(135deg, #d000d0, #d000d0) ; | |
| } | |
| [data-theme="light"] .execute-btn:hover:not(:disabled) { | |
| box-shadow: 0 0 20px rgba(79, 124, 130, 0.4) ; | |
| } | |
| [data-theme="light"] .filter-btn.active { | |
| background: rgba(79, 124, 130, 0.1) ; | |
| border-color: rgba(79, 124, 130, 0.25) ; | |
| color: #d000d0 ; | |
| } | |
| /* Light mode panel placeholder */ | |
| [data-theme="light"] .panel-placeholder { | |
| background: rgba(255, 255, 255, 0.9); | |
| border: 1px solid rgba(79, 124, 130, 0.15); | |
| } | |
| [data-theme="light"] .panel-placeholder svg { | |
| color: #d000d0; | |
| filter: none; | |
| } | |
| [data-theme="light"] .panel-placeholder h2 { | |
| color: #191970; | |
| text-transform: none; | |
| } | |
| [data-theme="light"] .placeholder-stats .stat .value { | |
| color: #d000d0; | |
| } | |
| [data-theme="light"] .placeholder-stats { | |
| border-top: 1px solid rgba(79, 124, 130, 0.1); | |
| } | |
| /* Light mode scrollbar */ | |
| [data-theme="light"] .admin-container ::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.02); | |
| } | |
| [data-theme="light"] .admin-container ::-webkit-scrollbar-thumb { | |
| background: rgba(79, 124, 130, 0.3); | |
| } | |
| [data-theme="light"] .admin-container ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(79, 124, 130, 0.5); | |
| } | |
| /* =========================================== | |
| RAG QUESTIONS PANEL STYLES | |
| =========================================== */ | |
| .rag-panel { | |
| padding: 0; | |
| } | |
| .rag-panel .panel-header { | |
| margin-bottom: 28px; | |
| } | |
| .rag-panel .header-icon-wrapper.brain { | |
| background: linear-gradient(135deg, #00f0ff, #a855f7); | |
| box-shadow: 0 8px 30px rgba(0, 240, 255, 0.35); | |
| } | |
| /* Alert Messages */ | |
| .rag-panel .alert { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 16px 22px; | |
| border-radius: 14px; | |
| margin-bottom: 22px; | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| animation: ragAlertSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| @keyframes ragAlertSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-12px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .rag-panel .alert-error { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.12), rgba(255, 51, 102, 0.06)); | |
| border: 1px solid rgba(255, 51, 102, 0.25); | |
| color: #ff6b8a; | |
| } | |
| .rag-panel .alert-success { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.12), rgba(0, 255, 136, 0.06)); | |
| border: 1px solid rgba(0, 255, 136, 0.25); | |
| color: #00ff88; | |
| } | |
| /* RAG Stats Grid */ | |
| .rag-stats { | |
| margin-bottom: 30px; | |
| } | |
| .rag-stats .stat-icon.upload { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(59, 130, 246, 0.2)); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| color: #00f0ff; | |
| box-shadow: 0 0 25px rgba(0, 240, 255, 0.25); | |
| } | |
| .rag-stats .stat-icon.trained { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(34, 197, 94, 0.2)); | |
| border: 1px solid rgba(0, 255, 136, 0.2); | |
| color: #00ff88; | |
| box-shadow: 0 0 25px rgba(0, 255, 136, 0.25); | |
| } | |
| .rag-stats .stat-icon.questions { | |
| background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2)); | |
| border: 1px solid rgba(168, 85, 247, 0.2); | |
| color: #a855f7; | |
| box-shadow: 0 0 25px rgba(168, 85, 247, 0.25); | |
| } | |
| .rag-stats .stat-icon.collections { | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2)); | |
| border: 1px solid rgba(251, 191, 36, 0.2); | |
| color: #fbbf24; | |
| box-shadow: 0 0 25px rgba(251, 191, 36, 0.25); | |
| } | |
| /* View Tabs */ | |
| .view-tabs { | |
| display: flex; | |
| gap: 14px; | |
| padding: 18px 0; | |
| margin-bottom: 28px; | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| .tab-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 14px 26px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 14px; | |
| color: rgba(255, 255, 255, 0.5); | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .tab-btn:hover { | |
| background: rgba(0, 240, 255, 0.08); | |
| border-color: rgba(0, 240, 255, 0.2); | |
| color: #00f0ff; | |
| } | |
| .tab-btn.active { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(168, 85, 247, 0.1)); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| color: rgba(255, 255, 255, 0.95); | |
| box-shadow: 0 4px 25px rgba(0, 240, 255, 0.2); | |
| } | |
| .tab-btn.active svg { | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.5)); | |
| } | |
| [data-theme="light"] .tab-btn { | |
| background: rgba(79, 124, 130, 0.04); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| color: #7272a8; | |
| } | |
| [data-theme="light"] .tab-btn:hover { | |
| background: rgba(79, 124, 130, 0.08); | |
| border-color: rgba(79, 124, 130, 0.2); | |
| color: #d000d0; | |
| } | |
| [data-theme="light"] .tab-btn.active { | |
| background: rgba(79, 124, 130, 0.12); | |
| border-color: rgba(79, 124, 130, 0.25); | |
| color: #4f46e5; | |
| box-shadow: 0 2px 12px rgba(79, 124, 130, 0.15); | |
| } | |
| /* RAG Content */ | |
| .rag-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .rag-content section { | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)); | |
| backdrop-filter: blur(20px); | |
| border-radius: 20px; | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| padding: 26px; | |
| box-shadow: 0 8px 35px rgba(0, 0, 0, 0.35); | |
| position: relative; | |
| } | |
| [data-theme="dark"] .rag-content section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; | |
| width: 40px; | |
| height: 40px; | |
| border-left: 2px solid rgba(0, 240, 255, 0.15); | |
| border-top: 2px solid rgba(0, 240, 255, 0.15); | |
| pointer-events: none; | |
| } | |
| [data-theme="light"] .rag-content section { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9)); | |
| border: 1px solid rgba(79, 124, 130, 0.12); | |
| box-shadow: 0 8px 32px rgba(79, 124, 130, 0.08); | |
| } | |
| .rag-content section h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-family: var(--admin-font-display); | |
| font-size: 1rem; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: rgba(255, 255, 255, 0.9); | |
| margin: 0 0 22px 0; | |
| } | |
| [data-theme="dark"] .rag-content section h3 { | |
| background: linear-gradient(135deg, #ffffff 0%, #00f0ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .rag-content section h3 svg { | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5)); | |
| } | |
| [data-theme="light"] .rag-content section h3 { | |
| color: #191970; | |
| font-family: var(--admin-font); | |
| text-transform: none; | |
| } | |
| [data-theme="light"] .rag-content section h3 svg { | |
| color: #d000d0; | |
| filter: none; | |
| } | |
| /* Upload Zone */ | |
| .upload-zone { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 18px; | |
| } | |
| .upload-label { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| width: 100%; | |
| min-height: 190px; | |
| border: 2px dashed rgba(0, 240, 255, 0.25); | |
| border-radius: 18px; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.03), rgba(168, 85, 247, 0.03)); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-label:hover { | |
| border-color: rgba(0, 240, 255, 0.45); | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(168, 85, 247, 0.05)); | |
| box-shadow: 0 0 30px rgba(0, 240, 255, 0.1); | |
| } | |
| .upload-label svg { | |
| color: #00f0ff; | |
| opacity: 0.5; | |
| filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4)); | |
| } | |
| .upload-label:hover svg { | |
| opacity: 1; | |
| } | |
| .upload-text { | |
| font-family: var(--admin-font); | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: #00f0ff; | |
| } | |
| .upload-hint { | |
| font-size: 0.82rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| } | |
| .upload-progress { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 20px; | |
| border-radius: 10px; | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| } | |
| .upload-progress.uploading { | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(0, 240, 255, 0.06)); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| color: #00f0ff; | |
| } | |
| .upload-progress.success { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.12), rgba(0, 255, 136, 0.06)); | |
| border: 1px solid rgba(0, 255, 136, 0.2); | |
| color: #00ff88; | |
| } | |
| .upload-progress.error { | |
| background: linear-gradient(135deg, rgba(255, 51, 102, 0.12), rgba(255, 51, 102, 0.06)); | |
| border: 1px solid rgba(255, 51, 102, 0.2); | |
| color: #ff3366; | |
| } | |
| /* Train All Button */ | |
| .train-all-section { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .train-all-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px 36px; | |
| background: linear-gradient(135deg, #00f0ff, #a855f7); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| border-radius: 14px; | |
| color: #0a0a0f; | |
| font-family: var(--admin-font); | |
| font-size: 1rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 25px rgba(0, 240, 255, 0.3); | |
| } | |
| .train-all-btn:hover:not(:disabled) { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 35px rgba(0, 240, 255, 0.45); | |
| } | |
| .train-all-btn:active:not(:disabled) { | |
| transform: translateY(-1px); | |
| } | |
| .train-all-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| background: linear-gradient(135deg, #6b7280, #9ca3af); | |
| box-shadow: none; | |
| } | |
| /* PDF Grid */ | |
| .pdf-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 18px; | |
| } | |
| .pdf-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 20px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.08); | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .pdf-card:hover { | |
| background: rgba(0, 240, 255, 0.05); | |
| border-color: rgba(0, 240, 255, 0.2); | |
| } | |
| .pdf-card.trained { | |
| border-color: rgba(0, 255, 136, 0.25); | |
| } | |
| [data-theme="light"] .pdf-card { | |
| background: rgba(79, 124, 130, 0.03); | |
| border-color: rgba(79, 124, 130, 0.1); | |
| } | |
| .pdf-icon { | |
| position: relative; | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.4)); | |
| } | |
| .trained-badge { | |
| position: absolute; | |
| bottom: -4px; | |
| right: -4px; | |
| background: #00ff88; | |
| border-radius: 50%; | |
| padding: 3px; | |
| color: #0a0a0f; | |
| box-shadow: 0 0 8px rgba(0, 255, 136, 0.5); | |
| } | |
| .pdf-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .pdf-info h4 { | |
| font-family: var(--admin-font); | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.9); | |
| margin: 0 0 6px 0; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| [data-theme="light"] .pdf-info h4 { | |
| color: #191970; | |
| } | |
| .pdf-meta { | |
| display: flex; | |
| gap: 12px; | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.78rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| } | |
| .pdf-meta span { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .pdf-actions { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .status-trained { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: var(--admin-font); | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: #00ff88; | |
| text-shadow: 0 0 8px rgba(0, 255, 136, 0.4); | |
| } | |
| /* Empty State */ | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| padding: 52px 28px; | |
| color: rgba(255, 255, 255, 0.4); | |
| text-align: center; | |
| } | |
| .empty-state svg { | |
| opacity: 0.3; | |
| color: #00f0ff; | |
| } | |
| .empty-state p { | |
| font-family: var(--admin-font); | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.6); | |
| margin: 0; | |
| } | |
| .empty-state span { | |
| font-size: 0.85rem; | |
| } | |
| .empty-state.small { | |
| padding: 36px 22px; | |
| } | |
| .empty-state.small svg { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| /* Training Result */ | |
| .train-result { | |
| background: linear-gradient(135deg, rgba(0, 255, 136, 0.08), rgba(0, 255, 136, 0.03)) ; | |
| border-color: rgba(0, 255, 136, 0.25) ; | |
| } | |
| .train-result h3 { | |
| color: #00ff88 ; | |
| text-shadow: 0 0 10px rgba(0, 255, 136, 0.4); | |
| } | |
| .train-result h3 svg { | |
| color: #00ff88 ; | |
| filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.5)); | |
| } | |
| .result-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 18px; | |
| } | |
| .result-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .result-label { | |
| font-family: var(--admin-font); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: rgba(255, 255, 255, 0.4); | |
| } | |
| .result-value { | |
| font-family: var(--admin-font-display); | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #00ff88, #00f0ff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .result-breakdown { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .breakdown-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .breakdown-tags .tag { | |
| padding: 5px 14px; | |
| background: rgba(0, 240, 255, 0.1); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| border-radius: 20px; | |
| font-family: var(--admin-font); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: #00f0ff; | |
| } | |
| /* Stats Section */ | |
| .stats-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .stat-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 12px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .stat-row:last-child { | |
| border-bottom: none; | |
| } | |
| .stat-row span:first-child { | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .stat-value-text { | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.88rem; | |
| font-weight: 700; | |
| color: #00f0ff; | |
| } | |
| [data-theme="light"] .stat-row { | |
| border-bottom-color: rgba(0, 0, 0, 0.06); | |
| } | |
| [data-theme="light"] .stat-value-text { | |
| color: #191970; | |
| } | |
| /* Collections List */ | |
| .collections-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .collection-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 20px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.08); | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .collection-item:hover { | |
| border-color: rgba(0, 240, 255, 0.2); | |
| background: rgba(0, 240, 255, 0.03); | |
| } | |
| .collection-name { | |
| font-family: var(--admin-font-mono); | |
| font-weight: 700; | |
| color: #00f0ff; | |
| } | |
| .collection-count { | |
| font-family: var(--admin-font); | |
| font-size: 0.85rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| } | |
| /* Search Section */ | |
| .search-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .search-input-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 16px 20px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 14px; | |
| transition: all 0.3s ease; | |
| } | |
| .search-input-wrap:focus-within { | |
| border-color: rgba(0, 240, 255, 0.4); | |
| box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1); | |
| } | |
| .search-input-wrap svg { | |
| color: #00f0ff; | |
| opacity: 0.6; | |
| flex-shrink: 0; | |
| } | |
| .search-input-wrap:focus-within svg { | |
| opacity: 1; | |
| } | |
| .search-input-wrap input { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| outline: none; | |
| font-family: var(--admin-font); | |
| font-size: 0.95rem; | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .search-input-wrap input::placeholder { | |
| color: rgba(255, 255, 255, 0.3); | |
| } | |
| [data-theme="light"] .search-input-wrap { | |
| background: #f8fafc; | |
| border-color: #e2e8f0; | |
| } | |
| [data-theme="light"] .search-input-wrap input { | |
| color: #191970; | |
| } | |
| .search-filters { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .search-filters select { | |
| padding: 12px 18px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 10px; | |
| color: rgba(255, 255, 255, 0.9); | |
| font-family: var(--admin-font); | |
| font-size: 0.9rem; | |
| outline: none; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .search-filters select:hover { | |
| border-color: rgba(0, 240, 255, 0.25); | |
| } | |
| .search-filters select:focus { | |
| border-color: rgba(0, 240, 255, 0.4); | |
| box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1); | |
| } | |
| [data-theme="light"] .search-filters select { | |
| background: #f8fafc; | |
| border-color: #e2e8f0; | |
| color: #191970; | |
| } | |
| /* Search Results */ | |
| .search-results { | |
| margin-top: 22px; | |
| } | |
| .search-results h4 { | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| color: rgba(255, 255, 255, 0.5); | |
| margin: 0 0 18px 0; | |
| } | |
| .result-card { | |
| padding: 18px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(0, 240, 255, 0.08); | |
| border-radius: 14px; | |
| margin-bottom: 14px; | |
| transition: all 0.3s ease; | |
| } | |
| .result-card:hover { | |
| background: rgba(0, 240, 255, 0.04); | |
| border-color: rgba(0, 240, 255, 0.2); | |
| } | |
| .result-question { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .result-question svg { | |
| color: #00f0ff; | |
| filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.4)); | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .result-question span { | |
| color: rgba(255, 255, 255, 0.85); | |
| font-family: var(--admin-font); | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| } | |
| [data-theme="light"] .result-question span { | |
| color: #191970; | |
| } | |
| .result-meta { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| } | |
| .result-meta .score { | |
| font-family: var(--admin-font-mono); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| color: #00ff88; | |
| } | |
| .result-meta .tag { | |
| padding: 5px 12px; | |
| background: rgba(0, 240, 255, 0.1); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| border-radius: 20px; | |
| font-family: var(--admin-font); | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| color: #00f0ff; | |
| } | |
| .result-meta .tag.type { | |
| background: rgba(168, 85, 247, 0.12); | |
| border-color: rgba(168, 85, 247, 0.2); | |
| color: #a855f7; | |
| } | |
| .result-meta .tag.difficulty { | |
| background: rgba(251, 191, 36, 0.1); | |
| border-color: rgba(251, 191, 36, 0.2); | |
| color: #fbbf24; | |
| } | |
| /* Button Styles for RAG Panel */ | |
| .rag-panel .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 11px 20px; | |
| border-radius: 11px; | |
| font-family: var(--admin-font); | |
| font-size: 0.88rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: none; | |
| } | |
| .rag-panel .btn-primary { | |
| background: linear-gradient(135deg, #00f0ff, #a855f7); | |
| color: #0a0a0f; | |
| box-shadow: 0 4px 15px rgba(0, 240, 255, 0.25); | |
| } | |
| .rag-panel .btn-primary:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 25px rgba(0, 240, 255, 0.4); | |
| } | |
| .rag-panel .btn-primary:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| background: linear-gradient(135deg, #6b7280, #9ca3af); | |
| box-shadow: none; | |
| } | |
| .rag-panel .btn-sm { | |
| padding: 7px 14px; | |
| font-size: 0.78rem; | |
| } | |
| .rag-panel .btn-danger { | |
| background: rgba(255, 51, 102, 0.12); | |
| border: 1px solid rgba(255, 51, 102, 0.25); | |
| color: #ff3366; | |
| } | |
| .rag-panel .btn-danger:hover { | |
| background: rgba(255, 51, 102, 0.2); | |
| box-shadow: 0 0 15px rgba(255, 51, 102, 0.2); | |
| } | |
| /* =========================================== | |
| RAG TRAINING CONFIG MODAL | |
| =========================================== */ | |
| .train-config-modal { | |
| background: var(--admin-card-bg); | |
| border: 1px solid var(--admin-border); | |
| border-radius: 16px; | |
| padding: 24px; | |
| width: 90%; | |
| max-width: 480px; | |
| backdrop-filter: blur(20px); | |
| animation: modalSlideIn 0.3s ease; | |
| } | |
| @keyframes modalSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .train-config-modal h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--admin-primary); | |
| font-size: 1.2rem; | |
| margin: 0 0 8px 0; | |
| } | |
| .train-config-modal .modal-subtitle { | |
| color: var(--admin-text-muted); | |
| font-size: 0.85rem; | |
| margin: 0 0 20px 0; | |
| } | |
| .train-config-modal .config-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .train-config-modal .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .train-config-modal .form-group label { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--admin-text); | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| } | |
| .train-config-modal .form-group select, | |
| .train-config-modal .form-group input { | |
| padding: 10px 14px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--admin-border); | |
| border-radius: 8px; | |
| color: var(--admin-text); | |
| font-size: 0.9rem; | |
| font-family: var(--admin-font); | |
| transition: all 0.3s ease; | |
| } | |
| [data-theme="light"] .train-config-modal .form-group select, | |
| [data-theme="light"] .train-config-modal .form-group input { | |
| background: rgba(255, 255, 255, 0.8); | |
| } | |
| .train-config-modal .form-group select:focus, | |
| .train-config-modal .form-group input:focus { | |
| outline: none; | |
| border-color: var(--admin-primary); | |
| box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.1); | |
| } | |
| .train-config-modal .form-group select option { | |
| background: var(--admin-card-bg); | |
| color: var(--admin-text); | |
| } | |
| .train-config-modal .modal-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 12px; | |
| margin-top: 24px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--admin-border); | |
| } | |
| /* Classification Tags */ | |
| .result-breakdown.classification { | |
| margin-top: 14px; | |
| padding-top: 14px; | |
| border-top: 1px dashed rgba(0, 240, 255, 0.15); | |
| } | |
| .result-breakdown.classification .result-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .breakdown-tags .tag-branch { | |
| background: rgba(0, 255, 136, 0.1) ; | |
| border: 1px solid rgba(0, 255, 136, 0.25) ; | |
| color: #00ff88 ; | |
| } | |
| .breakdown-tags .tag-domain { | |
| background: rgba(168, 85, 247, 0.1) ; | |
| border: 1px solid rgba(168, 85, 247, 0.25) ; | |
| color: #a855f7 ; | |
| } | |
| .breakdown-tags .tag-more { | |
| background: rgba(100, 116, 139, 0.1) ; | |
| border: 1px solid rgba(100, 116, 139, 0.2) ; | |
| color: rgba(255, 255, 255, 0.5) ; | |
| font-style: italic; | |
| } | |
| /* Settings button for PDF card */ | |
| .pdf-actions .btn-secondary { | |
| background: rgba(0, 240, 255, 0.08); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| color: rgba(255, 255, 255, 0.6); | |
| padding: 7px 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .pdf-actions .btn-secondary:hover { | |
| background: rgba(0, 240, 255, 0.15); | |
| border-color: rgba(0, 240, 255, 0.3); | |
| color: #00f0ff; | |
| } |