/* ========================================================================== Admin UI — Unified Glossy Theme (dark & light) Works with theme.js (sets [data-theme="dark"|"light"] on /) ========================================================================== */ /* ----- Color System (Dark) ----- */ :root { /* Surfaces */ --bg: #0b0f14; --panel: #121822; --panel-2: #0f1520; --panel-3: #0e1521; /* deepest card interior */ /* Text */ --text: #e6edf3; --muted: #9fb1c1; /* Brand */ --primary: #6ea8ff; /* lighter for glossy */ --primary-600: #3b82f6; /* classic */ --primary-700: #2563eb; /* State */ --success: #16a34a; --danger: #ef4444; --warn: #f59e0b; /* Borders/Chrome */ --outline: #263241; --outline-soft: #1b2636; /* FX */ --radius: 12px; --radius-sm: 8px; --shadow: 0 18px 60px rgba(0,0,0,.35); --shadow-soft: 0 10px 30px rgba(0,0,0,.28); /* Glass / gloss helpers */ --glass: rgba(255,255,255,.06); --glass-2: rgba(255,255,255,.08); --glass-border: rgba(255,255,255,.12); /* Accent gradients */ --grad-1: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); --grad-2: linear-gradient(135deg, rgba(84,148,255,.22), rgba(156,110,255,.12) 45%, rgba(255,255,255,0) 70%); } /* ----- Color System (Light) ----- */ :root[data-theme="light"] { --bg: #f6f8fb; --panel: #ffffff; --panel-2: #f2f4f7; --panel-3: #ffffff; --text: #0f172a; --muted: #475569; --primary: #2563eb; --primary-600: #1e40af; --primary-700: #1c398e; --success: #15803d; --danger: #dc2626; --warn: #d97706; --outline: #d7dee8; --outline-soft: #e5e7eb; --shadow: 0 18px 50px rgba(0,0,0,.08); --shadow-soft: 0 10px 24px rgba(0,0,0,.06); --glass: rgba(0,0,0,.04); --glass-2: rgba(0,0,0,.06); --glass-border: rgba(0,0,0,.08); --grad-1: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0)); --grad-2: linear-gradient(135deg, rgba(37,99,235,.08), rgba(14,165,233,.05) 45%, rgba(0,0,0,0) 70%); } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; color: var(--text); background: radial-gradient(1200px 800px at 10% -10%, rgba(78,115,214,.18), transparent 60%), radial-gradient(900px 700px at 90% -15%, rgba(164,120,255,.14), transparent 55%), var(--bg); font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* Links */ a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ========================================================================== Layout frame ========================================================================== */ .admin-grid { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: auto 1fr; gap: 0; min-height: 100vh; } /* Header bar */ .admin-header-bar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 80; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--panel); border-bottom: 1px solid var(--outline); box-shadow: var(--shadow-soft); padding: 14px 18px 10px; } .page-title { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: .3px; } /* Breadcrumbs */ .breadcrumb-trail { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); } .breadcrumb-trail a { color: var(--text); opacity: .9; } .breadcrumb-trail a:hover { opacity: 1; } /* Sidebar - Updated for sticky behavior */ .admin-sidebar { border-right: 1px solid var(--outline); background: var(--grad-1), var(--panel); padding: 12px 10px 20px; position: sticky; top: 0; /* keep at top of viewport */ height: 100vh; overflow-y: auto; } #adminMain { padding: 18px; } /* Context bar */ .context-bar { background: var(--grad-1), var(--panel); border: 1px solid var(--outline); box-shadow: var(--shadow-soft); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; } .context-bar:empty { display: none; } /* Main content */ #adminMain { padding: 18px; } /* Context bar (page tools / filters) */ .context-bar { background: var(--grad-1), var(--panel); border: 1px solid var(--outline); box-shadow: var(--shadow-soft); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; } /* ========================================================================== Top Navigation (within sidebar in this layout) ========================================================================== */ .admin-top-nav .top-nav-links { list-style: none; padding: 0; margin: 0; } .admin-top-nav .top-nav-links > li { margin-bottom: 6px; } .admin-top-nav a, .admin-top-nav button { display: block; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--outline); color: var(--text); padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 1px 0 var(--glass-border); transition: transform .05s ease, background .15s ease, border-color .15s ease; } .admin-top-nav a:hover, .admin-top-nav button:hover { background: linear-gradient(180deg, var(--glass), transparent), var(--panel-2); border-color: var(--primary-600); } /* Dropdown in nav */ .admin-top-nav .dropdown > button { position: relative; } .admin-top-nav .dropdown-menu { margin-top: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--outline); background: var(--panel); box-shadow: var(--shadow); display: none; } .admin-top-nav .dropdown:focus-within .dropdown-menu, .admin-top-nav .dropdown:hover .dropdown-menu { display: block; } .admin-top-nav .dropdown-menu a { border-radius: 8px; background: transparent; border: 1px solid transparent; padding: 10px 10px; } .admin-top-nav .dropdown-menu a:hover { background: var(--glass); border-color: var(--glass-border); } /* Theme toggle button in nav */ #themeToggle.btn, #themeToggle, .btn.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), var(--panel-2); border: 1px solid var(--outline); color: var(--text); } #themeToggle:hover { border-color: var(--primary-600); } /* ========================================================================== Cards / Panels ========================================================================== */ .card, .table-card, .glass-card { background: var(--grad-2), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--panel); border: 1px solid var(--outline); border-radius: var(--radius); box-shadow: var(--shadow); } /* Generic spacing */ .card { padding: 14px; } /* Section header inside cards */ .section-title { margin: 0 0 10px; font-weight: 700; font-size: 12px; color: var(--muted); } /* ========================================================================== Tables (Manage Users, Dashboard metrics, etc.) ========================================================================== */ .table-card { overflow: visible; /* IMPORTANT: let dropdowns escape */ padding: 0; } .table { width: 100%; border-collapse: separate; border-spacing: 0; } .table thead th { text-align: left; font-weight: 800; font-size: 12px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--outline); padding: 12px 12px; } .table tbody td { padding: 12px; border-bottom: 1px solid var(--outline-soft); vertical-align: top; font-size: 14px; } .table td i { margin-right: 6px; } .primary-cell .user-name { font-weight: 800; } /* Row hover (subtle) */ .table tbody tr:hover td { background: rgba(255,255,255,.02); } :root[data-theme="light"] .table tbody tr:hover td { background: rgba(0,0,0,.03); } /* Dashboard metric table shape */ .metrics-table { width: 100%; border-collapse: collapse; } .metrics-table th, .metrics-table td { padding: 14px 16px; border-bottom: 1px solid var(--outline-soft); } .metrics-table th { width: 40%; background: var(--panel-2); text-transform: none; letter-spacing: 0; } /* ========================================================================== Buttons ========================================================================== */ .btnPrimary, .btnSecondary, .btnQuiet, .btnDanger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; text-decoration: none; user-select: none; cursor: pointer; border-radius: 12px; padding: 10px 14px; border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 18px rgba(0,0,0,.20); transition: transform .06s ease, filter .15s ease, background .15s ease, border-color .15s ease; } .btnSm { padding: 8px 10px; font-size: 12px; border-radius: 10px; } .btnMd { padding: 10px 14px; font-size: 14px; } .btnPrimary { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)), linear-gradient(135deg, #80b2ff, #6ea8ff 40%, #5ea0ff 75%), var(--primary); border-color: rgba(99, 143, 255, .65); } .btnPrimary:hover { filter: brightness(1.05); border-color: var(--primary-700); } .btnSecondary { color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), var(--panel-2); border-color: var(--outline); } .btnSecondary:hover { border-color: var(--primary-600); } .btnQuiet { background: transparent; border-color: var(--outline); color: var(--text); } .btnQuiet:hover { background: var(--glass); } .btnDanger { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)), linear-gradient(135deg, #ff7b7b, #ff5e5e 40%, #ff4d4d 75%), var(--danger); border-color: rgba(255, 128, 128, .6); } .btnDanger:hover { filter: brightness(1.04); } /* ========================================================================== Forms / Inputs ========================================================================== */ input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], select, textarea { width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), var(--panel-3); border: 1px solid var(--outline); color: var(--text); border-radius: 10px; padding: 10px 12px; outline: none; } :root[data-theme="light"] input[type], :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: #fff; } input:focus, select:focus, textarea:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(59,130,246,.25); } .field-desc { margin: 6px 0 0; color: var(--muted); font-size: 12px; } .validation-msg { font-size: 12px; } /* Summary / right rail sticky pattern */ .form-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; } @media (max-width: 980px) { .form-layout { grid-template-columns: 1fr; } } .form-summary { position: sticky; top: 86px; /* below header */ align-self: start; border: 1px solid var(--outline); background: var(--grad-2), var(--panel-2); border-radius: var(--radius); padding: 16px 16px 18px; box-shadow: var(--shadow); } .form-summary h2 { margin: 0 0 10px; font-size: 16px; } .summary-actions { display: grid; gap: 8px; margin-top: 10px; } /* ========================================================================== Badges (align with edit_user & users list) ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 6px; background: #1f2937; color: var(--text); border: 1px solid var(--outline); border-radius: 999px; padding: 6px 10px; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } .badge-role.admin { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.35); } .badge-role.moderator { background: rgba(234,179,8,.18); border-color: rgba(234,179,8,.38); } .badge-role.paid { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.38); } .badge-role.free, .badge-subscription { background: #223047; } .badge-status--banned { background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.45); } .badge-paid--yes { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.32); } .badge-paid--no { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.32); } /* ========================================================================== Users page extras: actions menu, toolbars, pagination ========================================================================== */ .actions-cell { position: relative; overflow: visible; } .actions-btn { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--outline); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), var(--panel-2); color: var(--text); } .actions-menu { position: absolute; top: 38px; right: 8px; min-width: 200px; background: var(--grad-1), var(--panel); border: 1px solid var(--outline); border-radius: 10px; padding: 8px; box-shadow: var(--shadow); z-index: 1000; } .actions-menu[hidden] { display: none !important; } .actions-menu [role="menuitem"], .actions-menu .btnQuiet { display: block; width: 100%; text-align: left; margin: 2px 0; border-radius: 8px; border: 1px solid transparent; padding: 8px 10px; } .actions-menu .btnQuiet:hover { background: var(--glass); border-color: var(--glass-border); } .selection-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--outline); border-radius: 12px; padding: 8px 10px; margin: 12px 0 0; } .selection-toolbar select, .selection-toolbar button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--outline); background: var(--panel-3); color: var(--text); } .selection-toolbar #selectedCount { color: var(--muted); margin-right: 8px; } .page-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .pagination { display: inline-flex; gap: 6px; align-items: center; } .pagination a, .pagination strong { padding: 6px 10px; border: 1px solid var(--outline); border-radius: 8px; background: var(--panel-3); color: var(--text); text-decoration: none; } .pagination strong { background: #1b2636; } :root[data-theme="light"] .pagination strong { background: #e2e8f0; } /* ========================================================================== Alerts & Toasts ========================================================================== */ .alert { border-radius: var(--radius-sm); padding: 12px 14px; margin: 14px 0; border: 1px solid var(--outline); background: var(--panel-2); box-shadow: var(--shadow-soft); } .alert.error { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); } .alert.success { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.08); } .toast { position: fixed; bottom: 16px; right: 16px; background: var(--panel); border: 1px solid var(--outline); color: var(--text); padding: 10px 12px; border-radius: 10px; opacity: 0; transform: translateY(8px); transition: .25s; box-shadow: var(--shadow); z-index: 9999; } .toast.show { opacity: 1; transform: translateY(0); } /* ========================================================================== Utility ========================================================================== */ .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* Small helpers */ .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .hidden { display: none; } .nowrap { white-space: nowrap; } /* ========================================================================== Page-specific polish (Dashboard & Edit User harmonization) ========================================================================== */ /* Dashboard layout: metrics + quick actions */ .dashboard-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 18px; } @media (max-width: 1040px) { .dashboard-grid { grid-template-columns: 1fr; } } /* Quick actions panel */ .quick-actions { background: var(--grad-2), var(--panel-2); border: 1px solid var(--outline); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; } .quick-actions h3 { margin: 0 0 10px; font-size: 14px; color: var(--muted); } .quick-actions .qa-list { display: grid; gap: 8px; } .quick-actions .qa-list .btnSecondary { justify-content: flex-start; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), var(--panel-3); } /* Edit user: make summary + save area compact */ .form-summary .btnPrimary, .form-summary .btnSecondary, .form-summary .btnDanger { width: 100%; } .form-summary .summary-actions .btnSm { padding: 8px 10px; } /* Ensure ANY table or card never clips floating menus */ .table-card, .card, .glass-card { overflow: visible; } /* ===== Admin table reset (fix broken tables) ===== */ .admin-grid .table-card { overflow: visible; padding: 0; } /* Force real table semantics inside admin, even if global CSS sets block */ .admin-grid table.table, .admin-grid .table-card table { display: table !important; width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; table-layout: auto !important; } .admin-grid table.table thead { display: table-header-group !important; } .admin-grid table.table tbody { display: table-row-group !important; } .admin-grid table.table tr { display: table-row !important; } .admin-grid table.table th, .admin-grid table.table td { display: table-cell !important; } /* Ensure consistent cell visuals */ .admin-grid table.table thead th { text-align: left; font-weight: 800; font-size: 12px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--outline); padding: 12px 12px; } .admin-grid table.table tbody td { padding: 12px; border-bottom: 1px solid var(--outline-soft); vertical-align: top; font-size: 14px; } .admin-grid table.table tbody tr:hover td { background: rgba(255,255,255,.02); } :root[data-theme="light"] .admin-grid table.table tbody tr:hover td { background: rgba(0,0,0,.03); } /* --- ADMIN TABLE HARD RESET (place at end of css/admin.css) --- */ .admin-grid table { display: table !important; border-collapse: separate !important; border-spacing: 0 !important; width: 100%; } .admin-grid thead { display: table-header-group !important; } .admin-grid tbody { display: table-row-group !important; } .admin-grid tfoot { display: table-footer-group !important; } .admin-grid tr { display: table-row !important; } .admin-grid th, .admin-grid td { display: table-cell !important; vertical-align: top; } /* Optional: if sticky header causes issues here, disable for logs */ .admin-grid .table-logs thead th { position: static !important; }