/* OnAPB Admin - Kinetic Arena Design System "The Editorial Athlete" - Admin Extension */ :root { --admin-sidebar-bg: #0A0A0A; --admin-sidebar-active: #B00000; --admin-content-bg: #F8F9FF; --admin-surface: #FFFFFF; --admin-primary: #B00000; --admin-text-main: #1A1A1A; --admin-text-muted: #666666; --admin-outline: #E0E0E0; /* Typography */ --admin-font-header: 'Space Grotesk', sans-serif; --admin-font-body: 'Plus Jakarta Sans', sans-serif; } body { background-color: var(--admin-content-bg); font-family: var(--admin-font-body); color: var(--admin-text-main); overflow-x: hidden; } /* Sidebar Redesign */ .admin-sidebar { background: var(--admin-sidebar-bg) !important; width: 280px; height: 100vh; position: fixed; left: 0; top: 0; z-index: 1000; transition: all 0.3s ease; border-right: none !important; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--admin-primary) #000; } .admin-sidebar::-webkit-scrollbar { width: 4px; } .admin-sidebar::-webkit-scrollbar-track { background: #000; } .admin-sidebar::-webkit-scrollbar-thumb { background-color: var(--admin-primary); } .sidebar-header { padding: 2rem; background: #000; border-bottom: 4px solid var(--admin-sidebar-active); } .sidebar-logo { height: 40px; filter: brightness(0) invert(1); margin-right: 10px; } .sidebar-title { font-family: var(--admin-font-header); font-weight: 700; font-size: 1.2rem; color: #fff; letter-spacing: -0.02em; } .sidebar-nav { padding: 1.5rem 0; } .sidebar-link { display: flex; align-items: center; padding: 0.85rem 2rem; color: rgba(255,255,255,0.6); text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; transition: all 0.2s; } .sidebar-link i { font-size: 1.1rem; margin-right: 1rem; } .sidebar-link:hover { color: #fff; background: rgba(255,255,255,0.05); } .sidebar-link.active { background: var(--admin-sidebar-active); color: #fff; } /* Main Content Area */ .admin-main { margin-left: 280px; min-height: 100vh; transition: all 0.3s ease; } .admin-topbar { background: #fff; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; border-bottom: 1px solid var(--admin-outline); } .admin-content { padding: 2.5rem; } /* Kinetic Admin Cards */ .admin-card { background: #fff; border: none; border-radius: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 1.5rem; padding: 2rem; } .admin-card-header { border-bottom: 2px solid var(--admin-content-bg); margin-bottom: 1.5rem; padding-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; } .admin-card-header h3 { font-family: var(--admin-font-header); font-weight: 700; margin-bottom: 0; text-transform: uppercase; font-size: 1.1rem; } /* Stats Cards */ .stat-card { background: #000; color: #fff; padding: 2rem; position: relative; overflow: hidden; margin-bottom: 1rem; } .stat-card .stat-value { font-family: var(--admin-font-header); font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 0.5rem; } .stat-card .stat-label { text-transform: uppercase; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); } /* High Contrast Table */ .kinetic-table { width: 100%; border-collapse: collapse; } .kinetic-table th { background: var(--admin-content-bg); padding: 1rem; text-align: left; font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--admin-text-muted); } .kinetic-table td { padding: 1.2rem 1rem; border-bottom: 1px solid var(--admin-outline); font-size: 0.9rem; } .kinetic-table tr:hover td { background: #fafafa; } /* Admin Buttons */ .btn-admin-primary { background: var(--admin-primary); color: #fff; border: none; padding: 0.75rem 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; transition: 0.3s; } .btn-admin-primary:hover { background: #900000; transform: translateY(-2px); } .btn-admin-action { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; margin-right: 5px; transition: 0.2s; } /* Responsive */ @media (max-width: 991.98px) { .admin-sidebar { left: -280px; } .admin-sidebar.show { left: 0; } .admin-main { margin-left: 0; } }