Spaces:
Sleeping
Sleeping
| /* ============================================================ | |
| ADMIN DASHBOARD - ENSIM ULTRA PREMIUM | |
| Dark Space Theme | Glassmorphism | Neon Accents | |
| ============================================================ */ | |
| :root { | |
| --a-bg: #010214; | |
| --a-surface: rgba(10, 25, 50, 0.85); | |
| --a-surface2: rgba(20, 35, 65, 0.65); | |
| --a-border: rgba(140, 220, 255, 0.08); | |
| --a-border-h: rgba(0, 240, 255, 0.3); | |
| --a-cyan: #00f0ff; | |
| --a-purple: #7c3aed; | |
| --a-gold: #f59e0b; | |
| --a-green: #10b981; | |
| --a-red: #ef4444; | |
| --a-text: #e2e8f0; | |
| --a-muted: #64748b; | |
| --a-glow: 0 0 25px rgba(0, 240, 255, 0.25); | |
| --a-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); | |
| --a-radius: 16px; | |
| } | |
| /* ── Page Layout ─────────────────────────────────── */ | |
| .admin-premium { | |
| padding: 28px; | |
| max-width: 1600px; | |
| margin: 95px auto 60px; | |
| min-height: 100vh; | |
| color: var(--a-text); | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| position: relative; | |
| } | |
| .admin-premium::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse at 8% 15%, rgba(0, 240, 255, 0.04) 0%, transparent 55%), | |
| radial-gradient(ellipse at 92% 85%, rgba(124, 58, 237, 0.04) 0%, transparent 55%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| /* ── Header ──────────────────────────────────────── */ | |
| .admin-premium-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 28px; | |
| padding: 22px 32px; | |
| background: linear-gradient(145deg, rgba(10,25,50,0.85), rgba(5,15,35,0.7)); | |
| border-radius: 20px; | |
| border: 1px solid rgba(0,240,255,0.2); | |
| backdrop-filter: blur(24px); | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,240,255,0.06); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .admin-premium-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent 0%, var(--a-cyan) 50%, transparent 100%); | |
| opacity: 0.5; | |
| } | |
| .admin-premium-header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -60px; | |
| right: -60px; | |
| width: 240px; | |
| height: 240px; | |
| background: radial-gradient(circle, rgba(0,240,255,0.05) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .header-left { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .header-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .header-icon { | |
| font-size: 1.5rem; | |
| color: var(--a-cyan); | |
| filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4)); | |
| } | |
| .header-main-title { | |
| font-size: 1.9rem; | |
| font-weight: 900; | |
| margin: 0; | |
| background: linear-gradient(135deg, #ffffff 0%, var(--a-cyan) 60%, #8be9ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| letter-spacing: -0.5px; | |
| } | |
| .header-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 5px 16px; | |
| background: linear-gradient(135deg, rgba(0,240,255,0.12), rgba(124,58,237,0.12)); | |
| border: 1px solid rgba(0,240,255,0.28); | |
| border-radius: 50px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 1.8px; | |
| text-transform: uppercase; | |
| color: var(--a-cyan); | |
| width: fit-content; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .header-datetime { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| color: var(--a-muted); | |
| font-size: 0.88rem; | |
| padding: 10px 18px; | |
| background: rgba(5, 15, 35, 0.7); | |
| border-radius: 12px; | |
| border: 1px solid var(--a-border); | |
| } | |
| .header-datetime i { | |
| color: var(--a-cyan); | |
| } | |
| .header-back-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 20px; | |
| background: rgba(5, 15, 35, 0.65); | |
| border: 1px solid var(--a-border); | |
| border-radius: 12px; | |
| color: var(--a-text); | |
| cursor: pointer; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .header-back-btn:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| border-color: var(--a-cyan); | |
| color: var(--a-cyan); | |
| transform: translateX(-3px); | |
| box-shadow: var(--a-glow); | |
| } | |
| /* ── KPI Grid ────────────────────────────────────── */ | |
| .admin-premium-kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 18px; | |
| margin-bottom: 26px; | |
| } | |
| .kpi-premium-card { | |
| background: linear-gradient(145deg, rgba(10,25,50,0.9), rgba(5,12,30,0.8)); | |
| border-radius: var(--a-radius); | |
| padding: 22px 24px; | |
| border: 1px solid rgba(0,240,255,0.1); | |
| backdrop-filter: blur(20px); | |
| box-shadow: 0 10px 40px rgba(0,0,0,0.45); | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| transition: all 0.35s ease; | |
| position: relative; | |
| overflow: hidden; | |
| cursor: default; | |
| } | |
| .kpi-premium-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent 0%, rgba(0,240,255,0.55) 50%, transparent 100%); | |
| } | |
| .kpi-premium-card::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -40px; | |
| right: -40px; | |
| width: 110px; | |
| height: 110px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(0,240,255,0.05) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .kpi-premium-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(0,240,255,0.28); | |
| box-shadow: 0 0 28px rgba(0,240,255,0.12), 0 20px 60px rgba(0,0,0,0.5); | |
| } | |
| .kpi-premium-icon { | |
| width: 52px; | |
| height: 52px; | |
| border-radius: 13px; | |
| background: rgba(0,240,255,0.07); | |
| border: 1px solid rgba(0,240,255,0.16); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| color: var(--a-cyan); | |
| flex-shrink: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .kpi-premium-card:hover .kpi-premium-icon { | |
| background: rgba(0,240,255,0.13); | |
| border-color: rgba(0,240,255,0.35); | |
| box-shadow: 0 0 14px rgba(0,240,255,0.2); | |
| } | |
| .kpi-premium-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .kpi-premium-label { | |
| color: var(--a-muted); | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .kpi-premium-value { | |
| color: #fff; | |
| font-size: 2rem; | |
| font-weight: 800; | |
| line-height: 1.1; | |
| letter-spacing: -1px; | |
| } | |
| .kpi-premium-trend { | |
| font-size: 0.75rem; | |
| color: var(--a-muted); | |
| } | |
| .kpi-premium-trend.positive { color: var(--a-green); } | |
| /* ── Navigation ──────────────────────────────────── */ | |
| .admin-premium-nav { | |
| display: flex; | |
| gap: 6px; | |
| margin-bottom: 26px; | |
| padding: 6px; | |
| background: linear-gradient(145deg, rgba(10,25,50,0.85), rgba(5,15,35,0.7)); | |
| border-radius: 14px; | |
| border: 1px solid rgba(0,240,255,0.1); | |
| backdrop-filter: blur(20px); | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.3); | |
| } | |
| .nav-btn { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 12px 14px; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: 10px; | |
| color: var(--a-muted); | |
| cursor: pointer; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| white-space: nowrap; | |
| } | |
| .nav-btn:hover { | |
| color: var(--a-text); | |
| background: rgba(140, 220, 255, 0.07); | |
| border-color: var(--a-border); | |
| } | |
| .nav-btn.active { | |
| background: linear-gradient(135deg, rgba(0,240,255,0.14), rgba(124,58,237,0.1)); | |
| border-color: rgba(0,240,255,0.38); | |
| color: var(--a-cyan); | |
| box-shadow: 0 0 18px rgba(0,240,255,0.12); | |
| } | |
| .nav-btn i { font-size: 0.85rem; } | |
| /* ── Content Sections ────────────────────────────── */ | |
| .admin-premium-content { min-height: 500px; } | |
| .section-premium { | |
| background: linear-gradient(145deg, rgba(10,25,50,0.85), rgba(5,15,35,0.7)); | |
| border-radius: 20px; | |
| border: 1px solid rgba(0,240,255,0.15); | |
| padding: 28px; | |
| backdrop-filter: blur(20px); | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,240,255,0.05); | |
| animation: fadeInUp 0.35s ease; | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(18px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .section-premium-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 24px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid var(--a-border); | |
| } | |
| .section-premium-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: #fff; | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| margin: 0; | |
| } | |
| .section-premium-title i { | |
| color: var(--a-cyan); | |
| font-size: 1rem; | |
| } | |
| .section-premium-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| /* ── Search ──────────────────────────────────────── */ | |
| .search-premium { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .search-premium > i { | |
| position: absolute; | |
| left: 14px; | |
| color: var(--a-muted); | |
| font-size: 0.82rem; | |
| pointer-events: none; | |
| } | |
| .search-premium-input { | |
| padding: 10px 14px 10px 38px; | |
| background: rgba(5, 15, 35, 0.8); | |
| border: 1px solid var(--a-border); | |
| border-radius: 10px; | |
| color: var(--a-text); | |
| font-size: 0.88rem; | |
| width: 230px; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .search-premium-input::placeholder { color: var(--a-muted); } | |
| .search-premium-input:focus { | |
| outline: none; | |
| border-color: var(--a-cyan); | |
| background: rgba(5, 15, 35, 0.95); | |
| box-shadow: 0 0 16px rgba(0,240,255,0.14); | |
| width: 270px; | |
| } | |
| /* ── Action Button ───────────────────────────────── */ | |
| .action-premium-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 18px; | |
| background: rgba(0, 240, 255, 0.09); | |
| border: 1px solid rgba(0,240,255,0.28); | |
| border-radius: 10px; | |
| color: var(--a-cyan); | |
| cursor: pointer; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .action-premium-btn:hover { | |
| background: rgba(0, 240, 255, 0.18); | |
| box-shadow: var(--a-glow); | |
| transform: translateY(-1px); | |
| } | |
| /* ── Table ───────────────────────────────────────── */ | |
| .table-premium-container { | |
| border-radius: 14px; | |
| overflow: hidden; | |
| border: 1px solid var(--a-border); | |
| } | |
| .table-premium { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .table-premium thead tr { | |
| background: rgba(1, 2, 20, 0.95); | |
| } | |
| .table-premium th { | |
| padding: 14px 18px; | |
| text-align: left; | |
| color: var(--a-muted); | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| border-bottom: 1px solid var(--a-border); | |
| } | |
| .table-premium td { | |
| padding: 13px 18px; | |
| color: var(--a-text); | |
| font-size: 0.88rem; | |
| border-bottom: 1px solid rgba(140, 220, 255, 0.05); | |
| transition: background 0.2s ease; | |
| } | |
| .table-premium tbody tr { background: rgba(10, 25, 50, 0.45); } | |
| .table-premium tbody tr:hover { background: rgba(0, 240, 255, 0.04); } | |
| .table-premium tbody tr:last-child td { border-bottom: none; } | |
| /* ── Badges ──────────────────────────────────────── */ | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| } | |
| .status-badge.success { | |
| background: rgba(16,185,129,0.14); | |
| color: var(--a-green); | |
| border: 1px solid rgba(16,185,129,0.28); | |
| } | |
| .status-badge.error { | |
| background: rgba(239,68,68,0.14); | |
| color: var(--a-red); | |
| border: 1px solid rgba(239,68,68,0.28); | |
| } | |
| .role-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| } | |
| .role-badge.admin { | |
| background: rgba(245,158,11,0.14); | |
| color: var(--a-gold); | |
| border: 1px solid rgba(245,158,11,0.28); | |
| } | |
| .role-badge.user { | |
| background: rgba(140,220,255,0.1); | |
| color: var(--a-cyan); | |
| border: 1px solid rgba(140,220,255,0.18); | |
| } | |
| /* ── Table Action Buttons ────────────────────────── */ | |
| .table-action-btn { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| border: 1px solid var(--a-border); | |
| background: transparent; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.22s ease; | |
| margin-right: 5px; | |
| color: var(--a-muted); | |
| font-size: 0.82rem; | |
| } | |
| .table-action-btn:hover { transform: scale(1.12); } | |
| .table-action-btn.edit:hover { | |
| background: rgba(0,240,255,0.14); | |
| border-color: var(--a-cyan); | |
| color: var(--a-cyan); | |
| } | |
| .table-action-btn.delete:hover { | |
| background: rgba(239,68,68,0.14); | |
| border-color: var(--a-red); | |
| color: var(--a-red); | |
| } | |
| .table-action-btn.promote:hover { | |
| background: rgba(245,158,11,0.14); | |
| border-color: var(--a-gold); | |
| color: var(--a-gold); | |
| } | |
| .table-action-btn.demote:hover { | |
| background: rgba(140,220,255,0.14); | |
| border-color: var(--a-cyan); | |
| color: var(--a-cyan); | |
| } | |
| /* ── Stats ───────────────────────────────────────── */ | |
| .stats-premium-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| } | |
| .chart-premium-card { | |
| background: rgba(10, 25, 50, 0.65); | |
| border-radius: var(--a-radius); | |
| padding: 22px; | |
| border: 1px solid var(--a-border); | |
| transition: border-color 0.3s ease; | |
| } | |
| .chart-premium-card:hover { border-color: var(--a-border-h); } | |
| .chart-premium-card h3 { | |
| color: var(--a-text); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin: 0 0 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .chart-premium-card h3 i { color: var(--a-cyan); } | |
| /* ── Logs ────────────────────────────────────────── */ | |
| .logs-premium-container { overflow: hidden; border-radius: 12px; } | |
| .logs-premium-table { width: 100%; border-collapse: collapse; } | |
| .logs-premium-table th { | |
| padding: 13px 16px; | |
| text-align: left; | |
| color: var(--a-muted); | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| background: rgba(1, 2, 20, 0.9); | |
| border-bottom: 1px solid var(--a-border); | |
| } | |
| .logs-premium-table td { | |
| padding: 11px 16px; | |
| color: var(--a-text); | |
| font-size: 0.85rem; | |
| border-bottom: 1px solid rgba(140,220,255,0.05); | |
| } | |
| .logs-premium-table tr:hover { background: rgba(0,240,255,0.03); } | |
| .log-success { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| color: var(--a-green); | |
| font-weight: 600; | |
| font-size: 0.8rem; | |
| } | |
| .log-failed { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| color: var(--a-red); | |
| font-weight: 600; | |
| font-size: 0.8rem; | |
| } | |
| .log-method-badge { | |
| display: inline-flex; | |
| padding: 3px 9px; | |
| border-radius: 5px; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| background: rgba(140,220,255,0.1); | |
| color: var(--a-cyan); | |
| border: 1px solid rgba(140,220,255,0.2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .log-method-badge.face { background: rgba(124,58,237,0.12); color: #a78bfa; border-color: rgba(124,58,237,0.25); } | |
| .log-method-badge.password { background: rgba(0,240,255,0.1); color: var(--a-cyan); border-color: rgba(0,240,255,0.22); } | |
| /* ── Testimonials ────────────────────────────────── */ | |
| .testimonials-premium-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); | |
| gap: 20px; | |
| } | |
| .testimonial-premium-card { | |
| background: rgba(10, 25, 50, 0.72); | |
| border-radius: var(--a-radius); | |
| padding: 22px; | |
| border: 1px solid var(--a-border); | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(12px); | |
| animation: fadeInUp 0.4s ease; | |
| } | |
| .testimonial-premium-card:hover { | |
| border-color: var(--a-border-h); | |
| box-shadow: 0 10px 36px rgba(0,0,0,0.35); | |
| transform: translateY(-3px); | |
| } | |
| .testimonial-premium-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 14px; | |
| } | |
| .testimonial-premium-user { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .user-avatar { | |
| width: 46px; | |
| height: 46px; | |
| border-radius: 13px; | |
| background: linear-gradient(135deg, var(--a-cyan), var(--a-purple)); | |
| color: #fff; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| box-shadow: 0 4px 14px rgba(0,240,255,0.28); | |
| } | |
| .user-info h4 { | |
| color: #fff; | |
| margin: 0 0 2px; | |
| font-size: 0.92rem; | |
| font-weight: 600; | |
| } | |
| .user-info span { | |
| color: var(--a-muted); | |
| font-size: 0.78rem; | |
| } | |
| .testimonial-premium-rating { | |
| color: var(--a-gold); | |
| font-size: 0.95rem; | |
| letter-spacing: 2px; | |
| text-shadow: 0 0 10px rgba(245,158,11,0.4); | |
| } | |
| .testimonial-premium-content { | |
| color: var(--a-text); | |
| font-size: 0.88rem; | |
| line-height: 1.6; | |
| margin: 0 0 14px; | |
| padding: 12px 14px; | |
| background: rgba(5, 15, 35, 0.45); | |
| border-radius: 10px; | |
| border-left: 2px solid rgba(0,240,255,0.3); | |
| font-style: italic; | |
| } | |
| .testimonial-premium-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 7px; | |
| margin-bottom: 16px; | |
| } | |
| .testimonial-premium-meta span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 4px 10px; | |
| background: rgba(5, 15, 35, 0.65); | |
| border-radius: 6px; | |
| font-size: 0.74rem; | |
| color: var(--a-muted); | |
| border: 1px solid var(--a-border); | |
| } | |
| .testimonial-premium-meta i { color: var(--a-cyan); font-size: 0.7rem; } | |
| .testimonial-premium-actions { display: flex; gap: 10px; } | |
| .action-premium { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 10px; | |
| border-radius: 10px; | |
| border: 1px solid transparent; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .action-premium.approve { | |
| background: rgba(16,185,129,0.1); | |
| border-color: rgba(16,185,129,0.28); | |
| color: var(--a-green); | |
| } | |
| .action-premium.approve:hover { | |
| background: var(--a-green); | |
| color: #fff; | |
| box-shadow: 0 0 22px rgba(16,185,129,0.38); | |
| transform: translateY(-2px); | |
| } | |
| .action-premium.reject { | |
| background: rgba(239,68,68,0.1); | |
| border-color: rgba(239,68,68,0.28); | |
| color: var(--a-red); | |
| } | |
| .action-premium.reject:hover { | |
| background: var(--a-red); | |
| color: #fff; | |
| box-shadow: 0 0 22px rgba(239,68,68,0.38); | |
| transform: translateY(-2px); | |
| } | |
| /* ── Config ──────────────────────────────────────── */ | |
| .config-premium-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 20px; | |
| } | |
| .config-premium-card { | |
| background: rgba(10, 25, 50, 0.65); | |
| border-radius: var(--a-radius); | |
| padding: 24px; | |
| border: 1px solid var(--a-border); | |
| transition: border-color 0.3s ease; | |
| } | |
| .config-premium-card:hover { border-color: var(--a-border-h); } | |
| .config-premium-card h3 { | |
| color: #fff; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin: 0 0 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding-bottom: 14px; | |
| border-bottom: 1px solid var(--a-border); | |
| } | |
| .config-premium-card h3 i { color: var(--a-cyan); } | |
| .config-premium-item { margin-bottom: 16px; } | |
| .config-premium-item label { | |
| display: block; | |
| color: var(--a-muted); | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| margin-bottom: 8px; | |
| } | |
| .config-premium-input { | |
| width: 100%; | |
| padding: 10px 14px; | |
| background: rgba(5, 15, 35, 0.8); | |
| border: 1px solid var(--a-border); | |
| border-radius: 10px; | |
| color: var(--a-text); | |
| font-size: 0.88rem; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| box-sizing: border-box; | |
| } | |
| .config-premium-input:focus { | |
| outline: none; | |
| border-color: var(--a-cyan); | |
| box-shadow: 0 0 16px rgba(0,240,255,0.14); | |
| } | |
| /* ── Empty / Error States ────────────────────────── */ | |
| .empty-premium { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 64px 20px; | |
| color: var(--a-muted); | |
| text-align: center; | |
| gap: 12px; | |
| } | |
| .empty-premium i { | |
| font-size: 3rem; | |
| color: rgba(140,220,255,0.18); | |
| } | |
| .empty-premium h4 { | |
| color: var(--a-muted); | |
| font-size: 1rem; | |
| font-weight: 500; | |
| margin: 0; | |
| } | |
| .empty-premium p { | |
| color: rgba(100,116,139,0.7); | |
| font-size: 0.85rem; | |
| margin: 0; | |
| } | |
| .error-premium { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 18px 22px; | |
| color: var(--a-red); | |
| background: rgba(239,68,68,0.09); | |
| border-radius: 12px; | |
| border: 1px solid rgba(239,68,68,0.28); | |
| font-size: 0.9rem; | |
| } | |
| /* ── Toast Notification ──────────────────────────── */ | |
| .admin-toast { | |
| position: fixed; | |
| bottom: 32px; | |
| right: 32px; | |
| padding: 14px 22px; | |
| border-radius: 14px; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| z-index: 99999; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| backdrop-filter: blur(24px); | |
| box-shadow: 0 12px 40px rgba(0,0,0,0.5); | |
| animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), | |
| toastFadeOut 0.5s ease 4s forwards; | |
| max-width: 360px; | |
| font-family: inherit; | |
| } | |
| .admin-toast.success { | |
| background: rgba(16,185,129,0.14); | |
| border: 1px solid rgba(16,185,129,0.38); | |
| color: #6ee7b7; | |
| } | |
| .admin-toast.error { | |
| background: rgba(239,68,68,0.14); | |
| border: 1px solid rgba(239,68,68,0.38); | |
| color: #fca5a5; | |
| } | |
| .admin-toast.info { | |
| background: rgba(0,240,255,0.1); | |
| border: 1px solid rgba(0,240,255,0.28); | |
| color: var(--a-cyan); | |
| } | |
| @keyframes toastSlideIn { | |
| from { opacity: 0; transform: translateX(50px) scale(0.9); } | |
| to { opacity: 1; transform: translateX(0) scale(1); } | |
| } | |
| @keyframes toastFadeOut { | |
| from { opacity: 1; transform: translateX(0); } | |
| to { opacity: 0; transform: translateX(20px); pointer-events: none; } | |
| } | |
| /* ── Confirm Modal Overlay ───────────────────────── */ | |
| .delete-confirm-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(2, 8, 23, 0.88); | |
| backdrop-filter: blur(10px); | |
| z-index: 99998; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: overlayIn 0.22s ease; | |
| } | |
| @keyframes overlayIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .admin-modal { | |
| background: rgba(10, 25, 50, 0.96); | |
| border: 1px solid var(--a-border); | |
| border-radius: 22px; | |
| padding: 36px; | |
| max-width: 430px; | |
| width: 90%; | |
| box-shadow: 0 40px 90px rgba(0,0,0,0.7); | |
| animation: modalSlideIn 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| text-align: center; | |
| } | |
| @keyframes modalSlideIn { | |
| from { opacity: 0; transform: scale(0.88) translateY(-24px); } | |
| to { opacity: 1; transform: scale(1) translateY(0); } | |
| } | |
| .admin-modal-icon { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 18px; | |
| background: rgba(239,68,68,0.14); | |
| border: 1px solid rgba(239,68,68,0.3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.6rem; | |
| color: var(--a-red); | |
| margin: 0 auto 20px; | |
| } | |
| .admin-modal h3 { | |
| color: #fff; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| margin: 0 0 10px; | |
| } | |
| .admin-modal p { | |
| color: var(--a-muted); | |
| font-size: 0.88rem; | |
| margin: 0 0 28px; | |
| line-height: 1.5; | |
| } | |
| .admin-modal-actions { | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .modal-btn { | |
| flex: 1; | |
| padding: 12px 16px; | |
| border-radius: 12px; | |
| border: 1px solid var(--a-border); | |
| cursor: pointer; | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .modal-btn.cancel { | |
| background: rgba(5, 15, 35, 0.65); | |
| color: var(--a-muted); | |
| } | |
| .modal-btn.cancel:hover { | |
| background: rgba(5, 15, 35, 0.9); | |
| color: var(--a-text); | |
| } | |
| .modal-btn.confirm-delete { | |
| background: rgba(239,68,68,0.14); | |
| border-color: rgba(239,68,68,0.38); | |
| color: var(--a-red); | |
| } | |
| .modal-btn.confirm-delete:hover { | |
| background: var(--a-red); | |
| color: #fff; | |
| box-shadow: 0 0 22px rgba(239,68,68,0.38); | |
| transform: translateY(-1px); | |
| } | |
| /* ── User table – name + email sub ──────────────── */ | |
| .user-full-name { | |
| font-weight: 600; | |
| color: var(--a-text); | |
| font-size: 0.88rem; | |
| line-height: 1.3; | |
| } | |
| .user-email-sub { | |
| font-size: 0.76rem; | |
| color: var(--a-muted); | |
| margin-top: 2px; | |
| } | |
| /* ── Stats trade KPI row ─────────────────────────── */ | |
| .stats-trade-kpi-row { | |
| display: flex; | |
| gap: 14px; | |
| flex-wrap: wrap; | |
| margin-bottom: 24px; | |
| } | |
| .stats-trade-kpi-card { | |
| flex: 1; | |
| min-width: 140px; | |
| background: rgba(10, 25, 50, 0.7); | |
| border: 1px solid var(--a-border); | |
| border-radius: 14px; | |
| padding: 16px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| transition: border-color 0.3s; | |
| } | |
| .stats-trade-kpi-card:hover { | |
| border-color: rgba(0, 240, 255, 0.25); | |
| } | |
| .stk-label { | |
| font-size: 0.75rem; | |
| color: var(--a-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .stk-value { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: var(--a-text); | |
| } | |
| .stk-value.positive { color: #10b981; } | |
| .stk-value.negative { color: #ef4444; } | |
| /* ── Top traders table ───────────────────────────── */ | |
| .top-traders-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.84rem; | |
| } | |
| .top-traders-table th { | |
| padding: 10px 12px; | |
| text-align: left; | |
| color: var(--a-muted); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| border-bottom: 1px solid var(--a-border); | |
| } | |
| .top-traders-table td { | |
| padding: 10px 12px; | |
| color: var(--a-text); | |
| border-bottom: 1px solid rgba(140, 220, 255, 0.04); | |
| } | |
| .top-traders-table tr:last-child td { border-bottom: none; } | |
| .top-traders-table tr:hover td { | |
| background: rgba(0, 240, 255, 0.03); | |
| } | |
| .tt-rank { | |
| font-weight: 700; | |
| color: var(--a-cyan) ; | |
| font-size: 0.85rem; | |
| } | |
| .tt-positive { color: #10b981 ; font-weight: 600; } | |
| .tt-negative { color: #ef4444 ; font-weight: 600; } | |
| /* ── KPI warning trend ───────────────────────────── */ | |
| .kpi-premium-trend.warning { color: #f59e0b; } | |
| /* ── Stats grid 2×2 ──────────────────────────────── */ | |
| .stats-premium-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| /* ── Responsive ──────────────────────────────────── */ | |
| @media (max-width: 1200px) { | |
| .admin-premium-kpi-grid { grid-template-columns: repeat(2, 1fr); } | |
| .stats-premium-grid { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 768px) { | |
| .admin-premium { | |
| padding: 14px; | |
| margin-top: 68px; | |
| } | |
| .admin-premium-header { | |
| flex-direction: column; | |
| gap: 16px; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .header-title { justify-content: center; } | |
| .header-left { align-items: center; } | |
| .header-right { width: 100%; justify-content: center; flex-wrap: wrap; } | |
| .admin-premium-kpi-grid { grid-template-columns: 1fr; gap: 12px; } | |
| .admin-premium-nav { flex-wrap: wrap; } | |
| .nav-btn { font-size: 0.78rem; padding: 9px 10px; } | |
| .section-premium { padding: 18px; } | |
| .section-premium-header { flex-direction: column; align-items: flex-start; gap: 14px; } | |
| .testimonials-premium-grid { grid-template-columns: 1fr; } | |
| .config-premium-grid { grid-template-columns: 1fr; } | |
| .search-premium-input { width: 180px; } | |
| .search-premium-input:focus { width: 210px; } | |
| .table-premium th, | |
| .table-premium td { padding: 10px 12px; font-size: 0.8rem; } | |
| } | |