/* * admin.css — Shared chrome for Nerora admin pages. * * Loaded by base.leaf for every page on the site, but every rule is scoped * under `.admin-page` (applied to by base.leaf when currentPath starts * with /admin). This guarantees admin.css cannot affect non-admin pages — * critical because several selectors here (.btn, .btn-primary, .form-group, * .form-help, .modal-content) collide with selectors used by login, register, * settings, library, and other non-admin templates. * * Page-specific styles continue to live in their respective admin templates * and may override these defaults via the natural cascade order (admin.css * loads in base.leaf BEFORE template-inline styles). * * Note: s3-manager.leaf carries a scoped `.s3-manager .btn-primary { … !important }` * dual-blue swap — that is deliberate and remains inline. It will still work * because `.admin-page .s3-manager .btn-primary` is more specific than * `.admin-page .btn-primary`. */ /* ============================================================================= 1. Buttons ============================================================================= */ .admin-page .btn { display: inline-flex; align-items: center; gap: 0.3rem; /* width:auto neutralizes site.css `.btn-primary { width: 100% }` (intended for auth forms). Without this, every admin form button stretches full-width. This is the universal fix; the targeted per-list-page overrides that predated this rule have been removed (chore/174). */ width: auto; padding: 0.5rem 1rem; border: none; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; } .admin-page .btn:disabled { opacity: 0.5; cursor: not-allowed; } .admin-page .btn-primary { background: var(--accent-primary); color: var(--off-white); } .admin-page .btn-primary:hover { background: var(--navy-dark); transform: translateY(-1px); } .admin-page .btn-outline { background: transparent; color: var(--accent-primary); border: 2px solid var(--accent-primary); } .admin-page .btn-outline:hover { background: var(--accent-primary); color: var(--off-white); } .admin-page .btn-danger { background: #dc3545; color: white; } .admin-page .btn-danger:hover { background: #c82333; } .admin-page .btn-warning { background: #ffc107; color: #212529; } .admin-page .btn-warning:hover { background: #e0a800; } .admin-page .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; } .admin-page .btn-icon { font-size: 1.1rem; } /* ============================================================================= 2. Form chrome (user-form variant — the polished one) ============================================================================= */ .admin-page .admin-form-container { max-width: 900px; margin: 0 auto; padding: 2rem; } .admin-page .form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .admin-page .form-header h1 { color: var(--accent-primary); margin: 0; } .admin-page .form-card { background: var(--bg-secondary); border-radius: 12px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 1.5rem; } .admin-page .form-section { margin-bottom: 2rem; } .admin-page .form-section h3 { color: var(--text-primary); margin: 0 0 1.5rem 0; font-size: 1.2rem; } /* Section dividers: padding + border separate each section visually. */ .admin-page .form-section { padding-bottom: 2rem; border-bottom: 1px solid var(--border-color); } .admin-page .form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .admin-page .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .admin-page .form-group { margin-bottom: 1.5rem; } .admin-page .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-primary); } .admin-page .form-control { width: 100%; padding: 0.75rem; border: 2px solid var(--border-color); border-radius: 8px; font-size: 1rem; background: var(--bg-primary); color: var(--text-primary); transition: border-color 0.3s ease; box-sizing: border-box; } .admin-page .form-control:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(52, 92, 140, 0.1); } .admin-page .form-help { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; } /* Checkbox variant of .form-group — inline checkbox with label text beside it. */ .admin-page .form-group-checkbox { margin-bottom: 1.5rem; } .admin-page .form-group-checkbox .checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; font-weight: 600; color: var(--text-primary); } .admin-page .form-group-checkbox .checkbox-label input[type="checkbox"] { flex-shrink: 0; margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--accent-primary); cursor: pointer; } .admin-page .form-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; } /* Form actions separator: top border visually separates from last form section. */ .admin-page .form-actions { padding-top: 2rem; border-top: 1px solid var(--border-color); } /* ============================================================================= 3. Header actions ============================================================================= */ .admin-page .header-actions { display: flex; gap: 1rem; flex-wrap: nowrap; } /* ============================================================================= 4. Table action column ============================================================================= */ .admin-page .action-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ============================================================================= 5. Empty states (centered card variant) ============================================================================= */ .admin-page .empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-secondary); } .admin-page .empty-icon { font-size: 4rem; margin-bottom: 1rem; } /* ============================================================================= 6. User summary card (admin user pages) ============================================================================= */ /* ---------- User summary card (admin users only) ---------- */ .admin-page .user-info-header { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: var(--bg-primary); border-radius: 8px; margin-bottom: 2rem; /* margin-bottom from edit-user.leaf; user-detail.leaf lacked it but gains ~2rem space between the summary card and the entitlements card — minor, intentional. */ } .admin-page .user-avatar { width: 60px; height: 60px; background: var(--accent-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; /* flex-shrink: 0 from user-detail.leaf; prevents avatar squish when name/email grows. */ } .admin-page .user-details h2 { margin: 0 0 0.5rem 0; color: var(--text-primary); } .admin-page .user-details p { margin: 0 0 0.5rem 0; color: var(--text-secondary); } /* ============================================================================= 7. Role badges ============================================================================= */ .admin-page .role-badge { padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; } .admin-page .role-badge.role-admin { background: var(--gold); color: var(--navy-dark); } .admin-page .role-badge.role-member { background: var(--blue-medium); color: var(--off-white); } .admin-page .role-badge.role-guest { background: var(--grey); color: var(--off-white); } /* ============================================================================= 7. Status badges (user/account variant) ============================================================================= */ .admin-page .status-badge { padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .admin-page .status-badge.verified { background: #d4edda; color: #155724; } .admin-page .status-badge.unverified { background: #fff3cd; color: #856404; } /* Order status variants — used by admin/orders and admin/order-detail. */ .admin-page .status-badge.order-pending { background: #fff3cd; color: #856404; } .admin-page .status-badge.order-paid { background: #cce5ff; color: #004085; } .admin-page .status-badge.order-fulfilled { background: #d4edda; color: #155724; } .admin-page .status-badge.order-refunded { background: #e9ecef; color: #495057; } .admin-page .status-badge.order-cancelled { background: #f8d7da; color: #721c24; } /* Refund row status variants — Stripe's four possible refund statuses. Used by admin/order-detail refund history table. refund-succeeded — green (mirrors verified / order-fulfilled) refund-pending — amber (mirrors order-pending / unverified) refund-failed — red (mirrors order-cancelled; distinct from refund-canceled) refund-canceled — grey (mirrors order-refunded; distinct from refund-failed) */ .admin-page .status-badge.refund-succeeded { background: #d4edda; color: #155724; } .admin-page .status-badge.refund-pending { background: #fff3cd; color: #856404; } .admin-page .status-badge.refund-failed { background: #f8d7da; color: #721c24; } .admin-page .status-badge.refund-canceled { background: #e9ecef; color: #495057; } .admin-page .current-user-badge { background: var(--accent-secondary); color: var(--navy-dark); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; } /* ============================================================================= 8. Modal partials (NOT the base .modal rule) ============================================================================= */ .admin-page .modal-content { background: var(--bg-secondary); padding: 2rem; border-radius: 12px; max-width: 500px; width: 90%; } .admin-page .modal-content h3 { margin: 0 0 1rem 0; color: var(--text-primary); } .admin-page .modal-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; } .admin-page .modal-content .warning { color: #dc3545; font-weight: 600; } /* ============================================================================= 9. Spinner + keyframes ============================================================================= */ .admin-page .spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--accent-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================================================= 10. Admin list pages (users, courses, lessons) ============================================================================= */ /* Table containers — background card wrapping each admin list table. */ .admin-page .users-table-container, .admin-page .courses-table-container, .admin-page .lessons-table-container { background: var(--bg-secondary); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Tables — reset and full-width. */ .admin-page .users-table, .admin-page .courses-table, .admin-page .lessons-table { width: 100%; border-collapse: collapse; } /* Table header row — shared styling for all three list tables. Note: users-table th/td omits vertical-align:top (its row content differs). Courses and lessons carry vertical-align:top as page-specific rules retained inline. */ .admin-page .courses-table th, .admin-page .courses-table td, .admin-page .lessons-table th, .admin-page .lessons-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: top; } .admin-page .users-table th, .admin-page .users-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } /* Table header cells — accent background row. */ .admin-page .users-table th, .admin-page .courses-table th, .admin-page .lessons-table th { background: var(--bg-primary); font-weight: 600; color: var(--text-primary); } /* Page header layout — flex row with heading + action buttons. */ .admin-page .users-header, .admin-page .courses-header, .admin-page .lessons-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; } /* Page heading colour — courses and users set this explicitly. Lessons.leaf omits a .lessons-header h1 rule so only the two confirmed sources are grouped here. */ .admin-page .users-header h1, .admin-page .courses-header h1 { color: var(--accent-primary); margin: 0; } /* Thumbnail images used in course and lesson list rows. */ .admin-page .course-thumb, .admin-page .lesson-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color); } /* ============================================================================= 11. Entitlements (per-user and per-course admin detail pages) ============================================================================= Shared chrome for entitlement management pages (user-detail, course-detail). The two pages render the same conceptual table — a list of grants with status, source, and revoke/restore actions — and previously carried byte-identical inline CSS for it. Consolidated here so a future entitlement-bearing detail page picks up the same look automatically. */ .admin-page .entitlements-table { width: 100%; border-collapse: collapse; } .admin-page .entitlements-table th, .admin-page .entitlements-table td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; } .admin-page .entitlements-table th { font-weight: 600; color: var(--text-primary); background: var(--bg-primary); } .admin-page .entitlements-table tbody tr:last-child td { border-bottom: none; } .admin-page .entitlements-table tbody tr:hover { background: var(--bg-primary); } .admin-page .entitlement-status-active { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; background: #d4edda; color: #155724; } .admin-page .entitlement-status-revoked { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; background: #e9ecef; color: #6c757d; } .admin-page .revoked-at { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.2rem; font-style: italic; } .admin-page .entitlements-empty { padding: 1rem; color: var(--text-secondary); font-style: italic; } .admin-page .grant-empty { padding: 0.75rem 0; color: var(--text-secondary); font-style: italic; font-size: 0.95rem; } /* Inline action forms in entitlement table cells (revoke / restore POSTs) */ .admin-page .entitlement-actions form { display: inline; } /* Wraps the entitlements table to allow horizontal scroll on narrow viewports */ .admin-page .table-wrapper { overflow-x: auto; } /* Grant form: extra breathing room before the submit button */ .admin-page .user-form .btn-primary { margin-top: 0.5rem; } /* ============================================================================= 12. Stripe sync UI — flash strip, sync banner, needs-sync badge, inline forms Added for #68 (phase 4 — backfill and retry). ============================================================================= */ /* Flash message strip — rendered above the courses table on redirect. */ .admin-page .admin-flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.95rem; font-weight: 500; } .admin-page .admin-flash-success { background: #d4edda; color: #155724; } .admin-page .admin-flash-warning { background: #fff3cd; color: #856404; } .admin-page .admin-flash-error { background: #f8d7da; color: #721c24; } .admin-page .admin-flash-info { background: #cce5ff; color: #004085; } /* Sync banner — flexbox row: message left, button right. */ .admin-page .sync-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-radius: 6px; background: #fff3cd; color: #856404; margin-bottom: 1rem; flex-wrap: wrap; } /* Needs-sync badge — small chip in the Title column. */ .admin-page .sync-needed-badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.5rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: #fff3cd; color: #856404; margin-left: 0.4rem; vertical-align: middle; white-space: nowrap; } /* Inline form — wraps a single POST button in the Actions column. */ .admin-page .inline-form { display: inline-block; } /* ============================================================================= 13. Credential action rows and status pills Used by edit-user.leaf (send-reset-email) and user-detail.leaf (mark-verified). Extracted here so neither page duplicates the other. ============================================================================= */ /* Action row: flex container holding the action button and its status pill. Both credential-reset (edit-user) and mark-verified (user-detail) use this. */ .admin-page .credential-actions { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* Status pill shared by credential-reset and mark-verified responses. */ .admin-page .credential-status { padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.9rem; } .admin-page .credential-status.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .admin-page .credential-status.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* ---------- Responsive (mobile <= 768px) ---------- */ @media (max-width: 768px) { .admin-page .admin-form-container { padding: 1rem; } .admin-page .form-card { padding: 1.25rem; } .admin-page .form-header { flex-direction: column; align-items: stretch; } .admin-page .form-row { grid-template-columns: 1fr; } .admin-page .user-info-header { flex-direction: column; text-align: center; } /* List page headers stack on mobile */ .admin-page .users-header, .admin-page .courses-header, .admin-page .lessons-header { flex-direction: column; align-items: stretch; } /* All list tables: scroll horizontally on narrow viewports so the Actions column stays reachable. Tables get a min-width below; users gets its own 800px in users.leaf because it has more columns. */ .admin-page .users-table-container, .admin-page .courses-table-container, .admin-page .lessons-table-container { overflow-x: auto; } .admin-page .courses-table, .admin-page .lessons-table { min-width: 700px; } /* Entitlements table scrolls horizontally on narrow viewports */ .admin-page .entitlements-table { min-width: 600px; } }