/*
 * admin-videos.css — Admin video list/create/edit surfaces.
 *
 * Static design-prototype pass for #309/#314 (see AdminController.swift for
 * the TEMPORARY fixture-backed admin routes this styles, and routes.swift
 * for the shared VideoFixture fixture data reused from the public
 * browse/watch prototype).
 *
 * Every rule here is scoped under `.admin-page`, matching admin.css's own
 * convention (loaded globally by base.leaf, scoped so it cannot bleed into
 * non-admin pages). Reuses admin.css's shared chrome directly wherever
 * possible (.btn, .form-group, .form-control, .form-header, .form-card,
 * .form-actions, .form-help, .action-buttons, .empty-state, .empty-icon,
 * .status-badge) rather than redefining it here. .admin-form-container
 * (admin.css's 900px-max single-column wrapper) is reused by the create/edit
 * video form pages only — the list page (videos.leaf) wraps in its own bare
 * `.admin-videos` div instead, matching the admin-courses/admin-users/
 * admin-lessons convention, since a list page's action-button row needs the
 * full viewport width, not a narrow form column.
 *
 * Known, deliberate duplication: the table container/table/header rules
 * below (.admin-videos-table-container/.admin-videos-table/
 * .admin-videos-header) mirror admin.css's existing shared
 * ".users-table, .courses-table, .lessons-table" pattern (admin.css
 * section 10) rather than extending that selector group directly.
 * admin.css has no headroom under the repo's 800-line file cap (775/800
 * at the time this file was created) to add a fourth name to that group,
 * so this ~20-line table-chrome duplication is intentional and flagged
 * here per AGENTS.md §5 rather than silently copied in.
 *
 * Class names were grepped against every file in Public/css/*.css before
 * being added, to avoid repeating the .video-card collision bug from the
 * public browse-grid pass (see video-surfaces.css's header comment).
 */

/* ---------------------------------------------------------------------
   List page
   --------------------------------------------------------------------- */

.admin-page .admin-videos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-page .admin-videos-table-container {
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-page .admin-videos-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-page .admin-videos-table th,
.admin-page .admin-videos-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.admin-page .admin-videos-table th {
  background: var(--bg-primary);
  font-weight: 600;
  color: var(--text-primary);
}

/* --bg-primary matches the page's own background (dark mode), so the th's
   opaque background paints over the container's rounded top corners even
   though .admin-videos-table-container itself is still border-radius: 12px
   underneath. Round the header row's own outer corners to match so they
   don't visually square off what the container already clips via
   overflow: hidden. Same 12px value as the container — must match exactly. */
.admin-page .admin-videos-table th:first-child {
  border-top-left-radius: 12px;
}

.admin-page .admin-videos-table th:last-child {
  border-top-right-radius: 12px;
}

/* Same class of bug as the corner-radius fix above, on the bottom edge:
   the last row's border-bottom is a hard-edged line running full-width,
   flush to the container's edges, which squares off the bottom even
   though .admin-videos-table-container's border-radius: 12px is still
   correctly clipping the background underneath. The container's own edge
   already provides the visual boundary, so no divider line is needed
   after the final row. */
.admin-page .admin-videos-table tr:last-child td {
  border-bottom: none;
}

.admin-page .admin-videos-muted {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.admin-page .admin-videos-table-title {
  font-weight: 600;
}

.admin-page .admin-videos-thumb {
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.admin-page .admin-videos-thumb-img {
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
}

/* Table auto-layout gives the last column (Actions) whatever width the other
   content-driven columns don't claim, which is wider than the buttons need.
   admin.css's shared .action-buttons has no justify-content (flex-start),
   leaving a visible gap after the last button. Override here, scoped to the
   videos table only — do not change the shared base rule, since that would
   shift button alignment on courses/users/lessons too without review. */
.admin-page .admin-videos-table .action-buttons {
  justify-content: flex-end;
}

/* Preview modal chrome — the base .modal/.modal-content overlay now lives
   in admin.css (issue #314); .video-frame is the shared, unscoped chrome
   from video-player.css (loaded globally, not admin-specific), so only the
   modal-sizing/header/close-button bits unique to this preview are here.
   Second occurrence of this specific trio (lessons.leaf's video preview
   modal has the first, inline) — small enough (three short rules) not to
   warrant a shared partial yet; flagged in the #314 report per AGENTS.md §5. */
.admin-page .video-modal-content {
  max-width: 900px;
  width: 95%;
}

.admin-page .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.admin-page .modal-header h3 {
  margin: 0;
}

.admin-page .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
}

.admin-page .modal-close:hover {
  color: var(--text-primary);
}

/* Visibility badges — new modifiers on admin.css's existing .status-badge
   base (padding/radius/font already defined there; not redefined here). */
.admin-page .status-badge.visibility-public {
  background: #d4edda;
  color: #155724;
}

.admin-page .status-badge.visibility-unlisted {
  background: #e9ecef;
  color: #495057;
}

/* Transcode-state badges (issue #369) — same amber/red pairing
   admin.css already uses for order-pending/unverified and
   order-cancelled/refund-failed. Rendered alongside the visibility
   badge above, not replacing it. */
.admin-page .status-badge.transcode-pending {
  background: #fff3cd;
  color: #856404;
  margin-left: 0.4rem;
}

.admin-page .status-badge.transcode-failed {
  background: #f8d7da;
  color: #721c24;
  margin-left: 0.4rem;
}

/* ---------------------------------------------------------------------
   Create / edit form (partials/admin-video-form.leaf)
   --------------------------------------------------------------------- */

.admin-page .admin-video-details {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.admin-page .admin-video-details h3 {
  margin: 0 0 0.25rem;
}

.admin-page .admin-video-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
}

.admin-page .admin-video-detail dt {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0 0 0.25rem;
}

.admin-page .admin-video-detail dd {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}